diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
new file mode 100644
index 0000000..5955013
--- /dev/null
+++ b/frontend/src/app/agents/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const AgentsPage = () => {
+  return <div></div>;
+};
+
+export default AgentsPage;
diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index f378bb2..e593069 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -1,6 +1,35 @@
+"use client";
 import React from "react";
 import styles from "./styles.module.css";
+
+import { usePathname, useRouter } from "next/navigation";
+
 const Sidebar = () => {
+  const router = useRouter();
+  const navToHome = () => {
+    router.push("/home");
+  };
+  const navToOrganization = () => {
+    router.push("/organization");
+  };
+  const navToProject = () => {
+    router.push("/projects");
+  };
+  const navToUsers = () => {
+    router.push("/users");
+  };
+  const navToRoles = () => {
+    router.push("/roles");
+  };
+  const navToCredentials = () => {
+    router.push("/credentials");
+  };
+  const navToAgents = () => {
+    router.push("/agents");
+  };
+
+  const pathname = usePathname();
+  console.log(pathname);
   return (
     <div className={styles.mainContainer}>
       <div className={styles.topContainer}>
@@ -61,7 +90,10 @@ const Sidebar = () => {
         </div>
         {/* Navigations */}
         <div className={styles.navContainer}>
-          <div className={styles.active}>
+          <div
+            className={pathname === "/home" ? `${styles.active}` : ""}
+            onClick={navToHome}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -93,7 +125,10 @@ const Sidebar = () => {
             </svg>
             <p>Home</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/organization" ? `${styles.active}` : ""}
+            onClick={navToOrganization}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -111,7 +146,10 @@ const Sidebar = () => {
             </svg>
             <p>Organization</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/projects" ? `${styles.active}` : ""}
+            onClick={navToProject}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -129,7 +167,10 @@ const Sidebar = () => {
             </svg>
             <p>Project</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/users" ? `${styles.active}` : ""}
+            onClick={navToUsers}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -147,7 +188,10 @@ const Sidebar = () => {
             </svg>
             <p>Users</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/roles" ? `${styles.active}` : ""}
+            onClick={navToRoles}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -194,7 +238,10 @@ const Sidebar = () => {
             </svg>
             <p>Roles</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/credentials" ? `${styles.active}` : ""}
+            onClick={navToCredentials}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -212,7 +259,10 @@ const Sidebar = () => {
             </svg>
             <p>Credentials</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/agents" ? `${styles.active}` : ""}
+            onClick={navToAgents}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
diff --git a/frontend/src/app/components/sidebar/styles.module.css b/frontend/src/app/components/sidebar/styles.module.css
index 71067ac..e4790fc 100644
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/frontend/src/app/components/sidebar/styles.module.css
@@ -8,6 +8,7 @@
   height: 100vh;
   align-self: stretch;
   border-right: 1px solid #2c2d3d;
+  user-select: none;
 }
 .topContainer {
   display: flex;
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
new file mode 100644
index 0000000..92340a9
--- /dev/null
+++ b/frontend/src/app/credentials/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const CredentialsPage = () => {
+  return <div></div>;
+};
+
+export default CredentialsPage;
diff --git a/frontend/src/app/credentials/styles.module.css b/frontend/src/app/credentials/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/home/page.jsx b/frontend/src/app/home/page.jsx
new file mode 100644
index 0000000..ef59498
--- /dev/null
+++ b/frontend/src/app/home/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const HomePage = () => {
+  return <div></div>;
+};
+
+export default HomePage;
diff --git a/frontend/src/app/home/styles.module.css b/frontend/src/app/home/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js
index af151fa..93f1bd0 100644
--- a/frontend/src/app/layout.js
+++ b/frontend/src/app/layout.js
@@ -1,4 +1,4 @@
-import { Geist, Geist_Mono, Inter } from "next/font/google";
+import { Inter } from "next/font/google";
 import Sidebar from "./components/sidebar/Sidebar";
 import Header from "./components/header/Header";
 import "./globals.css";
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
new file mode 100644
index 0000000..c5ca088
--- /dev/null
+++ b/frontend/src/app/organization/page.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const OrganizationPage = () => {
+  return (
+    <div>
+      <div className={styles.mainContainer}>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationPage;
diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
new file mode 100644
index 0000000..3b03d87
--- /dev/null
+++ b/frontend/src/app/projects/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const ProjectsPage = () => {
+  return <div></div>;
+};
+
+export default ProjectsPage;
diff --git a/frontend/src/app/projects/styles.module.css b/frontend/src/app/projects/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
new file mode 100644
index 0000000..de62417
--- /dev/null
+++ b/frontend/src/app/roles/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const RolesPage = () => {
+  return <div></div>;
+};
+
+export default RolesPage;
diff --git a/frontend/src/app/roles/styles.module.css b/frontend/src/app/roles/styles.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx
new file mode 100644
index 0000000..34f2e7d
--- /dev/null
+++ b/frontend/src/app/users/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const UsersPage = () => {
+  return <div></div>;
+};
+
+export default UsersPage;
diff --git a/frontend/src/app/users/styles.module.css b/frontend/src/app/users/styles.module.css
new file mode 100644
index 0000000..e69de29