diff --git a/app/components/NavigationSidebar.tsx b/app/components/NavigationSidebar.tsx
index 9a6870b..0aece79 100644
--- a/app/components/NavigationSidebar.tsx
+++ b/app/components/NavigationSidebar.tsx
@@ -2,14 +2,6 @@ import React from "react";
 import PixelStudioIcon from "components/PixelStudioIcon";
 import { Link } from "@remix-run/react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   Search,
   Layers,
@@ -19,7 +11,44 @@ import {
   LogOut,
   CreditCard,
 } from "lucide-react";
-// import { useLoggedInUser } from "~/hooks";
+import {
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignUpButton,
+  UserButton,
+  useUser,
+} from "@clerk/remix";
+
+const NAV_LINKS = [
+  {
+    title: "Explore",
+    icon: <Search className="md:h-4 md:w-4" />,
+    href: "/explore",
+  },
+  {
+    title: "Collections",
+    icon: <Layers className="md:h-4 md:w-4" />,
+    href: "/collections",
+  },
+  {
+    title: "Create",
+    icon: <PenTool className="md:h-4 md:w-4" />,
+    href: "/create",
+  },
+  {
+    title: "Profile",
+    icon: <User className="md:h-4 md:w-4" />,
+    // href: `/profile/${userData?.username || ""}`,
+    href: `/profile/`,
+  },
+  // ! TODO: Hide for now, get barebones out first
+  // {
+  //   title: "Manage",
+  //   icon: <Settings className="md:h-4 md:w-4" />,
+  //   href: "/manage",
+  // },
+];
 
 const NavButton = ({
   title,
@@ -37,58 +66,22 @@ const NavButton = ({
     {...props}
   >
     {icon}
-    {/* </span> */}
     <span className="ml-2">{title}</span>
   </a>
 );
 
 const NavigationSidebar = () => {
+  const { user } = useUser();
+  console.log(user);
+
   const [credits, setCredits] = React.useState(31);
   // const userData = React.useContext(UserContext);
   // const userData = useLoggedInUser();
   // const isLoggedIn = Boolean(userData?.id);
-  const userData = {
-    name: "John Doe",
-    username: "johndoe",
-  };
-  const NAV_LINKS = [
-    {
-      title: "Explore",
-      icon: <Search className="md:h-4 md:w-4" />,
-      href: "/explore",
-    },
-    {
-      title: "Collections",
-      icon: <Layers className="md:h-4 md:w-4" />,
-      href: "/collections",
-    },
-    {
-      title: "Create",
-      icon: <PenTool className="md:h-4 md:w-4" />,
-      href: "/create",
-    },
-    {
-      title: "Profile",
-      icon: <User className="md:h-4 md:w-4" />,
-      // href: `/profile/${userData?.username || ""}`,
-      href: `/profile/`,
-    },
-    // ! TODO: Hide for now, get barebones out first
-    // {
-    //   title: "Manage",
-    //   icon: <Settings className="md:h-4 md:w-4" />,
-    //   href: "/manage",
-    // },
-  ];
-
-  // const navLinksToRender = isLoggedIn ? NAV_LINKS : [];
-  const navLinksToRender = NAV_LINKS;
 
   return (
     <>
-      {/* <div className="flex h-screen bg-black text-white"> */}
       <aside className="hidden md:flex flex-col w-64 p-4 border-r h-screen fixed top-0 left-0 bottom-0 z-10 text-xl">
-        {/* <aside className="flex flex-col w-64 bg-[#111] p-4"> */}
         <div className="flex items-center mb-8">
           <div className="flex align-baseline">
             <div className="w-8 mr-3">
@@ -99,65 +92,54 @@ const NavigationSidebar = () => {
         </div>
 
         <nav className="flex-1 space-y-1 font-medium">
-          {navLinksToRender.map((link) => (
-            <NavButton
-              key={link.href}
-              title={link.title}
-              icon={link.icon}
-              link={link.href}
-            />
-          ))}
+          <SignedIn>
+            {NAV_LINKS.map((link) => (
+              <NavButton
+                key={link.href}
+                title={link.title}
+                icon={link.icon}
+                link={link.href}
+              />
+            ))}
+          </SignedIn>
         </nav>
 
         <div className="mt-auto pt-4">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
-                <Avatar>
-                  <AvatarImage
-                    src="/placeholder.svg?height=32&width=32"
-                    alt="User"
-                  />
-                  <AvatarFallback>JS</AvatarFallback>
-                </Avatar>
-                <div className="text-left flex-1">
-                  <div className="font-medium">Jon Smith</div>
-                  <div className="text-xs text-gray-400">jonsmith</div>
-                </div>
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align="end" forceMount>
-              <DropdownMenuLabel className="font-normal">
-                <div className="flex flex-col space-y-1">
-                  <p className="text-sm font-medium leading-none">Jon Smith</p>
-                  <p className="text-xs leading-none text-muted-foreground">
-                    jonsmith
-                  </p>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>{credits} Credits</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>Buy Credits</span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <LogOut className="mr-2 h-4 w-4" />
-                <span>Log out</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <SignedIn>
+            <div className="w-full flex flex-col items-start align-baseline px-3 py-2 rounded-md text-gray-300 transition-colors font-medium mb-3">
+              <div className="flex items-center ">
+                <CreditCard className="md:h-4 md:w-4" />
+                <span className="ml-2">{credits} Credits</span>
+              </div>
+              <div className="underline text-xs text-gray-400 ml-6">
+                <a href="/">Buy Credits</a>
+              </div>
+            </div>
+            <div className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 ">
+              <UserButton />
+              <div className="text-left flex-1">
+                <div className="font-medium">{user?.fullName}</div>
+                <div className="text-xs text-gray-400">{user?.username}</div>
+              </div>
+            </div>
+          </SignedIn>
+          <SignedOut>
+            <div className="flex flex-col text-center">
+              <SignInButton>
+                <button className="rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200 mb-4">
+                  Sign In
+                </button>
+              </SignInButton>
+              <SignUpButton>
+                <a href="/sign-up" className="text-sm underline">
+                  Create an account
+                </a>
+              </SignUpButton>
+            </div>
+          </SignedOut>
         </div>
       </aside>
-      {/* </div> */}
+
       <div
         className="flex flex-col min-w-0 flex-1 overflow-hidden"
         style={{
@@ -180,44 +162,36 @@ const NavigationSidebar = () => {
               </Link>
             </div>
 
-            {/* <div className="w-3"> */}
-            {/* <div className="w-8">
-                <PixelStudioIcon />
-              </div> */}
-            {/* </div> */}
-            {/* {isLoggedIn && ( */}
-            <div className="flex items-center">
-              {/* <UserAvatar /> */}
-              <Avatar>
-                <AvatarImage
-                  src="/placeholder.svg?height=32&width=32"
-                  alt="User"
-                />
-                <AvatarFallback>JS</AvatarFallback>
-              </Avatar>
-            </div>
-            {/* )} */}
+            <SignedIn>
+              <UserButton />
+            </SignedIn>
           </div>
 
-          {/* {isLoggedIn && ( */}
           <div
             className="fixed bottom-0 left-0 right-0 z-10 flex items-center justify-around bg-black py-4"
             style={{
               borderTop: "rgb(38, 38, 38) 1px solid",
             }}
           >
-            {navLinksToRender.map((link) => (
-              <Link
-                key={link.href}
-                className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
-                // className="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"
-                to={link.href}
-              >
-                <span>{link.icon}</span>
-              </Link>
-            ))}
+            <SignedIn>
+              {NAV_LINKS.map((link) => (
+                <Link
+                  key={link.href}
+                  className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
+                  to={link.href}
+                >
+                  <span>{link.icon}</span>
+                </Link>
+              ))}
+            </SignedIn>
+            <SignedOut>
+              <SignInButton>
+                <button className="mx-6 w-full rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200">
+                  Sign In
+                </button>
+              </SignInButton>
+            </SignedOut>
           </div>
-          {/* )} */}
         </div>
       </div>
     </>