diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 383cc5cc..2b803fa2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { StoreProvider } from "@/components";
-import Navbar from "@/components/navbar/Navbar";
+import { StoreProvider, Navbar } from "@/components";
 
 export const metadata: Metadata = {
   title: "Create Next App",
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 68bdb325..e9747b27 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -3,18 +3,17 @@ import Image from "next/image";
 interface AvatarProps {
   imgPath?: string;
   width?: number;
-  height?: number
+  height?: number;
 }
 
-export default function Avatar({ imgPath = "/grey_ball.png", width = 24, height = 24 }: AvatarProps) {
+export default function Avatar({
+  imgPath = "/grey_ball.png",
+  width = 24,
+  height = 24,
+}: AvatarProps) {
   return (
     <div className="px-0 pointer-events-none">
-      <Image
-        width={width}
-        height={height}
-        src={imgPath}
-        alt="Profile image"
-      />
+      <Image width={width} height={height} src={imgPath} alt="Profile image" />
     </div>
   );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 2b77dcee..ea5fc724 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as StoreProvider } from "./StoreProvider";
 export { default as Avatar } from "./Avatar";
 export { default as EditButton } from "./EditButton";
+export { default as Navbar } from "./navbar/Navbar";
diff --git a/src/components/navbar/ChinguMenu.tsx b/src/components/navbar/ChinguMenu.tsx
index f5f46d41..daf32f8d 100644
--- a/src/components/navbar/ChinguMenu.tsx
+++ b/src/components/navbar/ChinguMenu.tsx
@@ -12,7 +12,7 @@ export default function ChinguMenu() {
         alt="Chingu Logo"
         priority={false}
       />
-      <h2 className="text-white font-semibold text-lg">Chingu</h2>
+      <h2 className=" font-semibold text-lg">Chingu</h2>
     </div>
   );
 }
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 01139a7e..36e39634 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -1,7 +1,5 @@
-import { Avatar } from "..";
-import Bell from "./Bell";
-import ChinguMenu from "./ChinguMenu";
-import DropDown from "./DropDown";
+import { Avatar } from "@/components";
+import { Bell, ChinguMenu, DropDown } from "@/components/navbar";
 
 const name = "Yorick";
 const notificationCount = 4;
diff --git a/src/components/navbar/index.ts b/src/components/navbar/index.ts
new file mode 100644
index 00000000..98bf69aa
--- /dev/null
+++ b/src/components/navbar/index.ts
@@ -0,0 +1,4 @@
+export { default as Bell } from "./Bell";
+export { default as ChinguMenu } from "./ChinguMenu";
+export { default as DropDown } from "./DropDown";
+export { default as DropDownLink } from "./DropDownLink";