diff --git a/app/(dashboard)/_components/board-list.tsx b/app/(dashboard)/_components/board-list.tsx
index 0e8cd11..9e4f6a8 100644
--- a/app/(dashboard)/_components/board-list.tsx
+++ b/app/(dashboard)/_components/board-list.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
+import { useMemo, useEffect } from "react";
 import { EmptySearch } from "./empty-search";
 import { EmptyFavorites } from "./empty-favorites";
 import { EmptyBoards } from "./empty-boards";
@@ -17,7 +17,27 @@ interface BoardListProps {
 export const BoardList = ({ orgId }: BoardListProps) => {
   const searchParams = useSearchParams();
 
-  // Use `useMemo()` to extract values safely
+  // Inject keyframes dynamically since no global CSS is used
+  useEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = `
+      @keyframes orb1 {
+        0% { transform: translate(0, 0) scale(1); }
+        50% { transform: translate(30px, 20px) scale(1.1); }
+        100% { transform: translate(0, 0) scale(1); }
+      }
+      @keyframes orb2 {
+        0% { transform: translate(0, 0) scale(1); }
+        50% { transform: translate(-30px, -20px) scale(1.1); }
+        100% { transform: translate(0, 0) scale(1); }
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
   const search = useMemo(
     () => searchParams.get("search") || undefined,
     [searchParams]
@@ -27,21 +47,43 @@ export const BoardList = ({ orgId }: BoardListProps) => {
     [searchParams]
   );
 
-  // Fetch data using query params
   const data = useQuery(api.boards.get, { orgId, search, favorites });
 
   if (data === undefined) {
     return (
-      <div>
-        <h2 className="text-3xl">
-          {favorites ? "Favorite Boards" : "Team Boards"}
-        </h2>
-        <div className="mt-8 grid grid-cols-1 gap-5 pb-10 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
-          <NewBoardButton orgId={orgId} disabled />
-          <BoardCard.Skeleton />
-          <BoardCard.Skeleton />
-          <BoardCard.Skeleton />
-          <BoardCard.Skeleton />
+      <div className="relative">
+        {/* Beautiful Background */}
+        <div className="absolute inset-0 overflow-hidden z-0">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 opacity-50" />
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.15) 1px, transparent 0)",
+              backgroundSize: "24px 24px",
+            }}
+          />
+          <div
+            className="absolute top-0 left-0 w-72 h-72 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+            style={{ animation: "orb1 12s ease-in-out infinite" }}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-72 h-72 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+            style={{ animation: "orb2 10s ease-in-out infinite" }}
+          />
+        </div>
+
+        <div className="relative z-10">
+          <h2 className="text-3xl">
+            {favorites ? "Favorite Boards" : "Team Boards"}
+          </h2>
+          <div className="mt-8 grid grid-cols-1 gap-5 pb-10 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+            <NewBoardButton orgId={orgId} disabled />
+            <BoardCard.Skeleton />
+            <BoardCard.Skeleton />
+            <BoardCard.Skeleton />
+            <BoardCard.Skeleton />
+          </div>
         </div>
       </div>
     );
@@ -60,25 +102,48 @@ export const BoardList = ({ orgId }: BoardListProps) => {
   }
 
   return (
-    <div>
-      <h2 className="text-3xl">
-        {favorites ? "Favorite Boards" : "Team Boards"}
-      </h2>
-      <div className="mt-8 grid grid-cols-1 gap-5 pb-10 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
-        <NewBoardButton orgId={orgId} />
-        {data.map((board) => (
-          <BoardCard
-            key={board._id}
-            id={board._id}
-            title={board.title}
-            imageUrl={board.imageUrl}
-            authorId={board.authorId}
-            authorName={board.authorName}
-            createdAt={board._creationTime}
-            orgId={board.orgId}
-            isFavorite={board.isFavorite}
-          />
-        ))}
+    <div className="relative">
+      
+      <div className="absolute inset-0 overflow-hidden z-0">
+        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 opacity-50" />
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.15) 1px, transparent 0)",
+            backgroundSize: "24px 24px",
+          }}
+        />
+        <div
+          className="absolute top-0 left-0 w-72 h-72 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+          style={{ animation: "orb1 12s ease-in-out infinite" }}
+        />
+        <div
+          className="absolute bottom-0 right-0 w-72 h-72 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+          style={{ animation: "orb2 10s ease-in-out infinite" }}
+        />
+      </div>
+
+      <div className="relative z-10">
+        <h2 className="text-3xl">
+          {favorites ? "Favorite Boards" : "Team Boards"}
+        </h2>
+        <div className="mt-8 grid grid-cols-1 gap-5 pb-10 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+          <NewBoardButton orgId={orgId} />
+          {data.map((board) => (
+            <BoardCard
+              key={board._id}
+              id={board._id}
+              title={board.title}
+              imageUrl={board.imageUrl}
+              authorId={board.authorId}
+              authorName={board.authorName}
+              createdAt={board._creationTime}
+              orgId={board.orgId}
+              isFavorite={board.isFavorite}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/app/(dashboard)/_components/org-sidebar.tsx b/app/(dashboard)/_components/org-sidebar.tsx
index 3e0c66d..683d73c 100644
--- a/app/(dashboard)/_components/org-sidebar.tsx
+++ b/app/(dashboard)/_components/org-sidebar.tsx
@@ -1,13 +1,14 @@
 "use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import { Poppins } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { OrganizationSwitcher } from "@clerk/nextjs";
 import { Button } from "@/components/ui/button";
-import { LayoutDashboard, Star } from "lucide-react";
-
+import { LayoutDashboard, Star, Sparkles, Grid3X3 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
+
 const font = Poppins({
   subsets: ["latin"],
   weight: ["600"],
@@ -18,67 +19,170 @@ export const OrgSidebar = () => {
   const favorites = searchParams.get("favorites");
 
   return (
-    <div className="hidden h-screen w-[206px] flex-col space-y-6 pl-5 pt-5  lg:flex">
-      <Link href="/">
-        <div className="flex items-center gap-x-2">
-          <Image src="/logo.svg" alt="logo" height={60} width={60} />
-          <span className={cn("text-2xl font-semibold", font.className)}>
-            Board
-          </span>
-        </div>
-      </Link>
-      <OrganizationSwitcher
-        hidePersonal
-        appearance={{
-          elements: {
-            rootBox: {
-              display: "flex",
-              justifyConetent: "center",
-              alignItems: "center",
-              width: "100%",
-            },
-            organizationSwitcherTrigger: {
-              padding: "6px",
-              width: "100%",
-              borderRadius: "8px",
-              border: "1px solid #E5E5E5",
-              justifyContent: "space-between",
-              backgroundColor: "white",
-            },
-          },
-        }}
-      />
-      <div className="w-full space-y-1">
-        <Button
-          variant={favorites ? "ghost" : "secondary"}
-          asChild
-          size="lg"
-          className="w-full justify-start px-2 font-normal"
-        >
-          <Link href="/">
-            <LayoutDashboard className="mr-2 h-4 w-4" />
-            Team Boards
-          </Link>
-        </Button>
-        <Button
-          variant={favorites ? "secondary" : "outline"}
-          asChild
-          size="lg"
-          className="w-full justify-start px-2 font-normal"
-        >
-          <Link
-            href={{
-              pathname: "/",
-              query: {
-                favorites: true,
+    <div className="hidden h-screen w-[280px] flex-col space-y-8 p-6 lg:flex relative">
+      {/* Glassmorphism background */}
+      <div className="absolute inset-0 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl border-r border-white/20 dark:border-slate-700/20" />
+      
+      <div className="relative z-10 space-y-8">
+        {/* Logo Section */}
+        <Link href="/" className="group">
+  <div className="flex items-center gap-x-3 p-3 rounded-2xl transition-all duration-300 hover:bg-white/50 dark:hover:bg-slate-700/30">
+    <div className="relative">
+      {/* Removed gradient background div */}
+      <Image src="/logo.svg" alt="logo" height={60} width={60} className="relative z-10" />
+    </div>
+    <span className={cn(
+      "text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent group-hover:from-blue-700 group-hover:to-purple-700 transition-all duration-300",
+      font.className
+    )}>
+      Board
+    </span>
+  </div>
+</Link>
+
+
+        {/* Organization Switcher */}
+        <div className="space-y-3">
+          <div className="flex items-center gap-x-2 text-sm font-medium text-slate-600 dark:text-slate-400">
+            <Sparkles className="h-4 w-4" />
+            <span>Workspace</span>
+          </div>
+          <OrganizationSwitcher
+            hidePersonal
+            appearance={{
+              elements: {
+                rootBox: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  width: "100%",
+                },
+                organizationSwitcherTrigger: {
+                  padding: "12px 16px",
+                  width: "100%",
+                  borderRadius: "16px",
+                  border: "1px solid rgba(148, 163, 184, 0.2)",
+                  justifyContent: "space-between",
+                  backgroundColor: "rgba(255, 255, 255, 0.7)",
+                  backdropFilter: "blur(10px)",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  transition: "all 0.2s ease",
+                  "&:hover": {
+                    backgroundColor: "rgba(255, 255, 255, 0.9)",
+                    borderColor: "rgba(59, 130, 246, 0.3)",
+                    transform: "translateY(-1px)",
+                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                  },
+                },
               },
             }}
+          />
+        </div>
+
+        {/* Navigation Buttons */}
+        <div className="space-y-2">
+          <div className="text-sm font-medium text-slate-600 dark:text-slate-400 mb-4">
+            Navigation
+          </div>
+          
+          <Button
+            variant={favorites ? "ghost" : "secondary"}
+            asChild
+            size="lg"
+            className={cn(
+              "w-full justify-start px-4 py-3 h-auto font-medium rounded-xl transition-all duration-300",
+              !favorites 
+                ? "bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-950/50 dark:to-blue-900/50 text-blue-700 dark:text-blue-300 border border-blue-200/50 dark:border-blue-800/50 shadow-sm hover:shadow-md hover:from-blue-100 hover:to-blue-150 dark:hover:from-blue-900/70 dark:hover:to-blue-800/70" 
+                : "hover:bg-white/50 dark:hover:bg-slate-700/30 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
+            )}
+          >
+            <Link href="/" className="flex items-center w-full">
+              <div className={cn(
+                "mr-3 p-1.5 rounded-lg transition-colors",
+                !favorites ? "bg-blue-200/50 dark:bg-blue-800/50" : ""
+              )}>
+                <LayoutDashboard className="h-4 w-4" />
+              </div>
+              Team Boards
+            </Link>
+          </Button>
+
+          <Button
+            variant={favorites ? "secondary" : "ghost"}
+            asChild
+            size="lg"
+            className={cn(
+              "w-full justify-start px-4 py-3 h-auto font-medium rounded-xl transition-all duration-300",
+              favorites 
+                ? "bg-gradient-to-r from-amber-50 to-orange-100 dark:from-amber-950/50 dark:to-orange-900/50 text-amber-700 dark:text-amber-300 border border-amber-200/50 dark:border-amber-800/50 shadow-sm hover:shadow-md hover:from-amber-100 hover:to-orange-150 dark:hover:from-amber-900/70 dark:hover:to-orange-800/70" 
+                : "hover:bg-white/50 dark:hover:bg-slate-700/30 text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
+            )}
           >
-            <Star className="mr-2 h-4 w-4" />
-            Favorite Boards
-          </Link>
-        </Button>
+            <Link
+              href={{
+                pathname: "/",
+                query: { favorites: true },
+              }}
+              className="flex items-center w-full"
+            >
+              <div className={cn(
+                "mr-3 p-1.5 rounded-lg transition-colors",
+                favorites ? "bg-amber-200/50 dark:bg-amber-800/50" : ""
+              )}>
+                <Star className="h-4 w-4" />
+              </div>
+              Favorite Boards
+            </Link>
+          </Button>
+        </div>
+
+        {/* Stats or Additional Info */}
+<div className="pt-4 border-t border-slate-200/50 dark:border-slate-700/50">
+  <div className="grid grid-cols-1 gap-3 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800/50 dark:to-slate-700/50 rounded-xl p-4 border border-slate-200/50 dark:border-slate-700/50">
+    <div className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-1 col-span-full">
+      Quick Stats
+    </div>
+
+    {/* Tip 1 */}
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Create, collaborate, and innovate with your team in real-time.
+    </div>
+
+    {/* Tip 2 */}
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm flex items-center gap-2">
+      <Star className="h-4 w-4 text-amber-500" />
+      You can favorite boards by clicking the star icon on them.
+    </div>
+
+    {/* Tip 3 */}
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Switch between multiple workspaces using the workspace switcher .
+    </div>
+
+    {/* Tip 4 */}
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Organize your boards into teams for better project management.
+    </div>
+
+    {/* Tip 5
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Drag and move elements on boards effortlessly—just like sticky notes.
+    </div> */}
+
+    {/* Tip 6 */}
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Hover over board tiles for quick actions like renaming or deleting.
+    </div>
+
+    {/* Tip 7
+    <div className="bg-white/70 dark:bg-slate-800/70 rounded-lg p-3 text-xs text-slate-600 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+      Enjoy smooth cross-device collaboration—your boards stay synced everywhere.
+    </div> */}
+  </div>
+</div>
+
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/app/(dashboard)/_components/sidebar/index.tsx b/app/(dashboard)/_components/sidebar/index.tsx
index 0f64d0d..8980fc1 100644
--- a/app/(dashboard)/_components/sidebar/index.tsx
+++ b/app/(dashboard)/_components/sidebar/index.tsx
@@ -3,9 +3,17 @@ import { NewButton } from "./new-button";
 
 export const Sidebar = () => {
   return (
-    <aside className="fixed left-0 z-[1] flex h-full w-[60px] flex-col gap-y-4 bg-blue-950 p-3 text-white">
-      <List />
-      <NewButton />
+    <aside className="fixed left-0 z-[1] flex h-full w-[68px] flex-col gap-y-4 p-3 text-white">
+      {/* Glassmorphism background with gradient */}
+      <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 backdrop-blur-xl" />
+      <div className="absolute inset-0 bg-gradient-to-b from-blue-600/20 via-purple-600/10 to-blue-600/20" />
+      <div className="absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-white/20 to-transparent" />
+      
+      {/* Content */}
+      <div className="relative z-10 flex flex-col h-full gap-y-4">
+        <List />
+        <NewButton />
+      </div>
     </aside>
   );
-};
+};
\ No newline at end of file
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 70ef5f6..4e2a1db 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -1,28 +1,84 @@
+"use client";
+
 import { Navbar } from "./_components/navbar";
 import { OrgSidebar } from "./_components/org-sidebar";
 import { Sidebar } from "./_components/sidebar";
 import { ConvexClientProvider } from "@/providers/convex-client-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { ModalProvider } from "@/providers/modal-provider";
+import { useEffect } from "react";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
 }
 
 const DashboardLayout = ({ children }: DashboardLayoutProps) => {
+  // Inject keyframes dynamically since no global CSS is used
+  useEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = `
+      @keyframes orb1 {
+        0% { transform: translate(0, 0) scale(1); }
+        50% { transform: translate(50px, 30px) scale(1.1); }
+        100% { transform: translate(0, 0) scale(1); }
+      }
+      @keyframes orb2 {
+        0% { transform: translate(0, 0) scale(1); }
+        50% { transform: translate(-50px, -30px) scale(1.1); }
+        100% { transform: translate(0, 0) scale(1); }
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
   return (
     <ConvexClientProvider>
-      <main className="h-full ">
+      <main className="h-full bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 relative overflow-hidden">
         <Sidebar />
-        <div className="h-full pl-[60px]">
-          <div className="flex h-full gap-x-3">
+        <div className="h-full pl-[68px] transition-all duration-300 ease-in-out">
+          <div className="flex h-full gap-x-4">
             <OrgSidebar />
-            <div className="h-full flex-1">
-              <Navbar />
+            <div className="h-full flex-1 relative">
+              {/* Beautiful Background */}
+              <div className="absolute inset-0 overflow-hidden">
+                {/* Subtle Gradient Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 opacity-60" />
+
+                {/* Dotted Pattern */}
+                <div
+                  className="absolute inset-0"
+                  style={{
+                    backgroundImage:
+                      "radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.15) 1px, transparent 0)",
+                    backgroundSize: "24px 24px",
+                  }}
+                />
+
+                {/* Animated Blurred Orbs */}
+                <div
+                  className="absolute top-0 left-0 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+                  style={{ animation: "orb1 12s ease-in-out infinite" }}
+                />
+                <div
+                  className="absolute bottom-0 right-0 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20"
+                  style={{ animation: "orb2 10s ease-in-out infinite" }}
+                />
+              </div>
+
+              <div className="relative z-10 h-full flex flex-col">
+                <Navbar />
+                <div className="flex-1 p-6 overflow-hidden">
+                  <div className="h-full bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 dark:border-slate-700/20 overflow-hidden">
+                    {children}
+                  </div>
+                </div>
+              </div>
 
               <Toaster />
               <ModalProvider />
-              {children}
             </div>
           </div>
         </div>
diff --git a/app/board/[boardid]/page.tsx b/app/board/[boardid]/page.tsx
index a6f670d..7ed092f 100644
--- a/app/board/[boardid]/page.tsx
+++ b/app/board/[boardid]/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 
+import { use } from "react";
 import { useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
 import { Canvas } from "./_components/canvas";
 import { Room } from "@/app/room";
 import { Loading } from "./_components/loading";
-import { use } from "react";
 
 interface BoardIdPageProps {
   params: Promise<{
@@ -17,24 +17,26 @@ interface BoardIdPageProps {
 const BoardIdPage = ({ params }: BoardIdPageProps) => {
   const resolvedParams = use(params);
 
-  const data = useQuery(api.board.get, {
-    id: resolvedParams.boardid as Id<"boards">,
-  });
+  // More robust boardId validation
+  const rawBoardId = resolvedParams?.boardid;
+  const boardId = rawBoardId && rawBoardId !== "undefined" && rawBoardId.trim() !== "" 
+    ? rawBoardId as Id<"boards"> 
+    : undefined;
 
-  console.log("Resolved Params:", resolvedParams);
-  console.log("Board ID:", resolvedParams.boardid);
+  const data = useQuery(
+    api.board.get,
+    boardId ? { id: boardId } : "skip"
+  );
 
-  if (!resolvedParams.boardid) {
-    return <div>No board ID found</div>;
+  if (!boardId || data === undefined) {
+    return <Loading />;
   }
 
-  if (!data) return <Loading />;
-
   return (
-    <Room roomId={resolvedParams.boardid} fallback={<Loading />}>
-      <Canvas boardId={resolvedParams.boardid} />
+    <Room roomId={boardId} fallback={<Loading />}>
+      <Canvas boardId={boardId} />
     </Room>
   );
 };
 
-export default BoardIdPage;
+export default BoardIdPage;
\ No newline at end of file