diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f676efb..7fde3c8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,8 +8,15 @@
       "name": "temp_frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@tailwindcss/vite": "^4.3.3",
+        "axios": "^1.19.0",
+        "konva": "^10.3.1",
+        "lucide-react": "^0.462.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-konva": "^19.2.5",
+        "tailwindcss": "^4.3.3",
+        "zustand": "^5.0.15"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
@@ -925,7 +932,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -936,7 +942,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -947,7 +952,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -957,14 +961,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1345,6 +1347,263 @@
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1432,6 +1691,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.33.0.tgz",
+      "integrity": "sha512-HZOXsKT0tGI9LlUw2LuedXsVeB88wFa536vVL0M6vE8zN63nI+sSr1ByxmPToP5K5bukaVscyeCJcF9guVNJ1g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.67.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.67.0.tgz",
@@ -1771,6 +2039,18 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -1811,6 +2091,24 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.19.0.tgz",
+      "integrity": "sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.6",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1876,6 +2174,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1944,6 +2255,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1984,7 +2307,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2005,6 +2327,38 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.410",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.410.tgz",
@@ -2012,6 +2366,64 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.5",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
+      "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2341,6 +2753,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2356,6 +2804,15 @@
         "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",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2366,6 +2823,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2392,6 +2886,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2402,6 +2914,58 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2469,6 +3033,36 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2555,6 +3149,38 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/konva": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/konva/-/konva-10.3.1.tgz",
+      "integrity": "sha512-7fT/jSkL2bZZOHRBk2QVMKAUbgHoKG72W+KJtpP5YMJUZRmjgoafROgxTADsrxKOY2ZM5eKyN/x6CM9PrlFfOg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "canvas": "^3.0.0",
+        "skia-canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        },
+        "skia-canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2569,6 +3195,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2614,6 +3489,54 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.462.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.462.0.tgz",
+      "integrity": "sha512-NTL7EbAao9IFtuSivSZgrAh4fZd09Lr+6MTkqIxuHaH2nnYiYIzXPo06cOxHg9wKLdj6LL8TByG4qpePqwgx/g==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -2631,7 +3554,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -2812,6 +3734,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2847,6 +3778,64 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-konva": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-19.2.5.tgz",
+      "integrity": "sha512-AdsuDB59GdB86QdenTAqRzr6Tfw3z9x9Opxo4BoqDjdNLsjekF9a1VhN4FlMPvg0qtrMl3d4dNmagaUTGH7fSA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.33.0",
+        "its-fine": "^2.0.0",
+        "react-reconciler": "0.33.0",
+        "scheduler": "0.27.0"
+      },
+      "peerDependencies": {
+        "konva": "^8.0.1 || ^7.2.5 || ^9.0.0 || ^10.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
+      }
+    },
+    "node_modules/react-konva/node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.33.0.tgz",
+      "integrity": "sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2959,7 +3948,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2991,6 +3979,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -3218,6 +4225,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.15.tgz",
+      "integrity": "sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index fcc3f3f..a04ffc9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "axios": "^1.19.0",
+    "konva": "^10.3.1",
+    "lucide-react": "^0.462.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-konva": "^19.2.5",
+    "tailwindcss": "^4.3.3",
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index b9d355d..c6677c0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+/* cleared */
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7622355..24c0df2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,226 +1,95 @@
-import React, { useState } from 'react';
-import { Calendar, Clock, PlusCircle, LayoutGrid, Users, ShieldAlert, CheckCircle2, UserCheck } from 'lucide-react';
+import { useState } from 'react';
+import { useAppStore } from './store/useAppStore';
+import FloorPlan from './components/FloorPlan';
+import Timeline from './components/Timeline';
+import ReservationList from './components/ReservationList';
+import BookingModal from './components/BookingModal';
+import { ViewMode } from './types';
 
-interface Table {
-  id: string;
-  number: string;
-  seats: number;
-  status: 'FREE' | 'OCCUPIED' | 'RESERVED' | 'BILL';
-  x: number;
-  y: number;
-  shape: 'RECT' | 'ROUND';
-}
+const NAV_ITEMS: { id: ViewMode; label: string; icon: string }[] = [
+  { id: 'floor', label: '2D Tischplan', icon: '⬛' },
+  { id: 'timeline', label: 'Timeline', icon: '📊' },
+  { id: 'list', label: 'Reservierungen', icon: '📋' },
+];
 
-export function App() {
-  const [view, setView] = useState<'floor' | 'timeline'>('floor');
-  const [selectedTable, setSelectedTable] = useState<Table | null>(null);
-  const [showQuickBook, setShowQuickBook] = useState(false);
+function App() {
+  const [view, setView] = useState<ViewMode>('floor');
+  const { tables, reservations, showBookingModal, openBookingModal } = useAppStore();
 
-  const [tables, setTables] = useState<Table[]>([
-    { id: '1', number: 'T1', seats: 4, status: 'FREE', x: 50, y: 50, shape: 'RECT' },
-    { id: '2', number: 'T2', seats: 2, status: 'OCCUPIED', x: 220, y: 50, shape: 'ROUND' },
-    { id: '3', number: 'T3', seats: 6, status: 'RESERVED', x: 50, y: 220, shape: 'RECT' },
-    { id: '4', number: 'T4', seats: 4, status: 'BILL', x: 220, y: 220, shape: 'ROUND' },
-  ]);
-
-  const getStatusColor = (status: Table['status']) => {
-    switch (status) {
-      case 'FREE': return 'bg-emerald-500/20 border-emerald-500 text-emerald-400';
-      case 'OCCUPIED': return 'bg-rose-500/20 border-rose-500 text-rose-400';
-      case 'RESERVED': return 'bg-amber-500/20 border-amber-500 text-amber-400';
-      case 'BILL': return 'bg-sky-500/20 border-sky-500 text-sky-400';
-    }
-  };
-
-  const handleStatusChange = (id: string, newStatus: Table['status']) => {
-    setTables(tables.map(t => t.id === id ? { ...t, status: newStatus } : t));
-    if (selectedTable?.id === id) {
-      setSelectedTable({ ...selectedTable, status: newStatus });
-    }
-  };
+  const activeCount = reservations.filter((r) => ['PENDING', 'CONFIRMED', 'ARRIVED'].includes(r.status)).length;
+  const freeCount = tables.filter((t) => t.status === 'FREE').length;
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans">
-      {/* Top Header */}
-      <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur px-6 py-4 flex flex-wrap items-center justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-amber-500 to-amber-600 flex items-center justify-center font-bold text-slate-950 shadow-lg shadow-amber-500/20">
-            PL
+    <div className="min-h-screen bg-slate-950 text-slate-100" style={{ fontFamily: "'Inter', system-ui, sans-serif" }}>
+      {/* Header */}
+      <header className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/95 backdrop-blur-xl px-4 lg:px-6 py-3">
+        <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
+          {/* Brand */}
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center font-black text-slate-950 text-sm shadow-lg shadow-amber-500/25">
+              PL
+            </div>
+            <div className="hidden sm:block">
+              <p className="font-bold text-base leading-tight">Pizzeria Luigi</p>
+              <p className="text-xs text-slate-500 flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                Live · {new Date().toLocaleDateString('de-DE', { weekday: 'long', day: '2-digit', month: 'long' })}
+              </p>
+            </div>
           </div>
-          <div>
-            <h1 className="text-xl font-bold tracking-tight">Pizzeria Luigi</h1>
-            <p className="text-xs text-slate-400 flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
-              Tenant: pizzeria-luigi (Schema: tenant_pizzeria_luigi)
-            </p>
+
+          {/* Stats */}
+          <div className="hidden md:flex items-center gap-4 text-xs">
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-900 rounded-xl border border-slate-800">
+              <span className="w-2 h-2 rounded-full bg-emerald-500" />
+              <span className="text-slate-400">Frei:</span>
+              <span className="font-bold text-emerald-400">{freeCount}</span>
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-900 rounded-xl border border-slate-800">
+              <span className="w-2 h-2 rounded-full bg-amber-400" />
+              <span className="text-slate-400">Aktiv:</span>
+              <span className="font-bold text-amber-400">{activeCount}</span>
+            </div>
           </div>
-        </div>
 
-        {/* View Switcher */}
-        <div className="flex bg-slate-800/80 p-1 rounded-xl border border-slate-700">
-          <button
-            onClick={() => setView('floor')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2 ${
-              view === 'floor' ? 'bg-amber-500 text-slate-950 shadow' : 'text-slate-400 hover:text-white'
-            }`}
-          >
-            <LayoutGrid className="w-4 h-4" /> 2D Tischplan
-          </button>
-          <button
-            onClick={() => setView('timeline')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2 ${
-              view === 'timeline' ? 'bg-amber-500 text-slate-950 shadow' : 'text-slate-400 hover:text-white'
-            }`}
-          >
-            <Clock className="w-4 h-4" /> Timeline (Gantt)
-          </button>
-        </div>
+          {/* Nav */}
+          <nav className="flex bg-slate-900/80 p-1 rounded-xl border border-slate-800 gap-1">
+            {NAV_ITEMS.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => setView(item.id)}
+                className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition flex items-center gap-1.5 ${
+                  view === item.id
+                    ? 'bg-amber-500 text-slate-950 shadow'
+                    : 'text-slate-400 hover:text-slate-200'
+                }`}
+              >
+                <span>{item.icon}</span>
+                <span className="hidden sm:inline">{item.label}</span>
+              </button>
+            ))}
+          </nav>
 
-        {/* Quick Actions */}
-        <div className="flex items-center gap-3">
+          {/* CTA */}
           <button
-            onClick={() => setShowQuickBook(true)}
-            className="bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-4 py-2 rounded-xl transition flex items-center gap-2 shadow-lg shadow-emerald-500/20 active:scale-95"
+            onClick={() => openBookingModal()}
+            className="bg-emerald-500 hover:bg-emerald-400 active:scale-95 text-slate-950 font-bold px-4 py-2 rounded-xl text-xs transition shadow-lg shadow-emerald-500/20 flex items-center gap-1.5"
           >
-            <PlusCircle className="w-5 h-5" /> Schnellbuchung / Walk-In
+            <span>+</span>
+            <span className="hidden sm:inline">Walk-In</span>
           </button>
         </div>
       </header>
 
-      {/* Main Content */}
-      <main className="p-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left Interactive Canvas Area */}
-        <div className="lg:col-span-2 bg-slate-900/60 border border-slate-800 rounded-2xl p-6 min-h-[500px] flex flex-col justify-between relative overflow-hidden shadow-2xl">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold flex items-center gap-2">
-              <Calendar className="w-5 h-5 text-amber-500" />
-              Gastraum (Hauptbereich)
-            </h2>
-            <div className="flex items-center gap-4 text-xs">
-              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-emerald-500/30 border border-emerald-500"></span> Frei</span>
-              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-rose-500/30 border border-rose-500"></span> Belegt</span>
-              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-amber-500/30 border border-amber-500"></span> Reserviert</span>
-              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-sky-500/30 border border-sky-500"></span> Rechnung</span>
-            </div>
-          </div>
-
-          {/* 2D Canvas Interactive Area */}
-          {view === 'floor' ? (
-            <div className="relative w-full h-[400px] bg-slate-950/80 rounded-xl border border-slate-800/80 p-4 overflow-hidden flex-1">
-              <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b15_1px,transparent_1px),linear-gradient(to_bottom,#1e293b15_1px,transparent_1px)] bg-[size:20px_20px]" />
-              
-              {tables.map((t) => (
-                <div
-                  key={t.id}
-                  onClick={() => setSelectedTable(t)}
-                  style={{ left: `${t.x}px`, top: `${t.y}px` }}
-                  className={`absolute w-32 h-32 cursor-pointer transition-all duration-200 border-2 rounded-2xl p-3 flex flex-col justify-between backdrop-blur-md shadow-xl hover:scale-105 ${getStatusColor(
-                    t.status
-                  )} ${selectedTable?.id === t.id ? 'ring-4 ring-amber-500/50 scale-105' : ''}`}
-                >
-                  <div className="flex justify-between items-start">
-                    <span className="font-bold text-lg">{t.number}</span>
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-slate-900/60 flex items-center gap-1">
-                      <Users className="w-3 h-3" /> {t.seats}
-                    </span>
-                  </div>
-                  <div className="text-center py-1">
-                    <span className="text-xs font-semibold uppercase tracking-wider">{t.status}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="w-full h-[400px] bg-slate-950/80 rounded-xl border border-slate-800 p-4 flex items-center justify-center text-slate-400">
-              <div className="text-center">
-                <Clock className="w-12 h-12 text-amber-500/50 mx-auto mb-2" />
-                <p>Timeline-Ansicht im 15-Minuten Raster aktiv.</p>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Right Details & Fast Control Panel */}
-        <div className="bg-slate-900/60 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between shadow-2xl">
-          <div>
-            <h3 className="text-lg font-semibold mb-4 text-amber-400">Tisch-Details</h3>
-            {selectedTable ? (
-              <div className="space-y-4">
-                <div className="bg-slate-950/60 p-4 rounded-xl border border-slate-800">
-                  <div className="flex justify-between items-center mb-2">
-                    <span className="text-2xl font-bold">{selectedTable.number}</span>
-                    <span className={`px-3 py-1 rounded-full text-xs font-semibold border ${getStatusColor(selectedTable.status)}`}>
-                      {selectedTable.status}
-                    </span>
-                  </div>
-                  <p className="text-sm text-slate-400">Max. Kapazität: {selectedTable.seats} Personen</p>
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Status schnell ändern</label>
-                  <div className="grid grid-cols-2 gap-2">
-                    <button
-                      onClick={() => handleStatusChange(selectedTable.id, 'FREE')}
-                      className="px-3 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 hover:bg-emerald-500/20 text-emerald-400 text-xs font-medium transition"
-                    >
-                      Freigeben
-                    </button>
-                    <button
-                      onClick={() => handleStatusChange(selectedTable.id, 'OCCUPIED')}
-                      className="px-3 py-2 rounded-lg bg-rose-500/10 border border-rose-500/30 hover:bg-rose-500/20 text-rose-400 text-xs font-medium transition"
-                    >
-                      Belegen
-                    </button>
-                    <button
-                      onClick={() => handleStatusChange(selectedTable.id, 'RESERVED')}
-                      className="px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 hover:bg-amber-500/20 text-amber-400 text-xs font-medium transition"
-                    >
-                      Reservieren
-                    </button>
-                    <button
-                      onClick={() => handleStatusChange(selectedTable.id, 'BILL')}
-                      className="px-3 py-2 rounded-lg bg-sky-500/10 border border-sky-500/30 hover:bg-sky-500/20 text-sky-400 text-xs font-medium transition"
-                    >
-                      Rechnung
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="text-center py-12 text-slate-500">
-                <p>Wähle einen Tisch im Plan aus, um Details und Steuerung anzuzeigen.</p>
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-slate-800 pt-4 mt-6">
-            <div className="flex items-center justify-between text-xs text-slate-400">
-              <span>Kellner PIN-Auth: Aktiv</span>
-              <span className="text-emerald-400 flex items-center gap-1"><CheckCircle2 className="w-3.5 h-3.5" /> Ready</span>
-            </div>
-          </div>
-        </div>
+      {/* Main */}
+      <main className="max-w-7xl mx-auto p-4 lg:p-6">
+        {view === 'floor' && <FloorPlan tables={tables} />}
+        {view === 'timeline' && <Timeline />}
+        {view === 'list' && <ReservationList />}
       </main>
 
-      {/* Quick Booking Modal */}
-      {showQuickBook && (
-        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-          <div className="bg-slate-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
-            <h3 className="text-xl font-bold text-amber-400 flex items-center gap-2">
-              <UserCheck className="w-6 h-6" /> Schnellbuchung / Walk-In
-            </h3>
-            <p className="text-sm text-slate-400">Direkte Reservierung für Kellner (unter 5 sec).</p>
-            <div className="space-y-3">
-              <input type="text" placeholder="Gast Name (optional)" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-amber-500" />
-              <input type="number" placeholder="Personenanzahl (z. B. 4)" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-amber-500" defaultValue={2} />
-            </div>
-            <div className="flex justify-end gap-3 pt-2">
-              <button onClick={() => setShowQuickBook(false)} className="px-4 py-2 rounded-xl bg-slate-800 text-sm hover:bg-slate-700">Abbrechen</button>
-              <button onClick={() => setShowQuickBook(false)} className="px-4 py-2 rounded-xl bg-amber-500 text-slate-950 font-semibold text-sm hover:bg-amber-400">Buchen & Zuweisen</button>
-            </div>
-          </div>
-        </div>
-      )}
+      {/* Booking Modal */}
+      {showBookingModal && <BookingModal />}
     </div>
   );
 }
diff --git a/frontend/src/components/BookingModal.tsx b/frontend/src/components/BookingModal.tsx
new file mode 100644
index 0000000..9c5d6eb
--- /dev/null
+++ b/frontend/src/components/BookingModal.tsx
@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { useAppStore } from '../store/useAppStore';
+import { Reservation } from '../types';
+
+const TAGS = ['Hochstuhl', 'Allergie', 'Fensterplatz', 'Geburtstag'];
+const GUEST_COUNTS = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12];
+
+function generateId() {
+  return Math.random().toString(36).substring(2, 10);
+}
+
+function getTimeSlots() {
+  const slots: string[] = [];
+  for (let h = 10; h < 24; h++) {
+    for (const m of [0, 15, 30, 45]) {
+      slots.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+    }
+  }
+  return slots;
+}
+
+const TIME_SLOTS = getTimeSlots();
+
+export default function BookingModal() {
+  const { tables, prefillTableId, prefillTime, prefillDate, closeBookingModal, addReservation } = useAppStore();
+
+  const today = prefillDate ?? new Date().toISOString().slice(0, 10);
+
+  const [guestCount, setGuestCount] = useState(2);
+  const [date, setDate] = useState(today);
+  const [startTime, setStartTime] = useState(prefillTime ?? '19:00');
+  const [endTime, setEndTime] = useState(() => {
+    const start = prefillTime ?? '19:00';
+    const [h, m] = start.split(':').map(Number);
+    const end = h + 1 + ':' + String(m).padStart(2, '0');
+    return end;
+  });
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [tableId, setTableId] = useState(prefillTableId ?? tables[0]?.id ?? '');
+  const [notes, setNotes] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const suggestedTables = tables.filter((t) => t.maxCapacity >= guestCount && t.status === 'FREE');
+
+  const toggleTag = (tag: string) =>
+    setSelectedTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!firstName || !tableId) return;
+
+    const reservation: Reservation = {
+      id: generateId(),
+      guest: { id: generateId(), firstName, lastName, phone: phone || undefined, email: email || undefined },
+      tableIds: [tableId],
+      date,
+      startTime,
+      endTime,
+      guestCount,
+      status: 'CONFIRMED',
+      notes,
+      tags: selectedTags,
+      createdAt: new Date().toISOString(),
+    };
+    addReservation(reservation);
+    closeBookingModal();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-slate-950/85 backdrop-blur-sm flex items-center justify-center p-4 z-50 overflow-y-auto">
+      <div className="bg-slate-900 border border-slate-700 rounded-3xl w-full max-w-lg shadow-2xl my-4">
+        {/* Header */}
+        <div className="px-6 py-5 border-b border-slate-800 flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-bold text-amber-400">Neue Reservierung</h3>
+            <p className="text-xs text-slate-400">Schnellbuchung / Walk-In</p>
+          </div>
+          <button
+            onClick={closeBookingModal}
+            className="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center text-slate-400 hover:text-white transition"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-5">
+          {/* Person Count */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Personen</label>
+            <div className="flex flex-wrap gap-2">
+              {GUEST_COUNTS.map((n) => (
+                <button
+                  key={n}
+                  type="button"
+                  onClick={() => setGuestCount(n)}
+                  className={`w-11 h-11 rounded-xl font-bold text-sm transition border ${
+                    guestCount === n
+                      ? 'bg-amber-500 border-amber-400 text-slate-950 shadow-lg shadow-amber-500/20'
+                      : 'bg-slate-800/60 border-slate-700 text-slate-300 hover:border-amber-500/50'
+                  }`}
+                >
+                  {n}
+                </button>
+              ))}
+              <button
+                type="button"
+                onClick={() => setGuestCount(15)}
+                className={`px-3 h-11 rounded-xl font-bold text-sm transition border ${
+                  guestCount >= 13
+                    ? 'bg-amber-500 border-amber-400 text-slate-950'
+                    : 'bg-slate-800/60 border-slate-700 text-slate-300 hover:border-amber-500/50'
+                }`}
+              >
+                12+
+              </button>
+            </div>
+          </div>
+
+          {/* Date & Time */}
+          <div className="grid grid-cols-3 gap-3">
+            <div className="col-span-3 sm:col-span-1">
+              <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Datum</label>
+              <input
+                type="date"
+                value={date}
+                onChange={(e) => setDate(e.target.value)}
+                className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Von</label>
+              <select
+                value={startTime}
+                onChange={(e) => setStartTime(e.target.value)}
+                className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
+              >
+                {TIME_SLOTS.map((s) => <option key={s}>{s}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Bis</label>
+              <select
+                value={endTime}
+                onChange={(e) => setEndTime(e.target.value)}
+                className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
+              >
+                {TIME_SLOTS.map((s) => <option key={s}>{s}</option>)}
+              </select>
+            </div>
+          </div>
+
+          {/* Guest Info */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Gastdaten</label>
+            <div className="grid grid-cols-2 gap-3">
+              <input
+                required
+                type="text"
+                placeholder="Vorname *"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
+              />
+              <input
+                type="text"
+                placeholder="Nachname"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
+              />
+              <input
+                type="tel"
+                placeholder="Telefon"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
+              />
+              <input
+                type="email"
+                placeholder="E-Mail (optional)"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
+              />
+            </div>
+          </div>
+
+          {/* Table Selection */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">
+              Tisch zuweisen
+              {suggestedTables.length > 0 && (
+                <span className="ml-2 text-emerald-400 font-medium normal-case">
+                  {suggestedTables.length} freie Tische verfügbar
+                </span>
+              )}
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {tables.map((t) => {
+                const isSuggested = suggestedTables.some((s) => s.id === t.id);
+                return (
+                  <button
+                    key={t.id}
+                    type="button"
+                    onClick={() => setTableId(t.id)}
+                    className={`px-3 py-2 rounded-xl text-xs font-semibold border transition ${
+                      tableId === t.id
+                        ? 'bg-amber-500 border-amber-400 text-slate-950'
+                        : isSuggested
+                        ? 'bg-emerald-500/15 border-emerald-500/40 text-emerald-300 hover:bg-emerald-500/25'
+                        : 'bg-slate-800/50 border-slate-700 text-slate-400 hover:border-slate-500'
+                    }`}
+                  >
+                    {t.number} ({t.maxCapacity}P)
+                    {isSuggested && tableId !== t.id && <span className="ml-1">✓</span>}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Tags */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Tags / Besonderheiten</label>
+            <div className="flex gap-2 flex-wrap">
+              {TAGS.map((tag) => (
+                <button
+                  key={tag}
+                  type="button"
+                  onClick={() => toggleTag(tag)}
+                  className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition ${
+                    selectedTags.includes(tag)
+                      ? 'bg-purple-500/30 border-purple-400/60 text-purple-300'
+                      : 'bg-slate-800/50 border-slate-700 text-slate-400 hover:border-slate-500'
+                  }`}
+                >
+                  {tag === 'Hochstuhl' ? '🪑' : tag === 'Allergie' ? '⚠️' : tag === 'Fensterplatz' ? '🪟' : '🎂'} {tag}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Notes */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Notizen</label>
+            <textarea
+              rows={2}
+              placeholder="Besondere Wünsche, Hinweise..."
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition resize-none placeholder-slate-600"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-1">
+            <button
+              type="button"
+              onClick={closeBookingModal}
+              className="flex-1 py-3 rounded-2xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold transition text-sm"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              className="flex-1 py-3 rounded-2xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold transition text-sm active:scale-95 shadow-lg shadow-amber-500/25"
+            >
+              Reservierung bestätigen
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/FloorPlan.tsx b/frontend/src/components/FloorPlan.tsx
new file mode 100644
index 0000000..bc27ddd
--- /dev/null
+++ b/frontend/src/components/FloorPlan.tsx
@@ -0,0 +1,118 @@
+import { RestaurantTable, TableStatus } from '../types';
+import { useAppStore } from '../store/useAppStore';
+
+const STATUS_STYLES: Record<TableStatus, string> = {
+  FREE: 'border-emerald-500 bg-emerald-500/15 text-emerald-300',
+  OCCUPIED: 'border-rose-500 bg-rose-500/15 text-rose-300',
+  RESERVED: 'border-amber-400 bg-amber-400/15 text-amber-300',
+  BILL: 'border-sky-400 bg-sky-400/15 text-sky-300',
+};
+
+const STATUS_LABEL: Record<TableStatus, string> = {
+  FREE: 'Frei', OCCUPIED: 'Belegt', RESERVED: 'Reserviert', BILL: 'Rechnung',
+};
+
+interface Props {
+  tables: RestaurantTable[];
+}
+
+export default function FloorPlan({ tables }: Props) {
+  const { selectedTableId, selectTable, setTableStatus, openBookingModal } = useAppStore();
+
+  const handleTableClick = (t: RestaurantTable) => {
+    selectTable(t.id === selectedTableId ? null : t.id);
+  };
+
+  const selected = tables.find((t) => t.id === selectedTableId);
+
+  return (
+    <div className="flex gap-4 flex-col lg:flex-row h-full">
+      {/* Canvas */}
+      <div className="flex-1 relative bg-slate-950/70 rounded-2xl border border-slate-800 overflow-hidden min-h-[420px]">
+        {/* Grid */}
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage: 'linear-gradient(to right, #334155 1px, transparent 1px), linear-gradient(to bottom, #334155 1px, transparent 1px)',
+            backgroundSize: '40px 40px',
+          }}
+        />
+
+        {/* Area labels */}
+        {['Gastraum', 'Terrasse', 'Bar'].map((area, i) => (
+          <div
+            key={area}
+            className="absolute text-xs font-semibold text-slate-600 uppercase tracking-widest select-none"
+            style={{ left: 16, top: 16 + i * 200 }}
+          >
+            {area}
+          </div>
+        ))}
+
+        {tables.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => handleTableClick(t)}
+            style={{ left: t.x, top: t.y }}
+            title={`${t.number} — ${STATUS_LABEL[t.status]}`}
+            className={`absolute w-28 h-28 border-2 transition-all duration-200 flex flex-col items-center justify-center gap-1 group
+              ${t.shape === 'ROUND' ? 'rounded-full' : 'rounded-2xl'}
+              ${STATUS_STYLES[t.status]}
+              ${selectedTableId === t.id ? 'ring-4 ring-amber-400/50 scale-110 z-10' : 'hover:scale-105'}
+              cursor-pointer shadow-lg`}
+          >
+            <span className="font-bold text-xl">{t.number}</span>
+            <span className="text-xs opacity-75">👤 {t.maxCapacity}</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wider opacity-80">
+              {STATUS_LABEL[t.status]}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Side Panel */}
+      <div className="w-full lg:w-64 flex flex-col gap-3">
+        {/* Legend */}
+        <div className="bg-slate-900/60 border border-slate-800 rounded-2xl p-4 space-y-2">
+          <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Legende</p>
+          {(Object.entries(STATUS_LABEL) as [TableStatus, string][]).map(([s, label]) => (
+            <div key={s} className="flex items-center gap-2 text-sm">
+              <span className={`w-3 h-3 rounded border ${STATUS_STYLES[s]}`} />
+              <span className="text-slate-300">{label}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Selected Table Control */}
+        {selected && (
+          <div className="bg-slate-900/60 border border-amber-500/30 rounded-2xl p-4 space-y-3">
+            <p className="text-sm font-bold text-amber-400">Tisch {selected.number}</p>
+            <p className="text-xs text-slate-400">{selected.area} · max. {selected.maxCapacity} Pers.</p>
+
+            <div className="grid grid-cols-2 gap-2">
+              {(['FREE', 'OCCUPIED', 'RESERVED', 'BILL'] as TableStatus[]).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setTableStatus(selected.id, s)}
+                  className={`px-2 py-1.5 rounded-lg text-xs font-semibold border transition
+                    ${selected.status === s
+                      ? STATUS_STYLES[s] + ' shadow-md'
+                      : 'border-slate-700 text-slate-500 hover:border-slate-500'}`}
+                >
+                  {STATUS_LABEL[s]}
+                </button>
+              ))}
+            </div>
+
+            <button
+              onClick={() => openBookingModal(selected.id)}
+              className="w-full py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-semibold text-xs transition active:scale-95"
+            >
+              + Neue Reservierung
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ReservationList.tsx b/frontend/src/components/ReservationList.tsx
new file mode 100644
index 0000000..a7ee0f7
--- /dev/null
+++ b/frontend/src/components/ReservationList.tsx
@@ -0,0 +1,131 @@
+import { useAppStore } from '../store/useAppStore';
+import { Reservation, ReservationStatus } from '../types';
+
+const STATUS_ORDER: ReservationStatus[] = ['PENDING', 'CONFIRMED', 'ARRIVED', 'FINISHED', 'NO_SHOW', 'CANCELLED'];
+
+const STATUS_STYLE: Record<ReservationStatus, string> = {
+  PENDING: 'bg-slate-700/50 text-slate-300 border-slate-600',
+  CONFIRMED: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  ARRIVED: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40',
+  FINISHED: 'bg-slate-800/60 text-slate-500 border-slate-700',
+  NO_SHOW: 'bg-rose-500/20 text-rose-300 border-rose-500/40',
+  CANCELLED: 'bg-rose-900/30 text-rose-400/60 border-rose-800/40',
+};
+
+const STATUS_LABEL: Record<ReservationStatus, string> = {
+  PENDING: 'Ausstehend',
+  CONFIRMED: 'Bestätigt',
+  ARRIVED: 'Angekommen',
+  FINISHED: 'Abgeschlossen',
+  NO_SHOW: 'No-Show',
+  CANCELLED: 'Storniert',
+};
+
+const NEXT_STATUS: Partial<Record<ReservationStatus, ReservationStatus>> = {
+  PENDING: 'CONFIRMED',
+  CONFIRMED: 'ARRIVED',
+  ARRIVED: 'FINISHED',
+};
+
+const TAG_ICONS: Record<string, string> = {
+  Hochstuhl: '🪑',
+  Allergie: '⚠️',
+  Fensterplatz: '🪟',
+  Geburtstag: '🎂',
+};
+
+export default function ReservationList() {
+  const { reservations, updateReservationStatus, tables, openBookingModal } = useAppStore();
+
+  const active = reservations.filter((r) => !['FINISHED', 'NO_SHOW', 'CANCELLED'].includes(r.status));
+  const past = reservations.filter((r) => ['FINISHED', 'NO_SHOW', 'CANCELLED'].includes(r.status));
+
+  const getTableNames = (ids: string[]) =>
+    ids.map((id) => tables.find((t) => t.id === id)?.number ?? id).join(', ');
+
+  const Card = ({ r }: { r: Reservation }) => (
+    <div className={`p-4 rounded-2xl border transition-all ${STATUS_STYLE[r.status]}`}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-bold text-base">{r.guest.firstName} {r.guest.lastName}</span>
+            <span className="text-xs px-2 py-0.5 rounded-full border font-semibold text-current border-current/30 bg-current/10">
+              {STATUS_LABEL[r.status]}
+            </span>
+          </div>
+          <div className="text-xs mt-1 text-current/70 flex flex-wrap gap-x-3 gap-y-0.5">
+            <span>👤 {r.guestCount} Pers.</span>
+            <span>🕐 {r.startTime}–{r.endTime}</span>
+            <span>📋 Tisch {getTableNames(r.tableIds)}</span>
+            {r.guest.phone && <span>📞 {r.guest.phone}</span>}
+          </div>
+          {r.tags.length > 0 && (
+            <div className="flex gap-1 mt-2 flex-wrap">
+              {r.tags.map((tag) => (
+                <span key={tag} className="text-xs px-2 py-0.5 rounded-full bg-slate-800/80 text-slate-300 border border-slate-700">
+                  {TAG_ICONS[tag] ?? '🏷️'} {tag}
+                </span>
+              ))}
+            </div>
+          )}
+          {r.notes && <p className="text-xs mt-1.5 italic text-current/50">„{r.notes}"</p>}
+        </div>
+        <div className="flex flex-col gap-2 items-end shrink-0">
+          {NEXT_STATUS[r.status] && (
+            <button
+              onClick={() => updateReservationStatus(r.id, NEXT_STATUS[r.status]!)}
+              className="text-xs px-3 py-1.5 rounded-lg bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 hover:bg-emerald-500/30 font-semibold transition whitespace-nowrap"
+            >
+              → {STATUS_LABEL[NEXT_STATUS[r.status]!]}
+            </button>
+          )}
+          {!['FINISHED', 'NO_SHOW', 'CANCELLED'].includes(r.status) && (
+            <button
+              onClick={() => updateReservationStatus(r.id, 'NO_SHOW')}
+              className="text-xs px-3 py-1.5 rounded-lg bg-rose-500/10 border border-rose-500/30 text-rose-400 hover:bg-rose-500/20 font-semibold transition whitespace-nowrap"
+            >
+              No-Show
+            </button>
+          )}
+          {!['CANCELLED', 'FINISHED'].includes(r.status) && (
+            <button
+              onClick={() => updateReservationStatus(r.id, 'CANCELLED')}
+              className="text-xs px-3 py-1.5 rounded-lg bg-slate-700/50 border border-slate-600 text-slate-400 hover:bg-slate-700 font-semibold transition"
+            >
+              Stornieren
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-base font-semibold text-slate-200">Heute · Aktive Reservierungen ({active.length})</h3>
+        <button
+          onClick={() => openBookingModal()}
+          className="text-xs px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold transition"
+        >
+          + Neue Buchung
+        </button>
+      </div>
+      <div className="space-y-3">
+        {active.length === 0 && <p className="text-sm text-slate-500">Keine aktiven Reservierungen.</p>}
+        {active.map((r) => <Card key={r.id} r={r} />)}
+      </div>
+
+      {past.length > 0 && (
+        <>
+          <div className="border-t border-slate-800/80 pt-4">
+            <h3 className="text-sm font-semibold text-slate-500 mb-3">Abgeschlossen / Storniert ({past.length})</h3>
+            <div className="space-y-2">
+              {past.map((r) => <Card key={r.id} r={r} />)}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/Timeline.tsx b/frontend/src/components/Timeline.tsx
new file mode 100644
index 0000000..d7146aa
--- /dev/null
+++ b/frontend/src/components/Timeline.tsx
@@ -0,0 +1,117 @@
+import { useAppStore } from '../store/useAppStore';
+import { Reservation, ReservationStatus } from '../types';
+
+const HOURS = Array.from({ length: 14 }, (_, i) => `${String(i + 10).padStart(2, '0')}:00`);
+
+const STATUS_DOT: Record<ReservationStatus, string> = {
+  PENDING: 'bg-slate-400',
+  CONFIRMED: 'bg-amber-400',
+  ARRIVED: 'bg-emerald-400',
+  FINISHED: 'bg-slate-600',
+  NO_SHOW: 'bg-rose-500',
+  CANCELLED: 'bg-rose-700',
+};
+
+const STATUS_BAR: Record<ReservationStatus, string> = {
+  PENDING: 'bg-slate-500/50 border-slate-400/30',
+  CONFIRMED: 'bg-amber-500/30 border-amber-400/50',
+  ARRIVED: 'bg-emerald-500/30 border-emerald-400/50',
+  FINISHED: 'bg-slate-600/30 border-slate-500/30',
+  NO_SHOW: 'bg-rose-500/20 border-rose-400/30',
+  CANCELLED: 'bg-rose-800/20 border-rose-700/30',
+};
+
+function timeToMinutes(t: string) {
+  const [h, m] = t.split(':').map(Number);
+  return h * 60 + m;
+}
+
+const TIMELINE_START = 10 * 60; // 10:00
+const TIMELINE_END = 24 * 60;   // 24:00
+const TOTAL_MINUTES = TIMELINE_END - TIMELINE_START;
+const COL_WIDTH = 72; // px per hour
+
+export default function Timeline() {
+  const { tables, reservations, openBookingModal } = useAppStore();
+
+  const handleSlotClick = (tableId: string, hour: number) => {
+    openBookingModal(tableId, `${String(hour).padStart(2, '0')}:00`);
+  };
+
+  return (
+    <div className="overflow-x-auto rounded-2xl border border-slate-800 bg-slate-950/70">
+      <div style={{ minWidth: `${120 + HOURS.length * COL_WIDTH}px` }}>
+        {/* Header */}
+        <div className="flex border-b border-slate-800 sticky top-0 bg-slate-950 z-10">
+          <div className="w-[120px] shrink-0 p-3 text-xs font-semibold text-slate-500 uppercase tracking-wider border-r border-slate-800">
+            Tisch
+          </div>
+          {HOURS.map((h) => (
+            <div
+              key={h}
+              className="text-center text-xs text-slate-500 border-r border-slate-800/50 py-3 font-mono"
+              style={{ width: COL_WIDTH }}
+            >
+              {h}
+            </div>
+          ))}
+        </div>
+
+        {/* Rows */}
+        {tables.map((table) => {
+          const tableReservations = reservations.filter((r) =>
+            r.tableIds.includes(table.id) && r.status !== 'CANCELLED'
+          );
+
+          return (
+            <div key={table.id} className="flex border-b border-slate-800/50 hover:bg-slate-900/30 group relative">
+              {/* Table Label */}
+              <div className="w-[120px] shrink-0 px-3 py-3 border-r border-slate-800 flex flex-col justify-center">
+                <span className="text-sm font-bold text-slate-200">{table.number}</span>
+                <span className="text-xs text-slate-500">{table.area} · {table.maxCapacity}P</span>
+              </div>
+
+              {/* Timeline cells */}
+              <div className="relative flex flex-1" style={{ height: 64 }}>
+                {/* Click grid */}
+                {HOURS.map((_, i) => (
+                  <button
+                    key={i}
+                    onClick={() => handleSlotClick(table.id, 10 + i)}
+                    className="border-r border-slate-800/30 h-full hover:bg-amber-500/10 transition shrink-0 group-hover:border-slate-700/50"
+                    style={{ width: COL_WIDTH }}
+                    title={`Neue Reservierung: ${table.number} um ${HOURS[i]}`}
+                  />
+                ))}
+
+                {/* Reservation bars */}
+                {tableReservations.map((res: Reservation) => {
+                  const startMin = timeToMinutes(res.startTime) - TIMELINE_START;
+                  const endMin = timeToMinutes(res.endTime) - TIMELINE_START;
+                  const leftPct = (startMin / TOTAL_MINUTES) * 100;
+                  const widthPct = ((endMin - startMin) / TOTAL_MINUTES) * 100;
+                  const totalWidth = HOURS.length * COL_WIDTH;
+
+                  return (
+                    <div
+                      key={res.id}
+                      title={`${res.guest.firstName} ${res.guest.lastName} (${res.guestCount}P) ${res.startTime}–${res.endTime}`}
+                      className={`absolute top-2 bottom-2 rounded-lg border px-2 flex items-center overflow-hidden text-xs font-semibold cursor-pointer hover:brightness-110 transition z-10 ${STATUS_BAR[res.status]}`}
+                      style={{
+                        left: `${(startMin / TOTAL_MINUTES) * totalWidth}px`,
+                        width: `${((endMin - startMin) / TOTAL_MINUTES) * totalWidth - 4}px`,
+                      }}
+                    >
+                      <span className={`w-2 h-2 rounded-full shrink-0 mr-1.5 ${STATUS_DOT[res.status]}`} />
+                      <span className="truncate">{res.guest.firstName} {res.guest.lastName}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6119ad9..f1d8c73 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,68 +1 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import "tailwindcss";
diff --git a/frontend/src/store/useAppStore.ts b/frontend/src/store/useAppStore.ts
new file mode 100644
index 0000000..adfc858
--- /dev/null
+++ b/frontend/src/store/useAppStore.ts
@@ -0,0 +1,81 @@
+import { create } from 'zustand';
+import { Reservation, ReservationStatus, RestaurantTable, TableStatus } from '../types';
+
+const SAMPLE_TABLES: RestaurantTable[] = [
+  { id: 't1', number: 'T1', seats: 4, minCapacity: 1, maxCapacity: 4, status: 'FREE', x: 60, y: 60, shape: 'RECT', area: 'Gastraum' },
+  { id: 't2', number: 'T2', seats: 2, minCapacity: 1, maxCapacity: 2, status: 'OCCUPIED', x: 240, y: 60, shape: 'ROUND', area: 'Gastraum' },
+  { id: 't3', number: 'T3', seats: 6, minCapacity: 2, maxCapacity: 6, status: 'RESERVED', x: 420, y: 60, shape: 'RECT', area: 'Gastraum' },
+  { id: 't4', number: 'T4', seats: 4, minCapacity: 1, maxCapacity: 4, status: 'BILL', x: 60, y: 240, shape: 'ROUND', area: 'Terrasse' },
+  { id: 't5', number: 'T5', seats: 8, minCapacity: 4, maxCapacity: 8, status: 'FREE', x: 240, y: 240, shape: 'RECT', area: 'Terrasse' },
+  { id: 't6', number: 'T6', seats: 2, minCapacity: 1, maxCapacity: 2, status: 'FREE', x: 420, y: 240, shape: 'ROUND', area: 'Bar' },
+];
+
+const SAMPLE_RESERVATIONS: Reservation[] = [
+  {
+    id: 'r1', tableIds: ['t3'],
+    guest: { id: 'g1', firstName: 'Maria', lastName: 'Müller', phone: '+49 170 1234567', email: 'maria@example.com' },
+    date: '2026-08-19', startTime: '18:00', endTime: '19:30', guestCount: 4,
+    status: 'CONFIRMED', notes: 'Fensterplatz gewünscht', tags: ['Fensterplatz', 'Geburtstag'], createdAt: '2026-08-18T10:00:00Z',
+  },
+  {
+    id: 'r2', tableIds: ['t2'],
+    guest: { id: 'g2', firstName: 'Hans', lastName: 'Schmidt', phone: '+49 160 7654321' },
+    date: '2026-08-19', startTime: '19:00', endTime: '20:30', guestCount: 2,
+    status: 'ARRIVED', notes: '', tags: ['Allergie'], createdAt: '2026-08-18T11:00:00Z',
+  },
+  {
+    id: 'r3', tableIds: ['t5'],
+    guest: { id: 'g3', firstName: 'Anna', lastName: 'Weber', email: 'anna@example.com' },
+    date: '2026-08-19', startTime: '20:00', endTime: '22:00', guestCount: 6,
+    status: 'PENDING', notes: 'Hochstuhl benötigt', tags: ['Hochstuhl'], createdAt: '2026-08-18T12:00:00Z',
+  },
+];
+
+interface AppState {
+  tables: RestaurantTable[];
+  reservations: Reservation[];
+  selectedTableId: string | null;
+  selectedReservationId: string | null;
+  showBookingModal: boolean;
+  prefillTableId: string | null;
+  prefillTime: string | null;
+  prefillDate: string | null;
+
+  setTableStatus: (id: string, status: TableStatus) => void;
+  selectTable: (id: string | null) => void;
+  openBookingModal: (tableId?: string, time?: string, date?: string) => void;
+  closeBookingModal: () => void;
+  addReservation: (reservation: Reservation) => void;
+  updateReservationStatus: (id: string, status: ReservationStatus) => void;
+  selectReservation: (id: string | null) => void;
+}
+
+export const useAppStore = create<AppState>((set) => ({
+  tables: SAMPLE_TABLES,
+  reservations: SAMPLE_RESERVATIONS,
+  selectedTableId: null,
+  selectedReservationId: null,
+  showBookingModal: false,
+  prefillTableId: null,
+  prefillTime: null,
+  prefillDate: null,
+
+  setTableStatus: (id, status) =>
+    set((s) => ({ tables: s.tables.map((t) => (t.id === id ? { ...t, status } : t)) })),
+
+  selectTable: (id) => set({ selectedTableId: id }),
+
+  openBookingModal: (tableId, time, date) =>
+    set({ showBookingModal: true, prefillTableId: tableId ?? null, prefillTime: time ?? null, prefillDate: date ?? null }),
+
+  closeBookingModal: () =>
+    set({ showBookingModal: false, prefillTableId: null, prefillTime: null, prefillDate: null }),
+
+  addReservation: (reservation) =>
+    set((s) => ({ reservations: [reservation, ...s.reservations] })),
+
+  updateReservationStatus: (id, status) =>
+    set((s) => ({ reservations: s.reservations.map((r) => (r.id === id ? { ...r, status } : r)) })),
+
+  selectReservation: (id) => set({ selectedReservationId: id }),
+}));
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..9c54598
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,39 @@
+export type TableStatus = 'FREE' | 'OCCUPIED' | 'RESERVED' | 'BILL';
+export type TableShape = 'RECT' | 'ROUND';
+export type ReservationStatus = 'PENDING' | 'CONFIRMED' | 'ARRIVED' | 'FINISHED' | 'NO_SHOW' | 'CANCELLED';
+export type ViewMode = 'floor' | 'timeline' | 'list';
+
+export interface RestaurantTable {
+  id: string;
+  number: string;
+  seats: number;
+  minCapacity: number;
+  maxCapacity: number;
+  status: TableStatus;
+  x: number;
+  y: number;
+  shape: TableShape;
+  area: string;
+}
+
+export interface Guest {
+  id: string;
+  firstName: string;
+  lastName: string;
+  phone?: string;
+  email?: string;
+}
+
+export interface Reservation {
+  id: string;
+  guest: Guest;
+  tableIds: string[];
+  date: string;
+  startTime: string;
+  endTime: string;
+  guestCount: number;
+  status: ReservationStatus;
+  notes: string;
+  tags: string[];
+  createdAt: string;
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 8b0f57b..a41929f 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })
+