diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 2e06606c..c5ca92bd 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -2,6 +2,7 @@ import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
+import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FiLayout, FiLogOut, FiSettings } from "react-icons/fi";
@@ -77,6 +78,7 @@ export function UserMenu() {
                       <Box className="flex flex-col gap-1">
                         {accountOptions.map((item) => (
                           <Link
+                            as={NextLink}
                             key={item.name}
                             href={item.href}
                             aria-label={item.desc}
diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
index 59489e0e..3722eaa8 100644
--- a/website/src/components/SideMenu.tsx
+++ b/website/src/components/SideMenu.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { FiSun } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
index 276a35ed..c32a90c6 100644
--- a/website/src/pages/messages/index.tsx
+++ b/website/src/pages/messages/index.tsx
@@ -1,6 +1,6 @@
 import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import fetcher from "src/lib/fetcher";
@@ -13,18 +13,27 @@ const MessagesDashboard = () => {
   const [messages, setMessages] = useState([]);
   const [userMessages, setUserMessages] = useState([]);
 
-  const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages", fetcher, {
+  const { isLoading: isLoadingAll, mutate: mutateAll } = useSWRImmutable("/api/messages", fetcher, {
     onSuccess: (data) => {
       setMessages(data);
     },
   });
 
-  const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages/user`, fetcher, {
+  const { isLoading: isLoadingUser, mutate: mutateUser } = useSWRImmutable(`/api/messages/user`, fetcher, {
     onSuccess: (data) => {
       setUserMessages(data);
     },
   });
 
+  useEffect(() => {
+    if (messages.length == 0) {
+      mutateAll();
+    }
+    if (userMessages.length == 0) {
+      mutateUser();
+    }
+  }, [messages, userMessages]);
+
   return (
     <>
       <Head>
