diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index c346752..5e9d27b 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,6 +1,4 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
-import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
@@ -52,16 +50,16 @@ export default function Navbar() {
   const [uploadFileModal, setUploadFileModal] = useState(false);
 
   return (
-    <div className="flex justify-between gap-2 items-center px-4 py-2 border-solid border-b-neutral-content border-b">
+    <div className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
       <div
         onClick={toggleSidebar}
         className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
       >
-        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+        <i className="bi-list text-xl"></i>
       </div>
       <SearchBar />
       <div className="flex items-center gap-2">
-        <ToggleDarkMode className="sm:inline-grid hidden" />
+        <ToggleDarkMode className="hidden sm:inline-grid" />
 
         <div className="dropdown dropdown-end">
           <div className="tooltip tooltip-bottom" data-tip="Create New...">
@@ -70,11 +68,12 @@ export default function Navbar() {
               role="button"
               className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
             >
-              <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
-              <FontAwesomeIcon
-                icon={faCaretDown}
-                className="w-2 h-2 sm:w-3 sm:h-3"
-              />
+              <span>
+                <i className="bi-plus text-xl"></i>
+              </span>
+              <span>
+                <i className="bi-caret-down-fill text-xs"></i>
+              </span>
             </div>
           </div>
           <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index b6a8d4c..42a858d 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUser } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
 
 type Props = {
@@ -39,10 +37,7 @@ export default function ProfilePhoto({
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
-          <FontAwesomeIcon
-            icon={faUser}
-            className="w-1/2 h-1/2 aspect-square"
-          />
+          <i className="bi-person text-xl"></i>
         )}
       </div>
     </div>
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index 3aed4a4..99d1497 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,5 +1,3 @@
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
@@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
     <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+        className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
       >
-        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
+        <i className="bi-search"></i>
       </label>
 
       <input
@@ -49,11 +47,11 @@ export default function SearchBar({ placeholder }: Props) {
                 "/public/collections/" +
                   router.query.id +
                   "?q=" +
-                  encodeURIComponent(searchQuery || "")
+                  encodeURIComponent(searchQuery || ""),
               );
             } else {
               return router.push(
-                "/search?q=" + encodeURIComponent(searchQuery)
+                "/search?q=" + encodeURIComponent(searchQuery),
               );
             }
           }
diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx
index 595ae2a..9024347 100644
--- a/components/ToggleDarkMode.tsx
+++ b/components/ToggleDarkMode.tsx
@@ -11,11 +11,7 @@ export default function ToggleDarkMode({ className }: Props) {
   const [theme, setTheme] = useState(localStorage.getItem("theme"));
 
   const handleToggle = (e: any) => {
-    if (e.target.checked) {
-      setTheme("dark");
-    } else {
-      setTheme("light");
-    }
+    setTheme(e.target.checked ? "dark" : "light");
   };
 
   useEffect(() => {
@@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
           className="theme-controller"
           checked={localStorage.getItem("theme") === "light" ? false : true}
         />
-
-        {/* sun icon */}
-
-        <svg
-          className="swap-on fill-current w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
-        </svg>
-
-        {/* moon icon */}
-        <svg
-          className="swap-off fill-current w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278" />
-        </svg>
+        <i className="bi-sun text-xl swap-on"></i>
+        <i className="bi-moon text-xl swap-off"></i>
       </label>
     </div>
   );