diff --git a/components/AnnouncementBar.tsx b/components/Announcement.tsx
similarity index 93%
rename from components/AnnouncementBar.tsx
rename to components/Announcement.tsx
index 4696179..8fd42fe 100644
--- a/components/AnnouncementBar.tsx
+++ b/components/Announcement.tsx
@@ -5,7 +5,7 @@ type Props = {
   toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
 };
 
-export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+export default function Announcement({ toggleAnnouncementBar }: Props) {
   const announcementId = localStorage.getItem("announcementId");
 
   return (
diff --git a/components/LinkViews/LinkComponents/LinkTypeBadge.tsx b/components/LinkViews/LinkComponents/LinkTypeBadge.tsx
index 0088bae..5a47c68 100644
--- a/components/LinkViews/LinkComponents/LinkTypeBadge.tsx
+++ b/components/LinkViews/LinkComponents/LinkTypeBadge.tsx
@@ -25,7 +25,7 @@ export default function LinkTypeBadge({
       onClick={(e) => {
         e.stopPropagation();
       }}
-      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100"
+      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
     >
       <i className="bi-link-45deg text-lg leading-none"></i>
       <p className="text-xs truncate">{shortendURL}</p>
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index 1f13a5f..10b008d 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -91,7 +91,7 @@ export default function LinkCardCompact({
       <div
         className={`${selectedStyle} border relative items-center flex ${
           !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        } duration-200 rounded-lg w-full`}
         onClick={() =>
           selectable
             ? handleCheckboxClick(link)
@@ -117,29 +117,32 @@ export default function LinkCardCompact({
             />
           )} */}
         <div
-          className="flex items-center cursor-pointer"
+          className="flex items-center cursor-pointer w-full"
           onClick={() =>
             !editMode && window.open(generateLinkHref(link, account), "_blank")
           }
         >
           <div className="shrink-0">
-            <LinkIcon
-              link={link}
-              className="mt-1 sm:mt-0 sm:w-12 w-8 sm:h-12 h-8 text-xl sm:text-4xl"
-            />
+            <LinkIcon link={link} className="w-12 h-12 text-4xl" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
             <p className="line-clamp-1 mr-8 text-primary select-none">
-              {unescapeString(link.name || link.description) || link.url}
+              {link.name ? (
+                unescapeString(link.name)
+              ) : (
+                <div className="mt-2">
+                  <LinkTypeBadge link={link} />
+                </div>
+              )}
             </p>
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
+              <div className="flex items-center gap-x-3 text-neutral flex-wrap">
                 {collection ? (
                   <LinkCollection link={link} collection={collection} />
                 ) : undefined}
-                <LinkTypeBadge link={link} />
+                {link.name && <LinkTypeBadge link={link} />}
                 <LinkDate link={link} />
               </div>
             </div>
diff --git a/components/ModalContent/BulkDeleteLinksModal.tsx b/components/ModalContent/BulkDeleteLinksModal.tsx
index 6de26cd..28c565c 100644
--- a/components/ModalContent/BulkDeleteLinksModal.tsx
+++ b/components/ModalContent/BulkDeleteLinksModal.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import useLinkStore from "@/store/links";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -62,13 +63,10 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
           &apos;Delete&apos; to bypass this confirmation in the future.
         </p>
 
-        <button
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
-          onClick={deleteLink}
-        >
+        <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
           Delete
-        </button>
+        </Button>
       </div>
     </Modal>
   );
diff --git a/components/ModalContent/DeleteCollectionModal.tsx b/components/ModalContent/DeleteCollectionModal.tsx
index 5407f68..6548553 100644
--- a/components/ModalContent/DeleteCollectionModal.tsx
+++ b/components/ModalContent/DeleteCollectionModal.tsx
@@ -6,6 +6,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -96,20 +97,15 @@ export default function DeleteCollectionModal({
           <p>Click the button below to leave the current collection.</p>
         )}
 
-        <button
+        <Button
           disabled={permissions === true && inputField !== collection.name}
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 ${
-            permissions === true
-              ? inputField === collection.name
-                ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-                : "cursor-not-allowed bg-red-300 dark:bg-red-900"
-              : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-          }`}
           onClick={submit}
+          intent="destructive"
+          className="ml-auto"
         >
           <i className="bi-trash text-xl"></i>
           {permissions === true ? "Delete" : "Leave"} Collection
-        </button>
+        </Button>
       </div>
     </Modal>
   );
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 728511a..65a3817 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -22,6 +22,7 @@ const buttonVariants = cva(
       size: {
         small: "h-7 px-2",
         medium: "h-10 px-4 py-2",
+        large: "h-12 px-7 py-2",
         full: "px-4 py-2 w-full",
         icon: "h-10 w-10",
       },
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index dd1ea52..2c606e5 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -1,5 +1,5 @@
 import Navbar from "@/components/Navbar";
-import Announcement from "@/components/AnnouncementBar";
+import Announcement from "@/components/Announcement";
 import Sidebar from "@/components/Sidebar";
 import { ReactNode, useEffect, useState } from "react";
 import getLatestVersion from "@/lib/client/getLatestVersion";
diff --git a/lib/api/controllers/dashboard/getDashboardData.ts b/lib/api/controllers/dashboard/getDashboardData.ts
index b4dfbb0..3b0f751 100644
--- a/lib/api/controllers/dashboard/getDashboardData.ts
+++ b/lib/api/controllers/dashboard/getDashboardData.ts
@@ -14,7 +14,7 @@ export default async function getDashboardData(
   else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 8,
+    take: 10,
     where: {
       AND: [
         {
@@ -46,7 +46,7 @@ export default async function getDashboardData(
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
-    take: 8,
+    take: 10,
     where: {
       collection: {
         OR: [
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 046c855..10a7d2d 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -380,7 +380,7 @@ export default function Index() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
                 disabled={
                   selectedLinks.length === 0 ||
                   !(permissions === true || permissions?.canDelete)
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 318cebf..1131ba1 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -41,12 +41,14 @@ export default function Dashboard() {
 
   const handleNumberOfLinksToShow = () => {
     if (window.innerWidth > 1900) {
+      setShowLinks(10);
+    } else if (window.innerWidth > 1500) {
       setShowLinks(8);
-    } else if (window.innerWidth > 1280) {
+    } else if (window.innerWidth > 880) {
       setShowLinks(6);
-    } else if (window.innerWidth > 650) {
+    } else if (window.innerWidth > 550) {
       setShowLinks(4);
-    } else setShowLinks(3);
+    } else setShowLinks(2);
   };
 
   const { width } = useWindowDimensions();
@@ -120,28 +122,30 @@ export default function Dashboard() {
           <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
         </div>
 
-        <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-5 border border-neutral-content bg-base-200">
-          <DashboardItem
-            name={numberOfLinks === 1 ? "Link" : "Links"}
-            value={numberOfLinks}
-            icon={"bi-link-45deg"}
-          />
+        <div>
+          <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+            <DashboardItem
+              name={numberOfLinks === 1 ? "Link" : "Links"}
+              value={numberOfLinks}
+              icon={"bi-link-45deg"}
+            />
 
-          <div className="divider xl:divider-horizontal"></div>
+            <div className="divider xl:divider-horizontal"></div>
 
-          <DashboardItem
-            name={collections.length === 1 ? "Collection" : "Collections"}
-            value={collections.length}
-            icon={"bi-folder"}
-          />
+            <DashboardItem
+              name={collections.length === 1 ? "Collection" : "Collections"}
+              value={collections.length}
+              icon={"bi-folder"}
+            />
 
-          <div className="divider xl:divider-horizontal"></div>
+            <div className="divider xl:divider-horizontal"></div>
 
-          <DashboardItem
-            name={tags.length === 1 ? "Tag" : "Tags"}
-            value={tags.length}
-            icon={"bi-hash"}
-          />
+            <DashboardItem
+              name={tags.length === 1 ? "Tag" : "Tags"}
+              value={tags.length}
+              icon={"bi-hash"}
+            />
+          </div>
         </div>
 
         <div className="flex justify-between items-center">
@@ -162,7 +166,7 @@ export default function Dashboard() {
         </div>
 
         <div
-          style={{ flex: "0 1 auto" }}
+          style={{ flex: links[0] ? "0 1 auto" : "1 1 auto" }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
           {links[0] ? (
@@ -170,10 +174,7 @@ export default function Dashboard() {
               <LinkComponent links={links.slice(0, showLinks)} />
             </div>
           ) : (
-            <div
-              style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
-            >
+            <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
               <p className="text-center text-2xl">
                 View Your Recently Added Links Here!
               </p>
@@ -189,8 +190,8 @@ export default function Dashboard() {
                   }}
                   className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
                 >
-                  <i className="bi-plus-lg text-xl duration-100"></i>
-                  <span className="group-hover:opacity-0 text-right duration-100">
+                  <i className="bi-plus-lg text-xl"></i>
+                  <span className="group-hover:opacity-0 text-right">
                     Add New Link
                   </span>
                 </div>
@@ -200,7 +201,7 @@ export default function Dashboard() {
                     tabIndex={0}
                     role="button"
                     onMouseDown={dropdownTriggerer}
-                    className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
+                    className="inline-flex items-center gap-2 text-sm btn bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 hover:border hover:border-neutral/30"
                     id="import-dropdown"
                   >
                     <i className="bi-cloud-upload text-xl duration-100"></i>
@@ -286,12 +287,13 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+              className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
             >
+              <i className="bi-pin mx-auto text-6xl text-primary"></i>
               <p className="text-center text-2xl">
                 Pin Your Favorite Links Here!
               </p>
-              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
+              <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
                 You can Pin your favorite Links by clicking on the three dots on
                 each Link and clicking{" "}
                 <span className="font-semibold">Pin to Dashboard</span>.
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index d617d15..e64ccb4 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -154,7 +154,7 @@ export default function Links() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
                 disabled={
                   selectedLinks.length === 0 ||
                   !(
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index a56af06..a631573 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -151,7 +151,7 @@ export default function PinnedLinks() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
                 disabled={
                   selectedLinks.length === 0 ||
                   !(
@@ -171,12 +171,20 @@ export default function PinnedLinks() {
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
-            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+            className="flex flex-col gap-2 justify-center h-full w-full mx-auto p-10"
           >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282" />
+            </svg>
             <p className="text-center text-2xl">
               Pin Your Favorite Links Here!
             </p>
-            <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
+            <p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
               You can Pin your favorite Links by clicking on the three dots on
               each Link and clicking{" "}
               <span className="font-semibold">Pin to Dashboard</span>.
diff --git a/pages/search.tsx b/pages/search.tsx
index 27e2361..67d9893 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -178,7 +178,7 @@ export default function Search() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
                 disabled={
                   selectedLinks.length === 0 ||
                   !(
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 1623c8f..fbe6835 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -308,7 +308,7 @@ export default function Index() {
                     ? bulkDeleteLinks()
                     : setBulkDeleteLinksModal(true);
                 }}
-                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
                 disabled={
                   selectedLinks.length === 0 ||
                   !(