diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 17fcfd6..8f186f9 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
+      className={`h-fit bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
     >
       {(permissions === true ||
         permissions?.canUpdate ||
@@ -144,7 +144,7 @@ export default function LinkCard({ link, count, className }: Props) {
             width={64}
             height={64}
             alt=""
-            className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
+            className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
             draggable="false"
             onError={(e) => {
               const target = e.target as HTMLElement;
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index b64d93e..87d15e6 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -36,7 +36,7 @@ export default function MainLayout({ children }: Props) {
             <Sidebar className="fixed top-0" />
           </div>
 
-          <div className="w-full lg:ml-64 xl:ml-80">
+          <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80">
             <Navbar />
             {children}
           </div>
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 579a15b..2a528fd 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -47,7 +47,7 @@ export default function Dashboard() {
 
   return (
     <MainLayout>
-      <div className="p-5 flex flex-col gap-5">
+      <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
         <div className="flex gap-3 items-center">
           <div className="flex gap-2">
             <FontAwesomeIcon
@@ -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 bg-gray-50 dark:bg-neutral-800">
+          <div className="sky-shadow 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-500">
               {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 bg-gray-50 dark:bg-neutral-800">
+          <div className="sky-shadow 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-500">
               {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 bg-gray-50 dark:bg-neutral-800">
+          <div className="sky-shadow 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-500">
               {tags.length}
             </p>
@@ -113,7 +113,10 @@ export default function Dashboard() {
           ) : undefined}
         </div>
 
-        <div className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2">
+        <div
+          style={{ flex: "1 1 auto" }}
+          className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2"
+        >
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div
               className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
@@ -127,11 +130,14 @@ 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 bg-gray-50 dark:bg-neutral-800">
+            <div
+              style={{ flex: "1 1 auto" }}
+              className="sky-shadow flex flex-col justify-center h-full 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
+                Pin Your Favorite Links Here!
               </p>
-              <p className="text-center text-gray-500 dark:text-gray-300 text-sm mt-2">
+              <p className="text-center mx-auto w-96 text-gray-500 dark:text-gray-300 text-sm mt-2">
                 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/styles/globals.css b/styles/globals.css
index 5b3f4d4..f4538de 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -227,3 +227,7 @@
     @apply dark:text-white;
   }
 }
+
+.sky-shadow {
+  box-shadow: 0px 0px 3px #0ea5e9;
+}