diff --git a/frontend/package.json b/frontend/package.json
index acbd51a..9cabe43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,10 +9,10 @@
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "axios": "^1.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "axios": "^1.6.3",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
@@ -23,6 +23,6 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
-    "vite": "^5.0.10"
+    "vite": "^7.3.1"
   }
 }
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index af5b02c..18ce114 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,43 +1,115 @@
-import { Outlet, Link } from 'react-router-dom';
+import { Outlet, Link } from "react-router-dom";
+import { useState } from "react";
 
 const Layout = () => {
+  const [open, setOpen] = useState(false);
+
   return (
     <div className="min-h-screen bg-gray-50">
       <nav className="bg-white shadow-sm">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex">
-              <Link to="/" className="flex-shrink-0 flex items-center">
-                <h1 className="text-xl font-bold text-gray-900">Comic Generator</h1>
-              </Link>
-              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-                <Link
-                  to="/"
-                  className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-                >
-                  Home
-                </Link>
-                <Link
-                  to="/comics"
-                  className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-                >
-                  Comics
-                </Link>
-                <Link
-                  to="/comics/create"
-                  className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-                >
-                  Create
-                </Link>
-                <Link
-                  to="/manga-ai"
-                  className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+
+          <div className="flex justify-between h-16 items-center">
+
+            {/* Logo */}
+            <Link to="/" className="flex-shrink-0 flex items-center">
+              <h1 className="text-xl font-bold text-gray-900">
+                Comic Generator
+              </h1>
+            </Link>
+
+            {/* Desktop Menu */}
+            <div className="hidden md:flex md:space-x-8">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-gray-700 inline-flex items-center text-sm font-medium"
+              >
+                Home
+              </Link>
+
+              <Link
+                to="/comics"
+                className="text-gray-500 hover:text-gray-700 inline-flex items-center text-sm font-medium"
+              >
+                Comics
+              </Link>
+
+              <Link
+                to="/comics/create"
+                className="text-gray-500 hover:text-gray-700 inline-flex items-center text-sm font-medium"
+              >
+                Create
+              </Link>
+
+              <Link
+                to="/manga-ai"
+                className="text-gray-500 hover:text-gray-700 inline-flex items-center text-sm font-medium"
+              >
+                Manga AI
+              </Link>
+            </div>
+
+            {/* Hamburger Button */}
+            <div className="flex items-center md:hidden">
+              <button
+                onClick={() => setOpen(!open)}
+                className="p-2 rounded-md text-gray-500 hover:bg-gray-100"
+              >
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
                 >
-                  Manga AI
-                </Link>
-              </div>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                </svg>
+              </button>
             </div>
+
           </div>
+
+          {/* Mobile Menu */}
+          {open && (
+            <div className="md:hidden pb-3 space-y-1">
+              <Link
+                to="/"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Home
+              </Link>
+
+              <Link
+                to="/comics"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Comics
+              </Link>
+
+              <Link
+                to="/comics/create"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Create
+              </Link>
+
+              <Link
+                to="/manga-ai"
+                onClick={() => setOpen(false)}
+                className="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Manga AI
+              </Link>
+            </div>
+          )}
+
         </div>
       </nav>
 
@@ -50,4 +122,4 @@ const Layout = () => {
   );
 };
 
-export default Layout;
+export default Layout;
\ No newline at end of file
diff --git a/frontend/src/pages/CreateComicPage.jsx b/frontend/src/pages/CreateComicPage.jsx
index e39b608..51b05b1 100644
--- a/frontend/src/pages/CreateComicPage.jsx
+++ b/frontend/src/pages/CreateComicPage.jsx
@@ -50,7 +50,7 @@ export default function CreateComicPage() {
   }
 
   return (
-    <div className="px-4 py-6 sm:px-0">
+    <div className="px-4 py-20 sm:px-0 justify-center items-center flex flex-col">
       <h2 className="text-2xl font-bold text-gray-900 mb-2">Create Comic with AI</h2>
       <p className="text-gray-500 mb-6">
         Describe your story. AI will split it into panels and generate manga-style art.