diff --git a/app/components/layout/header.tsx b/app/components/layout/header.tsx
index 5b74c1a..fd9af3e 100644
--- a/app/components/layout/header.tsx
+++ b/app/components/layout/header.tsx
@@ -138,7 +138,7 @@ export function HeaderNav({
 	)
 }
 
-function UserDropdown() {
+export function UserDropdown() {
 	const user = useUser()
 	const submit = useSubmit()
 	const formRef = useRef<HTMLFormElement>(null)
@@ -149,16 +149,22 @@ function UserDropdown() {
 				<div
 					// this is for progressive enhancement
 					onClick={e => e.preventDefault()}
-					className="relative rounded-full border border-primary bg-secondary p-1"
+					className="relative"
 				>
 					<div className="absolute right-0 top-0 rounded-full bg-background p-[1px]">
 						<div className="z-10 h-2 w-2 rounded-full bg-primary"></div>
 					</div>
-					<img
-						className="h-7 w-7 rounded-full object-cover"
-						alt={user.name ?? user.username}
-						src={getUserImgSrc(user.image?.id)}
-					/>
+					<Button
+						variant="outline_2"
+						size="icon"
+						className="rounded-full p-1 hover:bg-background"
+					>
+						<img
+							className="h-6 rounded-full"
+							alt={user.name ?? user.username}
+							src={getUserImgSrc(user.image?.id)}
+						/>
+					</Button>
 					{/* <span className="font-bold text-body-sm">
 						{user.name ?? user.username}
 					</span> */}
@@ -170,7 +176,7 @@ function UserDropdown() {
 					align="end"
 					className="min-w-[16rem] rounded-sm border border-primary"
 				>
-					<DropdownMenuItem asChild className="border-b p-3">
+					<DropdownMenuItem asChild className="p-3">
 						<Link
 							prefetch="intent"
 							to={`/users/${user.username}`}
@@ -189,33 +195,8 @@ function UserDropdown() {
 							</div>
 						</Link>
 					</DropdownMenuItem>
-					{/* <div className="border-b p-2">
-						<div className="p-2 text-xs font-bold">BACKER</div>
-						<DropdownMenuItem asChild className="p-2">
-							<Link prefetch="intent" to="/" className="hover:bg-muted/30">
-								Home
-							</Link>
-						</DropdownMenuItem>
-						<DropdownMenuItem asChild className="p-2">
-							<Link
-								prefetch="intent"
-								to="/projects"
-								className="hover:bg-muted/30"
-							>
-								Discover
-							</Link>
-						</DropdownMenuItem>
-						<DropdownMenuItem asChild className="p-2">
-							<Link
-								prefetch="intent"
-								to="/studio/backed-projects"
-								className="hover:bg-muted/30"
-							>
-								Backed Projects
-							</Link>
-						</DropdownMenuItem>
-					</div> */}
-					<div className="border-b p-2">
+					<hr />
+					<div className="p-2">
 						<div className="p-2 text-xs font-bold">DASHBOARD</div>
 						<DropdownMenuItem asChild className="p-2">
 							<Link
@@ -245,6 +226,7 @@ function UserDropdown() {
 							</Link>
 						</DropdownMenuItem>
 					</div>
+					<hr />
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
@@ -252,7 +234,7 @@ function UserDropdown() {
 							event.preventDefault()
 							submit(formRef.current)
 						}}
-						className="cursor-pointer p-4 text-sm"
+						className="cursor-pointer p-4  text-sm"
 					>
 						<Form
 							action="/logout"
diff --git a/app/components/layout/mobile-nav.tsx b/app/components/layout/mobile-nav.tsx
index 79fd8a6..2814bd9 100644
--- a/app/components/layout/mobile-nav.tsx
+++ b/app/components/layout/mobile-nav.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react'
+import { Link, NavLink } from '@remix-run/react'
 import { Icon } from '../ui/icon.tsx'
 import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet.tsx'
 
@@ -6,7 +6,7 @@ export function MobileNav({
 	menuItems,
 }: {
 	menuItems?: {
-		title: string
+		title?: string
 		items: {
 			title: string
 			href: string
@@ -24,46 +24,31 @@ export function MobileNav({
 				className="h-screen overflow-y-auto border lg:hidden"
 			>
 				<div className="flex flex-col gap-4">
-					<div className="inline-flex">
-						<svg
-							className="mr-2 text-primary"
-							width="30"
-							height="30"
-							viewBox="0 0 97 85"
-							fill="none"
-						>
-							<path
-								d="M96.1608 1.3148C98.5608 36.1148 73.4941 47.1481 60.6608 48.3148C81.8608 52.3148 84.4941 71.9815 83.1608 81.3148C57.9608 85.3148 50.9941 60.9815 50.6608 48.3148C51.8608 5.9148 81.4941 -0.685196 96.1608 1.3148Z"
-								fill="currentColor"
-								stroke="currentColor"
-							/>
-							<path
-								d="M1.16077 1.3148C-1.23923 36.1148 23.8274 47.1481 36.6608 48.3148C15.4608 52.3148 12.8274 71.9815 14.1608 81.3148C39.3608 85.3148 46.3274 60.9815 46.6608 48.3148C45.4608 5.9148 15.8274 -0.685196 1.16077 1.3148Z"
-								fill="currentColor"
-								stroke="currentColor"
-							/>
-						</svg>
-						<span className="text-2xl font-black text-primary">
-							BloomBacker
-						</span>
-					</div>
+					<Link to="/" className="text-h4 font-semibold text-primary">
+						䷸ Book<span className="text-cyan-400">Breeze</span>
+					</Link>
 
 					<ul className="divide-y">
 						{menuItems?.map(item => (
 							<li key={item.title} className="py-4">
-								<div className="px-2 text-xl font-bold text-primary">
-									{item.title}
-								</div>
+								{item.title && (
+									<div className="p-1 text-xl font-bold text-cyan-400">
+										{item.title}
+									</div>
+								)}
 
-								<ul>
+								<ul className="flex flex-col gap-1">
 									{item.items.map(subItem => (
 										<li key={subItem.title}>
-											<Link
+											<NavLink
 												to={subItem.href}
-												className="block cursor-none rounded-md p-2 transition hover:text-primary hover:underline"
+												className={({ isActive }) =>
+													`flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
+												}
+												end
 											>
 												{subItem.title}
-											</Link>
+											</NavLink>
 										</li>
 									))}
 								</ul>
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index 3b0522d..3a0a173 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -59,7 +59,7 @@ export function SearchBar({
 					id={id}
 					defaultValue={defaultValue}
 					placeholder="Search"
-					className="w-full"
+					className="h-full w-full"
 					// autoFocus={autoFocusSearch}
 				/>
 			</div>
diff --git a/app/components/theme-switcher.tsx b/app/components/theme-switcher.tsx
index 24d6a8c..b2d64ee 100644
--- a/app/components/theme-switcher.tsx
+++ b/app/components/theme-switcher.tsx
@@ -7,6 +7,7 @@ import {
 } from '#app/root'
 import { type Theme } from '#app/utils/theme.server'
 import { Icon } from './ui/icon'
+import { Button } from './ui/button'
 
 // export function ThemeSwitch({
 // 	userPreference,
@@ -51,12 +52,14 @@ export function ThemeSwitch() {
 		<fetcher.Form method="POST" action="/" {...getFormProps(form)}>
 			<input type="hidden" name="theme" value={nextMode} />
 			<div className="flex gap-2">
-				<button
+				<Button
+					variant="outline_2"
 					type="submit"
-					className="flex h-8 w-8 cursor-pointer items-center justify-center"
+					size="icon"
+					className="rounded-full"
 				>
 					{modeLabel[mode]}
-				</button>
+				</Button>
 			</div>
 		</fetcher.Form>
 	)
diff --git a/app/components/ui/icon.tsx b/app/components/ui/icon.tsx
index fb0108f..9e04a7b 100644
--- a/app/components/ui/icon.tsx
+++ b/app/components/ui/icon.tsx
@@ -46,9 +46,7 @@ export function Icon({
 }) {
 	if (children) {
 		return (
-			<span
-				className={`inline-flex items-center ${childrenSizeClassName[size]}`}
-			>
+			<span className={`flex items-center ${childrenSizeClassName[size]}`}>
 				<Icon name={name} size={size} className={className} {...props} />
 				{children}
 			</span>
@@ -57,7 +55,7 @@ export function Icon({
 	return (
 		<svg
 			{...props}
-			className={cn(sizeClassName[size], 'inline self-center', className)}
+			className={cn(sizeClassName[size], 'flex items-center', className)}
 		>
 			<use href={`${href}#${name}`} />
 		</svg>
diff --git a/app/root.tsx b/app/root.tsx
index 34b6b37..0d067b6 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -215,13 +215,13 @@ function App() {
 			<div className="flex h-screen flex-col justify-between">
 				<Outlet />
 
-				<div>
+				{/* <div>
 					<hr className="border-primary" />
 					<div className="container flex justify-between p-6">
 						<Logo />
 						<ThemeSwitch />
 					</div>
-				</div>
+				</div> */}
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
 			<EpicProgress />
diff --git a/app/routes/c.$companyId+/_layout_company.tsx b/app/routes/c.$companyId+/_layout_company.tsx
index c2173a4..e396093 100644
--- a/app/routes/c.$companyId+/_layout_company.tsx
+++ b/app/routes/c.$companyId+/_layout_company.tsx
@@ -1,5 +1,10 @@
 import { Link, NavLink, Outlet } from '@remix-run/react'
+import { UserDropdown } from '#app/components/layout/header'
+import { MobileNav } from '#app/components/layout/mobile-nav'
+import { SearchBar } from '#app/components/search-bar'
 import { ThemeSwitch } from '#app/components/theme-switcher'
+import { Button } from '#app/components/ui/button'
+import { Icon } from '#app/components/ui/icon'
 
 const companyRoutes = [
 	{
@@ -20,17 +25,57 @@ const companyRoutes = [
 	},
 ]
 
+const mobileCompanyRoutes = [
+	{
+		title: 'General',
+		items: [
+			{
+				title: 'Dashboard',
+				href: '',
+			},
+			{
+				title: 'Accounts',
+				href: 'accounts',
+			},
+			{
+				title: 'Sales',
+				href: 'sales',
+			},
+			{
+				title: 'Purchase',
+				href: 'purchase',
+			},
+			{
+				title: 'Reports',
+				href: 'reports',
+			},
+		],
+	},
+]
+
 export default function LayoutCompany() {
 	return (
-		<div className="relative flex min-h-full flex-col lg:flex-row">
-			<nav className="border-r bg-muted p-4 lg:w-2/12">
-				<Link
-					to="/"
-					className="px-2 text-h5 font-semibold text-primary md:text-h4"
-				>
-					䷸ Book<span className="text-sky-400">Breeze</span>
-				</Link>
-				<ul className="my-10 text-lg font-semibold">
+		<div className="relative flex flex-col lg:flex-row">
+			<nav className="top-0 border-r bg-muted/50 p-4 lg:sticky lg:h-screen lg:w-2/12">
+				<div className="flex items-center justify-between">
+					<div className="flex">
+						<MobileNav menuItems={mobileCompanyRoutes} />
+
+						<Link to="/" className="px-2 text-h4 font-semibold text-primary">
+							䷸ Book<span className="text-cyan-400">Breeze</span>
+						</Link>
+					</div>
+					{/* <Link to="search" className="lg:hidden">
+						<Button size="sm">
+							<Icon name="magnifying-glass" size="sm" />
+							<span className="sr-only">Search</span>
+						</Button>
+					</Link> */}
+					<span className="lg:hidden">
+						<UserDropdown />
+					</span>
+				</div>
+				<ul className="my-10 hidden text-lg font-semibold lg:block">
 					<li>
 						<NavLink
 							className={({ isActive }) =>
@@ -56,10 +101,24 @@ export default function LayoutCompany() {
 						</li>
 					))}
 				</ul>
-				<ThemeSwitch />
 			</nav>
 
-			<section className="overflow-y-auto bg-red-400 p-4 lg:w-10/12">
+			<section className="flex flex-col gap-4 p-4 lg:w-10/12">
+				<header className="hidden w-full justify-between gap-4 lg:flex">
+					{/* {!isProjectPage && ( */}
+					<SearchBar
+						action="/search"
+						status="idle"
+						className="hidden max-w-lg lg:flex"
+					/>
+					{/* )} */}
+
+					<div className="flex gap-4">
+						<ThemeSwitch />
+						<UserDropdown />
+					</div>
+				</header>
+
 				<Outlet />
 			</section>
 		</div>
diff --git a/app/routes/c.$companyId+/index.tsx b/app/routes/c.$companyId+/index.tsx
index 43e5429..3eabe30 100644
--- a/app/routes/c.$companyId+/index.tsx
+++ b/app/routes/c.$companyId+/index.tsx
@@ -1,6 +1,6 @@
 export default function CompanyIndex() {
 	return (
-		<div className="h-[1500px] overflow-y-auto">
+		<div className="bg-red-400">
 			<h1>Company Route</h1>
 		</div>
 	)
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 6f2ddc2..e2ea39c 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -10,57 +10,25 @@
 		/* prefixed with foreground because it should look good on the background */
 		--foreground-destructive: 345 82.7% 40.8%;
 
-		/* --background: 0 0% 100%;
-		--foreground: 222.2 84% 4.9%;
-
-		--muted: 210 40% 93%;
-		--muted-foreground: 215.4 16.3% 30%;
-
-		--popover: 0 0% 100%;
-		--popover-foreground: 222.2 84% 4.9%;
-
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
 		--card: 0 0% 100%;
-		--card-foreground: 222.2 84% 4.9%;
-
-		--border: 214.3 31.8% 91.4%;
-		--input: 214.3 31.8% 91.4%;
-		--input-invalid: 0 84.2% 60.2%;
-
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
-
-		--secondary: 210 20% 83%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
-
-		--accent: 210 40% 90%;
-		--accent-foreground: 222.2 47.4% 11.2%;
-
-		--destructive: 0 70% 50%;
-		--destructive-foreground: 210 40% 98%;
-
-		--ring: 215 20.2% 65.1%;
-
-		--radius: 0.5rem; */
-
-		--background: 0 0% 100% /* white */;
-		--foreground: 224 72% 5% /* gray-950 */;
-		--card: 0 0% 100% /* white */;
-		--card-foreground: 224 72% 5% /* gray-950 */;
-		--popover: 0 0% 100% /* white */;
-		--popover-foreground: 224 72% 5% /* gray-950 */;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
 		--primary: 143 77% 40% /* green-600 */;
 		--primary-foreground: 139 77% 97% /* green-50 */;
-		--secondary: 220 15% 96% /* gray-100 */;
-		--secondary-foreground: 221 40% 11% /* gray-900 */;
-		--muted: 220 15% 96% /* gray-100 */;
-		--muted-foreground: 220 9% 47% /* gray-500 */;
-		--accent: 220 15% 96% /* gray-100 */;
-		--accent-foreground: 221 40% 11% /* gray-900 */;
-		--destructive: 0 85% 61% /* red-500 */;
-		--destructive-foreground: 210 20% 99% /* gray-50 */;
-		--border: 220 14% 91% /* gray-200 */;
-		--input: 220 14% 91% /* gray-200 */;
-		--ring: 143 77% 37% /* green-600 */;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 142.1 76.2% 36.3%;
 		--radius: 0.5rem;
 	}
 
@@ -68,24 +36,24 @@
 		/* prefixed with foreground because it should look good on the background */
 		--foreground-destructive: -4 84% 60%;
 
-		--background: 224 72% 5% /* gray-950 */;
-		--foreground: 210 20% 99% /* gray-50 */;
-		--card: 224 72% 5% /* gray-950 */;
-		--card-foreground: 210 20% 99% /* gray-50 */;
-		--popover: 224 72% 5% /* gray-950 */;
-		--popover-foreground: 210 20% 99% /* gray-50 */;
+		--background: 20 14.3% 4.1%;
+		--foreground: 0 0% 95%;
+		--card: 24 9.8% 10%;
+		--card-foreground: 0 0% 95%;
+		--popover: 0 0% 9%;
+		--popover-foreground: 0 0% 95%;
 		--primary: 143 77% 42% /* green-600 */;
 		--primary-foreground: 139 77% 97% /* green-50 */;
-		--secondary: 215 28% 17% /* gray-800 */;
-		--secondary-foreground: 210 20% 99% /* gray-50 */;
-		--muted: 215 28% 17% /* gray-800 */;
-		--muted-foreground: 218 11% 65% /* gray-400 */;
-		--accent: 215 28% 17% /* gray-800 */;
-		--accent-foreground: 210 20% 99% /* gray-50 */;
-		--destructive: 0 63% 31% /* red-900 */;
-		--destructive-foreground: 210 20% 99% /* gray-50 */;
-		--border: 215 28% 17% /* gray-800 */;
-		--input: 215 28% 17% /* gray-800 */;
-		--ring: 143 77% 37% /* green-600 */;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 15%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 85.7% 97.3%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 142.4 71.8% 29.2%;
 	}
 }