diff --git a/CHANGELOG.md b/CHANGELOG.md
index c165e71..3b71425 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,13 +4,28 @@
 
 ### Added
 
+- Expandables Leftbar
+- sponsor badges or ads
 - boolean show/hide `edit on github`
+- with the same code run anywhere (bun or nodejs)
+- add fronmatter (metadata) to playground editor
 
 ### Improved
 
 - adjusment docu.json
 - adjustment navbar, footer and components
 
+### Fixed
+
+- bun compability rename .js to common js
+- cli manage packageManager on package.json
+- inconsistent design moved to better UI/UX
+- error handle render footer.social
+
+### Removed
+
+- remove confused and verbose cli on installer
+
 ## [1.8.0] - 2025-03-01
 
 > Now looks more modern and clean which is a big change in layout and design
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 7fb2d1e..7022893 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -88,7 +88,7 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
           <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
           <div>{res.content}</div>
           <div
-            className={`my-8 flex items-center border-b-2 border-x-muted-foreground ${
+            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${
                 docuConfig.repository?.editLink ? "justify-between" : "justify-end"
             }`}
             >
diff --git a/components/SidebarToggle.tsx b/components/SidebarToggle.tsx
new file mode 100644
index 0000000..8c977d0
--- /dev/null
+++ b/components/SidebarToggle.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+type Props = {
+  isOpen: boolean;
+  onToggle: () => void;
+};
+
+export function SidebarToggle({ isOpen, onToggle }: Props) {
+  return (
+    <div className="absolute left-0 top-4 z-20">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onToggle}
+        className="rounded-full border shadow bg-background"
+        aria-label="Toggle Sidebar"
+      >
+        {isOpen ? <ChevronLeft size={18} /> : <ChevronRight size={18} />}
+      </Button>
+    </div>
+  );
+}
diff --git a/components/Sponsor.tsx b/components/Sponsor.tsx
new file mode 100644
index 0000000..c1c5b31
--- /dev/null
+++ b/components/Sponsor.tsx
@@ -0,0 +1,37 @@
+import docuConfig from "@/docu.json";
+import Image from "next/image";
+import Link from "next/link";
+
+export function Sponsor() {
+  const sponsor = docuConfig.sponsor;
+  const item = sponsor?.item;
+
+  if (!item) return null;
+
+  return (
+    <div className="mt-4">
+      <h2 className="mb-4 text-sm font-medium">{sponsor.title || "Sponsor"}</h2>
+      <Link
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex flex-col justify-center gap-2 p-4 border rounded-lg hover:shadow transition-shadow"
+      >
+        <div className="relative w-8 h-8 flex-shrink-0">
+          <Image
+            src={item.image}
+            alt={item.title}
+            fill
+            className="object-contain"
+          />
+        </div>
+        <div className="text-center sm:text-left">
+          <h3 className="text-sm font-medium">{item.title}</h3>
+          <p className="text-muted-foreground text-sm">{item.description}</p>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default Sponsor;
diff --git a/components/changelog/version-entry.tsx b/components/changelog/version-entry.tsx
index 4e32da1..1b89242 100644
--- a/components/changelog/version-entry.tsx
+++ b/components/changelog/version-entry.tsx
@@ -24,13 +24,13 @@ interface VersionEntryProps {
   isLast?: boolean;
 }
 
-export function VersionEntry({ 
-  version, 
-  date, 
+export function VersionEntry({
+  version,
+  date,
   description,
-  image, 
+  image,
   changes,
-  isLast 
+  isLast
 }: VersionEntryProps) {
   const [expanded, setExpanded] = useState(false);
 
@@ -45,7 +45,7 @@ export function VersionEntry({
               {formatDate2(date)}
             </time>
           </div>
-          
+
           {description && (
             <p className="text-dark text-xl">{description}</p>
           )}
@@ -69,8 +69,8 @@ export function VersionEntry({
         <div className="space-y-6">
           {Object.entries(changes).map(([type, items]) => (
             items && items.length > 0 && (
-              <ChangeGroup 
-                key={type} 
+              <ChangeGroup
+                key={type}
                 type={type as keyof typeof changes}
                 changes={items}
                 expanded={expanded}
@@ -82,10 +82,10 @@ export function VersionEntry({
         {/* Show more/less button */}
         {Object.values(changes).some(items => items && items.length > 5) && (
           <Button
-            variant="ghost"
+            variant="outline"
             size="sm"
             onClick={() => setExpanded(!expanded)}
-            className="mt-4 text-muted-foreground hover:text-foreground"
+            className="mt-4 text-muted-foreground hover:bg-transparent hover:text-accent border-none"
           >
             {expanded ? (
               <>
@@ -110,4 +110,4 @@ export function VersionEntry({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/footer.tsx b/components/footer.tsx
index 67d513a..5dbaeeb 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -30,12 +30,20 @@ export function Footer() {
 }
 
 export function FooterButtons() {
-  const { footer } = docuConfig;
+  const footer = docuConfig?.footer;
+
+  // Jangan render apapun jika tidak ada data sosial
+  if (!footer?.social || !Array.isArray(footer.social) || footer.social.length === 0) {
+    return null;
+  }
 
   return (
     <>
-      {footer.social?.map((item) => {
-        const IconComponent = (LucideIcons[item.iconName as keyof typeof LucideIcons] ?? LucideIcons["Globe"]) as unknown as React.FC<{ className?: string }>;
+      {footer.social.map((item) => {
+        const IconComponent =
+          (LucideIcons[item.iconName as keyof typeof LucideIcons] ??
+            LucideIcons["Globe"]) as React.FC<{ className?: string }>;
+
         return (
           <Link
             key={item.name}
diff --git a/components/leftbar.tsx b/components/leftbar.tsx
index 1ee99a2..ab8c939 100644
--- a/components/leftbar.tsx
+++ b/components/leftbar.tsx
@@ -1,3 +1,5 @@
+"use client"
+import { useState } from "react";
 import {
   Sheet,
   SheetClose,
@@ -7,7 +9,7 @@ import {
 } from "@/components/ui/sheet";
 import { Logo, NavMenu } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
-import { AlignLeftIcon } from "lucide-react";
+import { AlignLeftIcon, ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
 import { FooterButtons } from "@/components/footer";
 import { DialogTitle } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -15,10 +17,32 @@ import DocsMenu from "@/components/docs-menu";
 import { ModeToggle } from "@/components/theme-toggle";
 
 export function Leftbar() {
+  const [collapsed, setCollapsed] = useState(false);
+
   return (
-    <aside className="lg:flex hidden flex-[1.5] min-w-[238px] sticky top-16 flex-col h-[93.75vh] overflow-y-auto">
-      <ScrollArea className="py-4">
-        <DocsMenu />
+    <aside
+      className={`sticky lg:flex hidden top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300
+      ${collapsed ? "w-[0px]" : "w-[250px]"} flex flex-col pr-2`}
+    >
+      {/* Toggle Button */}
+      <div className="absolute top-0 right-0 py-2 px-0 ml-6 z-10">
+        <Button
+          size="icon"
+          variant="outline"
+          className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
+          onClick={() => setCollapsed((prev) => !prev)}
+        >
+          {collapsed ? (
+            <ArrowRightFromLine size={18} />
+          ) : (
+            <ArrowLeftFromLine size={18} />
+          )}
+        </Button>
+      </div>
+
+      {/* Scrollable DocsMenu */}
+      <ScrollArea className="flex-1 px-2 pb-4">
+        {!collapsed && <DocsMenu />}
       </ScrollArea>
     </aside>
   );
@@ -36,7 +60,7 @@ export function SheetLeftbar() {
         <DialogTitle className="sr-only">Menu</DialogTitle>
         <SheetHeader>
           <SheetClose className="px-5" asChild>
-            <Logo />
+            <span className="px-2"><Logo /></span>
           </SheetClose>
         </SheetHeader>
         <div className="flex flex-col gap-4 overflow-y-auto">
diff --git a/components/toc.tsx b/components/toc.tsx
index 099291a..ff81fed 100644
--- a/components/toc.tsx
+++ b/components/toc.tsx
@@ -2,19 +2,25 @@ import { getDocsTocs } from "@/lib/markdown";
 import TocObserver from "./toc-observer";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ListIcon } from "lucide-react";
+import Sponsor from "./Sponsor";
+
 
 export default async function Toc({ path }: { path: string }) {
   const tocs = await getDocsTocs(path);
 
   return (
     <div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-9 sticky top-16 h-[96.95vh]">
-      <div className="flex flex-col gap-3 w-full pl-2">
-        <div className="flex items-center gap-2">
-        <ListIcon className="w-5 h-5" /><h3 className="font-medium text-sm">On this page</h3>
+      <div className="flex flex-col gap-6 w-full pl-2 h-full">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <ListIcon className="w-5 h-5" />
+            <h3 className="font-medium text-sm">On this page</h3>
+          </div>
+          <ScrollArea className="pb-2 pt-0.5 overflow-y-auto">
+            <TocObserver data={tocs} />
+          </ScrollArea>
         </div>
-        <ScrollArea className="pb-2 pt-0.5 overflow-y-auto">
-          <TocObserver data={tocs} />
-        </ScrollArea>
+          <Sponsor />
       </div>
     </div>
   );
diff --git a/docu.json b/docu.json
index bf87854..1d64772 100644
--- a/docu.json
+++ b/docu.json
@@ -17,12 +17,12 @@
       "social": [
         {
             "name": "Gitlab",
-            "url": "https://gitlab.com/mywildancloud/docubook",
+            "url": "https://gitlab.com/mywildancloud",
             "iconName": "GitlabIcon"
         },
         {
             "name": "Instagram",
-            "url": "https://www.instagram.com/wildan.nrs/",
+            "url": "https://www.instagram.com/wildan.nrs",
             "iconName": "InstagramIcon"
         },
         {
@@ -53,6 +53,15 @@
       "editPathTemplate": "/blob/main/{filePath}",
       "editLink": true
     },
+    "sponsor": {
+        "title": "Our Sponsor",
+        "item": {
+        "title": "Vercel",
+        "description": "Deploy your Next.js app with zero configuration.",
+        "image": "/images/vercel.png",
+        "url": "https://vercel.com"
+        }
+    },
     "routes": [
     {
       "title": "Getting Started",
diff --git a/package.json b/package.json
index 1248c9d..ec48371 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.8.0",
+  "version": "1.8.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/public/images/vercel.png b/public/images/vercel.png
new file mode 100644
index 0000000..43f8281
Binary files /dev/null and b/public/images/vercel.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b529851..56783f3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,7 +14,7 @@ const config = {
   		center: true,
   		padding: '2rem',
   		screens: {
-  			'2xl': '1300px'
+  			'2xl': '1440px'
   		}
   	},
   	extend: {