diff --git a/app/about/layout.tsx b/app/about/layout.tsx
index cfdc03b801..98956a52ad 100644
--- a/app/about/layout.tsx
+++ b/app/about/layout.tsx
@@ -1,7 +1,13 @@
-export default function AboutLayout({ children }: { children: React.ReactNode }) {
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">{children}</div>
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
     </section>
   );
 }
diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
index 365caee773..911d0bcf41 100644
--- a/app/blog/layout.tsx
+++ b/app/blog/layout.tsx
@@ -1,7 +1,13 @@
-export default function BlogLayout({ children }: { children: React.ReactNode }) {
+export default function BlogLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">{children}</div>
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
     </section>
   );
 }
diff --git a/app/clouds/layout.tsx b/app/clouds/layout.tsx
index 8c8daab55d..d9ca1e80e4 100644
--- a/app/clouds/layout.tsx
+++ b/app/clouds/layout.tsx
@@ -1,4 +1,8 @@
-export default function CloudsLayout({ children }: { children: React.ReactNode }) {
+export default function CloudsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
       <div className="inline-block text-center justify-center">{children}</div>
diff --git a/app/clouds/page.tsx b/app/clouds/page.tsx
index 48d18551f8..d546612378 100644
--- a/app/clouds/page.tsx
+++ b/app/clouds/page.tsx
@@ -22,13 +22,21 @@ import { title } from "@/components/primitives";
 import { fetcher } from "@/utils/fetcher";
 
 export default function CloudsPage() {
-  const getAccounts = useSWR("http://localhost:8080/api/v1/providers/aws/accounts", fetcher);
+  const getAccounts = useSWR(
+    "http://localhost:8080/api/v1/providers/aws/accounts",
+    fetcher,
+  );
 
-  const getAudits = useSWR("http://localhost:8080/api/v1/providers/aws/audits", fetcher);
+  const getAudits = useSWR(
+    "http://localhost:8080/api/v1/providers/aws/audits",
+    fetcher,
+  );
 
   // TODO FIX TYPE CHECKING
   const getScanDetails = (account_id: number, detail: string) => {
-    const scan = getAudits.data && getAudits.data.find((audit: any) => audit.account_id === account_id);
+    const scan =
+      getAudits.data &&
+      getAudits.data.find((audit: any) => audit.account_id === account_id);
 
     if (detail === "status") {
       return scan?.audit_complete && "Completed";
@@ -70,8 +78,12 @@ export default function CloudsPage() {
     <div>
       <h1 className={title()}>Cloud Accounts</h1>
       <p className="mt-10 text-left">
-        {getAccounts.error && <span className="text-red-400">Failed to load</span>}
-        {getAccounts.isLoading && <span className="text-yellow-400">Loading</span>}
+        {getAccounts.error && (
+          <span className="text-red-400">Failed to load</span>
+        )}
+        {getAccounts.isLoading && (
+          <span className="text-yellow-400">Loading</span>
+        )}
       </p>
       {getAccounts.data && (
         <Table aria-label="cloud accounts table" className="text-left mt-10">
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index e3d89f490a..eaf63f3b99 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -1,7 +1,13 @@
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">{children}</div>
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
     </section>
   );
 }
diff --git a/app/error.tsx b/app/error.tsx
index 388b7fcc7b..9ed5104e8a 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -2,7 +2,13 @@
 
 import { useEffect } from "react";
 
-export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
   useEffect(() => {
     // Log the error to an error reporting service
     /* eslint-disable no-console */
diff --git a/app/layout.tsx b/app/layout.tsx
index 39517f2bf1..c414a0bf59 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,11 +2,12 @@ import "@/styles/globals.css";
 
 import clsx from "clsx";
 import { Metadata, Viewport } from "next";
+import React from "react";
 
-import { Navbar } from "@/components/navbar";
 import { fontSans } from "@/config/fonts";
 import { siteConfig } from "@/config/site";
 
+import { SidebarWrap } from "../components/sidebar/SidebarWrap";
 import { Providers } from "./providers";
 
 export const metadata: Metadata = {
@@ -27,15 +28,24 @@ export const viewport: Viewport = {
   ],
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html suppressHydrationWarning lang="en">
       <head />
-      <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={clsx(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable,
+        )}
+      >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="relative flex flex-col h-screen">
-            <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">{children}</main>
+          <div className="flex items-center h-dvh w-full justify-center overflow-hidden">
+            <SidebarWrap />
+            <main className="w-full flex-1 flex-col p-4">{children}</main>
           </div>
         </Providers>
       </body>
diff --git a/app/login/layout.tsx b/app/login/layout.tsx
index 561d6bcc49..d3a4a58ea4 100644
--- a/app/login/layout.tsx
+++ b/app/login/layout.tsx
@@ -1,7 +1,13 @@
-export default function LoginLayout({ children }: { children: React.ReactNode }) {
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">{children}</div>
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
     </section>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
index c348917daf..f07535d803 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -2,7 +2,15 @@
 
 import { EyeIcon } from "@heroicons/react/24/solid";
 import { EyeSlashIcon } from "@heroicons/react/24/solid";
-import { Button, Card, CardBody, CardFooter, CardHeader, Input, Link } from "@nextui-org/react";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Input,
+  Link,
+} from "@nextui-org/react";
 import React from "react";
 
 export default function LoginPage() {
@@ -18,13 +26,22 @@ export default function LoginPage() {
             <h1 className="pl-1">Login</h1>
           </CardHeader>
           <CardBody className="w-72 pb-0">
-            <Input label="Email" variant="bordered" placeholder="Enter your email" className="mb-2" />
+            <Input
+              label="Email"
+              variant="bordered"
+              placeholder="Enter your email"
+              className="mb-2"
+            />
             <Input
               label="Password"
               variant="bordered"
               placeholder="Enter your password"
               endContent={
-                <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
+                <button
+                  className="focus:outline-none"
+                  type="button"
+                  onClick={toggleVisibility}
+                >
                   {isVisible ? (
                     <EyeSlashIcon className="text-2xl text-default-400 pointer-events-none w-5 h-5" />
                   ) : (
diff --git a/app/page.tsx b/app/page.tsx
index 8259dd904c..268ac3a2ea 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,49 +1,177 @@
 "use client";
 
-import { EyeIcon } from "@heroicons/react/24/solid";
-import { EyeSlashIcon } from "@heroicons/react/24/solid";
-import { Button, Card, CardBody, CardFooter, CardHeader, Input, Link } from "@nextui-org/react";
+import { Icon } from "@iconify/react";
+import { Button } from "@nextui-org/react";
 import React from "react";
 
 export default function Home() {
-  const [isVisible, setIsVisible] = React.useState(false);
-
-  const toggleVisibility = () => setIsVisible(!isVisible);
-
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        <Card>
-          <CardHeader className="pb-0">
-            <h1 className="pl-1">Login</h1>
-          </CardHeader>
-          <CardBody className="w-72 pb-0">
-            <Input label="Email" variant="bordered" placeholder="Enter your email" className="mb-2" />
-            <Input
-              label="Password"
-              variant="bordered"
-              placeholder="Enter your password"
-              endContent={
-                <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
-                  {isVisible ? (
-                    <EyeSlashIcon className="text-2xl text-default-400 pointer-events-none w-5 h-5" />
-                  ) : (
-                    <EyeIcon className="text-2xl text-default-400 pointer-events-none w-5 h-5" />
-                  )}
-                </button>
-              }
-              type={isVisible ? "text" : "password"}
-              className="max-w-xs"
+    <>
+      <main className="h-full w-full overflow-visible ">
+        <header className="flex items-center gap-3 rounded-medium border-small border-divider p-4">
+          <Button isIconOnly size="sm" variant="light">
+            <Icon
+              className="text-default-500"
+              height={24}
+              icon="solar:sidebar-minimalistic-outline"
+              width={24}
             />
-          </CardBody>
-          <CardFooter>
-            <Button href="/clouds" as={Link} color="primary">
-              Submit
-            </Button>
-          </CardFooter>
-        </Card>
-        <p className="mt-24">This is a page with "use client", useState</p>
-      </div>
-    </section>
+          </Button>
+          <h2 className="text-medium font-medium text-default-700">Overview</h2>
+        </header>
+        <div className="flex h-dvh-minus-16 w-full mt-4 flex-col gap-4 p-4 overflow-y-scroll">
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+          <p> hi hi from the overview page </p>
+        </div>
+      </main>
+    </>
   );
 }
diff --git a/app/pricing/layout.tsx b/app/pricing/layout.tsx
index fa11447c67..dc3db6af64 100644
--- a/app/pricing/layout.tsx
+++ b/app/pricing/layout.tsx
@@ -1,7 +1,13 @@
-export default function PricingLayout({ children }: { children: React.ReactNode }) {
+export default function PricingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">{children}</div>
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
     </section>
   );
 }
diff --git a/components/icons.tsx b/components/Icons.tsx
similarity index 86%
rename from components/icons.tsx
rename to components/Icons.tsx
index c684f44d78..a3d73323b4 100644
--- a/components/icons.tsx
+++ b/components/Icons.tsx
@@ -2,8 +2,19 @@ import * as React from "react";
 
 import { IconSvgProps } from "@/types";
 
-export const Logo: React.FC<IconSvgProps> = ({ size = 36, width, height, ...props }) => (
-  <svg fill="none" height={size || height} viewBox="0 0 32 32" width={size || width} {...props}>
+export const Logo: React.FC<IconSvgProps> = ({
+  size = 36,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 32 32"
+    width={size || width}
+    {...props}
+  >
     <path
       clipRule="evenodd"
       d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
@@ -13,9 +24,19 @@ export const Logo: React.FC<IconSvgProps> = ({ size = 36, width, height, ...prop
   </svg>
 );
 
-export const DiscordIcon: React.FC<IconSvgProps> = ({ size = 24, width, height, ...props }) => {
+export const DiscordIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
   return (
-    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
       <path
         d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"
         fill="currentColor"
@@ -24,9 +45,19 @@ export const DiscordIcon: React.FC<IconSvgProps> = ({ size = 24, width, height,
   );
 };
 
-export const TwitterIcon: React.FC<IconSvgProps> = ({ size = 24, width, height, ...props }) => {
+export const TwitterIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
   return (
-    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
       <path
         d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
         fill="currentColor"
@@ -35,9 +66,19 @@ export const TwitterIcon: React.FC<IconSvgProps> = ({ size = 24, width, height,
   );
 };
 
-export const GithubIcon: React.FC<IconSvgProps> = ({ size = 24, width, height, ...props }) => {
+export const GithubIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
   return (
-    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+    <svg
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
       <path
         clipRule="evenodd"
         d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
@@ -48,7 +89,12 @@ export const GithubIcon: React.FC<IconSvgProps> = ({ size = 24, width, height, .
   );
 };
 
-export const MoonFilledIcon = ({ size = 24, width, height, ...props }: IconSvgProps) => (
+export const MoonFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
   <svg
     aria-hidden="true"
     focusable="false"
@@ -65,7 +111,12 @@ export const MoonFilledIcon = ({ size = 24, width, height, ...props }: IconSvgPr
   </svg>
 );
 
-export const SunFilledIcon = ({ size = 24, width, height, ...props }: IconSvgProps) => (
+export const SunFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
   <svg
     aria-hidden="true"
     focusable="false"
@@ -82,7 +133,12 @@ export const SunFilledIcon = ({ size = 24, width, height, ...props }: IconSvgPro
   </svg>
 );
 
-export const HeartFilledIcon = ({ size = 24, width, height, ...props }: IconSvgProps) => (
+export const HeartFilledIcon = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
   <svg
     aria-hidden="true"
     focusable="false"
@@ -120,7 +176,13 @@ export const SearchIcon = (props: IconSvgProps) => (
       strokeLinejoin="round"
       strokeWidth="2"
     />
-    <path d="M22 22L20 20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
   </svg>
 );
 
@@ -128,7 +190,14 @@ export const NextUILogo: React.FC<IconSvgProps> = (props) => {
   const { width, height = 40 } = props;
 
   return (
-    <svg fill="none" height={height} viewBox="0 0 161 32" width={width} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      fill="none"
+      height={height}
+      viewBox="0 0 161 32"
+      width={width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
         className="fill-black dark:fill-white"
         d="M55.6827 5V26.6275H53.7794L41.1235 8.51665H40.9563V26.6275H39V5H40.89L53.5911 23.1323H53.7555V5H55.6827ZM67.4831 26.9663C66.1109 27.0019 64.7581 26.6329 63.5903 25.9044C62.4852 25.185 61.6054 24.1633 61.0537 22.9582C60.4354 21.5961 60.1298 20.1106 60.1598 18.6126C60.132 17.1113 60.4375 15.6228 61.0537 14.2563C61.5954 13.0511 62.4525 12.0179 63.5326 11.268C64.6166 10.5379 65.8958 10.16 67.1986 10.1852C68.0611 10.1837 68.9162 10.3468 69.7187 10.666C70.5398 10.9946 71.2829 11.4948 71.8992 12.1337C72.5764 12.8435 73.0985 13.6889 73.4318 14.6152C73.8311 15.7483 74.0226 16.9455 73.9968 18.1479V19.0773H63.2262V17.4194H72.0935C72.1083 16.4456 71.8952 15.4821 71.4714 14.6072C71.083 13.803 70.4874 13.1191 69.7472 12.6272C68.9887 12.1348 68.1022 11.8812 67.2006 11.8987C66.2411 11.8807 65.3005 12.1689 64.5128 12.7223C63.7332 13.2783 63.1083 14.0275 62.6984 14.8978C62.2582 15.8199 62.0314 16.831 62.0352 17.8546V18.8476C62.009 20.0078 62.2354 21.1595 62.6984 22.2217C63.1005 23.1349 63.7564 23.9108 64.5864 24.4554C65.4554 24.9973 66.4621 25.2717 67.4831 25.2448C68.1676 25.2588 68.848 25.1368 69.4859 24.8859C70.0301 24.6666 70.5242 24.3376 70.9382 23.919C71.3183 23.5345 71.6217 23.0799 71.8322 22.5799L73.5995 23.1604C73.3388 23.8697 72.9304 24.5143 72.4019 25.0506C71.8132 25.6529 71.1086 26.1269 70.3314 26.4434C69.4258 26.8068 68.4575 26.9846 67.4831 26.9663V26.9663ZM78.8233 10.4075L82.9655 17.325L87.1076 10.4075H89.2683L84.1008 18.5175L89.2683 26.6275H87.103L82.9608 19.9317L78.8193 26.6275H76.6647L81.7711 18.5169L76.6647 10.4062L78.8233 10.4075ZM99.5142 10.4075V12.0447H91.8413V10.4075H99.5142ZM94.2427 6.52397H96.1148V22.3931C96.086 22.9446 96.2051 23.4938 96.4597 23.9827C96.6652 24.344 96.9805 24.629 97.3589 24.7955C97.7328 24.9548 98.1349 25.0357 98.5407 25.0332C98.7508 25.0359 98.9607 25.02 99.168 24.9857C99.3422 24.954 99.4956 24.9205 99.6283 24.8853L100.026 26.5853C99.8062 26.6672 99.5805 26.7327 99.3511 26.7815C99.0274 26.847 98.6977 26.8771 98.3676 26.8712C97.6854 26.871 97.0119 26.7156 96.3973 26.4166C95.7683 26.1156 95.2317 25.6485 94.8442 25.0647C94.4214 24.4018 94.2097 23.6242 94.2374 22.8363L94.2427 6.52397ZM118.398 5H120.354V19.3204C120.376 20.7052 120.022 22.0697 119.328 23.2649C118.644 24.4235 117.658 25.3698 116.477 26.0001C115.168 26.6879 113.708 27.0311 112.232 26.9978C110.759 27.029 109.302 26.6835 107.996 25.9934C106.815 25.362 105.827 24.4161 105.141 23.2582C104.447 22.0651 104.092 20.7022 104.115 19.319V5H106.08V19.1831C106.061 20.2559 106.324 21.3147 106.843 22.2511C107.349 23.1459 108.094 23.8795 108.992 24.3683C109.993 24.9011 111.111 25.1664 112.242 25.139C113.373 25.1656 114.493 24.9003 115.495 24.3683C116.395 23.8815 117.14 23.1475 117.644 22.2511C118.16 21.3136 118.421 20.2553 118.402 19.1831L118.398 5ZM128 5V26.6275H126.041V5H128Z"
diff --git a/components/navbar.tsx b/components/Navbar.tsx
similarity index 93%
rename from components/navbar.tsx
rename to components/Navbar.tsx
index 0b1aa05f64..2471830968 100644
--- a/components/navbar.tsx
+++ b/components/Navbar.tsx
@@ -20,7 +20,9 @@ export const Navbar = () => {
   return (
     <NextUINavbar onMenuOpenChange={setIsMenuOpen}>
       <NavbarContent>
-        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+        />
         <NavbarBrand>
           <p className="font-bold text-inherit">PROWLER</p>
         </NavbarBrand>
diff --git a/components/theme-switch.tsx b/components/ThemeSwitch.tsx
similarity index 70%
rename from components/theme-switch.tsx
rename to components/ThemeSwitch.tsx
index 2c2cd9e85a..9c58062ce2 100644
--- a/components/theme-switch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -6,15 +6,19 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import clsx from "clsx";
 import { useTheme } from "next-themes";
 import { FC } from "react";
+import React from "react";
 
-import { MoonFilledIcon, SunFilledIcon } from "@/components/icons";
+import { MoonFilledIcon, SunFilledIcon } from "./Icons";
 
 export interface ThemeSwitchProps {
   className?: string;
   classNames?: SwitchProps["classNames"];
 }
 
-export const ThemeSwitch: FC<ThemeSwitchProps> = ({ className, classNames }) => {
+export const ThemeSwitch: FC<ThemeSwitchProps> = ({
+  className,
+  classNames,
+}) => {
   const { theme, setTheme } = useTheme();
   const isSSR = useIsSSR();
 
@@ -22,7 +26,14 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({ className, classNames }) =>
     theme === "light" ? setTheme("dark") : setTheme("light");
   };
 
-  const { Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps } = useSwitch({
+  const {
+    Component,
+    slots,
+    isSelected,
+    getBaseProps,
+    getInputProps,
+    getWrapperProps,
+  } = useSwitch({
     isSelected: theme === "light" || isSSR,
     "aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
     onChange,
@@ -31,7 +42,11 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({ className, classNames }) =>
   return (
     <Component
       {...getBaseProps({
-        className: clsx("px-px transition-opacity hover:opacity-80 cursor-pointer", className, classNames?.base),
+        className: clsx(
+          "px-px transition-opacity hover:opacity-80 cursor-pointer",
+          className,
+          classNames?.base,
+        ),
       })}
     >
       <VisuallyHidden>
@@ -56,7 +71,11 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({ className, classNames }) =>
           ),
         })}
       >
-        {!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
+        {!isSelected || isSSR ? (
+          <SunFilledIcon size={22} />
+        ) : (
+          <MoonFilledIcon size={22} />
+        )}
       </div>
     </Component>
   );
diff --git a/components/acme.tsx b/components/acme.tsx
new file mode 100644
index 0000000000..9478723fa5
--- /dev/null
+++ b/components/acme.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import { IconSvgProps } from "../types/index";
+
+export const AcmeIcon: React.FC<IconSvgProps> = ({
+  size = 32,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 32 32"
+    width={size || width}
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
diff --git a/components/counter.tsx b/components/counter.tsx
deleted file mode 100644
index 3fe2d87743..0000000000
--- a/components/counter.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-import { useState } from "react";
-
-export const Counter = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <Button radius="full" onPress={() => setCount(count + 1)}>
-      Count is {count}
-    </Button>
-  );
-};
diff --git a/components/primitives.ts b/components/primitives.ts
index e6095fdeae..472973cbe9 100644
--- a/components/primitives.ts
+++ b/components/primitives.ts
@@ -26,7 +26,15 @@ export const title = tv({
   },
   compoundVariants: [
     {
-      color: ["violet", "yellow", "blue", "cyan", "green", "pink", "foreground"],
+      color: [
+        "violet",
+        "yellow",
+        "blue",
+        "cyan",
+        "green",
+        "pink",
+        "foreground",
+      ],
       class: "bg-clip-text text-transparent bg-gradient-to-b",
     },
   ],
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/sidebar/Sidebar.tsx b/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000000..49df2deac7
--- /dev/null
+++ b/components/sidebar/Sidebar.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import {
+  Accordion,
+  AccordionItem,
+  type ListboxProps,
+  type ListboxSectionProps,
+  type Selection,
+} from "@nextui-org/react";
+import {
+  Listbox,
+  ListboxItem,
+  ListboxSection,
+  Tooltip,
+} from "@nextui-org/react";
+import React from "react";
+
+import { cn } from "@/utils/cn";
+
+export enum SidebarItemType {
+  Nest = "nest",
+}
+
+export type SidebarItem = {
+  key: string;
+  title: string;
+  icon?: string;
+  href?: string;
+  type?: SidebarItemType.Nest;
+  startContent?: React.ReactNode;
+  endContent?: React.ReactNode;
+  items?: SidebarItem[];
+  className?: string;
+};
+
+export type SidebarProps = Omit<ListboxProps<SidebarItem>, "children"> & {
+  items: SidebarItem[];
+  isCompact?: boolean;
+  hideEndContent?: boolean;
+  iconClassName?: string;
+  sectionClasses?: ListboxSectionProps["classNames"];
+  classNames?: ListboxProps["classNames"];
+  defaultSelectedKey: string;
+  onSelect?: (key: string) => void;
+};
+
+const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
+  (
+    {
+      items,
+      isCompact,
+      defaultSelectedKey,
+      onSelect,
+      hideEndContent,
+      sectionClasses: sectionClassesProp = {},
+      itemClasses: itemClassesProp = {},
+      iconClassName,
+      classNames,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selected, setSelected] =
+      React.useState<React.Key>(defaultSelectedKey);
+
+    const sectionClasses = {
+      ...sectionClassesProp,
+      base: cn(sectionClassesProp?.base, "w-full", {
+        "p-0 max-w-[44px]": isCompact,
+      }),
+      group: cn(sectionClassesProp?.group, {
+        "flex flex-col gap-1": isCompact,
+      }),
+      heading: cn(sectionClassesProp?.heading, {
+        hidden: isCompact,
+      }),
+    };
+
+    const itemClasses = {
+      ...itemClassesProp,
+      base: cn(itemClassesProp?.base, {
+        "w-11 h-11 gap-0 p-0": isCompact,
+      }),
+    };
+
+    const renderNestItem = React.useCallback(
+      (item: SidebarItem) => {
+        const isNestType =
+          item.items &&
+          item.items?.length > 0 &&
+          item?.type === SidebarItemType.Nest;
+
+        if (isNestType) {
+          // Is a nest type item , so we need to remove the href
+          delete item.href;
+        }
+
+        return (
+          <ListboxItem
+            {...item}
+            key={item.key}
+            classNames={{
+              base: cn(
+                {
+                  "h-auto p-0": !isCompact && isNestType,
+                },
+                {
+                  "inline-block w-11": isCompact && isNestType,
+                },
+              ),
+            }}
+            endContent={
+              isCompact || isNestType || hideEndContent
+                ? null
+                : item.endContent ?? null
+            }
+            startContent={
+              isCompact || isNestType ? null : item.icon ? (
+                <Icon
+                  className={cn(
+                    "text-default-500 group-data-[selected=true]:text-foreground",
+                    iconClassName,
+                  )}
+                  icon={item.icon}
+                  width={24}
+                />
+              ) : (
+                item.startContent ?? null
+              )
+            }
+            title={isCompact || isNestType ? null : item.title}
+          >
+            {isCompact ? (
+              <Tooltip content={item.title} placement="right">
+                <div className="flex w-full items-center justify-center">
+                  {item.icon ? (
+                    <Icon
+                      className={cn(
+                        "text-default-500 group-data-[selected=true]:text-foreground",
+                        iconClassName,
+                      )}
+                      icon={item.icon}
+                      width={24}
+                    />
+                  ) : (
+                    item.startContent ?? null
+                  )}
+                </div>
+              </Tooltip>
+            ) : null}
+            {!isCompact && isNestType ? (
+              <Accordion className={"p-0"}>
+                <AccordionItem
+                  key={item.key}
+                  aria-label={item.title}
+                  classNames={{
+                    heading: "pr-3",
+                    trigger: "p-0",
+                    content: "py-0 pl-4",
+                  }}
+                  title={
+                    item.icon ? (
+                      <div
+                        className={"flex h-11 items-center gap-2 px-2 py-1.5"}
+                      >
+                        <Icon
+                          className={cn(
+                            "text-default-500 group-data-[selected=true]:text-foreground",
+                            iconClassName,
+                          )}
+                          icon={item.icon}
+                          width={24}
+                        />
+                        <span className="text-small font-medium text-default-500 group-data-[selected=true]:text-foreground">
+                          {item.title}
+                        </span>
+                      </div>
+                    ) : (
+                      item.startContent ?? null
+                    )
+                  }
+                >
+                  {item.items && item.items?.length > 0 ? (
+                    <Listbox
+                      className={"mt-0.5"}
+                      classNames={{
+                        list: cn("border-l border-default-200 pl-4"),
+                      }}
+                      items={item.items}
+                      variant="flat"
+                    >
+                      {item.items.map(renderItem)}
+                    </Listbox>
+                  ) : (
+                    renderItem(item)
+                  )}
+                </AccordionItem>
+              </Accordion>
+            ) : null}
+          </ListboxItem>
+        );
+      },
+      [isCompact, hideEndContent, iconClassName, items],
+    );
+
+    const renderItem = React.useCallback(
+      (item: SidebarItem) => {
+        const isNestType =
+          item.items &&
+          item.items?.length > 0 &&
+          item?.type === SidebarItemType.Nest;
+
+        if (isNestType) {
+          return renderNestItem(item);
+        }
+
+        return (
+          <ListboxItem
+            {...item}
+            key={item.key}
+            endContent={
+              isCompact || hideEndContent ? null : item.endContent ?? null
+            }
+            startContent={
+              isCompact ? null : item.icon ? (
+                <Icon
+                  className={cn(
+                    "text-default-500 group-data-[selected=true]:text-foreground",
+                    iconClassName,
+                  )}
+                  icon={item.icon}
+                  width={24}
+                />
+              ) : (
+                item.startContent ?? null
+              )
+            }
+            textValue={item.title}
+            title={isCompact ? null : item.title}
+          >
+            {isCompact ? (
+              <Tooltip content={item.title} placement="right">
+                <div className="flex w-full items-center justify-center">
+                  {item.icon ? (
+                    <Icon
+                      className={cn(
+                        "text-default-500 group-data-[selected=true]:text-foreground",
+                        iconClassName,
+                      )}
+                      icon={item.icon}
+                      width={24}
+                    />
+                  ) : (
+                    item.startContent ?? null
+                  )}
+                </div>
+              </Tooltip>
+            ) : null}
+          </ListboxItem>
+        );
+      },
+      [isCompact, hideEndContent, iconClassName, itemClasses?.base],
+    );
+
+    return (
+      <Listbox
+        key={isCompact ? "compact" : "default"}
+        ref={ref}
+        hideSelectedIcon
+        as="nav"
+        className={cn("list-none", className)}
+        classNames={{
+          ...classNames,
+          list: cn("items-center", classNames?.list),
+        }}
+        color="default"
+        itemClasses={{
+          ...itemClasses,
+          base: cn(
+            "px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-default-100",
+            itemClasses?.base,
+          ),
+          title: cn(
+            "text-small font-medium text-default-500 group-data-[selected=true]:text-foreground",
+            itemClasses?.title,
+          ),
+        }}
+        items={items}
+        selectedKeys={[selected] as unknown as Selection}
+        selectionMode="single"
+        variant="flat"
+        onSelectionChange={(keys) => {
+          const key = Array.from(keys)[0];
+
+          setSelected(key as React.Key);
+          onSelect?.(key as string);
+        }}
+        {...props}
+      >
+        {(item) => {
+          return item.items &&
+            item.items?.length > 0 &&
+            item?.type === SidebarItemType.Nest ? (
+            renderNestItem(item)
+          ) : item.items && item.items?.length > 0 ? (
+            <ListboxSection
+              key={item.key}
+              classNames={sectionClasses}
+              showDivider={isCompact}
+              title={item.title}
+            >
+              {item.items.map(renderItem)}
+            </ListboxSection>
+          ) : (
+            renderItem(item)
+          );
+        }}
+      </Listbox>
+    );
+  },
+);
+
+Sidebar.displayName = "Sidebar";
+
+export default Sidebar;
diff --git a/components/sidebar/SidebarItems.tsx b/components/sidebar/SidebarItems.tsx
new file mode 100644
index 0000000000..53ac6ef72f
--- /dev/null
+++ b/components/sidebar/SidebarItems.tsx
@@ -0,0 +1,503 @@
+import { Icon } from "@iconify/react";
+import { Chip } from "@nextui-org/react";
+
+import { SidebarItem, SidebarItemType } from "./Sidebar";
+import TeamAvatar from "./TeamAvatar";
+
+/**
+ * Please check the https://nextui.org/docs/guide/routing to have a seamless router integration
+ */
+
+export const items: SidebarItem[] = [
+  {
+    key: "home",
+    href: "#",
+    icon: "solar:home-2-linear",
+    title: "Home",
+  },
+  {
+    key: "projects",
+    href: "#",
+    icon: "solar:widget-2-outline",
+    title: "Projects",
+    endContent: (
+      <Icon
+        className="text-default-400"
+        icon="solar:add-circle-line-duotone"
+        width={24}
+      />
+    ),
+  },
+  {
+    key: "tasks",
+    href: "#",
+    icon: "solar:checklist-minimalistic-outline",
+    title: "Tasks",
+    endContent: (
+      <Icon
+        className="text-default-400"
+        icon="solar:add-circle-line-duotone"
+        width={24}
+      />
+    ),
+  },
+  {
+    key: "team",
+    href: "#",
+    icon: "solar:users-group-two-rounded-outline",
+    title: "Team",
+  },
+  {
+    key: "tracker",
+    href: "#",
+    icon: "solar:sort-by-time-linear",
+    title: "Tracker",
+    endContent: (
+      <Chip size="sm" variant="flat">
+        New
+      </Chip>
+    ),
+  },
+  {
+    key: "analytics",
+    href: "#",
+    icon: "solar:chart-outline",
+    title: "Analytics",
+  },
+  {
+    key: "perks",
+    href: "#",
+    icon: "solar:gift-linear",
+    title: "Perks",
+    endContent: (
+      <Chip size="sm" variant="flat">
+        3
+      </Chip>
+    ),
+  },
+  {
+    key: "expenses",
+    href: "#",
+    icon: "solar:bill-list-outline",
+    title: "Expenses",
+  },
+  {
+    key: "settings",
+    href: "#",
+    icon: "solar:settings-outline",
+    title: "Settings",
+  },
+];
+
+export const sectionItems: SidebarItem[] = [
+  {
+    key: "dashboards",
+    title: "Dashboards",
+    items: [
+      {
+        key: "home",
+        href: "/",
+        icon: "solar:home-2-linear",
+        title: "Overview",
+      },
+      // {
+      //   key: "projects",
+      //   href: "#",
+      //   icon: "solar:widget-2-outline",
+      //   title: "Projects",
+      //   endContent: (
+      //     <Icon
+      //       className="text-default-400"
+      //       icon="solar:add-circle-line-duotone"
+      //       width={24}
+      //     />
+      //   ),
+      // },
+      // {
+      //   key: "tasks",
+      //   href: "#",
+      //   icon: "solar:checklist-minimalistic-outline",
+      //   title: "Tasks",
+      //   endContent: (
+      //     <Icon
+      //       className="text-default-400"
+      //       icon="solar:add-circle-line-duotone"
+      //       width={24}
+      //     />
+      //   ),
+      // },
+      {
+        key: "services",
+        href: "/services",
+        icon: "solar:users-group-two-rounded-outline",
+        title: "Services",
+      },
+      {
+        key: "compliance",
+        href: "/compliance",
+        icon: "solar:sort-by-time-linear",
+        title: "Compliance",
+        endContent: (
+          <Chip size="sm" variant="flat">
+            New
+          </Chip>
+        ),
+      },
+    ],
+  },
+  {
+    key: "scan",
+    title: "Scan",
+    items: [
+      {
+        key: "findings",
+        href: "/findings",
+        title: "Findings",
+        icon: "solar:pie-chart-2-outline",
+        items: [
+          {
+            key: "shareholders",
+            href: "#",
+            title: "Shareholders",
+          },
+          {
+            key: "note_holders",
+            href: "#",
+            title: "Note Holders",
+          },
+          {
+            key: "transactions_log",
+            href: "#",
+            title: "Transactions Log",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: "accounts",
+    title: "Accounts",
+    items: [
+      {
+        key: "cloud",
+        href: "/cloud",
+        icon: "solar:gift-linear",
+        title: "Cloud",
+        endContent: (
+          <Chip size="sm" variant="flat">
+            3
+          </Chip>
+        ),
+      },
+      {
+        key: "integration",
+        href: "/integration",
+        icon: "solar:bill-list-outline",
+        title: "Integration",
+      },
+      {
+        key: "settings",
+        href: "/settings",
+        icon: "solar:settings-outline",
+        title: "Settings",
+      },
+    ],
+  },
+];
+
+export const sectionItemsWithTeams: SidebarItem[] = [
+  ...sectionItems,
+  {
+    key: "team",
+    title: "Team",
+    items: [
+      {
+        key: "users",
+        href: "#",
+        title: "Users",
+        startContent: <TeamAvatar name="Users page" />,
+      },
+      {
+        key: "roles",
+        href: "#",
+        title: "Roles",
+        startContent: <TeamAvatar name="Roles page" />,
+      },
+    ],
+  },
+];
+
+export const brandItems: SidebarItem[] = [
+  {
+    key: "overview",
+    title: "Overview",
+    items: [
+      {
+        key: "home",
+        href: "/",
+        icon: "solar:home-2-linear",
+        title: "Home",
+      },
+      {
+        key: "projects",
+        href: "#",
+        icon: "solar:widget-2-outline",
+        title: "Projects",
+        endContent: (
+          <Icon
+            className="text-primary-foreground/60"
+            icon="solar:add-circle-line-duotone"
+            width={24}
+          />
+        ),
+      },
+      {
+        key: "tasks",
+        href: "#",
+        icon: "solar:checklist-minimalistic-outline",
+        title: "Tasks",
+        endContent: (
+          <Icon
+            className="text-primary-foreground/60"
+            icon="solar:add-circle-line-duotone"
+            width={24}
+          />
+        ),
+      },
+      {
+        key: "team",
+        href: "#",
+        icon: "solar:users-group-two-rounded-outline",
+        title: "Team",
+      },
+      {
+        key: "tracker",
+        href: "#",
+        icon: "solar:sort-by-time-linear",
+        title: "Tracker",
+        endContent: (
+          <Chip
+            className="bg-primary-foreground font-medium text-primary"
+            size="sm"
+            variant="flat"
+          >
+            New
+          </Chip>
+        ),
+      },
+    ],
+  },
+  {
+    key: "your-teams",
+    title: "Your Teams",
+    items: [
+      {
+        key: "nextui",
+        href: "#",
+        title: "NextUI",
+        startContent: (
+          <TeamAvatar
+            classNames={{
+              base: "border-1 border-primary-foreground/20",
+              name: "text-primary-foreground/80",
+            }}
+            name="Next UI"
+          />
+        ),
+      },
+      {
+        key: "tailwind-variants",
+        href: "#",
+        title: "Tailwind Variants",
+        startContent: (
+          <TeamAvatar
+            classNames={{
+              base: "border-1 border-primary-foreground/20",
+              name: "text-primary-foreground/80",
+            }}
+            name="Tailwind Variants"
+          />
+        ),
+      },
+      {
+        key: "nextui-pro",
+        href: "#",
+        title: "NextUI Pro",
+        startContent: (
+          <TeamAvatar
+            classNames={{
+              base: "border-1 border-primary-foreground/20",
+              name: "text-primary-foreground/80",
+            }}
+            name="NextUI Pro"
+          />
+        ),
+      },
+    ],
+  },
+];
+
+export const sectionLongList: SidebarItem[] = [
+  ...sectionItems,
+  {
+    key: "payments",
+    title: "Payments",
+    items: [
+      {
+        key: "payroll",
+        href: "#",
+        title: "Payroll",
+        icon: "solar:dollar-minimalistic-linear",
+      },
+      {
+        key: "invoices",
+        href: "#",
+        title: "Invoices",
+        icon: "solar:file-text-linear",
+      },
+      {
+        key: "billing",
+        href: "#",
+        title: "Billing",
+        icon: "solar:card-outline",
+      },
+      {
+        key: "payment-methods",
+        href: "#",
+        title: "Payment Methods",
+        icon: "solar:wallet-money-outline",
+      },
+      {
+        key: "payouts",
+        href: "#",
+        title: "Payouts",
+        icon: "solar:card-transfer-outline",
+      },
+    ],
+  },
+  {
+    key: "your-teams",
+    title: "Your Teams",
+    items: [
+      {
+        key: "nextui",
+        href: "#",
+        title: "NextUI",
+        startContent: <TeamAvatar name="Next UI" />,
+      },
+      {
+        key: "tailwind-variants",
+        href: "#",
+        title: "Tailwind Variants",
+        startContent: <TeamAvatar name="Tailwind Variants" />,
+      },
+      {
+        key: "nextui-pro",
+        href: "#",
+        title: "NextUI Pro",
+        startContent: <TeamAvatar name="NextUI Pro" />,
+      },
+    ],
+  },
+];
+
+export const sectionNestedItems: SidebarItem[] = [
+  {
+    key: "home",
+    href: "#",
+    icon: "solar:home-2-linear",
+    title: "Home",
+  },
+  {
+    key: "projects",
+    href: "#",
+    icon: "solar:widget-2-outline",
+    title: "Projects",
+    endContent: (
+      <Icon
+        className="text-default-400"
+        icon="solar:add-circle-line-duotone"
+        width={24}
+      />
+    ),
+  },
+  {
+    key: "tasks",
+    href: "#",
+    icon: "solar:checklist-minimalistic-outline",
+    title: "Tasks",
+    endContent: (
+      <Icon
+        className="text-default-400"
+        icon="solar:add-circle-line-duotone"
+        width={24}
+      />
+    ),
+  },
+  {
+    key: "team",
+    href: "#",
+    icon: "solar:users-group-two-rounded-outline",
+    title: "Team",
+  },
+  {
+    key: "tracker",
+    href: "#",
+    icon: "solar:sort-by-time-linear",
+    title: "Tracker",
+    endContent: (
+      <Chip size="sm" variant="flat">
+        New
+      </Chip>
+    ),
+  },
+  {
+    key: "analytics",
+    href: "#",
+    icon: "solar:chart-outline",
+    title: "Analytics",
+  },
+  {
+    key: "perks",
+    href: "#",
+    icon: "solar:gift-linear",
+    title: "Perks",
+    endContent: (
+      <Chip size="sm" variant="flat">
+        3
+      </Chip>
+    ),
+  },
+  {
+    key: "cap_table",
+    title: "Cap Table",
+    icon: "solar:pie-chart-2-outline",
+    type: SidebarItemType.Nest,
+    items: [
+      {
+        key: "shareholders",
+        icon: "solar:users-group-rounded-linear",
+        href: "#",
+        title: "Shareholders",
+      },
+      {
+        key: "note_holders",
+        icon: "solar:notes-outline",
+        href: "#",
+        title: "Note Holders",
+      },
+      {
+        key: "transactions_log",
+        icon: "solar:clipboard-list-linear",
+        href: "#",
+        title: "Transactions Log",
+      },
+    ],
+  },
+  {
+    key: "expenses",
+    href: "#",
+    icon: "solar:bill-list-outline",
+    title: "Expenses",
+  },
+];
diff --git a/components/sidebar/SidebarWrap.tsx b/components/sidebar/SidebarWrap.tsx
new file mode 100644
index 0000000000..81f2e195aa
--- /dev/null
+++ b/components/sidebar/SidebarWrap.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useMediaQuery } from "usehooks-ts";
+
+import { cn } from "@/utils/cn";
+
+import { AcmeIcon } from "../acme";
+import { ThemeSwitch } from "../ThemeSwitch";
+import Sidebar from "./Sidebar";
+import { sectionItemsWithTeams } from "./SidebarItems";
+import UserAvatar from "./UserAvatar";
+
+export const SidebarWrap = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  const isCompact = isCollapsed || isMobile;
+
+  useEffect(() => {
+    const savedState = localStorage.getItem("isCollapsed");
+    if (savedState !== null) {
+      setIsCollapsed(JSON.parse(savedState));
+    }
+    setIsLoaded(true);
+  }, []);
+
+  const onToggle = useCallback(() => {
+    setIsCollapsed((prev) => {
+      const newState = !prev;
+      localStorage.setItem("isCollapsed", JSON.stringify(newState));
+      return newState;
+    });
+  }, []);
+
+  if (!isLoaded) return null;
+
+  return (
+    <div
+      className={cn(
+        "relative flex h-screen w-72 flex-col !border-r-small border-divider p-6 transition-width",
+        {
+          "w-16 items-center px-2 py-6": isCompact,
+        },
+      )}
+    >
+      <div
+        className={cn(
+          "flex items-center gap-3 px-3",
+
+          {
+            "justify-center gap-0": isCompact,
+          },
+        )}
+      >
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-foreground">
+          <AcmeIcon className="text-background" />
+        </div>
+        <span
+          className={cn("text-small font-bold uppercase opacity-100", {
+            "w-0 opacity-0": isCompact,
+          })}
+        >
+          Prowler
+        </span>
+      </div>
+      <Spacer y={8} />
+
+      <UserAvatar
+        userName={"Pablo Lara"}
+        position={"Software Engineer"}
+        isCompact={isCompact}
+      />
+
+      <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
+        <Sidebar
+          defaultSelectedKey="home"
+          isCompact={isCompact}
+          items={sectionItemsWithTeams}
+        />
+      </ScrollShadow>
+      <Spacer y={2} />
+      <div
+        className={cn("mt-auto flex flex-col", {
+          "items-center": isCompact,
+        })}
+      >
+        <Tooltip
+          content="Help & Feedback"
+          isDisabled={!isCompact}
+          placement="right"
+        >
+          <Button
+            fullWidth
+            className={cn(
+              "justify-start truncate text-default-500 data-[hover=true]:text-foreground",
+              {
+                "justify-center": isCompact,
+              },
+            )}
+            isIconOnly={isCompact}
+            startContent={
+              isCompact ? null : (
+                <Icon
+                  className="flex-none text-default-500"
+                  icon="solar:info-circle-line-duotone"
+                  width={24}
+                />
+              )
+            }
+            variant="light"
+          >
+            {isCompact ? (
+              <Icon
+                className="text-default-500"
+                icon="solar:info-circle-line-duotone"
+                width={24}
+              />
+            ) : (
+              "Help & Information"
+            )}
+          </Button>
+        </Tooltip>
+        <Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
+          <Button
+            className={cn(
+              "justify-start text-default-500 data-[hover=true]:text-foreground",
+              {
+                "justify-center": isCompact,
+              },
+            )}
+            isIconOnly={isCompact}
+            startContent={
+              isCompact ? null : (
+                <Icon
+                  className="flex-none rotate-180 text-default-500"
+                  icon="solar:minus-circle-line-duotone"
+                  width={24}
+                />
+              )
+            }
+            variant="light"
+          >
+            {isCompact ? (
+              <Icon
+                className="rotate-180 text-default-500"
+                icon="solar:minus-circle-line-duotone"
+                width={24}
+              />
+            ) : (
+              "Log Out"
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+      <div
+        className={cn("mt-auto flex justify-end gap-3 items-baseline", {
+          "flex-col items-center": isCompact,
+        })}
+      >
+        <Tooltip
+          content="Light | Dark mode"
+          placement={isCompact ? "right" : "top"}
+        >
+          <div
+            className={cn(
+              "text-default-500 data-[hover=true]:text-foreground px-0",
+              {
+                "justify-center mt-3": isCompact,
+              },
+            )}
+          >
+            <ThemeSwitch />
+          </div>
+        </Tooltip>
+        <Tooltip
+          content="Open | Close sidebar"
+          placement={isCompact ? "right" : "top"}
+        >
+          <Button
+            className={cn(
+              "text-default-500 data-[hover=true]:text-foreground px-0",
+              {
+                "justify-center": isCompact,
+              },
+            )}
+            isIconOnly
+            size="sm"
+            variant="light"
+            onPress={onToggle}
+          >
+            <Icon
+              className="text-default-500"
+              height={24}
+              icon="solar:sidebar-minimalistic-outline"
+              width={24}
+            />
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/components/sidebar/TeamAvatar.tsx b/components/sidebar/TeamAvatar.tsx
new file mode 100644
index 0000000000..e3af5cd985
--- /dev/null
+++ b/components/sidebar/TeamAvatar.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import type { AvatarProps } from "@nextui-org/react";
+import { Avatar } from "@nextui-org/react";
+import React from "react";
+
+import { cn } from "@/utils/cn";
+
+const TeamAvatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ name, className, classNames = {}, ...props }, ref) => (
+    <Avatar
+      {...props}
+      ref={ref}
+      classNames={{
+        ...classNames,
+        base: cn(
+          "bg-transparent border border-divider",
+          classNames?.base,
+          className,
+        ),
+        name: cn(
+          "text-default-500 text-[0.6rem] font-semibold",
+          classNames?.name,
+        ),
+      }}
+      getInitials={(name) =>
+        (name[0] || "") + (name[name.lastIndexOf(" ") + 1] || "").toUpperCase()
+      }
+      name={name}
+      radius="md"
+      size="sm"
+    />
+  ),
+);
+
+TeamAvatar.displayName = "TeamAvatar";
+
+export default TeamAvatar;
diff --git a/components/sidebar/UserAvatar.tsx b/components/sidebar/UserAvatar.tsx
new file mode 100644
index 0000000000..4f37a3155d
--- /dev/null
+++ b/components/sidebar/UserAvatar.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Avatar } from "@nextui-org/react";
+import React from "react";
+
+import { cn } from "@/utils/cn";
+
+interface UserAvatarProps {
+  userName: string;
+  position: string;
+  isCompact: boolean;
+}
+const UserAvatar: React.FC<UserAvatarProps> = ({
+  userName,
+  position,
+  isCompact = false,
+}) => {
+  return (
+    <div className="flex items-center gap-3 px-3">
+      <Avatar isBordered className="flex-none" size="sm" showFallback />
+      <div
+        className={cn("flex max-w-full flex-col", {
+          hidden: isCompact,
+        })}
+      >
+        <p className="truncate text-small font-medium text-default-600">
+          {userName}
+        </p>
+        <p className="truncate text-tiny text-default-400">{position}</p>
+      </div>
+    </div>
+  );
+};
+
+export default UserAvatar;
diff --git a/package.json b/package.json
index c7ba81e435..3756a3d8e8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
+    "@iconify/react": "^5.0.1",
     "@types/node": "20.5.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
@@ -39,7 +40,8 @@
     "postcss": "8.4.38",
     "tailwind-variants": "0.1.20",
     "tailwindcss": "3.4.3",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "usehooks-ts": "^3.1.0"
   },
   "name": "prowler-next-app",
   "private": true,
diff --git a/tailwind.config.js b/tailwind.config.js
index 03a4e22e67..5a6f937328 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,11 @@
-import {nextui} from '@nextui-org/theme'
+import { nextui } from "@nextui-org/theme";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -13,8 +13,11 @@ module.exports = {
         sans: ["var(--font-sans)"],
         mono: ["var(--font-geist-mono)"],
       },
+      height: {
+        "dvh-minus-16": "calc(100dvh - 116px)",
+      },
     },
   },
   darkMode: "class",
   plugins: [nextui()],
-}
+};
diff --git a/utils/cn.ts b/utils/cn.ts
new file mode 100644
index 0000000000..9b89275543
--- /dev/null
+++ b/utils/cn.ts
@@ -0,0 +1,22 @@
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Definition of custom classes you want to combine
+const customClasses = new Map<string, string>([
+  ["text-small", "text-small"],
+  ["text-default-500", "text-default-500"],
+  // Add more custom classes as needed
+]);
+
+export function cn(...inputs: ClassValue[]) {
+  // Filter and combine custom classes before passing them to twMerge
+  const filteredInputs = inputs.map((input) => {
+    if (typeof input === "string") {
+      return customClasses.get(input) || input;
+    }
+    return input;
+  });
+
+  return twMerge(clsx(filteredInputs));
+}