diff --git a/client/index.html b/client/index.html
deleted file mode 100644
index a546081..0000000
--- a/client/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/chessu.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chessu</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/client/package.json b/client/package.json
index 2e6fb9f..1a1ee70 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,28 +1,29 @@
 {
-    "name": "chessu",
+    "name": "@chessu/client",
     "private": true,
-    "version": "0.0.0",
-    "type": "module",
+    "sideEffects": false,
     "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview"
+        "build": "npm run build:css && remix build",
+        "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
+        "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
+        "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
+        "typecheck": "tsc"
     },
     "dependencies": {
-        "@radix-ui/colors": "^0.1.8",
-        "@radix-ui/react-icons": "^1.1.1",
-        "chess.js": "^1.0.0-beta.1",
+        "@remix-run/node": "^1.12.0",
+        "@remix-run/react": "^1.12.0",
+        "@remix-run/vercel": "^1.12.0",
+        "@vercel/node": "^2.9.0",
         "react": "^18.2.0",
-        "react-chessboard": "^2.0.8",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.6.2",
-        "socket.io-client": "^4.5.4"
+        "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@types/react": "^18.0.26",
+        "@chessu/types": "*",
+        "@remix-run/dev": "^1.12.0",
+        "@remix-run/serve": "^1.12.0",
+        "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
-        "@vitejs/plugin-react-swc": "^3.0.1",
-        "typescript": "^4.9.4",
-        "vite": "^4.0.4"
+        "tailwindcss": "^3.2.4",
+        "typescript": "^4.9.5"
     }
 }
diff --git a/client/public/chessu.svg b/client/public/chessu.svg
deleted file mode 100644
index cabe48a..0000000
--- a/client/public/chessu.svg
+++ /dev/null
@@ -1,104 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<circle style="fill:#88C5CC;" cx="256" cy="256" r="256"/>
-<path style="fill:#80B9BF;" d="M436.08,428.48c-0.508-1.388-1.052-2.752-1.656-4.084c-0.508-1.392-1.052-2.756-1.656-4.092
-	c-0.508-1.392-1.048-2.752-1.656-4.084c-0.508-1.388-1.048-2.752-1.656-4.084c-0.492-1.36-1.024-2.696-1.612-4
-	c-0.696-2.22-1.568-4.344-2.516-6.428c-0.504-1.388-1.052-2.752-1.656-4.084c-0.504-1.392-1.052-2.752-1.656-4.088
-	c-0.504-1.388-1.048-2.752-1.656-4.084c-0.504-1.392-1.048-2.756-1.656-4.092c-0.504-1.388-1.048-2.752-1.652-4.084
-	c-0.508-1.388-1.056-2.752-1.656-4.084c-0.5-1.376-1.044-2.736-1.64-4.056c-0.508-1.4-1.064-2.776-1.672-4.12
-	c-0.508-1.388-1.052-2.752-1.656-4.088c-0.508-1.388-1.052-2.752-1.656-4.084c-0.508-1.388-1.048-2.752-1.656-4.088
-	c-0.508-1.388-1.048-2.752-1.656-4.084c-0.508-1.392-1.048-2.752-1.656-4.084c-0.508-1.396-1.056-2.756-1.66-4.092
-	c-0.5-1.376-1.036-2.728-1.636-4.056c-0.504-1.384-1.048-2.744-1.648-4.072c-0.688-2.2-1.552-4.316-2.496-6.388
-	c-0.504-1.388-1.052-2.752-1.656-4.088c-0.504-1.388-1.052-2.752-1.66-4.084c-0.504-1.392-1.048-2.752-1.656-4.088
-	c-0.5-1.388-1.048-2.752-1.656-4.088c-0.5-1.376-1.04-2.732-1.64-4.056c-0.508-1.4-1.056-2.772-1.664-4.116
-	c-0.508-1.392-1.052-2.752-1.656-4.084c-0.508-1.392-1.056-2.756-1.656-4.092c-0.508-1.388-1.056-2.752-1.656-4.084
-	c-0.508-1.388-1.056-2.752-1.66-4.088c-0.504-1.388-1.052-2.752-1.656-4.084c-0.5-1.376-1.036-2.736-1.64-4.056
-	c-0.508-1.404-1.06-2.776-1.668-4.12c-0.504-1.388-1.048-2.752-1.656-4.088c-0.504-1.388-1.048-2.752-1.656-4.084
-	c-0.504-1.392-1.052-2.752-1.656-4.084c-0.5-1.372-1.036-2.72-1.632-4.04c-0.692-2.2-1.556-4.32-2.5-6.392
-	c-0.5-1.376-1.04-2.732-1.64-4.052c-0.508-1.4-1.056-2.776-1.664-4.124c-0.508-1.388-1.056-2.752-1.656-4.088
-	c-0.508-1.388-1.056-2.752-1.656-4.084c-0.508-1.388-1.056-2.756-1.664-4.088c-0.5-1.392-1.048-2.756-1.656-4.092
-	c-0.5-1.388-1.048-2.752-1.652-4.084c-0.504-1.392-1.052-2.756-1.656-4.088c-0.5-1.376-1.044-2.732-1.64-4.052
-	c-0.508-1.4-1.06-2.776-1.668-4.12c-0.504-1.392-1.056-2.756-1.656-4.088c-0.508-1.388-1.056-2.752-1.656-4.088
-	c-0.508-1.388-1.052-2.752-1.66-4.088c-0.504-1.388-1.048-2.752-1.656-4.084c-0.504-1.388-1.048-2.752-1.652-4.088
-	c-0.492-1.36-1.028-2.7-1.616-4.008c-0.696-2.212-1.568-4.336-2.516-6.42c-0.5-1.388-1.048-2.752-1.656-4.084
-	c-0.5-1.392-1.048-2.756-1.656-4.092c-0.5-1.388-1.048-2.752-1.656-4.084c-0.5-1.388-1.048-2.752-1.652-4.088
-	c-0.504-1.388-1.052-2.752-1.656-4.084c-0.504-1.388-1.052-2.752-1.656-4.088c-0.5-1.376-1.044-2.732-1.64-4.056
-	c-0.508-1.4-1.06-2.776-1.672-4.12c-0.504-1.392-1.052-2.756-1.656-4.092c-0.504-1.388-1.048-2.752-1.656-4.084
-	c-0.504-1.388-1.048-2.752-1.656-4.088c-0.504-1.388-1.052-2.752-1.656-4.084c-0.504-1.388-1.052-2.752-1.652-4.088
-	c-0.5-1.376-1.044-2.732-1.64-4.056c-0.508-1.4-1.06-2.776-1.672-4.12c-0.5-1.388-1.052-2.752-1.656-4.088
-	c-0.508-1.388-1.052-2.756-1.656-4.088C300.772,91.38,280.228,76,256,76c-1.504,0-2.984-0.228-4.452-0.092
-	C250.36,76,249.192,76,248.028,76C248.02,76,248,76,248,76v0.316c-28,3.892-48.004,27.308-48.004,55.524
-	c0,4.872,0.652,9.584,1.82,14.092c0.144,0.636,0.248,1.28,0.412,1.908c1.04,4.612,2.632,9.016,4.752,13.132
-	c1.028,3.616,2.416,7.088,4.116,10.372c1.016,3.556,2.388,6.968,4.064,10.2c1.02,3.544,2.384,6.952,4.056,10.176
-	c0.032,0.116,0.072,0.228,0.1,0.344C215.244,192.428,212,195.836,212,200c0,1.28,0.332,2.476,0.876,3.552
-	c-0.008,0.152-0.048,0.296-0.048,0.448c0,1.864,0.672,3.56,1.752,4.924c0.18,1.5,0.76,2.868,1.656,4
-	c0.18,1.5,0.756,2.864,1.656,3.996c0.172,1.504,0.756,2.872,1.656,4.004c0.172,1.5,0.756,2.868,1.652,4
-	c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4
-	c0.048,0.404,0.112,0.792,0.224,1.176C222.928,286.508,211.18,340.436,184,388h-4c-4.4,0-8,3.6-8,8c0,1.288,0.336,2.492,0.884,3.572
-	c0.116,1.616,0.72,3.032,1.672,4.164c0.064,0.732,0.212,1.424,0.46,2.072c-1.82,1.468-3.016,3.688-3.016,6.2
-	c0,1.26,0.324,2.44,0.852,3.512c0.048,1.584,0.54,3.144,1.376,4.488H164c-4.4,0-8,3.596-8,8c0,1.276,0.332,2.476,0.876,3.552
-	c-0.008,0.152-0.048,0.296-0.048,0.448c0,1.864,0.672,3.56,1.752,4.924c0.18,1.5,0.76,2.868,1.656,4
-	c0.18,1.5,0.756,2.864,1.656,3.992c0.172,1.508,0.756,2.876,1.656,4.008c0.172,1.5,0.756,2.868,1.652,4
-	c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.76,2.868,1.656,4
-	c0.176,1.5,0.76,2.868,1.656,4c0.176,1.5,0.752,2.864,1.652,3.992c0.176,1.508,0.756,2.876,1.656,4.008
-	c0.176,1.5,0.756,2.868,1.656,4c0.172,1.5,0.756,2.868,1.656,4c0.172,1.5,0.756,2.868,1.656,4c0.172,1.5,0.756,2.868,1.656,4
-	c0.172,1.5,0.756,2.868,1.656,4c0.048,0.396,0.188,0.752,0.288,1.124C207.808,508.484,231.488,512,256,512
-	c71.608,0,136.32-29.436,182.78-76.832c-0.336-0.872-0.664-1.748-1.048-2.596C437.236,431.184,436.684,429.816,436.08,428.48z"/>
-<path style="fill:#E6E6E6;" d="M280,164c-12,0-24,0-24,0s-12,0-24,0c0,36,0,140-48,224c36,0,72,0,72,0s36,0,72,0
-	C280,304,280,200,280,164z"/>
-<path style="fill:#CCCCCC;" d="M280,164c-5.788,0-11.564,0-16,0c0,36,0,140,48,224c5.256,0,10.616,0,16,0C280,304,280,200,280,164z"
-	/>
-<path style="fill:#E6E6E6;" d="M312,132c0,30.936-25.048,56-56,56c-30.92,0-56-25.064-56-56c0-30.94,25.08-56,56-56
-	C286.952,76,312,101.06,312,132z"/>
-<path style="fill:#CCCCCC;" d="M256,76c-2.728,0-5.384,0.26-7.996,0.636C275.148,80.524,296,103.784,296,132
-	s-20.852,51.476-47.996,55.364C250.616,187.74,253.272,188,256,188c30.952,0,56-25.064,56-56C312,101.06,286.952,76,256,76z"/>
-<path style="fill:#CC584C;" d="M292,184c0,4.4-3.6,8-8,8h-56c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h56C288.4,176,292,179.6,292,184
-	L292,184z"/>
-<g>
-	<path style="fill:#263740;" d="M300,200c0,4.4-3.6,8-8,8h-72c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h72C296.4,192,300,195.6,300,200
-		L300,200z"/>
-	<path style="fill:#263740;" d="M340,396c0,4.4-3.6,8-8,8H180c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h152
-		C336.4,388,340,391.6,340,396L340,396z"/>
-</g>
-<path style="fill:#1E2C33;" d="M332,388h-16c4.4,0,8,3.6,8,8s-3.6,8-8,8h16c4.4,0,8-3.6,8-8S336.4,388,332,388z"/>
-<path style="fill:#CC584C;" d="M340,412c0,4.4-3.6,8-8,8H180c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h152C336.4,404,340,407.6,340,412
-	L340,412z"/>
-<path style="fill:#263740;" d="M356,428c0,4.4-3.6,8-8,8H164c-4.4,0-8-3.6-8-8l0,0c0-4.4,3.6-8,8-8h184C352.4,420,356,423.6,356,428
-	L356,428z"/>
-<path style="fill:#1E2C33;" d="M348,420h-16c4.4,0,8,3.6,8,8s-3.6,8-8,8h16c4.4,0,8-3.6,8-8S352.4,420,348,420z"/>
-<path style="fill:#B34D43;" d="M332,404h-16c4.4,0,8,3.6,8,8s-3.6,8-8,8h16c4.4,0,8-3.6,8-8S336.4,404,332,404z"/>
-<path style="fill:#1E2C33;" d="M292,192h-16c4.4,0,8,3.6,8,8s-3.6,8-8,8h16c4.4,0,8-3.6,8-8S296.4,192,292,192z"/>
-<path style="fill:#B34D43;" d="M284,176h-16c4.4,0,8,3.6,8,8s-3.6,8-8,8h16c4.4,0,8-3.6,8-8S288.4,176,284,176z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
diff --git a/client/src/App.tsx b/client/src/App.tsx
deleted file mode 100644
index 18bbb0c..0000000
--- a/client/src/App.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Route, Routes } from "react-router-dom";
-import ContextProvider from "./context/ContextProvider";
-
-import Header from "./components/Header/Header";
-import Footer from "./components/Footer/Footer";
-
-import ProtectedRoutes from "./routes/ProtectedRoutes";
-import Home from "./routes/Home/Home";
-import Game from "./routes/Game/Game";
-import NotFound from "./routes/NotFound/NotFound";
-
-import "./global.css";
-
-const App = (): JSX.Element => {
-  return (
-    <ContextProvider>
-      <Header />
-      <main>
-        <Routes>
-          <Route index element={<Home />} />
-          <Route element={<ProtectedRoutes />}>
-            <Route path="/game/:gameCode" element={<Game />} />
-          </Route>
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </main>
-      <Footer />
-    </ContextProvider>
-  );
-};
-
-export default App;
diff --git a/client/src/assets/oauth_facebook.png b/client/src/assets/oauth_facebook.png
deleted file mode 100644
index 8d0d202..0000000
Binary files a/client/src/assets/oauth_facebook.png and /dev/null differ
diff --git a/client/src/assets/oauth_google.png b/client/src/assets/oauth_google.png
deleted file mode 100644
index b1327b4..0000000
Binary files a/client/src/assets/oauth_google.png and /dev/null differ
diff --git a/client/src/components/Auth/Auth.module.css b/client/src/components/Auth/Auth.module.css
deleted file mode 100644
index 713d7f9..0000000
--- a/client/src/components/Auth/Auth.module.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.authBox {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 4px;
-  position: relative;
-}
-
-.orRegister {
-  font-size: 70%;
-}
-
-.orRegister a {
-  color: var(--blue11);
-  text-decoration: underline;
-}
-
-.authBox h3 {
-  margin-bottom: 1em;
-}
-
-.section {
-  flex: 1;
-  width: 50%;
-  min-width: 250px;
-  padding: 20px;
-  position: relative;
-}
-
-.sectionDisabled {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  backdrop-filter: blur(1px);
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-
-.sectionLeft {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  /*border-right: 1px solid #eee;*/
-}
-
-.sectionRight {
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-}
-
-.formLabel {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 5px;
-}
-
-.formInput {
-  background-color: var(--blue4);
-  box-shadow: 0 0 0 1px var(--blue6);
-  color: var(--blue12);
-  border-radius: 4px;
-  padding: 8px;
-  font-size: 14px;
-}
-
-.formInput:focus {
-  box-shadow: 0 0 0 1px var(--blue8);
-}
-
-.formButton {
-  border-radius: 4px;
-  background-color: var(--blue10);
-  color: var(--blue1);
-  font-size: 14px;
-  font-weight: 500;
-  padding: 8px 16px;
-  cursor: pointer;
-}
-
-.formButton:focus,
-.formButton:hover {
-  background-color: var(--blue11);
-}
-
-.oauth {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.oauthButton {
-  width: 50%;
-  background-color: transparent;
-  cursor: pointer;
-  display: inline-flex;
-}
-
-.oauthButton img {
-  width: 100%;
-}
diff --git a/client/src/components/Auth/Auth.tsx b/client/src/components/Auth/Auth.tsx
deleted file mode 100644
index 971bd8d..0000000
--- a/client/src/components/Auth/Auth.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { MouseEvent, useRef, useContext } from "react";
-import { SessionContext } from "../../context/session";
-import { setGuestSession } from "../../utils/auth";
-
-import styles from "./Auth.module.css";
-import GoogleOAuth from "../../assets/oauth_google.png";
-import FacebookOAuth from "../../assets/oauth_facebook.png";
-
-// TODO: clean up this component
-
-const Auth = () => {
-  const guestNameRef = useRef<HTMLInputElement | null>(null);
-  const session = useContext(SessionContext);
-
-  async function handleGuestLogin(e: MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    if (!guestNameRef.current || !guestNameRef.current.value) return;
-
-    const user = await setGuestSession(guestNameRef.current.value);
-
-    if (user) {
-      session?.setUser(user);
-    } else {
-      console.log("guest auth failed");
-    }
-  }
-
-  return (
-    <div className={styles.authBox}>
-      <div className={`${styles.section} ${styles.sectionLeft}`}>
-        <h3>Guest login</h3>
-        <form>
-          <div className={styles.formGroup}>
-            <label className={styles.formLabel} htmlFor="guest-username">
-              Username
-            </label>
-            <input
-              type="text"
-              id="guest-username"
-              ref={guestNameRef}
-              className={styles.formInput}
-              pattern="[a-zA-Z0-9_-]+"
-              title="_ - and alphanumeric characters only"
-              required
-            />
-          </div>
-          <button className={styles.formButton} type="submit" onClick={handleGuestLogin}>
-            Continue as Guest
-          </button>
-        </form>
-      </div>
-      <div className={`${styles.section} ${styles.sectionRight}`}>
-        <div className={styles.sectionDisabled}>coming soon.</div>
-        <h3>
-          Sign In{" "}
-          <span className={styles.orRegister}>
-            or <a href="#">register</a>
-          </span>
-        </h3>
-        <form className={styles.form}>
-          <div className={styles.formGroup}>
-            <label className={styles.formLabel} htmlFor="email">
-              Username/Email
-            </label>
-            <input type="email" id="email" className={styles.formInput} />
-          </div>
-          <div className={styles.formGroup}>
-            <label className={styles.formLabel} htmlFor="password">
-              Password
-            </label>
-            <input type="password" id="password" className={styles.formInput} />
-          </div>
-          <button className={styles.formButton} disabled>
-            Sign In
-          </button>
-        </form>
-        <div className={styles.oauth}>
-          <button className={styles.oauthButton} disabled>
-            <img src={GoogleOAuth} alt="Google" />
-          </button>
-          <button className={styles.oauthButton} disabled>
-            <img src={FacebookOAuth} alt="Facebook" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Auth;
diff --git a/client/src/components/Board/Board.tsx b/client/src/components/Board/Board.tsx
deleted file mode 100644
index 38b767c..0000000
--- a/client/src/components/Board/Board.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useContext, useState, useEffect, useReducer } from "react";
-import { Chess, Move, Square } from "chess.js";
-import { Chessboard } from "react-chessboard";
-import { SocketContext } from "../../context/socket";
-import { SessionContext } from "../../context/session";
-import type { Game } from "@types";
-
-/**
- * bug: always on initial position on page load, regardless of game.fen()
-        but works fine in production without StrictMode rendering the component twice
- *  */
-
-const Board = () => {
-  const socket = useContext(SocketContext);
-  const session = useContext(SessionContext);
-
-  const [size, setSize] = useState(400);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [game, _setGame] = useState(new Chess());
-  const [side, setSide] = useState<"b" | "w" | "s">("s");
-
-  const [moveFrom, setMoveFrom] = useState<string | Square>("");
-  const [rightClickedSquares, setRightClickedSquares] = useState<{
-    [square: string]: { backgroundColor: string } | undefined;
-  }>({});
-  const [optionSquares, setOptionSquares] = useState<{
-    [square: string]: { background: string; borderRadius?: string };
-  }>({});
-
-  useEffect(() => {
-    if (socket === null) return;
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-
-    socket.on("receivedLatestGame", (latestGame: Game) => {
-      if (latestGame.pgn) {
-        game.loadPgn(latestGame.pgn);
-        forceUpdate();
-      }
-      if (latestGame.black?.id === session?.user.id) {
-        if (side !== "b") setSide("b");
-      } else if (latestGame.white?.id === session?.user.id) {
-        if (side !== "w") setSide("w");
-      } else if (side !== "s") {
-        setSide("s");
-      }
-    });
-
-    socket.on("receivedMove", (m: { from: string; to: string; promotion?: string }) => {
-      const success = makeMove(m);
-      if (!success) {
-        socket.emit("getLatestGame");
-      }
-    });
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      socket.off("receivedMove");
-      socket.off("receivedLatestGame");
-    };
-  }, []);
-
-  function handleResize() {
-    const container = document.getElementById("root");
-    if (!container || !container.offsetWidth) return;
-    if (container.offsetWidth > 1600) {
-      setSize(container.offsetWidth * 0.25);
-    } else if (container.offsetWidth > 700) {
-      setSize(container.offsetWidth * 0.35);
-    } else {
-      setSize(container.offsetWidth - 100);
-    }
-  }
-
-  function makeMove(m: { from: string; to: string; promotion?: string }) {
-    try {
-      const result = game.move(m);
-      if (result) {
-        setOptionSquares({
-          [m.from]: { background: "rgba(255, 255, 0, 0.4)" },
-          [m.to]: { background: "rgba(255, 255, 0, 0.4)" }
-        });
-        return result;
-      } else {
-        throw new Error("invalid move");
-      }
-    } catch (e) {
-      setOptionSquares({});
-      return false;
-    }
-  }
-
-  function isDraggablePiece({ piece }: { piece: string }) {
-    if (side === "s") return true;
-    return piece.startsWith(side);
-  }
-
-  function onDrop(sourceSquare: Square, targetSquare: Square) {
-    if (side !== game.turn()) return false;
-
-    const moveDetails = {
-      from: sourceSquare,
-      to: targetSquare,
-      promotion: "q"
-    };
-
-    const move = makeMove(moveDetails);
-    if (!move) return false; // illegal move
-    socket?.emit("sendMove", moveDetails);
-    return true;
-  }
-
-  function getMoveOptions(square: Square) {
-    const moves = game.moves({
-      square,
-      verbose: true
-    }) as Move[];
-    if (moves.length === 0) {
-      return;
-    }
-
-    const newSquares: {
-      [square: string]: { background: string; borderRadius?: string };
-    } = {};
-    moves.map((move) => {
-      newSquares[move.to] = {
-        background:
-          game.get(move.to as Square) &&
-          game.get(move.to as Square)?.color !== game.get(square)?.color
-            ? "radial-gradient(circle, rgba(0,0,0,.1) 85%, transparent 85%)"
-            : "radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)",
-        borderRadius: "50%"
-      };
-      return move;
-    });
-    newSquares[square] = {
-      background: "rgba(255, 255, 0, 0.4)"
-    };
-    setOptionSquares(newSquares);
-  }
-
-  function onPieceDragBegin(_piece: string, sourceSquare: Square) {
-    if (side !== game.turn()) return;
-
-    getMoveOptions(sourceSquare);
-  }
-  function onPieceDragEnd() {
-    setOptionSquares({});
-  }
-
-  function onSquareClick(square: Square) {
-    setRightClickedSquares({});
-    if (side !== game.turn()) return;
-
-    function resetFirstMove(square: Square) {
-      setMoveFrom(square);
-      getMoveOptions(square);
-    }
-
-    // from square
-    if (!moveFrom) {
-      resetFirstMove(square);
-      return;
-    }
-
-    const moveDetails = {
-      from: moveFrom as Square,
-      to: square,
-      promotion: "q"
-    };
-
-    const move = makeMove(moveDetails);
-    if (!move) {
-      resetFirstMove(square);
-    } else {
-      setMoveFrom("");
-      socket?.emit("sendMove", moveDetails);
-    }
-  }
-
-  function onSquareRightClick(square: Square) {
-    const colour = "rgba(0, 0, 255, 0.4)";
-    setRightClickedSquares({
-      ...rightClickedSquares,
-      [square]:
-        rightClickedSquares[square] && rightClickedSquares[square]?.backgroundColor === colour
-          ? undefined
-          : { backgroundColor: colour }
-    });
-  }
-
-  return (
-    <Chessboard
-      position={game.fen()}
-      animationDuration={200}
-      isDraggablePiece={isDraggablePiece}
-      boardOrientation={side === "b" ? "black" : "white"}
-      boardWidth={size}
-      onPieceDragBegin={onPieceDragBegin}
-      onPieceDragEnd={onPieceDragEnd}
-      onPieceDrop={onDrop}
-      onSquareClick={onSquareClick}
-      onSquareRightClick={onSquareRightClick}
-      customSquareStyles={{
-        ...optionSquares,
-        ...rightClickedSquares
-      }}
-    />
-  );
-};
-
-export default Board;
diff --git a/client/src/components/Footer/Footer.module.css b/client/src/components/Footer/Footer.module.css
deleted file mode 100644
index 630f669..0000000
--- a/client/src/components/Footer/Footer.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.footer {
-  margin-top: 4em;
-  padding-bottom: 2em;
-  width: 100%;
-  font-size: 0.8em;
-}
-
-.footer a {
-  color: var(--blue12);
-}
-
-.github {
-  text-decoration: underline;
-}
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
deleted file mode 100644
index ad93f6d..0000000
--- a/client/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styles from "./Footer.module.css";
-
-const Footer = () => {
-  return (
-    <footer className={styles.footer}>
-      made with &hearts; by{" "}
-      <a href="https://nize.ph" target="_blank" rel="noreferrer">
-        nize
-      </a>
-      <br />
-      &copy; {new Date().getFullYear()} —{" "}
-      <a
-        href="https://github.com/nizewn/chessu"
-        className={styles.github}
-        target="_blank"
-        rel="noreferrer"
-      >
-        GitHub
-      </a>
-    </footer>
-  );
-};
-
-export default Footer;
diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
deleted file mode 100644
index e09bc6f..0000000
--- a/client/src/components/Header/Header.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.header {
-  padding: 1.5em;
-  font-size: 2.3em;
-  text-align: center;
-}
-
-.title {
-  color: var(--blue12);
-}
-
-.themeToggle {
-  padding: 0 0.5em;
-  background: transparent;
-  color: var(--blue12);
-}
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
deleted file mode 100644
index ec74611..0000000
--- a/client/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-
-import styles from "./Header.module.css";
-import { SunIcon, MoonIcon } from "@radix-ui/react-icons";
-
-const Header = () => {
-  const [darkTheme, setDarkTheme] = useState(false);
-  useEffect(() => {
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => changeTheme(e.matches ? "dark" : "light"));
-
-    changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-  }, []);
-
-  function changeTheme(theme: "dark" | "light") {
-    if (theme === "dark") {
-      if (!document.body.classList.contains("dark-theme")) {
-        document.body.classList.add("dark-theme");
-      }
-      setDarkTheme(true);
-    } else {
-      if (document.body.classList.contains("dark-theme")) {
-        document.body.classList.remove("dark-theme");
-      }
-      setDarkTheme(false);
-    }
-  }
-
-  return (
-    <header className={styles.header}>
-      <Link to="/" className={styles.title}>
-        chessu
-      </Link>
-      <button
-        className={styles.themeToggle}
-        type="button"
-        onClick={() => changeTheme(darkTheme ? "light" : "dark")}
-      >
-        {darkTheme ? <SunIcon /> : <MoonIcon />}
-      </button>
-    </header>
-  );
-};
-
-export default Header;
diff --git a/client/src/config/config.ts b/client/src/config/config.ts
deleted file mode 100644
index 60b0c45..0000000
--- a/client/src/config/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const apiUrl = import.meta.env.APIURL || "https://api.ches.su";
diff --git a/client/src/context/ContextProvider.tsx b/client/src/context/ContextProvider.tsx
deleted file mode 100644
index 1775e0a..0000000
--- a/client/src/context/ContextProvider.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { PropsWithChildren, useEffect, useState } from "react";
-import type { User } from "@types";
-
-import { SocketContext, socket } from "./socket";
-import { SessionContext } from "./session";
-
-import { fetchSession } from "../utils/auth";
-
-const ContextProvider = (props: PropsWithChildren) => {
-  const [user, setUser] = useState<User>({});
-
-  async function getSession() {
-    const user = await fetchSession();
-    if (user) {
-      setUser(user);
-    }
-  }
-
-  useEffect(() => {
-    getSession();
-  }, []);
-
-  return (
-    <SocketContext.Provider value={socket}>
-      <SessionContext.Provider value={{ user, setUser }}>{props.children}</SessionContext.Provider>
-    </SocketContext.Provider>
-  );
-};
-export default ContextProvider;
diff --git a/client/src/context/session.ts b/client/src/context/session.ts
deleted file mode 100644
index 629856a..0000000
--- a/client/src/context/session.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { User } from "@types";
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export const SessionContext = createContext<{
-    user: User;
-    setUser: Dispatch<SetStateAction<User>>;
-} | null>(null);
diff --git a/client/src/context/socket.ts b/client/src/context/socket.ts
deleted file mode 100644
index 833c1d3..0000000
--- a/client/src/context/socket.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createContext } from "react";
-import { io, Socket } from "socket.io-client";
-import { apiUrl } from "../config/config";
-
-export const socket: Socket = io(apiUrl, {
-    withCredentials: true,
-    autoConnect: false
-});
-
-socket.on("connect", () => {
-    console.log("socket connected");
-});
-
-socket.on("disconnect", () => {
-    console.log("socket disconnected");
-});
-
-export const SocketContext = createContext<Socket | null>(null);
diff --git a/client/src/global.css b/client/src/global.css
deleted file mode 100644
index 7ad79a5..0000000
--- a/client/src/global.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
-@import "@radix-ui/colors/blue.css";
-@import "@radix-ui/colors/blueDark.css";
-
-* {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  box-sizing: border-box;
-  list-style: none;
-  text-decoration: none;
-}
-
-body {
-  text-align: center;
-  font-family: "Poppins", sans-serif;
-  background-color: var(--blue1);
-  color: var(--blue12);
-}
-
-main {
-  margin-top: 1em;
-  min-height: 300px;
-  padding: 1.5em;
-  border-radius: 0.5em;
-  background-color: var(--blue2);
-  margin: auto;
-  display: inline-block;
-  min-width: 450px;
-  max-width: 900px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-@media only screen and (max-width: 550px) {
-  main {
-    min-width: 90%;
-  }
-}
diff --git a/client/src/main.tsx b/client/src/main.tsx
deleted file mode 100644
index 111d9d8..0000000
--- a/client/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-
-import App from "./App";
-
-createRoot(document.getElementById("root") as HTMLElement).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
-);
diff --git a/client/src/routes/Game/Game.module.css b/client/src/routes/Game/Game.module.css
deleted file mode 100644
index fa9ffad..0000000
--- a/client/src/routes/Game/Game.module.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.game {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 1.5em;
-}
-
-.boardContainer {
-  text-align: left;
-}
-
-.playerNameTop {
-  margin-bottom: 0.5em;
-}
-.playerNameBottom {
-  margin-top: 0.5em;
-}
-.playButton {
-  padding: 0.5em;
-  margin: 0.5em 0;
-  cursor: pointer;
-  background-color: var(--blue10);
-  color: var(--blue1);
-  font-weight: bold;
-  font-size: 1em;
-}
-.playButton:hover,
-.playButton:focus {
-  background-color: var(--blue11);
-}
-
-.sidebar {
-  text-align: left;
-  font-size: 0.9em;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 2em;
-}
-
-.invite {
-  text-align: right;
-}
-
-.copy {
-  font-size: 0.8em;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 8px;
-  background-color: var(--blue4);
-}
-
-.lobby {
-  height: 6em;
-  width: 260px;
-}
-.lobbyUsers {
-  font-size: 0.8em;
-  overflow: wrap;
-}
-
-.chatbox {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  padding: 1em;
-  background-color: var(--blue3);
-  border-radius: 10px;
-  width: 260px;
-  height: 280px;
-}
-
-.chatList {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  height: 100%;
-}
-.chatList::-webkit-scrollbar {
-  width: 0.4em;
-}
-.chatList::-webkit-scrollbar-thumb {
-  background-color: var(--blue6);
-  border-radius: 2px;
-}
-
-.author {
-  font-weight: bold;
-}
-.player {
-  font-weight: bold;
-  color: var(--blue9);
-}
-.server {
-  color: var(--blue11);
-}
-.gameOver {
-  background-color: var(--blue12);
-  color: var(--blue1);
-  font-weight: bold;
-  padding: 0.4em;
-}
-
-.chatInput {
-  display: block;
-  height: 2em;
-  padding: 0 0.5em;
-  border-radius: 6px;
-  width: 228px;
-  margin-top: auto;
-  flex-shrink: 0;
-  background-color: var(--blue5);
-  box-shadow: 0 0 0 1px var(--blue6);
-  color: var(--blue12);
-}
-
-.chatInput:hover,
-.chatInput:focus {
-  box-shadow: 0 0 0 1px var(--blue7);
-}
diff --git a/client/src/routes/Game/Game.tsx b/client/src/routes/Game/Game.tsx
deleted file mode 100644
index c2749be..0000000
--- a/client/src/routes/Game/Game.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { MouseEvent, KeyboardEvent, useRef } from "react";
-import { useParams } from "react-router-dom";
-import Board from "../../components/Board/Board";
-import { useEffect, useContext, useState } from "react";
-import { SocketContext } from "../../context/socket";
-import { SessionContext } from "../../context/session";
-import type { Game, User } from "@types";
-
-import styles from "./Game.module.css";
-import { CopyIcon, PersonIcon } from "@radix-ui/react-icons";
-
-interface Message {
-  author: User;
-  message: string;
-}
-
-const Game = () => {
-  const { gameCode } = useParams();
-  const [game, setGame] = useState<Game>({});
-  const [messages, setMessages] = useState<Message[]>([]);
-  const socket = useContext(SocketContext);
-  const session = useContext(SessionContext);
-
-  const chatlistRef = useRef<HTMLUListElement>(null);
-
-  function joinAsPlayer(e: MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    socket?.emit("joinAsPlayer");
-  }
-
-  function handleCopy(type: "link" | "code") {
-    const text = type === "code" ? game.code : `https://ches.su/game/${game.code}`;
-    if (!text) return;
-    if ("clipboard" in navigator) {
-      navigator.clipboard.writeText(text);
-    } else {
-      document.execCommand("copy", true, text);
-    }
-  }
-
-  function addMessage(m: Message) {
-    setMessages((msgs) => [...msgs, m]);
-  }
-
-  function chatKeyUp(e: KeyboardEvent<HTMLInputElement>) {
-    e.preventDefault();
-    if (e.key === "Enter") {
-      const value = (e.target as HTMLInputElement).value;
-      if (!value || value.length === 0) return;
-      socket?.emit("chat", value);
-      addMessage({ author: session?.user as User, message: value });
-      (e.target as HTMLInputElement).value = "";
-    }
-  }
-
-  useEffect(() => {
-    // auto scroll down when new message is added
-    const box = chatlistRef.current;
-    if (!box) return;
-    box.scrollTop = box.scrollHeight;
-  }, [messages]);
-
-  useEffect(() => {
-    if (socket === null) {
-      console.log("socket is null");
-      return;
-    }
-
-    socket.on("receivedLatestLobby", (g: Game) => {
-      setGame(g);
-    });
-
-    socket.on("userJoined", (name: string) => {
-      addMessage({ author: { name: "server" }, message: `${name} has joined the lobby.` });
-    });
-    socket.on("userLeft", (name: string) => {
-      addMessage({ author: { name: "server" }, message: `${name} has left the lobby.` });
-    });
-    socket.on("userJoinedAsPlayer", ({ name, side }: { name: string; side: string }) => {
-      addMessage({ author: { name: "server" }, message: `${name} is now playing ${side}.` });
-    });
-    socket.on("chat", (m: Message) => {
-      addMessage(m);
-    });
-    socket.on(
-      "gameOver",
-      ({
-        reason,
-        winnerName,
-        winnerSide
-      }: {
-        reason: string;
-        winnerName?: string;
-        winnerSide?: string;
-      }) => {
-        const m = {
-          author: { name: "game" }
-        } as Message;
-
-        if (reason === "checkmate") {
-          m.message = `${winnerName}(${winnerSide}) has won by checkmate.`;
-        } else {
-          let message = "The game has ended in a draw";
-          if (reason === "repetition") {
-            message = message.concat(" due to threefold repetition");
-          } else if (reason === "insufficient") {
-            message = message.concat(" due to insufficient material");
-          } else if (reason === "stalemate") {
-            message = "The game has been drawn due to stalemate";
-          }
-          m.message = message.concat(".");
-        }
-        addMessage(m);
-      }
-    );
-
-    socket.connect();
-    socket.emit("joinLobby", gameCode);
-    return () => {
-      socket.off("receivedLatestLobby");
-      socket.off("userJoined");
-      socket.off("userLeft");
-      socket.off("userJoinedAsPlayer");
-      socket.off("chat");
-      socket.off("gameOver");
-      socket.disconnect();
-    };
-  }, []);
-
-  return (
-    <div className={styles.game}>
-      <div className={styles.boardContainer}>
-        {/* had no brain cells left when i was writing this, sorry */}
-        {game.black?.id === session?.user.id ? (
-          game.white?.name ? (
-            <div className={styles.playerNameTop}>
-              <PersonIcon /> {game.white?.name}
-            </div>
-          ) : (
-            ""
-          )
-        ) : game.white?.id === session?.user.id ? (
-          game.black?.name ? (
-            <div className={styles.playerNameTop}>
-              <PersonIcon /> {game.black?.name}
-            </div>
-          ) : (
-            ""
-          )
-        ) : game.black?.name ? (
-          <div className={styles.playerNameTop}>
-            <PersonIcon /> {game.black?.name}
-          </div>
-        ) : (
-          <button type="button" onClick={joinAsPlayer} className={styles.playButton}>
-            Play as black
-          </button>
-        )}
-        <Board />
-        {game.black?.id === session?.user.id ? (
-          <div className={styles.playerNameBottom}>
-            <PersonIcon /> {session?.user.name}
-          </div>
-        ) : game.white?.name ? (
-          <div className={styles.playerNameBottom}>
-            <PersonIcon /> {game.white?.name}
-          </div>
-        ) : (
-          <button type="button" onClick={joinAsPlayer} className={styles.playButton}>
-            Play as white
-          </button>
-        )}
-      </div>
-      <div className={styles.sidebar}>
-        <div className={styles.invite}>
-          Invite friends:{" "}
-          <span className={styles.copy} onClick={() => handleCopy("link")}>
-            ches.su/game/{game.code} <CopyIcon />
-          </span>
-          <div className={styles.code}>
-            or code{" "}
-            <span className={styles.copy} onClick={() => handleCopy("code")}>
-              {game.code} <CopyIcon />
-            </span>
-          </div>
-        </div>
-        <div className={styles.chatbox}>
-          <ul className={styles.chatList} ref={chatlistRef}>
-            {messages.map((m, i) => (
-              <li
-                key={i}
-                className={
-                  !m.author.id && m.author.name === "server"
-                    ? styles.server
-                    : !m.author.id && m.author.name === "game"
-                    ? styles.gameOver
-                    : ""
-                }
-              >
-                {m.author.id ? (
-                  <span>
-                    <span
-                      className={
-                        m.author.id === game?.white?.id || m.author.id === game?.black?.id
-                          ? styles.player
-                          : styles.author
-                      }
-                    >
-                      {m.author.name}
-                    </span>
-                    {": "}
-                  </span>
-                ) : (
-                  ""
-                )}
-                {m.message}
-              </li>
-            ))}
-          </ul>
-
-          <input
-            type="text"
-            name="chatbox"
-            id="chatbox"
-            className={styles.chatInput}
-            onKeyUp={chatKeyUp}
-            required
-          />
-        </div>
-        <div className={styles.lobby}>
-          {game.observers && game.observers.length > 0 ? "Spectators: " : ""}
-          <div className={styles.lobbyUsers}>{game.observers?.map((o) => o.name).join(", ")}</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-export default Game;
diff --git a/client/src/routes/Home/Home.module.css b/client/src/routes/Home/Home.module.css
deleted file mode 100644
index 48fadcf..0000000
--- a/client/src/routes/Home/Home.module.css
+++ /dev/null
@@ -1,117 +0,0 @@
-.home {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.gameNotFound {
-  position: absolute;
-  color: var(--blue11);
-}
-.name {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  margin-bottom: 2em;
-}
-
-.label {
-  line-height: 2em;
-  user-select: none;
-}
-
-.input {
-  height: 2em;
-  width: 50%;
-  flex-grow: 0;
-  padding: 0 0.5em;
-  background-color: var(--blue3);
-  border-radius: 6px;
-  box-shadow: 0 0 0 1px var(--blue6);
-  color: var(--blue12);
-}
-
-.input:focus,
-.select:focus {
-  box-shadow: 0 0 0 1px var(--blue8);
-}
-
-.tabs,
-.tabContent {
-  width: 70%;
-}
-
-.tabContent {
-  height: 10em;
-  padding: 1.5em 0.5em 0.5em;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.select {
-  width: 50%;
-  height: 2em;
-  padding: 0 0.5em;
-  background-color: var(--blue3);
-  box-shadow: 0 0 0 1px var(--blue6);
-  color: var(--blue12);
-}
-
-.submit {
-  cursor: pointer;
-  margin-top: 1em;
-  font-weight: bold;
-  border-radius: 8px;
-  padding: 0.4em 0;
-  flex-basis: 50%;
-  color: var(--blue1);
-  background-color: var(--blue10);
-}
-
-.submit:hover,
-.submit:focus {
-  background-color: var(--blue11);
-}
-
-.tabContent .input {
-  width: 45%;
-  background-color: var(--blue4);
-}
-
-.tabContent {
-  font-size: 0.9em;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-.tabLeft {
-  border-top-left-radius: 8px;
-}
-
-.tabRight {
-  border-top-right-radius: 8px;
-}
-
-.tab {
-  border: 2px solid var(--blue3);
-  padding: 4px 0;
-  background-color: var(--blue3);
-  color: var(--blue12);
-  width: 50%;
-}
-
-.tabActive,
-.tabContent {
-  background-color: var(--blue5);
-}
-@media only screen and (max-width: 550px) {
-  .tabs,
-  .tabContent {
-    width: 75%;
-  }
-}
diff --git a/client/src/routes/Home/Home.tsx b/client/src/routes/Home/Home.tsx
deleted file mode 100644
index 4a45eb2..0000000
--- a/client/src/routes/Home/Home.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { FormEvent, useContext, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-import styles from "./Home.module.css";
-
-import { setGuestSession } from "../../utils/auth";
-import { SessionContext } from "../../context/session";
-import { createGame, findGame } from "../../utils/games";
-
-const JoinGame = ({ notFound }: { notFound: boolean }) => {
-  return (
-    <fieldset className={styles.tabContent}>
-      {notFound ? <span className={styles.gameNotFound}>Game not found.</span> : ""}
-      <label className={styles.label} htmlFor="code">
-        Invite code
-      </label>
-      <input className={styles.input} type="text" id="code" name="code" required />
-      <button type="submit" className={styles.submit}>
-        Join Game
-      </button>
-    </fieldset>
-  );
-};
-
-const CreateGame = () => {
-  return (
-    <fieldset className={styles.tabContent}>
-      <label className={styles.label} htmlFor="side">
-        Starting side
-      </label>
-      <select className={styles.select} name="side" id="side">
-        <option value="random">Random</option>
-        <option value="white">White</option>
-        <option value="black">Black</option>
-      </select>
-      <button type="submit" className={styles.submit}>
-        Create Game
-      </button>
-    </fieldset>
-  );
-};
-
-const Home = () => {
-  const [creatingGame, setCreatingGame] = useState(false);
-  const [gameNotFound, setGameNotFound] = useState(false);
-  const session = useContext(SessionContext);
-  const navigate = useNavigate();
-
-  async function handleCreateGame(name: string, side: string) {
-    const user = await setGuestSession(name);
-    if (user) {
-      session?.setUser(user);
-      const game = await createGame(side);
-      if (game) {
-        navigate(`/game/${game.code}`);
-      } else {
-        // TODO error handling
-        console.log("handleCreateGame unsuccessful");
-      }
-    }
-  }
-
-  async function handleJoinGame(name: string, code: string) {
-    const user = await setGuestSession(name);
-    if (user) {
-      session?.setUser(user);
-      if (code.startsWith("http") || code.startsWith("ches.su")) {
-        code = new URL(code).pathname.split("/")[2];
-      }
-      const game = await findGame(code);
-      if (game) {
-        navigate(`/game/${game.code}`);
-      } else {
-        // TODO error handling
-        setGameNotFound(true);
-      }
-    }
-  }
-
-  function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    const target = e.target as HTMLFormElement;
-
-    const playerName = (target.elements.namedItem("name") as HTMLInputElement).value;
-
-    if (!playerName) return;
-
-    if (creatingGame) {
-      const startingSide = (target.elements.namedItem("side") as HTMLSelectElement).value;
-      handleCreateGame(playerName, startingSide);
-    } else {
-      const gameCode = (target.elements.namedItem("code") as HTMLInputElement).value;
-      if (!gameCode) return;
-      handleJoinGame(playerName, gameCode);
-    }
-  }
-
-  return (
-    <form className={styles.home} onSubmit={handleSubmit}>
-      <fieldset className={styles.name}>
-        <label className={styles.label} htmlFor="name">
-          Display name
-        </label>
-        <input
-          className={styles.input}
-          type="text"
-          id="name"
-          name="name"
-          pattern="[a-zA-Z0-9_-]+"
-          title="_ - and alphanumeric characters only"
-          defaultValue={session?.user.name}
-          required
-        />
-      </fieldset>
-      <div className={styles.tabs}>
-        <button
-          type="button"
-          className={`${styles.tab} ${styles.tabLeft} ${creatingGame ? "" : styles.tabActive}`}
-          onClick={() => {
-            setCreatingGame(false);
-            setGameNotFound(false);
-          }}
-        >
-          Join
-        </button>
-        <button
-          type="button"
-          className={`${styles.tab} ${styles.tabRight} ${creatingGame ? styles.tabActive : ""}`}
-          onClick={() => setCreatingGame(true)}
-        >
-          Create
-        </button>
-      </div>
-      {creatingGame ? <CreateGame /> : <JoinGame notFound={gameNotFound} />}
-    </form>
-  );
-};
-
-export default Home;
diff --git a/client/src/routes/NotFound/NotFound.tsx b/client/src/routes/NotFound/NotFound.tsx
deleted file mode 100644
index 3bc685b..0000000
--- a/client/src/routes/NotFound/NotFound.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const NotFound = () => {
-  return <div>Error 404: page not found</div>;
-};
-
-export default NotFound;
diff --git a/client/src/routes/ProtectedRoutes.tsx b/client/src/routes/ProtectedRoutes.tsx
deleted file mode 100644
index 6ca914f..0000000
--- a/client/src/routes/ProtectedRoutes.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useContext } from "react";
-import { Outlet } from "react-router-dom";
-import Auth from "../components/Auth/Auth";
-import { SessionContext } from "../context/session";
-
-const ProtectedRoutes = () => {
-  const session = useContext(SessionContext);
-
-  return session && session?.user.id ? <Outlet /> : <Auth />;
-};
-
-export default ProtectedRoutes;
diff --git a/client/src/utils/auth.ts b/client/src/utils/auth.ts
deleted file mode 100644
index d66188a..0000000
--- a/client/src/utils/auth.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { User } from "@types";
-import { apiUrl } from "../config/config";
-
-export const fetchSession = async () => {
-    const res = await fetch(`${apiUrl}/v1/auth`, {
-        credentials: "include"
-    });
-
-    if (res.status === 200) {
-        const user: User = await res.json();
-        return user;
-    }
-};
-
-export const setGuestSession = async (name: string) => {
-    const res = await fetch(`${apiUrl}/v1/auth/guest`, {
-        method: "POST",
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ name })
-    });
-    if (res.status === 201) {
-        const user: User = await res.json();
-        return user;
-    }
-};
diff --git a/client/src/utils/games.ts b/client/src/utils/games.ts
deleted file mode 100644
index 25292d3..0000000
--- a/client/src/utils/games.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Game } from "@types";
-import { apiUrl } from "../config/config";
-
-export const createGame = async (side: string) => {
-    const res = await fetch(`${apiUrl}/v1/games`, {
-        method: "POST",
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ side })
-    });
-
-    const game: Game | undefined = await res.json();
-    return game;
-};
-
-export const findGame = async (code: string) => {
-    const res = await fetch(`${apiUrl}/v1/games`);
-    const games = await res.json();
-    const game: Game | undefined = games.find((g: Game) => g.code === code);
-
-    return game;
-};
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/client/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 5e88004..20f8a38 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,28 +1,22 @@
 {
-    "compilerOptions": {
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "paths": {
-            "@types": ["../types/"]
-        }
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
     },
-    "include": ["src"],
-    "references": [
-        {
-            "path": "./tsconfig.node.json"
-        }
-    ]
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
 }
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
deleted file mode 100644
index 13b35d0..0000000
--- a/client/tsconfig.node.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "allowSyntheticDefaultImports": true
-    },
-    "include": ["vite.config.ts"]
-}
diff --git a/client/vercel.json b/client/vercel.json
deleted file mode 100644
index 9e940b3..0000000
--- a/client/vercel.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "rewrites": [{ "source": "/(.*)", "destination": "/" }]
-}
diff --git a/client/vite.config.ts b/client/vite.config.ts
deleted file mode 100644
index c60c308..0000000
--- a/client/vite.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [react()]
-});
diff --git a/package.json b/package.json
index 6e8d4b2..b646c8c 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,28 @@
 {
     "name": "chessu",
+    "private": "true",
     "author": "nizewn",
     "license": "MIT",
+    "workspaces": [
+        "client",
+        "server",
+        "types"
+    ],
     "scripts": {
-        "dev": "concurrently \"cd server && npm run dev\" \"cd client && npm run dev\"",
-        "react-dev": "cd client && npm run dev",
-        "install": "(cd client && npm install) & (cd server && npm install)",
-        "build:client": "cd client && npm run build",
-        "build:server": "cd server && npm run build",
-        "server": "cd server && npm start",
+        "dev": "concurrently \"npm run dev -w client\" \"npm run dev -w server\"",
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
-        "format:check": "prettier --check .",
-        "format:write": "prettier --write ."
+        "format": "prettier --write ."
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.48.1",
-        "@typescript-eslint/parser": "^5.48.1",
+        "@remix-run/eslint-config": "^1.12.0",
         "concurrently": "^7.6.0",
-        "eslint": "^8.32.0",
+        "eslint": "^8.33.0",
         "eslint-config-prettier": "^8.6.0",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.32.0",
-        "prettier": "^2.8.3"
+        "prettier": "^2.8.3",
+        "prettier-plugin-tailwindcss": "^0.2.2"
+    },
+    "engines": {
+        "node": ">=18"
     }
 }
diff --git a/server/package.json b/server/package.json
index e42f835..ac1817c 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,29 +1,36 @@
 {
+    "name": "@chessu/server",
+    "private": true,
     "main": "./dist/server/src/server.js",
+    "type": "module",
     "scripts": {
-        "start": "node ./dist/server/src/server.js",
+        "start": "node ./dist/server.js",
         "build": "tsc",
-        "dev": "ts-node-dev src/server.ts"
+        "dev": "node --loader ts-node/esm --watch src/server.ts"
     },
     "dependencies": {
-        "chess.js": "^1.0.0-beta.1",
+        "chess.js": "^1.0.0-beta.3",
         "connect-pg-simple": "^8.0.0",
         "cors": "^2.8.5",
         "dotenv": "^16.0.3",
         "express": "^4.18.2",
         "express-session": "^1.17.3",
-        "nanoid": "^3.3.4",
-        "pg": "^8.8.0",
+        "nanoid": "^4.0.0",
+        "pg": "^8.9.0",
         "socket.io": "^4.5.4",
         "xss": "^1.0.14"
     },
     "devDependencies": {
+        "@chessu/types": "*",
         "@types/connect-pg-simple": "^7.0.0",
-        "@types/express": "^4.17.15",
+        "@types/express": "^4.17.17",
         "@types/express-session": "^1.17.5",
         "@types/node": "^18.11.18",
         "@types/pg": "^8.6.6",
-        "ts-node-dev": "^2.0.0",
-        "typescript": "^4.9.4"
+        "ts-node": "^10.9.1",
+        "typescript": "^4.9.5"
+    },
+    "engines": {
+        "node": ">=18"
     }
 }
diff --git a/server/src/controllers/auth.controller.ts b/server/src/controllers/auth.controller.ts
index cbab5b8..1690ff4 100644
--- a/server/src/controllers/auth.controller.ts
+++ b/server/src/controllers/auth.controller.ts
@@ -1,5 +1,5 @@
 import type { Request, Response } from "express";
-import type { User } from "@types";
+import type { User } from "@chessu/types";
 import xss from "xss";
 
 export const getCurrentSession = async (req: Request, res: Response) => {
diff --git a/server/src/controllers/games.controller.ts b/server/src/controllers/games.controller.ts
index 2549bda..9d34288 100644
--- a/server/src/controllers/games.controller.ts
+++ b/server/src/controllers/games.controller.ts
@@ -1,30 +1,28 @@
 import type { Request, Response } from "express";
-import { activeGames } from "../db/models/game.model";
-import type { Game, User } from "@types";
+import { activeGames } from "../db/models/game.model.js";
+import type { Game, User } from "@chessu/types";
 import { nanoid } from "nanoid";
 
 export const getActiveGames = async (req: Request, res: Response) => {
     try {
         //if (!req.query || !req.query.code) {
-        res.status(200).json(activeGames);
+        res.status(200).json(activeGames.filter((g) => !g.unlisted));
         //}
 
-        /*
-        // todo: if code query is URL, convert to code (or do it on client side?)
-        const code =
-            (req.query.code as string).startsWith("http") ||
-            (req.query.code as string).startsWith("ches.su")
-                ? path.posix.basename(url.parse(req.query.code as string).pathname as string)
-                : req.query.code;
+        // const code =
+        //     (req.query.code as string).startsWith("http") ||
+        //     (req.query.code as string).startsWith("ches.su")
+        //         ? path.posix.basename(url.parse(req.query.code as string).pathname as string)
+        //         : req.query.code;
 
-        console.log(code);
-        const game = activeGames.find((g) => g.code === code);
+        // console.log(code);
+        // const game = activeGames.find((g) => g.code === code);
 
-        if (!game) {
-            res.status(404).end();
-        } else {
-            res.status(200).json(game);
-        }*/
+        // if (!game) {
+        //     res.status(404).end();
+        // } else {
+        //     res.status(200).json(game);
+        // }
     } catch (err: unknown) {
         console.log(err);
         res.status(500).end();
@@ -40,9 +38,10 @@ export const createGame = async (req: Request, res: Response) => {
             return;
         }
         const user: User = req.session.user;
+        const unlisted: boolean = req.body.unlisted ?? false;
         const game: Game = {
             code: nanoid(6),
-            open: true,
+            unlisted,
             host: user
         };
         if (req.body.side === "white") {
diff --git a/server/src/db/index.ts b/server/src/db/index.ts
index d41a907..40f6898 100644
--- a/server/src/db/index.ts
+++ b/server/src/db/index.ts
@@ -1,3 +1,3 @@
-import { Pool } from "pg";
+import pg from "pg";
 
-export const db = new Pool();
+export const db = new pg.Pool();
diff --git a/server/src/db/models/game.model.ts b/server/src/db/models/game.model.ts
index f04799e..1aabe77 100644
--- a/server/src/db/models/game.model.ts
+++ b/server/src/db/models/game.model.ts
@@ -1,5 +1,5 @@
-import { db } from "..";
-import { Game } from "@types";
+import { db } from "../index.js";
+import type { Game } from "@chessu/types";
 
 export const activeGames: Array<Game> = [];
 
diff --git a/server/src/db/models/user.model.ts b/server/src/db/models/user.model.ts
index 8b96a04..a7ec173 100644
--- a/server/src/db/models/user.model.ts
+++ b/server/src/db/models/user.model.ts
@@ -1,5 +1,5 @@
-import { db } from "..";
-import type { User } from "@types";
+import { db } from "../index.js";
+import type { User } from "@chessu/types";
 
 const create = async (user: User, password: string) => {
     if (user.name === "Guest" || user.email === undefined) {
diff --git a/server/src/middleware/session.ts b/server/src/middleware/session.ts
index cf9c7c2..53c5581 100644
--- a/server/src/middleware/session.ts
+++ b/server/src/middleware/session.ts
@@ -1,11 +1,12 @@
 import { nanoid } from "nanoid";
-
-import session, { Session } from "express-session";
+import type { Session } from "express-session";
+import session from "express-session";
 import PGSimple from "connect-pg-simple";
-import { db } from "../db";
+import { db } from "../db/index.js";
+import type { User } from "@chessu/types";
+
 const PGSession = PGSimple(session);
 
-import type { User } from "@types";
 declare module "express-session" {
     interface SessionData {
         user: User;
diff --git a/server/src/routes/auth.route.ts b/server/src/routes/auth.route.ts
index b0d4df7..11aa1dc 100644
--- a/server/src/routes/auth.route.ts
+++ b/server/src/routes/auth.route.ts
@@ -1,7 +1,7 @@
 import { Router } from "express";
-const router = Router();
+import * as controller from "../controllers/auth.controller.js";
 
-import * as controller from "../controllers/auth.controller";
+const router = Router();
 
 router.route("/").get(controller.getCurrentSession);
 
diff --git a/server/src/routes/games.route.ts b/server/src/routes/games.route.ts
index d9d1211..a912f8c 100644
--- a/server/src/routes/games.route.ts
+++ b/server/src/routes/games.route.ts
@@ -1,7 +1,7 @@
 import { Router } from "express";
-const router = Router();
+import * as controller from "../controllers/games.controller.js";
 
-import * as controller from "../controllers/games.controller";
+const router = Router();
 
 router.route("/").get(controller.getActiveGames).post(controller.createGame);
 
diff --git a/server/src/routes/index.ts b/server/src/routes/index.ts
index 833701a..51ebefc 100644
--- a/server/src/routes/index.ts
+++ b/server/src/routes/index.ts
@@ -1,8 +1,8 @@
 import { Router } from "express";
-const router = Router();
+import games from "./games.route.js";
+import auth from "./auth.route.js";
 
-import games from "./games.route";
-import auth from "./auth.route";
+const router = Router();
 
 router.use("/games", games);
 router.use("/auth", auth);
diff --git a/server/src/server.ts b/server/src/server.ts
index b16b446..0108e6e 100644
--- a/server/src/server.ts
+++ b/server/src/server.ts
@@ -1,15 +1,15 @@
 import "dotenv/config";
 import cors from "cors";
-const corsConfig = { origin: "https://ches.su", credentials: true };
-
-import express, { Request, Response, NextFunction } from "express";
+import type { Request, Response, NextFunction } from "express";
+import express from "express";
 import { createServer } from "http";
-import session from "./middleware/session";
+import session from "./middleware/session.js";
 import { Server } from "socket.io";
-import { init as initSocket } from "./socket";
-import { db } from "./db";
+import { init as initSocket } from "./socket/index.js";
+import { db } from "./db/index.js";
+import routes from "./routes/index.js";
 
-import routes from "./routes";
+const corsConfig = { origin: "https://ches.su", credentials: true };
 
 const app = express();
 const server = createServer(app);
diff --git a/server/src/socket/game.socket.ts b/server/src/socket/game.socket.ts
index 428aa30..f72a773 100644
--- a/server/src/socket/game.socket.ts
+++ b/server/src/socket/game.socket.ts
@@ -1,7 +1,7 @@
-import { activeGames } from "../db/models/game.model";
+import { activeGames } from "../db/models/game.model.js";
 import type { Socket } from "socket.io";
 import { Chess } from "chess.js";
-import { io } from "../server";
+import { io } from "../server.js";
 
 export async function joinLobby(this: Socket, gameCode: string) {
     const game = activeGames.find((g) => g.code === gameCode);
diff --git a/server/src/socket/index.ts b/server/src/socket/index.ts
index 2e449fd..81ef55e 100644
--- a/server/src/socket/index.ts
+++ b/server/src/socket/index.ts
@@ -1,6 +1,13 @@
 import type { Socket } from "socket.io";
-import { io } from "../server";
-import { joinLobby, leaveLobby, getLatestGame, sendMove, joinAsPlayer, chat } from "./game.socket";
+import { io } from "../server.js";
+import {
+    joinLobby,
+    leaveLobby,
+    getLatestGame,
+    sendMove,
+    joinAsPlayer,
+    chat
+} from "./game.socket.js";
 
 const socketConnect = (socket: Socket) => {
     const req = socket.request;
diff --git a/server/tsconfig.json b/server/tsconfig.json
index 90ae472..8dd616e 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,10 +1,8 @@
 {
     "compilerOptions": {
         "target": "ES2021",
-        "module": "commonjs",
-        "paths": {
-            "@types": ["../types/"]
-        },
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
         "outDir": "./dist",
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
diff --git a/types/index.ts b/types/index.d.ts
similarity index 93%
rename from types/index.ts
rename to types/index.d.ts
index 022cf0e..2daf43a 100644
--- a/types/index.ts
+++ b/types/index.d.ts
@@ -6,7 +6,7 @@ export interface Game {
     winner?: "white" | "black" | "draw";
     host?: User;
     code?: string;
-    open?: boolean;
+    unlisted?: boolean;
     timeout?: number;
     observers?: User[];
 }
diff --git a/types/package.json b/types/package.json
new file mode 100644
index 0000000..e26cbb5
--- /dev/null
+++ b/types/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@chessu/types",
+    "private": "true",
+    "version": "0.0.0"
+}
