diff --git a/README.md b/README.md
index 3195f30..fbec515 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 > **Note**: This application is a fork of [AriaDocs](https://github.com/nisabmohd/Aria-Docs), created by [Nisab Mohd](https://github.com/nisabmohd). DocuBook provides an alternative to the documentation solution found on [Mintlify](https://mintlify.com/), utilizing `.mdx` (Markdown + JSX) for content creation and management.
 
-[![Deploy with 
+[![Deploy with
 Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gitfromwildan/docubook)
 
 ## Features
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 4db77ad..7a66c2f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -5,6 +5,7 @@ import Search from "@/components/search";
 import Anchor from "@/components/anchor";
 import { SheetLeftbar } from "@/components/leftbar";
 import { SheetClose } from "@/components/ui/sheet";
+import { Separator } from "@/components/ui/separator";
 import docuConfig from "@/docu.json"; // Import JSON
 
 export function Navbar() {
@@ -18,13 +19,13 @@ export function Navbar() {
             <div className="hidden sm:flex">
               <Logo />
             </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
             <div className="items-center hidden gap-4 text-sm font-medium lg:flex text-muted-foreground">
               <NavMenu />
             </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
+            <Separator className="hidden sm:flex my-4 h-9" orientation="vertical" />
             <Search />
         </div>
       </div>
@@ -36,9 +37,9 @@ export function Logo() {
   const { navbar } = docuConfig; // Extract navbar from JSON
 
   return (
-    <Link href="/" className="flex items-center gap-2.5">
-      <Image src={navbar.logo.src} alt={navbar.logo.alt} width="24" height="24" />
-      <h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
+    <Link href="/" className="flex items-center gap-1.5">
+      <Image src={navbar.logo.src} alt={navbar.logo.alt} width="42" height="42" />
+      <h2 className="font-bold font-code text-lg">{navbar.logoText}</h2>
     </Link>
   );
 }
diff --git a/components/search.tsx b/components/search.tsx
index 99b8642..9ee3757 100644
--- a/components/search.tsx
+++ b/components/search.tsx
@@ -96,14 +96,14 @@ export default function Search() {
         }}
       >
         <DialogTrigger asChild>
-          <div className="relative flex-1 cursor-pointer max-w-[160px]">
+          <div className="relative flex-1 cursor-pointer max-w-[140px]">
             <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500 dark:text-stone-400" />
             <Input
-              className="md:w-full rounded-md dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
+              className="md:w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
               placeholder="Search"
               type="search"
             />
-            <div className="flex absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-black dark:border dark:border-white/20 bg-stone-200/50 border border-black/40 p-1 rounded-sm">
+            <div className="flex absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-accent bg-accent text-white px-2 py-0.5 rounded-full">
               <CommandIcon className="w-3 h-3" />
               <span>K</span>
             </div>