diff --git a/package-lock.json b/package-lock.json
index c7bf38c..9c98c88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-hook-form": "^7.51.4",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^0.9.1",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -19548,6 +19549,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.1.tgz",
+      "integrity": "sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/package.json b/package.json
index 5f552a6..684a6e7 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-hook-form": "^7.51.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/scripts/seed.ts b/scripts/seed.ts
index 0078853..c8381cc 100644
--- a/scripts/seed.ts
+++ b/scripts/seed.ts
@@ -11,7 +11,7 @@ async function seedPosts() {
       .createTable("posts")
       .addColumn("id", "serial", (cb) => cb.primaryKey())
       .addColumn("title", "varchar(255)", (cb) => cb.notNull())
-      .addColumn("description", "varchar(255)", (cb) => cb.notNull())
+      .addColumn("description", "text", (cb) => cb.notNull())
       .addColumn("createdAt", sql`timestamp with time zone`, (cb) =>
         cb.defaultTo(sql`current_timestamp`)
       )
diff --git a/src/app/admin/posts-table.tsx b/src/app/admin/posts-table.tsx
index 28cc85c..a96ace6 100644
--- a/src/app/admin/posts-table.tsx
+++ b/src/app/admin/posts-table.tsx
@@ -2,7 +2,6 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { BlogPost } from "@/app/components/posts-list/posts-list";
 import { Edit as EditIcon, Trash2Icon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
@@ -19,6 +18,7 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { DataTable } from "./data-table";
+import { BlogPost } from "@/app/lib/definitions";
 
 interface PostsTableProps {
   posts: BlogPost[];
@@ -33,12 +33,6 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => {
     router.refresh();
   };
 
-  const onCreatePost = () => {
-    const params = new URLSearchParams();
-    params.set("overlay", "new-post");
-    router.replace(`${pathname}?${params.toString()}`);
-  };
-
   const onEditPost = (id: number) => {
     const params = new URLSearchParams();
     params.set("overlay", "edit-post");
@@ -97,10 +91,6 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => {
   ];
   return (
     <div>
-      <Button className="my-2" onClick={onCreatePost}>
-        <span className="pr-2">Add Post</span>
-        <EditIcon className="h-4 w-4" />
-      </Button>
       <DataTable columns={columns} data={posts} />
     </div>
   );
diff --git a/src/app/components/header/compose-icon.png b/src/app/components/header/compose-icon.png
new file mode 100644
index 0000000..161d6e3
Binary files /dev/null and b/src/app/components/header/compose-icon.png differ
diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
new file mode 100644
index 0000000..9790ef5
--- /dev/null
+++ b/src/app/components/header/header.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Drawer } from "vaul";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import ComposeLogo from "./compose-icon.png";
+import React from "react";
+import { Menu } from "./menu";
+import { MenuIcon } from "lucide-react";
+
+interface HeaderProps {}
+
+export const Header: React.FC<HeaderProps> = () => {
+  return (
+    <header className="border-b mb-10 py-2 sticky top-0 flex-none w-full mx-auto bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-800">
+      <div className="flex gap-2 max-w-2xl mx-auto items-center justify-between container">
+        <Link className="flex gap-2 relative items-center" href="/">
+          <Image
+            src={ComposeLogo}
+            alt="Simple Press Logo"
+            className="object-contain"
+            height={50}
+          />
+          <h1>Simple Press</h1>
+        </Link>
+        <div className="flex gap-4 items-center">
+          <Menu className="hidden md:block" />
+        </div>
+
+        <Drawer.Root direction="right">
+          <Drawer.Trigger asChild className="md:hidden">
+            <Button size="icon" variant="ghost" asChild>
+              <MenuIcon className="h-4 w-4 justify-end" />
+            </Button>
+          </Drawer.Trigger>
+          <Drawer.Portal>
+            <Drawer.Overlay className="fixed inset-0 bg-black/40" />
+            <Drawer.Content className="bg-white flex flex-col h-full w-40 mt-24 fixed bottom-0 right-0 py-10">
+              <div className="flex flex-col items-center justify-center">
+                <Menu mobile />
+              </div>
+            </Drawer.Content>
+          </Drawer.Portal>
+        </Drawer.Root>
+      </div>
+    </header>
+  );
+};
diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx
new file mode 100644
index 0000000..924cc88
--- /dev/null
+++ b/src/app/components/header/index.tsx
@@ -0,0 +1 @@
+export { Header } from "./header";
diff --git a/src/app/components/header/menu.tsx b/src/app/components/header/menu.tsx
new file mode 100644
index 0000000..204fca7
--- /dev/null
+++ b/src/app/components/header/menu.tsx
@@ -0,0 +1,46 @@
+import { Edit as EditIcon, LogIn as LogInIcon } from "lucide-react";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface MenuProps {
+  mobile?: boolean;
+  className?: string;
+}
+
+const menuItems = [
+  { icon: EditIcon, label: "Add Post", link: "/admin?overlay=new-post" },
+  { icon: LogInIcon, label: "Login", link: "#" },
+];
+
+export const Menu: React.FC<MenuProps> = ({ mobile, className = "" }) => {
+  return (
+    <div
+      className={cn("flex items-center gap-4", {
+        "flex-col items-start": mobile,
+        className,
+      })}
+    >
+      {menuItems.map((item) => (
+        <>
+          <Button variant="ghost" asChild>
+            <Link
+              key={item.label}
+              href={item.link}
+              className={cn("flex items-center", {
+                "items-start justify-start": mobile,
+              })}
+            >
+              <item.icon className="mr-2" />
+              {item.label}
+            </Link>
+          </Button>
+          {mobile && <Separator />}
+        </>
+      ))}
+    </div>
+  );
+};
diff --git a/src/app/components/posts-list/posts-list.stories.tsx b/src/app/components/posts-list/posts-list.stories.tsx
index 1976bbf..3d1600f 100644
--- a/src/app/components/posts-list/posts-list.stories.tsx
+++ b/src/app/components/posts-list/posts-list.stories.tsx
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PostsList } from ".";
-import { BlogPost } from "./posts-list";
+import { BlogPost } from "@/app/lib/definitions";
 
 const posts: Array<BlogPost> = Array.from({ length: 10 }, (_, i) => {
   return {
     id: i,
     title: `hello world${i}`,
-    description: `${i}Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`,
+    description: `${i} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`,
     author: "Pahan",
-    date: "2024-05-17",
+    createdAt: new Date(2024, 5, 1),
   };
 });
 
diff --git a/src/app/components/posts-list/posts-list.tsx b/src/app/components/posts-list/posts-list.tsx
index d3c4c6d..0581135 100644
--- a/src/app/components/posts-list/posts-list.tsx
+++ b/src/app/components/posts-list/posts-list.tsx
@@ -14,8 +14,10 @@ export const PostsList: React.FC<PostsListProps> = async () => {
               <p className="text-xs text-muted-foreground">
                 {createdAt.toDateString()}
               </p>
-              <h2 className="text-sm font-medium leading-none">{title}</h2>
-              <p className="text-sm text-muted-foreground">{description}</p>
+              <h2 className="font-medium leading-none capitalize">{title}</h2>
+              <p className="text-sm text-muted-foreground text-justify">
+                {description}
+              </p>
             </div>
             <Separator className="my-4" />
           </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 81f677c..495d007 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { cn } from "@/lib/utils";
 import type { Metadata } from "next";
 import { fontSans } from "./fonts";
 import "./globals.css";
+import { Header } from "@/app/components/header";
 
 export const metadata: Metadata = {
   title: "Simple Press",
@@ -21,7 +22,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
           fontSans.variable
         )}
       >
-        <div className="max-w-2xl mx-auto">{children}</div>
+        <Header />
+        <div className="max-w-2xl container">{children}</div>
       </body>
     </html>
   );