diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx
index f469db8cc..276555ace 100644
--- a/apps/web/components/navigation.tsx
+++ b/apps/web/components/navigation.tsx
@@ -210,14 +210,14 @@ export default function TopNavigation() {
                 </div>
                 <div className="mt-3 space-y-1">
                   {userNavigation.map((item) => (
-                    <Disclosure.Button
+                    <Link
                       key={item.name}
                       as="a"
                       href={item.href}
                       className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
                     >
                       {item.name}
-                    </Disclosure.Button>
+                    </Link>
                   ))}
                 </div>
               </div>
diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx
index 577aeb967..a82e9442e 100644
--- a/apps/web/pages/dashboard.tsx
+++ b/apps/web/pages/dashboard.tsx
@@ -5,24 +5,31 @@ import Layout from "../components/layout";
 import Settings from "../components/settings";
 import type { NextPageWithLayout } from "./_app";
 import {
+  BellSnoozeIcon,
   CheckBadgeIcon,
+  EnvelopeIcon,
+  EyeIcon,
   PaperAirplaneIcon,
   SunIcon,
+  XCircleIcon,
 } from "@heroicons/react/24/outline";
 
 const DashboardPage: NextPageWithLayout = () => {
   const status = useSession();
   const stats = [
     { name: "Draft", stat: "0", icon: SunIcon },
-    { name: "Sent", stat: "0", icon: PaperAirplaneIcon },
+    { name: "Sent", stat: "0", icon: EnvelopeIcon },
+    { name: "Viewed", stat: "0", icon: EyeIcon },
     { name: "Signed", stat: "0", icon: CheckBadgeIcon },
+    { name: "Expired", stat: "0", icon: BellSnoozeIcon },
+    { name: "Declined", stat: "0", icon: XCircleIcon },
   ];
   return (
     <>
       <Head>
         <title>Dashboard | Documenso</title>
       </Head>
-      <div className="py-10">
+      <div className="py-10 max-sm:px-4">
         <header>
           <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
             Dashboard
@@ -73,20 +80,6 @@ const DashboardPage: NextPageWithLayout = () => {
       </div>
     </>
   );
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-    />
-  </svg>;
 };
 
 // todo layout as component
