diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx
index e576262..f9d5af2 100644
--- a/layouts/SettingsLayout.tsx
+++ b/layouts/SettingsLayout.tsx
@@ -1,11 +1,9 @@
 import SettingsSidebar from "@/components/SettingsSidebar";
-import { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
 import { useRouter } from "next/router";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
@@ -55,14 +53,18 @@ export default function SettingsLayout({ children }: Props) {
               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>
 
             <Link
               href="/dashboard"
               className="text-neutral btn btn-square btn-sm btn-ghost"
             >
-              <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+              <i
+                className="bi-chevron-left text-xl"
+              ></i>
             </Link>
           </div>
 
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index ee3e315..7e4d53b 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -1,10 +1,4 @@
 import { useState, useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faFileExport,
-  faFileImport,
-} from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
@@ -215,7 +209,9 @@ export default function Account() {
                   }
                   className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                 >
-                  <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+                  <i
+                    className="bi-x"
+                  ></i>
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -254,10 +250,9 @@ export default function Account() {
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  <FontAwesomeIcon
-                    icon={faFileImport}
-                    className="w-5 h-5 duration-100"
-                  />
+                  <i
+                    className="bi-cloud-upload text-xl duration-100"
+                  ></i>
                   <p>Import From</p>
                 </div>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -309,10 +304,9 @@ export default function Account() {
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
-                  <FontAwesomeIcon
-                    icon={faFileExport}
-                    className="w-5 h-5 duration-100"
-                  />
+                  <i
+                    className="bi-cloud-download text-xl duration-100"
+                  ></i>
                   <p>Export Data</p>
                 </div>
               </Link>
diff --git a/pages/settings/appearance.tsx b/pages/settings/appearance.tsx
index 3ff1eb7..6d17770 100644
--- a/pages/settings/appearance.tsx
+++ b/pages/settings/appearance.tsx
@@ -1,14 +1,9 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
-import SubmitButton from "@/components/SubmitButton";
 import React from "react";
-import Checkbox from "@/components/Checkbox";
-import LinkPreview from "@/components/LinkPreview";
 import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Appearance() {
@@ -72,28 +67,32 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                 localStorage.getItem("theme") === "dark"
                   ? "dark:outline-primary text-primary"
                   : "text-white"
               }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
-              <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
-              <p className="text-2xl">Dark Theme</p>
+              <i
+                className="bi-moon text-6xl"
+              ></i>
+              <p className="ml-2 text-2xl">Dark</p>
 
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                 localStorage.getItem("theme") === "light"
                   ? "outline-primary text-primary"
                   : "text-black"
               }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
-              <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
-              <p className="text-2xl">Light Theme</p>
+              <i
+                className="bi-sun text-6xl"
+              ></i>
+              <p className="ml-2 text-2xl">Light</p>
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
           </div>
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index 7ee7473..2b7eec7 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -1,11 +1,9 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
@@ -59,10 +57,9 @@ export default function Delete() {
           href="/settings/account"
           className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <FontAwesomeIcon
-            icon={faChevronLeft}
-            className="w-5 h-5 text-neutral"
-          />
+          <i
+            className="bi-chevron-left  text-neutral text-xl"
+          ></i>
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">