diff --git a/components/Loading/index.tsx b/components/Loading/index.tsx
index ef08e829..cfd82f9a 100644
--- a/components/Loading/index.tsx
+++ b/components/Loading/index.tsx
@@ -20,7 +20,7 @@ export default function Loading ({ size = 60, color }: LoadingProps): React.Reac
   }, [color])
 
   return (
-    <div className={style.loading_container}>
+    <div className={style.loading_overlay}>
       <DotLoader
         color={accentColor}
         size={size}
diff --git a/components/Loading/loading.module.css b/components/Loading/loading.module.css
index cd834c1a..73bcaa9f 100644
--- a/components/Loading/loading.module.css
+++ b/components/Loading/loading.module.css
@@ -1,7 +1,13 @@
-.loading_container {
+.loading_overlay {
+  --z-overlay-loading: 999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 50vh;
-  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-overlay-loading);
 }
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 57d543e2..f374169d 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -77,6 +77,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
   const [selectedButtonIds, setSelectedButtonIds] = useState<any[]>([])
   const [showFilters, setShowFilters] = useState<boolean>(false)
   const [buttons, setButtons] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
   const setPeriodFromString = (data?: DashboardData, periodString?: PeriodString): void => {
     if (data === undefined) return
@@ -118,6 +119,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
 
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
+      setIsLoading(true)
       let url = 'api/dashboard'
       if (selectedButtonIds.length > 0) {
         url += `?buttonIds=${selectedButtonIds.join(',')}`
@@ -129,6 +131,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
       })
       const json = await res.json()
       setDashboardData(json)
+      setIsLoading(false)
     }
     fetchData().catch(console.error)
     const savedActivePeriodString = loadStateFromCookie(COOKIE_NAMES.DASHBOARD_FILTER, undefined) as (PeriodString | undefined)
@@ -152,7 +155,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
   if (dashboardData === undefined || activePeriod === undefined) {
     return (
       <>
-        <TopBar title="Dashboard" user={user.stUser?.email} />
+        <TopBar title="Dashboard" user={user?.stUser?.email} />
         <Loading />
       </>
     )
@@ -160,7 +163,8 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
 
   return (
     <>
-      <TopBar title="Dashboard" user={user.stUser?.email} />
+      <TopBar title="Dashboard" user={user?.stUser?.email} />
+      {isLoading && <Loading />}
       <div className={style.filter_btns}>
           <div
             onClick={() => setShowFilters(!showFilters)}