diff --git a/packages/api-server/src/auth/contest.auth.ts b/packages/api-server/src/auth/contest.auth.ts
index a8b8f674..88882499 100644
--- a/packages/api-server/src/auth/contest.auth.ts
+++ b/packages/api-server/src/auth/contest.auth.ts
@@ -33,6 +33,16 @@ export async function contestBegan (request: FastifyRequest, reply: FastifyReply
   }
 }
 
+export async function contestEnded (request: FastifyRequest, reply: FastifyReply) {
+  const contestId = requestParameter(request, 'contestId')
+
+  const contest = await fetchContest({ contestId })
+  const now = new Date()
+  if ((new Date(contest.endTime)).getTime() > now.getTime()) {
+    throw new ForbiddenError('Contest has not ended')
+  }
+}
+
 export async function contestNotBegan (request: FastifyRequest, reply: FastifyReply) {
   const contestId = requestParameter(request, 'contestId')
 
diff --git a/packages/api-server/src/hooks/contest.hooks.ts b/packages/api-server/src/hooks/contest.hooks.ts
index d1b50a09..888ce2e1 100644
--- a/packages/api-server/src/hooks/contest.hooks.ts
+++ b/packages/api-server/src/hooks/contest.hooks.ts
@@ -1,4 +1,4 @@
-import { type FastifyRequest, type FastifyReply } from 'fastify'
+import { type FastifyRequest, type FastifyReply } from 'fastify' /*=*/
 import { fetchContest } from '../services/contest.services.js'
 import { requestParameter } from '../utils/auth.utils.js'
 import { contestIdByPath } from '../services/path.services.js'
@@ -8,6 +8,7 @@ import { contestIdByPath } from '../services/path.services.js'
  * - Request.params must have contest ID.
  */
 export async function contestInfoHook (request: FastifyRequest, reply: FastifyReply): Promise<void> {
+
   const contestId = requestParameter(request, 'contestId')
   try {
     requestParameter(request, 'domainId')
diff --git a/packages/api-server/src/routes/v1/contest.routes.ts b/packages/api-server/src/routes/v1/contest.routes.ts
index e91fbda1..e41e9932 100644
--- a/packages/api-server/src/routes/v1/contest.routes.ts
+++ b/packages/api-server/src/routes/v1/contest.routes.ts
@@ -26,6 +26,7 @@ import {
 } from 'http-errors-enhanced'
 import {
   contestBegan,
+  contestEnded,
   contestNotBegan,
   contestPublished,
   registeredForContest,
@@ -44,7 +45,9 @@ import {
   removeProblemFromContest,
   syncProblemToContest,
   updateContest,
-  publishContest
+  publishContest,
+  fetchDomainContests,
+  fetchPublishedContests
 } from '../../services/contest.services.js'
 import {
   completeTeamInvitation,
@@ -85,7 +88,8 @@ async function contestProblemRoutes (problemRoutes: FastifyTypeBox): Promise<voi
       onRequest: [userAuthHook, problemRoutes.auth([
         [hasDomainPrivilege(['contest.read'])], // Domain scope
         [hasContestPrivilege(['read'])], // Contest privilege
-        [registeredForContest, contestBegan] // Regular participant
+        [registeredForContest, contestBegan], // Regular participant
+        [contestEnded] // Past contest
       ]) as any]
     },
     async (request, reply) => {
@@ -111,7 +115,8 @@ async function contestProblemRoutes (problemRoutes: FastifyTypeBox): Promise<voi
       onRequest: [userAuthHook, problemRoutes.auth([
         [hasDomainPrivilege(['contest.read'])], // Domain scope
         [hasContestPrivilege(['read'])], // Contest privilege
-        [registeredForContest, contestBegan] // Regular participant
+        [registeredForContest, contestBegan], // Regular participant
+        [contestEnded] // Past contest
       ]) as any]
     },
     async (request, reply) => {
@@ -513,20 +518,22 @@ async function contestTeamRoutes (teamRoutes: FastifyTypeBox): Promise<void> {
 }
 
 async function contestRanklistRoutes (ranklistRoutes: FastifyTypeBox): Promise<void> {
-  ranklistRoutes.addHook('onRequest', contestInfoHook)
   ranklistRoutes.get(
     '/',
     {
       schema: {
         params: Type.Object({ contestId: Type.String() }),
         response: {
-          200: Type.Array(Type.Intersect([TeamScoreSchema, Type.Object({name: Type.String()})])),
+          200: Type.Object({
+            ranklist: Type.Array(Type.Intersect([TeamScoreSchema, Type.Object({name: Type.String()})])),
+            problems: Type.Array(Type.Object({ id: Type.String(), name: Type.String() })) 
+          }),
           400: badRequestSchema,
           403: forbiddenSchema,
           404: notFoundSchema
         }
       },
-      onRequest: [ranklistRoutes.auth([
+      onRequest: [contestInfoHook, ranklistRoutes.auth([
         [contestBegan]
       ]) as any]
     },
@@ -534,17 +541,39 @@ async function contestRanklistRoutes (ranklistRoutes: FastifyTypeBox): Promise<v
     async (request, reply) => {
       const { contestId } = request.params
       const ranklist = await fetchContestRanklist({ contestId })
-      const _ranklist = await Promise.all(ranklist.map(async team => {
+      const ranklistResolved = await Promise.all(ranklist.map(async team => {
         const { name } = await fetchTeam({ contestId: team.contestId, teamId: team.id });
         return { ...team, name };
       }));
+
+      const { problems } = await fetchContestProblemList({ contestId });
       
-      return await reply.status(200).send(_ranklist)
+      return await reply.status(200).send({ problems, ranklist: ranklistResolved });
     }
   )
 }
 
 export async function contestRoutes (routes: FastifyTypeBox): Promise<void> {
+
+  /* get published contests */
+  routes.get(
+    '/',
+    {
+      schema: {
+        response: {
+          200: Type.Array(ContestSchema),
+          400: badRequestSchema,
+          401: unauthorizedSchema,
+          403: forbiddenSchema,
+          404: notFoundSchema
+        }
+      },
+    },
+    async (request, reply) => {
+      const contests = await fetchPublishedContests({limit: 20}); 
+      return await reply.status(200).send(contests)
+    })
+
   routes.get(
     '/:contestId',
     {
@@ -596,6 +625,39 @@ export async function contestRoutes (routes: FastifyTypeBox): Promise<void> {
       return await reply.status(200).send(status)
     })
 
+  routes.get(
+    '/:contestId/submissions',
+    {
+      schema: {
+        params: Type.Object({ contestId: Type.String() }),
+        response: {
+          200: Type.Array(SubmissionSchema),
+          400: badRequestSchema,
+          401: unauthorizedSchema,
+          403: forbiddenSchema,
+          404: notFoundSchema
+        }
+      },
+      onRequest: [contestInfoHook, userAuthHook, routes.auth([
+        [hasDomainPrivilege(['contest.test'])], // Domain testers
+        [hasContestPrivilege(['test'])], // Contest tester
+        [contestRunning, registeredForContest], // Participant
+        [contestEnded] // Past
+      ]) as any // Users
+      ]
+    },
+    async (request, reply) => {
+      
+      if (request.user == null) {
+        throw new UnauthorizedError('User not logged in')
+      }
+      const { contestId } = request.params
+      const query = { contestId, userId: request.user.id }
+      const submissions = await querySubmissions({ query })
+      
+      return await reply.status(200).send(submissions)
+    })
+
   routes.post(
     '/:contestId/publish',
     {
diff --git a/packages/api-server/src/routes/v1/session.routes.ts b/packages/api-server/src/routes/v1/session.routes.ts
index e284f194..d6d4e1bf 100644
--- a/packages/api-server/src/routes/v1/session.routes.ts
+++ b/packages/api-server/src/routes/v1/session.routes.ts
@@ -8,7 +8,7 @@ import { type FastifyTypeBox } from '../../types.js'
 import { badRequestSchema, notFoundSchema, unauthorizedSchema } from 'http-errors-enhanced'
 import { UserLoginSchema, UserPrivateSessionSchema, UserPublicSessionSchema } from '@argoncs/types'
 import { userAuthHook } from '../../hooks/authentication.hooks.js'
-import { requestUserProfile, requestSessionToken } from '../../utils/auth.utils.js'
+import { requestUserProfile, requestSessionToken } from '../../utils/auth.utils.js'/*=*/
 
 export async function userSessionRoutes (userSessionRoutes: FastifyTypeBox): Promise<void> {
   /*
diff --git a/packages/api-server/src/services/cache.services.ts b/packages/api-server/src/services/cache.services.ts
index 7ec833ea..11ba5d78 100644
--- a/packages/api-server/src/services/cache.services.ts
+++ b/packages/api-server/src/services/cache.services.ts
@@ -3,6 +3,11 @@ import { backOff } from 'exponential-backoff'
 import { ServiceUnavailableError } from 'http-errors-enhanced'
 import { json } from 'typia'
 
+/* Try cache
+ * If miss:
+ * Get lock, so caller can set cache, without overlap from another missed caller.
+ * If locked, another missed caller is getting. await for cache hit, since caller will set.
+ */
 export async function fetchCacheUntilLockAcquired<T> ({ key }: { key: string }): Promise<T | null> {
   let cache = await fetchCache<T>({ key })
   if (cache != null) {
@@ -40,8 +45,9 @@ export async function fetchCache<T> ({ key }: { key: string }): Promise<T | null
     if (cache == null || cache === '') {
       return null
     }
-    return json.assertParse(cache)
+    return JSON.parse(cache)
   } catch (err) {
+    console.log(err);
     // TODO: Alert cache failure
     return null
   }
@@ -50,9 +56,10 @@ export async function fetchCache<T> ({ key }: { key: string }): Promise<T | null
 export async function setCache<T> ({ key, data }: { key: string, data: T }): Promise<boolean> {
   try {
     // Add a random jitter to prevent avalanche
-    const status = await cacheRedis.setex(key, 1600 + Math.floor(Math.random() * 400), json.assertStringify<T>(data))
+    const status = await cacheRedis.setex(key, 1600 + Math.floor(Math.random() * 400), JSON.stringify(data))
     return Boolean(status)
   } catch (err) {
+    console.log('set cache err: ', err);
     return false
   }
 }
@@ -61,7 +68,7 @@ export async function deleteCache ({ key }: { key: string }): Promise<void> {
   await cacheRedis.del(key)
 }
 
-export async function acquireLock ({ key }: { key: string }): Promise<boolean> {
+async function acquireLock ({ key }: { key: string }): Promise<boolean> {
   const status = await cacheRedis.setnx(`${key}:lock`, 1)
   if (status !== 1) {
     return false
diff --git a/packages/api-server/src/services/contest.services.ts b/packages/api-server/src/services/contest.services.ts
index ce661bad..9f60f941 100644
--- a/packages/api-server/src/services/contest.services.ts
+++ b/packages/api-server/src/services/contest.services.ts
@@ -29,6 +29,14 @@ export async function createContestSeries ({ newContestSeries, domainId }: { new
   return { seriesId: id }
 }
 
+export async function fetchPublishedContests ({ limit }: { limit: number }): Promise<Contest[]> {
+  const contests = await contestCollection.find({published: true})
+    .limit(limit)
+    .toArray();
+
+  return contests;
+}
+
 export async function fetchAllContestSeries (): Promise<ContestSeries[]> {
   const contestSeries = await contestSeriesCollection.find().toArray()
   return contestSeries
@@ -40,6 +48,7 @@ export async function fetchDomainContestSeries ({ domainId }: { domainId: string
 }
 
 export async function fetchContest ({ contestId }: { contestId: string }): Promise<Contest> {
+
   const cache = await fetchCacheUntilLockAcquired<Contest>({ key: `${CONTEST_CACHE_KEY}:${contestId}` })
   if (cache != null) {
     return cache
@@ -51,7 +60,8 @@ export async function fetchContest ({ contestId }: { contestId: string }): Promi
       throw new NotFoundError('Contest not found')
     }
 
-    await setCache({ key: `${CONTEST_CACHE_KEY}:${contestId}`, data: contest })
+    const good = await setCache({ key: `${CONTEST_CACHE_KEY}:${contestId}`, data: contest })
+    console.log('cache set "', `${CONTEST_CACHE_KEY}:${contestId}`, '": ', good? 'true' : 'false');
     return contest
   } finally {
     await releaseLock({ key: `${CONTEST_CACHE_KEY}:${contestId}` })
diff --git a/packages/api-server/src/services/problem.services.ts b/packages/api-server/src/services/problem.services.ts
index 8eb08551..7f271c1d 100644
--- a/packages/api-server/src/services/problem.services.ts
+++ b/packages/api-server/src/services/problem.services.ts
@@ -1,41 +1,9 @@
 import {
-  type NewProblem,
   type Problem
 } from '@argoncs/types' /*=*/
 import { NotFoundError } from 'http-errors-enhanced'
 import { mongoClient, domainProblemCollection, submissionCollection, uploadSessionCollection } from '@argoncs/common'
-import { testcaseExists } from './testcase.services.js'
 
-import { nanoid } from 'nanoid'
-
-/*
-export async function createDomainProblem ({ newProblem, domainId }: { newProblem: NewProblem, domainId: string }): Promise<{ problemId: string }> {
-  const problemId = nanoid()
-  const problem: Problem = { ...newProblem, id: problemId, domainId }
-  await domainProblemCollection.insertOne(problem)
-  return { problemId }
-}
-*/
-
-/*
-export async function updateDomainProblem ({ problemId, domainId, problem }: { problemId: string, domainId: string, problem: Partial<NewProblem> }): Promise<{ modified: boolean }> {
-  if (problem.testcases != null) {
-    const testcasesVerifyQueue: Array<Promise<void>> = []
-    problem.testcases.forEach((testcase) => {
-      testcasesVerifyQueue.push(testcaseExists({ problemId, filename: testcase.input.name, versionId: testcase.input.versionId }))
-      testcasesVerifyQueue.push(testcaseExists({ problemId, filename: testcase.output.name, versionId: testcase.output.versionId }))
-    })
-    await Promise.all(testcasesVerifyQueue)
-  }
-
-  const { matchedCount, modifiedCount } = await domainProblemCollection.updateOne({ id: problemId, domainId }, { $set: problem })
-  if (matchedCount === 0) {
-    throw new NotFoundError('Problem not found')
-  }
-
-  return { modified: modifiedCount > 0 }
-}
-*/
 
 export async function deleteDomainProblem ({ problemId, domainId }: { problemId: string, domainId: string }): Promise<void> {
   const session = mongoClient.startSession()
diff --git a/packages/api-server/src/start.ts b/packages/api-server/src/start.ts
index 7c799e0f..8b58b239 100644
--- a/packages/api-server/src/start.ts
+++ b/packages/api-server/src/start.ts
@@ -13,7 +13,6 @@ import {
 
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
  
 
@@ -68,7 +67,7 @@ export async function loadFastify (testing = false): Promise<FastifyTypeBox> {
     },
   })
   await app.register(fastifyCors, {
-    origin: [/\.teamscode\.org$/, /\.argoncs\.io$/, 'http://localhost:3000'],
+    origin: [/\.teamscode\.org$/, /\.argoncs\.io$/, /localhost/],
     allowedHeaders: ['Content-Type', 'Set-Cookie'],
     credentials: true
   })
@@ -97,7 +96,7 @@ export async function loadFastify (testing = false): Promise<FastifyTypeBox> {
 
 
   // Development Clients
-  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
   app.get('/admin', async function handler (_, reply) {
     const fd = await fs.open(path.join(__dirname, '../../src/admin.html'))
     const stream = fd.createReadStream()
diff --git a/packages/client/.gitignore b/packages/client/.gitignore
new file mode 100644
index 00000000..dd87e2d7
--- /dev/null
+++ b/packages/client/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/packages/client/build.js b/packages/client/build.js
new file mode 100644
index 00000000..b63b8353
--- /dev/null
+++ b/packages/client/build.js
@@ -0,0 +1,74 @@
+import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { join, dirname } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const templatePath = join(__dirname, 'src/app.html');
+const buildDir = join(__dirname, 'build');
+const srcDir = join(__dirname, 'src');
+const pagesDir = join(__dirname, 'src/pages');
+
+console.log('template: ', templatePath)
+console.log('build dir: ', buildDir)
+console.log('source dir: ', srcDir)
+
+console.log('building...')
+
+// make & clear build
+try {
+  await fs.stat(buildDir) 
+
+  console.log('deleting existing build')
+  await fs.rm(buildDir, { recursive: true })
+
+} catch (err) {
+  console.log(err)
+}
+await fs.mkdir(buildDir)
+console.log('build directory good')
+
+// get template
+let app;
+try {
+  app = await fs.readFile(templatePath, {encoding: 'utf8'});
+} catch (err) {
+  console.log(`could not read ${templatePath}: `, err)
+  process.exit(1);
+}
+
+// find template location
+const keywords = [...app.matchAll(/<\s*content\s*\/\s*>/g)].length;
+if (keywords !== 1) {
+  console.log(keywords == 0 ? 'no <content/> found' : 'found multiple <content/> tags');
+  process.exit(1);
+}
+
+// insert page into template at <content/>
+function template(page) {
+
+  return app.replace(/<\s*content\s*\/\s*>/g, page);
+}
+
+// get pages async
+const files = await fs.readdir(pagesDir);
+console.log('detected files ', files);
+
+const promises = files.map(path => 
+  fs.readFile(join(pagesDir, path), {encoding: 'utf8'})
+    .then(async file => 
+    {
+      console.log('templating ', path);
+      const page = template(file)
+      
+      // insert file to directory
+      console.log('adding ', path)
+      await fs.appendFile(join(buildDir, path), page)
+    })
+  )
+
+Promise.all(promises)
+
+console.log('copying dev.html')
+await fs.cp(join(srcDir, 'dev.html'), join(buildDir, 'dev.html'));
+
+console.log('built.')
diff --git a/packages/client/package.json b/packages/client/package.json
new file mode 100644
index 00000000..592c1365
--- /dev/null
+++ b/packages/client/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@argoncs/client",
+  "version": "0.0.1",
+  "license": "AGPL-3.0",
+  "main": "./src/start.js",
+  "repository": "github:chenhongqiao/argon",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "yarn build && node start.js",
+    "build": "node build.js && yarn style",
+    "style": "yarn run tailwindcss -i ./styles/app.css -o ./build/output.css"
+  },
+  "dependencies": {
+    "@fastify/static": "^8.0.2",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "autoprefixer": "^10.4.20",
+    "fastify": "^5.0.0",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.14"
+  }
+}
diff --git a/packages/client/postcss.config.js b/packages/client/postcss.config.js
new file mode 100644
index 00000000..6a0f68c4
--- /dev/null
+++ b/packages/client/postcss.config.js
@@ -0,0 +1,8 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
diff --git a/packages/client/src/app.html b/packages/client/src/app.html
new file mode 100644
index 00000000..5f12839c
--- /dev/null
+++ b/packages/client/src/app.html
@@ -0,0 +1,156 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="static/output.css">
+
+    <!-- MathJax -->
+    <script>
+window.MathJax = {
+  tex: {
+    loader: {load: ['[tex]/textmacros']},
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)']
+    ],
+    displayMath: [             // start/end delimiter pairs for display math
+      ['$$', '$$'],
+      ['\\[', '\\]']
+    ],
+    processEscapes: true,      // use \$ to produce a literal dollar sign
+    processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
+    processRefs: true,         // process \ref{...} outside of math mode
+    packages: {'[+]': ['textmacros']},
+  }
+};
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.min.js" integrity="sha512-NIDAOLuPuewIzUrGoK5fXxowwGDm0DFJhI5TJPyTP6MeY2hUcCSKJr54fecQTEZ8kxxEO2NBrILQSUl4qZ37FA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+    <!-- Library -->
+    <script>
+const src = `http://localhost:8000`;
+const betterFetch = (url, options, { failable } = {}) => 
+  fetch(src + url, {
+    ...options,
+    credentials: 'include'
+  })
+    .then(async res => {
+      if (res.status >= 200 && res.status < 300) {
+        const contentType = res.headers.get("content-type");
+        return (!contentType || !contentType.includes("application/json")) ? 
+          res : res.json()
+      }
+      throw await res.json()
+    })
+    .catch(err => {
+      if (!failable) {
+        const msg = `Got ${err.statusCode}: ${err.error}, ${err.message}`;
+        console.error(msg);
+        alert(msg);
+      }
+      throw err
+    })
+
+let typesetting = false;
+const trymathjax = async _ => {
+  if (typesetting) return false;
+  typesetting = true;
+  await MathJax.typeset();
+  typesetting = false;
+  return true;
+}
+
+    </script>
+  </head>
+
+  <nav class='bg-white shadow'>
+    <div class='px-24 py-4'>
+      <div class='flex gap-8 my-4'>
+        <div class='text-xl'>
+          CPI
+        </div>
+        <div class='flex-grow'></div>
+        <a href='/login' class='hide-when-logged-in'>
+          login
+        </a>
+
+        <!-- dynamically un-hidden when logged in -->
+        <div class='show-when-logged-in hidden' id='nav-username'>username</div>
+        <a class='show-when-logged-in hidden' id='nav-logout'>logout</a>
+      </div>
+
+      <div class='flex gap-8'>
+        <a href='/contests'>
+          Contests
+        </a>
+        <a href='/teams'>
+          Teams
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Nav bar interactivity -->
+  <script>
+//Exposed
+let g_user;
+
+const getSession = async _ => 
+{
+  const res = await betterFetch('/v1/current-session')
+
+  // not logged in
+  if (!res) return
+
+  // get user
+  const { userId } = res;
+  try {
+    g_user = await betterFetch(`/v1/users/${userId}/profiles/private`)
+  } catch (e) {
+    console.error('session found, but failed to fetch profile. assuming not logged in')
+    return
+  }
+
+  // show elements
+  document.querySelectorAll('.show-when-logged-in')
+    .forEach(elem => {
+      elem.classList.remove('hidden')
+    })
+
+  // hide elements
+  document.querySelectorAll('.hide-when-logged-in')
+    .forEach(elem => {
+      elem.classList.add('hidden')
+    })
+
+  document.getElementById('nav-username').innerText = g_user.username + '|' + g_user.email;
+}
+
+document.getElementById('nav-logout').onclick = async _ => {
+
+  await betterFetch(`/v1/current-session`, { method: 'DELETE' })
+
+  window.location.reload();
+}
+
+afterNavBar = [];
+const awaitNavBar = fn => {
+  afterNavBar.push(fn)
+}
+
+const fn = async _ => {
+  await getSession()
+
+  for (const fn of afterNavBar) 
+    fn();
+}
+
+fn();
+  </script>
+
+
+  <div class='max-w-screen-md h-full m-auto mt-12'>
+    <content/>
+  </div>
+
+</html>
+
diff --git a/packages/client/src/dev.html b/packages/client/src/dev.html
new file mode 100644
index 00000000..a637ee50
--- /dev/null
+++ b/packages/client/src/dev.html
@@ -0,0 +1,419 @@
+<head>
+  <script>
+    window.MathJax = {
+      tex: {
+        loader: {load: ['[tex]/textmacros']},
+        inlineMath: [
+          ['$', '$'],
+          ['\\(', '\\)']
+        ],
+        displayMath: [             // start/end delimiter pairs for display math
+          ['$$', '$$'],
+          ['\\[', '\\]']
+        ],
+        processEscapes: true,      // use \$ to produce a literal dollar sign
+        processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
+        processRefs: true,         // process \ref{...} outside of math mode
+        packages: {'[+]': ['textmacros']},
+      }
+    };
+  </script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <style> 
+    body{
+      margin:40px auto;max-width:700px;line-height:1.6;font-size:18px;color:#444;padding:0 10px;
+      font-family: 'Ariel'
+    }
+    b{font-weight: 900}
+    h1,h2,h3{line-height:1.2}
+    input,div,button { margin: 0.2rem }
+    input {
+      padding: 5px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #24292e;
+      vertical-align: middle;
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      border: 1px solid #e1e4e8;
+      border-radius: 6px;
+      outline: none;
+      box-shadow: rgba(225, 228, 232, 0.2) 0px 1px 0px 0px inset;
+      :focus{
+          border-color: #0366d6;
+          outline: none;
+          box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
+      }
+    }
+    button {
+      display: inline-block;
+      outline: 0;
+      cursor: pointer;
+      padding: 5px 16px;
+      font-size: 14px;
+      line-height: 20px;
+      vertical-align: middle;
+      border: 1px solid;
+      border-radius: 6px;
+      color: #24292e;
+      background-color: #fafbfc;
+      border-color: #1b1f2326;
+      box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      :hover {
+          background-color: #f3f4f6;
+          border-color: #1b1f2326;
+          transition-duration: 0.1s;
+      }
+
+  </style>
+</head>
+
+<h1> Argon Client </h1>
+
+<input type="text" id="name" placeholder="name" value="alvin"> <br>
+<input type="text" id="email" placeholder="email"> <br>
+<input type="text" id="username" placeholder="username" value="alvin"> <br>
+<input type="text" id="password" placeholder="password" value="87654321"> <br>
+<button id="login">login</button>
+<button id="signup">signup</button>
+
+<p>UserID: <b id='userId'>NA</b> </p>
+<p>SessionID: <b id='sessionId'>NA</b> </p>
+
+
+<h2>Contests</h2>
+<button id='contest-get'>get</button> <br>
+<div id='contest-list'> </div>
+
+<h2>Teams</h2>
+<input id='team-name' type='text'> <br>
+<button id='team-make'>make</button> <br>
+<button id='team-get'>get</button> <br>
+<div id='team-list'></div>
+
+<h2>Problems</h2>
+<button id='problem-get'>get</button> <br>
+<div id='problem-list'> </div>
+
+<h2>Submissions</h2>
+<label for="lang">Language:</label>
+<select name="lang" id="submission-lang" value="C++17">
+   <option value="C">C</option>
+   <option value="C++">C++</option>
+   <option value="Python">Python</option>
+</select> <br>
+<input type="file" id="submission-file"> <br>
+<button id='submission-submit'>submit</button> <br>
+<button id='submission-get'>get</button> <br>
+<div id='submission-list'></div>
+
+<h2>Ranklist</h2>
+<button id='ranklist-get'>get</button> <br>
+<div id='ranklist-list'></div>
+
+
+
+<script>
+  let getUserId = _ => undefined;
+
+  const getProblemId = _ => {let e = document.querySelector('input[name="problem-radio"]:checked'); return e ? e.value : undefined;};
+  const getSeriesId = _ => {let e = document.querySelector('input[name="series-radio"]:checked'); return e ? e.value : undefined;};
+  const getContestId = _ => {let e = document.querySelector('input[name="contest-radio"]:checked'); return e ? e.value : undefined;};
+
+  const betterFetch = (url, options) => 
+    fetch("http://localhost:8000" + url, options)
+      .then(async res => {
+        if (res.status >= 200 && res.status < 300) {
+          const contentType = res.headers.get("content-type");
+          return (!contentType || !contentType.includes("application/json")) ? 
+            res : res.json()
+        }
+        throw await res.json()
+      })
+      .catch(err => {
+        const msg = `Got ${err.statusCode}: ${err.error}, ${err.message}`;
+        console.error(msg);
+        alert(msg);
+        throw err
+      })
+
+  let typesetting = false;
+  const trymathjax = async _ => {
+    typesetting = true;
+    await MathJax.typeset();
+    typesetting = false;
+  }
+
+  const mathjax = _ => {
+    if (!typesetting)
+      trymathjax()
+  }
+
+  const formatProblem = problem => 
+  {
+    const {name, constraints, context, inputFormat, outputFormat} = problem;
+    let html = `
+    <div style='text-align: center'>
+    <h3>${name}</h3>
+    time limit / test: ${constraints.time} ms <br>
+    memory limit / test: ${constraints.memory} MB 
+    </div>
+    ${context}<br>
+    <b>Input</b><br>
+    ${inputFormat}<br>
+    <b>Output</b><br>
+    ${outputFormat}<br>`;
+
+    html = html
+      .replaceAll("\\begin{center}", "<p style='text: center'>")
+      .replaceAll("\\end{center}", "</p>")
+      .replaceAll("\\begin{enumerate}", "<ol>")
+      .replaceAll("\\item", "<li>")
+      .replaceAll("\\end{enumerate}", "</ol>")
+      .replaceAll("\\begin{itemize}", "<ul>")
+      .replaceAll("\\item", "<li>")
+      .replaceAll("\\end{itemize}", "</ul>")
+      .replaceAll(/\\t{(.*?)}/g, "<code>$1</code>")
+      .replaceAll(/\\bf{(.*?)}/g, "<b>$1</b>")
+
+    return html;
+  }
+
+  document.getElementById('signup').onclick = async _ => {
+
+    console.log('signup');
+
+    const body = {
+      name: document.getElementById('name').value,
+      username: document.getElementById('username').value,
+      password: document.getElementById('password').value,
+      email:document.getElementById('email').value,
+      year:"2025",
+      school:"Rock High School",
+      country:"USA",
+      region:"Pacific"
+    };
+
+    if (!body.name) return alert('no name');
+    if (!body.email) return alert('no email');
+    if (!body.username) return alert('no username');
+    if (!body.password) return alert('no password');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch('/v1/users/', options) 
+      .then(res => alert("signed up"))
+  }
+
+  document.getElementById('login').onclick = async _ => {
+
+    console.log('login');
+
+    const body = {
+      usernameOrEmail: document.getElementById('username').value,
+      password: document.getElementById('password').value,
+    };
+
+    if (!body.usernameOrEmail) return alert('no username or email');
+    if (!body.password) return alert('no password');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch('/v1/sessions/', options)
+      .then(({userId, sessionId}) => {
+        document.getElementById('userId').innerText = userId;
+        document.getElementById('sessionId').innerText = sessionId;
+        getUserId = () => userId;
+      })
+  }
+
+  document.getElementById('contest-get').onclick = async _ => {
+
+    console.log('contest-get');
+
+    const res = await betterFetch(`/v1/contest-series/`)
+
+    let html = '';
+    for (const { name: series, contests } of res) {
+      for (const id of contests) {
+        const { name, published } = await betterFetch(`/v1/contests/${id}`)
+        
+        html += `
+          <div>
+          <input type='radio' name='contest-radio' value='${id}'>
+          <label for='${id}'><b>${name}</b> from <i>${series}</i> (${published ? 'published' : 'unpublished'}): (<i>${id}</i>)</label>
+          </div>`
+      }
+    }
+    document.getElementById('contest-list').innerHTML = html;
+  }
+
+  document.getElementById('team-make').onclick = async _ => {
+
+    console.log('team-make');
+
+    const body = { name: document.getElementById('team-name').value };
+
+    if (!body.name) return alert('no team name');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch(`/v1/contests/${getContestId()}/teams/`, options)
+      .then(res => alert("team created"));
+  }
+
+  document.getElementById('team-get').onclick = async _ => {
+
+    console.log('team-get');
+
+    if (getUserId() === undefined) 
+      return alert('not logged in');
+
+    let { teams } = await betterFetch(`/v1/users/${getUserId()}/profiles/private`)
+
+    const fetches = Object.entries(teams)
+      .map(([contestId, teamId]) => new Promise(async (res, rej) => 
+      {
+        const team = await fetch(`/v1/contests/${contestId}/teams/${teamId}`)
+          .then(res => res.json())
+          .catch(rej);
+        const { name: contestName } = await fetch(`/v1/contests/${contestId}`)
+          .then(res => res.json())
+          .catch(rej);
+
+        res({ ...team, contestName })
+      }));
+    teams = await Promise.all(fetches);
+    console.log(teams);
+
+    let html = '';
+    for (const { name, contestName, id, contestId, captain, members } of teams) {
+      html += `<div><b>${name}</b>, for: <b>${contestName}</b> (<i>${id}</i>) <ul>`;
+      for (const { name, id } of members) html += `<li><b>${name}</b>: (<i>${id}</i>)</li>`
+      html += '</ul></div>';
+    }
+    document.getElementById('team-list').innerHTML = html;
+  }
+
+  document.getElementById('problem-get').onclick = async _ => {
+
+    console.log('problems-get');
+
+    if (getContestId() === undefined) return alert('no contest selected');
+    
+    const { problems } = await betterFetch(`/v1/contests/${getContestId()}/problems/`)
+
+    let html = '';
+    for (const { name, id } of problems) {
+
+      const problem = await betterFetch(`/v1/contests/${getContestId()}/problems/${id}`);
+
+      const problemHTML = formatProblem(problem);
+      html += ` 
+      <details>
+        <summary>
+          <input type='radio' name='problem-radio' value='${id}'>
+          <label for='${id}'><b>${name}</b> (<i>${id}</i>)</label>
+        </summary>
+        ${problemHTML}
+      </details>`
+    }
+
+    document.getElementById('problem-list').innerHTML = html;
+    mathjax()
+  }
+
+  document.getElementById('submission-submit').onclick = async _ => {
+
+    console.log('submission-submit');
+
+    const file = document.getElementById('submission-file').files[0];
+    if (!file) return alert('no file selected');
+
+    const body = { 
+      language: document.getElementById('submission-lang').value,
+      source: await file.text()
+    };
+
+    if (!body.language) return alert('no language');
+    if (!body.source) return alert('no source, error on reading file');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch(`/v1/contests/${getContestId()}/problems/${getProblemId()}/submissions`, options)
+      .then(res => alert('submitted'))
+  }
+
+  document.getElementById('submission-get').onclick = async _ => {
+
+    console.log('submission-get');
+
+    if (getUserId() === undefined) return alert('not logged in');
+
+    // NOTE: special case. read note in API route.
+    const submissions = await betterFetch(`/v1/users/${getUserId()}/submissions`)
+      .then(res => res.json());
+
+    let html = '';
+    for (const { problemName, problemId, createdAt, status, score, testcases, id, log } of submissions) {
+      html += `<div><b>${problemName}</b> @ ${(new Date(createdAt)).toLocaleString()}: <b>${status}</b> <i>(${id})</i> <b>${score !== undefined ? score : '...'} => <br>`
+
+      if (log) html += `<b style='color: red'>${log}</b><br>`
+      if (status !== 'Graded') continue;
+      if (!testcases) continue;
+      for (const { result } of testcases) {
+        html += `${result.status}`
+        if (result.wallTime)
+          html += `${result.wallTime}ms`
+        html += ` | `
+      }
+      html += `</div>`;
+    }
+
+    document.getElementById('submission-list').innerHTML = html;
+  }
+
+  document.getElementById('ranklist-get').onclick = async _ => {
+
+    console.log('ranklist-get');
+
+    if (getContestId() === undefined) return alert('no contest selected');
+
+    const list = await betterFetch(`/v1/contests/${getContestId()}/ranklist`)
+
+    let html = '';
+    for (const { name, id, totalScore: score } of list) {
+      html += `
+      <div><b>${name}</b> (<i>${id}</i>): ${score}</div>`
+    }
+
+    document.getElementById('ranklist-list').innerHTML = html;
+  }
+</script>
diff --git a/packages/client/src/pages/contest.html b/packages/client/src/pages/contest.html
new file mode 100644
index 00000000..ca814d04
--- /dev/null
+++ b/packages/client/src/pages/contest.html
@@ -0,0 +1,443 @@
+<div id='not-exist-notice' class='hidden italic text-rose-600'> contest does not exist </div>
+
+<div class='flex w-full'>
+<div class='shadow w-1/4 p-4 h-max space-y-2'>
+  <button id='nav-problem-home' class='contest-name font-bold'></button><br>
+  <button id='nav-ranklist'>Ranklist</button><br>
+  <button id='nav-submission'>Submissions</button><br>
+  <hr>
+  
+  <!-- populated dynamically -->
+  <div id='problem-list' class='space-y-2'>
+    <div class='font-bold'>problems</div>
+    <template id='problem-button'>
+      <button id='button'>
+        <span id='name'></span>
+      </button>
+    </template>
+  </div>
+
+  <hr>
+  <button id='nav-announcement'>Announcements</button>
+</div>
+
+<div id='box' class='pl-6 pb-10 w-3/4'>
+
+  <!-- home box -->
+  <div id='home-box'>
+    <h1 class='contest-name'></h1>
+    <p class='contest-desc'></p>
+  </div>
+
+  <!-- submission box -->
+  <div id='submission-box' class='hidden'>
+    <h1>Submissions</h1>
+
+    <table class='table-fixed'>
+      <thead class='spacing-4'>
+        <th>date</th>
+        <th>user</th>
+        <th>problem</th>
+        <th>status</th>
+        <th>score</th>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
+
+  <!-- ranklist box -->
+  <div id='ranklist-box' class='hidden'>
+    <h1>Ranklist</h1>
+
+    <div id='ranklist-list' class='rounded-xl bg-clip-border'>
+      <table class='text-left'>
+        <thead>
+          <th>rank</th>
+          <th>name</th>
+          <th>score</th>
+
+          <!-- problem column template -->
+          <template>
+          <th><span id='name'></span></th>
+          </template>
+        </thead>
+        <tbody></tbody>
+
+        <!-- Ranklist row template -->
+        <template id='ranklist-row-template'>
+        <tr id='row'>
+          <td id='rank' class='font-bold'></td>
+          <td id='name' class='font-bold'></td>
+          <td id='score' class='italic'></td>
+          <template id='problem-score-template'>
+            <td>
+              <span id='status'></span>
+            </td>
+          </template>
+        </tr>
+        </template>
+      </table>
+    </div>
+  </div>
+
+  <!-- announcement -->
+  <div id='announcement-box' class='hidden'>
+    <h1>Announcements</h1>
+    <table class='table-fixed w-full'>
+      <thead>
+        <th>date</th>
+        <th>problem</th>
+        <th>note</th>
+      </thead>
+      <tbody>
+      </tbody>
+
+      <template>
+        <tr>
+          <td id="date"></td>
+          <td id="problem"></td>
+          <td id="note"></td>
+        </tr>
+      </template>
+    </table>
+    <div id='announcement-none-notice' class='w-full text-center italic'>no announcements yet</div>
+  </div>
+
+</div>
+
+
+<!-- Problem page template -->
+<template id='problem-box-template'>
+<div id='problem-box' class='problem-box hidden w-full'>
+  <h1 id='name'></h1>
+
+  time constraint per test <span id='time-constraint'></span> ms<br>
+  memory constraint per test <span id='memory-constraint'></span> MB<br>
+
+  <p id='context'></p>
+
+  <h2>input</h2>
+  <p id='inputFormat'></p>
+
+  <h2>output</h2>
+  <p id='outputFormat'></p>
+
+  <h2>submission</h2>
+  <label for="lang">Language:</label>
+  <select name="lang" id="lang" value="C++17" class='input'>
+     <option value="C++">C++</option>
+     <option value="Python">Python</option>
+  </select> <br>
+  <div id='editor' class='textarea w-full h-72 mt-4'></div>
+    
+  <button id='submit' class='btn'>submit</button>
+
+</div>
+</template>
+
+<!-- Submission row template -->
+<template id='submission-template'>
+<tr id='row'>
+  <td id='date'></td>
+  <td id='user'></td>
+  <td id='problem'></td>
+  <td id='status'></td>
+  <td id='score'></td>
+</tr>
+<tr id='details-row' class='hidden'>
+  <td>
+    testcases:
+    <div id='testcase-list' class='flex gap-2'>
+      <template id='testcase-template'>
+        <div class='border-1 rounded-md p-2'>
+          <span id='status'></span> <br>
+          <span id='time'></span> ms <br>
+          <span id='memory'></span> MB <br>
+        </div>
+      </template>
+    </div>
+  </td>
+</tr>
+</template>
+
+
+</div>
+
+<script>
+
+// Create problem box with problem id in element id
+// hidden in the box
+const makeProblemElement = async (contestId, problemId) => 
+{
+  const { name, context, constraints, inputFormat, outputFormat } =
+    await betterFetch(`/v1/contests/${contestId}/problems/${problemId}`);
+
+  const format = s => 
+    s
+      .replaceAll("\\begin{center}", "<p style='text: center'>")
+      .replaceAll("\\end{center}", "</p>")
+      .replaceAll("\\begin{enumerate}", "<ol>")
+      .replaceAll("\\item", "<li>")
+      .replaceAll("\\end{enumerate}", "</ol>")
+      .replaceAll("\\begin{itemize}", "<ul>")
+      .replaceAll("\\item", "<li>")
+      .replaceAll("\\end{itemize}", "</ul>")
+      .replaceAll(/\\t{(.*?)}/g, "<code>$1</code>")
+      .replaceAll(/\\bf{(.*?)}/g, "<b>$1</b>")
+
+  const e = document.querySelector('#problem-box-template').content.cloneNode(true);
+
+  e.querySelector('#name').innerText = name;
+  e.querySelector('#time-constraint').innerText = constraints.time;
+  e.querySelector('#memory-constraint').innerText = constraints.memory;
+  e.querySelector('#context').innerHTML = format(context);
+  e.querySelector('#inputFormat').innerHTML = format(inputFormat);
+  e.querySelector('#outputFormat').innerHTML = format(outputFormat);
+
+  // submission
+  e.querySelector('#submit').onclick = async _ => 
+  {
+    console.log('submit');
+
+    const editorE = document.querySelector(`#problem-box-${problemId} #editor`);
+    const editor = ace.edit(editorE);
+    const lang = document.querySelector(`#problem-box-${problemId} #lang`);
+
+    const body = { 
+      language: lang.value,
+      source: editor.getValue(), 
+    };
+
+    if (!body.language) return alert('no language');
+    if (!body.source) return alert('no source');
+
+    const options = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch(`/v1/contests/${contestId}/problems/${problemId}/submissions`, options)
+      .then(res => alert('submitted'))
+  }
+  
+  // editor
+  const editor = ace.edit(e.querySelector('#editor'), {
+    mode: "ace/mode/c_cpp",
+    selectionStyle: "text"
+  })
+
+  e.querySelector('#lang').onchange = e => {
+    let mode;
+    if (e.srcElement.value === 'C++') mode = 'c_cpp';
+    if (e.srcElement.value === 'Python') mode = 'python';
+    editor.session.setMode(`ace/mode/${mode}`);
+  }
+
+  // add
+  e.querySelector('#problem-box').id += `-${problemId}`;
+  document.getElementById('box').appendChild(e);
+}
+
+
+
+
+const clearBox = _ => {
+  // hide other boxes
+  for (const e of document.getElementById('box').children)
+    if (!e.classList.contains('hidden'))
+      e.classList.add('hidden')
+
+  return true;
+}
+
+
+
+
+const setup = async _ => {
+  const params = new URLSearchParams(window.location.search);
+
+  // NOTE: If cannot get contest, it doesn't exist yet. notify
+  let contest;
+  try {
+    contest = await betterFetch(`/v1/contests/${params.get('id')}`, {}, { failable: true });
+  } catch (e) {
+    console.log(e);
+    console.log('contest does not exist');
+    document.querySelector('#not-exist-notice').classList.remove('hidden');
+
+    document.querySelector('#nav-ranklist').disabled = true;
+    document.querySelector('#nav-submission').disabled = true;
+    document.querySelector('#nav-announcement').disabled = true;
+    return;
+  }
+
+  // home-box
+  document.querySelectorAll('.contest-name').forEach(e => e.innerText = contest.name)
+  document.querySelectorAll('.contest-desc').forEach(e => e.innerText = contest.description)
+
+  // NOTE: This is first since this is visible even if you are not a participant.
+
+  // ranklist box
+  {
+    const { ranklist, problems } = await betterFetch(`/v1/contests/${contest.id}/ranklist`);
+
+    // ranklist table header
+    for (const problem of problems) {
+      const e = document.querySelector('#ranklist-box thead template').content.cloneNode(true);
+
+      e.querySelector('#name').innerText = problem.name;
+
+      document.querySelector('#ranklist-box thead tr').appendChild(e);
+    }
+
+    // ranklist table body
+    for (const [rank, { name, id, totalScore: score, scores }] of ranklist.entries()) {
+      const e = document.querySelector('#ranklist-row-template').content.cloneNode(true);
+
+      e.querySelector('#rank').innerText = rank;
+      e.querySelector('#name').innerText = name;
+      e.querySelector('#score').innerText = score;
+
+      // problem status
+      for (const problem of problems) {
+        const q = e.querySelector('template').content.cloneNode(true);
+        q.querySelector('td').id = problem.id 
+        q.querySelector('#status').innerText = scores[problem.id] ?? '-';
+
+        e.querySelector('tr').appendChild(q);
+      }
+
+      document.querySelector('#ranklist-box tbody').appendChild(e)
+    }
+  }
+
+  // problem boxes
+  let problems;
+
+  // NOTE: if cannot get problems, the user is not registered. skip problems and submissions
+  try {
+    ({ problems } = await betterFetch(`/v1/contests/${contest.id}/problems/`, {}, { failable: true }))
+  } catch (e) {
+    console.log(e);
+    console.log('user is not a participant. only ranklist will be available')
+
+    document.querySelector('#nav-submission').disabled = true;
+    document.querySelector('#nav-announcement').disabled = true;
+    return;
+  }
+
+  const problemsMap = {};
+  const problemMakePromises = [];
+  for (const problem of problems) 
+  {
+    problemsMap[problem.id] = problem;
+
+    // make button
+    const e = document.querySelector('#problem-button').content.cloneNode(true);
+    e.querySelector('#name').innerText = problem.name;
+    e.querySelector('#button').onclick = _ => 
+      clearBox() && document.getElementById(`problem-box-${problem.id}`).classList.remove('hidden');
+
+    // make box
+    problemMakePromises.push(makeProblemElement(contest.id, problem.id))
+       
+    // append
+    document.getElementById('problem-list').appendChild(e)
+  }
+
+  // Trigger mathjax when all problems are made
+  Promise.all(problemMakePromises)
+    .then(trymathjax)
+    .then(res => {
+      // Mathjax did not run. Typesetting was already triggered. Should not happen
+      if (res == false)
+        console.error('Mathjax did not run. Typesetting was already triggered')
+    })
+
+  // submission box
+  const submissions = await betterFetch(`/v1/contests/${contest.id}/submissions`)
+
+  let html = '';
+  for (const { problemId, createdAt, status, score, testcases, id, log } of submissions) 
+  {
+    const t = document.querySelector('#submission-template').content.cloneNode(true);
+    const e = t.querySelector('#row');
+
+    // row
+    e.querySelector('#date').innerText = (new Date(createdAt)).toLocaleString();
+    e.querySelector('#user').innerText = g_user.name;
+    e.querySelector('#problem').innerText = problemsMap[problemId].name;
+    e.querySelector('#status').innerText = status;
+    e.querySelector('#score').innerText = score === undefined ? '...' : score;
+
+    // details view
+    const d = t.querySelector('#details-row');
+    d.id += `-${id}`
+
+    if (testcases) {
+      for (const { result } of testcases) {
+        const p = t.querySelector('#testcase-template').content.cloneNode(true);
+
+        p.querySelector('#status').innerText = result.status;
+        p.querySelector('#time').innerText = result.wallTime ?? '...'
+        p.querySelector('#memory').innerText = result.memory ?? '...'
+
+        d.querySelector('#testcase-list').appendChild(p);
+      }
+    }
+    
+    // onclick: toggle details
+    e.onclick = _ => {
+      const d = document.getElementById(`details-row-${id}`);
+      if (d.classList.contains('hidden'))
+        d.classList.remove('hidden')
+      else 
+        d.classList.add('hidden')
+    }
+
+    document.querySelector('#submission-box tbody').appendChild(t)
+  }
+
+
+  
+  // announcements
+  const announcements = []; //await betterFetch(`v1/contests/${contest.id}/announcements`);
+
+  // If there are announcements, clear the 'no announcements' notice
+  if (announcements.length !== 0) 
+    document.querySelector('#announcement-none-notice').remove();
+  
+  for (const { date, problemId, note } of announcements) {
+    const e = document.querySelector('#announcement-box template').content.cloneNode(true);
+
+    e.querySelector('#date').innerText = (new Date(date)).toLocaleString();
+    e.querySelector('#problem').innerText = problem;
+    e.querySelector('#note').innerText = note;
+
+    document.querySelector('#announcement-box tbody').appendChild(e)
+  }
+}
+
+
+
+
+// problem home
+document.getElementById('nav-problem-home').onclick = _ => 
+  clearBox() && document.getElementById('home-box').classList.remove('hidden');
+
+// submission
+document.getElementById('nav-submission').onclick = _ => 
+  clearBox() && document.getElementById('submission-box').classList.remove('hidden');
+
+// ranklist 
+document.getElementById('nav-ranklist').onclick = _ => 
+  clearBox() && document.getElementById('ranklist-box').classList.remove('hidden');
+
+// announcements
+document.getElementById('nav-announcement').onclick = _ => 
+  clearBox() && document.getElementById('announcement-box').classList.remove('hidden');
+
+
+awaitNavBar(setup)
+</script>
diff --git a/packages/client/src/pages/contests.html b/packages/client/src/pages/contests.html
new file mode 100644
index 00000000..d3580262
--- /dev/null
+++ b/packages/client/src/pages/contests.html
@@ -0,0 +1,138 @@
+<template id='contest'>
+<div class='p-4 border-solid border-2 border-slate-200 rounded-lg'>
+  <div>
+    <span id="name" class='text-lg font-bold'></span>
+    <span id='registered' class='hidden text-sm italic text-indigo-600'>registered</span> 
+    <br>
+    from <span id="series" class='text-sm italic'></span>
+  </div>
+
+  <div id='desc' class='text-md'></div>
+
+  <div class='flex gap-8'>
+    <a id='unregister' class='hidden underline text-indigo-600'>unregister</a>
+    <a id='register' class='hidden underline text-indigo-600'>register</a>
+    <a id='enter' class='hidden underline text-indigo-600'>enter</a>
+  </div>
+</div>
+</template>
+
+<h1>Contests</h1>
+
+<div>
+You can join an upcoming contest by selecting 'register'. <br>
+You can nagivate to a registered contest once its begun selecting 'enter'
+</div>
+
+<!-- populated dynamically -->
+<h3>present</h3>
+<div id='present-contest-list' class='space-y-2'></div>
+
+<h3>upcoming</h3>
+<div id='upcoming-contest-list' class='space-y-2'></div>
+
+<h3>past</h3>
+<div id='past-contest-list' class='space-y-2'></div>
+
+
+<script>
+// generate callback function given an ID 
+const makeRegisterCallback = contestId => {
+  return async _ => {
+
+    console.log('register');
+
+    const body = { name: g_user.username };
+    const options = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch(`/v1/contests/${contestId}/teams/`, options)
+      .then(res => console.log("team created"));
+
+    // refresh page
+    window.location.reload();
+  }
+}
+// generate callback function given a team
+const makeUnregisterCallback = (contest, team) => {
+  return async _ => {
+
+    console.log('unregister');
+
+    await betterFetch(`/v1/contests/${contest}/teams/${team}`, { method: 'DELETE' })
+      .then(res => console.log("team unregistered"));
+
+    // refresh page
+    window.location.reload();
+  }
+}
+
+// populate contests
+const getContests = async _ => {
+
+  let series = {};
+  (await betterFetch(`/v1/contest-series/`))
+    .forEach(({id, name}) => series[id] = name);
+
+  const contests = await betterFetch(`/v1/contests/`)
+
+  let html = '';
+  for (const { id, name, seriesId, description, startTime, endTime } of contests) {
+    
+    const e = document.querySelector('#contest').content.cloneNode(true);
+
+    e.querySelector('#name').innerText = name;
+    e.querySelector('#desc').innerText = description;
+    e.querySelector('#series').innerText = series[seriesId];
+
+    // properties
+    const registered = g_user && g_user.teams[id] !== undefined;
+    const present = startTime < Date.now() && endTime > Date.now();
+    const past = endTime < Date.now();
+    const upcoming = !past && !present;
+
+    // if logged in, show registration options
+    if (g_user) {
+      // if not registered and upcoming, show registration button
+      if (!registered && upcoming)
+        e.querySelector('#register').classList.remove('hidden')
+
+      // if registered, indicate so.
+      if (registered) 
+        e.querySelector('#registered').classList.remove('hidden')
+
+      // if registered and upcoming, allow unregister
+      if (upcoming) {
+        e.querySelector('#unregister').classList.remove('hidden')
+        e.querySelector('#unregister').onclick = makeUnregisterCallback(id, g_user.teams[id])
+      }
+    }
+
+    // if not upcoming show enter (present unregistered will only show ranking)
+    if (!upcoming)
+      e.querySelector('#enter').classList.remove('hidden')
+
+    // set enter route
+    e.querySelector('#enter').href = `/contest?id=${id}`
+
+    // set register function 
+    e.querySelector('#register').onclick = makeRegisterCallback(id)
+
+    // determine contest type & list to append to
+    const list = present ? 
+      document.getElementById('present-contest-list') :
+      past ?
+        document.getElementById('past-contest-list') :
+        document.getElementById('upcoming-contest-list')
+
+    list.appendChild(e);
+  }
+}
+
+awaitNavBar(getContests)
+</script>
+
+
diff --git a/packages/client/src/pages/login.html b/packages/client/src/pages/login.html
new file mode 100644
index 00000000..288bca4d
--- /dev/null
+++ b/packages/client/src/pages/login.html
@@ -0,0 +1,98 @@
+<h1>login</h1>
+
+<div class='space-y-2'>
+  <div id='signup-fields' class='hidden space-y-2'>
+    <input type="text" id="name" class='input' placeholder="name" value="alvin"> <br>
+    <input type="text" id="email" class='input' placeholder="email">
+  </div>
+
+  <input type="text" id="username" class='input' placeholder="username" value="alvin"> <br>
+  <input type="text" id="password" class='input' placeholder="password" value="87654321"> <br>
+
+  <div class='space-x-2'>
+    <button id="login" class='btn btn-sm'>login</button>
+    <button id="signup" class='btn btn-sm'>signup</button>
+  </div>
+</div>
+
+
+<script>
+  // signup
+  const signup = async _ => {
+
+    console.log('signup');
+
+    const body = {
+      name: document.getElementById('name').value,
+      username: document.getElementById('username').value,
+      password: document.getElementById('password').value,
+      email:document.getElementById('email').value,
+      year:"2025",
+      school:"Rock High School",
+      country:"USA",
+      region:"Pacific"
+    };
+
+    if (!body.name) return alert('no name');
+    if (!body.email) return alert('no email');
+    if (!body.username) return alert('no username');
+    if (!body.password) return alert('no password');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch('/v1/users/', options) 
+      .then(res => alert("signed up"))
+  }
+
+  // login
+  document.getElementById('login').onclick = async _ => {
+
+    console.log('login');
+
+    const body = {
+      usernameOrEmail: document.getElementById('username').value,
+      password: document.getElementById('password').value,
+    };
+
+    if (!body.usernameOrEmail) return alert('no username or email');
+    if (!body.password) return alert('no password');
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body)
+    };
+
+    await betterFetch('/v1/sessions/', options)
+      .then(_ => document.location.href = '/contests')
+  }
+
+  // trigger signup
+  const signingUp = false;
+  document.getElementById('signup').onclick = async _ => {
+
+    // if signing up, sign up then refresh
+    if (signingUp) {
+      await signup();
+
+      window.location.reload();
+      return;
+    }
+
+    // show signup & hide login 
+    document.getElementById('signup-fields').classList.remove('hidden');
+    document.getElementById('login').classList.add('hidden');
+
+    signup = true;
+  }
+  
+</script>
+
diff --git a/packages/client/src/pages/teams.html b/packages/client/src/pages/teams.html
new file mode 100644
index 00000000..356a7a63
--- /dev/null
+++ b/packages/client/src/pages/teams.html
@@ -0,0 +1,97 @@
+
+<template id='team'>
+<div class='p-4 border-solid border-2 border-slate-200 rounded-lg'>
+  <div>
+    <span id="name" class='text-lg font-bold'></span>
+    <br>
+    for <span id="contest" class='text-sm italic'></span>
+  </div>
+
+  <h3>members:</h3>
+  <div id='member-list'></div>
+
+  <a id='unregister' class='hidden underline text-indigo-600'>unregister</a>
+</div>
+</template>
+
+<h1>teams</h1>
+
+these are the contests you've registered for or teamed up in <br>
+<span id='not-logged-in-notice' class='hidden italic'>you are not logged in.</span> <br>
+<span id='none-notice' class='hidden italic'>none</span> <br>
+
+<!-- populated dynamically -->
+<h3>present</h3>
+<div id='present-team-list' class='space-y-2'></div>
+<h3>upcoming</h3>
+<div id='upcoming-team-list' class='space-y-2'></div>
+<h3>past</h3>
+<div id='past-team-list' class='space-y-2'></div>
+
+<script>
+// generate callback function given a team
+const makeUnregisterCallback = team => {
+  return async _ => {
+
+    console.log('unregister');
+
+    await betterFetch(`/v1/contests/${team.contestId}/teams/${team.id}`, { method: 'DELETE' })
+      .then(res => console.log("team unregistered"));
+
+    // refresh page
+    window.location.reload();
+  }
+}
+
+const getTeams = async _ => 
+{
+  // if not logged in
+  if (!g_user) {
+    document.getElementById('not-logged-in-notice').classList.remove('hidden');
+    return;
+  }
+
+  // if no teams
+  if (g_user.teams.length == 0) {
+    document.getElementById('none-notice').classList.remove('hidden');
+  }
+
+  for (const [contestId, teamId] of Object.entries(g_user.teams)) {
+    const contest = await betterFetch(`/v1/contests/${contestId}`);
+    const team = await betterFetch(`/v1/contests/${contestId}/teams/${teamId}`);
+
+    const e = document.querySelector('#team').content.cloneNode(true);
+    e.querySelector('#name').innerText = team.name;
+    e.querySelector('#contest').innerText = contest.name;
+
+    let html = '';
+    for (const member of team.members) {
+      html += `<div>${member.name}</div>`
+    }
+    e.querySelector('#member-list').innerHTML = html
+
+    // contest state
+    const present = contest.startTime < Date.now() && contest.endTime > Date.now();
+    const past = contest.endTime < Date.now();
+    const upcoming = !past && !present;
+
+    // unregister
+    if (upcoming) {
+      e.querySelector('#unregister').classList.remove('hidden')
+      e.querySelector('#unregister').onclick = makeUnregisterCallback(team);
+    }
+
+    // determine contest type & list to append to
+    const list = present ? 
+      document.getElementById('present-team-list') :
+      past ?
+        document.getElementById('past-team-list') :
+        document.getElementById('upcoming-team-list')
+
+    list.appendChild(e);
+  }
+}
+
+awaitNavBar(getTeams)
+
+</script>
diff --git a/packages/client/start.js b/packages/client/start.js
new file mode 100644
index 00000000..388c05f8
--- /dev/null
+++ b/packages/client/start.js
@@ -0,0 +1,33 @@
+import Fastify from 'fastify'
+import fastifyStatic from '@fastify/static';
+import path from 'node:path'
+import fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+
+const fastify = Fastify({
+  logger: true
+})
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+fastify.register(fastifyStatic, {
+  root: path.join(__dirname, 'build'),
+  prefix: '/static'
+})
+
+fastify.get('/:page', async function handler (request, reply) {
+  const { page } = request.params
+  const fd = await fs.open(path.join(__dirname, `build/${page}.html`))
+  const stream = fd.createReadStream()
+  reply.type('text/html').send(stream)
+  return reply
+})
+
+// Run the server!
+fastify.listen({ port: 3000 }, function (err, address) {
+  if (err) {
+    fastify.log.error(err)
+    process.exit(1)
+  }
+  fastify.log.info({msg: `up at: ${address}`})
+})
diff --git a/packages/client/styles/app.css b/packages/client/styles/app.css
new file mode 100644
index 00000000..bdaf3f2e
--- /dev/null
+++ b/packages/client/styles/app.css
@@ -0,0 +1,8 @@
+@import 'components.css';
+@import 'generalStyles.css';
+@import 'prism-theme.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/packages/client/styles/components.css b/packages/client/styles/components.css
new file mode 100644
index 00000000..94fcf501
--- /dev/null
+++ b/packages/client/styles/components.css
@@ -0,0 +1,34 @@
+@layer components {
+  h1 {
+    @apply text-2xl font-bold mt-4 mb-2
+  }
+
+  h2 {
+    @apply text-xl font-bold mt-2 mb-1
+  }
+
+  h3 {
+    @apply text-lg font-bold mt-2 mb-1
+  }
+
+  .btn {
+    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 transition-colors;
+  }
+  .btn:disabled {
+    cursor: not-allowed;
+    @apply bg-gray-50 text-gray-400;
+  }
+  .btn-sm {
+    @apply px-2 py-1 text-sm;
+  }
+  .textarea {
+    @apply shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md dark:bg-gray-800 dark:border-transparent dark:focus:border-blue-500;
+  }
+  .input {
+    @apply flex-1 focus:border-blue-500 rounded-md shadow-sm sm:text-sm border-gray-300;
+  }
+  .input:disabled {
+    @apply bg-gray-100;
+    cursor: not-allowed;
+  }
+}
diff --git a/packages/client/styles/generalStyles.css b/packages/client/styles/generalStyles.css
new file mode 100644
index 00000000..1bbf46a6
--- /dev/null
+++ b/packages/client/styles/generalStyles.css
@@ -0,0 +1,137 @@
+/*! purgecss start ignore */
+html {
+  background-color: white;
+}
+
+html.dark {
+  @apply text-dark-high-emphasis bg-dark-surface min-h-screen;
+}
+
+html.transitioning-color-scheme,
+html.transitioning-color-scheme * {
+  transition-duration: 0ms !important;
+}
+
+/* Scrollbar styles */
+/* Thanks https://joshwcomeau.com/! */
+@media (orientation: landscape) {
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background-color: theme('colors.gray.200');
+  }
+  ::-webkit-scrollbar-track {
+    border-radius: 3px;
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: theme('colors.gray.500');
+    border: 2px solid theme('colors.gray.200');
+  }
+  .dark ::-webkit-scrollbar {
+    background-color: theme('colors.gray.800');
+  }
+  .dark ::-webkit-scrollbar-thumb {
+    border: 2px solid theme('colors.gray.800');
+    background-color: theme('colors.gray.400');
+  }
+}
+
+.spoiler-body > pre {
+  margin-left: -1rem !important;
+  margin-right: -1rem !important;
+}
+
+.spoiler-body > pre:first-child {
+  margin-top: -2rem !important;
+}
+.spoiler-body > pre:last-child {
+  margin-bottom: -2rem !important;
+}
+.tailwind-alert > * + * {
+  @apply mb-2;
+}
+.tailwind-alert p {
+  @apply mb-2;
+}
+.tailwind-alert ul {
+  @apply mb-2;
+}
+.tailwind-alert ul li {
+  @apply mb-1;
+}
+.tailwind-alert > ul:last-child li:last-child {
+  @apply mb-0;
+}
+.tailwind-alert blockquote {
+  @apply text-sm;
+}
+
+.no-y-margin > *:first-child {
+  margin-top: 0 !important;
+}
+.no-y-margin > *:last-child {
+  margin-bottom: 0 !important;
+}
+.tailwind-alert a {
+  @apply text-black underline font-normal;
+}
+
+.table-alternating-stripes {
+  background-color: white;
+}
+.table-alternating-stripes tr:nth-child(even) {
+  @apply bg-gray-50;
+}
+.dark .table-alternating-stripes {
+  background-color: hsla(221, 20%, 12%, 1);
+}
+.dark .table-alternating-stripes tr:nth-child(even) {
+  background-color: hsla(221, 20%, 14%, 1);
+}
+
+.dark-mde-container .editor-toolbar {
+  border-top-color: #4a5568;
+  border-left-color: #4a5568;
+  border-right-color: #4a5568;
+}
+.dark-mde-container .CodeMirror {
+  background-color: #edf2f7;
+}
+
+
+.form-input {
+  @apply border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;
+}
+
+.dark .ais-Highlight-highlighted,
+.dark .ais-Snippet-highlighted {
+  @apply bg-orange-700;
+}
+
+/*! purgecss end ignore */
+
+.tw-forms-disable input {
+  --tw-ring-color: transparent !important;
+}
+.tw-forms-disable-all-descendants * {
+  --tw-ring-color: transparent !important;
+}
+.gatsby-image-wrapper-rounded img {
+  @apply rounded-full;
+}
+
+th, td {
+  @apply px-4 py-2
+}
+th {
+  @apply border-gray-300 border-b font-bold
+}
+table {
+  @apply text-left
+}
+
+button:disabled {
+  @apply text-zinc-400
+}
diff --git a/packages/client/styles/prism-theme.css b/packages/client/styles/prism-theme.css
new file mode 100644
index 00000000..d0969a30
--- /dev/null
+++ b/packages/client/styles/prism-theme.css
@@ -0,0 +1,212 @@
+/*! purgecss start ignore */
+code[class*='language-'],
+pre[class*='language-'] {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  color: #c3cee3;
+  background: #263238;
+  font-family: Roboto Mono, monospace;
+  font-size: 1em;
+  line-height: 1.5em;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+code[class*='language-']::-moz-selection,
+pre[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+  background: #363636;
+}
+
+code[class*='language-']::selection,
+pre[class*='language-']::selection,
+code[class*='language-'] ::selection,
+pre[class*='language-'] ::selection {
+  background: #363636;
+}
+
+:not(pre) > code[class*='language-'] {
+  white-space: normal;
+  border-radius: 0.2em;
+  padding: 0.1em;
+}
+
+pre[class*='language-'] {
+  overflow: auto;
+  position: relative;
+  margin: 0.5em 0;
+  padding: 1.25em 1em;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+  color: #fd9170;
+}
+
+[class*='language-'] .namespace {
+  opacity: 0.7;
+}
+
+.token.atrule {
+  color: #c792ea;
+}
+
+.token.attr-name {
+  color: #ffcb6b;
+}
+
+.token.attr-value {
+  color: #c3e88d;
+}
+
+.token.attribute {
+  color: #c3e88d;
+}
+
+.token.boolean {
+  color: #c792ea;
+}
+
+.token.builtin {
+  color: #ffcb6b;
+}
+
+.token.cdata {
+  color: #80cbc4;
+}
+
+.token.char {
+  color: #80cbc4;
+}
+
+.token.class {
+  color: #ffcb6b;
+}
+
+.token.class-name {
+  color: #f2ff00;
+}
+
+.token.color {
+  color: #f2ff00;
+}
+
+.token.comment {
+  color: #546e7a;
+}
+
+.token.constant {
+  color: #c792ea;
+}
+
+.token.deleted {
+  color: #f07178;
+}
+
+.token.doctype {
+  color: #546e7a;
+}
+
+.token.entity {
+  color: #f07178;
+}
+
+.token.function {
+  color: #c792ea;
+}
+
+.token.hexcode {
+  color: #f2ff00;
+}
+
+.token.id {
+  color: #c792ea;
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c792ea;
+  font-weight: bold;
+}
+
+.token.inserted {
+  color: #80cbc4;
+}
+
+.token.keyword {
+  color: #c792ea;
+  font-style: italic;
+}
+
+.token.number {
+  color: #fd9170;
+}
+
+.token.operator {
+  color: #89ddff;
+}
+
+.token.prolog {
+  color: #546e7a;
+}
+
+.token.property {
+  color: #80cbc4;
+}
+
+.token.pseudo-class {
+  color: #c3e88d;
+}
+
+.token.pseudo-element {
+  color: #c3e88d;
+}
+
+.token.punctuation {
+  color: #89ddff;
+}
+
+.token.regex {
+  color: #f2ff00;
+}
+
+.token.selector {
+  color: #f07178;
+}
+
+.token.string {
+  color: #c3e88d;
+}
+
+.token.symbol {
+  color: #c792ea;
+}
+
+.token.tag {
+  color: #f07178;
+}
+
+.token.unit {
+  color: #f07178;
+}
+
+.token.url {
+  color: #fd9170;
+}
+
+.token.variable {
+  color: #f07178;
+}
+/*! purgecss end ignore */
diff --git a/packages/client/tailwind.config.js b/packages/client/tailwind.config.js
new file mode 100644
index 00000000..b9ab05d2
--- /dev/null
+++ b/packages/client/tailwind.config.js
@@ -0,0 +1,110 @@
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        'dark-surface': '#121212',
+        'dark-high-emphasis': 'rgba(255,255,255,0.87)',
+        'dark-med-emphasis': 'rgba(255, 255, 255, 0.60)',
+        'dark-disabled-emphasis': 'rgba(255, 255, 255, 0.38)',
+        cyan: colors.cyan,
+        teal: colors.teal,
+        orange: colors.orange,
+        gray: colors.gray,
+        sky: colors.sky,
+        fuchsia: colors.fuchsia,
+        purple: colors.purple,
+        'light-blue': colors.sky,
+      },
+      boxShadow: {
+        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+        solid: '0 0 0 2px currentColor',
+        outline: `0 0 0 3px rgba(156, 163, 175, .5)`,
+        'outline-gray': `0 0 0 3px rgba(254, 202, 202, .5)`,
+        'outline-blue': `0 0 0 3px rgba(191, 219, 254, .5)`,
+        'outline-green': `0 0 0 3px rgba(167, 243, 208, .5)`,
+        'outline-yellow': `0 0 0 3px rgba(253, 230, 138, .5)`,
+        'outline-red': `0 0 0 3px rgba(254, 202, 202, .5)`,
+        'outline-pink': `0 0 0 3px rgba(251, 207, 232, .5)`,
+        'outline-purple': `0 0 0 3px rgba(221, 214, 254, .5)`,
+        'outline-indigo': `0 0 0 3px rgba(199, 210, 254, .5)`,
+      },
+      typography: theme => ({
+        light: {
+          css: [
+            {
+              color: theme('colors.gray.400'),
+              '[class~="lead"]': {
+                color: theme('colors.gray.300'),
+              },
+              a: {
+                color: theme('colors.white'),
+              },
+              strong: {
+                color: theme('colors.white'),
+              },
+              'ol > li::before': {
+                color: theme('colors.gray.400'),
+              },
+              'ul > li::before': {
+                backgroundColor: theme('colors.gray.600'),
+              },
+              hr: {
+                borderColor: theme('colors.gray.200'),
+              },
+              blockquote: {
+                color: theme('colors.gray.200'),
+                borderLeftColor: theme('colors.gray.600'),
+              },
+              h1: {
+                color: theme('colors.white'),
+              },
+              h2: {
+                color: theme('colors.white'),
+              },
+              h3: {
+                color: theme('colors.white'),
+              },
+              h4: {
+                color: theme('colors.white'),
+              },
+              'figure figcaption': {
+                color: theme('colors.gray.400'),
+              },
+              code: {
+                color: theme('colors.white'),
+              },
+              'a code': {
+                color: theme('colors.white'),
+              },
+              pre: {
+                color: theme('colors.gray.200'),
+                backgroundColor: theme('colors.gray.800'),
+              },
+              thead: {
+                color: theme('colors.white'),
+                borderBottomColor: theme('colors.gray.400'),
+              },
+              'tbody tr': {
+                borderBottomColor: theme('colors.gray.600'),
+              },
+            },
+          ],
+        },
+      }),
+    },
+  },
+  darkMode: 'class',
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
+  ],
+  content: ["./src/**/*.html"],
+};
diff --git a/yarn.lock b/yarn.lock
index 6e417af5..843dbdbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -85,6 +85,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@argoncs/client@workspace:packages/client":
+  version: 0.0.0-use.local
+  resolution: "@argoncs/client@workspace:packages/client"
+  dependencies:
+    "@fastify/static": "npm:^8.0.2"
+    "@tailwindcss/aspect-ratio": "npm:^0.4.2"
+    "@tailwindcss/forms": "npm:^0.5.9"
+    "@tailwindcss/typography": "npm:^0.5.15"
+    autoprefixer: "npm:^10.4.20"
+    fastify: "npm:^5.0.0"
+    postcss-import: "npm:^16.1.0"
+    tailwindcss: "npm:^3.4.14"
+  languageName: unknown
+  linkType: soft
+
 "@argoncs/common@workspace:*, @argoncs/common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "@argoncs/common@workspace:packages/common"
@@ -1449,6 +1464,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/accept-negotiator@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@fastify/accept-negotiator@npm:2.0.0"
+  checksum: 10/4182127d6ff362c2950e8e27ff1551e59b3f09ec25dc83c59f42435a4012e78bb6be4020501d029685048daed0d69eba2e26cd9b4e4fef790a7a6dae40c38a83
+  languageName: node
+  linkType: hard
+
 "@fastify/ajv-compiler@npm:^3.5.0":
   version: 3.5.0
   resolution: "@fastify/ajv-compiler@npm:3.5.0"
@@ -1460,6 +1482,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/ajv-compiler@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "@fastify/ajv-compiler@npm:4.0.1"
+  dependencies:
+    ajv: "npm:^8.12.0"
+    ajv-formats: "npm:^3.0.1"
+    fast-uri: "npm:^3.0.0"
+  checksum: 10/ba1348cb5c4bd9c921a53e509ac6acb8696d542198f3bc7674a15b9b6b1af158b2859e738d754eb2929c4059bfa354a743f71c32aa8de6df42531a32647eeee0
+  languageName: node
+  linkType: hard
+
 "@fastify/auth@npm:^4.4.0":
   version: 4.4.0
   resolution: "@fastify/auth@npm:4.4.0"
@@ -1527,6 +1560,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/error@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@fastify/error@npm:4.0.0"
+  checksum: 10/9afdb1262fbd57e1c922cd7b3326c45d2ca018456030669dcad76feda60df894a3c25b9d019cd050ffc3686a0de938799be826328ab2d74257941788c7f642e7
+  languageName: node
+  linkType: hard
+
 "@fastify/fast-json-stringify-compiler@npm:^4.3.0":
   version: 4.3.0
   resolution: "@fastify/fast-json-stringify-compiler@npm:4.3.0"
@@ -1536,6 +1576,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/fast-json-stringify-compiler@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "@fastify/fast-json-stringify-compiler@npm:5.0.1"
+  dependencies:
+    fast-json-stringify: "npm:^6.0.0"
+  checksum: 10/82c9b51cd096221b4dc191ffef01f4ccfda389bea08e218bd9926f99a0b6a10fadad47d9106335e1d48b160047178e14d8f87ee202fa5c2eab3957ae37d060c3
+  languageName: node
+  linkType: hard
+
+"@fastify/merge-json-schemas@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "@fastify/merge-json-schemas@npm:0.1.1"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+  checksum: 10/99d0795f8dde75c204ee86fd2d42d8b24da3818c4bb6de8e3d595da1b123e678dcf832d14bd8ab3167fc22e36762ecd5b473ef764888a04dd94831befadac7f0
+  languageName: node
+  linkType: hard
+
 "@fastify/multipart@npm:^8.1.0":
   version: 8.1.0
   resolution: "@fastify/multipart@npm:8.1.0"
@@ -1563,6 +1621,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/send@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "@fastify/send@npm:3.1.1"
+  dependencies:
+    "@lukeed/ms": "npm:^2.0.2"
+    escape-html: "npm:~1.0.3"
+    fast-decode-uri-component: "npm:^1.0.1"
+    http-errors: "npm:^2.0.0"
+    mime: "npm:^3"
+  checksum: 10/52081bb74c3652e29aa1d8ea1f63af02d7d0487e412a9b105cd668fecd7fa0924f03ae77d2050fbe1b4d060e991a84967084638ad17db6478b9851da6dd648ef
+  languageName: node
+  linkType: hard
+
 "@fastify/sensible@npm:^5.5.0":
   version: 5.5.0
   resolution: "@fastify/sensible@npm:5.5.0"
@@ -1592,6 +1663,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/static@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@fastify/static@npm:8.0.2"
+  dependencies:
+    "@fastify/accept-negotiator": "npm:^2.0.0"
+    "@fastify/send": "npm:^3.1.0"
+    content-disposition: "npm:^0.5.4"
+    fastify-plugin: "npm:^5.0.0"
+    fastq: "npm:^1.17.1"
+    glob: "npm:^11.0.0"
+  checksum: 10/a6d71351bc38a32778b3695ba02e8f65c5f33d11dd6f19e4f6a1c087bdbc97f7d6a310fd2b002104be112034e6ea3d0690be69c41c95713966667f244fbc0262
+  languageName: node
+  linkType: hard
+
 "@fastify/swagger-ui@npm:^4.1.0":
   version: 4.1.1
   resolution: "@fastify/swagger-ui@npm:4.1.1"
@@ -1910,6 +1995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lukeed/ms@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@lukeed/ms@npm:2.0.2"
+  checksum: 10/6ae47ed3ebc857ffc0283cfe46129947209c770d0974eb86626138b6c194a760d08863ec593ec75a645aec133b3237b37af500739b030293e4d9a81130f4e2ae
+  languageName: node
+  linkType: hard
+
 "@mapbox/node-pre-gyp@npm:^1.0.5":
   version: 1.0.10
   resolution: "@mapbox/node-pre-gyp@npm:1.0.10"
@@ -3005,6 +3097,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/aspect-ratio@npm:^0.4.2":
+  version: 0.4.2
+  resolution: "@tailwindcss/aspect-ratio@npm:0.4.2"
+  peerDependencies:
+    tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+  checksum: 10/e998fcb0c1a55cae4e83c4510fed0d4d1cba845b7ed79a18451f55377d4a177050c2401af59222662a216aa9c407ef49c475c93db8e13246e0bb3f1ed42f78f8
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/forms@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "@tailwindcss/forms@npm:0.5.9"
+  dependencies:
+    mini-svg-data-uri: "npm:^1.2.3"
+  peerDependencies:
+    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
+  checksum: 10/bea740d9c92fc7771ac6891531f7bc76dfb1444c8da87071ec15c155b773eaf32a32ae5ea2c5bba228dcda25aacc3979f9f036765c8bd20c9743dab214ee09f4
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/typography@npm:^0.5.15":
+  version: 0.5.15
+  resolution: "@tailwindcss/typography@npm:0.5.15"
+  dependencies:
+    lodash.castarray: "npm:^4.4.0"
+    lodash.isplainobject: "npm:^4.0.6"
+    lodash.merge: "npm:^4.6.2"
+    postcss-selector-parser: "npm:6.0.10"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10/8c677e4de25a5362d757c3c0b9d594b63c789ab287cad846a082ca227e0d3435145793301ced8f32d5215d5c21537195e7d87ca08a6e7a8facf47a11e7f07d22
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -4028,6 +4154,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv-formats@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "ajv-formats@npm:3.0.1"
+  dependencies:
+    ajv: "npm:^8.0.0"
+  peerDependencies:
+    ajv: ^8.0.0
+  peerDependenciesMeta:
+    ajv:
+      optional: true
+  checksum: 10/5679b9f9ced9d0213a202a37f3aa91efcffe59a6de1a6e3da5c873344d3c161820a1f11cc29899661fee36271fd2895dd3851b6461c902a752ad661d1c1e8722
+  languageName: node
+  linkType: hard
+
 "ajv-i18n@npm:^4.2.0":
   version: 4.2.0
   resolution: "ajv-i18n@npm:4.2.0"
@@ -4607,6 +4747,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.20":
+  version: 10.4.20
+  resolution: "autoprefixer@npm:10.4.20"
+  dependencies:
+    browserslist: "npm:^4.23.3"
+    caniuse-lite: "npm:^1.0.30001646"
+    fraction.js: "npm:^4.3.7"
+    normalize-range: "npm:^0.1.2"
+    picocolors: "npm:^1.0.1"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 10/d3c4b562fc4af2393623a0207cc336f5b9f94c4264ae1c316376904c279702ce2b12dc3f27205f491195d1e29bb52ffc269970ceb0f271f035fadee128a273f7
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -4625,6 +4783,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"avvio@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "avvio@npm:9.1.0"
+  dependencies:
+    "@fastify/error": "npm:^4.0.0"
+    fastq: "npm:^1.17.1"
+  checksum: 10/4bc7c0ac1b9e3a814db4bc5b89fd6a38b082614677d9a4e2d2b9c11bc830deac81dd0e5bdae4ba31b1e165c19de9f2772564fd3b840b3bfa5048f757bb6a4eda
+  languageName: node
+  linkType: hard
+
 "axios@npm:^1.6.0":
   version: 1.6.5
   resolution: "axios@npm:1.6.5"
@@ -4805,6 +4973,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.23.3":
+  version: 4.24.2
+  resolution: "browserslist@npm:4.24.2"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001669"
+    electron-to-chromium: "npm:^1.5.41"
+    node-releases: "npm:^2.0.18"
+    update-browserslist-db: "npm:^1.1.1"
+  bin:
+    browserslist: cli.js
+  checksum: 10/f8a9d78bbabe466c57ffd5c50a9e5582a5df9aa68f43078ca62a9f6d0d6c70ba72eca72d0a574dbf177cf55cdca85a46f7eb474917a47ae5398c66f8b76f7d1c
+  languageName: node
+  linkType: hard
+
 "bson@npm:^6.2.0":
   version: 6.2.0
   resolution: "bson@npm:6.2.0"
@@ -5132,6 +5314,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669":
+  version: 1.0.30001669
+  resolution: "caniuse-lite@npm:1.0.30001669"
+  checksum: 10/cd0b481bb997703cb7651e55666b4aa4e7b4ecf9784796e2393179a15e55c71a6abc6ff865c922bbd3bbfa4a4bf0530d8da13989b97ff8c7850c8a5bd4e00491
+  languageName: node
+  linkType: hard
+
 "cardinal@npm:^2.1.1":
   version: 2.1.1
   resolution: "cardinal@npm:2.1.1"
@@ -5637,7 +5826,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-disposition@npm:^0.5.3, content-disposition@npm:~0.5.2":
+"content-disposition@npm:^0.5.3, content-disposition@npm:^0.5.4, content-disposition@npm:~0.5.2":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
   dependencies:
@@ -5695,6 +5884,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.7.0":
+  version: 0.7.2
+  resolution: "cookie@npm:0.7.2"
+  checksum: 10/24b286c556420d4ba4e9bc09120c9d3db7d28ace2bd0f8ccee82422ce42322f73c8312441271e5eefafbead725980e5996cc02766dbb89a90ac7f5636ede608f
+  languageName: node
+  linkType: hard
+
 "cookies@npm:~0.9.0":
   version: 0.9.1
   resolution: "cookies@npm:0.9.1"
@@ -6426,6 +6622,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.41":
+  version: 1.5.44
+  resolution: "electron-to-chromium@npm:1.5.44"
+  checksum: 10/07d0368c9487787fba037d5d2a1be98fcea8c32062029e9a5739d72b9750d06a1ebe0624489f7fabc31db4fcab3cd905e9166203980edc8b236d0062a0edec48
+  languageName: node
+  linkType: hard
+
 "elegant-spinner@npm:^1.0.1":
   version: 1.0.1
   resolution: "elegant-spinner@npm:1.0.1"
@@ -6833,6 +7036,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
+  languageName: node
+  linkType: hard
+
 "escape-html@npm:^1.0.3, escape-html@npm:~1.0.3":
   version: 1.0.3
   resolution: "escape-html@npm:1.0.3"
@@ -7687,6 +7897,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-json-stringify@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "fast-json-stringify@npm:6.0.0"
+  dependencies:
+    "@fastify/merge-json-schemas": "npm:^0.1.1"
+    ajv: "npm:^8.12.0"
+    ajv-formats: "npm:^3.0.1"
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^2.3.0"
+    json-schema-ref-resolver: "npm:^1.0.1"
+    rfdc: "npm:^1.2.0"
+  checksum: 10/b850b0669d6e2807e07c6e07a6d95224132a26d2759a86eb070ad4ad1103aafa08e63c3eca554eca701d77abd3b96037d2b70aead14aa93bd4c4e67ba2a57bd0
+  languageName: node
+  linkType: hard
+
 "fast-levenshtein@npm:^2.0.6, fast-levenshtein@npm:~2.0.6":
   version: 2.0.6
   resolution: "fast-levenshtein@npm:2.0.6"
@@ -7717,6 +7942,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-uri@npm:^2.3.0":
+  version: 2.4.0
+  resolution: "fast-uri@npm:2.4.0"
+  checksum: 10/07338f5665c29697ed5359c8010e58450b5c3fee2e9a3d6457e8b4a045995a36a7b9062c9849dad4ffe8959d3e150beccb78beecaab84f6b5f0976a2360f3028
+  languageName: node
+  linkType: hard
+
+"fast-uri@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "fast-uri@npm:3.0.3"
+  checksum: 10/92487c75848b03edc45517fca0148287d342c30818ce43d556391db774d8e01644fb6964315a3336eec5a90f301b218b21f71fb9b2528ba25757435a20392c95
+  languageName: node
+  linkType: hard
+
 "fast-xml-parser@npm:^4.2.2":
   version: 4.2.5
   resolution: "fast-xml-parser@npm:4.2.5"
@@ -7791,7 +8030,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fastq@npm:^1.17.0":
+"fastify@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "fastify@npm:5.0.0"
+  dependencies:
+    "@fastify/ajv-compiler": "npm:^4.0.0"
+    "@fastify/error": "npm:^4.0.0"
+    "@fastify/fast-json-stringify-compiler": "npm:^5.0.0"
+    abstract-logging: "npm:^2.0.1"
+    avvio: "npm:^9.0.0"
+    fast-json-stringify: "npm:^6.0.0"
+    find-my-way: "npm:^9.0.0"
+    light-my-request: "npm:^6.0.0"
+    pino: "npm:^9.0.0"
+    process-warning: "npm:^4.0.0"
+    proxy-addr: "npm:^2.0.7"
+    rfdc: "npm:^1.3.1"
+    secure-json-parse: "npm:^2.7.0"
+    semver: "npm:^7.6.0"
+    toad-cache: "npm:^3.7.0"
+  checksum: 10/192cf11117cceda4556e9f48050763797ca3383cf43bcb1b40696990f02d5aebc80ccd0429279e9c16ec050523b1a3a27ed6c77dc3330035487607229348dd97
+  languageName: node
+  linkType: hard
+
+"fastq@npm:^1.17.0, fastq@npm:^1.17.1":
   version: 1.17.1
   resolution: "fastq@npm:1.17.1"
   dependencies:
@@ -7900,6 +8162,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-my-way@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "find-my-way@npm:9.1.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    fast-querystring: "npm:^1.0.0"
+    safe-regex2: "npm:^4.0.0"
+  checksum: 10/7c73ac979205ca78a35dfcdf1eb63bf8d88c3c545cf75bc2afd4e53bd8958aef4cfd25dcb86f8a870dee2ae5a95a79ffa3614d730fe88cf810f05e40fcf1652e
+  languageName: node
+  linkType: hard
+
 "find-parent-dir@npm:0.3.0":
   version: 0.3.0
   resolution: "find-parent-dir@npm:0.3.0"
@@ -8546,6 +8819,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "glob@npm:11.0.0"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^4.0.1"
+    minimatch: "npm:^10.0.0"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^2.0.0"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/e66939201d11ae30fe97e3364ac2be5c59d6c9bfce18ac633edfad473eb6b46a7553f6f73658f67caaf6cccc1df1ae336298a45e9021fa5695fd78754cc1603e
+  languageName: node
+  linkType: hard
+
 "glob@npm:^7.0.3, glob@npm:^7.0.5, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0, glob@npm:^7.2.3":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
@@ -10132,6 +10421,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jackspeak@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "jackspeak@npm:4.0.2"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+  checksum: 10/d9722f0e55f6c322c57aedf094c405f4201b834204629817187953988075521cfddb23df83e2a7b845723ca7eb0555068c5ce1556732e9c275d32a531881efa8
+  languageName: node
+  linkType: hard
+
 "jest-docblock@npm:25.3.0":
   version: 25.3.0
   resolution: "jest-docblock@npm:25.3.0"
@@ -10551,6 +10849,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"light-my-request@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "light-my-request@npm:6.1.0"
+  dependencies:
+    cookie: "npm:^0.7.0"
+    process-warning: "npm:^4.0.0"
+    set-cookie-parser: "npm:^2.6.0"
+  checksum: 10/1b33c62b9866662cae95eae1533784555ab3a865e9e9ecfd5dd97a5df0ac5036cb5f0faaa186168a2ca214cfc5b29dab8b2b10ce9b24a78e4f54683cf6ebe153
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^2.0.5, lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -10734,6 +11043,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: 10/fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -10762,6 +11078,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.isplainobject@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "lodash.isplainobject@npm:4.0.6"
+  checksum: 10/29c6351f281e0d9a1d58f1a4c8f4400924b4c79f18dfc4613624d7d54784df07efaff97c1ff2659f3e085ecf4fff493300adc4837553104cef2634110b0d5337
+  languageName: node
+  linkType: hard
+
 "lodash.memoize@npm:^4.1.2":
   version: 4.1.2
   resolution: "lodash.memoize@npm:4.1.2"
@@ -10875,6 +11198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^11.0.0":
+  version: 11.0.1
+  resolution: "lru-cache@npm:11.0.1"
+  checksum: 10/26688a1b2a4d7fb97e9ea1ffb15348f1ab21b7110496814f5ce9190d50258fbba8c1444ae7232876deae1fc54adb230aa63dd1efc5bd47f240620ba8bf218041
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^4.1.5":
   version: 4.1.5
   resolution: "lru-cache@npm:4.1.5"
@@ -11145,7 +11475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:^3.0.0":
+"mime@npm:^3, mime@npm:^3.0.0":
   version: 3.0.0
   resolution: "mime@npm:3.0.0"
   bin:
@@ -11182,6 +11512,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mini-svg-data-uri@npm:^1.2.3":
+  version: 1.4.4
+  resolution: "mini-svg-data-uri@npm:1.4.4"
+  bin:
+    mini-svg-data-uri: cli.js
+  checksum: 10/1336c2b00b6a72b0ce3cf942f7ab074faf463b941042fbe51d7a70be119c5d4223880aaa29584d5a804496ca1dda9b6fff7dd5aa284721907519b646192d8aaa
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:3.0.4":
   version: 3.0.4
   resolution: "minimatch@npm:3.0.4"
@@ -11200,6 +11539,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "minimatch@npm:10.0.1"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10/082e7ccbc090d5f8c4e4e029255d5a1d1e3af37bda837da2b8b0085b1503a1210c91ac90d9ebfe741d8a5f286ece820a1abb4f61dc1f82ce602a055d461d93f3
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -11878,6 +12226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.18":
+  version: 2.0.18
+  resolution: "node-releases@npm:2.0.18"
+  checksum: 10/241e5fa9556f1c12bafb83c6c3e94f8cf3d8f2f8f904906ecef6e10bcaa1d59aa61212d4651bec70052015fc54bd3fdcdbe7fc0f638a17e6685aa586c076ec4e
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^5.0.0":
   version: 5.0.0
   resolution: "nopt@npm:5.0.0"
@@ -12911,6 +13266,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "path-scurry@npm:2.0.0"
+  dependencies:
+    lru-cache: "npm:^11.0.0"
+    minipass: "npm:^7.1.2"
+  checksum: 10/285ae0c2d6c34ae91dc1d5378ede21981c9a2f6de1ea9ca5a88b5a270ce9763b83dbadc7a324d512211d8d36b0c540427d3d0817030849d97a60fa840a2c59ec
+  languageName: node
+  linkType: hard
+
 "path-to-regexp@npm:^6.2.1":
   version: 6.2.1
   resolution: "path-to-regexp@npm:6.2.1"
@@ -12967,6 +13332,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.0.1, picocolors@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -13016,6 +13388,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pino-abstract-transport@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "pino-abstract-transport@npm:2.0.0"
+  dependencies:
+    split2: "npm:^4.0.0"
+  checksum: 10/e5699ecb06c7121055978e988e5cecea5b6892fc2589c64f1f86df5e7386bbbfd2ada268839e911b021c6b3123428aed7c6be3ac7940eee139556c75324c7e83
+  languageName: node
+  linkType: hard
+
 "pino-abstract-transport@npm:v1.1.0":
   version: 1.1.0
   resolution: "pino-abstract-transport@npm:1.1.0"
@@ -13033,6 +13414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pino-std-serializers@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "pino-std-serializers@npm:7.0.0"
+  checksum: 10/884e08f65aa5463d820521ead3779d4472c78fc434d8582afb66f9dcb8d8c7119c69524b68106cb8caf92c0487be7794cf50e5b9c0383ae65b24bf2a03480951
+  languageName: node
+  linkType: hard
+
 "pino@npm:^8.17.0, pino@npm:^8.17.2":
   version: 8.17.2
   resolution: "pino@npm:8.17.2"
@@ -13054,6 +13442,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pino@npm:^9.0.0":
+  version: 9.5.0
+  resolution: "pino@npm:9.5.0"
+  dependencies:
+    atomic-sleep: "npm:^1.0.0"
+    fast-redact: "npm:^3.1.1"
+    on-exit-leak-free: "npm:^2.1.0"
+    pino-abstract-transport: "npm:^2.0.0"
+    pino-std-serializers: "npm:^7.0.0"
+    process-warning: "npm:^4.0.0"
+    quick-format-unescaped: "npm:^4.0.3"
+    real-require: "npm:^0.2.0"
+    safe-stable-stringify: "npm:^2.3.1"
+    sonic-boom: "npm:^4.0.1"
+    thread-stream: "npm:^3.0.0"
+  bin:
+    pino: bin.js
+  checksum: 10/e2dba79524be133e2a0800ad0424bbf2c4c94c46f028a81e514d40951666f3dcec76c582fd5ce6f6155df0f5a9d6d0257924fdf043fe285236d36c76509a59dd
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.1":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
@@ -13218,6 +13627,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-import@npm:^16.1.0":
+  version: 16.1.0
+  resolution: "postcss-import@npm:16.1.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.0.0"
+    read-cache: "npm:^1.0.0"
+    resolve: "npm:^1.1.7"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 10/a0877244976b8b8a930adfc8dff9f5f6c251d78649e67aa80e963d11821e6dbc8f8b16fa1d126e8725093d69c77486fc4a6861c823693c068c3192d4879e0b29
+  languageName: node
+  linkType: hard
+
 "postcss-js@npm:^4.0.1":
   version: 4.0.1
   resolution: "postcss-js@npm:4.0.1"
@@ -13513,6 +13935,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10/f8ad9beb764a64b51a8027650e745a44ed7198f0b968b823db9563a54990924bcf9eb6fb59fbbb7eb05a89b2b6a24b81b2b7d60ecadda15b04a0024c7663f436
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.13
   resolution: "postcss-selector-parser@npm:6.0.13"
@@ -13796,6 +14228,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"process-warning@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "process-warning@npm:4.0.0"
+  checksum: 10/0d6ec069f3a6fe1d3379c0247329a297f1f3b9ea7e1d828db0a8f61e0e8337a98b7eb201547350924bc4a101ddcf2fa5cf5563ffe2c54c27651f7996d328483e
+  languageName: node
+  linkType: hard
+
 "process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
@@ -14501,6 +14940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ret@npm:~0.5.0":
+  version: 0.5.0
+  resolution: "ret@npm:0.5.0"
+  checksum: 10/fb58f61268ceb762de471fd5871a53def1f47160487c6e21dcbe5274b3eb2df40a80d9eab7ed3732c8de4e4fadc911a66a190a129b5cf75c3e70302a7607f82f
+  languageName: node
+  linkType: hard
+
 "retry@npm:^0.12.0":
   version: 0.12.0
   resolution: "retry@npm:0.12.0"
@@ -14730,6 +15176,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-regex2@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "safe-regex2@npm:4.0.0"
+  dependencies:
+    ret: "npm:~0.5.0"
+  checksum: 10/5607d4c20a92d66905d33556807da759ef0615d3b508ae7d6e7558e763bd59042bd30afb32d5f2456eb3f69a9d86fadbdf5e3e292494dae89fdae3087532602e
+  languageName: node
+  linkType: hard
+
 "safe-regex@npm:^2.1.1":
   version: 2.1.1
   resolution: "safe-regex@npm:2.1.1"
@@ -14879,6 +15334,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.6.0":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/36b1fbe1a2b6f873559cd57b238f1094a053dbfd997ceeb8757d79d1d2089c56d1321b9f1069ce263dc64cfa922fa1d2ad566b39426fe1ac6c723c1487589e10
+  languageName: node
+  linkType: hard
+
 "send@npm:0.18.0":
   version: 0.18.0
   resolution: "send@npm:0.18.0"
@@ -14944,6 +15408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 10/c92b1130032693342bca13ea1b1bc93967ab37deec4387fcd8c2a843c0ef2fd9a9f3df25aea5bb3976cd05a91c2cf4632dd6164d6e1814208fb7d7e14edd42b4
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.1.1":
   version: 1.2.0
   resolution: "set-function-length@npm:1.2.0"
@@ -15215,6 +15686,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonic-boom@npm:^4.0.1":
+  version: 4.2.0
+  resolution: "sonic-boom@npm:4.2.0"
+  dependencies:
+    atomic-sleep: "npm:^1.0.0"
+  checksum: 10/385ef7fb5ea5976c1d2a1fef0b6df8df6b7caba8696d2d67f689d60c05e3ea2d536752ce7e1c69b9fad844635f1036d07c446f8e8149f5c6a80e0040a455b310
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
@@ -15860,6 +16340,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^3.4.14":
+  version: 3.4.14
+  resolution: "tailwindcss@npm:3.4.14"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    arg: "npm:^5.0.2"
+    chokidar: "npm:^3.5.3"
+    didyoumean: "npm:^1.2.2"
+    dlv: "npm:^1.1.3"
+    fast-glob: "npm:^3.3.0"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
+    jiti: "npm:^1.21.0"
+    lilconfig: "npm:^2.1.0"
+    micromatch: "npm:^4.0.5"
+    normalize-path: "npm:^3.0.0"
+    object-hash: "npm:^3.0.0"
+    picocolors: "npm:^1.0.0"
+    postcss: "npm:^8.4.23"
+    postcss-import: "npm:^15.1.0"
+    postcss-js: "npm:^4.0.1"
+    postcss-load-config: "npm:^4.0.1"
+    postcss-nested: "npm:^6.0.1"
+    postcss-selector-parser: "npm:^6.0.11"
+    resolve: "npm:^1.22.2"
+    sucrase: "npm:^3.32.0"
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 10/2b75b697d4859ce813947b043edf19ed61f80321914743a00ba883f327016e4f7f9414823b6ccffeb1359524335c47933d970da5ce2158329f43e9a89d934eb0
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:~3.4.1":
   version: 3.4.1
   resolution: "tailwindcss@npm:3.4.1"
@@ -16111,6 +16624,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thread-stream@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "thread-stream@npm:3.1.0"
+  dependencies:
+    real-require: "npm:^0.2.0"
+  checksum: 10/ea2d816c4f6077a7062fac5414a88e82977f807c82ee330938fb9691fe11883bb03f078551c0518bb649c239e47ba113d44014fcbb5db42c5abd5996f35e4213
+  languageName: node
+  linkType: hard
+
 "through2@npm:^4.0.2":
   version: 4.0.2
   resolution: "through2@npm:4.0.2"
@@ -16159,7 +16681,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toad-cache@npm:^3.3.0":
+"toad-cache@npm:^3.3.0, toad-cache@npm:^3.7.0":
   version: 3.7.0
   resolution: "toad-cache@npm:3.7.0"
   checksum: 10/cdc62aacc047e94eab21697943e117bbb1938168a03e5e85fdba28ab6ea66f4796ff16b219019a64d2115048378f9dd1f4e62c78c1f1d4961d0b3d23f9a9374d
@@ -16980,6 +17502,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "update-browserslist-db@npm:1.1.1"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.0"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/7678dd8609750588d01aa7460e8eddf2ff9d16c2a52fb1811190e0d056390f1fdffd94db3cf8fb209cf634ab4fa9407886338711c71cc6ccade5eeb22b093734
+  languageName: node
+  linkType: hard
+
 "uqr@npm:^0.1.2":
   version: 0.1.2
   resolution: "uqr@npm:0.1.2"