diff --git a/package.json b/package.json
index 99b9495..ada1684 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "femto-webapp",
   "private": true,
-  "version": "1.17.0",
+  "version": "1.26.6",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "build:deploy": "bash scripts/bump-build-push.sh",
+    "build:deploy": "bash scripts/publish.sh",
     "generate:schema": "node scripts/generate-schema.mjs"
   },
   "dependencies": {
@@ -20,7 +20,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.6.0",
-    "tailwindcss": "^4.1.5"
+    "tailwindcss": "^4.1.5",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
diff --git a/public/forgejo-logo-primary.svg b/public/forgejo-logo-primary.svg
new file mode 100644
index 0000000..7f64c1a
--- /dev/null
+++ b/public/forgejo-logo-primary.svg
@@ -0,0 +1,40 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+    <metadata
+            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+            xmlns:cc="http://creativecommons.org/ns#"
+            xmlns:dc="http://purl.org/dc/elements/1.1/"
+    >
+        <rdf:RDF>
+            <cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
+                <dc:title>Forgejo logo</dc:title>
+                <cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
+                <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
+    <style type="text/css">
+        circle {
+        fill: none;
+        stroke: #000;
+        stroke-width: 15;
+        }
+        path {
+        fill: none;
+        stroke: #000;
+        stroke-width: 25;
+        }
+        .orange {
+        stroke: oklch(55.1% 0.027 264.364);
+        }
+        .red {
+        --color-primary-700: var(--color-gray-700);
+        }
+    </style>
+    <g transform="translate(28,28)">
+        <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange" />
+        <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red" />
+        <circle cx="142" cy="20" r="18" class="orange" />
+        <circle cx="142" cy="88" r="18" class="red" />
+        <circle cx="58" cy="180" r="18" class="red" />
+    </g>
+</svg>
diff --git a/scripts/bump-build-push.sh b/scripts/bump-build-push.sh
deleted file mode 100755
index ae679c6..0000000
--- a/scripts/bump-build-push.sh
+++ /dev/null
@@ -1,57 +0,0 @@
-#!/bin/bash
-
-set -euo pipefail
-
-# CONFIGURATION
-REGISTRY="docker.botris.dev"
-USERNAME="johnbotris"
-IMAGE_NAME="femto-webapp"
-
-# Add this before the docker build line
-export VITE_API_URL="https://femto-api.botris.social"
-
-
-# Step 0: Ensure clean working directory
-if [[ -n $(git status --porcelain) ]]; then
-  echo "❌ Uncommitted changes detected. Please commit or stash them before running this script."
-  exit 1
-fi
-
-# Step 1: Store current version to revert if needed
-OLD_VERSION=$(node -p "require('./package.json').version")
-echo "🔍 Current version: $OLD_VERSION"
-
-# Step 2: Bump version without Git tag/commit
-echo "🚀 Bumping minor version..."
-yarn version --minor --no-git-tag-version
-NEW_VERSION=$(node -p "require('./package.json').version")
-echo "📦 New version: $NEW_VERSION"
-
-# Step 3: Attempt Docker build
-echo "🔧 Building Docker image..."
-
-if ! docker build --build-arg VITE_API_URL="$VITE_API_URL" -t $IMAGE_NAME .; then
-  echo "❌ Docker build failed. Reverting version bump..."
-  git checkout -- package.json yarn.lock
-  exit 1
-fi
-
-# Step 4: Tag and push Docker image
-FULL_IMAGE="$REGISTRY/$USERNAME/$IMAGE_NAME"
-echo "🏷️ Tagging Docker image..."
-docker tag $IMAGE_NAME $FULL_IMAGE:$NEW_VERSION
-docker tag $IMAGE_NAME $FULL_IMAGE:latest
-
-echo "📤 Pushing Docker images..."
-docker push $FULL_IMAGE:$NEW_VERSION
-docker push $FULL_IMAGE:latest
-
-# Step 5: Commit version bump & tag
-echo "✅ Committing and tagging version bump..."
-git add package.json yarn.lock
-git commit -m "v$NEW_VERSION"
-git tag "v$NEW_VERSION"
-git push origin main
-git push origin "v$NEW_VERSION"
-
-echo "🎉 Release v$NEW_VERSION complete."
diff --git a/scripts/publish.sh b/scripts/publish.sh
new file mode 100755
index 0000000..68a75e4
--- /dev/null
+++ b/scripts/publish.sh
@@ -0,0 +1,101 @@
+#!/bin/bash
+
+set -euo pipefail
+
+# Function to display help text
+show_help() {
+  echo "Usage: $0 [OPTIONS]"
+  echo
+  echo "Description:"
+  echo "  This script automates the process of bumping the version, building a Docker image,"
+  echo "  pushing it to the registry, and optionally deploying to production."
+  echo
+  echo "Options:"
+  echo "  -h,--help     Display this help message and exit"
+  echo "  -d,--deploy   Deploy to production after building and pushing"
+  echo "  --major        Bump the major version (x.0.0)"
+  echo "  --minor        Bump the minor version (0.x.0)"
+  echo "  --patch        Bump the patch version (0.0.x) [default]"
+  echo
+  echo "Examples:"
+  echo "  $0                     # Bump patch version, build and push"
+  echo "  $0 --minor             # Bump minor version, build and push"
+  echo "  $0 --major -d          # Bump major version, build, push and deploy"
+  echo "  $0 --patch --deploy    # Bump patch version, build, push and deploy"
+  echo
+}
+
+# Parse command line arguments
+DEPLOY=false
+VERSION_TYPE="patch"  # Default to patch version bump
+
+for arg in "$@"; do
+  case "$arg" in
+    -h|--help) show_help; exit 0 ;;
+    -d|--deploy) DEPLOY=true ;;
+    --major) VERSION_TYPE="major" ;;
+    --minor) VERSION_TYPE="minor" ;;
+    --patch) VERSION_TYPE="patch" ;;
+    *) echo "Unknown option: $arg"; echo "Usage: $0 [-h|--help] [-d|--deploy] [--major|--minor|--patch]"; exit 1 ;;
+  esac
+done
+
+# CONFIGURATION
+REGISTRY="docker.botris.dev"
+USERNAME="johnbotris"
+IMAGE_NAME="femto-webapp"
+
+# Add this before the docker build line
+export VITE_API_URL="https://api.botris.social"
+
+# Step 0: Ensure clean working directory
+if [[ -n $(git status --porcelain) ]]; then
+  echo "❌ Uncommitted changes detected. Please commit or stash them before running this script."
+  exit 1
+fi
+
+# Step 1: Store current version to revert if needed
+OLD_VERSION=$(node -p "require('./package.json').version")
+echo "🔍 Current version: $OLD_VERSION"
+
+# Step 2: Bump version without Git tag/commit
+echo "🚀 Bumping $VERSION_TYPE version..."
+yarn version --$VERSION_TYPE --no-git-tag-version
+NEW_VERSION=$(node -p "require('./package.json').version")
+echo "📦 New version: $NEW_VERSION"
+
+# Step 3: Attempt Docker build
+echo "🔧 Building Docker image..."
+
+if ! docker build --build-arg VITE_API_URL="$VITE_API_URL" -t $IMAGE_NAME .; then
+  echo "❌ Docker build failed. Reverting version bump..."
+  git checkout -- package.json yarn.lock
+  exit 1
+fi
+
+# Step 4: Tag and push Docker image
+FULL_IMAGE="$REGISTRY/$USERNAME/$IMAGE_NAME"
+echo "🏷️ Tagging Docker image..."
+docker tag $IMAGE_NAME $FULL_IMAGE:$NEW_VERSION
+docker tag $IMAGE_NAME $FULL_IMAGE:latest
+
+echo "📤 Pushing Docker images..."
+docker push $FULL_IMAGE:$NEW_VERSION
+docker push $FULL_IMAGE:latest
+
+# Step 5: Commit version bump & tag
+echo "✅ Committing and tagging version bump..."
+git add package.json yarn.lock
+git commit -m "v$NEW_VERSION"
+git tag "v$NEW_VERSION"
+git push origin main
+git push origin "v$NEW_VERSION"
+
+echo "🎉 Release v$NEW_VERSION complete."
+
+# Step 6: Deploy if flag is set
+if [ "$DEPLOY" = true ]; then
+  echo "🚀 Deploying to production..."
+  ssh john@botris.social 'bash /home/john/docker/femto/update.sh'
+  echo "✅ Deployment complete."
+fi
diff --git a/src/App.tsx b/src/App.tsx
index 3694fdf..9063592 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import HomePage from './app/feed/pages/HomePage.tsx'
+import PostPage from './app/feed/pages/PostPage.tsx'
 import SignupPage from './app/auth/pages/SignupPage.tsx'
 import LoginPage from './app/auth/pages/LoginPage.tsx'
 import LogoutPage from './app/auth/pages/LogoutPage.tsx'
@@ -7,13 +8,36 @@ import UnauthorizedHandler from './app/auth/components/UnauthorizedHandler.tsx'
 import AdminPage from './app/admin/pages/AdminPage.tsx'
 import SignupCodesManagementPage from './app/admin/pages/subpages/SignupCodesManagementPage.tsx'
 import { useRefreshSessionLoop } from './useRefreshSessionLoop.ts'
-import { initApp } from './initApp.ts'
+import { setGlobal } from './app/femtoApp.ts'
+import { PostsService } from './app/feed/posts/postsService.ts'
+import { MediaService } from './app/media/mediaService.ts'
+import { AuthService } from './app/auth/authService.ts'
+import { initClient } from './app/api/client.ts'
+import { useEffect } from 'react'
+import { useUserStore } from './app/user/user.ts'
+import { getUserFromCookie } from './app/auth/getUserFromCookie.ts'
 
-const { postService, mediaService, authService } = initApp()
+setGlobal('version', import.meta.env.VITE_FEMTO_VERSION)
+
+const client = initClient()
+const postService = new PostsService(client)
+const mediaService = new MediaService(client)
+const authService = new AuthService(client)
+
+setGlobal('postsService', postService)
+setGlobal('authService', authService)
 
 export default function App() {
+  const setUser = useUserStore((state) => state.setUser)
+
   useRefreshSessionLoop(authService)
 
+  useEffect(() => {
+    const user = getUserFromCookie()
+    console.debug('got user cookie', user)
+    setUser(user)
+  }, [setUser])
+
   return (
     <BrowserRouter>
       <UnauthorizedHandler>
@@ -22,6 +46,7 @@ export default function App() {
             path={'/'}
             element={<HomePage postsService={postService} mediaService={mediaService} />}
           />
+          <Route path={'/p/:postId'} element={<PostPage postsService={postService} />} />
           <Route path="/login" element={<LoginPage authService={authService} />} />
           <Route path="/logout" element={<LogoutPage authService={authService} />} />
           <Route path="/signup/:code?" element={<SignupPage authService={authService} />} />
diff --git a/src/app/admin/pages/subpages/SignupCodesManagementPage.tsx b/src/app/admin/pages/subpages/SignupCodesManagementPage.tsx
index 366d5cd..0075c73 100644
--- a/src/app/admin/pages/subpages/SignupCodesManagementPage.tsx
+++ b/src/app/admin/pages/subpages/SignupCodesManagementPage.tsx
@@ -1,5 +1,5 @@
 import { AuthService } from '../../../auth/authService.ts'
-import { useEffect, useState, useRef, MouseEvent } from 'react'
+import { useEffect, useState, useRef, MouseEvent, useCallback } from 'react'
 import { SignupCode } from '../../../auth/signupCode.ts'
 import { Temporal } from '@js-temporal/polyfill'
 import Button from '../../../../components/buttons/Button.tsx'
@@ -12,25 +12,24 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
   const [codes, setCodes] = useState<SignupCode[]>([])
   const [code, setCode] = useState('')
   const [name, setName] = useState('')
-  const [email, setEmail] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const dialogRef = useRef<HTMLDialogElement>(null)
   const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null)
   const [activeCode, setActiveCode] = useState<string | null>(null)
 
-  const fetchCodes = async () => {
+  const fetchCodes = useCallback(async () => {
     try {
       setCodes(await authService.listSignupCodes())
     } catch (err) {
       console.error('Failed to fetch signup codes:', err)
     }
-  }
+  }, [authService])
 
   useEffect(() => {
     const timeoutId = setTimeout(fetchCodes)
     return () => clearTimeout(timeoutId)
-  }, [authService])
+  }, [authService, fetchCodes])
 
   const handleCreateCode = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -38,12 +37,11 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
     setError(null)
 
     try {
-      await authService.createSignupCode(code, email, name)
+      await authService.createSignupCode(code, name)
       setCode('')
       setName('')
-      setEmail('')
       dialogRef.current?.close()
-      fetchCodes() // Refresh the table
+      fetchCodes()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create signup code')
     } finally {
@@ -116,7 +114,6 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
           <thead>
             <tr>
               <th className="text-left">Code</th>
-              <th className="text-left">Email</th>
               <th className="text-left">Redeemed By</th>
               <th className="text-left">Expires On</th>
             </tr>
@@ -134,7 +131,6 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
                     {code.code}
                   </button>
                 </td>
-                <td>{code.email}</td>
                 <td>{code.redeemedBy || 'Not redeemed'}</td>
                 <td>{formatDate(code.expiresOn)}</td>
               </tr>
@@ -191,20 +187,6 @@ export default function SignupCodesManagementPage({ authService }: SignupCodesMa
             />
           </div>
 
-          <div className="mb-4">
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-              Email
-            </label>
-            <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
-              required
-            />
-          </div>
-
           <div className="flex justify-end space-x-2">
             <Button type="button" onClick={closeDialog} secondary>
               Cancel
diff --git a/src/app/api/client.ts b/src/app/api/client.ts
index 19b8899..eebacdf 100644
--- a/src/app/api/client.ts
+++ b/src/app/api/client.ts
@@ -1,19 +1,25 @@
 import { paths } from './schema.ts'
-import createClient, { Client, Middleware } from 'openapi-fetch'
+import createClient, { Middleware } from 'openapi-fetch'
 import { dispatchMessage } from '../messageBus/messageBus.ts'
+import { useUserStore } from '../user/user.ts'
+import { getUserFromCookie } from '../auth/getUserFromCookie.ts'
 
-export type ApiClient = Client<paths>
-
-export function initClient(): ApiClient {
+export const initClient = () => {
   const client = createClient<paths>({ baseUrl: import.meta.env.VITE_API_URL })
   const UnauthorizedHandlerMiddleware: Middleware = {
     async onResponse({ response }) {
       if (response.status === 401) {
         dispatchMessage('auth:unauthorized', null)
       }
+
+      const user = getUserFromCookie()
+      console.debug('got user cookie', user)
+      useUserStore.getState().setUser(user)
     },
   }
 
   client.use(UnauthorizedHandlerMiddleware)
   return client
 }
+
+export type ApiClient = ReturnType<typeof initClient>
diff --git a/src/app/api/schema.ts b/src/app/api/schema.ts
index da176b8..6af29b3 100644
--- a/src/app/api/schema.ts
+++ b/src/app/api/schema.ts
@@ -9,7 +9,7 @@ export interface paths {
     get: {
       parameters: {
         query?: {
-          From?: string
+          After?: string
           Amount?: number
           AuthorId?: string
           Author?: string
@@ -75,7 +75,30 @@ export interface paths {
       path?: never
       cookie?: never
     }
-    get?: never
+    get: {
+      parameters: {
+        query?: never
+        header?: never
+        path: {
+          postId: string
+        }
+        cookie?: never
+      }
+      requestBody?: never
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content: {
+            'text/plain': components['schemas']['GetPostResponse']
+            'application/json': components['schemas']['GetPostResponse']
+            'text/json': components['schemas']['GetPostResponse']
+          }
+        }
+      }
+    }
     put?: never
     post?: never
     delete: {
@@ -169,6 +192,47 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/posts/{postId}/comments': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    post: {
+      parameters: {
+        query?: never
+        header?: never
+        path: {
+          postId: string
+        }
+        cookie?: never
+      }
+      requestBody: {
+        content: {
+          'application/json': components['schemas']['AddPostCommentRequest']
+          'text/json': components['schemas']['AddPostCommentRequest']
+          'application/*+json': components['schemas']['AddPostCommentRequest']
+        }
+      }
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content?: never
+        }
+      }
+    }
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/media': {
     parameters: {
       query?: never
@@ -334,6 +398,78 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/auth/change-password': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    post: {
+      parameters: {
+        query?: never
+        header?: never
+        path?: never
+        cookie?: never
+      }
+      requestBody: {
+        content: {
+          'application/json': components['schemas']['ChangePasswordRequestBody']
+          'text/json': components['schemas']['ChangePasswordRequestBody']
+          'application/*+json': components['schemas']['ChangePasswordRequestBody']
+        }
+      }
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content?: never
+        }
+      }
+    }
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  '/auth/delete-current-session': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    post: {
+      parameters: {
+        query?: never
+        header?: never
+        path?: never
+        cookie?: never
+      }
+      requestBody?: never
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content?: never
+        }
+      }
+    }
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/auth/session': {
     parameters: {
       query?: never
@@ -391,9 +527,9 @@ export interface paths {
             [name: string]: unknown
           }
           content: {
-            'text/plain': components['schemas']['RefreshUserResult']
-            'application/json': components['schemas']['RefreshUserResult']
-            'text/json': components['schemas']['RefreshUserResult']
+            'text/plain': components['schemas']['GetUserInfoResult']
+            'application/json': components['schemas']['GetUserInfoResult']
+            'text/json': components['schemas']['GetUserInfoResult']
           }
         }
       }
@@ -466,13 +602,99 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/auth/create-signup-code': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    post: {
+      parameters: {
+        query?: never
+        header?: never
+        path?: never
+        cookie?: never
+      }
+      requestBody: {
+        content: {
+          'application/json': components['schemas']['CreateSignupCodeRequest']
+          'text/json': components['schemas']['CreateSignupCodeRequest']
+          'application/*+json': components['schemas']['CreateSignupCodeRequest']
+        }
+      }
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content?: never
+        }
+      }
+    }
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
+  '/auth/list-signup-codes': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get: {
+      parameters: {
+        query?: never
+        header?: never
+        path?: never
+        cookie?: never
+      }
+      requestBody?: never
+      responses: {
+        /** @description OK */
+        200: {
+          headers: {
+            [name: string]: unknown
+          }
+          content: {
+            'text/plain': components['schemas']['ListSignupCodesResult']
+            'application/json': components['schemas']['ListSignupCodesResult']
+            'text/json': components['schemas']['ListSignupCodesResult']
+          }
+        }
+      }
+    }
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
 }
 export type webhooks = Record<string, never>
 export interface components {
   schemas: {
+    AddPostCommentRequest: {
+      /** Format: uuid */
+      authorId: string
+      content: string
+    }
     AddPostReactionRequest: {
       emoji: string
     }
+    ChangePasswordRequestBody: {
+      /** Format: uuid */
+      userId: string
+      newPassword: string
+    }
     CreatePostRequest: {
       /** Format: uuid */
       authorId: string
@@ -502,17 +724,25 @@ export interface components {
     DeletePostReactionRequest: {
       emoji: string
     }
+    GetPostResponse: {
+      post: components['schemas']['PostDto']
+    }
+    GetUserInfoResult: {
+      /** Format: uuid */
+      userId: string
+      username: string
+      isSuperUser: boolean
+    }
     ListSignupCodesResult: {
       signupCodes: components['schemas']['SignupCodeDto'][]
     }
     LoadPostsResponse: {
       posts: components['schemas']['PostDto'][]
-      /** Format: uuid */
-      next: string | null
     }
     LoginRequest: {
       username: string
       password: string
+      rememberMe: boolean
     }
     LoginResponse: {
       /** Format: uuid */
@@ -525,6 +755,12 @@ export interface components {
       authorId: string
       username: string
     }
+    PostCommentDto: {
+      author: string
+      content: string
+      /** Format: date-time */
+      postedOn: string
+    }
     PostDto: {
       author: components['schemas']['PostAuthorDto']
       /** Format: uuid */
@@ -535,6 +771,7 @@ export interface components {
       /** Format: date-time */
       createdAt: string
       possibleReactions: string[]
+      comments: components['schemas']['PostCommentDto'][]
     }
     PostMediaDto: {
       /** Format: uri */
@@ -546,21 +783,15 @@ export interface components {
     }
     PostReactionDto: {
       emoji: string
-      /** Format: int32 */
-      count: number
-      didReact: boolean
-    }
-    RefreshUserResult: {
-      /** Format: uuid */
-      userId: string
-      username: string
-      isSuperUser: boolean
+      authorName: string
+      /** Format: date-time */
+      reactedOn: string
     }
     RegisterRequest: {
       username: string
       password: string
       signupCode: string
-      email: string | null
+      rememberMe: boolean
     }
     RegisterResponse: {
       /** Format: uuid */
diff --git a/src/app/auth/authService.ts b/src/app/auth/authService.ts
index 51e56fa..ad1c9bc 100644
--- a/src/app/auth/authService.ts
+++ b/src/app/auth/authService.ts
@@ -6,9 +6,9 @@ import { ApiClient } from '../api/client.ts'
 export class AuthService {
   constructor(private readonly client: ApiClient) {}
 
-  async login(username: string, password: string) {
+  async login(username: string, password: string, rememberMe: boolean = false) {
     const res = await this.client.POST('/auth/login', {
-      body: { username, password },
+      body: { username, password, rememberMe },
       credentials: 'include',
     })
 
@@ -19,9 +19,14 @@ export class AuthService {
     dispatchMessage('auth:logged-in', null)
   }
 
-  async signup(username: string, password: string, signupCode: string) {
+  async signup(
+    username: string,
+    password: string,
+    signupCode: string,
+    rememberMe: boolean = false,
+  ) {
     const res = await this.client.POST('/auth/register', {
-      body: { username, password, signupCode, email: null },
+      body: { username, password, signupCode, email: null, rememberMe },
       credentials: 'include',
     })
 
@@ -39,9 +44,9 @@ export class AuthService {
     dispatchMessage('auth:logged-out', null)
   }
 
-  async createSignupCode(code: string, email: string, name: string) {
+  async createSignupCode(code: string, name: string) {
     const res = await this.client.POST('/auth/signup-codes', {
-      body: { code, email, name },
+      body: { code, email: '', name },
       credentials: 'include',
     })
 
diff --git a/src/app/auth/components/AuthNavButtons.tsx b/src/app/auth/components/AuthNavButtons.tsx
index 6e58d01..0c5141b 100644
--- a/src/app/auth/components/AuthNavButtons.tsx
+++ b/src/app/auth/components/AuthNavButtons.tsx
@@ -1,9 +1,11 @@
-import { useUser } from '../../user/user.ts'
 import NavButton from '../../../components/buttons/NavButton.tsx'
 import { useLocation } from 'react-router-dom'
+import { useTranslations } from '../../i18n/translations.ts'
+import { useUserStore } from '../../user/user.ts'
 
 export default function AuthNavButtons() {
-  const user = useUser()
+  const { t } = useTranslations()
+  const user = useUserStore((state) => state.user)
 
   const { pathname } = useLocation()
 
@@ -15,15 +17,15 @@ export default function AuthNavButtons() {
   if (loggedIn) {
     return (
       <>
-        <NavButton to="/logout">logout</NavButton>
+        <NavButton to="/logout">{t('nav.logout')}</NavButton>
       </>
     )
   } else {
     const search = redirectQuery.toString()
     return (
       <>
-        <NavButton to={{ pathname: '/login', search }}>login</NavButton>
-        <NavButton to={{ pathname: '/signup', search }}>register</NavButton>
+        <NavButton to={{ pathname: '/login', search }}>{t('nav.login')}</NavButton>
+        <NavButton to={{ pathname: '/signup', search }}>{t('nav.register')}</NavButton>
       </>
     )
   }
diff --git a/src/app/auth/components/Protected.tsx b/src/app/auth/components/Protected.tsx
index f5ea238..19d71bb 100644
--- a/src/app/auth/components/Protected.tsx
+++ b/src/app/auth/components/Protected.tsx
@@ -1,9 +1,9 @@
-import { useUser } from '../../user/user.ts'
 import { useNavigate, Outlet } from 'react-router-dom'
 import { useEffect } from 'react'
+import { useUserStore } from '../../user/user.ts'
 
 export default function Protected() {
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
 
   const navigate = useNavigate()
 
diff --git a/src/app/auth/components/RefreshUser.tsx b/src/app/auth/components/RefreshUser.tsx
index 8796381..7d1db08 100644
--- a/src/app/auth/components/RefreshUser.tsx
+++ b/src/app/auth/components/RefreshUser.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useRef } from 'react'
 import { AuthService } from '../authService.ts'
-import { useUser } from '../../user/user.ts'
+import { useUserStore } from '../../user/user.ts'
 
 interface RefreshUserProps {
   authService: AuthService
@@ -10,7 +10,7 @@ export default function RefreshUser({
   authService,
   children,
 }: PropsWithChildren<RefreshUserProps>) {
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
   const didRefresh = useRef(false)
 
   useEffect(() => {
diff --git a/src/app/auth/getUserFromCookie.ts b/src/app/auth/getUserFromCookie.ts
new file mode 100644
index 0000000..00bd891
--- /dev/null
+++ b/src/app/auth/getUserFromCookie.ts
@@ -0,0 +1,11 @@
+import { User } from '../user/user.ts'
+import { getCookie } from './cookies.ts'
+
+export function getUserFromCookie(): User | null {
+  const userCookie = getCookie('user')
+
+  if (!userCookie) return null
+
+  // TODO validate but it should be fine
+  return JSON.parse(decodeURIComponent(userCookie)) as User
+}
diff --git a/src/app/auth/pages/LoginPage.tsx b/src/app/auth/pages/LoginPage.tsx
index 5163d71..8b914ca 100644
--- a/src/app/auth/pages/LoginPage.tsx
+++ b/src/app/auth/pages/LoginPage.tsx
@@ -4,25 +4,29 @@ import TextInput from '../../../components/inputs/TextInput.tsx'
 import Button from '../../../components/buttons/Button.tsx'
 import { AuthService } from '../authService.ts'
 import { useNavigate } from 'react-router-dom'
-import { useUser } from '../../user/user.ts'
+import { useUserStore } from '../../user/user.ts'
 import NavBar from '../../../components/NavBar.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
 import LinkButton from '../../../components/buttons/LinkButton.tsx'
+import { useTranslations } from '../../i18n/translations.ts'
 
 interface LoginPageProps {
   authService: AuthService
 }
 
 export default function LoginPage({ authService }: LoginPageProps) {
+  const { t } = useTranslations()
+
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const usernameInputRef = useRef<HTMLInputElement | null>(null)
   const passwordInputRef = useRef<HTMLInputElement | null>(null)
   const navigate = useNavigate()
 
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
 
   useEffect(() => {
     if (user) {
@@ -49,7 +53,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
     setIsSubmitting(true)
 
     try {
-      await authService.login(username, password)
+      await authService.login(username, password, rememberMe)
     } catch (error: unknown) {
       setError(error instanceof Error ? error.message : 'something went terribly wrong')
     } finally {
@@ -61,7 +65,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
     <SingleColumnLayout
       navbar={
         <NavBar>
-          <NavButton to={'/'}>home</NavButton>
+          <NavButton to={'/'}>{t('nav.home')}</NavButton>
         </NavBar>
       }
     >
@@ -70,7 +74,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
             <div className="flex flex-col gap-1">
               <label htmlFor="username" className="text-sm text-gray-600">
-                username
+                {t('auth.username.label')}
               </label>
               <TextInput
                 ref={usernameInputRef}
@@ -83,7 +87,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
 
             <div className="flex flex-col gap-1">
               <label htmlFor="password" className="text-sm text-gray-600">
-                password
+                {t('auth.password.label')}
               </label>
               <TextInput
                 ref={passwordInputRef}
@@ -91,19 +95,32 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 id="password"
                 value={password}
                 onInput={setPassword}
-                className={'mb-3'}
+                className={'mb-4'}
               />
             </div>
 
+            <div className="flex items-center gap-2 ">
+              <input
+                type="checkbox"
+                id="rememberMe"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="h-4 w-4"
+              />
+              <label htmlFor="rememberMe" className="text-sm text-gray-600">
+                {t('auth.remember_me.label')}
+              </label>
+            </div>
+
             <Button className="mt-4" disabled={isSubmitting} type="submit">
-              {isSubmitting ? 'wait...' : 'make login pls'}
+              {isSubmitting ? t('misc.loading') : t('auth.login.cta')}
             </Button>
 
             <LinkButton secondary to={{ pathname: '/signup', search: window.location.search }}>
-              register instead?
+              {t('auth.login.register_instead')}
             </LinkButton>
 
-            <span className="text-xs h-3 text-red-500">{error}</span>
+            <span className={'text-xs h-3 text-red-500'}>{error}</span>
           </form>
         </div>
       </main>
diff --git a/src/app/auth/pages/LogoutPage.tsx b/src/app/auth/pages/LogoutPage.tsx
index dea8a72..dfceb5c 100644
--- a/src/app/auth/pages/LogoutPage.tsx
+++ b/src/app/auth/pages/LogoutPage.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { AuthService } from '../authService.ts'
 import { useEffect } from 'react'
-import { useUser } from '../../user/user.ts'
+import { useUserStore } from '../../user/user.ts'
 
 interface LogoutPageProps {
   authService: AuthService
@@ -9,7 +9,7 @@ interface LogoutPageProps {
 
 export default function LogoutPage({ authService }: LogoutPageProps) {
   const navigate = useNavigate()
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
 
   useEffect(() => {
     if (!user) {
diff --git a/src/app/auth/pages/SignupPage.tsx b/src/app/auth/pages/SignupPage.tsx
index 19b2ab4..40cbb37 100644
--- a/src/app/auth/pages/SignupPage.tsx
+++ b/src/app/auth/pages/SignupPage.tsx
@@ -3,12 +3,12 @@ import { useEffect, useRef, useState, FormEvent, useCallback, Ref } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
 import TextInput from '../../../components/inputs/TextInput.tsx'
 import Button from '../../../components/buttons/Button.tsx'
-import AnchorButton from '../../../components/buttons/AnchorButton.tsx'
 import { invalid, valid, Validation } from '../../../utils/validation.ts'
 import { AuthService } from '../authService.ts'
 import LinkButton from '../../../components/buttons/LinkButton.tsx'
 import NavBar from '../../../components/NavBar.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
+import { useTranslations } from '../../i18n/translations.ts'
 
 const SignupCodeKey = 'signupCode'
 
@@ -17,9 +17,11 @@ interface SignupPageProps {
 }
 
 export default function SignupPage({ authService }: SignupPageProps) {
+  const { t } = useTranslations()
   const { code } = useParams()
   const [signupCode, setSignupCode] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState<string>('')
   const [username, setUsername, usernameError, validateUsername] =
     useValidatedInput(isValidUsername)
@@ -30,8 +32,6 @@ export default function SignupPage({ authService }: SignupPageProps) {
   const userNameInputRef = useRef<HTMLInputElement | null>(null)
   const passwordInputRef = useRef<HTMLInputElement | null>(null)
 
-  const dialogRef = useRef<HTMLDialogElement | null>(null)
-
   const navigate = useNavigate()
 
   useEffect(() => {
@@ -46,10 +46,6 @@ export default function SignupPage({ authService }: SignupPageProps) {
       theSignupCode = localStorage.getItem(SignupCodeKey)
       setSignupCode(theSignupCode)
     }
-
-    if (!theSignupCode) {
-      dialogRef.current?.showModal()
-    }
   }, [code, signupCode])
 
   useEffect(() => {}, [signupCode])
@@ -79,7 +75,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
     setIsSubmitting(true)
 
     try {
-      await authService.signup(username, password, signupCode)
+      await authService.signup(username, password, signupCode, rememberMe)
       navigate('/')
     } catch (e: unknown) {
       const err = e as Error
@@ -93,7 +89,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
     <SingleColumnLayout
       navbar={
         <NavBar>
-          <NavButton to={'/'}>home</NavButton>
+          <NavButton to={'/'}>{t('nav.home')}</NavButton>
         </NavBar>
       }
     >
@@ -102,6 +98,7 @@ export default function SignupPage({ authService }: SignupPageProps) {
           <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
             <FormInput
               id="username"
+              label={t('auth.username.label')}
               value={username}
               onInput={setUsername}
               error={usernameError}
@@ -110,55 +107,47 @@ export default function SignupPage({ authService }: SignupPageProps) {
 
             <FormInput
               id="password"
+              label={t('auth.password.label')}
               value={password}
               onInput={setPassword}
               error={passwordError}
               type="password"
               ref={passwordInputRef}
             />
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                id="rememberMe"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="h-4 w-4"
+              />
+              <label htmlFor="rememberMe" className="text-sm text-gray-600">
+                {t('auth.remember_me.label')}
+              </label>
+            </div>
             <Button
               className="mt-4"
               disabled={isSubmitting || !!usernameError || !!passwordError}
               type="submit"
             >
-              {isSubmitting ? 'wait...' : 'give me an account pls'}
+              {isSubmitting ? t('misc.loading') : t('auth.register.cta')}
             </Button>
             <LinkButton secondary to={'/login'}>
-              login instead?
+              {t('auth.register.login_instead')}
             </LinkButton>
 
             <span className="text-xs h-3 text-red-500">{error}</span>
           </form>
         </div>
       </main>
-
-      <dialog
-        id="go-away-dialog"
-        ref={dialogRef}
-        className="p-6 rounded-lg shadow-lg m-auto outline-none"
-      >
-        <div className="text-gray-600 flex flex-col gap-2">
-          <h1 className={`font-bold text-lg`}>STOP !!!</h1>
-          <p>You need an invitation to sign up</p>
-          <p>
-            I'm surprised you even found your way here without one and honestly I'd prefer it if you
-            would leave
-          </p>
-          <p>
-            If you <span className="italic">do</span> want to create an account, you should know who
-            to contact
-          </p>
-          <AnchorButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
-            I'm sorry I'll go somewhere else :(
-          </AnchorButton>
-        </div>
-      </dialog>
     </SingleColumnLayout>
   )
 }
 
 interface FormInputProps {
   id: string
+  label: string
   value: string
   onInput: (value: string) => void
   error: string | null
@@ -166,11 +155,11 @@ interface FormInputProps {
   ref: Ref<HTMLInputElement>
 }
 
-function FormInput({ id, value, onInput, error, type = 'text', ref }: FormInputProps) {
+function FormInput({ id, label, value, onInput, error, type = 'text', ref }: FormInputProps) {
   return (
     <div className="flex flex-col gap-1">
       <label htmlFor={id} className="text-sm text-gray-600">
-        {id}
+        {label}
       </label>
       <TextInput ref={ref} type={type} id={id} value={value} onInput={onInput} />
       <div className="text-xs h-3 text-red-500">{error}</div>
diff --git a/src/app/feed/components/NewCommentWidget.tsx b/src/app/feed/components/NewCommentWidget.tsx
new file mode 100644
index 0000000..3d2e4ea
--- /dev/null
+++ b/src/app/feed/components/NewCommentWidget.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import FancyTextEditor, {
+  TextInputKeyDownEvent,
+} from '../../../components/inputs/FancyTextEditor.tsx'
+import Button from '../../../components/buttons/Button.tsx'
+import { useTranslations } from '../../i18n/translations.ts'
+
+interface NewCommentWidgetProps {
+  onSubmit: (content: string) => void
+  isSubmitting?: boolean
+}
+
+export default function NewCommentWidget({
+  onSubmit,
+  isSubmitting = false,
+}: NewCommentWidgetProps) {
+  const { t } = useTranslations()
+  const [content, setContent] = useState('')
+
+  const onContentInput = (value: string) => {
+    setContent(value)
+  }
+
+  const handleSubmit = () => {
+    if (!content.trim()) {
+      return
+    }
+
+    onSubmit(content)
+
+    setContent('')
+  }
+
+  const onInputKeyDown = (e: TextInputKeyDownEvent) => {
+    if (e.key === 'Enter' && e.ctrlKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  return (
+    <div className="w-full p-4 border-b border-gray-200">
+      <FancyTextEditor
+        value={content}
+        onInput={onContentInput}
+        onKeyDown={onInputKeyDown}
+        className="mb-3"
+        placeholder={t('post.editor.placeholder')}
+      />
+
+      <div className="flex justify-end items-center">
+        <Button onClick={handleSubmit} disabled={isSubmitting || content.trim() === ''}>
+          {t('post.submit.cta')}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/NewPostWidget.tsx b/src/app/feed/components/NewPostWidget.tsx
similarity index 87%
rename from src/components/NewPostWidget.tsx
rename to src/app/feed/components/NewPostWidget.tsx
index 7146bc7..e0bd87a 100644
--- a/src/components/NewPostWidget.tsx
+++ b/src/app/feed/components/NewPostWidget.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import FancyTextEditor, { TextInputKeyDownEvent } from './inputs/FancyTextEditor.tsx'
-import Button from './buttons/Button.tsx'
-import { openFileDialog } from '../utils/openFileDialog.ts'
+import FancyTextEditor, { TextInputKeyDownEvent } from '../../../components/inputs/FancyTextEditor.tsx'
+import Button from '../../../components/buttons/Button.tsx'
+import { openFileDialog } from '../../../utils/openFileDialog.ts'
 import makePica from 'pica'
+import { useTranslations } from '../../i18n/translations.ts'
 
 interface NewPostWidgetProps {
   onSubmit: (
@@ -22,6 +23,7 @@ interface Attachment {
 }
 
 export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPostWidgetProps) {
+  const { t } = useTranslations()
   const [content, setContent] = useState('')
   const [attachments, setAttachments] = useState<Attachment[]>([])
   const [isPublic, setIsPublic] = useState(false)
@@ -72,7 +74,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
         onInput={onContentInput}
         onKeyDown={onInputKeyDown}
         className="mb-3"
-        placeholder="write something..."
+        placeholder={t('post.editor.placeholder')}
       />
 
       {attachments.length > 0 && (
@@ -93,7 +95,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       <div className="flex justify-between items-center pt-2">
         <div className="flex items-center gap-2">
           <Button secondary onClick={onAddMediaClicked}>
-            + add media
+            {t('post.add_media.cta')}
           </Button>
           <label className="flex items-center gap-1 cursor-pointer">
             <input
@@ -103,14 +105,14 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
               disabled={isSubmitting}
               className="form-checkbox h-4 w-4 text-blue-600"
             />
-            <span className="text-primary-500">public</span>
+            <span className="text-primary-500">{t('post.public.label')}</span>
           </label>
         </div>
         <Button
           onClick={handleSubmit}
           disabled={isSubmitting || (content.trim() === '' && attachments.length === 0)}
         >
-          post
+          {t('post.submit.cta')}
         </Button>
       </div>
     </div>
@@ -196,7 +198,15 @@ async function optimizeImageSize(
   dstCanvas.width = width
   dstCanvas.height = height
 
-  await pica.resize(srcCanvas, dstCanvas)
+  try {
+    // TODO resistFingerprinting in FF and other causes this to break.
+    //      knowing this, i would still rather be able to post from other browsers for now
+    //      and will hopefully find a better solution
+    await pica.resize(srcCanvas, dstCanvas)
+  } catch (e) {
+    console.error('cant resize image', e)
+    return file
+  }
 
   let blob = await pica.toBlob(dstCanvas, outputType, quality)
 
diff --git a/src/app/feed/components/PostItem.tsx b/src/app/feed/components/PostItem.tsx
index a0a541c..db766f6 100644
--- a/src/app/feed/components/PostItem.tsx
+++ b/src/app/feed/components/PostItem.tsx
@@ -1,13 +1,24 @@
-import { Post, PostMedia } from '../posts/posts.ts'
+import { PostMedia, PostReaction } from '../posts/posts.ts'
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { PostInfo } from '../posts/usePostViewModel.ts'
+import { useUserStore } from '../../user/user.ts'
 
 interface PostItemProps {
-  post: Post
+  post: PostInfo
+  reactions: PostReaction[]
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
+  hideViewButton?: boolean
 }
 
-export default function PostItem({ post, addReaction, clearReaction }: PostItemProps) {
+export default function PostItem({
+  post,
+  reactions,
+  addReaction,
+  clearReaction,
+  hideViewButton = false,
+}: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -31,6 +42,14 @@ export default function PostItem({ post, addReaction, clearReaction }: PostItemP
     <article className={`w-full p-4 ${opacity} transition-opacity duration-500`} key={post.postId}>
       <div className="text-sm text-gray-500 mb-3">
         <span className="text-gray-400 mr-2">@{post.authorName}</span>• {formattedDate}
+        {!hideViewButton && (
+          <>
+            {' • '}
+            <Link to={`/p/${post.postId}`} className="ml-2 text-primary-400 hover:underline">
+              View
+            </Link>
+          </>
+        )}
       </div>
 
       <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
@@ -43,26 +62,30 @@ export default function PostItem({ post, addReaction, clearReaction }: PostItemP
         </div>
       )}
 
-      <PostReactions post={post} addReaction={addReaction} clearReaction={clearReaction} />
+      <PostReactions
+        post={post}
+        reactions={reactions}
+        addReaction={addReaction}
+        clearReaction={clearReaction}
+      />
     </article>
   )
 }
 
 interface PostReactionsProps {
-  post: Post
+  post: PostInfo
+  reactions: PostReaction[]
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
 }
 
-function PostReactions({ post, addReaction, clearReaction }: PostReactionsProps) {
-  const reactionMap = new Map(post.reactions.map((r) => [r.emoji, r]))
-
+function PostReactions({ post, reactions, addReaction, clearReaction }: PostReactionsProps) {
+  const username = useUserStore((state) => state.user?.username)
   return (
     <div className="flex flex-wrap gap-2 mt-3 justify-end">
       {post.possibleReactions.map((emoji) => {
-        const reaction = reactionMap.get(emoji)
-        const count = reaction?.count ?? 0
-        const didReact = reaction?.didReact ?? false
+        const count = reactions.filter((r) => r.emoji === emoji).length
+        const didReact = reactions.some((r) => r.emoji == emoji && r.authorName == username)
         const onClick = () => {
           if (didReact) {
             clearReaction(emoji)
@@ -99,7 +122,7 @@ function PostReactionButton({ emoji, didReact, onClick, count }: PostReactionBut
     <button
       key={emoji}
       onClick={onClick}
-      className={`flex items-center px-2 py-1 rounded-full border ${
+      className={`flex items-center px-2 py-1 rounded-full border cursor-pointer ${
         didReact ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
       } hover:bg-gray-100 transition-colors`}
     >
@@ -127,7 +150,6 @@ function PostMediaItem({ media }: PostMediaProps) {
       width={width}
       height={height}
       src={url.toString()}
-      alt="todo sry :("
       className="w-full h-auto"
       loading="lazy"
     />
diff --git a/src/app/feed/components/PostTimeline.tsx b/src/app/feed/components/PostTimeline.tsx
new file mode 100644
index 0000000..c9653f1
--- /dev/null
+++ b/src/app/feed/components/PostTimeline.tsx
@@ -0,0 +1,67 @@
+import { PostComment, PostReaction } from '../posts/posts.ts'
+import { Temporal } from '@js-temporal/polyfill'
+
+interface PostTimelineProps {
+  reactions: PostReaction[]
+  comments: PostComment[]
+}
+
+export function PostTimeline({ reactions, comments }: PostTimelineProps) {
+  const items = [
+    ...reactions.map((reaction) => ({
+      timestamp: reaction.reactedOn,
+      component: (
+        <ReactionItem
+          key={'reaction-' + reaction.authorName + reaction.reactedOn.toString()}
+          reaction={reaction}
+        />
+      ),
+    })),
+    ...comments.map((comment) => ({
+      timestamp: comment.postedOn,
+      component: (
+        <CommentItem
+          key={'comment-' + comment.author + comment.postedOn.toString()}
+          comment={comment}
+        />
+      ),
+    })),
+  ].toSorted((a, b) => Temporal.Instant.compare(a.timestamp, b.timestamp))
+
+  return (
+    <div className={`flex flex-col gap-4 mb-4 px-4`}>{items.map((item) => item.component)}</div>
+  )
+}
+
+function ReactionItem({ reaction }: { reaction: PostReaction }) {
+  return (
+    <div className={`flex flex-col`}>
+      <span className={`text-gray-400 text-xs -mb-0.5`}>{formatItemDate(reaction.reactedOn)}</span>
+      <div className={`flex flex-row items-baseline text-gray-400`}>
+        <span>@{reaction.authorName}</span>&nbsp;
+        <span>clicked</span>&nbsp;
+        <span>{reaction.emoji}</span>
+      </div>
+    </div>
+  )
+}
+
+function CommentItem({ comment }: { comment: PostComment }) {
+  return (
+    <div className={`flex flex-col`}>
+      <div className={`text-gray-400 text-xs -mb-0.5`}>{formatItemDate(comment.postedOn)}</div>
+      <div className={`flex flex-row items-baseline text-gray-500`}>
+        <span className={`text-gray-400`}>@{comment.author}</span>&nbsp;
+      </div>
+      <div className={`ml-1 text-gray-600`}>{comment.content}</div>
+    </div>
+  )
+}
+
+function formatItemDate(date: Temporal.Instant) {
+  return date.toLocaleString('en-AU', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  })
+}
diff --git a/src/app/feed/pages/HomePage.tsx b/src/app/feed/pages/HomePage.tsx
index 738d168..b505d83 100644
--- a/src/app/feed/pages/HomePage.tsx
+++ b/src/app/feed/pages/HomePage.tsx
@@ -1,16 +1,17 @@
-import { useCallback, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { PostsService } from '../posts/postsService.ts'
-import { useUser } from '../../user/user.ts'
+import { useUserStore } from '../../user/user.ts'
 import { MediaService } from '../../media/mediaService.ts'
-import NewPostWidget from '../../../components/NewPostWidget.tsx'
+import NewPostWidget from '../components/NewPostWidget.tsx'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
 import NavBar from '../../../components/NavBar.tsx'
 import AuthNavButtons from '../../auth/components/AuthNavButtons.tsx'
 import { useSaveSignupCodeToLocalStorage } from '../../../hooks/useSaveSignupCodeToLocalStorage.ts'
-import { Post } from '../posts/posts.ts'
-import { produce, WritableDraft } from 'immer'
 import PostItem from '../components/PostItem.tsx'
 import { useIntersectionLoad } from '../../../hooks/useIntersectionLoad.ts'
+import { delay } from '../../../utils/delay.ts'
+import { usePostViewModel } from '../posts/usePostViewModel.ts'
+import { Temporal } from '@js-temporal/polyfill'
 
 interface HomePageProps {
   postsService: PostsService
@@ -20,111 +21,79 @@ interface HomePageProps {
 const PageSize = 20
 
 export default function HomePage({ postsService, mediaService }: HomePageProps) {
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
   useSaveSignupCodeToLocalStorage()
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const fetchPosts = useCallback(
-    async (cursor: string | null, amount: number | null) => {
-      return postsService.loadPublicFeed(cursor, amount)
-    },
-    [postsService],
-  )
+  const { posts, addPosts, addReaction, removeReaction, reactions } = usePostViewModel()
 
-  const [posts, setPosts] = useState<Post[]>([])
   const [hasMore, setHasMore] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
   const cursor = useRef<string | null>(null)
   const loading = useRef(false)
 
-  const loadNextPage = useCallback(async () => {
+  const loadNextPage = async () => {
     if (loading.current || !hasMore || error) return
     loading.current = true
 
     try {
-      const delay = new Promise((resolve) => setTimeout(resolve, 500))
-      const pagePromise = fetchPosts(cursor.current, PageSize)
-      const [page] = await Promise.all([pagePromise, delay])
-      setHasMore(page.length >= PageSize)
-      cursor.current = page.at(-1)?.postId ?? null
-      setPosts((prev) => [...prev, ...page])
+      const [{ posts }] = await Promise.all([
+        postsService.loadPublicFeed(cursor.current, PageSize),
+        delay(500),
+      ])
+
+      setHasMore(posts.length >= PageSize)
+      cursor.current = posts.at(-1)?.postId ?? null
+      addPosts(posts)
     } catch (e: unknown) {
-      const err = e as Error
-      setError(err.message)
+      setError((e as Error).message)
     } finally {
       loading.current = false
     }
-  }, [fetchPosts, hasMore, error])
+  }
 
-  const onCreatePost = useCallback(
-    async (
-      content: string,
-      files: { file: File; width: number; height: number }[],
-      isPublic: boolean,
-    ) => {
-      setIsSubmitting(true)
-      if (user == null) throw new Error('Not logged in')
-      try {
-        const media = await Promise.all(
-          files.map(async ({ file, width, height }) => {
-            const { mediaId, url } = await mediaService.uploadImage(file)
+  const onCreatePost = async (
+    content: string,
+    files: { file: File; width: number; height: number }[],
+    isPublic: boolean,
+  ) => {
+    setIsSubmitting(true)
+    if (user == null) throw new Error('Not logged in')
+    try {
+      const media = await Promise.all(
+        files.map(async ({ file, width, height }) => {
+          const { mediaId, url } = await mediaService.uploadImage(file)
 
-            return {
-              mediaId,
-              url,
-              width,
-              height,
-            }
-          }),
-        )
-        const post = await postsService.createNew(user.id, content, media, isPublic)
-        setPosts((pages) => [post, ...pages])
-      } catch (error) {
-        console.error('Failed to create post:', error)
-      } finally {
-        setIsSubmitting(false)
-      }
-    },
-    [mediaService, postsService, setPosts, user],
-  )
+          return {
+            mediaId,
+            url,
+            width,
+            height,
+          }
+        }),
+      )
+      const post = await postsService.createNew(user.id, content, media, isPublic)
+      addPosts([post])
+    } catch (error) {
+      console.error('Failed to create post:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
 
   const isLoggedIn = user != null
 
   const onAddReaction = async (postId: string, emoji: string) => {
     await postsService.addReaction(postId, emoji)
 
-    setPosts((prev) =>
-      produce(prev, (draft: WritableDraft<Post[]>) => {
-        const post = draft.find((p) => p.postId === postId)
-        if (!post) return
-
-        const theReaction = post.reactions.find((r) => r.emoji === emoji)
-        if (theReaction) {
-          theReaction.count++
-          theReaction.didReact = true
-        } else {
-          post.reactions.push({ emoji, count: 1, didReact: true })
-        }
-      }),
-    )
+    addReaction(postId, emoji, user!.username, Temporal.Now.instant())
   }
 
   const onClearReaction = async (postId: string, emoji: string) => {
     await postsService.removeReaction(postId, emoji)
 
-    setPosts((prev) =>
-      produce(prev, (draft: WritableDraft<Post[]>) => {
-        const post = draft.find((p) => p.postId === postId)
-        if (!post) return
-
-        const theReaction = post.reactions.find((r) => r.emoji === emoji)
-        if (theReaction) {
-          theReaction.count = Math.max(theReaction.count - 1, 0)
-          theReaction.didReact = false
-        }
-      }),
-    )
+    removeReaction(postId, emoji, user!.username)
   }
 
   const sentinelRef = useRef<HTMLDivElement | null>(null)
@@ -147,6 +116,7 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
                 <PostItem
                   key={post.postId}
                   post={post}
+                  reactions={reactions[post.postId] ?? []}
                   addReaction={(emoji) => onAddReaction(post.postId, emoji)}
                   clearReaction={(emoji) => onClearReaction(post.postId, emoji)}
                 />
diff --git a/src/app/feed/pages/PostPage.tsx b/src/app/feed/pages/PostPage.tsx
new file mode 100644
index 0000000..b275b68
--- /dev/null
+++ b/src/app/feed/pages/PostPage.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { PostsService } from '../posts/postsService.ts'
+import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
+import NavBar from '../../../components/NavBar.tsx'
+import AuthNavButtons from '../../auth/components/AuthNavButtons.tsx'
+import PostItem from '../components/PostItem.tsx'
+import NavButton from '../../../components/buttons/NavButton.tsx'
+import { useTranslations } from '../../i18n/translations.ts'
+import { usePostViewModel } from '../posts/usePostViewModel.ts'
+import { Temporal } from '@js-temporal/polyfill'
+import { useUserStore } from '../../user/user.ts'
+import { PostTimeline } from '../components/PostTimeline.tsx'
+import NewCommentWidget from '../components/NewCommentWidget.tsx'
+
+interface PostPageProps {
+  postsService: PostsService
+}
+
+export default function PostPage({ postsService }: PostPageProps) {
+  const { postId } = useParams<{ postId: string }>()
+  const { posts, setPosts, addReaction, reactions: _reactions, removeReaction } = usePostViewModel()
+  const { t } = useTranslations()
+  const username = useUserStore((state) => state.user?.username)
+  const post = posts.at(0)
+  const reactions = (post?.postId ? _reactions[post.postId] : []) ?? []
+
+  const loadPost = useCallback(() => {
+    if (!postId) return
+    postsService.load(postId).then((post) => setPosts(post ? [post] : []))
+  }, [postId, postsService, setPosts])
+
+  useEffect(() => {
+    loadPost()
+  }, [loadPost])
+
+  const onAddReaction = async (emoji: string) => {
+    if (!username) return
+    if (!post) return
+
+    await postsService.addReaction(post.postId, emoji)
+
+    addReaction(post.postId, emoji, username, Temporal.Now.instant())
+  }
+
+  const onClearReaction = async (emoji: string) => {
+    if (!username) return
+    if (!post) return
+
+    await postsService.removeReaction(post.postId, emoji)
+    removeReaction(post.postId, emoji, username)
+  }
+
+  async function onSubmitComment(content: string) {
+    if (!postId) return
+    if (!content.trim()) return
+
+    try {
+      setIsSubmittingComment(true)
+      await postsService.addComment(postId, content)
+    } finally {
+      setIsSubmittingComment(false)
+    }
+
+    loadPost()
+  }
+
+  const [isSubmittingComment, setIsSubmittingComment] = useState(false)
+
+  return (
+    <SingleColumnLayout
+      navbar={
+        <NavBar>
+          <NavButton to={{ pathname: '/' }}>{t('nav.home')}</NavButton>
+          <AuthNavButtons />
+        </NavBar>
+      }
+    >
+      <main className="w-full max-w-3xl mx-auto">
+        {post && (
+          <div className="w-full">
+            <PostItem
+              post={post}
+              reactions={reactions}
+              addReaction={onAddReaction}
+              clearReaction={onClearReaction}
+              hideViewButton={true}
+            />
+            <PostTimeline reactions={reactions} comments={post.comments} />
+            <NewCommentWidget onSubmit={onSubmitComment} isSubmitting={isSubmittingComment} />
+          </div>
+        )}
+      </main>
+    </SingleColumnLayout>
+  )
+}
diff --git a/src/app/feed/posts/posts.ts b/src/app/feed/posts/posts.ts
index bcd1b0b..837e2b8 100644
--- a/src/app/feed/posts/posts.ts
+++ b/src/app/feed/posts/posts.ts
@@ -2,10 +2,16 @@ import { Temporal } from '@js-temporal/polyfill'
 import { components } from '../../api/schema.ts'
 import { immerable } from 'immer'
 
-export interface EmojiReaction {
+export interface PostReaction {
   emoji: string
-  count: number
-  didReact: boolean
+  authorName: string
+  reactedOn: Temporal.Instant
+}
+
+export interface PostComment {
+  author: string
+  content: string
+  postedOn: Temporal.Instant
 }
 
 export class Post {
@@ -16,8 +22,9 @@ export class Post {
   public readonly media: PostMedia[]
   public readonly createdAt: Temporal.Instant
   public readonly authorName: string
-  public readonly reactions: EmojiReaction[]
+  public readonly reactions: PostReaction[]
   public readonly possibleReactions: string[]
+  public readonly comments: PostComment[]
 
   constructor(
     postId: string,
@@ -25,8 +32,9 @@ export class Post {
     media: PostMedia[],
     createdAt: string | Temporal.Instant,
     authorName: string,
-    reactions: EmojiReaction[] = [],
-    possibleReactions: string[] = [],
+    reactions: PostReaction[],
+    possibleReactions: string[],
+    comments: PostComment[],
   ) {
     this.postId = postId
     this.content = content
@@ -35,6 +43,7 @@ export class Post {
     this.authorName = authorName
     this.reactions = reactions
     this.possibleReactions = possibleReactions
+    this.comments = comments
   }
 
   public static fromDto(dto: components['schemas']['PostDto']): Post {
@@ -44,12 +53,9 @@ export class Post {
       dto.media.map((m) => new PostMediaImpl(new URL(m.url), m.width, m.height)),
       Temporal.Instant.from(dto.createdAt),
       dto.author.username,
-      dto.reactions.map((r) => ({
-        emoji: r.emoji,
-        count: r.count,
-        didReact: r.didReact,
-      })),
+      dto.reactions.map((r) => ({ ...r, reactedOn: Temporal.Instant.from(r.reactedOn) })),
       dto.possibleReactions,
+      dto.comments.map((c) => ({ ...c, postedOn: Temporal.Instant.from(c.postedOn) })),
     )
   }
 }
diff --git a/src/app/feed/posts/postsService.ts b/src/app/feed/posts/postsService.ts
index e6c2c88..72e55f7 100644
--- a/src/app/feed/posts/postsService.ts
+++ b/src/app/feed/posts/postsService.ts
@@ -1,5 +1,6 @@
 import { Post } from './posts.ts'
 import { ApiClient } from '../../api/client.ts'
+import { useUserStore } from '../../user/user.ts'
 
 export class PostsService {
   constructor(private readonly client: ApiClient) {}
@@ -29,34 +30,34 @@ export class PostsService {
     return Post.fromDto(response.data.post)
   }
 
-  async loadPublicFeed(cursor: string | null, amount: number | null): Promise<Post[]> {
-    const response = await this.client.GET('/posts', {
-      query: { cursor, amount },
+  async load(postId: string): Promise<Post | null> {
+    const response = await this.client.GET('/posts/{postId}', {
+      params: {
+        path: { postId },
+      },
       credentials: 'include',
     })
 
-    if (!response.data) {
-      return []
+    if (!response.data?.post) {
+      return null
     }
 
-    return response.data?.posts.map((post) => Post.fromDto(post))
+    return Post.fromDto(response.data.post)
   }
 
-  async loadByAuthor(
-    username: string,
-    cursor: string | null,
-    amount: number | null,
-  ): Promise<Post[]> {
+  async loadPublicFeed(cursor: string | null, amount: number | null): Promise<{ posts: Post[] }> {
     const response = await this.client.GET('/posts', {
-      query: { From: cursor ?? undefined, Amount: amount ?? undefined, Author: username },
+      params: {
+        query: { After: cursor ?? undefined, Amount: amount ?? undefined },
+      },
       credentials: 'include',
     })
 
     if (!response.data) {
-      return []
+      return { posts: [] }
     }
 
-    return response.data?.posts.map((post) => Post.fromDto(post))
+    return { posts: response.data.posts.map(Post.fromDto) }
   }
 
   async addReaction(postId: string, emoji: string): Promise<void> {
@@ -78,6 +79,17 @@ export class PostsService {
       credentials: 'include',
     })
   }
+
+  async addComment(postId: string, content: string): Promise<void> {
+    const authorId = useUserStore.getState().user?.id
+    if (!authorId) return
+
+    await this.client.POST('/posts/{postId}/comments', {
+      params: { path: { postId } },
+      body: { content, authorId },
+      credentials: 'include',
+    })
+  }
 }
 
 interface CreatePostMedia {
diff --git a/src/app/feed/posts/usePostViewModel.ts b/src/app/feed/posts/usePostViewModel.ts
new file mode 100644
index 0000000..2fb06bd
--- /dev/null
+++ b/src/app/feed/posts/usePostViewModel.ts
@@ -0,0 +1,83 @@
+import { useCallback, useState } from 'react'
+import { Post, PostComment, PostMedia, PostReaction } from './posts.ts'
+import { Temporal } from '@js-temporal/polyfill'
+import { produce } from 'immer'
+
+export interface PostInfo {
+  postId: string
+  authorName: string
+  content: string
+  createdAt: Temporal.Instant
+  media: PostMedia[]
+  possibleReactions: string[]
+  comments: PostComment[]
+}
+
+type ReactionMap = Record<string, PostReaction[]>
+
+export function usePostViewModel() {
+  const [posts, _setPosts] = useState<PostInfo[]>([])
+  const [reactions, setReactions] = useState<ReactionMap>({})
+
+  const setPosts = useCallback((posts: Post[]) => {
+    _setPosts([...posts])
+
+    setReactions(
+      posts.reduce((acc, post) => {
+        acc[post.postId] = [...post.reactions]
+        return acc
+      }, {} as ReactionMap),
+    )
+  }, [])
+
+  const addPosts = useCallback((posts: Post[]) => {
+    _setPosts((current) => {
+      return [...current, ...posts]
+    })
+
+    setReactions((current) =>
+      produce(current, (draft) => {
+        for (const post of posts) {
+          draft[post.postId] = [...post.reactions]
+        }
+      }),
+    )
+  }, [])
+
+  function addReaction(
+    postId: string,
+    emoji: string,
+    authorName: string,
+    reactedOn: Temporal.Instant,
+  ) {
+    setReactions((current) =>
+      produce(current, (draft) => {
+        if (draft[postId]?.some((r) => r.emoji === emoji && r.authorName == authorName)) {
+          return
+        }
+
+        const reaction: PostReaction = { emoji, authorName, reactedOn }
+
+        if (!draft[postId]) {
+          draft[postId] = [{ ...reaction }]
+        } else {
+          draft[postId].push({ ...reaction })
+        }
+      }),
+    )
+  }
+
+  function removeReaction(postId: string, emoji: string, authorName: string) {
+    setReactions((current) =>
+      produce(current, (draft) => {
+        if (!draft[postId]) return
+
+        draft[postId] = draft[postId].filter(
+          (r) => r.emoji !== emoji || r.authorName !== authorName,
+        )
+      }),
+    )
+  }
+
+  return { posts, reactions, addPosts, setPosts, addReaction, removeReaction }
+}
diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts
new file mode 100644
index 0000000..519fc55
--- /dev/null
+++ b/src/app/i18n/translations.ts
@@ -0,0 +1,41 @@
+import en from './translations/en.json' assert { type: 'json' }
+
+interface Translation {
+  'auth.login.cta': string
+  'auth.login.register_instead': string
+  'auth.password.label': string
+  'auth.register.cta': string
+  'auth.register.login_instead': string
+  'auth.remember_me.label': string
+  'auth.username.label': string
+
+  'misc.loading': string
+
+  'nav.admin': string
+  'nav.home': string
+  'nav.login': string
+  'nav.logout': string
+  'nav.register': string
+
+  'post.add_media.cta': string
+  'post.editor.placeholder': string
+  'post.public.label': string
+  'post.submit.cta': string
+}
+
+export type TranslationKey = keyof Translation
+
+export interface UseTranslations {
+  t: <K extends TranslationKey>(key: K) => Translation[K]
+}
+
+export function useTranslations(): UseTranslations {
+  // TODO somehow handle other languages (reactively)
+  const texts = en as Translation
+
+  function getText<K extends TranslationKey>(key: K): Translation[K] {
+    return texts[key] ?? key
+  }
+
+  return { t: getText }
+}
diff --git a/src/app/i18n/translations/en.json b/src/app/i18n/translations/en.json
new file mode 100644
index 0000000..6cc6cb5
--- /dev/null
+++ b/src/app/i18n/translations/en.json
@@ -0,0 +1,19 @@
+{
+  "nav.home": "home",
+  "nav.login": "login",
+  "nav.register": "register",
+  "nav.admin": "admin",
+  "auth.login.cta": "login",
+  "auth.login.register_instead": "register instead?",
+  "auth.register.cta": "signup",
+  "auth.register.login_instead": "login instead?",
+  "auth.username.label": "username",
+  "auth.password.label": "password",
+  "auth.remember_me.label": "stay logged in",
+  "misc.loading": "wait...",
+  "nav.logout": "logout",
+  "post.add_media.cta": "+ add media",
+  "post.public.label": "public",
+  "post.submit.cta": "post",
+  "post.editor.placeholder": "write something..."
+}
\ No newline at end of file
diff --git a/src/app/user/user.ts b/src/app/user/user.ts
index b8b8a26..8ce3446 100644
--- a/src/app/user/user.ts
+++ b/src/app/user/user.ts
@@ -1,8 +1,4 @@
-import { addMessageListener, dispatchMessage } from '../messageBus/messageBus.ts'
-import { getCookie } from '../auth/cookies.ts'
-import { useMessageListener } from '../../hooks/useMessageListener.ts'
-import { useState } from 'react'
-import { setGlobal } from '../femtoApp.ts'
+import { create } from 'zustand'
 
 export interface User {
   id: string
@@ -10,40 +6,17 @@ export interface User {
   roles: Role[]
 }
 
-type Role = 'User' | 'SuperUser'
-
-let globalUser: User | null
-
-export function initUser() {
-  updateUser()
-
-  addMessageListener('auth:logged-in', updateUser)
-  addMessageListener('auth:registered', updateUser)
-  addMessageListener('auth:logged-out', updateUser)
-  addMessageListener('auth:refreshed', updateUser)
+export enum Role {
+  User = 0,
+  SuperUser = 1,
 }
 
-function updateUser() {
-  globalUser = getUserFromCookie()
-  setGlobal('user', globalUser)
-  dispatchMessage('user:updated', globalUser)
+interface UserState {
+  user: User | null
+  setUser: (user: User | null) => void
 }
 
-export function useUser(): User | null {
-  const [user, setUser] = useState(globalUser)
-
-  useMessageListener('user:updated', (u) => {
-    setUser(u)
-  })
-
-  return user
-}
-
-function getUserFromCookie(): User | null {
-  const userCookie = getCookie('user')
-
-  if (!userCookie) return null
-
-  // TODO validate but it should be fine
-  return JSON.parse(decodeURIComponent(userCookie)) as User
-}
+export const useUserStore = create<UserState>()((set) => ({
+  user: null,
+  setUser: (user: User | null) => set({ user }),
+}))
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index b55a24f..89691c9 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,16 +1,35 @@
-import { PropsWithChildren } from 'react'
-import { useUser } from '../app/user/user.ts'
+import { PropsWithChildren, ReactNode } from 'react'
+import { Role, useUserStore } from '../app/user/user.ts'
 import NavButton from './buttons/NavButton.tsx'
 
-type NavBarProps = unknown
+type NavBarProps = {
+  leftChildren?: ReactNode
+}
 
 export default function NavBar({ children }: PropsWithChildren<NavBarProps>) {
-  const user = useUser()
-  const isSuperUser = user?.roles.includes('SuperUser')
+  const user = useUserStore((state) => state.user)
+  const isSuperUser = user?.roles.includes(Role.SuperUser)
   return (
-    <nav className={`w-full flex flex-row justify-end gap-4 px-4 md:px-8 py-3`}>
-      {children}
-      {isSuperUser && <NavButton to={'/admin/codes'}>admin</NavButton>}
+    <nav className={`w-full flex flex-row justify-between px-4 md:px-8 py-3`}>
+      <div className={`flex flex-row justify-start gap-4`}></div>
+      <div className={`flex flex-row justify-end gap-4`}>
+        {children}
+        {isSuperUser && <NavButton to={'/admin/codes'}>admin</NavButton>}
+        <SourceCodeLink />
+      </div>
     </nav>
   )
 }
+
+function SourceCodeLink() {
+  return (
+    <a
+      className={`size-6`}
+      href="https://git.botris.dev/botris.social"
+      target="_blank"
+      title={'source code'}
+    >
+      <img style={{ color: 'red' }} src="/forgejo-logo-primary.svg" alt="Forgejo Logo" />
+    </a>
+  )
+}
diff --git a/src/initApp.ts b/src/initApp.ts
deleted file mode 100644
index de47b56..0000000
--- a/src/initApp.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { initUser } from './app/user/user.ts'
-import { setGlobal } from './app/femtoApp.ts'
-import { PostsService } from './app/feed/posts/postsService.ts'
-import { MediaService } from './app/media/mediaService.ts'
-import { AuthService } from './app/auth/authService.ts'
-import { initClient } from './app/api/client.ts'
-
-export function initApp() {
-  setGlobal('version', import.meta.env.VITE_FEMTO_VERSION)
-  initUser()
-
-  const client = initClient()
-
-  const postService = new PostsService(client)
-  const mediaService = new MediaService(client)
-  const authService = new AuthService(client)
-
-  return { postService, mediaService, authService }
-}
diff --git a/src/types.d.ts b/src/types.d.ts
index 5600fda..c2cd42e 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -19,4 +19,6 @@ declare global {
 export interface FemtoApp {
   version: string
   user: User | null
+  authService: AuthService | null
+  postsService: PostsService | null
 }
diff --git a/src/useRefreshSessionLoop.ts b/src/useRefreshSessionLoop.ts
index 36144ce..5a0bf1c 100644
--- a/src/useRefreshSessionLoop.ts
+++ b/src/useRefreshSessionLoop.ts
@@ -1,10 +1,10 @@
 import { useEffect } from 'react'
-import { useUser } from './app/user/user.ts'
 import { AuthService } from './app/auth/authService.ts'
+import { useUserStore } from './app/user/user.ts'
 
 // Starts a loop that pings the server to keep the session alive, while also getting any updates on the user profile
 export function useRefreshSessionLoop(authService: AuthService) {
-  const user = useUser()
+  const user = useUserStore((state) => state.user)
   const userId = user?.id ?? null
 
   useEffect(() => {
diff --git a/src/utils/delay.ts b/src/utils/delay.ts
new file mode 100644
index 0000000..9c70749
--- /dev/null
+++ b/src/utils/delay.ts
@@ -0,0 +1,3 @@
+export function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
diff --git a/src/utils/groupByAndMap.ts b/src/utils/groupByAndMap.ts
new file mode 100644
index 0000000..7f30995
--- /dev/null
+++ b/src/utils/groupByAndMap.ts
@@ -0,0 +1,19 @@
+export function groupByAndMap<T, U>(
+  items: T[],
+  groupBy: (item: T) => string,
+  map: (item: T) => U,
+): Record<string, U[]> {
+  const groupings: Record<string, U[]> = {}
+
+  for (const item of items) {
+    const key = groupBy(item)
+
+    if (!groupings[key]) {
+      groupings[key] = []
+    }
+
+    groupings[key].push(map(item))
+  }
+
+  return groupings
+}
diff --git a/yarn.lock b/yarn.lock
index 02021f7..efeeb13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2574,3 +2574,8 @@ zod@^3.23.8, zod@^3.24.2:
   version "3.24.3"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.3.tgz#1f40f750a05e477396da64438e0e1c0995dafd87"
   integrity sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==
+
+zustand@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.7.tgz#e325364e82c992a84bf386d8445aa7f180c450dc"
+  integrity sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg==