From feda50464cb0848f53548e2d3166fb0c64b4c59b Mon Sep 17 00:00:00 2001
From: Yee Jia Wei <yeejiawei0811@gmail.com>
Date: Mon, 18 Dec 2023 08:28:52 +0800
Subject: [PATCH 1/3] update missing collection color picker icon

---
 .../ModalContent/NewCollectionModal.tsx       | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx
index 23b4344..511769b 100644
--- a/components/ModalContent/NewCollectionModal.tsx
+++ b/components/ModalContent/NewCollectionModal.tsx
@@ -27,27 +27,22 @@ export default function NewCollectionModal({ onClose }: Props) {
   const { addCollection } = useCollectionStore();
 
   const submit = async () => {
-    if (!submitLoader) {
-      setSubmitLoader(true);
-      if (!collection) return null;
+    if (submitLoader) return;
+    if (!collection) return null;
 
-      setSubmitLoader(true);
+    setSubmitLoader(true);
 
-      const load = toast.loading("Creating...");
+    const load = toast.loading("Creating...");
 
-      let response;
+    let response = await addCollection(collection as any);
+    toast.dismiss(load);
 
-      response = await addCollection(collection as any);
+    if (response.ok) {
+      toast.success("Created!");
+      onClose();
+    } else toast.error(response.data as string);
 
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success("Created!");
-        onClose();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-    }
+    setSubmitLoader(false);
   };
 
   return (
@@ -73,8 +68,7 @@ export default function NewCollectionModal({ onClose }: Props) {
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
-                    </div>
+                    <i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

From fbc083c3737455fa5256e56023fcbfc6ac3eda41 Mon Sep 17 00:00:00 2001
From: Yee Jia Wei <yeejiawei0811@gmail.com>
Date: Mon, 18 Dec 2023 08:30:14 +0800
Subject: [PATCH 2/3] add icon to link create modal

more option collapse icon
---
 components/ModalContent/NewLinkModal.tsx | 87 ++++++++++++------------
 1 file changed, 45 insertions(+), 42 deletions(-)

diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 156fe28..2b0ef25 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/components/ModalContent/NewLinkModal.tsx
@@ -145,53 +145,56 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
       </div>
 
-      {optionsExpanded ? (
-        <div className="mt-5">
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
-          <div className="grid sm:grid-cols-2 gap-3">
-            <div>
-              <p className="mb-2">Name</p>
-              <TextInput
-                value={link.name}
-                onChange={(e) => setLink({ ...link, name: e.target.value })}
-                placeholder="e.g. Example Link"
-                className="bg-base-200"
-              />
-            </div>
-
-            <div>
-              <p className="mb-2">Tags</p>
-              <TagSelection
-                onChange={setTags}
-                defaultValue={link.tags.map((e) => {
-                  return { label: e.name, value: e.id };
-                })}
-              />
-            </div>
-
-            <div className="sm:col-span-2">
-              <p className="mb-2">Description</p>
-              <textarea
-                value={unescapeString(link.description) as string}
-                onChange={(e) =>
-                  setLink({ ...link, description: e.target.value })
-                }
-                placeholder="Will be auto generated if nothing is provided."
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
-              />
-            </div>
-          </div>
-        </div>
-      ) : undefined}
-
-      <div className="flex justify-between items-center mt-5">
+      <div className={"mt-2"}>
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
-          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+          className={`cursor-pointer duration-100 flex items-center text-sm`}
         >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          <span>{optionsExpanded ? "Hide" : "More"} Options</span>
+          <i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
         </div>
 
+        {optionsExpanded ? (
+          <div className="mt-5">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <p className="mb-2">Name</p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder="e.g. Example Link"
+                  className="bg-base-200"
+                />
+              </div>
+
+              <div>
+                <p className="mb-2">Tags</p>
+                <TagSelection
+                  onChange={setTags}
+                  defaultValue={link.tags.map((e) => {
+                    return { label: e.name, value: e.id };
+                  })}
+                />
+              </div>
+
+              <div className="sm:col-span-2">
+                <p className="mb-2">Description</p>
+                <textarea
+                  value={unescapeString(link.description) as string}
+                  onChange={(e) =>
+                    setLink({ ...link, description: e.target.value })
+                  }
+                  placeholder="Will be auto generated if nothing is provided."
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                />
+              </div>
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+
+      <div className="flex items-center justify-end mt-5">
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}

From 1677e132f3c112b5505303b7cd2dd45bcb9d541f Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sun, 17 Dec 2023 23:32:33 -0500
Subject: [PATCH 3/3] final touch

---
 .../LinkComponents/LinkCollection.tsx         | 10 ++++++--
 .../Modal/Collection/CollectionInfo.tsx       |  2 +-
 .../ModalContent/EditCollectionModal.tsx      |  5 +++-
 .../ModalContent/NewCollectionModal.tsx       |  5 +++-
 components/ModalContent/NewLinkModal.tsx      | 24 ++++++++++++-------
 components/Navbar.tsx                         |  8 +++----
 components/NoLinksFound.tsx                   |  4 +---
 components/PageHeader.tsx                     |  2 +-
 components/ProfilePhoto.tsx                   | 10 ++++----
 components/ReadableView.tsx                   |  6 ++---
 components/Sidebar.tsx                        | 18 +++++++-------
 components/SortDropdown.tsx                   |  4 +---
 components/ToggleDarkMode.tsx                 |  4 ++--
 layouts/SettingsLayout.tsx                    |  8 ++-----
 pages/collections/[id].tsx                    |  7 ++----
 pages/collections/index.tsx                   | 22 +++++++++--------
 pages/dashboard.tsx                           | 24 ++++++++++---------
 pages/links/index.tsx                         | 23 +++++++++---------
 pages/links/pinned.tsx                        | 20 +++++++++-------
 pages/search.tsx                              | 21 +++++++++-------
 pages/settings/account.tsx                    | 14 ++++-------
 pages/settings/appearance.tsx                 | 12 ++++------
 pages/settings/archive.tsx                    |  2 +-
 23 files changed, 130 insertions(+), 125 deletions(-)

diff --git a/components/LinkViews/LinkComponents/LinkCollection.tsx b/components/LinkViews/LinkComponents/LinkCollection.tsx
index 4eafee7..b6e32e9 100644
--- a/components/LinkViews/LinkComponents/LinkCollection.tsx
+++ b/components/LinkViews/LinkComponents/LinkCollection.tsx
@@ -5,7 +5,10 @@ import {
 import { useRouter } from "next/router";
 import React from "react";
 
-export default function LinkCollection({ link, collection }: {
+export default function LinkCollection({
+  link,
+  collection,
+}: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
 }) {
@@ -19,7 +22,10 @@ export default function LinkCollection({ link, collection }: {
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
     >
-      <i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
+      <i
+        className="bi-folder-fill text-lg drop-shadow"
+        style={{ color: collection?.color }}
+      ></i>
       <p className="truncate capitalize">{collection?.name}</p>
     </div>
   );
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index be33707..8ee4e87 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -67,7 +67,7 @@ export default function CollectionInfo({
               <div className="flex flex-col justify-between items-center w-32">
                 <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
-                  <i className={"bi-folder2"}></i>
+                  <i className={"bi-folder-fill"}></i>
                 </div>
                 <div
                   className="btn btn-ghost btn-xs"
diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx
index 8821f6f..ee4c5bc 100644
--- a/components/ModalContent/EditCollectionModal.tsx
+++ b/components/ModalContent/EditCollectionModal.tsx
@@ -68,7 +68,10 @@ export default function EditCollectionModal({
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
+                    <i
+                      className="bi-folder-fill text-5xl drop-shadow"
+                      style={{ color: collection.color }}
+                    ></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>
diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx
index 511769b..8c68c83 100644
--- a/components/ModalContent/NewCollectionModal.tsx
+++ b/components/ModalContent/NewCollectionModal.tsx
@@ -68,7 +68,10 @@ export default function NewCollectionModal({ onClose }: Props) {
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i>
+                    <i
+                      className={"bi-folder-fill text-5xl"}
+                      style={{ color: collection.color }}
+                    ></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>
diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 2b0ef25..50288f8 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/components/ModalContent/NewLinkModal.tsx
@@ -146,14 +146,6 @@ export default function NewLinkModal({ onClose }: Props) {
       </div>
 
       <div className={"mt-2"}>
-        <div
-          onClick={() => setOptionsExpanded(!optionsExpanded)}
-          className={`cursor-pointer duration-100 flex items-center text-sm`}
-        >
-          <span>{optionsExpanded ? "Hide" : "More"} Options</span>
-          <i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
-        </div>
-
         {optionsExpanded ? (
           <div className="mt-5">
             {/* <hr className="mb-3 border border-neutral-content" /> */}
@@ -194,7 +186,21 @@ export default function NewLinkModal({ onClose }: Props) {
         ) : undefined}
       </div>
 
-      <div className="flex items-center justify-end mt-5">
+      <div className="flex justify-between items-center mt-5">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+        >
+          <p className="font-normal">
+            {optionsExpanded ? "Hide" : "More"} Options
+          </p>
+          <i
+            className={`${
+              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+            }`}
+          ></i>
+        </div>
+
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5e9d27b..4708a61 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -55,7 +55,7 @@ export default function Navbar() {
         onClick={toggleSidebar}
         className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
       >
-        <i className="bi-list text-xl"></i>
+        <i className="bi-list text-2xl leading-none"></i>
       </div>
       <SearchBar />
       <div className="flex items-center gap-2">
@@ -66,13 +66,13 @@ export default function Navbar() {
             <div
               tabIndex={0}
               role="button"
-              className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
+              className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
             >
               <span>
-                <i className="bi-plus text-xl"></i>
+                <i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
               </span>
               <span>
-                <i className="bi-caret-down-fill text-xs"></i>
+                <i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
               </span>
             </div>
           </div>
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index b4ef8f7..1d29a63 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -33,9 +33,7 @@ export default function NoLinksFound({ text }: Props) {
           }}
           className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
         >
-          <i
-            className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
-          ></i>
+          <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index e19b59c..6af9a25 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -16,7 +16,7 @@ export default function PageHeader({
       ></i>
       <div>
         <p className="text-3xl capitalize font-thin">{title}</p>
-        <p>{description}</p>
+        <p className="text-xs sm:text-sm">{description}</p>
       </div>
     </div>
   );
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index 42a858d..ec25a6e 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -6,7 +6,7 @@ type Props = {
   className?: string;
   priority?: boolean;
   name?: string;
-  dimensionClass?: string;
+  large?: boolean;
 };
 
 export default function ProfilePhoto({
@@ -14,7 +14,7 @@ export default function ProfilePhoto({
   className,
   priority,
   name,
-  dimensionClass,
+  large,
 }: Props) {
   const [image, setImage] = useState("");
 
@@ -30,14 +30,14 @@ export default function ProfilePhoto({
   return !image ? (
     <div
       className={`avatar drop-shadow-md placeholder ${className || ""} ${
-        dimensionClass || "w-8 h-8 "
+        large ? "w-28 h-28" : "w-8 h-8"
       }`}
     >
       <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
-          <i className="bi-person text-xl"></i>
+          <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
         )}
       </div>
     </div>
@@ -45,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${dimensionClass || "w-8 h-8 "}`}
+      } ${large || "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image
diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx
index 4828b75..92ad9a0 100644
--- a/components/ReadableView.tsx
+++ b/components/ReadableView.tsx
@@ -172,9 +172,7 @@ export default function ReadableView({ link }: Props) {
                   target="_blank"
                   className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
                 >
-                  <i
-                    className="bi-link-45deg"
-                  ></i>
+                  <i className="bi-link-45deg"></i>
 
                   {isValidUrl(link?.url || "")
                     ? new URL(link?.url as string).host
@@ -190,7 +188,7 @@ export default function ReadableView({ link }: Props) {
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
               <i
-                className="bi-folder2 drop-shadow text-2xl"
+                className="bi-folder-fill drop-shadow text-2xl"
                 style={{ color: link?.collection.color }}
               ></i>
               <p
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index abb2077..31dd494 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -15,7 +15,7 @@ export default function Sidebar({ className }: { className?: string }) {
     () => {
       const storedValue = localStorage.getItem("collectionDisclosure");
       return storedValue ? storedValue === "true" : true;
-    },
+    }
   );
 
   const { collections } = useCollectionStore();
@@ -32,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) {
   useEffect(() => {
     localStorage.setItem(
       "collectionDisclosure",
-      collectionDisclosure ? "true" : "false",
+      collectionDisclosure ? "true" : "false"
     );
   }, [collectionDisclosure]);
 
@@ -78,7 +78,7 @@ export default function Sidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
-            <i className="bi-folder2 text-primary text-2xl drop-shadow"></i>
+            <i className="bi-folder text-primary text-2xl drop-shadow"></i>
             <p className="truncate w-full">All Collections</p>
           </div>
         </Link>
@@ -104,9 +104,9 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm ">Collections</p>
+          <p className="text-sm">Collections</p>
           <i
-            className={`bi-chevron-down text-primary drop-shadow  ${
+            className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
             }`}
           ></i>
@@ -134,14 +134,14 @@ export default function Sidebar({ className }: { className?: string }) {
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <i
-                          className="bi-folder2 text-2xl drop-shadow"
+                          className="bi-folder-fill text-2xl drop-shadow"
                           style={{ color: e.color }}
                         ></i>
                         <p className="truncate w-full">{e.name}</p>
 
                         {e.isPublic ? (
                           <i
-                            className="bi-globe-americas text-sm text-black/50 dark:text-white/50 drop-shadow"
+                            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
                             title="This collection is being shared publicly."
                           ></i>
                         ) : undefined}
@@ -173,8 +173,8 @@ export default function Sidebar({ className }: { className?: string }) {
         >
           <p className="text-sm">Tags</p>
           <i
-            className={`bi-chevron-down text-primary drop-shadow  ${
-              collectionDisclosure ? "rotate-reverse" : "rotate"
+            className={`bi-chevron-down  ${
+              tagDisclosure ? "rotate-reverse" : "rotate"
             }`}
           ></i>
         </Disclosure.Button>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 046331c..848b1b8 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -14,9 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <i
-          className="bi-filter text-neutral text-2xl"
-        ></i>
+        <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>
diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx
index 9024347..1f39060 100644
--- a/components/ToggleDarkMode.tsx
+++ b/components/ToggleDarkMode.tsx
@@ -32,8 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
           className="theme-controller"
           checked={localStorage.getItem("theme") === "light" ? false : true}
         />
-        <i className="bi-sun text-xl swap-on"></i>
-        <i className="bi-moon text-xl swap-off"></i>
+        <i className="bi-sun-fill text-xl swap-on"></i>
+        <i className="bi-moon-fill text-xl swap-off"></i>
       </label>
     </div>
   );
diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx
index f9d5af2..b061372 100644
--- a/layouts/SettingsLayout.tsx
+++ b/layouts/SettingsLayout.tsx
@@ -53,18 +53,14 @@ export default function SettingsLayout({ children }: Props) {
               onClick={toggleSidebar}
               className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
             >
-              <i
-                className="bi-list text-xl"
-              ></i>
+              <i className="bi-list text-2xl leading-none"></i>
             </div>
 
             <Link
               href="/dashboard"
               className="text-neutral btn btn-square btn-sm btn-ghost"
             >
-              <i
-                className="bi-chevron-left text-xl"
-              ></i>
+              <i className="bi-chevron-left text-xl"></i>
             </Link>
           </div>
 
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 69309e5..a3d6129 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -109,7 +109,7 @@ export default function Index() {
           <div className="flex gap-3 items-start justify-between">
             <div className="flex items-center gap-2">
               <i
-                className="bi-folder2 text-3xl drop-shadow"
+                className="bi-folder-fill text-3xl drop-shadow"
                 style={{ color: activeCollection?.color }}
               ></i>
 
@@ -124,10 +124,7 @@ export default function Index() {
                 role="button"
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
-                <i
-                  className="bi-three-dots text-xl"
-                  title="More"
-                ></i>
+                <i className="bi-three-dots text-xl" title="More"></i>
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                 {permissions === true ? (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 349a223..15d2ef8 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -24,15 +24,17 @@ export default function Collections() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-folder2"}
-          title={"Collections"}
-          description={"Collections you own"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-folder"}
+            title={"Collections"}
+            description={"Collections you own"}
+          />
 
-        <div className="flex gap-3 justify-end">
-          <div className="relative mt-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <div className="flex gap-3 justify-end">
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            </div>
           </div>
         </div>
 
@@ -48,14 +50,14 @@ export default function Collections() {
             onClick={() => setNewCollectionModal(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
-            <i className="bi-plus text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
           </div>
         </div>
 
         {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
           <>
             <div className="flex items-center gap-3 my-5">
-              <i className="bi-folder2 text-3xl sm:text-2xl text-primary drop-shadow"></i>
+              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
 
               <div>
                 <p className="text-3xl capitalize font-thin">
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 1c65f33..a0aec27 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -33,8 +33,8 @@ export default function Dashboard() {
       collections.reduce(
         (accumulator, collection) =>
           accumulator + (collection._count as any).links,
-        0,
-      ),
+        0
+      )
     );
   }, [collections]);
 
@@ -94,10 +94,13 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"}/>
+        <PageHeader
+          icon={"bi-house "}
+          title={"Dashboard"}
+          description={"A brief overview of your data"}
+        />
         <div>
-          <div
-            className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
@@ -146,7 +149,7 @@ export default function Dashboard() {
                 className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links.slice(0, showLinks).map((e, i) => (
-                  <LinkCard key={i} link={e} count={i}/>
+                  <LinkCard key={i} link={e} count={i} />
                 ))}
               </div>
             </div>
@@ -170,7 +173,7 @@ export default function Dashboard() {
                   }}
                   className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
                 >
-                  <i className="bi-plus text-xl duration-100"></i>
+                  <i className="bi-plus-lg text-xl duration-100"></i>
                   <span className="group-hover:opacity-0 text-right duration-100">
                     Add New Link
                   </span>
@@ -186,8 +189,7 @@ export default function Dashboard() {
                     <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">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                     <li>
                       <label
                         tabIndex={0}
@@ -260,7 +262,7 @@ export default function Dashboard() {
               >
                 {links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i}/>)
+                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
               </div>
             </div>
@@ -282,7 +284,7 @@ export default function Dashboard() {
         </div>
       </div>
       {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)}/>
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
       ) : undefined}
     </MainLayout>
   );
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index 873bb6f..c6efa28 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -10,7 +10,6 @@ import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import ListView from "@/components/LinkViews/ListView";
 
-
 export default function Links() {
   const { links } = useLinkStore();
 
@@ -33,21 +32,23 @@ export default function Links() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-link-45deg"}
-          title={"All Links"}
-          description={"Links from every Collections"}
-        />
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-link-45deg"}
+            title={"All Links"}
+            description={"Links from every Collections"}
+          />
 
-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
         </div>
 
         {links[0] ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
         ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet"/>
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}
       </div>
     </MainLayout>
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index 48446f9..14d9dd9 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -31,18 +31,20 @@ export default function PinnedLinks() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <PageHeader
-          icon={"bi-pin-angle"}
-          title={"Pinned Links"}
-          description={"Pinned Links from your Collections"}
-        />
-        <div className="mt-2 flex items-center justify-end gap-2">
-          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
+        <div className="flex justify-between">
+          <PageHeader
+            icon={"bi-pin-angle"}
+            title={"Pinned Links"}
+            description={"Pinned Links from your Collections"}
+          />
+          <div className="mt-2 flex items-center justify-end gap-2">
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
         </div>
 
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links}/>
+          <LinkComponent links={links} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
diff --git a/pages/search.tsx b/pages/search.tsx
index 5511ce0..330a519 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -54,18 +54,21 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <PageHeader icon={'bi-search'} title={'Search Results'}/>
+        <div className="flex justify-between">
+          <PageHeader icon={"bi-search"} title={"Search Results"} />
 
-        <div className="flex gap-3 items-center justify-end">
-          <div className="flex gap-2 items-center mt-2">
-            <FilterSearchDropdown
-              searchFilter={searchFilter}
-              setSearchFilter={setSearchFilter}
-            />
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          <div className="flex gap-3 items-center justify-end">
+            <div className="flex gap-2 items-center mt-2">
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+            </div>
           </div>
         </div>
+
         {links[0] ? (
           <LinkComponent links={links} />
         ) : (
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 7e4d53b..a4ff709 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -197,7 +197,7 @@ export default function Account() {
               <ProfilePhoto
                 priority={true}
                 src={user.image ? user.image : undefined}
-                dimensionClass="w-28 h-28"
+                large={true}
               />
               {user.image && (
                 <div
@@ -209,9 +209,7 @@ export default function Account() {
                   }
                   className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                 >
-                  <i
-                    className="bi-x"
-                  ></i>
+                  <i className="bi-x"></i>
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -250,9 +248,7 @@ export default function Account() {
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  <i
-                    className="bi-cloud-upload text-xl duration-100"
-                  ></i>
+                  <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">
@@ -304,9 +300,7 @@ 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">
-                  <i
-                    className="bi-cloud-download text-xl duration-100"
-                  ></i>
+                  <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 6d17770..385225a 100644
--- a/pages/settings/appearance.tsx
+++ b/pages/settings/appearance.tsx
@@ -67,31 +67,27 @@ 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-28 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-36 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" })}
             >
-              <i
-                className="bi-moon text-6xl"
-              ></i>
+              <i className="bi-moon-fill 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-28 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-36 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" })}
             >
-              <i
-                className="bi-sun text-6xl"
-              ></i>
+              <i className="bi-sun-fill 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>
diff --git a/pages/settings/archive.tsx b/pages/settings/archive.tsx
index de45159..f664638 100644
--- a/pages/settings/archive.tsx
+++ b/pages/settings/archive.tsx
@@ -61,7 +61,7 @@ export default function Archive() {
 
       <div className="divider my-3"></div>
 
-      <p>Formats to Archive webpages:</p>
+      <p>Formats to Archive/Preserve webpages:</p>
       <div className="p-3">
         <Checkbox
           label="Screenshot"