diff --git a/HANDOFF.md b/HANDOFF.md
deleted file mode 100644
index 3010fb9..0000000
--- a/HANDOFF.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Handoff Notes
-
-## Where we left off
-
-Auth is working — `register` and `login` both return a JWT. The item functions (`listItems`, `getItem`, `createItem`, `updateItem`, `deleteItem`) still have **no auth protection**. Next task is adding `verifyToken` + `requireRole` to each of them.
-
----
-
-## Next immediate step — protect item functions
-
-Add this to the top of each item function's `index.js`, right inside the `try` block before the DB call:
-
-```js
-const { verifyToken, requireRole } = require("../auth/middleware")
-
-// inside the function:
-const decoded = verifyToken(req)
-if (decoded.status) return decoded
-
-const err = requireRole(decoded, "admin", "employee") // adjust roles per function
-if (err) return err
-```
-
-### Role rules (from PLAN.md)
-| Function     | Allowed roles          |
-| ------------ | ---------------------- |
-| listItems    | admin, employee, guest |
-| getItem      | admin, employee, guest |
-| createItem   | admin, employee        |
-| updateItem   | admin                  |
-| deleteItem   | admin                  |
-
----
-
-## After that — frontend
-
-Install deps first:
-```bash
-bun add vue-router@4 pinia axios
-```
-
-Files to create (in order):
-1. `src/api/client.js` — axios instance that reads JWT from localStorage and attaches it as `Authorization: Bearer <token>` header
-2. `src/router/index.js` — routes for `/login` and `/inventory`, redirect to login if no token
-3. `src/stores/auth.js` — pinia store for login/register, saves token to localStorage
-4. `src/stores/inventory.js` — pinia store for item CRUD
-5. `src/pages/LoginPage.vue`
-6. `src/pages/InventoryPage.vue` + `src/components/ItemTable.vue` + `src/components/ItemForm.vue`
-7. Update `src/main.js` and `src/App.vue`
-
----
-
-## Useful commands
-
-```bash
-# Start local environment (SQL Server + Azurite + Functions)
-docker-compose up
-
-# Rebuild after code/package changes
-docker-compose up --build
-
-# Run DB migrations
-node api/db/migrate.js
-
-# Start frontend
-bun dev
-
-# Deploy to Azure
-func azure functionapp publish testneas --javascript --build remote
-```
-
-Local functions: `http://localhost:7071/api/...`
-Frontend dev server: `http://localhost:5173`
-
----
-
-## How auth works
-
-- `POST /api/auth/register` — creates user, returns JWT
-- `POST /api/auth/login` — verifies password with bcrypt, returns JWT
-- Token payload: `{ id, username, role }`, expires in 1 hour
-- Send token on protected requests: `Authorization: Bearer <token>`
-- Roles: `admin` (full access), `employee` (view + create), `guest` (view only)
-
----
-
-## Environment variables
-
-**Local** — stored in `.env` (gitignored, never commit):
-- `SA_PASSWORD` — SQL Server SA password for Docker
-- `SQL_SERVER`, `SQL_PORT`, `SQL_DATABASE`, `SQL_USER`, `SQL_PASSWORD` — DB connection
-- `JWT_SECRET` — secret used to sign tokens
-
-**Azure** — set in Function App > Settings > Environment variables (same names as above, plus `JWT_SECRET`)
-
----
-
-## Key files
-
-| File | Purpose |
-| ---- | ------- |
-| `api/db/connection.js` | Shared MSSQL connection pool |
-| `api/db/migrate.js` | Runs all `.sql` files in `api/db/migrations/` |
-| `api/auth/middleware.js` | `verifyToken` and `requireRole` helpers |
-| `api/register/` | POST /api/auth/register |
-| `api/login/` | POST /api/auth/login |
-| `docker-compose.yml` | Local dev services |
-| `vite.config.js` | Proxies `/api` → `http://localhost:7071` |
diff --git a/bun.lock b/bun.lock
index 0118a92..c0131df 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,6 +9,7 @@
         "@vitejs/plugin-vue": "^6.0.5",
         "appwrite": "^25.0.0",
         "axios": "^1.15.2",
+        "html2canvas": "^1.4.1",
         "pinia": "^3.0.4",
         "tailwindcss": "^4.2.2",
         "vite": "^8.0.3",
@@ -296,6 +297,8 @@
 
     "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
+    "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
+
     "baseline-browser-mapping": ["baseline-browser-mapping@2.10.16", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA=="],
 
     "bignumber.js": ["bignumber.js@9.3.1", "", {}, "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ=="],
@@ -322,6 +325,8 @@
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css-line-break": ["css-line-break@2.1.0", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@@ -432,6 +437,8 @@
 
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
+    "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
+
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
@@ -602,6 +609,8 @@
 
     "tapable": ["tapable@2.3.2", "", {}, "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA=="],
 
+    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
+
     "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
 
     "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
@@ -618,6 +627,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "utrie": ["utrie@1.0.2", "", { "dependencies": { "base64-arraybuffer": "^1.0.2" } }, "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="],
+
     "vite": ["vite@8.0.8", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.15", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw=="],
 
     "vite-dev-rpc": ["vite-dev-rpc@1.1.0", "", { "dependencies": { "birpc": "^2.4.0", "vite-hot-client": "^2.1.0" }, "peerDependencies": { "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0" } }, "sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A=="],
diff --git a/index.html b/index.html
index ccaca7d..e9e0a5c 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <script>
-      (function () {
-        try {
-          var k = 'neas-theme'
-          var s = localStorage.getItem(k)
-          var d =
-            s === 'dark' || (s !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-          document.documentElement.classList.toggle('dark', d)
-        } catch (_) {}
-      })()
-    </script>
     <meta charset="UTF-8" />
     <link rel="icon" href="/neas-symbols/Neas%20Symbol%20Moss%20Green.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/package-lock.json b/package-lock.json
index cb59b30..73ce81b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,15 +9,18 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.2.2",
+        "@vitejs/plugin-vue": "^6.0.5",
+        "appwrite": "^25.0.0",
         "axios": "^1.15.2",
+        "html2canvas": "^1.4.1",
         "pinia": "^3.0.4",
         "tailwindcss": "^4.2.2",
+        "vite": "^8.0.3",
         "vue": "^3.5.31",
         "vue-router": "4"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
-        "@vitejs/plugin-vue": "^6.0.5",
         "eslint": "^10.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-oxlint": "~1.57.0",
@@ -26,7 +29,6 @@
         "npm-run-all2": "^8.0.4",
         "oxlint": "~1.57.0",
         "prettier": "3.8.1",
-        "vite": "^8.0.3",
         "vite-plugin-vue-devtools": "^8.1.1"
       },
       "engines": {
@@ -58,7 +60,6 @@
       "version": "7.29.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -453,6 +454,27 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -1213,6 +1235,27 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.0-rc.15",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
@@ -1245,7 +1288,6 @@
     },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tailwindcss/node": {
@@ -1524,7 +1566,6 @@
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rolldown/pluginutils": "1.0.0-rc.2"
@@ -1729,7 +1770,6 @@
       "version": "8.16.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1779,6 +1819,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/appwrite": {
+      "version": "25.1.1",
+      "resolved": "https://registry.npmjs.org/appwrite/-/appwrite-25.1.1.tgz",
+      "integrity": "sha512-h+vVPErfCLZ9FCnWH1cZOphgX8MsXNNN0PvxCxoOCbqyX6XubtvvOEpp/BpVOAHp7jIDFEJu72ingBu9kh1vDQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "json-bigint": "1.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "license": "MIT"
@@ -1800,6 +1852,15 @@
         "node": "18 || 20 || >=22"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.16",
       "dev": true,
@@ -1811,6 +1872,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "license": "MIT",
@@ -1852,7 +1922,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -1971,6 +2040,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "dev": true,
@@ -2164,7 +2242,6 @@
       "version": "10.2.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -2596,6 +2673,19 @@
       "version": "5.5.3",
       "license": "MIT"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "dev": true,
@@ -2717,6 +2807,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "dev": true,
@@ -3229,7 +3328,6 @@
       "version": "1.57.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "oxlint": "bin/oxlint"
       },
@@ -3597,6 +3695,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "license": "MIT",
@@ -3694,10 +3801,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.8",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -3867,7 +3982,6 @@
     "node_modules/vue": {
       "version": "3.5.32",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.32",
         "@vue/compiler-sfc": "3.5.32",
diff --git a/package.json b/package.json
index 64ce74f..55c2fc7 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.2",
+    "@vitejs/plugin-vue": "^6.0.5",
     "appwrite": "^25.0.0",
     "axios": "^1.15.2",
+    "html2canvas": "^1.4.1",
     "pinia": "^3.0.4",
     "tailwindcss": "^4.2.2",
-    "@vitejs/plugin-vue": "^6.0.5",
     "vite": "^8.0.3",
     "vue": "^3.5.31",
     "vue-router": "4"
diff --git a/src/assets/main.css b/src/assets/main.css
index 297ac65..0abb525 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,33 +1,33 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @font-face {
-  font-family: "Mabry Pro";
-  src: url("/mabry-light-pro.woff2") format("woff2");
+  font-family: 'Mabry Pro';
+  src: url('/mabry-light-pro.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Mabry Pro";
-  src: url("/mabry-regular-pro.woff2") format("woff2");
+  font-family: 'Mabry Pro';
+  src: url('/mabry-regular-pro.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Mabry Pro";
-  src: url("/mabry-regular-pro.woff2") format("woff2");
+  font-family: 'Mabry Pro';
+  src: url('/mabry-regular-pro.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @theme {
-  --font-sans: "Mabry Pro", Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
+  --font-sans: 'Mabry Pro', Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
   --color-neas-pine: #003d2d;
   --color-neas-moss: #95c672;
   --color-neas-sun: #f1e967;
@@ -58,3 +58,311 @@
     color: #e8f0ec;
   }
 }
+
+@layer base {
+  :root {
+    --neas-grid-line: rgba(0, 61, 45, 0.08);
+    --neas-grid-line-dark: rgba(232, 240, 236, 0.08);
+    --neas-glow: rgba(149, 198, 114, 0.22);
+    --neas-sun-glow: rgba(241, 233, 103, 0.3);
+  }
+}
+
+@layer components {
+  .neas-page {
+    background: linear-gradient(180deg, rgba(241, 246, 244, 0.9) 0%, #f1f6f4 60%, #eef3f1 100%);
+  }
+
+  .dark .neas-page {
+    background: linear-gradient(180deg, #061512 0%, #071a15 60%, #0a1f19 100%);
+  }
+
+  .neas-grid {
+    background-image:
+      linear-gradient(to right, var(--neas-grid-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--neas-grid-line) 1px, transparent 1px);
+    background-size: 80px 80px;
+    background-position: var(--neas-grid-x, 0px) var(--neas-grid-y, 0px);
+    transition: background-position 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: background-position;
+  }
+
+  .dark .neas-grid {
+    background-image:
+      linear-gradient(to right, var(--neas-grid-line-dark) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--neas-grid-line-dark) 1px, transparent 1px);
+    background-position: var(--neas-grid-x, 0px) var(--neas-grid-y, 0px);
+  }
+
+  .neas-hero {
+    position: relative;
+    overflow: hidden;
+    border-radius: 24px;
+    background: linear-gradient(135deg, #003d2d 0%, #014a37 40%, #0c6b4f 100%);
+    color: var(--color-neas-white);
+  }
+
+  .neas-hero-animate::before {
+    animation: neas-glow 10s ease-in-out infinite;
+  }
+
+  .neas-hero-animate::after {
+    animation: neas-grid-drift 18s linear infinite;
+  }
+
+  .neas-hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 12% 18%, rgba(241, 233, 103, 0.28), transparent 42%),
+      radial-gradient(circle at 80% 20%, rgba(149, 198, 114, 0.3), transparent 45%);
+    opacity: 0.9;
+    pointer-events: none;
+  }
+
+  .neas-hero::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
+    background-size: 96px 96px;
+    opacity: 0.35;
+    pointer-events: none;
+  }
+
+  .neas-panel {
+    border-radius: 22px;
+    border: 1px solid rgba(0, 61, 45, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow:
+      0 24px 60px rgba(0, 61, 45, 0.08),
+      0 2px 0 rgba(0, 61, 45, 0.06);
+    backdrop-filter: blur(12px);
+  }
+
+  .neas-glass {
+    border: 1px solid rgba(0, 61, 45, 0.1);
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow: 0 20px 50px rgba(0, 61, 45, 0.12);
+    backdrop-filter: blur(18px);
+  }
+
+  .neas-glass-strong {
+    border: 1px solid rgba(0, 61, 45, 0.12);
+    background: rgba(255, 255, 255, 0.86);
+    box-shadow: 0 24px 70px rgba(0, 61, 45, 0.16);
+    backdrop-filter: blur(22px);
+  }
+
+  .dark .neas-panel {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(15, 36, 29, 0.92);
+    box-shadow:
+      0 28px 70px rgba(0, 0, 0, 0.35),
+      0 2px 0 rgba(255, 255, 255, 0.04);
+  }
+
+  .neas-kpi {
+    border-radius: 18px;
+    border: 1px solid rgba(0, 61, 45, 0.12);
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow: 0 18px 40px rgba(0, 61, 45, 0.1);
+  }
+
+  .dark .neas-kpi {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(7, 26, 21, 0.9);
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
+  }
+
+  .neas-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.16);
+    padding: 0.35rem 0.75rem;
+    font-size: 0.72rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  .neas-input {
+    border-radius: 14px;
+    border: 1px solid rgba(0, 61, 45, 0.18);
+    background: rgba(241, 246, 244, 0.9);
+    transition:
+      border-color 200ms ease,
+      box-shadow 200ms ease,
+      background-color 200ms ease;
+  }
+
+  .neas-input:focus {
+    border-color: rgba(0, 61, 45, 0.6);
+    box-shadow: 0 0 0 3px rgba(149, 198, 114, 0.28);
+    background: #ffffff;
+    outline: none;
+  }
+
+  .dark .neas-input {
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: rgba(6, 21, 18, 0.95);
+    color: #e8f0ec;
+  }
+
+  .dark .neas-input:focus {
+    border-color: rgba(149, 198, 114, 0.7);
+    box-shadow: 0 0 0 3px rgba(149, 198, 114, 0.18);
+    background: #0a1814;
+  }
+
+  .neas-button {
+    border-radius: 999px;
+    padding: 0.85rem 1.75rem;
+    font-size: 0.78rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    font-weight: 500;
+    background: #f1e967;
+    color: #003d2d;
+    transition:
+      transform 200ms ease,
+      box-shadow 200ms ease,
+      background-color 200ms ease;
+    box-shadow: 0 16px 26px rgba(241, 233, 103, 0.35);
+  }
+
+  .neas-button:hover {
+    background: #f6f07a;
+    transform: translateY(-1px);
+  }
+
+  .neas-button-dark {
+    background: #003d2d;
+    color: #ffffff;
+    box-shadow: 0 14px 24px rgba(0, 61, 45, 0.3);
+  }
+
+  .neas-button-dark:hover {
+    background: #002f24;
+  }
+
+  .neas-outline {
+    border-radius: 999px;
+    border: 1.6px solid rgba(0, 61, 45, 0.5);
+    padding: 0.7rem 1.4rem;
+    font-size: 0.75rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    font-weight: 500;
+    transition:
+      border-color 200ms ease,
+      color 200ms ease,
+      background-color 200ms ease;
+  }
+
+  .neas-outline:hover {
+    background: rgba(0, 61, 45, 0.08);
+  }
+
+  .dark .neas-outline {
+    border-color: rgba(232, 240, 236, 0.5);
+    color: #e8f0ec;
+  }
+
+  .dark .neas-outline:hover {
+    background: rgba(232, 240, 236, 0.12);
+  }
+
+  .neas-table-head {
+    background: linear-gradient(90deg, #003d2d 0%, #0b5a44 100%);
+  }
+
+  .neas-reveal {
+    opacity: 0;
+    animation: neas-rise 700ms ease forwards;
+  }
+
+  .neas-delay-1 {
+    animation-delay: 120ms;
+  }
+
+  .neas-delay-2 {
+    animation-delay: 220ms;
+  }
+
+  .neas-delay-3 {
+    animation-delay: 320ms;
+  }
+
+  .neas-delay-4 {
+    animation-delay: 420ms;
+  }
+
+  .neas-delay-5 {
+    animation-delay: 520ms;
+  }
+
+  .neas-float {
+    animation: neas-float 6s ease-in-out infinite;
+  }
+}
+
+@keyframes neas-rise {
+  0% {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes neas-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes neas-grid-drift {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 96px 96px;
+  }
+}
+
+@keyframes neas-glow {
+  0% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.85;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neas-reveal,
+  .neas-hero-animate::before,
+  .neas-hero-animate::after,
+  .neas-float {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
diff --git a/src/components/ItemForm.vue b/src/components/ItemForm.vue
index bae8356..4d6533d 100644
--- a/src/components/ItemForm.vue
+++ b/src/components/ItemForm.vue
@@ -52,7 +52,7 @@ async function handleSubmit() {
 
 <template>
   <div
-    class="border-b border-neas-mist bg-neas-white px-6 py-5 lg:px-8 dark:border-white/10 dark:bg-[#0f241d]"
+    class="border-b border-neas-mist bg-neas-white px-6 py-6 lg:px-8 dark:border-white/10 dark:bg-[#0f241d]"
   >
     <h3 class="text-xs font-medium uppercase tracking-[0.1em] text-neas-pine dark:text-[#e8f0ec]">
       Nytt produkt
@@ -69,7 +69,7 @@ async function handleSubmit() {
       {{ errorMsg }}
     </div>
 
-    <form class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" @submit.prevent="handleSubmit">
+    <form class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" @submit.prevent="handleSubmit">
       <div class="sm:col-span-2 lg:col-span-1">
         <label
           for="item-name"
@@ -82,7 +82,7 @@ async function handleSubmit() {
           v-model="name"
           type="text"
           autocomplete="off"
-          class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-2.5 text-sm font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+          class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
         />
       </div>
       <div>
@@ -97,7 +97,7 @@ async function handleSubmit() {
           v-model="sku"
           type="text"
           autocomplete="off"
-          class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-2.5 text-sm font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+          class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
         />
       </div>
       <div>
@@ -113,7 +113,7 @@ async function handleSubmit() {
           type="number"
           min="0"
           step="1"
-          class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-2.5 text-sm font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+          class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
         />
       </div>
       <div>
@@ -129,14 +129,14 @@ async function handleSubmit() {
           type="text"
           inputmode="decimal"
           autocomplete="off"
-          class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-2.5 text-sm font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+          class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
         />
       </div>
       <div class="flex items-end sm:col-span-2 lg:col-span-4">
         <button
           type="submit"
           :disabled="submitting"
-          class="rounded-xl bg-neas-pine px-6 py-2.5 text-xs font-medium uppercase tracking-[0.1em] text-neas-white transition-[background-color,opacity] hover:bg-[#002f24] disabled:cursor-not-allowed disabled:opacity-60 dark:hover:bg-[#004d3a]"
+          class="neas-button-dark rounded-[13px] px-6 py-2.5 text-xs disabled:cursor-not-allowed disabled:opacity-60"
         >
           {{ submitting ? 'Lagrer…' : 'Legg til produkt' }}
         </button>
diff --git a/src/components/ItemTable.vue b/src/components/ItemTable.vue
index 1745495..c7b91b1 100644
--- a/src/components/ItemTable.vue
+++ b/src/components/ItemTable.vue
@@ -1,34 +1,121 @@
 <script setup>
-defineProps({
+import { ref, onUnmounted } from 'vue'
+import { useInventoryStore } from '@/stores/inventory'
+
+const props = defineProps({
   items: {
     type: Array,
     default: () => [],
   },
+  isAdmin: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const inventory = useInventoryStore()
+
+const isEditing = ref(false)
+const editingItem = ref(null)
+const formName = ref('')
+const formSku = ref('')
+const formQuantity = ref('')
+const formPrice = ref('')
+const editError = ref('')
+const submitting = ref(false)
+
+async function handleDelete(item) {
+  if (!props.isAdmin) return
+  await inventory.deleteItem(item.id)
+}
+
+function openEdit(item) {
+  if (!props.isAdmin) return
+  editingItem.value = item
+  formName.value = item.name ?? ''
+  formSku.value = item.sku ?? ''
+  formQuantity.value = String(item.quantity ?? '')
+  formPrice.value = String(item.price ?? '')
+  editError.value = ''
+  isEditing.value = true
+  document.body.style.overflow = 'hidden'
+}
+
+function closeEdit() {
+  isEditing.value = false
+  editingItem.value = null
+  document.body.style.overflow = ''
+}
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
 })
+
+async function handleUpdate() {
+  if (!props.isAdmin || !editingItem.value) return
+  editError.value = ''
+  const q = Number.parseInt(String(formQuantity.value), 10)
+  const p = Number.parseFloat(String(formPrice.value).replace(',', '.'))
+  if (!formName.value.trim() || !formSku.value.trim()) {
+    editError.value = 'Navn og varenummer er paakrevd.'
+    return
+  }
+  if (!Number.isFinite(q) || q < 0) {
+    editError.value = 'Antall maa vaere et tall som er null eller storre.'
+    return
+  }
+  if (!Number.isFinite(p) || p < 0) {
+    editError.value = 'Pris maa vaere et tall som er null eller storre.'
+    return
+  }
+
+  submitting.value = true
+  try {
+    await inventory.updateItem(editingItem.value.id, {
+      name: formName.value.trim(),
+      sku: formSku.value.trim(),
+      quantity: q,
+      price: p,
+    })
+    closeEdit()
+  } catch (error) {
+    const detail = error?.response?.data?.detail
+    editError.value =
+      typeof detail === 'string' ? detail : 'Kunne ikke oppdatere produktet. Prov igjen.'
+  } finally {
+    submitting.value = false
+  }
+}
 </script>
 
 <template>
   <div class="overflow-x-auto">
     <table class="w-full min-w-[640px] border-collapse text-left">
       <thead>
-        <tr class="bg-neas-pine text-neas-white dark:bg-neas-pine">
-          <th class="px-6 py-3.5 text-xs font-medium uppercase tracking-[0.1em] lg:px-8">
+        <tr class="neas-table-head text-neas-white">
+          <th class="px-6 py-4 text-xs font-medium uppercase tracking-[0.14em] lg:px-8">
             Produktnavn
           </th>
-          <th class="px-6 py-3.5 text-xs font-medium uppercase tracking-[0.1em] lg:px-8">
+          <th class="px-6 py-4 text-xs font-medium uppercase tracking-[0.14em] lg:px-8">
             Varenummer
           </th>
-          <th class="px-6 py-3.5 text-xs font-medium uppercase tracking-[0.1em] lg:px-8">Antall</th>
-          <th class="px-6 py-3.5 text-xs font-medium uppercase tracking-[0.1em] lg:px-8">
+          <th class="px-6 py-4 text-xs font-medium uppercase tracking-[0.14em] lg:px-8">Antall</th>
+          <th class="px-6 py-4 text-xs font-medium uppercase tracking-[0.14em] lg:px-8">
             Pris (NOK)
           </th>
+          <th
+            v-if="isAdmin"
+            class="px-6 py-4 text-right text-xs font-medium uppercase tracking-[0.14em] lg:px-8"
+          >
+            Handling
+          </th>
         </tr>
       </thead>
       <tbody>
         <tr
           v-for="(item, index) in items"
           :key="item.id"
-          class="border-b hover:bg-neas-mid-grey/20 dark:hover:bg-[#0a181477] border-neas-light-grey transition-colors last:border-b-0 dark:border-white/10"
+          class="border-b border-neas-light-grey transition-colors hover:bg-neas-mid-grey/20 dark:border-white/10 dark:hover:bg-[#0a181477]"
           :class="
             index % 2 === 0
               ? 'bg-neas-white dark:bg-[#0f241d]'
@@ -36,29 +123,76 @@ defineProps({
           "
         >
           <td
-            class="px-6 py-3.5 text-sm font-medium leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
+            class="px-6 py-4 text-sm font-medium leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
           >
             {{ item.name }}
           </td>
           <td
-            class="px-6 py-3.5 text-sm font-normal leading-none text-neas-pine/70 lg:px-8 dark:text-[#e8f0ec]/65"
+            class="px-6 py-4 text-sm font-normal leading-none text-neas-pine/70 lg:px-8 dark:text-[#e8f0ec]/65"
           >
             {{ item.sku }}
           </td>
           <td
-            class="px-6 py-3.5 text-sm font-normal leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
+            class="px-6 py-4 text-sm font-normal leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
           >
             {{ item.quantity }}
           </td>
           <td
-            class="px-6 py-3.5 text-sm font-normal leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
+            class="px-6 py-4 text-sm font-normal leading-none text-neas-pine lg:px-8 dark:text-[#e8f0ec]"
           >
             {{ item.price }}
           </td>
+          <td v-if="isAdmin" class="px-6 py-4 text-right lg:px-8">
+            <div class="flex items-center justify-end gap-2">
+              <button
+                type="button"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neas-pine/15 text-neas-pine transition hover:border-neas-pine hover:bg-neas-pine/10"
+                :aria-label="`Rediger ${item.name}`"
+                @click="openEdit(item)"
+              >
+                <svg
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M12 20h9" />
+                  <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neas-pine/15 text-neas-pine transition hover:border-neas-pine hover:bg-neas-pine/10"
+                :aria-label="`Slett ${item.name}`"
+                @click="handleDelete(item)"
+              >
+                <svg
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M3 6h18" />
+                  <path d="M8 6V4h8v2" />
+                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                  <path d="M10 11v6" />
+                  <path d="M14 11v6" />
+                </svg>
+              </button>
+            </div>
+          </td>
         </tr>
         <tr v-if="items.length === 0">
           <td
-            colspan="4"
+            :colspan="isAdmin ? 5 : 4"
             class="px-6 py-16 text-center text-sm font-normal leading-none text-neas-pine/50 lg:px-8 dark:text-[#e8f0ec]/45"
           >
             Ingen produkter enda.
@@ -67,4 +201,120 @@ defineProps({
       </tbody>
     </table>
   </div>
+
+  <Teleport to="body">
+    <div
+      v-if="isAdmin && isEditing"
+      class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-4 py-8 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="edit-item-title"
+    >
+      <div
+        class="w-full max-w-[520px] rounded-2xl border border-neas-pine/15 bg-neas-white p-8 shadow-2xl"
+      >
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-xs uppercase tracking-[0.2em] text-neas-pine/50">Rediger produkt</p>
+            <h3 id="edit-item-title" class="mt-2 text-2xl font-medium text-neas-pine">
+              Oppdater detaljer
+            </h3>
+          </div>
+          <button
+            type="button"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neas-pine/15 text-neas-pine transition hover:border-neas-pine hover:bg-neas-pine/10"
+            aria-label="Lukk"
+            @click="closeEdit"
+          >
+            <svg
+              class="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div
+          v-if="editError"
+          class="mt-4 rounded-xl border border-neas-pine/15 bg-neas-petal/35 px-4 py-3 text-sm font-normal text-neas-pine"
+          role="alert"
+        >
+          {{ editError }}
+        </div>
+
+        <form class="mt-6 grid gap-4" @submit.prevent="handleUpdate">
+          <div>
+            <label
+              class="mb-2 block text-xs font-medium uppercase tracking-[0.08em] text-neas-pine/80"
+            >
+              Produktnavn
+            </label>
+            <input
+              v-model="formName"
+              type="text"
+              class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
+            />
+          </div>
+          <div>
+            <label
+              class="mb-2 block text-xs font-medium uppercase tracking-[0.08em] text-neas-pine/80"
+            >
+              Varenummer
+            </label>
+            <input
+              v-model="formSku"
+              type="text"
+              class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
+            />
+          </div>
+          <div class="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label
+                class="mb-2 block text-xs font-medium uppercase tracking-[0.08em] text-neas-pine/80"
+              >
+                Antall
+              </label>
+              <input
+                v-model="formQuantity"
+                type="number"
+                min="0"
+                step="1"
+                class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
+              />
+            </div>
+            <div>
+              <label
+                class="mb-2 block text-xs font-medium uppercase tracking-[0.08em] text-neas-pine/80"
+              >
+                Pris (NOK)
+              </label>
+              <input
+                v-model="formPrice"
+                type="text"
+                inputmode="decimal"
+                class="neas-input box-border w-full px-4 py-2.5 text-sm font-normal leading-none text-neas-pine"
+              />
+            </div>
+          </div>
+
+          <div class="mt-4 flex flex-wrap items-center justify-end gap-3">
+            <button type="button" class="neas-outline text-neas-pine" @click="closeEdit">
+              Avbryt
+            </button>
+            <button type="submit" class="neas-outline" :disabled="submitting">
+              {{ submitting ? 'Lagrer…' : 'Lagre endringer' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
 </template>
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index 04ce4ef..c27f575 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -9,7 +9,7 @@ const { isDark } = storeToRefs(theme)
 <template>
   <button
     type="button"
-    class="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-xl border-2 transition-[background-color,border-color,color,box-shadow] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neas-moss border-neas-pine/20 bg-neas-white/90 text-neas-pine shadow-sm hover:border-neas-pine hover:bg-neas-white dark:border-white/25 dark:bg-[#0f241d]/90 dark:text-neas-mist dark:hover:border-neas-moss dark:hover:bg-[#143028]"
+    class="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-neas-pine/20 bg-neas-white/90 text-neas-pine shadow-[0_10px_25px_rgba(0,61,45,0.12)] transition-[background-color,border-color,color,box-shadow] hover:border-neas-pine hover:bg-neas-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neas-moss dark:border-white/25 dark:bg-[#0f241d]/90 dark:text-neas-mist dark:shadow-[0_10px_25px_rgba(0,0,0,0.35)] dark:hover:border-neas-moss dark:hover:bg-[#143028]"
     :aria-pressed="isDark"
     :aria-label="isDark ? 'Bytt til lys modus' : 'Bytt til mørk modus'"
     @click="theme.toggle()"
@@ -26,7 +26,9 @@ const { isDark } = storeToRefs(theme)
       aria-hidden="true"
     >
       <circle cx="12" cy="12" r="4" />
-      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
+      />
     </svg>
     <svg
       v-else
diff --git a/src/main.js b/src/main.js
index eeec28a..ffc261e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,6 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
-import { useThemeStore } from '@/stores/theme'
 import { client } from '@/lib/appwrite'
 
 client.ping().then(
@@ -19,6 +18,5 @@ client.ping().then(
 const app = createApp(App)
 const pinia = createPinia()
 app.use(pinia)
-useThemeStore(pinia).initFromDocument()
 app.use(router)
 app.mount('#app')
diff --git a/src/pages/InventoryPage.vue b/src/pages/InventoryPage.vue
index db1baa9..111ad42 100644
--- a/src/pages/InventoryPage.vue
+++ b/src/pages/InventoryPage.vue
@@ -1,40 +1,264 @@
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import html2canvas from 'html2canvas'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useInventoryStore } from '@/stores/inventory'
 import { useAuthStore } from '@/stores/auth'
-import { useThemeStore } from '@/stores/theme'
-import ThemeToggle from '@/components/ThemeToggle.vue'
 import ItemTable from '@/components/ItemTable.vue'
 import ItemForm from '@/components/ItemForm.vue'
 
 const router = useRouter()
 const store = useInventoryStore()
 const auth = useAuthStore()
-const { isDark } = storeToRefs(useThemeStore())
 const { isAdmin, username } = storeToRefs(auth)
 
 const logotypePine = '/neas-logos/Neas%20Logotype%20Pine%20Green.svg'
-const logotypeWhite = '/neas-logos/Neas%20Logotype%20White.svg'
-const logotypeSrc = computed(() => (isDark.value ? logotypeWhite : logotypePine))
+const logotypeSrc = logotypePine
+
+const pageEl = ref(null)
+let rafId = 0
+
+const isSelling = ref(false)
+const saleSelections = ref({})
+const saleStage = ref('select')
+const receipt = ref(null)
+const saleError = ref('')
+
+function handlePointerMove(event) {
+  if (!pageEl.value) return
+  const { clientX, clientY } = event
+  if (rafId) cancelAnimationFrame(rafId)
+  rafId = requestAnimationFrame(() => {
+    const rect = pageEl.value.getBoundingClientRect()
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+    const offsetX = ((clientX - centerX) / rect.width) * 24
+    const offsetY = ((clientY - centerY) / rect.height) * 24
+    pageEl.value.style.setProperty('--neas-grid-x', `${offsetX.toFixed(2)}px`)
+    pageEl.value.style.setProperty('--neas-grid-y', `${offsetY.toFixed(2)}px`)
+  })
+}
+
+function handlePointerLeave() {
+  if (!pageEl.value) return
+  pageEl.value.style.setProperty('--neas-grid-x', '0px')
+  pageEl.value.style.setProperty('--neas-grid-y', '0px')
+}
+
+const totalProducts = computed(() => store.items.length)
+const totalUnits = computed(() =>
+  store.items.reduce((sum, item) => sum + Number(item.quantity || 0), 0),
+)
+const totalValue = computed(() =>
+  store.items.reduce((sum, item) => sum + Number(item.quantity || 0) * Number(item.price || 0), 0),
+)
+const currency = new Intl.NumberFormat('nb-NO', {
+  style: 'currency',
+  currency: 'NOK',
+  maximumFractionDigits: 0,
+})
 
 onMounted(() => {
   store.fetchItems()
+  window.addEventListener('pointermove', handlePointerMove, { passive: true })
+  window.addEventListener('pointerleave', handlePointerLeave)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', handlePointerMove)
+  window.removeEventListener('pointerleave', handlePointerLeave)
+  if (rafId) cancelAnimationFrame(rafId)
 })
 
 function logout() {
   auth.logout()
   router.push('/login')
 }
+
+function openSale() {
+  saleSelections.value = {}
+  store.items.forEach((it) => (saleSelections.value[it.id] = 0))
+  saleStage.value = 'select'
+  receipt.value = null
+  saleError.value = ''
+  isSelling.value = true
+  document.body.style.overflow = 'hidden'
+}
+
+function closeSale() {
+  isSelling.value = false
+  saleSelections.value = {}
+  saleStage.value = 'select'
+  receipt.value = null
+  saleError.value = ''
+  document.body.style.overflow = ''
+}
+
+function generateReceipt() {
+  saleError.value = ''
+  const lines = []
+  let total = 0
+  for (const it of store.items) {
+    const q = Number(saleSelections.value[it.id] || 0)
+    if (q > 0) {
+      if (q > Number(it.quantity)) {
+        saleError.value = `Antall for ${it.name} overstiger tilgjengelig beholdning.`
+        return
+      }
+      const lineTotal = q * Number(it.price || 0)
+      total += lineTotal
+      lines.push({
+        id: it.id,
+        name: it.name,
+        sku: it.sku,
+        qty: q,
+        price: Number(it.price || 0),
+        lineTotal,
+      })
+    }
+  }
+  if (lines.length === 0) {
+    saleError.value = 'Velg minst ett produkt og antall for å generere kvittering.'
+    return
+  }
+  receipt.value = { lines, total }
+  saleStage.value = 'preview'
+}
+
+async function confirmSale() {
+  if (!receipt.value) return
+  for (const line of receipt.value.lines) {
+    const item = store.items.find((i) => i.id === line.id)
+    if (!item) continue
+    const newQty = Number(item.quantity) - Number(line.qty)
+    if (newQty <= 0) {
+      await store.deleteItem(item.id)
+    } else {
+      await store.updateItem(item.id, { ...item, quantity: newQty })
+    }
+  }
+  closeSale()
+}
+
+function buildReceiptHtml(rcpt) {
+  const date = new Date().toLocaleString('nb-NO')
+  const linesHtml = rcpt.lines
+    .map(
+      (l) => `
+        <tr>
+          <td style="padding:8px 12px;border-bottom:1px solid #eee">${l.name}</td>
+          <td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:center">${l.qty}</td>
+          <td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:right">${new Intl.NumberFormat('nb-NO', { style: 'currency', currency: 'NOK' }).format(l.lineTotal)}</td>
+        </tr>`,
+    )
+    .join('\n')
+
+  const html = `<!doctype html>
+  <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Kvittering - ${date}</title>
+    <style>
+      body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:24px; background:#f7f9f8; color:#08382f}
+      .receipt{max-width:720px;margin:0 auto;background:#fff;padding:24px;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.06)}
+      .brand{color:#0a4d3c;font-weight:700;font-size:20px}
+      table{width:100%;border-collapse:collapse;margin-top:16px}
+      .footer{margin-top:20px;text-align:right;color:#375c4f}
+    </style>
+  </head>
+  <body>
+    <div class="receipt">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <div>
+          <div class="brand">neas</div>
+          <div style="font-size:12px;color:#4b6b63">Kvittering generert: ${date}</div>
+        </div>
+        <div style="text-align:right">
+          <div style="font-size:14px;font-weight:600;color:#0a4d3c">Lager</div>
+        </div>
+      </div>
+      <table role="presentation">
+        <thead>
+          <tr style="color:#386653;font-size:12px;text-transform:uppercase">
+            <th style="text-align:left;padding:8px 12px">Produkt</th>
+            <th style="text-align:center;padding:8px 12px">Antall</th>
+            <th style="text-align:right;padding:8px 12px">Beløp</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${linesHtml}
+        </tbody>
+      </table>
+      <div class="footer">
+        <div style="font-size:18px;font-weight:700">Totalt: ${new Intl.NumberFormat('nb-NO', { style: 'currency', currency: 'NOK' }).format(rcpt.total)}</div>
+      </div>
+    </div>
+  </body>
+  </html>`
+  return html
+}
+
+function openReceiptHtml() {
+  if (!receipt.value) return
+  const html = buildReceiptHtml(receipt.value)
+  const blob = new Blob([html], { type: 'text/html' })
+  const url = URL.createObjectURL(blob)
+  window.open(url, '_blank')
+  setTimeout(() => URL.revokeObjectURL(url), 10000)
+}
+
+async function downloadReceiptPng() {
+  if (!receipt.value) return
+  const html = buildReceiptHtml(receipt.value)
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+  const receiptEl = doc.querySelector('.receipt')
+  if (!receiptEl) return
+
+  const container = document.createElement('div')
+  container.style.position = 'fixed'
+  container.style.left = '-9999px'
+  container.style.top = '0'
+  container.style.width = '840px'
+  container.style.zIndex = '99999'
+  container.style.boxSizing = 'border-box'
+  container.style.padding = '20px'
+  container.style.background = '#ffffff'
+  container.innerHTML = receiptEl.outerHTML
+  document.body.appendChild(container)
+
+  try {
+    const canvas = await html2canvas(container, {
+      scale: 2,
+      backgroundColor: '#ffffff',
+      useCORS: true,
+    })
+    const dataUrl = canvas.toDataURL('image/png')
+    const a = document.createElement('a')
+    a.href = dataUrl
+    const now = new Date()
+    const filename = `receipt-${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}-${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}.png`
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+  } catch (err) {
+    console.error('Failed to render receipt to PNG', err)
+  } finally {
+    container.remove()
+  }
+}
 </script>
 
 <template>
   <div
-    class="flex min-h-screen flex-col bg-neas-mist text-neas-pine dark:bg-[#061512] dark:text-[#e8f0ec]"
+    ref="pageEl"
+    class="neas-page neas-grid flex min-h-screen flex-col text-neas-pine dark:text-[#e8f0ec]"
   >
     <header
-      class="border-b border-neas-pine/10 bg-neas-white px-[3.85vw] py-4 lg:py-5 dark:border-white/10 dark:bg-[#0c1f1a]"
+      class="neas-glass border-b border-neas-pine/10 px-[3.85vw] py-4 backdrop-blur-lg lg:py-5"
     >
       <div class="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-4">
         <div class="flex items-center gap-3 sm:gap-4">
@@ -61,46 +285,204 @@ function logout() {
             Logget inn som
             <span class="font-medium text-neas-pine dark:text-[#e8f0ec]">{{ username }}</span>
           </p>
-          <ThemeToggle />
-          <button
-            type="button"
-            class="rounded-xl border-2 border-neas-pine bg-transparent px-4 py-2 text-xs font-medium uppercase tracking-[0.1em] text-neas-pine transition-[background-color,color] hover:bg-neas-pine hover:text-neas-white dark:border-[#e8f0ec] dark:text-[#e8f0ec] dark:hover:bg-[#e8f0ec] dark:hover:text-neas-pine"
-            @click="logout"
-          >
-            Logg ut
-          </button>
+          <button type="button" class="neas-outline text-neas-pine" @click="logout">Logg ut</button>
         </div>
       </div>
     </header>
 
     <main class="flex-1 px-[3.85vw] py-8 lg:py-10">
-      <div
-        class="mx-auto max-w-[1200px] overflow-hidden rounded-xl border border-neas-pine/8 bg-neas-white shadow-[0_1px_0_rgba(0,61,45,0.06)] dark:border-white/10 dark:bg-[#0f241d] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)]"
-      >
-        <div
-          class="border-b border-neas-mist bg-neas-mist/60 px-6 py-4 lg:px-8 dark:border-white/10 dark:bg-[#0a1814]"
-        >
-          <h2
-            class="text-sm font-medium uppercase tracking-[0.08em] text-neas-pine dark:text-[#e8f0ec]"
+      <div class="mx-auto flex max-w-[1200px] flex-col gap-8">
+        <section class="neas-hero neas-hero-animate px-6 py-8 lg:px-10 lg:py-10">
+          <div
+            class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"
           >
-            Lager oversikt
-          </h2>
-          <p class="mt-1 text-sm font-normal leading-none text-neas-pine/65 dark:text-[#e8f0ec]/60">
-            Gjenstander i lageret ditt
-          </p>
-        </div>
+            <div class="max-w-xl">
+              <h2
+                class="neas-reveal neas-delay-1 mt-4 text-[clamp(2rem,4vw,3.5rem)] font-medium leading-[1.02] tracking-[-0.02em]"
+              >
+                Full kontroll over
+                <span class="text-neas-sun">lageret</span>
+              </h2>
+              <p class="neas-reveal neas-delay-2 mt-4 max-w-lg text-sm text-white/80 lg:text-base">
+                Se status i sanntid, legg til nye produkter og hold oversikt over total verdi.
+              </p>
+            </div>
+            <div class="flex flex-wrap gap-3">
+              <button type="button" class="neas-button neas-reveal neas-delay-2" @click="openSale">
+                Ny salg
+              </button>
+            </div>
+          </div>
+          <div class="relative z-10 mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <div class="neas-glass neas-kpi neas-reveal neas-delay-2 p-5">
+              <p
+                class="text-xs uppercase tracking-[0.16em] text-neas-pine/60 dark:text-[#e8f0ec]/60"
+              >
+                Produkter
+              </p>
+              <p
+                class="mt-3 text-3xl font-medium tracking-[-0.02em] text-neas-pine dark:text-[#e8f0ec]"
+              >
+                {{ totalProducts }}
+              </p>
+            </div>
+            <div class="neas-glass neas-kpi neas-reveal neas-delay-3 p-5">
+              <p
+                class="text-xs uppercase tracking-[0.16em] text-neas-pine/60 dark:text-[#e8f0ec]/60"
+              >
+                Enheter
+              </p>
+              <p
+                class="mt-3 text-3xl font-medium tracking-[-0.02em] text-neas-pine dark:text-[#e8f0ec]"
+              >
+                {{ totalUnits }}
+              </p>
+            </div>
+            <div class="neas-glass neas-kpi neas-reveal neas-delay-4 p-5">
+              <p
+                class="text-xs uppercase tracking-[0.16em] text-neas-pine/60 dark:text-[#e8f0ec]/60"
+              >
+                Total verdi
+              </p>
+              <p
+                class="mt-3 text-3xl font-medium tracking-[-0.02em] text-neas-pine dark:text-[#e8f0ec]"
+              >
+                {{ currency.format(totalValue) }}
+              </p>
+            </div>
+          </div>
+          <img
+            :src="logotypeSrc"
+            alt="Neas"
+            class="absolute right-6 top-6 h-5 w-auto opacity-80 lg:h-6"
+            width="140"
+            height="24"
+          />
+        </section>
 
-        <ItemForm v-if="isAdmin" />
-        <ItemTable :items="store.items" />
+        <section class="neas-panel neas-glass-strong neas-reveal neas-delay-3 overflow-hidden">
+          <div
+            class="border-b border-neas-mist bg-neas-mist/60 px-6 py-4 lg:px-8 dark:border-white/10 dark:bg-[#0a1814]"
+          >
+            <h2
+              class="text-sm font-medium uppercase tracking-[0.08em] text-neas-pine dark:text-[#e8f0ec]"
+            >
+              Lageroversikt
+            </h2>
+            <p
+              class="mt-1 text-sm font-normal leading-none text-neas-pine/65 dark:text-[#e8f0ec]/60"
+            >
+              Gjenstander i lageret ditt
+            </p>
+          </div>
+
+          <ItemForm v-if="isAdmin" />
+          <ItemTable :items="store.items" :is-admin="isAdmin" />
+        </section>
       </div>
     </main>
 
-    <footer class="mt-auto border-t border-neas-pine/10 px-[3.85vw] py-6 dark:border-white/10">
-      <p
-        class="mx-auto max-w-[1200px] text-center text-xs font-normal leading-none text-neas-pine/40 dark:text-[#e8f0ec]/35"
+    <Teleport to="body">
+      <div
+        v-if="isSelling"
+        class="fixed inset-0 z-[110] flex items-center justify-center bg-black/40 p-6 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
       >
-        Proof of concept · Dawid Czaplicki
-      </p>
-    </footer>
+        <div class="w-full max-w-[760px] rounded-2xl bg-neas-white p-6 shadow-2xl">
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-medium text-neas-pine">Ny salg</h3>
+            <button
+              class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-neas-pine/15 text-neas-pine"
+              @click="closeSale"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div v-if="saleStage === 'select'" class="mt-4">
+            <p class="text-sm text-neas-pine/70">Velg produkter og antall som selges.</p>
+            <div class="mt-4 max-h-[48vh] overflow-auto">
+              <table class="w-full text-left">
+                <thead>
+                  <tr class="text-xs text-neas-pine/70">
+                    <th>Produkt</th>
+                    <th>På lager</th>
+                    <th>Pris</th>
+                    <th>Selg</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="item in store.items"
+                    :key="item.id"
+                    class="border-t border-neas-mist py-2"
+                  >
+                    <td class="py-3 text-sm text-neas-pine">{{ item.name }}</td>
+                    <td class="py-3 text-sm text-neas-pine">{{ item.quantity }}</td>
+                    <td class="py-3 text-sm text-neas-pine">{{ item.price }}</td>
+                    <td class="py-3">
+                      <input
+                        type="number"
+                        min="0"
+                        :max="item.quantity"
+                        v-model.number="saleSelections[item.id]"
+                        class="neas-input w-24"
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="mt-4 flex items-center justify-end gap-3">
+              <p class="text-sm text-red-600 mr-auto" v-if="saleError">{{ saleError }}</p>
+              <button class="neas-outline" @click="closeSale">Avbryt</button>
+              <button class="neas-button" @click="generateReceipt">Forhåndsvis kvittering</button>
+            </div>
+          </div>
+
+          <div v-else class="mt-4">
+            <p class="text-sm text-neas-pine/70">Forhåndsvis kvittering</p>
+            <div class="mt-4">
+              <div
+                v-for="line in receipt.lines"
+                :key="line.id"
+                class="flex justify-between p-5 border-b border-neas-mist"
+              >
+                <div>
+                  <div class="text-sm font-medium text-neas-pine">{{ line.name }}</div>
+                  <div class="text-xs text-neas-pine/60">{{ line.sku }} × {{ line.qty }}</div>
+                </div>
+                <div class="text-sm text-neas-pine">
+                  {{
+                    new Intl.NumberFormat('nb-NO', { style: 'currency', currency: 'NOK' }).format(
+                      line.lineTotal,
+                    )
+                  }}
+                </div>
+              </div>
+              <div class="flex justify-between mt-4 pt-4 border-t border-neas-mist">
+                <div class="text-sm text-neas-pine/70">Totalt</div>
+                <div class="text-lg font-medium text-neas-pine">
+                  {{
+                    new Intl.NumberFormat('nb-NO', { style: 'currency', currency: 'NOK' }).format(
+                      receipt.total,
+                    )
+                  }}
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-4 flex justify-end gap-3">
+              <button class="neas-outline" @click="saleStage = 'select'">Tilbake</button>
+              <button class="neas-outline" @click="openReceiptHtml">Åpne kvittering</button>
+              <button class="neas-outline" @click="downloadReceiptPng">Last ned kvittering</button>
+              <button class="neas-outline" @click="confirmSale">Bekreft salg</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index f43fea2..23d11e0 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import ThemeToggle from '@/components/ThemeToggle.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -23,18 +22,50 @@ async function handleLogin() {
 
 const symbolMoss = '/neas-symbols/Neas%20Symbol%20Moss%20Green.svg'
 const logotypeWhite = '/neas-logos/Neas%20Logotype%20Sunlight%20Yellow.svg'
+
+const pageEl = ref(null)
+let rafId = 0
+
+function handlePointerMove(event) {
+  if (!pageEl.value) return
+  const { clientX, clientY } = event
+  if (rafId) cancelAnimationFrame(rafId)
+  rafId = requestAnimationFrame(() => {
+    const rect = pageEl.value.getBoundingClientRect()
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+    const offsetX = ((clientX - centerX) / rect.width) * 24
+    const offsetY = ((clientY - centerY) / rect.height) * 24
+    pageEl.value.style.setProperty('--neas-grid-x', `${offsetX.toFixed(2)}px`)
+    pageEl.value.style.setProperty('--neas-grid-y', `${offsetY.toFixed(2)}px`)
+  })
+}
+
+function handlePointerLeave() {
+  if (!pageEl.value) return
+  pageEl.value.style.setProperty('--neas-grid-x', '0px')
+  pageEl.value.style.setProperty('--neas-grid-y', '0px')
+}
+
+onMounted(() => {
+  window.addEventListener('pointermove', handlePointerMove, { passive: true })
+  window.addEventListener('pointerleave', handlePointerLeave)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', handlePointerMove)
+  window.removeEventListener('pointerleave', handlePointerLeave)
+  if (rafId) cancelAnimationFrame(rafId)
+})
 </script>
 
 <template>
-  <div class="relative min-h-screen flex flex-col lg:flex-row">
-    <div class="absolute right-[1vw] top-4 z-10 lg:top-5">
-      <ThemeToggle />
-    </div>
+  <div ref="pageEl" class="neas-page neas-grid relative min-h-screen flex flex-col lg:flex-row">
     <div
-      class="relative flex min-h-[42vh] flex-1 flex-col justify-end gap-4 bg-neas-pine p-[3.85vw] pb-12 pt-16 text-neas-white lg:min-h-screen lg:justify-between lg:pb-[3.85vw]"
+      class="neas-hero neas-hero-animate relative flex min-h-[45vh] flex-1 flex-col justify-between gap-6 rounded-l-none rounded-r-[24px] p-[3.85vw] pb-14 pt-16 text-neas-white lg:min-h-screen lg:pb-[3.85vw]"
     >
       <div
-        class="pointer-events-none absolute right-[6%] top-[10%] w-[min(42vw,260px)] select-none opacity-[0.22]"
+        class="neas-float pointer-events-none absolute right-[6%] top-[8%] w-[min(42vw,400px)] select-none opacity-[0.16]"
       >
         <img
           :src="symbolMoss"
@@ -44,41 +75,45 @@ const logotypeWhite = '/neas-logos/Neas%20Logotype%20Sunlight%20Yellow.svg'
           height="260"
         />
       </div>
-      <div class="relative max-w-md">
+
+      <div class="relative z-10 w-full mb-auto pb-4 lg:mb-0 lg:pb-0">
         <img
           :src="logotypeWhite"
           alt="Neas"
-          class="h-[clamp(1.75rem,4vw,2.25rem)] w-auto max-w-[min(100%,220px)] object-contain object-left"
+          class="neas-reveal h-[clamp(1.75rem,4vw,2.25rem)] w-auto max-w-[min(100%,220px)] object-contain object-left"
           width="220"
           height="36"
         />
+      </div>
+
+      <div class="relative max-w-md lg:mb-[6vh]">
         <h1
-          class="mt-5 text-[clamp(2.25rem,5vw,3.75rem)] font-medium leading-[1.05] tracking-[-0.02em] text-neas-white"
+          class="neas-reveal neas-delay-2 text-[clamp(2.35rem,5vw,4.5rem)] font-medium leading-[1.04] tracking-[-0.02em] text-neas-white"
         >
-          Lagerstyring-system
+          Oversikt som gjør beslutninger
+          <span class="text-neas-sun">enklere.</span>
         </h1>
         <p
-          class="mt-4 max-w-sm text-[clamp(0.9375rem,1.6vw,1.125rem)] font-normal leading-none text-white/85"
+          class="neas-reveal neas-delay-3 mt-6 max-w-[340px] text-[clamp(0.95rem,1.6vw,1.1rem)] font-normal leading-relaxed text-white/85"
         >
-          Logg inn for å vise og administrere produkter.
+          Logg inn og se lageret ditt i sanntid, med klare tall og tydelige prioriteringer.
         </p>
       </div>
-      <p class="hidden text-xs text-white/40 lg:block">Proof of concept · Dawid Czaplicki</p>
     </div>
 
-    <div
-      class="flex flex-1 items-center justify-center bg-neas-mist p-[3.85vw] py-12 lg:py-[3.85vw] dark:bg-[#061512]"
-    >
+    <div class="flex flex-1 items-center justify-center p-[3.85vw] py-12 lg:py-[3.85vw]">
       <div
-        class="w-full max-w-[420px] rounded-xl border border-neas-white bg-neas-white p-8 shadow-[0_1px_0_rgba(0,61,45,0.06)] lg:p-10 dark:border-white/10 dark:bg-[#0f241d] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)]"
+        class="neas-panel neas-glass-strong neas-reveal neas-delay-2 w-full max-w-[440px] p-8 lg:p-10"
       >
         <h2
-          class="text-xl font-medium leading-none tracking-[-0.02em] text-neas-pine dark:text-[#e8f0ec]"
+          class="text-2xl font-medium leading-none tracking-[-0.02em] text-neas-pine dark:text-[#e8f0ec]"
         >
           Logg inn
         </h2>
-        <p class="mt-2 text-sm font-normal leading-none text-neas-pine/70 dark:text-[#e8f0ec]/65">
-          Skriv inn ditt brukernavn og passord.
+        <p
+          class="mt-2 text-sm font-normal leading-relaxed text-neas-pine/70 dark:text-[#e8f0ec]/65"
+        >
+          Skriv inn brukernavn og passord for å fortsette.
         </p>
 
         <div
@@ -102,7 +137,7 @@ const logotypeWhite = '/neas-logos/Neas%20Logotype%20Sunlight%20Yellow.svg'
               v-model="username"
               type="text"
               autocomplete="username"
-              class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-3 text-base font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] placeholder:text-neas-pine/35 focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:placeholder:text-[#e8f0ec]/30 dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+              class="neas-input box-border w-full px-4 py-3 text-base font-normal leading-none text-neas-pine placeholder:text-neas-pine/35"
               placeholder=""
             />
           </div>
@@ -118,14 +153,11 @@ const logotypeWhite = '/neas-logos/Neas%20Logotype%20Sunlight%20Yellow.svg'
               v-model="password"
               type="password"
               autocomplete="current-password"
-              class="box-border w-full rounded-xl border border-neas-mid-grey bg-neas-light-grey/50 px-4 py-3 text-base font-normal leading-none text-neas-pine outline-none transition-[border-color,box-shadow,background-color] placeholder:text-neas-pine/35 focus:border-neas-pine focus:bg-neas-white focus:ring-2 focus:ring-neas-moss/35 dark:border-white/15 dark:bg-[#061512] dark:text-[#e8f0ec] dark:placeholder:text-[#e8f0ec]/30 dark:focus:border-neas-moss dark:focus:bg-[#0a1814] dark:focus:ring-neas-moss/25"
+              class="neas-input box-border w-full px-4 py-3 text-base font-normal leading-none text-neas-pine placeholder:text-neas-pine/35"
               placeholder=""
             />
           </div>
-          <button
-            type="submit"
-            class="w-full rounded-xl bg-neas-pine py-3.5 text-sm font-medium uppercase tracking-[0.1em] text-neas-white transition-[background-color,transform] hover:bg-[#002f24] active:scale-[0.99] dark:text-neas-white dark:hover:bg-[#004d3a]"
-          >
+          <button type="submit" class="neas-button-dark rounded-[13px] w-full py-3.5 text-sm">
             Logg inn
           </button>
         </form>