diff --git a/apps/web/src/app/(main)/(landing)/pricing/page.tsx b/apps/web/src/app/(main)/(landing)/pricing/page.tsx
index 11dfdde9..cc21dd66 100644
--- a/apps/web/src/app/(main)/(landing)/pricing/page.tsx
+++ b/apps/web/src/app/(main)/(landing)/pricing/page.tsx
@@ -112,7 +112,7 @@ const Pricing = () => {
   return (
     <>
       <main className="w-full  overflow-hidden flex flex-col items-center justify-center relative">
-        <Header title="We are working on Opensox 2.0" />
+        <Header title="We are working on Opensox 2.0" homeLink="/dashboard/home" />
         <div className="flex flex-col bg-[#151515]/20 backdrop-blur-xl relative w-full ">
           <div className="h-full  pv relative">
             <div className=" py-8 border-b border-[#252525]">
diff --git a/apps/web/src/components/dashboard/Sidebar.tsx b/apps/web/src/components/dashboard/Sidebar.tsx
index d27c636e..12093196 100644
--- a/apps/web/src/components/dashboard/Sidebar.tsx
+++ b/apps/web/src/components/dashboard/Sidebar.tsx
@@ -1,3 +1,4 @@
+
 "use client";
 
 import React, { useState, useEffect } from "react";
@@ -19,7 +20,7 @@ import {
   Squares2X2Icon,
   ChevronDownIcon,
   LockClosedIcon,
-  AcademicCapIcon
+  AcademicCapIcon,
 } from "@heroicons/react/24/outline";
 import { useShowSidebar } from "@/store/useShowSidebar";
 import { signOut, useSession } from "next-auth/react";
@@ -32,10 +33,9 @@ type RouteConfig = {
   path: string;
   label: string;
   icon: React.ReactNode;
-  badge?: string; // optional badge text (e.g., "New", "Beta")
+  badge?: string;
 };
 
-// free features only
 const FREE_ROUTES: RouteConfig[] = [
   {
     path: "/dashboard/home",
@@ -59,7 +59,6 @@ const FREE_ROUTES: RouteConfig[] = [
   },
 ];
 
-// premium features under Opensox Pro
 const PREMIUM_ROUTES: RouteConfig[] = [
   {
     path: "/dashboard/pro/dashboard",
@@ -82,6 +81,9 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
   const { isPaidUser } = useSubscription();
   const [proSectionExpanded, setProSectionExpanded] = useState(true);
 
+  // 🟣 New state for hover expand
+  const [isHovered, setIsHovered] = useState(false);
+
   // auto-expand pro section if user is on a premium route
   useEffect(() => {
     if (isPaidUser) {
@@ -106,7 +108,18 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
     }
   };
 
-  const desktopWidth = isCollapsed ? 80 : 288;
+  // 🟣 Hover handlers
+  const handleMouseEnter = () => {
+    if (isCollapsed) setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    if (isHovered) setTimeout(() => setIsHovered(false), 150);
+  };
+
+  // compute dynamic width
+  const isSidebarExpanded = !isCollapsed || isHovered;
+  const desktopWidth = isSidebarExpanded ? 288 : 80;
   const mobileWidth = desktopWidth;
 
   return (
@@ -114,11 +127,14 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
       className={`h-screen flex flex-col bg-dash-surface border-r border-dash-border z-50 ${
         overlay ? "fixed left-0 top-0 bottom-0 xl:hidden" : ""
       }`}
-      initial={
-        overlay ? { x: -400, width: mobileWidth } : { width: desktopWidth }
-      }
-      animate={overlay ? { x: 0, width: mobileWidth } : { width: desktopWidth }}
-      exit={overlay ? { x: -400, width: mobileWidth } : undefined}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      initial={{
+        width: overlay ? mobileWidth : desktopWidth,
+      }}
+      animate={{
+        width: overlay ? mobileWidth : desktopWidth,
+      }}
       transition={{ type: "spring", stiffness: 260, damping: 30 }}
       style={{ width: overlay ? mobileWidth : desktopWidth }}
     >
@@ -139,7 +155,7 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
 
       {/* Desktop header with collapse */}
       <div className="hidden xl:flex items-center justify-between px-4 py-4 border-b border-dash-border bg-dash-surface">
-        {!isCollapsed && (
+        {!isSidebarExpanded ? null : (
           <Link
             href="/"
             className="text-text-secondary font-semibold tracking-wide select-none text-xl hover:text-brand-purple transition-colors cursor-pointer"
@@ -149,17 +165,18 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
         )}
         <IconWrapper
           onClick={toggleCollapsed}
-          className={isCollapsed ? "w-full flex justify-center" : ""}
+          className={isSidebarExpanded ? "" : "w-full flex justify-center"}
         >
-          {isCollapsed ? (
-            <ChevronRightIcon className="size-5 text-brand-purple" />
-          ) : (
+          {isSidebarExpanded ? (
             <ChevronLeftIcon className="size-5 text-brand-purple" />
+          ) : (
+            <ChevronRightIcon className="size-5 text-brand-purple" />
           )}
         </IconWrapper>
       </div>
 
-      <div className="sidebar-body flex-grow flex-col overflow-y-auto px-3 py-4 space-y-1">
+      {/* Sidebar content */}
+      <div className="sidebar-body flex-grow flex-col overflow-y-auto px-3 py-4 space-y-1 transition-all duration-300">
         {/* free features section */}
         {FREE_ROUTES.map((route) => {
           const isActive =
@@ -182,7 +199,7 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
                 >
                   {route.icon}
                 </span>
-                {!isCollapsed && (
+                {isSidebarExpanded && (
                   <div className="flex items-center gap-1.5 flex-1 min-w-0">
                     <h1
                       className={`text-xs font-medium transition-colors ${
@@ -206,14 +223,14 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
         })}
 
         {/* divider */}
-        {!isCollapsed && (
+        {isSidebarExpanded && (
           <div className="my-3 px-3">
             <div className="border-t border-dash-border" />
           </div>
         )}
 
         {/* premium section */}
-        {!isCollapsed ? (
+        {isSidebarExpanded ? (
           <div className="space-y-1">
             {(() => {
               const isPremiumRouteActive = PREMIUM_ROUTES.some(
@@ -401,7 +418,7 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
         )}
 
         {/* divider */}
-        {!isCollapsed && (
+        {isSidebarExpanded && (
           <div className="my-3 px-3">
             <div className="border-t border-dash-border" />
           </div>
@@ -412,12 +429,12 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
           itemName="Request a feature"
           onclick={reqFeatureHandler}
           icon={<SparklesIcon className="size-5" />}
-          collapsed={isCollapsed}
+          collapsed={!isSidebarExpanded}
         />
       </div>
 
       {/* Bottom profile */}
-      <ProfileMenu isCollapsed={isCollapsed} />
+      <ProfileMenu isCollapsed={!isSidebarExpanded} />
     </motion.div>
   );
 }
@@ -466,7 +483,9 @@ function ProfileMenu({ isCollapsed }: { isCollapsed: boolean }) {
               <span className="text-[10px] text-text-muted">{userEmail}</span>
             </div>
             <ChevronLeftIcon
-              className={`size-4 text-text-muted transition-transform ${open ? "rotate-90" : "-rotate-90"}`}
+              className={`size-4 text-text-muted transition-transform ${
+                open ? "rotate-90" : "-rotate-90"
+              }`}
             />
           </div>
         )}
diff --git a/apps/web/src/components/ui/header.tsx b/apps/web/src/components/ui/header.tsx
index 7e5ddd95..5bc41572 100644
--- a/apps/web/src/components/ui/header.tsx
+++ b/apps/web/src/components/ui/header.tsx
@@ -1,27 +1,43 @@
 'use client'
+
 import { motion } from 'framer-motion'
 import React from 'react'
 import { FlickeringGrid } from './flickering-grid'
 import { colors } from '@/lib/design-tokens'
+import Link from 'next/link'
+import { Home } from 'lucide-react'
 
-const Header = ({title}: {title: string}) => {
+const Header = ({ title, homeLink }: { title: string; homeLink?: string }) => {
     return (
-        <div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border w-full">
+        <div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border-white/10 w-full">
+            
+            {homeLink && (
+                <Link
+                    href={homeLink}
+                    aria-label="go to dashboard home"
+                    className="absolute left-2 top-4 lg:left-8 lg:top-8 z-40 p-1.5 lg:p-2 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/10 rounded-full transition-all duration-200 group"
+                >
+                    <Home className="w-4 h-4 lg:w-5 lg:h-5 text-white/70 group-hover:text-white" />
+                </Link>
+            )}
+
             <motion.h4
                 initial={{ opacity: 0, y: 30, filter: 'blur(10px)' }}
                 animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
                 transition={{ duration: 0.6, ease: 'easeOut', type: 'spring', delay: 0.3 }}
-                className='font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center text-balance'
+                className="font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center"
             >
                 {title}
             </motion.h4>
+
             <div
                 style={{
                     background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
                 }}
-                className="h-full w-[100%] right-0 top-0 z-20 absolute"
+                className="h-full w-full right-0 top-0 z-20 absolute"
             />
-            <div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
+
+            <div className="absolute right-0 w-full h-full top-0 z-10 opacity-50">
                 <FlickeringGrid
                     className="absolute -z-0 top-0 right-0"
                     squareSize={3}
@@ -37,4 +53,4 @@ const Header = ({title}: {title: string}) => {
     )
 }
 
-export default Header
\ No newline at end of file
+export default Header