diff --git a/packages/dashboard/src/components/Layout.js b/packages/dashboard/src/components/Layout.js
index dbb75c6d..31c1feae 100644
--- a/packages/dashboard/src/components/Layout.js
+++ b/packages/dashboard/src/components/Layout.js
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import Head from "next/head";
 import { useState } from "react";
 import config from "../../src/config";
@@ -8,6 +9,7 @@ const signOutUrl = `${config.kratos.browser}/self-service/browser/flows/logout`;
 export default function Layout({ title, children }) {
   const [menuOpen, openMenu] = useState(false);
   const [avatarDropdownOpen, openAvatarDropdown] = useState(false);
+  const router = useRouter();
 
   return (
     <div>
@@ -29,17 +31,14 @@ export default function Layout({ title, children }) {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        className="cls-1"
                         d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z"
                         style={{ fill: "rgb(88, 181, 96)" }}
                       />
                       <path
-                        className="cls-1"
                         d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z"
                         style={{ fill: "rgb(88, 181, 96)" }}
                       />
                       <path
-                        className="cls-1"
                         d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z"
                         style={{ fill: "rgb(88, 181, 96)" }}
                       />
@@ -49,17 +48,35 @@ export default function Layout({ title, children }) {
                     <div className="ml-10 flex items-baseline space-x-4">
                       {/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
                       <Link href="/">
-                        <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                        <a
+                          className={`${
+                            router.pathname === "/"
+                              ? "bg-gray-900 text-white"
+                              : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                          } px-3 py-2 rounded-md text-sm font-medium`}
+                        >
                           Dashboard
                         </a>
                       </Link>
                       <Link href="/uploads">
-                        <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                        <a
+                          className={`${
+                            router.pathname === "/uploads"
+                              ? "bg-gray-900 text-white"
+                              : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                          } px-3 py-2 rounded-md text-sm font-medium`}
+                        >
                           Your uploads
                         </a>
                       </Link>
                       <Link href="/downloads">
-                        <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                        <a
+                          className={`${
+                            router.pathname === "/downloads"
+                              ? "bg-gray-900 text-white"
+                              : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                          } px-3 py-2 rounded-md text-sm font-medium`}
+                        >
                           Your downloads
                         </a>
                       </Link>
@@ -161,21 +178,39 @@ export default function Layout({ title, children }) {
           <div className={`${menuOpen ? "block" : "hidden"} border-b border-gray-700 md:hidden`}>
             <div className="px-2 py-3 space-y-1 sm:px-3">
               {/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
-              <a href="#" className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
-                Dashboard
-              </a>
-              <a
-                href="#"
-                className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
-              >
-                Your uploads (coming soon)
-              </a>
-              <a
-                href="#"
-                className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
-              >
-                Your downloads (coming soon)
-              </a>
+              <Link href="/">
+                <a
+                  className={`${
+                    router.pathname === "/"
+                      ? "bg-gray-900 text-white"
+                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                  } block px-3 py-2 rounded-md text-base font-medium`}
+                >
+                  Dashboard
+                </a>
+              </Link>
+              <Link href="/uploads">
+                <a
+                  className={`${
+                    router.pathname === "/uploads"
+                      ? "bg-gray-900 text-white"
+                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                  } block px-3 py-2 rounded-md text-base font-medium`}
+                >
+                  Your uploads
+                </a>
+              </Link>
+              <Link href="/downloads">
+                <a
+                  className={`${
+                    router.pathname === "/downloads"
+                      ? "bg-gray-900 text-white"
+                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
+                  } block px-3 py-2 rounded-md text-base font-medium`}
+                >
+                  Your downloads
+                </a>
+              </Link>
             </div>
             <div className="pt-4 pb-3 border-t border-gray-700">
               <div className="flex items-center px-5">