diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index 5a2de2d..97b8dce 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -3,17 +3,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import useModalStore from "@/store/modals";
 
-export default function NoLinksFound() {
+type Props = {
+  text?: string;
+};
+
+export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-black dark:text-white">
-        You haven&apos;t created any Links Here
+    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+      <p className="text-center text-2xl text-black dark:text-white">
+        {text || "You haven't created any Links Here"}
       </p>
-      <br />
-      <div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
-        <p>Start by creating a</p>{" "}
+      <div className="text-center text-black dark:text-white w-full mt-4">
         <div
           onClick={() => {
             setModal({
@@ -22,14 +24,14 @@ export default function NoLinksFound() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
-            className="w-5 h-5 group-hover:ml-9 absolute duration-100"
+            className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
           />
-          <span className="block group-hover:opacity-0 text-right w-full duration-100">
-            New Link
+          <span className="group-hover:opacity-0 text-right w-full duration-100">
+            Create New Link
           </span>
         </div>
       </div>
diff --git a/components/Search.tsx b/components/Search.tsx
index bc140c3..4034a7c 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -44,7 +44,7 @@ export default function Search() {
           router.push("/search/" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
-        className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
+        className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
       />
     </div>
   );
diff --git a/hooks/useLinks.tsx b/hooks/useLinks.tsx
index 5de86e3..1d4ebf6 100644
--- a/hooks/useLinks.tsx
+++ b/hooks/useLinks.tsx
@@ -12,7 +12,7 @@ export default function useLinks(
     pinnedOnly,
     collectionId,
     tagId,
-  }: Omit<LinkRequestQuery, "cursor"> = { sort: 0 }
+  }: LinkRequestQuery = { sort: 0 }
 ) {
   const { links, setLinks, resetLinks } = useLinkStore();
   const router = useRouter();
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index d6209c1..63c4e4a 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -61,7 +61,7 @@ export default function Dashboard() {
         </div>
 
         <div className="flex flex-col md:flex-row md:items-center gap-5">
-          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700">
+          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
             <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {numberOfLinks}
             </p>
@@ -70,7 +70,7 @@ export default function Dashboard() {
             </p>
           </div>
 
-          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700">
+          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
             <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {collections.length}
             </p>
@@ -79,7 +79,7 @@ export default function Dashboard() {
             </p>
           </div>
 
-          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700">
+          <div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
             <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {tags.length}
             </p>
@@ -127,7 +127,7 @@ export default function Dashboard() {
                 ))}
             </div>
           ) : (
-            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl">
+            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
               <p className="text-center text-2xl text-black dark:text-white">
                 No Pinned Links
               </p>