diff --git a/public/images/characters/character-case.png b/public/images/characters/character-case.png
new file mode 100644
index 0000000..41588cf
Binary files /dev/null and b/public/images/characters/character-case.png differ
diff --git a/src/components/home/ActiveCasesSection.module.scss b/src/components/home/ActiveCasesSection.module.scss
index 9d575a6..a3d5c7a 100644
--- a/src/components/home/ActiveCasesSection.module.scss
+++ b/src/components/home/ActiveCasesSection.module.scss
@@ -64,10 +64,23 @@
   color: v.$color-black-400;
 }
 
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.r(12);
+  padding: fn.r(24) 0;
+}
+
+.emptyImage {
+  width: fn.r(80);
+  height: fn.r(80);
+  object-fit: contain;
+}
+
 .empty {
   @include m.text-body-s;
 
   color: v.$color-black-400;
   text-align: center;
-  padding: fn.r(24) 0;
 }
diff --git a/src/components/home/ActiveCasesSection.tsx b/src/components/home/ActiveCasesSection.tsx
index 0d28f6f..cc50edc 100644
--- a/src/components/home/ActiveCasesSection.tsx
+++ b/src/components/home/ActiveCasesSection.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import CaseCard from '@/components/ui/CaseCard'
 import Avatar, { AvatarGroup } from '@/components/ui/Avatar'
@@ -28,7 +29,17 @@ export default function ActiveCasesSection() {
       <h2 className={styles.title}>진행중인 사건</h2>
 
       {cases.length === 0 ? (
-        <p className={styles.empty}>아직 진행중인 사건이 없어요</p>
+        <div className={styles.emptyState}>
+          <Image
+            src="/images/characters/character-case.png"
+            alt=""
+            width={80}
+            height={80}
+            className={styles.emptyImage}
+            priority
+          />
+          <p className={styles.empty}>아직 진행중인 사건이 없어요</p>
+        </div>
       ) : (
         <ul className={styles.list}>
           {cases.map((item) => (
diff --git a/src/components/home/NewCaseButton.module.scss b/src/components/home/NewCaseButton.module.scss
index 5395a64..f407f60 100644
--- a/src/components/home/NewCaseButton.module.scss
+++ b/src/components/home/NewCaseButton.module.scss
@@ -61,6 +61,14 @@
   gap: fn.r(8);
 }
 
+.errorMessage {
+  @include m.text-label-s;
+
+  color: #e53e3e;
+  text-align: center;
+  width: 100%;
+}
+
 .item {
   display: flex;
   align-items: center;
diff --git a/src/components/home/NewCaseButton.tsx b/src/components/home/NewCaseButton.tsx
index b842698..b8a5550 100644
--- a/src/components/home/NewCaseButton.tsx
+++ b/src/components/home/NewCaseButton.tsx
@@ -16,6 +16,8 @@ const CATEGORY_ITEMS: { category: CategoryGroup; label: string }[] = [
 
 export default function NewCaseButton() {
   const [isOpen, setIsOpen] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const router = useRouter()
 
   useEffect(() => {
@@ -23,9 +25,30 @@ export default function NewCaseButton() {
     return () => { document.body.style.overflow = '' }
   }, [isOpen])
 
-  const handleCategoryClick = (category: CategoryGroup) => {
+  const handleCategoryClick = async (category: CategoryGroup) => {
+    if (isCreating) return
     setIsOpen(false)
-    router.push(`/disputes/test/statement?category=${category}`)
+    setIsCreating(true)
+    setErrorMessage(null)
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 5000)
+    try {
+      const res = await fetch('/api/rooms', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ categoryGroup: category }),
+        signal: controller.signal,
+      })
+      const json = await res.json()
+      if (!json.success) throw new Error(json.error?.message)
+      router.push(`/disputes/${json.data.id}/statement?category=${category}`)
+    } catch (err) {
+      setErrorMessage(err instanceof Error && err.message ? err.message : '사건 생성에 실패했습니다. 다시 시도해주세요.')
+      setIsOpen(true)
+    } finally {
+      clearTimeout(timeout)
+      setIsCreating(false)
+    }
   }
 
   return (
@@ -39,8 +62,11 @@ export default function NewCaseButton() {
         >
           <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
             <div className={styles.categoryBox}>
+              {errorMessage && (
+                <p className={styles.errorMessage}>{errorMessage}</p>
+              )}
               {CATEGORY_ITEMS.map(({ category, label }) => (
-                <button key={category} className={styles.item} onClick={() => handleCategoryClick(category)}>
+                <button key={category} className={styles.item} onClick={() => handleCategoryClick(category)} disabled={isCreating}>
                   <CategoryIcon category={category} />
                   <span className={styles.itemLabel}>{label}</span>
                 </button>