Merge pull request 'design update' (#3) from better-design into test

Reviewed-on: #3

node_modules/.bin/baseline-browser-mapping

@@ -1 +1,16 @@
-../baseline-browser-mapping/dist/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../baseline-browser-mapping/dist/cli.js" "$@"
+else 
+  exec node  "$basedir/../baseline-browser-mapping/dist/cli.js" "$@"
+fi

node_modules/.bin/browserslist

@@ -1 +1,16 @@
-../browserslist/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../browserslist/cli.js" "$@"
+else 
+  exec node  "$basedir/../browserslist/cli.js" "$@"
+fi

node_modules/.bin/esbuild

@@ -1 +1,16 @@
-../esbuild/bin/esbuild
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../esbuild/bin/esbuild" "$@"
+else 
+  exec node  "$basedir/../esbuild/bin/esbuild" "$@"
+fi

node_modules/.bin/jsesc

@@ -1 +1,16 @@
-../jsesc/bin/jsesc
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../jsesc/bin/jsesc" "$@"
+else 
+  exec node  "$basedir/../jsesc/bin/jsesc" "$@"
+fi

node_modules/.bin/json5

@@ -1 +1,16 @@
-../json5/lib/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../json5/lib/cli.js" "$@"
+else 
+  exec node  "$basedir/../json5/lib/cli.js" "$@"
+fi

node_modules/.bin/loose-envify

@@ -1 +1,16 @@
-../loose-envify/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../loose-envify/cli.js" "$@"
+else 
+  exec node  "$basedir/../loose-envify/cli.js" "$@"
+fi

node_modules/.bin/nanoid

@@ -1 +1,16 @@
-../nanoid/bin/nanoid.cjs
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+else 
+  exec node  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+fi

node_modules/.bin/parser

@@ -1 +1,16 @@
-../@babel/parser/bin/babel-parser.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+else 
+  exec node  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+fi

node_modules/.bin/rollup

@@ -1 +1,16 @@
-../rollup/dist/bin/rollup
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../rollup/dist/bin/rollup" "$@"
+else 
+  exec node  "$basedir/../rollup/dist/bin/rollup" "$@"
+fi

node_modules/.bin/semver

@@ -1 +1,16 @@
-../semver/bin/semver.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../semver/bin/semver.js" "$@"
+else 
+  exec node  "$basedir/../semver/bin/semver.js" "$@"
+fi

node_modules/.bin/update-browserslist-db

@@ -1 +1,16 @@
-../update-browserslist-db/cli.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../update-browserslist-db/cli.js" "$@"
+else 
+  exec node  "$basedir/../update-browserslist-db/cli.js" "$@"
+fi

node_modules/.bin/vite

@@ -1 +1,16 @@
-../vite/bin/vite.js
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else 
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

node_modules/.package-lock.json

@@ -32,6 +32,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -275,17 +276,17 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
+    "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "dev": true,
       "optional": true,
       "os": [
-        "darwin"
+        "win32"
       ],
       "engines": {
         "node": ">=12"
@@ -350,17 +351,30 @@
       "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
       "dev": true
     },
-    "node_modules/@rollup/rollup-darwin-arm64": {
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
       "version": "4.53.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz",
-      "integrity": "sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
       "dev": true,
       "optional": true,
       "os": [
-        "darwin"
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.5.tgz",
+      "integrity": "sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
       ]
     },
     "node_modules/@tabler/icons": {
@@ -447,6 +461,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -523,6 +538,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -799,20 +815,6 @@
         }
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -1133,6 +1135,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -1144,6 +1147,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -1299,7 +1303,8 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tr46": {
       "version": "0.0.3",
@@ -1347,6 +1352,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

node_modules/.vite/deps/_metadata.json

@@ -1,130 +1,130 @@
 {
-  "hash": "d78f2739",
-  "configHash": "b1cb6c91",
-  "lockfileHash": "4b2b8d7d",
-  "browserHash": "9a736d5a",
+  "hash": "ba7c7150",
+  "configHash": "6a220e5a",
+  "lockfileHash": "a10f8d29",
+  "browserHash": "db384cdc",
   "optimized": {
     "react": {
       "src": "../../react/index.js",
       "file": "react.js",
-      "fileHash": "2dd90c89",
+      "fileHash": "d41cd819",
       "needsInterop": true
     },
     "react-dom": {
       "src": "../../react-dom/index.js",
       "file": "react-dom.js",
-      "fileHash": "8229fa46",
+      "fileHash": "02c7f745",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "6db368d6",
+      "fileHash": "beec6a15",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "a8fbd3f7",
+      "fileHash": "f6c3e40e",
       "needsInterop": true
     },
-    "appwrite": {
-      "src": "../../appwrite/dist/esm/sdk.js",
-      "file": "appwrite.js",
-      "fileHash": "a2fa5c99",
-      "needsInterop": false
-    },
-    "date-fns": {
-      "src": "../../date-fns/esm/index.js",
-      "file": "date-fns.js",
-      "fileHash": "157aa30f",
-      "needsInterop": false
-    },
-    "date-fns/locale": {
-      "src": "../../date-fns/esm/locale/index.js",
-      "file": "date-fns_locale.js",
-      "fileHash": "cd94d345",
-      "needsInterop": false
-    },
-    "react-dom/client": {
-      "src": "../../react-dom/client.js",
-      "file": "react-dom_client.js",
-      "fileHash": "8948be38",
-      "needsInterop": true
-    },
-    "react-icons/fa": {
-      "src": "../../react-icons/fa/index.esm.js",
-      "file": "react-icons_fa.js",
-      "fileHash": "c064e92c",
-      "needsInterop": false
-    },
-    "react-icons/fa6": {
-      "src": "../../react-icons/fa6/index.esm.js",
-      "file": "react-icons_fa6.js",
-      "fileHash": "0e64eca2",
-      "needsInterop": false
-    },
-    "react-router-dom": {
-      "src": "../../react-router-dom/dist/index.js",
-      "file": "react-router-dom.js",
-      "fileHash": "0004d718",
-      "needsInterop": false
-    },
-    "motion/react": {
-      "src": "../../motion/dist/es/react.mjs",
-      "file": "motion_react.js",
-      "fileHash": "42596b33",
-      "needsInterop": false
-    },
     "@tabler/icons-react": {
       "src": "../../@tabler/icons-react/dist/esm/tabler-icons-react.mjs",
       "file": "@tabler_icons-react.js",
-      "fileHash": "14b4db2f",
+      "fileHash": "11d925b5",
+      "needsInterop": false
+    },
+    "appwrite": {
+      "src": "../../appwrite/dist/esm/sdk.js",
+      "file": "appwrite.js",
+      "fileHash": "e5052173",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "87b6d9e4",
+      "fileHash": "7fc4f217",
       "needsInterop": false
     },
-    "tailwind-merge": {
-      "src": "../../tailwind-merge/dist/bundle-mjs.mjs",
-      "file": "tailwind-merge.js",
-      "fileHash": "adee159c",
+    "date-fns": {
+      "src": "../../date-fns/esm/index.js",
+      "file": "date-fns.js",
+      "fileHash": "371588f0",
       "needsInterop": false
     },
-    "three": {
-      "src": "../../three/build/three.module.js",
-      "file": "three.js",
-      "fileHash": "f10da6a8",
+    "date-fns/locale": {
+      "src": "../../date-fns/esm/locale/index.js",
+      "file": "date-fns_locale.js",
+      "fileHash": "927376cc",
+      "needsInterop": false
+    },
+    "motion/react": {
+      "src": "../../motion/dist/es/react.mjs",
+      "file": "motion_react.js",
+      "fileHash": "03c47f11",
       "needsInterop": false
     },
     "postprocessing": {
       "src": "../../postprocessing/build/index.js",
       "file": "postprocessing.js",
-      "fileHash": "205bd067",
+      "fileHash": "6a1af3d4",
+      "needsInterop": false
+    },
+    "react-dom/client": {
+      "src": "../../react-dom/client.js",
+      "file": "react-dom_client.js",
+      "fileHash": "13d89711",
+      "needsInterop": true
+    },
+    "react-icons/fa": {
+      "src": "../../react-icons/fa/index.esm.js",
+      "file": "react-icons_fa.js",
+      "fileHash": "ce6891d0",
+      "needsInterop": false
+    },
+    "react-icons/fa6": {
+      "src": "../../react-icons/fa6/index.esm.js",
+      "file": "react-icons_fa6.js",
+      "fileHash": "836a5ede",
+      "needsInterop": false
+    },
+    "react-router-dom": {
+      "src": "../../react-router-dom/dist/index.js",
+      "file": "react-router-dom.js",
+      "fileHash": "65b7bd91",
+      "needsInterop": false
+    },
+    "tailwind-merge": {
+      "src": "../../tailwind-merge/dist/bundle-mjs.mjs",
+      "file": "tailwind-merge.js",
+      "fileHash": "8ea254d4",
+      "needsInterop": false
+    },
+    "three": {
+      "src": "../../three/build/three.module.js",
+      "file": "three.js",
+      "fileHash": "c500eef6",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-DQJKJRV5": {
-      "file": "chunk-DQJKJRV5.js"
-    },
     "chunk-IFCYBMKG": {
       "file": "chunk-IFCYBMKG.js"
     },
-    "chunk-6PXSGDAH": {
-      "file": "chunk-6PXSGDAH.js"
+    "chunk-7VTGDDTZ": {
+      "file": "chunk-7VTGDDTZ.js"
     },
-    "chunk-PJEEZAML": {
-      "file": "chunk-PJEEZAML.js"
+    "chunk-TDH2IRYZ": {
+      "file": "chunk-TDH2IRYZ.js"
     },
-    "chunk-DRWLMN53": {
-      "file": "chunk-DRWLMN53.js"
+    "chunk-NMLHVZ76": {
+      "file": "chunk-NMLHVZ76.js"
     },
-    "chunk-SJKHQ62W": {
-      "file": "chunk-SJKHQ62W.js"
+    "chunk-QRULMDK5": {
+      "file": "chunk-QRULMDK5.js"
+    },
+    "chunk-FSI7PPCM": {
+      "file": "chunk-FSI7PPCM.js"
     },
     "chunk-G3PMV62Z": {
       "file": "chunk-G3PMV62Z.js"

node_modules/.vite/deps/date-fns.js

@@ -256,7 +256,7 @@ import {
   weeksToDays,
   yearsToMonths,
   yearsToQuarters
-} from "./chunk-SJKHQ62W.js";
+} from "./chunk-FSI7PPCM.js";
 import "./chunk-G3PMV62Z.js";
 export {
   add,

node_modules/.vite/deps/date-fns_locale.js

@@ -11,7 +11,7 @@ import {
   requiredArgs,
   startOfUTCWeek,
   toDate
-} from "./chunk-SJKHQ62W.js";
+} from "./chunk-FSI7PPCM.js";
 import "./chunk-G3PMV62Z.js";
 
 // node_modules/date-fns/esm/locale/af/_lib/formatDistance/index.js

node_modules/.vite/deps/react-dom.js

@@ -1,7 +1,7 @@
 import {
   require_react_dom
-} from "./chunk-PJEEZAML.js";
-import "./chunk-DRWLMN53.js";
+} from "./chunk-TDH2IRYZ.js";
+import "./chunk-QRULMDK5.js";
 import "./chunk-G3PMV62Z.js";
 export default require_react_dom();
 //# sourceMappingURL=react-dom.js.map

node_modules/.vite/deps/react-dom_client.js

@@ -1,7 +1,7 @@
 import {
   require_react_dom
-} from "./chunk-PJEEZAML.js";
-import "./chunk-DRWLMN53.js";
+} from "./chunk-TDH2IRYZ.js";
+import "./chunk-QRULMDK5.js";
 import {
   __commonJS
 } from "./chunk-G3PMV62Z.js";

node_modules/.vite/deps/react-dom_client.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react-dom/client.js"],
-  "sourcesContent": ["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n  exports.createRoot = m.createRoot;\n  exports.hydrateRoot = m.hydrateRoot;\n} else {\n  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n  exports.createRoot = function(c, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.createRoot(c, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n  exports.hydrateRoot = function(c, h, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.hydrateRoot(c, h, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n}\n"],
+  "sourcesContent": ["'use strict';\r\n\r\nvar m = require('react-dom');\r\nif (process.env.NODE_ENV === 'production') {\r\n  exports.createRoot = m.createRoot;\r\n  exports.hydrateRoot = m.hydrateRoot;\r\n} else {\r\n  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\r\n  exports.createRoot = function(c, o) {\r\n    i.usingClientEntryPoint = true;\r\n    try {\r\n      return m.createRoot(c, o);\r\n    } finally {\r\n      i.usingClientEntryPoint = false;\r\n    }\r\n  };\r\n  exports.hydrateRoot = function(c, h, o) {\r\n    i.usingClientEntryPoint = true;\r\n    try {\r\n      return m.hydrateRoot(c, h, o);\r\n    } finally {\r\n      i.usingClientEntryPoint = false;\r\n    }\r\n  };\r\n}\r\n"],
   "mappings": ";;;;;;;;;AAAA;AAAA;AAEA,QAAI,IAAI;AACR,QAAI,OAAuC;AACzC,cAAQ,aAAa,EAAE;AACvB,cAAQ,cAAc,EAAE;AAAA,IAC1B,OAAO;AACD,UAAI,EAAE;AACV,cAAQ,aAAa,SAAS,GAAG,GAAG;AAClC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,WAAW,GAAG,CAAC;AAAA,QAC1B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AACA,cAAQ,cAAc,SAAS,GAAG,GAAG,GAAG;AACtC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,YAAY,GAAG,GAAG,CAAC;AAAA,QAC9B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAjBM;AAAA;AAAA;",
   "names": []
 }

node_modules/.vite/deps/react-icons_fa.js

@@ -1,7 +1,7 @@
 import {
   GenIcon
-} from "./chunk-DQJKJRV5.js";
-import "./chunk-DRWLMN53.js";
+} from "./chunk-7VTGDDTZ.js";
+import "./chunk-QRULMDK5.js";
 import "./chunk-G3PMV62Z.js";
 
 // node_modules/react-icons/fa/index.esm.js

node_modules/.vite/deps/react-icons_fa6.js

@@ -1,7 +1,7 @@
 import {
   GenIcon
-} from "./chunk-DQJKJRV5.js";
-import "./chunk-DRWLMN53.js";
+} from "./chunk-7VTGDDTZ.js";
+import "./chunk-QRULMDK5.js";
 import "./chunk-G3PMV62Z.js";
 
 // node_modules/react-icons/fa6/index.esm.js

node_modules/.vite/deps/react-router-dom.js

@@ -1,9 +1,9 @@
 import {
   require_react_dom
-} from "./chunk-PJEEZAML.js";
+} from "./chunk-TDH2IRYZ.js";
 import {
   require_react
-} from "./chunk-DRWLMN53.js";
+} from "./chunk-QRULMDK5.js";
 import {
   __toESM
 } from "./chunk-G3PMV62Z.js";

node_modules/.vite/deps/react.js

@@ -1,6 +1,6 @@
 import {
   require_react
-} from "./chunk-DRWLMN53.js";
+} from "./chunk-QRULMDK5.js";
 import "./chunk-G3PMV62Z.js";
 export default require_react();
 //# sourceMappingURL=react.js.map

node_modules/.vite/deps/react_jsx-dev-runtime.js

@@ -1,6 +1,6 @@
 import {
   require_react
-} from "./chunk-DRWLMN53.js";
+} from "./chunk-QRULMDK5.js";
 import {
   __commonJS
 } from "./chunk-G3PMV62Z.js";

node_modules/.vite/deps/react_jsx-runtime.js

@@ -1,7 +1,7 @@
 import {
   require_jsx_runtime
-} from "./chunk-6PXSGDAH.js";
-import "./chunk-DRWLMN53.js";
+} from "./chunk-NMLHVZ76.js";
+import "./chunk-QRULMDK5.js";
 import "./chunk-G3PMV62Z.js";
 export default require_jsx_runtime();
 //# sourceMappingURL=react_jsx-runtime.js.map

node_modules/@esbuild/darwin-arm64/README.md

@@ -1,3 +0,0 @@
-# esbuild
-
-This is the macOS ARM 64-bit binary for esbuild, a JavaScript bundler and minifier. See https://github.com/evanw/esbuild for details.

node_modules/@esbuild/darwin-arm64/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@esbuild/darwin-arm64",
-  "version": "0.21.5",
-  "description": "The macOS ARM 64-bit binary for esbuild, a JavaScript bundler.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/evanw/esbuild.git"
-  },
-  "license": "MIT",
-  "preferUnplugged": true,
-  "engines": {
-    "node": ">=12"
-  },
-  "os": [
-    "darwin"
-  ],
-  "cpu": [
-    "arm64"
-  ]
-}

node_modules/@rollup/rollup-darwin-arm64/README.md

@@ -1,3 +0,0 @@
-# `@rollup/rollup-darwin-arm64`
-
-This is the **aarch64-apple-darwin** binary for `rollup`

node_modules/@rollup/rollup-darwin-arm64/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "@rollup/rollup-darwin-arm64",
-  "version": "4.53.5",
-  "os": [
-    "darwin"
-  ],
-  "cpu": [
-    "arm64"
-  ],
-  "files": [
-    "rollup.darwin-arm64.node"
-  ],
-  "description": "Native bindings for Rollup",
-  "author": "Lukas Taegert-Atkinson",
-  "homepage": "https://rollupjs.org/",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/rollup/rollup.git"
-  },
-  "main": "./rollup.darwin-arm64.node"
-}

node_modules/fsevents/LICENSE

@@ -1,22 +0,0 @@
-MIT License
------------
-
-Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

node_modules/fsevents/README.md

@@ -1,89 +0,0 @@
-# fsevents
-
-Native access to MacOS FSEvents in [Node.js](https://nodejs.org/)
-
-The FSEvents API in MacOS allows applications to register for notifications of
-changes to a given directory tree. It is a very fast and lightweight alternative
-to kqueue.
-
-This is a low-level library. For a cross-platform file watching module that
-uses fsevents, check out [Chokidar](https://github.com/paulmillr/chokidar).
-
-## Usage
-
-```sh
-npm install fsevents
-```
-
-Supports only **Node.js v8.16 and higher**.
-
-```js
-const fsevents = require('fsevents');
-
-// To start observation
-const stop = fsevents.watch(__dirname, (path, flags, id) => {
-  const info = fsevents.getInfo(path, flags);
-});
-
-// To end observation
-stop();
-```
-
-> **Important note:** The API behaviour is slightly different from typical JS APIs. The `stop` function **must** be
-> retrieved and stored somewhere, even if you don't plan to stop the watcher. If you forget it, the garbage collector
-> will eventually kick in, the watcher will be unregistered, and your callbacks won't be called anymore.
-
-The callback passed as the second parameter to `.watch` get's called whenever the operating system detects a
-a change in the file system. It takes three arguments:
-
-###### `fsevents.watch(dirname: string, (path: string, flags: number, id: string) => void): () => Promise<undefined>`
-
- * `path: string` - the item in the filesystem that have been changed
- * `flags: number` - a numeric value describing what the change was
- * `id: string` - an unique-id identifying this specific event
-
- Returns closer callback which when called returns a Promise resolving when the watcher process has been shut down.
-
-###### `fsevents.getInfo(path: string, flags: number, id: string): FsEventInfo`
-
-The `getInfo` function takes the `path`, `flags` and `id` arguments and converts those parameters into a structure
-that is easier to digest to determine what the change was.
-
-The `FsEventsInfo` has the following shape:
-
-```js
-/**
- * @typedef {'created'|'modified'|'deleted'|'moved'|'root-changed'|'cloned'|'unknown'} FsEventsEvent
- * @typedef {'file'|'directory'|'symlink'} FsEventsType
- */
-{
-  "event": "created", // {FsEventsEvent}
-  "path": "file.txt",
-  "type": "file",    // {FsEventsType}
-  "changes": {
-    "inode": true,   // Had iNode Meta-Information changed
-    "finder": false, // Had Finder Meta-Data changed
-    "access": false, // Had access permissions changed
-    "xattrs": false  // Had xAttributes changed
-  },
-  "flags": 0x100000000
-}
-```
-
-## Changelog
-
-- v2.3 supports Apple Silicon ARM CPUs
-- v2 supports node 8.16+ and reduces package size massively
-- v1.2.8 supports node 6+
-- v1.2.7 supports node 4+
-
-## Troubleshooting
-
-- I'm getting `EBADPLATFORM` `Unsupported platform for fsevents` error.
-- It's fine, nothing is broken. fsevents is macos-only. Other platforms are skipped. If you want to hide this warning, report a bug to NPM bugtracker asking them to hide ebadplatform warnings by default.
-
-## License
-
-The MIT License Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller — see LICENSE file.
-
-Visit our [GitHub page](https://github.com/fsevents/fsevents) and [NPM Page](https://npmjs.org/package/fsevents)

node_modules/fsevents/fsevents.d.ts

@@ -1,46 +0,0 @@
-declare type Event = "created" | "cloned" | "modified" | "deleted" | "moved" | "root-changed" | "unknown";
-declare type Type = "file" | "directory" | "symlink";
-declare type FileChanges = {
-  inode: boolean;
-  finder: boolean;
-  access: boolean;
-  xattrs: boolean;
-};
-declare type Info = {
-  event: Event;
-  path: string;
-  type: Type;
-  changes: FileChanges;
-  flags: number;
-};
-declare type WatchHandler = (path: string, flags: number, id: string) => void;
-export declare function watch(path: string, handler: WatchHandler): () => Promise<void>;
-export declare function watch(path: string, since: number, handler: WatchHandler): () => Promise<void>;
-export declare function getInfo(path: string, flags: number): Info;
-export declare const constants: {
-  None: 0x00000000;
-  MustScanSubDirs: 0x00000001;
-  UserDropped: 0x00000002;
-  KernelDropped: 0x00000004;
-  EventIdsWrapped: 0x00000008;
-  HistoryDone: 0x00000010;
-  RootChanged: 0x00000020;
-  Mount: 0x00000040;
-  Unmount: 0x00000080;
-  ItemCreated: 0x00000100;
-  ItemRemoved: 0x00000200;
-  ItemInodeMetaMod: 0x00000400;
-  ItemRenamed: 0x00000800;
-  ItemModified: 0x00001000;
-  ItemFinderInfoMod: 0x00002000;
-  ItemChangeOwner: 0x00004000;
-  ItemXattrMod: 0x00008000;
-  ItemIsFile: 0x00010000;
-  ItemIsDir: 0x00020000;
-  ItemIsSymlink: 0x00040000;
-  ItemIsHardlink: 0x00100000;
-  ItemIsLastHardlink: 0x00200000;
-  OwnEvent: 0x00080000;
-  ItemCloned: 0x00400000;
-};
-export {};

node_modules/fsevents/fsevents.js

@@ -1,83 +0,0 @@
-/*
- ** © 2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
- ** Licensed under MIT License.
- */
-
-/* jshint node:true */
-"use strict";
-
-if (process.platform !== "darwin") {
-  throw new Error(`Module 'fsevents' is not compatible with platform '${process.platform}'`);
-}
-
-const Native = require("./fsevents.node");
-const events = Native.constants;
-
-function watch(path, since, handler) {
-  if (typeof path !== "string") {
-    throw new TypeError(`fsevents argument 1 must be a string and not a ${typeof path}`);
-  }
-  if ("function" === typeof since && "undefined" === typeof handler) {
-    handler = since;
-    since = Native.flags.SinceNow;
-  }
-  if (typeof since !== "number") {
-    throw new TypeError(`fsevents argument 2 must be a number and not a ${typeof since}`);
-  }
-  if (typeof handler !== "function") {
-    throw new TypeError(`fsevents argument 3 must be a function and not a ${typeof handler}`);
-  }
-
-  let instance = Native.start(Native.global, path, since, handler);
-  if (!instance) throw new Error(`could not watch: ${path}`);
-  return () => {
-    const result = instance ? Promise.resolve(instance).then(Native.stop) : Promise.resolve(undefined);
-    instance = undefined;
-    return result;
-  };
-}
-
-function getInfo(path, flags) {
-  return {
-    path,
-    flags,
-    event: getEventType(flags),
-    type: getFileType(flags),
-    changes: getFileChanges(flags),
-  };
-}
-
-function getFileType(flags) {
-  if (events.ItemIsFile & flags) return "file";
-  if (events.ItemIsDir & flags) return "directory";
-  if (events.MustScanSubDirs & flags) return "directory"; 
-  if (events.ItemIsSymlink & flags) return "symlink";
-}
-function anyIsTrue(obj) {
-  for (let key in obj) {
-    if (obj[key]) return true;
-  }
-  return false;
-}
-function getEventType(flags) {
-  if (events.ItemRemoved & flags) return "deleted";
-  if (events.ItemRenamed & flags) return "moved";
-  if (events.ItemCreated & flags) return "created";
-  if (events.ItemModified & flags) return "modified";
-  if (events.RootChanged & flags) return "root-changed";
-  if (events.ItemCloned & flags) return "cloned";
-  if (anyIsTrue(flags)) return "modified";
-  return "unknown";
-}
-function getFileChanges(flags) {
-  return {
-    inode: !!(events.ItemInodeMetaMod & flags),
-    finder: !!(events.ItemFinderInfoMod & flags),
-    access: !!(events.ItemChangeOwner & flags),
-    xattrs: !!(events.ItemXattrMod & flags),
-  };
-}
-
-exports.watch = watch;
-exports.getInfo = getInfo;
-exports.constants = events;

node_modules/fsevents/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "fsevents",
-  "version": "2.3.3",
-  "description": "Native Access to MacOS FSEvents",
-  "main": "fsevents.js",
-  "types": "fsevents.d.ts",
-  "os": [
-    "darwin"
-  ],
-  "files": [
-    "fsevents.d.ts",
-    "fsevents.js",
-    "fsevents.node"
-  ],
-  "engines": {
-    "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-  },
-  "scripts": {
-    "clean": "node-gyp clean && rm -f fsevents.node",
-    "build": "node-gyp clean && rm -f fsevents.node && node-gyp rebuild && node-gyp clean",
-    "test": "/bin/bash ./test.sh 2>/dev/null",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fsevents/fsevents.git"
-  },
-  "keywords": [
-    "fsevents",
-    "mac"
-  ],
-  "contributors": [
-    {
-      "name": "Philipp Dunkel",
-      "email": "pip@pipobscure.com"
-    },
-    {
-      "name": "Ben Noordhuis",
-      "email": "info@bnoordhuis.nl"
-    },
-    {
-      "name": "Elan Shankar",
-      "email": "elan.shanker@gmail.com"
-    },
-    {
-      "name": "Miroslav Bajtoš",
-      "email": "mbajtoss@gmail.com"
-    },
-    {
-      "name": "Paul Miller",
-      "url": "https://paulmillr.com"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/fsevents/fsevents/issues"
-  },
-  "homepage": "https://github.com/fsevents/fsevents",
-  "devDependencies": {
-    "node-gyp": "^9.4.0"
-  }
-}

package-lock.json

@@ -56,6 +56,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1096,6 +1097,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1172,6 +1174,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1782,6 +1785,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -1793,6 +1797,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -1948,7 +1953,8 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tr46": {
       "version": "0.0.3",
@@ -1996,6 +2002,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

src/App.jsx

@@ -110,6 +110,7 @@ function AppContent() {
           edgeFade={0.3}
         />
       </div>
+      
       <div style={{ position: 'relative', zIndex: 1, display: 'flex', height: '100vh', overflow: 'hidden' }}>
         <Navbar />
         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>

src/components/LetterGlitch.jsx

@@ -0,0 +1,245 @@
+import { useRef, useEffect } from 'react';
+
+const LetterGlitch = ({
+  glitchColors = ['#2b4539', '#61dca3', '#61b3dc'],
+  className = '',
+  glitchSpeed = 50,
+  centerVignette = false,
+  outerVignette = true,
+  smooth = true,
+  characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456789'
+}) => {
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+  const letters = useRef([]);
+  const grid = useRef({ columns: 0, rows: 0 });
+  const context = useRef(null);
+  const lastGlitchTime = useRef(Date.now());
+
+  const lettersAndSymbols = Array.from(characters);
+
+  const fontSize = 16;
+  const charWidth = 10;
+  const charHeight = 20;
+
+  const getRandomChar = () => {
+    return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];
+  };
+
+  const getRandomColor = () => {
+    return glitchColors[Math.floor(Math.random() * glitchColors.length)];
+  };
+
+  const hexToRgb = hex => {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+      return r + r + g + g + b + b;
+    });
+
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16)
+        }
+      : null;
+  };
+
+  const interpolateColor = (start, end, factor) => {
+    const result = {
+      r: Math.round(start.r + (end.r - start.r) * factor),
+      g: Math.round(start.g + (end.g - start.g) * factor),
+      b: Math.round(start.b + (end.b - start.b) * factor)
+    };
+    return `rgb(${result.r}, ${result.g}, ${result.b})`;
+  };
+
+  const calculateGrid = (width, height) => {
+    const columns = Math.ceil(width / charWidth);
+    const rows = Math.ceil(height / charHeight);
+    return { columns, rows };
+  };
+
+  const initializeLetters = (columns, rows) => {
+    grid.current = { columns, rows };
+    const totalLetters = columns * rows;
+    letters.current = Array.from({ length: totalLetters }, () => ({
+      char: getRandomChar(),
+      color: getRandomColor(),
+      targetColor: getRandomColor(),
+      colorProgress: 1
+    }));
+  };
+
+  const resizeCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const parent = canvas.parentElement;
+    if (!parent) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = parent.getBoundingClientRect();
+
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+
+    if (context.current) {
+      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    const { columns, rows } = calculateGrid(rect.width, rect.height);
+    initializeLetters(columns, rows);
+
+    drawLetters();
+  };
+
+  const drawLetters = () => {
+    if (!context.current || letters.current.length === 0) return;
+    const ctx = context.current;
+    const { width, height } = canvasRef.current.getBoundingClientRect();
+    ctx.clearRect(0, 0, width, height);
+    ctx.font = `${fontSize}px monospace`;
+    ctx.textBaseline = 'top';
+
+    letters.current.forEach((letter, index) => {
+      const x = (index % grid.current.columns) * charWidth;
+      const y = Math.floor(index / grid.current.columns) * charHeight;
+      ctx.fillStyle = letter.color;
+      ctx.fillText(letter.char, x, y);
+    });
+  };
+
+  const updateLetters = () => {
+    if (!letters.current || letters.current.length === 0) return;
+
+    const updateCount = Math.max(1, Math.floor(letters.current.length * 0.05));
+
+    for (let i = 0; i < updateCount; i++) {
+      const index = Math.floor(Math.random() * letters.current.length);
+      if (!letters.current[index]) continue;
+
+      letters.current[index].char = getRandomChar();
+      letters.current[index].targetColor = getRandomColor();
+
+      if (!smooth) {
+        letters.current[index].color = letters.current[index].targetColor;
+        letters.current[index].colorProgress = 1;
+      } else {
+        letters.current[index].colorProgress = 0;
+      }
+    }
+  };
+
+  const handleSmoothTransitions = () => {
+    let needsRedraw = false;
+    letters.current.forEach(letter => {
+      if (letter.colorProgress < 1) {
+        letter.colorProgress += 0.05;
+        if (letter.colorProgress > 1) letter.colorProgress = 1;
+
+        const startRgb = hexToRgb(letter.color);
+        const endRgb = hexToRgb(letter.targetColor);
+        if (startRgb && endRgb) {
+          letter.color = interpolateColor(startRgb, endRgb, letter.colorProgress);
+          needsRedraw = true;
+        }
+      }
+    });
+
+    if (needsRedraw) {
+      drawLetters();
+    }
+  };
+
+  const animate = () => {
+    const now = Date.now();
+    if (now - lastGlitchTime.current >= glitchSpeed) {
+      updateLetters();
+      drawLetters();
+      lastGlitchTime.current = now;
+    }
+
+    if (smooth) {
+      handleSmoothTransitions();
+    }
+
+    animationRef.current = requestAnimationFrame(animate);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    context.current = canvas.getContext('2d');
+    resizeCanvas();
+    animate();
+
+    let resizeTimeout;
+
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        cancelAnimationFrame(animationRef.current);
+        resizeCanvas();
+        animate();
+      }, 100);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      window.removeEventListener('resize', handleResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [glitchSpeed, smooth]);
+
+  const containerStyle = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000000',
+    overflow: 'hidden'
+  };
+
+  const canvasStyle = {
+    display: 'block',
+    width: '100%',
+    height: '100%'
+  };
+
+  const outerVignetteStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    background: 'radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%)'
+  };
+
+  const centerVignetteStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    background: 'radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%)'
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <canvas ref={canvasRef} style={canvasStyle} />
+      {outerVignette && <div style={outerVignetteStyle}></div>}
+      {centerVignette && <div style={centerVignetteStyle}></div>}
+    </div>
+  );
+};
+
+export default LetterGlitch;
+

src/components/TicketRow.jsx

@@ -102,8 +102,8 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
 
   return (
     <>
-      <tr className="ticket-row">
-        <td className="ticket-id" rowSpan={2}>
+      <tr className={`ticket-row ${expanded ? 'ticket-expanded' : 'ticket-collapsed'}`}>
+        <td className={`ticket-id ${expanded ? 'ticket-id-expanded' : ''}`} rowSpan={2}>
           <div><strong>WOID:</strong> {ticket.woid || ticket.$id?.slice(-5)}</div>
           <div className="ticket-time">{elapsed}</div>
         </td>
@@ -177,13 +177,20 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
       </tr>
       {expanded && (
         <>
-          <tr>
-            <td colSpan={10} className="p-2">
-              <div className="card">
+          <tr className="worksheet-expansion">
+            <td colSpan={10} className="worksheet-cell">
+              <div className="card" style={{ 
+                borderRadius: '0 0 12px 12px',
+                marginTop: 0,
+                border: '1px solid rgba(16, 185, 129, 0.2)',
+                borderTop: 'none'
+              }}>
                 <div className="card-header d-flex justify-content-between align-items-center" style={{
                   background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
                   color: 'white',
-                  padding: '1rem 1.5rem'
+                  padding: '1rem 1.5rem',
+                  borderRadius: 0,
+                  borderBottom: '1px solid rgba(16, 185, 129, 0.2)'
                 }}>
                   <span className="fs-5 fw-bold">Details - WOID {ticket.woid || ticket.$id}</span>
                   <button 
@@ -206,7 +213,7 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
                     <FaPlus className="me-2" /> Add Worksheet
                   </button>
                 </div>
-                <div className="card-body">
+                <div className="card-body" style={{ borderRadius: '0 0 12px 12px' }}>
                   <div className="mb-4 p-4 rounded-3 shadow-sm" style={{
                     background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
                     border: '2px solid #10b981'
@@ -257,7 +264,7 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
         onCreate={handleCreateWorksheet}
       />
       <tr className="spacer">
-        <td colSpan={10} style={{ height: '8px', background: '#fff' }}></td>
+        <td colSpan={10} style={{ height: '12px', background: 'transparent', border: 'none' }}></td>
       </tr>
     </>
   )

src/context/AuthContext.jsx

@@ -137,34 +137,6 @@ export function AuthProvider({ children }) {
     }
   }
 
-  async function register(email, password, name) {
-    if (DEMO_MODE) {
-      return login(email, password)
-    }
-    
-    try {
-      // Appwrite SDK 13.0 verwendet ID.unique() für die User ID
-      await account.create(ID.unique(), email, password, name)
-      // Login ruft automatisch ensureEmployeeExists auf
-      await login(email, password)
-      return { success: true }
-    } catch (error) {
-      console.error('Register error:', error)
-      let errorMessage = error.message || 'Registrierung fehlgeschlagen'
-      
-      // Bessere Fehlermeldungen
-      if (errorMessage.includes('already exists') || errorMessage.includes('duplicate')) {
-        errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
-      } else if (errorMessage.includes('Email/Password')) {
-        errorMessage = 'Email/Password Authentifizierung ist nicht aktiviert. Bitte aktiviere sie in deinem Appwrite Dashboard unter Auth → Providers.'
-      } else if (errorMessage.includes('password') && errorMessage.includes('length')) {
-        errorMessage = 'Das Passwort muss mindestens 8 Zeichen lang sein.'
-      }
-      
-      return { success: false, error: errorMessage }
-    }
-  }
-
   // Hilfsfunktion um zu prüfen ob Benutzer Admin ist
   const isAdmin = () => {
     if (!user) return false
@@ -177,7 +149,6 @@ export function AuthProvider({ children }) {
     loading,
     login,
     logout,
-    register,
     isAdmin: isAdmin()
   }
 

src/pages/LoginPage.jsx

@@ -1,16 +1,15 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
+import LetterGlitch from '../components/LetterGlitch'
 
 export default function LoginPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [name, setName] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
-  const [isRegistering, setIsRegistering] = useState(false)
   
-  const { login, register } = useAuth()
+  const { login } = useAuth()
   const navigate = useNavigate()
 
   const handleSubmit = async (e) => {
@@ -19,9 +18,7 @@ export default function LoginPage() {
     setLoading(true)
 
     try {
-      const result = isRegistering 
-        ? await register(email, password, name || email.split('@')[0])
-        : await login(email, password)
+      const result = await login(email, password)
       
       if (result.success) {
         navigate('/tickets')
@@ -31,12 +28,6 @@ export default function LoginPage() {
         
         if (errorMessage.includes('Invalid credentials') || errorMessage.includes('401')) {
           errorMessage = 'Ungültige Email oder Passwort. Bitte überprüfe deine Eingaben.'
-        } else if (errorMessage.includes('User already exists')) {
-          errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
-          setIsRegistering(false)
-        } else if (errorMessage.includes('User with the same email already exists')) {
-          errorMessage = 'Diese Email ist bereits registriert. Bitte logge dich ein.'
-          setIsRegistering(false)
         } else if (errorMessage.includes('Email/Password') || errorMessage.includes('auth')) {
           errorMessage = 'Email/Password Authentifizierung ist möglicherweise nicht aktiviert. Bitte überprüfe deine Appwrite-Konfiguration.'
         }
@@ -52,95 +43,100 @@ export default function LoginPage() {
 
   return (
     <div style={{ 
+      position: 'relative',
       minHeight: '100vh', 
-      display: 'flex', 
-      alignItems: 'center', 
-      justifyContent: 'center',
-      background: '#f1f1f1'
+      width: '100%',
+      overflow: 'hidden'
     }}>
-      <div className="card" style={{ width: '400px' }}>
-        <div className="card-header text-center">
-          <h2>Webklar WOMS 2.0</h2>
-        </div>
-        <div className="card-body">
-          <form onSubmit={handleSubmit}>
-            {error && (
-              <div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
-                {error}
-              </div>
-            )}
-            
-            {isRegistering && (
+      {/* LetterGlitch Hintergrund */}
+      <div style={{ 
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 0
+      }}>
+        <LetterGlitch
+          glitchSpeed={50}
+          centerVignette={true}
+          outerVignette={false}
+          smooth={true}
+        />
+      </div>
+
+      {/* Login-Formular */}
+      <div style={{ 
+        position: 'relative',
+        zIndex: 1,
+        minHeight: '100vh', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center'
+      }}>
+        <div style={{ 
+          width: '400px', 
+          boxShadow: '0 10px 40px rgba(0,0,0,0.5)',
+          backdropFilter: 'blur(10px)',
+          WebkitBackdropFilter: 'blur(10px)',
+          background: 'transparent',
+          border: '1px solid rgba(255, 255, 255, 0.2)',
+          borderRadius: '8px',
+          marginBottom: '16px'
+        }}>
+          <div style={{ 
+            padding: '12px 16px',
+            background: 'transparent',
+            color: '#fff',
+            fontWeight: 'bold',
+            borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
+            textAlign: 'center'
+          }}>
+            <h2>Webklar WOMS 2.0</h2>
+          </div>
+          <div style={{ padding: '16px', color: '#e2e8f0' }}>
+            <form onSubmit={handleSubmit}>
+              {error && (
+                <div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
+                  {error}
+                </div>
+              )}
+
               <div className="form-group">
-                <label className="form-label">Name (optional)</label>
+                <label className="form-label">Email</label>
                 <input
-                  type="text"
+                  type="email"
                   className="form-control"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Dein Name"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  placeholder="deine@email.com"
                 />
               </div>
-            )}
 
-            <div className="form-group">
-              <label className="form-label">Email</label>
-              <input
-                type="email"
-                className="form-control"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                placeholder="deine@email.com"
-              />
-            </div>
+              <div className="form-group">
+                <label className="form-label">Password</label>
+                <input
+                  type="password"
+                  className="form-control"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  placeholder="••••••••"
+                  minLength={8}
+                />
+              </div>
 
-            <div className="form-group">
-              <label className="form-label">Password</label>
-              <input
-                type="password"
-                className="form-control"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                placeholder="••••••••"
-                minLength={8}
-              />
-            </div>
-
-            <button 
-              type="submit" 
-              className="btn btn-green"
-              style={{ width: '100%', marginBottom: '10px' }}
-              disabled={loading}
-            >
-              {loading 
-                ? (isRegistering ? 'Registrierung läuft...' : 'Login läuft...') 
-                : (isRegistering ? 'Registrieren' : 'Login')
-              }
-            </button>
-
-            <button
-              type="button"
-              className="btn"
-              style={{ 
-                width: '100%', 
-                background: 'transparent',
-                border: '1px solid #ccc',
-                color: '#333'
-              }}
-              onClick={() => {
-                setIsRegistering(!isRegistering)
-                setError('')
-              }}
-              disabled={loading}
-            >
-              {isRegistering 
-                ? 'Bereits registriert? Hier einloggen' 
-                : 'Noch kein Account? Hier registrieren'
-              }
-            </button>
-          </form>
+              <button 
+                type="submit" 
+                className="btn btn-green"
+                style={{ width: '100%' }}
+                disabled={loading}
+              >
+                {loading ? 'Login läuft...' : 'Login'}
+              </button>
+            </form>
+          </div>
         </div>
       </div>
     </div>

src/pages/TicketsPage.jsx

@@ -21,6 +21,7 @@ export default function TicketsPage() {
   
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showOverviewModal, setShowOverviewModal] = useState(false)
+  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)
 
   const handleFilterChange = (newFilters) => {
     setFilters({ ...newFilters, limit })
@@ -55,55 +56,73 @@ export default function TicketsPage() {
 
   return (
     <div className="main-content">
+      {/* Sticky Header Container */}
       <div style={{
-        background: 'rgba(45, 55, 72, 0.95)',
-        borderRadius: '12px',
-        border: '1px solid rgba(16, 185, 129, 0.2)',
-        padding: '24px',
-        marginBottom: '24px',
-        textAlign: 'center'
-      }}>
-        <h2 style={{ 
-          color: 'var(--dark-text)', 
-          marginBottom: '12px',
-          fontSize: '28px',
-          fontWeight: 'bold'
-        }}>
-          Active Tickets Overview
-        </h2>
-        <p style={{ color: '#a0aec0', marginBottom: '8px' }}>
-          Work Order loading limit is set to <span style={{ 
-            fontSize: '24px', 
-            color: 'var(--green-primary)',
-            fontWeight: 'bold'
-          }}>{limit}</span>. 
-          Reduce value to increase reload speed.
-        </p>
-        <p style={{ color: '#718096', fontSize: '12px' }}>
-          Last page reload: {format(new Date(), 'dd.MM.yyyy, HH:mm:ss')}
-        </p>
-      </div>
-
-      {/* Unified Control Panel - All in One */}
-      <div style={{
-        background: 'rgba(45, 55, 72, 0.95)',
-        borderRadius: '12px',
-        border: '1px solid rgba(16, 185, 129, 0.2)',
-        overflow: 'hidden',
+        position: 'sticky',
+        top: 0,
+        zIndex: 100,
         marginBottom: '24px'
       }}>
-        {/* Extended Filters + Quick Selection - TOP */}
-        <div style={{ 
-          padding: '20px',
-          borderBottom: '1px solid rgba(16, 185, 129, 0.2)'
+        {/* Compact Control Panel */}
+        <div style={{
+          background: 'rgba(26, 32, 44, 0.4)',
+          backdropFilter: 'blur(25px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(25px) saturate(180%)',
+          borderRadius: '12px',
+          border: '1px solid rgba(16, 185, 129, 0.3)',
+          overflow: 'hidden',
+          padding: '16px',
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
+          marginBottom: '16px'
         }}>
-          {/* Main Filter Row */}
+          {/* Title Row */}
+          <div style={{ 
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '16px',
+            flexWrap: 'wrap',
+            gap: '12px'
+          }}>
+            <h2 style={{ 
+              color: 'var(--dark-text)', 
+              fontSize: '24px',
+              fontWeight: 'bold',
+              margin: 0
+            }}>
+              Tickets
+            </h2>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button 
+                className="btn btn-dark"
+                onClick={() => setShowCreateModal(true)}
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                CREATE NEW TICKET
+              </button>
+              <button 
+                className="btn btn-dark"
+                onClick={() => setShowOverviewModal(true)}
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                QUICK OVERVIEW
+              </button>
+              <button 
+                className="btn btn-green"
+                onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                {showAdvancedFilters ? '▲ Hide Filters' : '▼ Show Filters'}
+              </button>
+            </div>
+          </div>
+
+          {/* Main Search Bar */}
           <div style={{ 
             display: 'grid',
             gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
             gap: '12px',
-            alignItems: 'center',
-            marginBottom: '16px'
+            alignItems: 'center'
           }}>
             <input
               type="text"
@@ -113,46 +132,6 @@ export default function TicketsPage() {
               value={filters.woid || ''}
               onChange={(e) => setFilters({ ...filters, woid: e.target.value })}
             />
-            <input
-              type="text"
-              placeholder="Created Date"
-              className="form-control"
-              style={{ margin: 0 }}
-              value={filters.createdDate || ''}
-              onChange={(e) => setFilters({ ...filters, createdDate: e.target.value })}
-            />
-            <select
-              className="form-control"
-              style={{ margin: 0 }}
-              value={filters.type?.[0] || ''}
-              onChange={(e) => setFilters({ ...filters, type: e.target.value ? [e.target.value] : [] })}
-            >
-              <option value="">Type / Location</option>
-              <option>Home Office</option>
-              <option>Holidays</option>
-              <option>Trip</option>
-              <option>Supportrequest</option>
-              <option>Change Request</option>
-              <option>Maintenance</option>
-              <option>Project</option>
-              <option>Procurement</option>
-              <option>Emergency Call</option>
-            </select>
-            <select
-              className="form-control"
-              style={{ margin: 0 }}
-              value={filters.system?.[0] || ''}
-              onChange={(e) => setFilters({ ...filters, system: e.target.value ? [e.target.value] : [] })}
-            >
-              <option value="">System</option>
-              <option>Client</option>
-              <option>Server</option>
-              <option>Network</option>
-              <option>EDI</option>
-              <option>TOS</option>
-              <option>Reports</option>
-              <option>n/a</option>
-            </select>
             <input
               type="text"
               placeholder="Customer"
@@ -163,25 +142,12 @@ export default function TicketsPage() {
             />
             <input
               type="text"
-              placeholder="Topic / User"
+              placeholder="User"
               className="form-control"
               style={{ margin: 0 }}
               value={filters.userTopic || ''}
               onChange={(e) => setFilters({ ...filters, userTopic: e.target.value })}
             />
-            <select
-              className="form-control"
-              style={{ margin: 0 }}
-              value={filters.priority?.[0] ?? ''}
-              onChange={(e) => setFilters({ ...filters, priority: e.target.value ? [parseInt(e.target.value)] : [] })}
-            >
-              <option value="">Priority</option>
-              <option value="0">None</option>
-              <option value="1">Low</option>
-              <option value="2">Medium</option>
-              <option value="3">High</option>
-              <option value="4">Critical</option>
-            </select>
             <button 
               className="btn btn-green" 
               onClick={handleApplyFilters}
@@ -191,89 +157,144 @@ export default function TicketsPage() {
             </button>
           </div>
 
-          {/* Quick Selection Buttons */}
-          <div style={{ 
-            display: 'flex',
-            gap: '8px',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            paddingTop: '16px',
-            borderTop: '1px solid rgba(16, 185, 129, 0.1)'
-          }}>
-            <button 
-              className="btn btn-green"
-              onClick={() => { setFilters(prev => ({ ...prev, type: ['Procurement'] })); handleApplyFilters(); }}
-            >
-              Procurements
-            </button>
-            <button 
-              className="btn btn-green"
-              onClick={() => { setFilters(prev => ({ ...prev, priority: [4] })); handleApplyFilters(); }}
-            >
-              Criticals
-            </button>
-            <button 
-              className="btn btn-green"
-              onClick={() => { setFilters(prev => ({ ...prev, priority: [3] })); handleApplyFilters(); }}
-            >
-              Highs
-            </button>
+          {/* Advanced Filters - Collapsible */}
+          {showAdvancedFilters && (
             <div style={{ 
-              width: '1px',
-              height: '32px',
-              background: 'rgba(16, 185, 129, 0.3)',
-              margin: '0 8px'
-            }}></div>
-            <button 
-              className="btn btn-green"
-              onClick={() => { setLimit(10); setFilters(prev => ({ ...prev, limit: 10 })) }}
-            >
-              10
-            </button>
-            <button 
-              className="btn btn-green"
-              onClick={() => { setLimit(25); setFilters(prev => ({ ...prev, limit: 25 })) }}
-            >
-              25
-            </button>
-          </div>
-        </div>
+              marginTop: '16px',
+              paddingTop: '16px',
+              borderTop: '1px solid rgba(16, 185, 129, 0.2)'
+            }}>
+              <div style={{ 
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+                gap: '12px',
+                alignItems: 'center',
+                marginBottom: '16px'
+              }}>
+                <input
+                  type="text"
+                  placeholder="Created Date"
+                  className="form-control"
+                  style={{ margin: 0 }}
+                  value={filters.createdDate || ''}
+                  onChange={(e) => setFilters({ ...filters, createdDate: e.target.value })}
+                />
+                <select
+                  className="form-control"
+                  style={{ margin: 0 }}
+                  value={filters.type?.[0] || ''}
+                  onChange={(e) => setFilters({ ...filters, type: e.target.value ? [e.target.value] : [] })}
+                >
+                  <option value="">Type / Location</option>
+                  <option>Home Office</option>
+                  <option>Holidays</option>
+                  <option>Trip</option>
+                  <option>Supportrequest</option>
+                  <option>Change Request</option>
+                  <option>Maintenance</option>
+                  <option>Project</option>
+                  <option>Procurement</option>
+                  <option>Emergency Call</option>
+                </select>
+                <select
+                  className="form-control"
+                  style={{ margin: 0 }}
+                  value={filters.system?.[0] || ''}
+                  onChange={(e) => setFilters({ ...filters, system: e.target.value ? [e.target.value] : [] })}
+                >
+                  <option value="">System</option>
+                  <option>Client</option>
+                  <option>Server</option>
+                  <option>Network</option>
+                  <option>EDI</option>
+                  <option>TOS</option>
+                  <option>Reports</option>
+                  <option>n/a</option>
+                </select>
+                <select
+                  className="form-control"
+                  style={{ margin: 0 }}
+                  value={filters.priority?.[0] ?? ''}
+                  onChange={(e) => setFilters({ ...filters, priority: e.target.value ? [parseInt(e.target.value)] : [] })}
+                >
+                  <option value="">Priority</option>
+                  <option value="0">None</option>
+                  <option value="1">Low</option>
+                  <option value="2">Medium</option>
+                  <option value="3">High</option>
+                  <option value="4">Critical</option>
+                </select>
+              </div>
 
-        {/* Slider + Action Buttons - BOTTOM */}
-        <div style={{ 
-          padding: '20px',
-          display: 'flex',
-          gap: '16px',
-          alignItems: 'center',
-          flexWrap: 'wrap'
-        }}>
-          <div style={{ flex: '1', minWidth: '200px' }}>
-            <input
-              type="range"
-              min="5"
-              max="50"
-              value={limit}
-              className="slider"
-              onChange={handleLimitChange}
-            />
-          </div>
-          <div style={{ display: 'flex', gap: '8px', flexWrap: 'nowrap' }}>
-            <button 
-              className="btn btn-dark"
-              onClick={() => setShowCreateModal(true)}
-              style={{ whiteSpace: 'nowrap' }}
-            >
-              CREATE NEW TICKET
-            </button>
-            <button 
-              className="btn btn-dark"
-              onClick={() => setShowOverviewModal(true)}
-              style={{ whiteSpace: 'nowrap' }}
-            >
-              QUICK OVERVIEW
-            </button>
-          </div>
+              {/* Quick Selection Buttons */}
+              <div style={{ 
+                display: 'flex',
+                gap: '8px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                marginBottom: '16px'
+              }}>
+                <button 
+                  className="btn btn-green"
+                  onClick={() => { setFilters(prev => ({ ...prev, type: ['Procurement'] })); handleApplyFilters(); }}
+                >
+                  Procurements
+                </button>
+                <button 
+                  className="btn btn-green"
+                  onClick={() => { setFilters(prev => ({ ...prev, priority: [4] })); handleApplyFilters(); }}
+                >
+                  Criticals
+                </button>
+                <button 
+                  className="btn btn-green"
+                  onClick={() => { setFilters(prev => ({ ...prev, priority: [3] })); handleApplyFilters(); }}
+                >
+                  Highs
+                </button>
+                <div style={{ 
+                  width: '1px',
+                  height: '32px',
+                  background: 'rgba(16, 185, 129, 0.3)',
+                  margin: '0 8px'
+                }}></div>
+                <button 
+                  className="btn btn-green"
+                  onClick={() => { setLimit(10); setFilters(prev => ({ ...prev, limit: 10 })) }}
+                >
+                  10
+                </button>
+                <button 
+                  className="btn btn-green"
+                  onClick={() => { setLimit(25); setFilters(prev => ({ ...prev, limit: 25 })) }}
+                >
+                  25
+                </button>
+              </div>
+
+              {/* Slider */}
+              <div style={{ 
+                display: 'flex',
+                gap: '16px',
+                alignItems: 'center'
+              }}>
+                <span style={{ color: 'var(--dark-text)', minWidth: '120px' }}>
+                  Load Limit: {limit}
+                </span>
+                <div style={{ flex: '1' }}>
+                  <input
+                    type="range"
+                    min="5"
+                    max="50"
+                    value={limit}
+                    className="slider"
+                    onChange={handleLimitChange}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
 

src/styles/global.css

@@ -329,6 +329,7 @@ textarea.form-control {
 .ticket-row td {
   background: rgba(45, 55, 72, 0.95);
   border: 1px solid rgba(16, 185, 129, 0.2);
+  border-radius: 0 !important;
 }
 
 /* Second row of ticket (no top border to avoid line in rowspan cells) */
@@ -345,6 +346,60 @@ textarea.form-control {
   box-shadow: none;
 }
 
+/* Collapsed Ticket - All 4 outermost corners rounded */
+/* WOID cell (left side) - top and bottom corners */
+.ticket-collapsed .ticket-id {
+  border-top-left-radius: 12px !important;
+  border-bottom-left-radius: 12px !important;
+}
+
+/* Lock cell (right side) - top and bottom corners */
+.ticket-collapsed td.bg-dark-grey {
+  border-top-right-radius: 12px !important;
+  border-bottom-right-radius: 12px !important;
+}
+
+/* Expanded Ticket - Only top 2 outermost corners rounded */
+/* WOID cell (left side) - only top corner, bottom stays square */
+.ticket-expanded .ticket-id {
+  border-top-left-radius: 12px !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+/* Lock cell (right side) - only top corner, bottom stays square */
+.ticket-expanded td.bg-dark-grey {
+  border-top-right-radius: 12px !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+/* Worksheet Expansion with Animation */
+.worksheet-expansion {
+  animation: slideDown 0.4s ease-out;
+}
+
+.worksheet-cell {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.worksheet-cell .card {
+  border-radius: 0 0 12px 12px !important;
+  margin-top: -1px;
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .ticket-id {
   background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
   color: #fff;
@@ -354,6 +409,16 @@ textarea.form-control {
   font-weight: bold;
   padding: 16px;
   border: 1px solid rgba(16, 185, 129, 0.2) !important;
+  transition: border-radius 0.3s ease;
+}
+
+/* WOID rounded when collapsed, square bottom when expanded */
+.ticket-id:not(.ticket-id-expanded) {
+  border-radius: 12px;
+}
+
+.ticket-id-expanded {
+  border-radius: 12px 12px 0 0;
 }
 
 .ticket-time {
@@ -385,6 +450,21 @@ textarea.form-control {
 .dropdown {
   position: relative;
   display: inline-block;
+  width: 100%;
+  text-align: center;
+}
+
+.dropdown .btn {
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 12px;
+  border: none !important;
+  box-shadow: none !important;
+  background: inherit !important;
+  color: inherit !important;
+  text-align: center;
+  display: inline-block;
+  margin: 0;
 }
 
 .dropdown-content {
@@ -396,6 +476,8 @@ textarea.form-control {
   border: 1px solid rgba(16, 185, 129, 0.3);
   border-radius: 6px;
   z-index: 100;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .dropdown:hover .dropdown-content {