diff --git a/client/.env b/client/.env
index ff153ae..711b86f 100644
--- a/client/.env
+++ b/client/.env
@@ -8,7 +8,7 @@ DATABASE_URL="file:./dev.db"
 SCHOOL=knust
 COOKIE_SECRET=secret1,secret2
 SECRET_KEY=secret1
-RESEND_API_KEY=
+RESEND_API_KEY=123
 AWS_UPLOAD_ENDPOINT="eu-central-1.linodeobjects.com"
 AWS_REGION="eu-central-1"
 AWS_ACCESS_KEY_ID=
diff --git a/client/app/entry.client.tsx b/client/app/entry.client.tsx
index 98533cd..709c72c 100644
--- a/client/app/entry.client.tsx
+++ b/client/app/entry.client.tsx
@@ -8,12 +8,12 @@ import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import posthog from "posthog-js";
-import AudioRecorder from 'audio-recorder-polyfill'
-import mpegEncoder from 'audio-recorder-polyfill/mpeg-encoder'
+import AudioRecorder from "audio-recorder-polyfill";
+import mpegEncoder from "audio-recorder-polyfill/mpeg-encoder";
 
-AudioRecorder.encoder = mpegEncoder
-AudioRecorder.prototype.mimeType = 'audio/mpeg'
-window.MediaRecorder = AudioRecorder
+AudioRecorder.encoder = mpegEncoder;
+AudioRecorder.prototype.mimeType = "audio/mpeg";
+window.MediaRecorder = AudioRecorder;
 
 if (process.env.NODE_ENV === "production") {
 	posthog.init("phc_qmxF7NTz6XUnYUDoMpkTign6mujS8F8VqR75wb0Bsl7", {
@@ -21,6 +21,15 @@ if (process.env.NODE_ENV === "production") {
 	});
 }
 
+if ("serviceWorker" in navigator) {
+	try {
+		navigator.serviceWorker.register("/service-worker.js", {
+			scope: "/",
+		});
+	} catch (error) {
+		console.error(`Registration failed with ${error}`);
+	}
+}
 
 startTransition(() => {
 	hydrateRoot(
diff --git a/client/app/root.tsx b/client/app/root.tsx
index 989939e..d858410 100644
--- a/client/app/root.tsx
+++ b/client/app/root.tsx
@@ -10,8 +10,11 @@ import {
 	Outlet,
 	Scripts,
 	ScrollRestoration,
+	UIMatch,
 	json,
 	useLoaderData,
+	useLocation,
+	useMatches,
 } from "@remix-run/react";
 import { BottomNav, Navbar } from "./components/navbar";
 import { Footer } from "./components/footer";
@@ -21,6 +24,8 @@ import { prisma } from "./lib/prisma.server";
 import { GlobalCtx } from "./lib/global-ctx";
 import { User } from "@prisma/client";
 import { CommonHead } from "./components/common-head";
+import { useRef } from "react";
+import React from "react";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	let user: User | undefined | null;
@@ -43,6 +48,89 @@ export { ErrorBoundary } from "./components/error-boundary";
 export default function App() {
 	const { user } = useLoaderData<typeof loader>();
 
+	const location = useLocation();
+	const isMount = useRef(true);
+	const matches = useMatches();
+
+	function isPromise(p: any): boolean {
+		if (p && typeof p === "object" && typeof p.then === "function") {
+			return true;
+		}
+		return false;
+	}
+
+	function isFunction(p: any): boolean {
+		if (typeof p === "function") {
+			return true;
+		}
+		return false;
+	}
+
+	React.useEffect(() => {
+		const mounted = isMount;
+		isMount.current = false;
+
+		if ("serviceWorker" in navigator) {
+			if (navigator.serviceWorker.controller) {
+				navigator.serviceWorker.controller?.postMessage({
+					action: "clearCache",
+				});
+				navigator.serviceWorker.controller?.postMessage({
+					type: "REMIX_NAVIGATION",
+					isMount: mounted,
+					location,
+					manifest: window.__remixManifest,
+					matches: matches.filter(filteredMatches).map(sanitizeHandleObject),
+				});
+			} else {
+				const listener = async () => {
+					await navigator.serviceWorker.ready;
+					navigator.serviceWorker.controller?.postMessage({
+						action: "clearCache",
+					});
+					navigator.serviceWorker.controller?.postMessage({
+						type: "REMIX_NAVIGATION",
+						isMount: mounted,
+						location,
+						manifest: window.__remixManifest,
+						matches: matches.filter(filteredMatches).map(sanitizeHandleObject),
+					});
+				};
+				navigator.serviceWorker.addEventListener("controllerchange", listener);
+				return () => {
+					navigator.serviceWorker.removeEventListener(
+						"controllerchange",
+						listener,
+					);
+				};
+			}
+		}
+
+		function filteredMatches(route: UIMatch) {
+			if (route.data) {
+				return (
+					Object.values(route.data).filter((elem) => {
+						return isPromise(elem);
+					}).length === 0
+				);
+			}
+			return true;
+		}
+
+		function sanitizeHandleObject(route: UIMatch) {
+			let handle = route.handle;
+
+			if (handle) {
+				const filterInvalidTypes = ([, value]: any) =>
+					!isPromise(value) && !isFunction(value);
+				handle = Object.fromEntries(
+					Object.entries(route.handle!).filter(filterInvalidTypes),
+				);
+			}
+			return { ...route, handle };
+		}
+	}, [location, matches]);
+
 	return (
 		<html lang="en">
 			<head>
@@ -60,7 +148,7 @@ export default function App() {
 
 				<ScrollRestoration />
 				<Scripts />
-				<LiveReload />
+				<LiveReload timeoutMs={1000} />
 				<Footer />
 				<BottomNav />
 			</body>
diff --git a/client/app/routes/offline.tsx b/client/app/routes/offline.tsx
new file mode 100644
index 0000000..4392d0a
--- /dev/null
+++ b/client/app/routes/offline.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+
+export default function Offline() {
+  const getBrowsingHistory = async () => {
+    const browsingHistory: Array<unknown> = []
+    const parser = new DOMParser()
+
+    const cache = await caches.open(
+      await caches.keys().then((res) => {
+        return res.filter((word) => word.includes('pages'))[0]
+      })
+    )
+
+    const keys = await cache.keys()
+
+    console.log(keys)
+
+    for (const request of keys) {
+      const data: Record<string, unknown> = {}
+      data.url = request.url
+      browsingHistory.push(data)
+    }
+
+    if (browsingHistory?.length) {
+      const markup = document.getElementById('browsing-history')
+      if (!markup) return
+      markup.innerHTML =
+        '<p class="mb-1">In the meantime, you still have things you can access: </p>'
+      browsingHistory.forEach((data) => {
+        if (!data) return
+        markup.innerHTML += `
+				<ul class="list-disc pl-4">
+					<li>
+						<a class="block text-blue-600" href="${data.url}">${data.url}</a>
+					</li>
+				</ul>
+				`
+      })
+      document
+        .getElementById('browsing-history')
+        ?.insertAdjacentElement('beforeend', markup)
+    }
+  }
+
+  React.useEffect(() => {
+    getBrowsingHistory()
+  })
+
+  return (
+    <div className='container mx-auto min-h-[70vh] pt-8'>
+      <h1 className='font-bold text-3xl mb-8'>
+        Oops, you are currently offline
+      </h1>
+      <h2 className='font-medium text-xl mb-4'>
+        Please check your internet connection and try again
+      </h2>
+
+      <div id='browsing-history' />
+    </div>
+  )
+}
diff --git a/client/public/service-worker.js b/client/public/service-worker.js
new file mode 100644
index 0000000..15a37b9
--- /dev/null
+++ b/client/public/service-worker.js
@@ -0,0 +1,188 @@
+const cacheHeader = 'compa:v1.0.0:'
+
+const offlineFundamentals = ['/offline']
+
+//Add core website files to cache during serviceworker installation
+const updateStaticCache = async () => {
+  const cache = await caches.open(`${cacheHeader}fundamentals`)
+  return await Promise.all(
+    offlineFundamentals.map((value) => {
+      let request = new Request(value)
+      const url = new URL(request.url)
+      if (url.origin !== location.origin) {
+        request = new Request(value)
+      }
+      return fetch(request)
+        .then((response) => {
+          const cachedCopy = response.clone()
+          return cache.put(request, cachedCopy)
+        })
+        .catch(() => {
+          return caches.match(new Request('/offline')).then((response_1) => {
+            if (response_1) {
+              self.clients.matchAll().then((clients) => {
+                for (const client of clients) {
+                  client.navigate('/offline')
+                }
+              })
+            }
+            return response_1
+          })
+        })
+    })
+  )
+}
+
+//Clear caches with a different version number
+const clearOldCaches = async () => {
+  const keys = await caches.keys()
+  return await Promise.all(
+    keys
+      .filter((key) => {
+        return key.indexOf(cacheHeader) !== 0
+      })
+      .map((key_1) => {
+        return caches.delete(key_1)
+      })
+  )
+}
+
+//When the service worker is first added to a computer
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    updateStaticCache().then(() => {
+      return self.skipWaiting()
+    })
+  )
+})
+
+//Service worker handles networking
+self.addEventListener('fetch', (event) => {
+  //This service worker won't touch non-get requests
+  if (event.request.method !== 'GET') {
+    return
+  }
+
+  //Fetch from network and cache
+  const fetchFromNetwork = async (response) => {
+    const cacheCopy = response.clone()
+    if (event.request.headers.get('Accept').indexOf('image') !== -1) {
+      await caches.open(`${cacheHeader}images`).then(async (cache) => {
+        await cache.put(event.request, cacheCopy)
+      })
+    } else {
+      await caches.open(`${cacheHeader}assets`).then(async function add(cache) {
+        await cache.put(event.request, cacheCopy)
+      })
+    }
+
+    return response
+  }
+
+  //For non-HTML requests, look for file in cache, then network if no cache exists.
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      return (
+        cached ||
+        fetch(event.request)
+          .then((response) => {
+            return fetchFromNetwork(response)
+          })
+          .catch(async () => {
+            return await caches
+              .match(new Request('/offline'))
+              .then((response) => {
+                if (response) {
+                  self.clients.matchAll().then((clients) => {
+                    for (const client of clients) {
+                      client.navigate('/offline')
+                    }
+                  })
+                }
+                return response
+              })
+          })
+      )
+    })
+  )
+})
+
+//After the install event
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async (event) => {
+  if (event.data.action === 'clearCache') {
+    clearOldCaches()
+  }
+
+  if (event.data.type === 'REMIX_NAVIGATION') {
+    const cachePromises = new Map();
+    const { location, isMount, manifest, matches } = event.data
+    const existingUrl = await caches.match(location.pathname)
+    const documentUrl = location.pathname + location.search + location.hash;
+    console.log('mounted', isMount)
+
+    if (!existingUrl || !isMount) {
+      console.log('i am in here', documentUrl)
+      const response = await fetch(documentUrl).catch(async () => {
+        return (
+          (await caches.match(location.pathname)) ||
+          (await caches
+            .match(new Request('/offline'), {})
+            .then((response) => {
+              if (response) {
+                self.clients.matchAll().then((clients) => {
+                  for (const client of clients) {
+                    client.navigate('/offline')
+                  }
+                })
+              }
+              return response
+            }))
+        )
+      });
+
+        cachePromises.set(
+          documentUrl,
+          await caches.open(`${cacheHeader}pages`).then(async (cache) => {
+            await cache.put(documentUrl, response)
+          }).catch(error => {
+            console.error(`Failed to cache document for ${documentUrl}:`, error)
+          })
+        );
+    }
+
+    if (isMount) {
+      for (const match of matches) {
+        if (manifest.routes[match.id].hasLoader) {
+          const params = new URLSearchParams(location.search);
+          params.set('_data', match.id);
+
+          let search = params.toString();
+          search = search ? `?${search}` : '';
+
+          const url = location.pathname + search + location.hash;
+
+          if (!cachePromises.has(url)) {
+            console.log('Caching data for:', url);
+
+            const response = await fetch(url);
+
+            cachePromises.set(
+              url,
+              await caches.open(`${cacheHeader}assets`).then(async (cache) => {
+                await cache.put(url, response)
+              }).catch((error) => {
+                console.error(`Failed to cache data for ${url}:`, error)
+              })
+            );
+          }
+        }
+      }
+    }
+
+    await Promise.all(cachePromises.values());
+  }
+})