diff --git a/app/components/assets/assets-index/asset-index-pagination.tsx b/app/components/assets/assets-index/asset-index-pagination.tsx
index 3583c096e..abf869ea8 100644
--- a/app/components/assets/assets-index/asset-index-pagination.tsx
+++ b/app/components/assets/assets-index/asset-index-pagination.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { useFetcher, useRouteLoaderData } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { AlertIcon, ChevronRight } from "~/components/icons/library";
+import { useSidebar } from "~/components/layout/sidebar/sidebar";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -16,7 +17,6 @@ import { useAssetIndexViewState } from "~/hooks/use-asset-index-view-state";
 
 import { useViewportHeight } from "~/hooks/use-viewport-height";
 import { useUserRoleHelper } from "~/hooks/user-user-role-helper";
-import type { loader as layoutLoader } from "~/routes/_layout+/_layout";
 import {
   PermissionAction,
   PermissionEntity,
@@ -29,11 +29,9 @@ import { ButtonGroup } from "../../shared/button-group";
 
 export function AssetIndexPagination() {
   const { roles } = useUserRoleHelper();
-  let minimizedSidebar = useRouteLoaderData<typeof layoutLoader>(
-    "routes/_layout+/_layout"
-  )?.minimizedSidebar;
   const fetcher = useFetcher({ key: "asset-index-settings-mode" });
   const { isMd } = useViewportHeight();
+  const { state } = useSidebar();
 
   const { modeIsSimple, modeIsAdvanced } = useAssetIndexViewState();
   const disabledButtonStyles =
@@ -57,9 +55,9 @@ export function AssetIndexPagination() {
   return (
     <div
       className={tw(
+        "asset-index-pagination flex flex-col items-center justify-between border-t border-gray-200 bg-white transition-all delay-75 ease-in-out md:flex-row",
         isMd ? "fixed bottom-0 right-0 z-[12]" : "",
-        "asset-index-pagination  flex flex-col items-center justify-between border-t border-gray-200 bg-white md:flex-row ",
-        minimizedSidebar ? "lg:left-[82px]" : "lg:left-[312px]"
+        state === "collapsed" ? "lg:left-[48px]" : "lg:left-[256px]"
       )}
     >
       <Pagination className="px-4 py-[6px]" />
diff --git a/app/components/errors/error-404-handler.tsx b/app/components/errors/error-404-handler.tsx
index 854f9f3aa..732e275e9 100644
--- a/app/components/errors/error-404-handler.tsx
+++ b/app/components/errors/error-404-handler.tsx
@@ -32,6 +32,7 @@ export default function Error404Handler({
       case "asset":
       case "kit":
       case "location":
+
       case "booking":
       case "customField": {
         const modelLabel = getModelLabelForEnumValue(additionalData.model);
diff --git a/app/components/errors/utils.ts b/app/components/errors/utils.ts
index a20f2c791..2d5b47062 100644
--- a/app/components/errors/utils.ts
+++ b/app/components/errors/utils.ts
@@ -1,41 +1,70 @@
 import { z } from "zod";
 import { isRouteError } from "~/utils/http";
 
+/**
+ * Base schema for additional error data.
+ * Contains common fields used across different error types.
+ */
 const baseAdditionalDataSchema = z.object({
+  /** Unique identifier for the error instance */
   id: z.string(),
+  /** Optional URL to redirect the user to after error handling */
   redirectTo: z.string().optional(),
 });
 
+/**
+ * Schema defining organization structure used in error data
+ */
 const organizationSchema = z.object({
   organization: z.object({
+    /** Organization's unique identifier */
     id: z.string(),
+    /** Organization's display name */
     name: z.string(),
   }),
 });
 
+/**
+ * Schema for 404 error additional data.
+ * Uses a discriminated union to handle different model types with specific requirements.
+ */
 export const error404AdditionalDataSchema = z.discriminatedUnion("model", [
   /* For common and general use case */
   baseAdditionalDataSchema.extend({
+    /** Type of resource that wasn't found */
     model: z.enum(["asset", "kit", "location", "booking", "customField"]),
+    /** Organization context where the resource wasn't found */
     organization: organizationSchema,
   }),
   /* A team member (user) can be in multiple organization's of user so we do this. */
   baseAdditionalDataSchema.extend({
+    /** Specific case for team member not found errors */
     model: z.literal("teamMember"),
+    /** List of organizations the team member could belong to */
     organizations: organizationSchema.array(),
   }),
 ]);
 
+/**
+ * Type definition for the 404 error additional data structure
+ */
 export type Error404AdditionalData = z.infer<
   typeof error404AdditionalDataSchema
 >;
 
-export function parse404ErrorData(response: unknown):
+/**
+ * Parses and validates the structure of a 404 error response.
+ *
+ * @param response - The unknown response to be parsed
+ * @returns An object indicating whether it's a valid 404 error and its additional data
+ *          If it's not a valid 404 error or parsing fails, returns {isError404: false, additionalData: null}
+ *          If it's a valid 404 error, returns {isError404: true, additionalData: Error404AdditionalData}
+ */
+export function parse404ErrorData(
+  response: unknown
+):
   | { isError404: false; additionalData: null }
-  | {
-      isError404: true;
-      additionalData: Error404AdditionalData;
-    } {
+  | { isError404: true; additionalData: Error404AdditionalData } {
   if (!isRouteError(response)) {
     return { isError404: false, additionalData: null };
   }
@@ -51,12 +80,17 @@ export function parse404ErrorData(response: unknown):
   return { isError404: true, additionalData: parsedDataResponse.data };
 }
 
+/**
+ * Converts a model enum value to a human-readable label.
+ *
+ * @param model - The model type from Error404AdditionalData
+ * @returns A string representing the human-readable label for the model
+ */
 export function getModelLabelForEnumValue(
   model: Error404AdditionalData["model"]
-) {
+): string {
   if (model === "customField") {
     return "Custom field";
   }
-
   return model;
 }
diff --git a/app/components/icons/icon.tsx b/app/components/icons/icon.tsx
index 5922f7a70..5ace388f6 100644
--- a/app/components/icons/icon.tsx
+++ b/app/components/icons/icon.tsx
@@ -4,11 +4,13 @@ import type { IconType } from "../shared/icons-map";
 import iconsMap from "../shared/icons-map";
 
 export interface IconProps {
+  className?: string;
   icon: IconType;
   disableWrap?: true;
+  size?: React.ComponentProps<typeof IconHug>["size"];
 }
 const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
-  { icon, disableWrap }: IconProps,
+  { className, icon, disableWrap, size = "sm" }: IconProps,
   _ref
 ) {
   return (
@@ -16,7 +18,9 @@ const Icon = React.forwardRef<HTMLElement, IconProps>(function Icon(
     (disableWrap ? (
       <div>{iconsMap[icon]}</div>
     ) : (
-      <IconHug size="sm">{iconsMap[icon]}</IconHug>
+      <IconHug className={className} size={size}>
+        {iconsMap[icon]}
+      </IconHug>
     ))
   );
 });
diff --git a/app/components/icons/iconHug.tsx b/app/components/icons/iconHug.tsx
index b4484ac14..0602b4f61 100644
--- a/app/components/icons/iconHug.tsx
+++ b/app/components/icons/iconHug.tsx
@@ -2,7 +2,7 @@ import { tw } from "~/utils/tw";
 
 interface Props {
   /** Size of the hug. Defualt is sm */
-  size: "sm" | "md" | "lg" | "xl" | "2xl";
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
   children: JSX.Element | JSX.Element[];
 
@@ -16,6 +16,8 @@ interface Props {
 const sizeClasses: {
   [key in Props["size"]]: string;
 } = {
+  /** 16 */
+  xs: "w-4 h-4",
   /** 32px */
   sm: "w-5 h-5",
   /** 40px */
diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
index 57ff9901e..c75727890 100644
--- a/app/components/icons/library.tsx
+++ b/app/components/icons/library.tsx
@@ -84,8 +84,8 @@ export function ItemsIcon(props: SVGProps<SVGSVGElement>) {
 export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="100%"
-      height="100%"
+      width="20"
+      height="20"
       viewBox="0 0 22 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -436,8 +436,9 @@ export function XIcon(props: SVGProps<SVGSVGElement>) {
 
 export const AssetsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width={20}
-    height={22}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
@@ -854,8 +855,9 @@ export const WriteIcon = (props: SVGProps<SVGSVGElement>) => (
 export const TagsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20}
-    height={23}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -923,9 +925,9 @@ export const RemoveTagsIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const LocationMarkerIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="18"
-    height="22"
-    viewBox="0 0 18 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
@@ -1454,9 +1456,9 @@ export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
 export const BookingsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 20 22"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     {...props}
   >
@@ -1491,8 +1493,8 @@ export const CustomFiedIcon = (props: SVGProps<SVGSVGElement>) => (
 
 export const KitIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="100%"
-    height="100%"
+    width="18"
+    height="20"
     viewBox="0 0 22 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1572,9 +1574,9 @@ export const AssetLabel = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="100%"
-    height="100%"
-    viewBox="0 0 24 24"
+    width="18"
+    height="20"
+    viewBox="0 0 22 20"
     {...props}
   >
     <path
diff --git a/app/components/layout/sidebar/app-sidebar.tsx b/app/components/layout/sidebar/app-sidebar.tsx
new file mode 100644
index 000000000..998554955
--- /dev/null
+++ b/app/components/layout/sidebar/app-sidebar.tsx
@@ -0,0 +1,44 @@
+import { ShelfSidebarLogo } from "~/components/marketing/logos";
+import { useSidebarNavItems } from "~/hooks/use-sidebar-nav-items";
+import { SidebarNoticeCard } from "./notice-card";
+import OrganizationSelector from "./organization-selector";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+  useSidebar,
+} from "./sidebar";
+import SidebarNav from "./sidebar-nav";
+import SidebarUserMenu from "./sidebar-user-menu";
+
+type AppSidebarProps = React.ComponentProps<typeof Sidebar>;
+
+export default function AppSidebar(props: AppSidebarProps) {
+  const { state } = useSidebar();
+  const { topMenuItems, bottomMenuItems } = useSidebarNavItems();
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader className={state === "collapsed" ? "px-0" : ""}>
+        <div className="my-2 flex items-center">
+          <ShelfSidebarLogo minimized={state === "collapsed"} />
+        </div>
+
+        <OrganizationSelector />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarNav items={topMenuItems} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarNoticeCard />
+        <SidebarNav className="p-0" items={bottomMenuItems} />
+        <SidebarUserMenu />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}
diff --git a/app/components/layout/sidebar/atoms.ts b/app/components/layout/sidebar/atoms.ts
deleted file mode 100644
index 9b93b6bb2..000000000
--- a/app/components/layout/sidebar/atoms.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { atom } from "jotai";
-
-export const sidebarCollapseStatusAtom = atom(false);
-
-export const keepSidebarUncollapsedAtom = atom(true);
-
-/* Controls the state for whether the sidebar is collapsed or not */
-export const toggleSidebarAtom = atom(
-  (get) => get(sidebarCollapseStatusAtom),
-  (get, set) =>
-    !get(keepSidebarUncollapsedAtom)
-      ? set(sidebarCollapseStatusAtom, !get(sidebarCollapseStatusAtom))
-      : null
-);
-
-/* Controls the state for whether the sidebar uncollapsed state will be maintained or not */
-export const maintainUncollapsedAtom = atom(
-  (get) => get(keepSidebarUncollapsedAtom),
-  (get, set) => {
-    set(keepSidebarUncollapsedAtom, !get(keepSidebarUncollapsedAtom));
-    set(sidebarCollapseStatusAtom, !get(keepSidebarUncollapsedAtom));
-  }
-);
-
-/* Using different atoms for mobile navigation sidebar as they conflict with desktop's sidebar atoms state*/
-export const isMobileNavOpenAtom = atom(false);
-
-export const toggleMobileNavAtom = atom(
-  (get) => get(isMobileNavOpenAtom),
-  (get, set) => set(isMobileNavOpenAtom, !get(isMobileNavOpenAtom))
-);
diff --git a/app/components/layout/sidebar/bottom.tsx b/app/components/layout/sidebar/bottom.tsx
deleted file mode 100644
index b72e72825..000000000
--- a/app/components/layout/sidebar/bottom.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { useState } from "react";
-import type { User } from "@prisma/client";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { Form } from "~/components/custom-form";
-import { ChevronRight, QuestionsIcon } from "~/components/icons/library";
-import { CrispButton } from "~/components/marketing/crisp";
-import { Button } from "~/components/shared/button";
-import {
-  DropdownMenuItem,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "~/components/shared/dropdown";
-import ProfilePicture from "~/components/user/profile-picture";
-import { tw } from "~/utils/tw";
-
-interface Props {
-  user: Pick<User, "username" | "email">;
-}
-
-export default function SidebarBottom({ user }: Props) {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-
-  return (
-    <div
-      className={tw(
-        "bottom gap-2",
-        workspaceSwitching ? "pointer-events-none" : ""
-      )}
-    >
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger
-          onClick={() => setDropdownOpen((prev) => !prev)}
-          className="w-full truncate outline-none focus-visible:border-0"
-        >
-          <div
-            className={tw(
-              `flex w-full items-center justify-between rounded border border-gray-200  px-2 py-1 hover:bg-gray-100`
-            )}
-          >
-            <ProfilePicture
-              width="w-8"
-              height="h-8"
-              className="mr-3 shrink-0"
-            />
-            <div className="user-credentials grow truncate text-left text-[14px] transition-all duration-200 ease-linear">
-              <div className="line-clamp-1 block text-ellipsis font-semibold">
-                {user.username}
-              </div>
-              <div
-                className="line-clamp-1 block max-w-full text-ellipsis"
-                data-test-id="userEmail"
-              >
-                {user.email}
-              </div>
-            </div>
-            <div className="shrink-0">
-              <i
-                className={`inline-block px-3 py-0 text-gray-400 transition-all duration-300 ease-out ${
-                  dropdownOpen ? "-rotate-90" : "rotate-90"
-                }`}
-              >
-                <ChevronRight />
-              </i>
-            </div>
-          </div>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent
-          align="end"
-          className="order ml-[16px] w-[280px] rounded bg-white p-0 text-right"
-        >
-          <DropdownMenuItem className="border-b border-gray-200 p-0">
-            <Button
-              to={`/account-details`}
-              icon="profile"
-              role="link"
-              variant="link"
-              className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-              width="full"
-            >
-              Account Details
-            </Button>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onSelect={(e) => e.preventDefault()}
-            className="border-b border-gray-200 p-0"
-          >
-            <CrispButton
-              className={tw(
-                "justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-              )}
-              variant="link"
-              width="full"
-              title="Questions/Feedback"
-            >
-              <span className="flex items-center justify-start gap-2">
-                <i className="icon text-gray-700">
-                  <QuestionsIcon />
-                </i>
-                <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                  Questions/Feedback
-                </span>
-              </span>
-            </CrispButton>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="p-0"
-            onSelect={(e) => e.preventDefault()}
-          >
-            <Form action="/logout" method="post" className="w-full">
-              <Button
-                icon="logout"
-                role="link"
-                type="submit"
-                variant="link"
-                className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
-                width="full"
-              >
-                Log Out
-              </Button>
-            </Form>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
diff --git a/app/components/layout/sidebar/child-nav-item.tsx b/app/components/layout/sidebar/child-nav-item.tsx
new file mode 100644
index 000000000..791f67ae5
--- /dev/null
+++ b/app/components/layout/sidebar/child-nav-item.tsx
@@ -0,0 +1,44 @@
+import { NavLink } from "@remix-run/react";
+import { useIsRouteActive } from "~/hooks/use-is-route-active";
+import type { ChildNavItem } from "~/hooks/use-sidebar-nav-items";
+import { tw } from "~/utils/tw";
+import { SidebarMenuButton, SidebarMenuItem } from "./sidebar";
+
+type ChildNavItemProps = {
+  route: ChildNavItem;
+  closeIfMobile?: () => void;
+  tooltip: React.ComponentProps<typeof SidebarMenuButton>["tooltip"];
+};
+
+export default function ChildNavItem({
+  route,
+  closeIfMobile,
+  tooltip,
+}: ChildNavItemProps) {
+  const isActive = useIsRouteActive(route.to);
+
+  return (
+    <SidebarMenuItem className="z-50">
+      <SidebarMenuButton
+        asChild
+        disabled={!!route.disabled}
+        tooltip={tooltip}
+        onClick={closeIfMobile}
+      >
+        <NavLink
+          to={route.to}
+          target={route.target}
+          className={tw(
+            "font-semibold",
+            isActive ? "bg-transparent font-bold text-primary" : ""
+          )}
+        >
+          <route.Icon
+            className={tw("size-4 text-gray-600", isActive && "text-primary")}
+          />
+          <span>{route.title}</span>
+        </NavLink>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
diff --git a/app/components/layout/sidebar/menu-button.tsx b/app/components/layout/sidebar/menu-button.tsx
deleted file mode 100644
index b939ccca7..000000000
--- a/app/components/layout/sidebar/menu-button.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useAtom } from "jotai";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-
-const MenuButton = () => {
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  return (
-    <button className="menu-btn relative z-50 pt-1.5" onClick={toggleMobileNav}>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[19px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "translate-y-[6px] rotate-45" : ""
-        )}
-      ></span>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[14px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "invisible opacity-0" : "opacity-1"
-        )}
-      ></span>
-      <span
-        className={tw(
-          "mb-1 block h-[2px] w-[19px] rounded-full bg-gray-500 transition-all",
-          isMobileNavOpen ? "translate-y-[-6px] -rotate-45" : ""
-        )}
-      ></span>
-    </button>
-  );
-};
-
-export default MenuButton;
diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
deleted file mode 100644
index 22bea70aa..000000000
--- a/app/components/layout/sidebar/menu-items.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import type { FetcherWithComponents } from "@remix-run/react";
-import {
-  NavLink,
-  useLoaderData,
-  useLocation,
-  useMatches,
-} from "@remix-run/react";
-import { motion } from "framer-motion";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import Icon from "~/components/icons/icon";
-import { UpgradeMessage } from "~/components/marketing/upgrade-message";
-import { Button } from "~/components/shared/button";
-import When from "~/components/when/when";
-import { useMainMenuItems } from "~/hooks/use-main-menu-items";
-import type { loader } from "~/routes/_layout+/_layout";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-import { SidebarNoticeCard } from "./notice-card";
-
-const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
-  const [, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const { isAdmin, minimizedSidebar, canUseBookings, subscription } =
-    useLoaderData<typeof loader>();
-  const { menuItemsTop, menuItemsBottom } = useMainMenuItems();
-  const location = useLocation();
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  const matches = useMatches();
-  const currentRoute = matches.at(-1);
-  // @ts-expect-error
-  const handle = currentRoute?.handle?.name;
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex h-full flex-col justify-between">
-        <ul className="menu">
-          {isAdmin ? (
-            <li>
-              <NavLink
-                className={({ isActive }) =>
-                  tw(
-                    "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    isActive ? "active bg-primary-50 text-primary-600" : "",
-                    workspaceSwitching ? "pointer-events-none" : ""
-                  )
-                }
-                to={"/admin-dashboard/users"}
-                onClick={toggleMobileNav}
-                title={"Admin dashboard"}
-              >
-                <i className="icon text-gray-500">🛸</i>
-                <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                  Admin dashboard
-                </span>
-              </NavLink>
-              <hr />
-            </li>
-          ) : null}
-
-          {menuItemsTop.map((item) =>
-            item.to === "bookings" || item.to === "calendar" ? (
-              <li key={item.title}>
-                <Button
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                  className={tw(
-                    "my-1 flex items-center justify-start gap-3 rounded border-0 bg-transparent px-3 text-left text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    canUseBookings
-                      ? "justify-start focus:ring-0"
-                      : "my-0 text-gray-500 hover:bg-gray-50 hover:text-gray-500",
-                    /** We need to do this becasue of a special way we handle the bookings link that doesnt allow us to use NavLink currently */
-                    location.pathname.includes(item.to) &&
-                      handle !== "$userId.bookings" &&
-                      !location.pathname.includes("assets")
-                      ? "active bg-primary-50 text-primary-600"
-                      : ""
-                  )}
-                  disabled={
-                    !canUseBookings
-                      ? {
-                          title: "Disabled",
-                          reason: (
-                            <>
-                              {item.to[0].toUpperCase() + item.to.substring(1)}{" "}
-                              is a premium feature only available for Team
-                              workspaces.{" "}
-                              {!subscription ? (
-                                <UpgradeMessage />
-                              ) : (
-                                "Please switch to your team workspace to access this feature."
-                              )}
-                            </>
-                          ),
-                        }
-                      : false
-                  }
-                >
-                  <span className="flex items-center gap-3 rounded ">
-                    <i
-                      className={tw(
-                        "icon pl-[2px] text-gray-500",
-                        !canUseBookings
-                          ? "!hover:text-gray-500 !text-gray-500"
-                          : ""
-                      )}
-                    >
-                      {item.icon}
-                    </i>
-                    <span className="text whitespace-nowrap transition duration-200 ease-linear hover:text-primary-600">
-                      {item.title}
-                    </span>
-                  </span>
-                </Button>
-              </li>
-            ) : (
-              <li key={item.title}>
-                <NavLink
-                  className={({ isActive }) =>
-                    tw(
-                      "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive ? "active bg-primary-50 text-primary-600" : "",
-                      workspaceSwitching ? "pointer-events-none" : ""
-                    )
-                  }
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    {item.icon}
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    {item.title}
-                  </span>
-                </NavLink>
-              </li>
-            )
-          )}
-        </ul>
-
-        <div className="lower-menu">
-          {/* Sidebar notice card component will be visible when uncollapsed sidebar is selected and hidden when minimizing sidebar form is processing */}
-          {fetcher.state == "idle" ? (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.3 }}
-            >
-              <SidebarNoticeCard />
-            </motion.div>
-          ) : null}
-          <ul className="menu mb-6">
-            {menuItemsBottom.map((item) => (
-              <li key={item.title}>
-                <NavLink
-                  className={({ isActive }) =>
-                    tw(
-                      " my-1 flex items-center  gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive && handle !== "settings.team.users"
-                        ? "active bg-primary-50 text-primary-600"
-                        : "",
-                      workspaceSwitching ? "pointer-events-none" : ""
-                    )
-                  }
-                  to={item.to}
-                  data-test-id={`${item.title.toLowerCase()}SidebarMenuItem`}
-                  onClick={toggleMobileNav}
-                  title={item.title}
-                  target={item?.target || undefined}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    {item.icon}
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    {item.title}
-                  </span>
-                  <When truthy={item.isNew || false}>
-                    <span className="ml-auto rounded-lg bg-primary-50 px-2 py-1 text-xs text-primary-600">
-                      New
-                    </span>
-                  </When>
-                </NavLink>
-              </li>
-            ))}
-            <li>
-              <fetcher.Form
-                method="post"
-                action="/api/user/prefs/minimized-sidebar"
-              >
-                <input
-                  type="hidden"
-                  name="minimizeSidebar"
-                  value={minimizedSidebar ? "close" : "open"}
-                />
-                <button
-                  type="submit"
-                  className={tw(
-                    "crisp-btn mt-1 flex w-full items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    workspaceSwitching ? "pointer-events-none" : ""
-                  )}
-                >
-                  <i className="icon inline-flex pl-[2px] text-gray-500">
-                    <Icon icon="switch" />
-                  </i>
-                  <span className="text whitespace-nowrap transition duration-200 ease-linear">
-                    Minimize
-                  </span>
-                </button>
-              </fetcher.Form>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MenuItems;
diff --git a/app/components/layout/sidebar/notice-card.tsx b/app/components/layout/sidebar/notice-card.tsx
index fed91f4cb..5e06faf79 100644
--- a/app/components/layout/sidebar/notice-card.tsx
+++ b/app/components/layout/sidebar/notice-card.tsx
@@ -14,7 +14,7 @@ export const SidebarNoticeCard = () => {
   }
 
   return optimisticHideNoticeCard ? null : (
-    <div className="support-banner mb-6 hidden rounded bg-gray-50 px-4 py-5 md:mt-10 md:block">
+    <div className="support-banner mb-6 hidden rounded border bg-gray-50 px-2 py-3 md:block">
       <div className="flex justify-between align-middle">
         <h5 className="mb-1 font-semibold text-gray-900">
           Install Shelf for Mobile
diff --git a/app/components/layout/sidebar/organization-select-form.tsx b/app/components/layout/sidebar/organization-select-form.tsx
deleted file mode 100644
index 265f970c3..000000000
--- a/app/components/layout/sidebar/organization-select-form.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useEffect } from "react";
-import { useFetcher } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-
-import { SelectSeparator } from "~/components/forms/select";
-import { Button } from "~/components/shared/button";
-import { isFormProcessing } from "~/utils/form";
-import { OrganizationSelect } from "./organization-select";
-
-export const OrganizationSelectForm = () => {
-  const fetcher = useFetcher();
-
-  /** We track if the fetcher is submitting */
-  const isProcessing = isFormProcessing(fetcher.state);
-  const [_workspaceSwitching, setWorkspaceSwitching] = useAtom(
-    switchingWorkspaceAtom
-  );
-  useEffect(() => {
-    setWorkspaceSwitching(isProcessing);
-  }, [isProcessing, setWorkspaceSwitching]);
-
-  return (
-    <fetcher.Form
-      action={"/api/user/change-current-organization"}
-      method="POST"
-      onChange={(e) => {
-        const form = e.currentTarget;
-        fetcher.submit(form);
-      }}
-    >
-      <OrganizationSelect
-        slots={{
-          "after-select": (
-            <>
-              <SelectSeparator className="mx-0" />
-              <Button
-                to="/account-details/workspace"
-                icon="settings"
-                variant="link"
-                className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
-              >
-                Manage workspaces
-              </Button>
-            </>
-          ),
-        }}
-      />
-    </fetcher.Form>
-  );
-};
diff --git a/app/components/layout/sidebar/organization-selector.tsx b/app/components/layout/sidebar/organization-selector.tsx
new file mode 100644
index 000000000..2d5b0e933
--- /dev/null
+++ b/app/components/layout/sidebar/organization-selector.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useSetAtom } from "jotai";
+import invariant from "tiny-invariant";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
+import { Button } from "~/components/shared/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import { Image } from "~/components/shared/image";
+import ProfilePicture from "~/components/user/profile-picture";
+import When from "~/components/when/when";
+import type { loader } from "~/routes/_layout+/_layout";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
+
+export default function OrganizationSelector() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const { open, openMobile, isMobile } = useSidebar();
+
+  const { organizations, currentOrganizationId } =
+    useLoaderData<typeof loader>();
+
+  const fetcher = useFetcher();
+  const isSwitchingOrg = isFormProcessing(fetcher.state);
+
+  const setWorkspaceSwitching = useSetAtom(switchingWorkspaceAtom);
+
+  const currentOrganization = organizations.find(
+    (org) => org.id === currentOrganizationId
+  );
+  invariant(
+    typeof currentOrganization !== "undefined",
+    "Something went wrong. Current organization is not in the list of organizations."
+  );
+
+  function handleSwitchOrganization(organizationId: string) {
+    const formData = new FormData();
+    formData.append("organizationId", organizationId);
+
+    fetcher.submit(formData, {
+      method: "POST",
+      action: "/api/user/change-current-organization",
+    });
+  }
+
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
+  useEffect(
+    function setSwitchingWorkspaceAfterFetch() {
+      setWorkspaceSwitching(isSwitchingOrg);
+    },
+    [isSwitchingOrg, setWorkspaceSwitching]
+  );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className={tw(openMobile && "px-2")}>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+          <DropdownMenuTrigger disabled={isSwitchingOrg} asChild>
+            <SidebarMenuButton
+              className={tw(
+                "size-full justify-center !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50",
+                open || openMobile ? "border" : ""
+              )}
+            >
+              {currentOrganization.type === "PERSONAL" ? (
+                <ProfilePicture width="w-6" height="h-6" />
+              ) : (
+                <Image
+                  imageId={currentOrganization.imageId}
+                  alt="img"
+                  className="size-8 rounded-sm border object-cover"
+                  updatedAt={currentOrganization.updatedAt}
+                />
+              )}
+
+              <When truthy={open || openMobile}>
+                <>
+                  <div className="flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">
+                      {currentOrganization.name}
+                    </span>
+                  </div>
+                  <ChevronDownIcon className="ml-auto" />
+                </>
+              </When>
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="!mt-0 w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            {organizations.map((organization) => (
+              <DropdownMenuItem
+                key={organization.id}
+                className={tw(
+                  "gap-2 rounded-sm p-2",
+                  currentOrganization.id === organization.id &&
+                    "bg-gray-50 text-sidebar-accent-foreground"
+                )}
+                onClick={() => {
+                  if (organization.id !== currentOrganizationId) {
+                    handleSwitchOrganization(organization.id);
+                  }
+                }}
+              >
+                {organization.type === "PERSONAL" ? (
+                  <ProfilePicture width="w-6" height="h-6" />
+                ) : (
+                  <Image
+                    imageId={organization.imageId}
+                    alt="img"
+                    className="size-6 rounded-sm border object-cover"
+                    updatedAt={organization.updatedAt}
+                  />
+                )}
+                {organization.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <Button
+              to="/account-details/workspace"
+              icon="settings"
+              variant="link"
+              className=" w-full select-none justify-start rounded p-2 text-left font-medium text-gray-900 outline-none  hover:bg-gray-50 hover:text-gray-800 "
+              onClick={closeDropdown}
+            >
+              Manage workspaces
+            </Button>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
diff --git a/app/components/layout/sidebar/overlay.tsx b/app/components/layout/sidebar/overlay.tsx
deleted file mode 100644
index 015c654c7..000000000
--- a/app/components/layout/sidebar/overlay.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useAtom } from "jotai";
-import { tw } from "~/utils/tw";
-import { toggleMobileNavAtom } from "./atoms";
-
-const Overlay = () => {
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  return (
-    <div
-      onClick={toggleMobileNav}
-      className={tw(
-        "fixed right-0 top-0 z-10 h-screen w-screen cursor-pointer bg-gray-25/10 backdrop-blur transition duration-300 ease-in-out md:hidden",
-        isMobileNavOpen ? "visible" : "invisible opacity-0"
-      )}
-    ></div>
-  );
-};
-
-export default Overlay;
diff --git a/app/components/layout/sidebar/parent-nav-item.tsx b/app/components/layout/sidebar/parent-nav-item.tsx
new file mode 100644
index 000000000..c55b663e7
--- /dev/null
+++ b/app/components/layout/sidebar/parent-nav-item.tsx
@@ -0,0 +1,115 @@
+import { NavLink, useNavigate } from "@remix-run/react";
+import { ChevronDownIcon } from "lucide-react";
+import invariant from "tiny-invariant";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/shared/collapsible";
+import When from "~/components/when/when";
+import {
+  useIsAnyRouteActive,
+  useIsRouteActive,
+} from "~/hooks/use-is-route-active";
+import type {
+  ChildNavItem,
+  ParentNavItem,
+} from "~/hooks/use-sidebar-nav-items";
+import { tw } from "~/utils/tw";
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "./sidebar";
+
+type ParentNavItemProps = {
+  route: ParentNavItem;
+  tooltip: React.ComponentProps<typeof SidebarMenuButton>["tooltip"];
+  closeIfMobile?: () => void;
+};
+
+export default function ParentNavItem({
+  route,
+  tooltip,
+  closeIfMobile,
+}: ParentNavItemProps) {
+  const navigate = useNavigate();
+  const isAnyChildActive = useIsAnyRouteActive(
+    route.children.map((child) => child.to)
+  );
+
+  const firstChildRoute = route.children[0];
+  invariant(
+    typeof firstChildRoute !== "undefined",
+    "'parent' nav item should have at leaset one child route"
+  );
+
+  function handleClick() {
+    navigate(firstChildRoute.to);
+    closeIfMobile && closeIfMobile();
+  }
+
+  return (
+    <Collapsible
+      asChild
+      className="group/collapsible"
+      defaultOpen={isAnyChildActive && !route.disabled}
+    >
+      <SidebarMenuItem key={route.title} className="z-50">
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            disabled={!!route.disabled}
+            tooltip={tooltip}
+            onClick={handleClick}
+          >
+            <route.Icon className="size-4 text-gray-600" />
+            <span className="font-semibold">{route.title}</span>
+            <ChevronDownIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <When truthy={!route.disabled}>
+              {route.children.map((child) => (
+                <NestedRouteRenderer
+                  key={child.to}
+                  nested={child}
+                  closeIfMobile={closeIfMobile}
+                />
+              ))}
+            </When>
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  );
+}
+
+function NestedRouteRenderer({
+  nested,
+  closeIfMobile,
+}: {
+  nested: Omit<ChildNavItem, "type" | "Icon">;
+  closeIfMobile?: () => void;
+}) {
+  const isChildActive = useIsRouteActive(nested.to);
+
+  return (
+    <SidebarMenuSubItem key={nested.title}>
+      <SidebarMenuSubButton onClick={closeIfMobile} asChild>
+        <NavLink
+          to={nested.to}
+          target={nested.target}
+          className={tw(
+            "font-medium hover:bg-gray-100",
+            isChildActive && "bg-transparent font-bold !text-primary"
+          )}
+        >
+          {nested.title}
+        </NavLink>
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
new file mode 100644
index 000000000..31576e474
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -0,0 +1,113 @@
+import { Fragment, useCallback } from "react";
+import type { NavItem } from "~/hooks/use-sidebar-nav-items";
+import ChildNavItem from "./child-nav-item";
+import ParentNavItem from "./parent-nav-item";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
+
+type SidebarNavProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  items: NavItem[];
+};
+
+export default function SidebarNav({
+  className,
+  style,
+  items,
+}: SidebarNavProps) {
+  const { isMobile, toggleSidebar } = useSidebar();
+
+  const renderTooltopContent = useCallback((navItem: NavItem) => {
+    if (typeof navItem.disabled === "boolean" && navItem.disabled) {
+      return `${navItem.title} is disabled`;
+    }
+
+    if (typeof navItem.disabled === "object") {
+      return { children: navItem.disabled.reason };
+    }
+
+    return navItem.title;
+  }, []);
+
+  const closeIfMobile = useCallback(() => {
+    if (isMobile) {
+      toggleSidebar();
+    }
+  }, [isMobile, toggleSidebar]);
+
+  const renderNavItem = useCallback(
+    (navItem: NavItem) => {
+      switch (navItem.type) {
+        case "parent": {
+          return (
+            <ParentNavItem
+              route={navItem}
+              tooltip={renderTooltopContent(navItem)}
+              closeIfMobile={closeIfMobile}
+            />
+          );
+        }
+
+        case "child": {
+          return (
+            <ChildNavItem
+              route={navItem}
+              closeIfMobile={closeIfMobile}
+              tooltip={renderTooltopContent(navItem)}
+            />
+          );
+        }
+
+        case "label": {
+          return (
+            <SidebarGroupLabel
+              className={
+                navItem.title.toLowerCase() === "organization"
+                  ? "mt-4"
+                  : undefined
+              }
+            >
+              {navItem.title}
+            </SidebarGroupLabel>
+          );
+        }
+
+        case "button": {
+          return (
+            <SidebarMenuItem onClick={navItem.onClick}>
+              <SidebarMenuButton
+                className="font-semibold"
+                tooltip={navItem.title}
+              >
+                <navItem.Icon className="size-4 text-gray-600" />
+                <span>{navItem.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        }
+
+        default: {
+          return null;
+        }
+      }
+    },
+    [closeIfMobile, renderTooltopContent]
+  );
+
+  return (
+    <SidebarGroup className={className} style={style}>
+      <SidebarMenu>
+        {items.map((navItem, i) => (
+          <Fragment key={i}>{renderNavItem(navItem)}</Fragment>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar-user-menu.tsx b/app/components/layout/sidebar/sidebar-user-menu.tsx
new file mode 100644
index 000000000..c74634649
--- /dev/null
+++ b/app/components/layout/sidebar/sidebar-user-menu.tsx
@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { NavLink, useFetcher, useLoaderData } from "@remix-run/react";
+import { LogOutIcon, UserRoundIcon } from "lucide-react";
+import { ChevronRight } from "~/components/icons/library";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import ProfilePicture from "~/components/user/profile-picture";
+import type { loader } from "~/routes/_layout+/_layout";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "./sidebar";
+
+export default function SidebarUserMenu() {
+  const { user } = useLoaderData<typeof loader>();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { isMobile } = useSidebar();
+  const fetcher = useFetcher();
+
+  function closeDropdown() {
+    setIsDropdownOpen(false);
+  }
+
+  function logOut() {
+    fetcher.submit(null, { action: "/logout", method: "POST" });
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="!h-auto border !p-1 data-[state=open]:bg-gray-50 data-[state=open]:text-sidebar-accent-foreground hover:bg-gray-50"
+            >
+              <ProfilePicture
+                width="w-8"
+                height="h-8"
+                className="mr-3 shrink-0"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.username}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronRight className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded p-1"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <ProfilePicture
+                  width="w-8"
+                  height="h-8"
+                  className="mr-3 shrink-0"
+                />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">
+                    {user.username}
+                  </span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              asChild
+              className="cursor-pointer gap-2 border-b border-gray-200 p-2"
+              onClick={closeDropdown}
+            >
+              <NavLink to="/account-details">
+                <UserRoundIcon className="size-4" />
+                Account settings
+              </NavLink>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="mt-1 cursor-pointer gap-2 border-b border-gray-200 p-2"
+              onSelect={logOut}
+            >
+              <LogOutIcon className="size-4" />
+              Log Out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
index b32d72635..1e215763d 100644
--- a/app/components/layout/sidebar/sidebar.tsx
+++ b/app/components/layout/sidebar/sidebar.tsx
@@ -1,99 +1,766 @@
-import { useRef } from "react";
-import { Link, NavLink, useFetcher, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
-import { ScanQRIcon } from "~/components/icons/library";
-import type { loader } from "~/routes/_layout+/_layout";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { useFetcher } from "@remix-run/react";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+import Input from "~/components/forms/input";
+import { SwitchIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
+import { Separator } from "~/components/shared/separator";
+import { Sheet, SheetContent, SheetTitle } from "~/components/shared/sheet";
+import { Skeleton } from "~/components/shared/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/shared/tooltip";
+import { useIsMobile } from "~/hooks/use-mobile";
+import { isFormProcessing } from "~/utils/form";
 import { tw } from "~/utils/tw";
 
-import { toggleMobileNavAtom } from "./atoms";
-import SidebarBottom from "./bottom";
-import MenuButton from "./menu-button";
-import MenuItems from "./menu-items";
-import { OrganizationSelectForm } from "./organization-select-form";
-import Overlay from "./overlay";
-import { ShelfMobileLogo, ShelfSidebarLogo } from "../../marketing/logos";
-
-export default function Sidebar() {
-  const { user, minimizedSidebar, currentOrganizationId } =
-    useLoaderData<typeof loader>();
-  const [isMobileNavOpen, toggleMobileNav] = useAtom(toggleMobileNavAtom);
-  const mainNavigationRef = useRef<HTMLElement>(null);
-
-  /** We use optimistic UI for folding of the scanner.tsx sidebar
-   * As we are making a request to the server to store the cookie,
-   * we need to use this approach, otherwise the sidebar will close/open
-   * only once the response is received from the server
-   */
-  const sidebarFetcher = useFetcher();
-  let optimisticMinimizedSidebar = minimizedSidebar;
-  if (sidebarFetcher.formData) {
-    optimisticMinimizedSidebar =
-      sidebarFetcher.formData.get("minimizeSidebar") === "open";
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+  isSidebarToggling: boolean;
+};
+
+const SidebarContext = createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
-  return (
-    <>
-      {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
-      <header
-        id="header"
-        className="flex items-center justify-between border-b bg-white p-4 md:hidden"
-      >
-        <Link to="." title="Home" className="block h-[32px]">
-          <ShelfMobileLogo />
-        </Link>
-        <div className="flex items-center space-x-4">
-          <NavLink
-            to="/scanner"
-            title="Scan QR Code"
-            className={({ isActive }) =>
-              tw(
-                "relative flex items-center justify-center px-2 transition",
-                isActive ? "text-primary-600" : "text-gray-500"
-              )
+
+  return context;
+}
+
+const SidebarProvider = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+
+    const sidebarTogglerFetcher = useFetcher();
+    const isSidebarToggling = isFormProcessing(sidebarTogglerFetcher.state);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        /* Setting state of sidebar in cookies (userPrefs) */
+        const formData = new FormData();
+        formData.append("minimizeSidebar", openState ? "close" : "open");
+
+        sidebarTogglerFetcher.submit(formData, {
+          method: "POST",
+          action: "/api/user/prefs/minimized-sidebar",
+        });
+      },
+      [open, setOpenProp, sidebarTogglerFetcher]
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(
+      () =>
+        isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open),
+      [isMobile, setOpen, setOpenMobile]
+    );
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        isSidebarToggling,
+      }),
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        isSidebarToggling,
+      ]
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
             }
+            className={tw(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
           >
-            <ScanQRIcon />
-          </NavLink>
-          <MenuButton />
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  }
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={tw(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
         </div>
-      </header>
-
-      <Overlay />
-      <aside
-        id="main-navigation"
-        ref={mainNavigationRef}
-        className={tw(
-          `main-navigation fixed top-0 z-30 flex h-screen max-h-screen flex-col border-r border-gray-200 bg-white p-4 shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),_0px_8px_8px_-4px_rgba(16,24,40,0.03)] transition-all duration-100 ease-linear md:sticky md:left-0 md:px-4 md:py-8 md:shadow-none md:duration-100`,
-          optimisticMinimizedSidebar
-            ? "collapsed-navigation md:w-[82px] md:overflow-hidden"
-            : "md:left-0 md:w-[312px]",
-          isMobileNavOpen ? "left-0 w-[312px] overflow-hidden " : "-left-full"
-        )}
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            aria-describedby="sidebar"
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetTitle className="sr-only" />
+            {children}
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
       >
-        <div className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden">
-          <div className="navigation-header flex items-center justify-between">
-            <Link
-              to="."
-              title="Home"
-              className="logo flex items-center"
-              onClick={toggleMobileNav}
-            >
-              <ShelfSidebarLogo minimized={optimisticMinimizedSidebar} />
-            </Link>
-          </div>
-          <div className="">
-            <OrganizationSelectForm key={currentOrganizationId} />
-          </div>
-          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
-            <MenuItems fetcher={sidebarFetcher} />
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={tw(
+            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={tw(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
           </div>
         </div>
+      </div>
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
 
-        <div className={tw("", workspaceSwitching ? "opacity-50" : "")}>
-          <SidebarBottom user={user} />
-        </div>
-      </aside>
-    </>
+const SidebarTrigger = forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button> & { iconClassName?: string }
+>(({ className, onClick, iconClassName, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="secondary"
+      className={tw("border-none p-0", className)}
+      onClick={(event: any) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <SwitchIcon className={tw("size-4 text-gray-500", iconClassName)} />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
   );
-}
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={tw(
+        "absolute inset-y-0 z-50 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => (
+    <main
+      ref={ref}
+      className={tw(
+        "relative h-screen w-full overflow-auto bg-gray-25 px-4 pb-10",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => (
+  <Input
+    ref={ref}
+    data-sidebar="input"
+    className={tw(
+      "bg-background h-8 w-full shadow-none focus-visible:ring-2 focus-visible:ring-primary-500",
+      className
+    )}
+    {...props}
+  />
+));
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={tw("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={tw("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => (
+  <Separator
+    ref={ref}
+    data-sidebar="separator"
+    className={tw("mx-2 w-auto bg-sidebar-border", className)}
+    {...props}
+  />
+));
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={tw(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={tw("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+);
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={tw(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={tw(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={tw("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={tw("flex w-full min-w-0 flex-col ", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={tw("group/menu-item relative ", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-primary-500 transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: " hover:bg-gray-100",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const SidebarMenuButton = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={tw(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={(state !== "collapsed" && !props.disabled) || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={tw(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-primary-500 transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={tw(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-semibold tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={tw("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={tw(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={tw(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-primary-500 aria-disabled:pointer-events-none aria-disabled:opacity-50  focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/app/components/marketing/logos.tsx b/app/components/marketing/logos.tsx
index 362c70820..59a931d26 100644
--- a/app/components/marketing/logos.tsx
+++ b/app/components/marketing/logos.tsx
@@ -1,6 +1,7 @@
 import { ShelfTypography } from "~/components/icons/library";
 import { config } from "~/config/shelf.config";
 import { tw } from "~/utils/tw";
+import When from "../when/when";
 
 /**
  * Logo shown in the sidebar
@@ -33,9 +34,11 @@ export const ShelfSidebarLogo = ({ minimized }: { minimized: boolean }) => {
         alt="Shelf Logo"
         className="mx-1.5 inline h-[32px]"
       />
-      <span className="logo-text transition duration-150 ease-linear">
-        <ShelfTypography />
-      </span>
+      <When truthy={!minimized}>
+        <span className="logo-text transition duration-150 ease-linear">
+          <ShelfTypography />
+        </span>
+      </When>
     </>
   );
 };
diff --git a/app/components/shared/collapsible.tsx b/app/components/shared/collapsible.tsx
new file mode 100644
index 000000000..5c28cbcc3
--- /dev/null
+++ b/app/components/shared/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/app/components/shared/separator.tsx b/app/components/shared/separator.tsx
new file mode 100644
index 000000000..218b281c1
--- /dev/null
+++ b/app/components/shared/separator.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { tw } from "~/utils/tw";
+
+const Separator = forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={tw(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/app/components/shared/sheet.tsx b/app/components/shared/sheet.tsx
new file mode 100644
index 000000000..df3630334
--- /dev/null
+++ b/app/components/shared/sheet.tsx
@@ -0,0 +1,137 @@
+import { forwardRef } from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { tw } from "~/utils/tw";
+import { XIcon } from "../icons/library";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={tw(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={tw(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="ring-offset-background data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <XIcon className="size-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={tw(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={tw("text-foreground text-lg font-semibold", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={tw("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/app/components/shared/skeleton.tsx b/app/components/shared/skeleton.tsx
new file mode 100644
index 000000000..a47ef4490
--- /dev/null
+++ b/app/components/shared/skeleton.tsx
@@ -0,0 +1,15 @@
+import { tw } from "~/utils/tw";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={tw("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/app/components/when/when.tsx b/app/components/when/when.tsx
index 8c8207e00..d15f08d79 100644
--- a/app/components/when/when.tsx
+++ b/app/components/when/when.tsx
@@ -1,8 +1,9 @@
 type Props = {
   truthy: boolean | null | undefined;
   children: React.ReactNode;
+  fallback?: React.ReactNode;
 };
 
-export default function When({ truthy, children }: Props) {
-  return truthy ? children : null;
+export default function When({ truthy, children, fallback }: Props) {
+  return truthy ? children : fallback ? fallback : null;
 }
diff --git a/app/hooks/use-is-route-active.tsx b/app/hooks/use-is-route-active.tsx
new file mode 100644
index 000000000..a0dd86740
--- /dev/null
+++ b/app/hooks/use-is-route-active.tsx
@@ -0,0 +1,159 @@
+import { useMemo } from "react";
+import type { Path, UIMatch } from "@remix-run/react";
+import {
+  parsePath,
+  resolvePath,
+  useLocation,
+  useMatches,
+  useResolvedPath,
+} from "@remix-run/react";
+
+/**
+ * This function returns the active state of a route.
+ * It works similar to {@link NavLink} from react-router
+ */
+export function useIsRouteActive(to: string) {
+  const path = useResolvedPath(to);
+  const toPathname = path.pathname;
+
+  const locationPathname = useLocation().pathname;
+
+  return isRouteActive({ toPathname, locationPathname });
+}
+
+export function useIsAnyRouteActive(routes: string[]) {
+  const locationPathname = useLocation().pathname;
+  const matches = useMatches();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+
+  const resolvedPaths = useMemo(
+    () =>
+      routes.map((route) =>
+        resolveTo(route, JSON.parse(routePathnamesJson), locationPathname)
+      ),
+    [locationPathname, routePathnamesJson, routes]
+  );
+
+  return resolvedPaths.some((path) =>
+    isRouteActive({
+      toPathname: path.pathname,
+      locationPathname,
+    })
+  );
+}
+
+/*****************************/
+/***** Utility Functions *****/
+/*****************************/
+
+function isRouteActive({
+  toPathname,
+  locationPathname,
+}: {
+  toPathname: string;
+  locationPathname: string;
+}) {
+  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+  // we're looking for a slash _after_ what's in `to`.  For example:
+  //
+  // <NavLink to="/users"> and <NavLink to="/users/">
+  // both want to look for a / at index 6 to match URL `/users/matt`
+  const endSlashPosition =
+    toPathname !== "/" && toPathname.endsWith("/")
+      ? toPathname.length - 1
+      : toPathname.length;
+
+  const isActive =
+    locationPathname === toPathname ||
+    (locationPathname.startsWith(toPathname) &&
+      locationPathname.charAt(endSlashPosition) === "/");
+
+  return isActive;
+}
+
+/**
+ * This function is directly taken from github repo of react-router
+ * https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/utils.ts#L1226
+ */
+export function resolveTo(
+  toArg: string,
+  routePathnames: string[],
+  locationPathname: string,
+  isPathRelative = false
+): Path {
+  let to: Partial<Path>;
+  to = parsePath(toArg);
+
+  let isEmptyPath = toArg === "" || to.pathname === "";
+  let toPathname = isEmptyPath ? "/" : to.pathname;
+
+  let from: string;
+
+  // Routing is relative to the current pathname if explicitly requested.
+  //
+  // If a pathname is explicitly provided in `to`, it should be relative to the
+  // route context. This is explained in `Note on `<Link to>` values` in our
+  // migration guide from v5 as a means of disambiguation between `to` values
+  // that begin with `/` and those that do not. However, this is problematic for
+  // `to` values that do not provide a pathname. `to` can simply be a search or
+  // hash string, in which case we should assume that the navigation is relative
+  // to the current location's pathname and *not* the route pathname.
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+
+    // With relative="route" (the default), each leading .. segment means
+    // "go up one route" instead of "go up one URL segment".  This is a key
+    // difference from how <a href> works and a major reason we call this a
+    // "to" value instead of a "href".
+    if (!isPathRelative && toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+
+      to.pathname = toSegments.join("/");
+    }
+
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+
+  let path = resolvePath(to, from);
+
+  // Ensure the pathname has a trailing slash if the original "to" had one
+  let hasExplicitTrailingSlash =
+    toPathname && toPathname !== "/" && toPathname.endsWith("/");
+  // Or if this was a link to the current path which has a trailing slash
+  let hasCurrentTrailingSlash =
+    (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
+  if (
+    !path.pathname.endsWith("/") &&
+    (hasExplicitTrailingSlash || hasCurrentTrailingSlash)
+  ) {
+    path.pathname += "/";
+  }
+
+  return path;
+}
+
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+export function getResolveToMatches(matches: UIMatch[]) {
+  let pathMatches = getPathContributingMatches(matches);
+
+  // Use the full pathname for the leaf match so we include splat values for "." links
+  // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
+  return pathMatches.map((match: any, idx: number) =>
+    idx === pathMatches.length - 1 ? match?.pathname : match?.pathnameBase
+  );
+}
+
+export function getPathContributingMatches(matches: any) {
+  return matches.filter(
+    (match: any, index: number) =>
+      index === 0 || (match?.route?.path && match?.route?.path?.length > 0)
+  );
+}
diff --git a/app/hooks/use-main-menu-items.tsx b/app/hooks/use-main-menu-items.tsx
deleted file mode 100644
index 742ab1d96..000000000
--- a/app/hooks/use-main-menu-items.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import Icon from "~/components/icons/icon";
-import { useUserData } from "./use-user-data";
-import { useUserRoleHelper } from "./user-user-role-helper";
-
-export function useMainMenuItems() {
-  const user = useUserData();
-  const { isBaseOrSelfService } = useUserRoleHelper();
-
-  let menuItemsTop = [
-    {
-      icon: <Icon icon="graph" />,
-      to: "dashboard",
-      title: "Dashboard",
-    },
-    {
-      icon: <Icon icon="asset" />,
-      to: "assets",
-      title: "Assets",
-    },
-    {
-      icon: <Icon icon="kit" />,
-      to: "kits",
-      title: "Kits",
-    },
-    {
-      icon: <Icon icon="category" />,
-      to: "categories",
-      title: "Categories",
-    },
-    {
-      icon: <Icon icon="tag" />,
-      to: "tags",
-      title: "Tags",
-    },
-    {
-      icon: <Icon icon="location" />,
-      to: "locations",
-      title: "Locations",
-    },
-    {
-      icon: <Icon icon="calendar" />,
-      to: "calendar",
-      title: "Calendar",
-    },
-    {
-      icon: <Icon icon="bookings" />,
-      to: "bookings",
-      title: "Bookings",
-    },
-    {
-      icon: <Icon icon="user" />,
-      to: "/settings/team",
-      title: "Team",
-    },
-  ];
-  let menuItemsBottom = [
-    {
-      icon: <Icon icon="asset-label" />,
-      to: `https://www.shelf.nu/order-tags?email=${user?.email}${
-        user?.firstName ? `&firstName=${user.firstName}` : ""
-      }${user?.lastName ? `&lastName=${user.lastName}` : ""}`,
-      title: "Asset labels",
-      target: "_blank",
-      isNew: true,
-    },
-    {
-      icon: <Icon icon="scanQR" />,
-      to: "scanner",
-      title: "QR scanner",
-      end: true,
-    },
-    {
-      icon: <Icon icon="settings" />,
-      to: "settings",
-      title: "Workspace settings",
-      end: true,
-    },
-  ];
-
-  if (isBaseOrSelfService) {
-    /** Deleting the Dashboard menu item as its not needed for self_service users. */
-    const itemsToRemove = [
-      "dashboard",
-      "categories",
-      "tags",
-      "locations",
-      "settings",
-      "/settings/team",
-    ];
-    menuItemsTop = menuItemsTop.filter(
-      (item) => !itemsToRemove.includes(item.to)
-    );
-    menuItemsBottom = menuItemsBottom.filter(
-      (item) => !itemsToRemove.includes(item.to)
-    );
-  }
-
-  return {
-    menuItemsTop,
-    menuItemsBottom,
-  };
-}
diff --git a/app/hooks/use-mobile.ts b/app/hooks/use-mobile.ts
new file mode 100644
index 000000000..b024d97b8
--- /dev/null
+++ b/app/hooks/use-mobile.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    let mql: MediaQueryList;
+
+    if (window) {
+      mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+      mql.addEventListener("change", onChange);
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    }
+
+    function onChange() {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    }
+
+    return () => {
+      mql?.removeEventListener("change", onChange);
+    };
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/app/hooks/use-sidebar-nav-items.tsx b/app/hooks/use-sidebar-nav-items.tsx
new file mode 100644
index 000000000..1b835f199
--- /dev/null
+++ b/app/hooks/use-sidebar-nav-items.tsx
@@ -0,0 +1,242 @@
+import { useMemo } from "react";
+import { useLoaderData } from "@remix-run/react";
+import { Crisp } from "crisp-sdk-web";
+import {
+  BoxesIcon,
+  BriefcaseConveyorBeltIcon,
+  CalendarRangeIcon,
+  ChartLineIcon,
+  ChartNoAxesCombinedIcon,
+  MapPinIcon,
+  MessageCircleIcon,
+  PackageOpenIcon,
+  QrCodeIcon,
+  ScanQrCodeIcon,
+  SettingsIcon,
+  TagsIcon,
+  UsersRoundIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { UpgradeMessage } from "~/components/marketing/upgrade-message";
+import When from "~/components/when/when";
+import type { loader } from "~/routes/_layout+/_layout";
+import { isPersonalOrg } from "~/utils/organization";
+import { useCurrentOrganization } from "./use-current-organization-id";
+import { useUserRoleHelper } from "./user-user-role-helper";
+
+type BaseNavItem = {
+  title: string;
+  hidden?: boolean;
+  Icon: LucideIcon;
+  disabled?: boolean | { reason: React.ReactNode };
+};
+
+export type ChildNavItem = BaseNavItem & {
+  type: "child";
+  to: string;
+  target?: string;
+};
+
+export type ParentNavItem = BaseNavItem & {
+  type: "parent";
+  children: Omit<ChildNavItem, "type" | "Icon">[];
+};
+
+type LabelNavItem = Omit<BaseNavItem, "Icon"> & {
+  type: "label";
+};
+
+type ButtonNavItem = BaseNavItem & {
+  type: "button";
+  onClick: () => void;
+};
+
+export type NavItem =
+  | ChildNavItem
+  | ParentNavItem
+  | LabelNavItem
+  | ButtonNavItem;
+
+export function useSidebarNavItems() {
+  const { isAdmin, canUseBookings, subscription } =
+    useLoaderData<typeof loader>();
+  const { isBaseOrSelfService } = useUserRoleHelper();
+  const currentOrganization = useCurrentOrganization();
+  const isPersonalOrganization = isPersonalOrg(currentOrganization);
+
+  const bookingDisabled = useMemo(() => {
+    if (canUseBookings) {
+      return false;
+    }
+
+    return {
+      reason: (
+        <div>
+          <h5>Disabled</h5>
+          <p>
+            Booking is a premium feature only available for Team workspaces.
+          </p>
+
+          <When truthy={!!subscription} fallback={<UpgradeMessage />}>
+            <p>Please switch to your team workspace to access this feature.</p>
+          </When>
+        </div>
+      ),
+    };
+  }, [canUseBookings, subscription]);
+
+  const topMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Admin Dashboard",
+      to: "/admin-dashboard/users",
+      Icon: ChartLineIcon,
+      hidden: !isAdmin,
+    },
+    {
+      type: "label",
+      title: "Asset management",
+    },
+    {
+      type: "child",
+      title: "Dashboard",
+      to: "/dashboard",
+      Icon: ChartNoAxesCombinedIcon,
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Assets",
+      to: "/assets",
+      Icon: PackageOpenIcon,
+    },
+    {
+      type: "child",
+      title: "Kits",
+      to: "/kits",
+      Icon: BriefcaseConveyorBeltIcon,
+    },
+    {
+      type: "child",
+      title: "Categories",
+      to: "/categories",
+      Icon: BoxesIcon,
+      hidden: isBaseOrSelfService,
+    },
+
+    {
+      type: "child",
+      title: "Tags",
+      to: "/tags",
+      Icon: TagsIcon,
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "child",
+      title: "Locations",
+      to: "/locations",
+      Icon: MapPinIcon,
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "parent",
+      title: "Bookings",
+      Icon: CalendarRangeIcon,
+      disabled: bookingDisabled,
+      children: [
+        {
+          title: "View Bookings",
+          to: "/bookings",
+          disabled: bookingDisabled,
+        },
+        {
+          title: "Calendar",
+          to: "/calendar",
+          disabled: bookingDisabled,
+        },
+      ],
+    },
+    {
+      type: "label",
+      title: "Organization",
+      hidden: isBaseOrSelfService,
+    },
+    {
+      type: "parent",
+      title: "Team",
+      Icon: UsersRoundIcon,
+      hidden: isBaseOrSelfService,
+      children: [
+        {
+          title: "Users",
+          to: "/settings/team/users",
+          hidden: isPersonalOrganization,
+        },
+        {
+          title: "Non-registered members",
+          to: "/settings/team/nrm",
+        },
+      ],
+    },
+    {
+      type: "parent",
+      title: "Workspace settings",
+      Icon: SettingsIcon,
+      hidden: isBaseOrSelfService,
+      children: [
+        {
+          title: "General",
+          to: "/settings/general",
+        },
+        {
+          title: "Custom fields",
+          to: "/settings/custom-fields",
+        },
+      ],
+    },
+  ];
+
+  const bottomMenuItems: NavItem[] = [
+    {
+      type: "child",
+      title: "Asset labels",
+      to: `https://store.shelf.nu/?ref=shelf_webapp_sidebar`,
+      Icon: QrCodeIcon,
+      target: "_blank",
+    },
+    {
+      type: "child",
+      title: "QR Scanner",
+      to: "/scanner",
+      Icon: ScanQrCodeIcon,
+    },
+    {
+      type: "button",
+      title: "Questions/Feedback",
+      Icon: MessageCircleIcon,
+      onClick: () => {
+        Crisp.chat.open();
+      },
+    },
+  ];
+
+  return {
+    topMenuItems: removeHiddenNavItems(topMenuItems),
+    bottomMenuItems: removeHiddenNavItems(bottomMenuItems),
+  };
+}
+
+function removeHiddenNavItems(navItems: NavItem[]) {
+  return navItems
+    .filter((item) => !item.hidden)
+    .map((item) => {
+      if (item.type === "parent") {
+        return {
+          ...item,
+          children: item.children.filter((child) => !child.hidden),
+        };
+      }
+
+      return item;
+    });
+}
diff --git a/app/root.tsx b/app/root.tsx
index 3afd92311..8e1381a03 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,7 +7,6 @@ import type {
 } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
-  Link,
   Links,
   Meta,
   Outlet,
@@ -19,8 +18,8 @@ import {
 import { withSentry } from "@sentry/remix";
 import nProgressStyles from "nprogress/nprogress.css?url";
 import { ErrorContent } from "./components/errors";
-import { HomeIcon } from "./components/icons/library";
 import BlockInteractions from "./components/layout/maintenance-mode";
+import { SidebarTrigger } from "./components/layout/sidebar/sidebar";
 import { Clarity } from "./components/marketing/clarity";
 import { config } from "./config/shelf.config";
 import { useNprogress } from "./hooks/use-nprogress";
@@ -41,11 +40,7 @@ export interface RootData {
 }
 
 export const handle = {
-  breadcrumb: () => (
-    <Link to="/" title="Home" id="homeCrumb">
-      <HomeIcon className="inline" />
-    </Link>
-  ),
+  breadcrumb: () => <SidebarTrigger />,
 };
 
 export const links: LinksFunction = () => [
@@ -83,12 +78,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
   const data = useRouteLoaderData<typeof loader>("root");
   const nonce = useNonce();
   const [hasCookies, setHasCookies] = useState(true);
+
   useEffect(() => {
     setHasCookies(navigator.cookieEnabled);
   }, []);
 
   return (
-    <html lang="en" className="h-full">
+    <html lang="en" className="overflow-hidden">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -98,13 +94,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
         <Clarity />
       </head>
-      <body className="h-full">
+      <body>
         <noscript>
           <BlockInteractions
-            title={"JavaScript is disabled"}
-            content={
-              "This website requires JavaScript to be enabled to function properly. Please enable JavaScript or change browser and try again."
-            }
+            title="JavaScript is disabled"
+            content="This website requires JavaScript to be enabled to function properly. Please enable JavaScript or change browser and try again."
             icon="x"
           />
         </noscript>
@@ -113,10 +107,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
           children
         ) : (
           <BlockInteractions
-            title={"Cookies are disabled"}
-            content={
-              "This website requires cookies to be enabled to function properly. Please enable cookies and try again."
-            }
+            title="Cookies are disabled"
+            content="This website requires cookies to be enabled to function properly. Please enable cookies and try again."
             icon="x"
           />
         )}
diff --git a/app/routes/_auth+/_auth.tsx b/app/routes/_auth+/_auth.tsx
index 3bef5a18e..a2370722b 100644
--- a/app/routes/_auth+/_auth.tsx
+++ b/app/routes/_auth+/_auth.tsx
@@ -16,41 +16,38 @@ export default function App() {
   const { title, subHeading } = data;
 
   return (
-    <div className="flex h-full min-h-screen flex-col ">
-      <main className="flex size-full">
-        <div className="flex size-full flex-col items-center justify-center p-6 lg:p-10">
-          <div className=" mb-8 text-center">
-            <Link to="/" reloadDocument>
-              <ShelfSymbolLogo />
-            </Link>
+    <main className="flex h-screen">
+      <div className="flex size-full flex-col items-center justify-center p-6 lg:p-10">
+        <div className=" mb-8 text-center">
+          <Link to="/" reloadDocument>
+            <ShelfSymbolLogo />
+          </Link>
 
-            <h1>{title}</h1>
-            {subHeading && (
-              <SubHeading className="max-w-md">{subHeading}</SubHeading>
-            )}
-          </div>
-          <div className=" w-[360px]">
-            <Outlet />
-          </div>
+          <h1>{title}</h1>
+          {subHeading && (
+            <SubHeading className="max-w-md">{subHeading}</SubHeading>
+          )}
         </div>
-        <aside className="relative hidden h-full items-end justify-end p-8 lg:flex lg:w-[700px] xl:w-[900px]">
-          <a
-            href="https://www.nga.gov/collection/art-object-page.52316.html"
-            rel="noreferrer"
-            target="_blank"
-            className="relative z-20 w-[150px] text-right text-sm text-black no-underline hover:text-black"
-          >
-            John Singer Sargent <br />A Corner of the Library in Venice,
-            1904/1907
-          </a>
-          <img
-            className="absolute inset-0 size-full max-w-none object-cover"
-            src="/static/images/auth-cover.jpg"
-            alt="John Singer Sargent - A Corner of the Library in Venice, 1904/1907 "
-          />
-        </aside>
-      </main>
-    </div>
+        <div className=" w-[360px]">
+          <Outlet />
+        </div>
+      </div>
+      <aside className="relative hidden h-full items-end justify-end p-8 lg:flex lg:w-[700px] xl:w-[900px]">
+        <a
+          href="https://www.nga.gov/collection/art-object-page.52316.html"
+          rel="noreferrer"
+          target="_blank"
+          className="relative z-20 w-[150px] text-right text-sm text-black no-underline hover:text-black"
+        >
+          John Singer Sargent <br />A Corner of the Library in Venice, 1904/1907
+        </a>
+        <img
+          className="absolute inset-0 size-full max-w-none object-cover"
+          src="/static/images/auth-cover.jpg"
+          alt="John Singer Sargent - A Corner of the Library in Venice, 1904/1907 "
+        />
+      </aside>
+    </main>
   );
 }
 
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx
index 89775c750..d0467227e 100644
--- a/app/routes/_layout+/_layout.tsx
+++ b/app/routes/_layout+/_layout.tsx
@@ -1,15 +1,22 @@
 import { Roles } from "@prisma/client";
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Outlet, useLoaderData } from "@remix-run/react";
-import { useAtom } from "jotai";
+import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
+import { useAtomValue } from "jotai";
+import { ScanQrCodeIcon } from "lucide-react";
 import { ClientOnly } from "remix-utils/client-only";
 import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ErrorContent } from "~/components/errors";
 
 import { InstallPwaPromptModal } from "~/components/layout/install-pwa-prompt-modal";
-import Sidebar from "~/components/layout/sidebar/sidebar";
+import AppSidebar from "~/components/layout/sidebar/app-sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "~/components/layout/sidebar/sidebar";
 import { useCrisp } from "~/components/marketing/crisp";
+import { ShelfMobileLogo } from "~/components/marketing/logos";
 import { Spinner } from "~/components/shared/spinner";
 import { Toaster } from "~/components/shared/toast";
 import { NoSubscription } from "~/components/subscription/no-subscription";
@@ -34,6 +41,7 @@ import {
   stripe,
 } from "~/utils/stripe.server";
 import { canUseBookings } from "~/utils/subscription.server";
+import { tw } from "~/utils/tw";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
@@ -131,9 +139,8 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 
 export default function App() {
   useCrisp();
-  const { currentOrganizationId, disabledTeamOrg } =
-    useLoaderData<typeof loader>();
-  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
+  const { disabledTeamOrg, minimizedSidebar } = useLoaderData<typeof loader>();
+  const workspaceSwitching = useAtomValue(switchingWorkspaceAtom);
 
   const renderInstallPwaPromptOnMobile = () =>
     // returns InstallPwaPromptModal if the device width is lesser than 640px and the app is being accessed from browser not PWA
@@ -143,35 +150,47 @@ export default function App() {
     ) : null;
 
   return (
-    <>
-      <div
-        id="container"
-        key={currentOrganizationId}
-        className="flex h-screen max-h-screen min-h-screen min-w-[320px] flex-col"
-      >
-        <div className="inner-container flex flex-col md:flex-row">
-          <Sidebar />
-          <main className=" flex-1 bg-gray-25 px-4 pb-6 md:w-[calc(100%-312px)]">
-            <div className="flex h-full flex-1 flex-col">
-              {disabledTeamOrg ? (
-                <NoSubscription />
-              ) : workspaceSwitching ? (
-                <div className="flex size-full flex-col items-center justify-center text-center">
-                  <Spinner />
-                  <p className="mt-2">Activating workspace...</p>
-                </div>
-              ) : (
-                <Outlet />
-              )}
-            </div>
-            <Toaster />
-            <ClientOnly fallback={null}>
-              {renderInstallPwaPromptOnMobile}
-            </ClientOnly>
-          </main>
-        </div>
-      </div>
-    </>
+    <SidebarProvider defaultOpen={!minimizedSidebar}>
+      <AppSidebar />
+      <SidebarInset>
+        {disabledTeamOrg ? (
+          <NoSubscription />
+        ) : workspaceSwitching ? (
+          <div className="flex size-full flex-col items-center justify-center text-center">
+            <Spinner />
+            <p className="mt-2">Activating workspace...</p>
+          </div>
+        ) : (
+          <>
+            <header className="flex items-center justify-between border-b bg-white py-4 md:hidden">
+              <Link to="." title="Home" className="block h-8">
+                <ShelfMobileLogo />
+              </Link>
+              <div className="flex items-center space-x-4">
+                <NavLink
+                  to="/scanner"
+                  title="Scan QR Code"
+                  className={({ isActive }) =>
+                    tw(
+                      "relative flex items-center justify-center px-2 transition",
+                      isActive ? "text-primary-600" : "text-gray-500"
+                    )
+                  }
+                >
+                  <ScanQrCodeIcon />
+                </NavLink>
+                <SidebarTrigger iconClassName="size-6" />
+              </div>
+            </header>
+            <Outlet />
+          </>
+        )}
+        <Toaster />
+        <ClientOnly fallback={null}>
+          {renderInstallPwaPromptOnMobile}
+        </ClientOnly>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
 
diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
index 3913fd0fa..12765b8ae 100644
--- a/app/routes/_layout+/assets._index.tsx
+++ b/app/routes/_layout+/assets._index.tsx
@@ -328,24 +328,23 @@ export const AssetsList = ({
   return (
     <div
       className={tw(
-        "flex h-full flex-col",
-        modeIsSimple ? "gap-4 pt-4" : "gap-2 pt-2"
+        "flex flex-col",
+        modeIsSimple ? "gap-4 pb-5 pt-4" : "gap-2 py-2"
       )}
     >
-      {isSwappingMode ? (
+      <When truthy={!!isSwappingMode}>
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ delay: 0.2 }}
-          className="absolute inset-[3px] z-[11] flex flex-col items-center border border-gray-200 bg-gray-25/95 pt-[200px]"
+          className="absolute inset-0 z-[11] flex flex-col items-center justify-center border border-gray-200 bg-gray-25/95 pt-[200px]"
         >
           <Spinner />
           <p className="mt-2">Changing mode...</p>
         </motion.div>
-      ) : (
-        <></>
-      )}
+      </When>
+
       {!isMd && !modeIsSimple ? (
         <AdvancedModeMobileFallback />
       ) : (
diff --git a/app/routes/_layout+/settings.team.users.$userId.tsx b/app/routes/_layout+/settings.team.users.$userId.tsx
index 912d17897..77520b80f 100644
--- a/app/routes/_layout+/settings.team.users.$userId.tsx
+++ b/app/routes/_layout+/settings.team.users.$userId.tsx
@@ -5,6 +5,7 @@ import type {
 } from "@remix-run/node";
 import { json, Outlet, useLoaderData } from "@remix-run/react";
 import { z } from "zod";
+import { ErrorContent } from "~/components/errors";
 import Header from "~/components/layout/header";
 import { AbsolutePositionedHeaderActions } from "~/components/layout/header/absolute-positioned-header-actions";
 import HorizontalTabs from "~/components/layout/horizontal-tabs";
@@ -175,3 +176,7 @@ export default function UserPage() {
     </>
   );
 }
+
+export const ErrorBoundary = () => (
+  <ErrorContent className="h-[calc(100vh_-_100px)]" />
+);
diff --git a/app/styles/global.css b/app/styles/global.css
index c8f7845a0..c1a8acf42 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,12 @@
 :root {
   --tw-ring-color: #eaf2ff;
+  --sidebar-background: theme(colors.white);
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
 }
 
 html {
diff --git a/app/styles/layout/sidebar.css b/app/styles/layout/sidebar.css
index 655119f76..4bc4d7655 100644
--- a/app/styles/layout/sidebar.css
+++ b/app/styles/layout/sidebar.css
@@ -42,3 +42,7 @@
     @apply pointer-events-none hidden;
   }
 }
+
+.active\:text-sidebar-accent-foreground:active {
+  @apply text-primary;
+}
diff --git a/package-lock.json b/package-lock.json
index dcf75ed5b..dd3d3d913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,13 @@
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^5.9.1",
         "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "2.0.6",
         "@radix-ui/react-hover-card": "^1.0.7",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "2.0.0",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "1.0.4",
         "@radix-ui/react-toast": "1.1.5",
@@ -36,6 +38,7 @@
         "@zxing/library": "^0.20.0",
         "changedpi": "^1.0.4",
         "chardet": "^2.0.0",
+        "class-variance-authority": "^0.7.0",
         "cookie": "^0.7.0",
         "crisp-sdk-web": "^1.0.21",
         "csv-parse": "^5.5.3",
@@ -3337,6 +3340,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -5013,6 +5046,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -9366,6 +9422,27 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA=="
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
diff --git a/package.json b/package.json
index 2db40ef3d..ad76c8f4f 100644
--- a/package.json
+++ b/package.json
@@ -49,11 +49,13 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
@@ -70,6 +72,7 @@
     "@zxing/library": "^0.20.0",
     "changedpi": "^1.0.4",
     "chardet": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
     "cookie": "^0.7.0",
     "crisp-sdk-web": "^1.0.21",
     "csv-parse": "^5.5.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 86a760103..4acf78638 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 export default {
   content: [
@@ -91,6 +92,7 @@ export default {
       colors: {
         white: "#ffffff",
         black: "#000000",
+        muted: colors.gray[200],
         gray: {
           25: "#FCFCFD",
           50: "#F9FAFB",
@@ -219,6 +221,15 @@ export default {
             inverted: "#000000", // black
           },
         },
+        sidebar: {
+          DEFAULT: "var(--sidebar-background)",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+        },
       },
 
       boxShadow: {