diff --git a/src/renderer/src/assets/empty-image/auto-column-description.png b/src/renderer/src/assets/empty-image/auto-column-description.png
new file mode 100644
index 0000000..95294ef
Binary files /dev/null and b/src/renderer/src/assets/empty-image/auto-column-description.png differ
diff --git a/src/renderer/src/assets/empty-image/natural-language-query.png b/src/renderer/src/assets/empty-image/natural-language-query.png
new file mode 100644
index 0000000..c068e90
Binary files /dev/null and b/src/renderer/src/assets/empty-image/natural-language-query.png differ
diff --git a/src/renderer/src/assets/empty-image/query-result.png b/src/renderer/src/assets/empty-image/query-result.png
new file mode 100644
index 0000000..c2e8ab4
Binary files /dev/null and b/src/renderer/src/assets/empty-image/query-result.png differ
diff --git a/src/renderer/src/components/workspace/feature-card.tsx b/src/renderer/src/components/workspace/feature-card.tsx
index acf0720..14765b3 100644
--- a/src/renderer/src/components/workspace/feature-card.tsx
+++ b/src/renderer/src/components/workspace/feature-card.tsx
@@ -7,7 +7,7 @@ interface FeatureCardProps {
 export function FeatureCard({ card }: FeatureCardProps): React.JSX.Element {
   return (
     <div className="flex-1 bg-gradient-to-b from-stone-900 to-neutral-800 rounded-[20px] outline-1 outline-offset-[-1px] outline-neutral-700 flex flex-col justify-start items-center overflow-hidden">
-      <div className="w-full h-48 bg-neutral-700" />
+      <img src={card.image} alt={card.title} className="w-full h-48 object-cover" />
       <div className="self-stretch p-5 flex flex-col justify-center items-center gap-4">
         <div className="self-stretch text-center text-violet-400 text-xs font-medium font-['Pretendard'] leading-none">
           {card.title}
diff --git a/src/renderer/src/components/workspace/types.ts b/src/renderer/src/components/workspace/types.ts
index ac5f4a2..eb4144c 100644
--- a/src/renderer/src/components/workspace/types.ts
+++ b/src/renderer/src/components/workspace/types.ts
@@ -11,5 +11,5 @@ export interface NavItem {
 export interface FeatureCardData {
   title: string
   description: React.ReactNode
-  image?: string
+  image: string
 }
diff --git a/src/renderer/src/components/workspace/workspace-empty-state.tsx b/src/renderer/src/components/workspace/workspace-empty-state.tsx
index 459233f..dafe01c 100644
--- a/src/renderer/src/components/workspace/workspace-empty-state.tsx
+++ b/src/renderer/src/components/workspace/workspace-empty-state.tsx
@@ -1,6 +1,9 @@
 import { Plus } from 'lucide-react'
 import { FeatureCard } from './feature-card'
 import type { FeatureCardData } from './types'
+import naturalQueryImage from '../../assets/empty-image/natural-language-query.png'
+import queryResultImage from '../../assets/empty-image/query-result.png'
+import autoColumnImage from '../../assets/empty-image/auto-column-description.png'
 
 const featureCards: FeatureCardData[] = [
   {
@@ -11,7 +14,8 @@ const featureCards: FeatureCardData[] = [
         <br />
         자연어로 입력하면 쿼리를 만들어줘요.
       </>
-    )
+    ),
+    image: naturalQueryImage
   },
   {
     title: '쿼리 실행 결과 확인',
@@ -21,7 +25,8 @@ const featureCards: FeatureCardData[] = [
         <br />
         결과는 표로 정리돼 한눈에 보여요.
       </>
-    )
+    ),
+    image: queryResultImage
   },
   {
     title: '자동 컬럼 설명 생성',
@@ -31,7 +36,8 @@ const featureCards: FeatureCardData[] = [
         <br />
         이해하기 쉬운 설명을 자동으로 생성해줘요.
       </>
-    )
+    ),
+    image: autoColumnImage
   }
 ]