diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d2d00b2..dae1dd3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,10 +3,10 @@ import { Inter, IBM_Plex_Mono, Darker_Grotesque, Bricolage_Grotesque } from 'nex
 import './globals.css'
 import Navbar from '@/components/Navbar'
 
-const inter = Inter({ subsets: ['latin'] })
-const ibm = IBM_Plex_Mono({ subsets: ['latin'], weight: "500" })
-const Grotesque = Darker_Grotesque({ subsets: ['latin'], weight: "500" })
-const bricolage = Bricolage_Grotesque({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
+const ibm = IBM_Plex_Mono({ subsets: ['latin'], weight: "500", display: 'swap', adjustFontFallback: false })
+const Grotesque = Darker_Grotesque({ subsets: ['latin'], weight: "500", display: 'swap', adjustFontFallback: false })
+const bricolage = Bricolage_Grotesque({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
 
 export const metadata: Metadata = {
   title: 'NeoBruu',
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index eafb75b..d5e77c7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,18 +3,10 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { AiFillGithub } from "react-icons/ai";
-import { CgDarkMode, CgMoon, CgSun } from "react-icons/cg";
-import { IoIosMoon, IoIosSunny } from "react-icons/io";
-import { RiMoonClearFill } from "react-icons/ri";
 import SearchBar from "./SearchBar";
 
 function Navbar() {
   const [theme, setTheme] = useState<string>("");
-  const [search, setSearch] = useState<string>("");
-
-  const handleClick = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
 
   useEffect(() => {
     setTheme((prev) => localStorage.getItem("theme") ?? "light");
@@ -41,17 +33,6 @@ function Navbar() {
             >
             <AiFillGithub className="h-6 w-6 text-white" />
             </a>
-            {/* <button
-            type="button"
-            onClick={handleClick}
-            className="flex items-center justify-center rounded-md border border-black p-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] shadow-orange-400/40 transition-all hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none dark:border-zinc-600 dark:shadow-yellow-400/40"
-            >
-            {theme === "light" ? (
-                <IoIosSunny className="h-6 w-6 text-orange-400" />
-            ) : (
-                <RiMoonClearFill className="h-6 w-6 text-yellow-400" />
-            )}
-            </button> */}
         </div>
       </div>
     </nav>
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 88c4716..da82547 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,8 +1,9 @@
+import Link from 'next/link';
 import { useState, useEffect, ChangeEvent, useRef } from 'react';
+
+import components from '@/data/components';
 import { CgClose, CgSearch } from 'react-icons/cg';
 import { MdAdd, MdKeyboardCommandKey } from "react-icons/md";
-import components from '@/data/components'; // Update the path
-import Link from 'next/link';
 import { RxComponent1 } from "react-icons/rx";
 
 type SearchBarProps = {};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 908f2e9..68c97ec 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -2,8 +2,7 @@
 import { usePathname } from 'next/navigation';
 import components from '@/data/components';
 import Link from 'next/link';
-import Badge from './neobruu/Badge';
-import { metadata } from '@/app/layout';
+import Badge from '@/components/neobruu/Badge';
 
 export default function Sidebar() {
   const pathname = usePathname();
diff --git a/src/components/example/AlertExample.tsx b/src/components/example/AlertExample.tsx
index e3f410e..19e354f 100644
--- a/src/components/example/AlertExample.tsx
+++ b/src/components/example/AlertExample.tsx
@@ -1,4 +1,3 @@
-import Button from "@/components/neobruu/Button";
 import Alert from "@/components/neobruu/Alert";
 import { BsInfoCircleFill, BsExclamationTriangleFill } from "react-icons/bs";
 
diff --git a/src/components/example/CardExample.tsx b/src/components/example/CardExample.tsx
index a958b99..02f6919 100644
--- a/src/components/example/CardExample.tsx
+++ b/src/components/example/CardExample.tsx
@@ -1,5 +1,5 @@
 import Card from "@/components/neobruu/Card";
-import Button from "../neobruu/Button";
+import Button from "@/components/neobruu/Button";
 
 export default function CardExample() {
   return (
diff --git a/src/components/example/TabsExample.tsx b/src/components/example/TabsExample.tsx
index cc60ea1..4df8f4c 100644
--- a/src/components/example/TabsExample.tsx
+++ b/src/components/example/TabsExample.tsx
@@ -1,7 +1,6 @@
 'use client'
 import Tabs from '@/components/neobruu/Tabs';
 
-
 export default function TabsExample() {
 
     return (
diff --git a/src/components/example/ToastExample.tsx b/src/components/example/ToastExample.tsx
index f4c5d4a..b532fc7 100644
--- a/src/components/example/ToastExample.tsx
+++ b/src/components/example/ToastExample.tsx
@@ -1,7 +1,5 @@
 'use client'
-
 import Toast from "@/components/neobruu/Toast";
-import Button from "../neobruu/Button";
 import { useState } from "react";
 
 export default function ToastExample() {