From 8a124fe17dc8b14c1c53b463ee68e2ac1836aafa Mon Sep 17 00:00:00 2001
From: Eduard Iten <eduard@iten.pro>
Date: Sat, 28 Feb 2026 07:57:40 +0100
Subject: [PATCH] sync

---
 firmware/src/protocol.c                     |   2 +-
 webpage/.prettierrc                         |   5 +
 webpage/astro.config.mjs                    |  15 +-
 webpage/package-lock.json                   | 611 ++++++++++++++++++++
 webpage/package.json                        |   2 +
 webpage/src/components/ConnectButton.svelte |  58 ++
 webpage/src/components/DeviceInfo.svelte    |  17 +
 webpage/src/components/DiskUsage.astro      |   0
 webpage/src/components/DiskUsage.svelte     |  36 ++
 webpage/src/components/FileRow.astro        |  31 +
 webpage/src/components/FileRow.svelte       |  50 ++
 webpage/src/components/FileStorage.svelte   |  57 ++
 webpage/src/components/SerialWarning.svelte |  40 ++
 webpage/src/components/StatusModal.astro    |  47 ++
 webpage/src/lib/buzzerActions.ts            | 123 ++++
 webpage/src/lib/buzzerStore.ts              |  16 +
 webpage/src/pages/index.astro               | 146 +++--
 17 files changed, 1186 insertions(+), 70 deletions(-)
 create mode 100644 webpage/.prettierrc
 create mode 100644 webpage/src/components/ConnectButton.svelte
 create mode 100644 webpage/src/components/DeviceInfo.svelte
 delete mode 100644 webpage/src/components/DiskUsage.astro
 create mode 100644 webpage/src/components/DiskUsage.svelte
 create mode 100644 webpage/src/components/FileRow.svelte
 create mode 100644 webpage/src/components/FileStorage.svelte
 create mode 100644 webpage/src/components/SerialWarning.svelte
 create mode 100644 webpage/src/components/StatusModal.astro
 create mode 100644 webpage/src/lib/buzzerActions.ts
 create mode 100644 webpage/src/lib/buzzerStore.ts

diff --git a/firmware/src/protocol.c b/firmware/src/protocol.c
index 3c3865e..79c8c55 100644
--- a/firmware/src/protocol.c
+++ b/firmware/src/protocol.c
@@ -15,7 +15,7 @@
 
 #define PROTOCOL_VERSION 2
 
-LOG_MODULE_REGISTER(protocol, LOG_LEVEL_INF);
+LOG_MODULE_REGISTER(protocol, LOG_LEVEL_DBG);
 
 #define PROTOCOL_STACK_SIZE 2048
 #define PROTOCOL_PRIORITY 5
diff --git a/webpage/.prettierrc b/webpage/.prettierrc
new file mode 100644
index 0000000..74896e3
--- /dev/null
+++ b/webpage/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "bracketSameLine": true,
+  "printWidth": 120,
+  "singleAttributePerLine": false
+}
diff --git a/webpage/astro.config.mjs b/webpage/astro.config.mjs
index 72cf507..adcc3b4 100644
--- a/webpage/astro.config.mjs
+++ b/webpage/astro.config.mjs
@@ -1,15 +1,16 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
-
 import tailwindcss from '@tailwindcss/vite';
-
 import svelte from '@astrojs/svelte';
+import icon from 'astro-icon';
 
-// https://astro.build/config
 export default defineConfig({
-  vite: {
-    plugins: [tailwindcss()]
-  },
+  integrations: [
+    svelte(), 
+    icon()
+  ],
 
-  integrations: [svelte()]
+  vite: {
+    plugins: [tailwindcss()],
+  }
 });
\ No newline at end of file
diff --git a/webpage/package-lock.json b/webpage/package-lock.json
index 0c7a61d..eedaf64 100644
--- a/webpage/package-lock.json
+++ b/webpage/package-lock.json
@@ -9,14 +9,38 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/svelte": "^7.2.5",
+        "@iconify-json/ph": "^1.2.2",
         "@phosphor-icons/core": "^2.1.1",
         "@tailwindcss/vite": "^4.2.1",
         "astro": "^5.17.1",
+        "astro-icon": "^1.1.5",
         "svelte": "^5.53.5",
         "tailwindcss": "^4.2.1",
         "typescript": "^5.9.3"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@astrojs/compiler": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.13.1.tgz",
@@ -591,6 +615,107 @@
         "node": ">=18"
       }
     },
+    "node_modules/@iconify-json/ph": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.2.2.tgz",
+      "integrity": "sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/tools": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.2.0.tgz",
+      "integrity": "sha512-WRxPva/ipxYkqZd1+CkEAQmd86dQmrwH0vwK89gmp2Kh2WyyVw57XbPng0NehP3x4V1LzLsXUneP1uMfTMZmUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.3.0",
+        "cheerio": "^1.1.2",
+        "domhandler": "^5.0.3",
+        "extract-zip": "^2.0.1",
+        "local-pkg": "^1.1.2",
+        "pathe": "^2.0.3",
+        "svgo": "^3.3.2",
+        "tar": "^7.5.2"
+      }
+    },
+    "node_modules/@iconify/tools/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@iconify/tools/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@iconify/tools/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/@iconify/tools/node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
@@ -1057,6 +1182,18 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1847,6 +1984,15 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1895,6 +2041,16 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "25.3.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.2.tgz",
+      "integrity": "sha512-RpV6r/ij22zRRdyBPcxDeKAzH43phWVKEjL2iksqo1Vz3CuBUrgmPpPhALKiRfU7OMCmeeO9vECBMsV0hMTG8Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -1907,6 +2063,16 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -2135,6 +2301,17 @@
         "sharp": "^0.34.0"
       }
     },
+    "node_modules/astro-icon": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/astro-icon/-/astro-icon-1.1.5.tgz",
+      "integrity": "sha512-CJYS5nWOw9jz4RpGWmzNQY7D0y2ZZacH7atL2K9DeJXJVaz7/5WrxeyIxO8KASk1jCM96Q4LjRx/F3R+InjJrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/tools": "^4.0.5",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.1.30"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -2188,6 +2365,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/camelcase": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
@@ -2252,6 +2438,48 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.2.0.tgz",
+      "integrity": "sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "encoding-sniffer": "^0.2.1",
+        "htmlparser2": "^10.1.0",
+        "parse5": "^7.3.0",
+        "parse5-htmlparser2-tree-adapter": "^7.1.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^7.19.0",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -2267,6 +2495,15 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ci-info": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
@@ -2328,6 +2565,12 @@
       "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
       "license": "ISC"
     },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
     "node_modules/cookie": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
@@ -2645,6 +2888,28 @@
       "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
       "license": "MIT"
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.19.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
@@ -2759,12 +3024,47 @@
       "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
       "license": "MIT"
     },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "license": "MIT"
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2838,12 +3138,39 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/github-slugger": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
       "license": "ISC"
     },
+    "node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3060,12 +3387,55 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
       "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/import-meta-resolve": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
@@ -3193,6 +3563,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.31.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -3442,6 +3818,23 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -4291,6 +4684,56 @@
       ],
       "license": "MIT"
     },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -4396,6 +4839,15 @@
       "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
       "license": "MIT"
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/oniguruma-parser": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
@@ -4492,6 +4944,43 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "license": "MIT"
+    },
     "node_modules/piccolore": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz",
@@ -4516,6 +5005,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -4576,6 +5076,32 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -4866,6 +5392,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/sax": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
@@ -5131,6 +5663,22 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tar": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz",
+      "integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -5252,6 +5800,22 @@
       "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
+      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -6103,6 +6667,28 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which-pm-runs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.1.0.tgz",
@@ -6144,12 +6730,27 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
     "node_modules/xxhash-wasm": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-1.1.0.tgz",
       "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==",
       "license": "MIT"
     },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
@@ -6159,6 +6760,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
diff --git a/webpage/package.json b/webpage/package.json
index 2e77193..9ad520d 100644
--- a/webpage/package.json
+++ b/webpage/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^7.2.5",
+    "@iconify-json/ph": "^1.2.2",
     "@phosphor-icons/core": "^2.1.1",
     "@tailwindcss/vite": "^4.2.1",
     "astro": "^5.17.1",
+    "astro-icon": "^1.1.5",
     "svelte": "^5.53.5",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3"
diff --git a/webpage/src/components/ConnectButton.svelte b/webpage/src/components/ConnectButton.svelte
new file mode 100644
index 0000000..a4e364e
--- /dev/null
+++ b/webpage/src/components/ConnectButton.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { buzzer } from '../lib/buzzerStore';
+  import { updateDeviceInfo, refreshFileList, setActivePort } from '../lib/buzzerActions';
+    import { set } from 'astro:schema';
+
+  let port: SerialPort | null = null;
+  const filters = [{ usbVendorId: 0x2fe3, usbProductId: 0x0001 }];
+
+  async function connect() {
+    try {
+      port = await navigator.serial.requestPort({ filters });
+      await port.open({ baudRate: 115200 });
+      
+      // Store aktualisieren
+      buzzer.update(b => ({ ...b, connected: true }));
+
+      if (port) {
+        setActivePort(port); // Aktiven Port in den Actions setzen
+        await updateDeviceInfo(port);
+        await refreshFileList(port);
+      }
+    } catch (e) {
+      setActivePort(null); // Port zurücksetzen
+      console.error("Verbindung fehlgeschlagen:", e);
+      buzzer.update(b => ({ ...b, connected: false }));
+    }
+  }
+
+  async function disconnect() {
+    if (port) {
+      await port.close();
+      port = null;
+      buzzer.update(b => ({ ...b, connected: false }));
+    }
+  }
+</script>
+
+<button 
+  on:click={$buzzer.connected ? disconnect : connect}
+  class="flex items-center gap-2 px-6 py-2 {$buzzer.connected ? 'bg-blue-600 hover:bg-blue-500' : 'bg-emerald-600 hover:bg-emerald-500'} text-white text-xs font-black rounded-full transition-all shadow-lg active:scale-95 uppercase tracking-widest"
+>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
+    {#if $buzzer.connected}
+      <rect width="256" height="256" fill="none"/>
+      <rect x="63.03" y="88.4" width="129.94" height="79.2" rx="24" transform="translate(-53.02 128) rotate(-45)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="88" y1="88" x2="168" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="232" y1="24" x2="173.94" y2="82.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="82.06" y1="173.94" x2="24" y2="232" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    {:else}
+      <rect width="256" height="256" fill="none"/>
+      <line x1="144" y1="144" x2="120" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="197.94" y1="58.06" x2="232" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    {/if}
+  </svg>
+  {$buzzer.connected ? 'Disconnect' : 'Connect'}
+</button>
\ No newline at end of file
diff --git a/webpage/src/components/DeviceInfo.svelte b/webpage/src/components/DeviceInfo.svelte
new file mode 100644
index 0000000..547925a
--- /dev/null
+++ b/webpage/src/components/DeviceInfo.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { buzzer } from '../lib/buzzerStore';
+</script>
+
+<div class="text-[11px] font-mono text-slate-400 space-y-1 relative z-10">
+    <p>
+        Firmware: <span class="text-indigo-300">{$buzzer.version}</span>
+    </p>
+    <p>
+        Protocol: <span class="text-indigo-300">{$buzzer.protocol}</span>
+    </p>
+    <p>
+        Status: <span class="{$buzzer.connected ? 'text-emerald-400' : 'text-red-400'}">
+            {$buzzer.connected ? 'Confirmed' : 'Disconnected'}
+        </span>
+    </p>
+</div>
\ No newline at end of file
diff --git a/webpage/src/components/DiskUsage.astro b/webpage/src/components/DiskUsage.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/webpage/src/components/DiskUsage.svelte b/webpage/src/components/DiskUsage.svelte
new file mode 100644
index 0000000..1469fda
--- /dev/null
+++ b/webpage/src/components/DiskUsage.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { buzzer } from '../lib/buzzerStore';
+  
+  $: storage = $buzzer.storage;
+  $: total = storage.total > 0 ? storage.total : 8.0;
+  
+  // Berechnung der Prozentanteile
+  $: pAudio = (storage.usedAudio / total) * 100;
+  $: pSys = (storage.usedSys / total) * 100;
+  $: pMeta = (storage.unknown / total) * 100;
+  $: pFree = (storage.available / total) * 100;
+
+  // Zustand für das UI
+  $: isDisconnected = !$buzzer.connected;
+</script>
+
+<div class="flex flex-col gap-1.5 w-96 transition-all duration-700 {isDisconnected ? 'blur-sm opacity-30 grayscale pointer-events-none' : ''}">
+  
+  <div class="h-3.5 w-full bg-slate-800 rounded-full overflow-hidden flex border border-slate-700 shadow-inner">
+      <div class="h-full bg-slate-300 transition-all duration-500" style="width: {pMeta}%"></div>
+      <div class="h-full bg-fuchsia-500 transition-all duration-500" style="width: {pSys}%"></div>
+      <div class="h-full bg-blue-500 transition-all duration-500" style="width: {pAudio}%"></div>
+      <div class="h-full bg-emerald-500 transition-all duration-500" style="width: {pFree}%"></div>
+  </div>
+
+  <div class="text-[9px] text-slate-400 flex justify-between uppercase tracking-[0.2em] font-black">
+    <div class="flex gap-3">
+      <span class={pMeta > 0 ? "text-slate-300" : "text-slate-600"}>Meta</span>
+      <span class={pSys > 0 ? "text-fuchsia-400" : "text-slate-600"}>Sys</span>
+      <span class={pAudio > 0 ? "text-blue-400" : "text-slate-600"}>Audio</span>
+    </div>
+    <span class="text-emerald-400">
+      {isDisconnected ? 'Offline' : storage.available.toFixed(2) + ' MB Free'}
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/webpage/src/components/FileRow.astro b/webpage/src/components/FileRow.astro
index e69de29..a4a0c51 100644
--- a/webpage/src/components/FileRow.astro
+++ b/webpage/src/components/FileRow.astro
@@ -0,0 +1,31 @@
+---
+// src/components/FileRow.astro
+import { Icon } from 'astro-icon/components';
+
+const { name, size, selected = false, isSystem = false } = Astro.props;
+
+const activeClasses = selected 
+  ? "bg-blue-600/20 border-l-4 border-blue-500 shadow-[inset_0_0_20px_rgba(59,130,246,0.1)]" 
+  : "hover:bg-slate-700/40 border-l-4 border-transparent";
+---
+
+<div class={`flex items-center justify-between p-3 cursor-pointer transition-all group border-b border-slate-700/30 ${activeClasses}`}>
+  <div class="flex items-center gap-4">
+    <div class={`text-2xl ${selected ? 'text-blue-400' : 'text-slate-500'}`}>
+      {isSystem ? <Icon name="ph:wrench-fill" /> : <Icon name="ph:music-notes-fill" />}
+    </div>
+    <div class="flex flex-col overflow-hidden">
+      <span class={`text-sm truncate ${selected ? 'font-bold text-white' : 'text-slate-200'}`}>{name}</span>
+      <span class="text-[10px] text-slate-500 font-mono tracking-tighter">{size}</span>
+    </div>
+  </div>
+  
+  <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+    <button class="p-2 hover:bg-blue-500/20 rounded-lg text-blue-400 transition-colors">
+      <Icon name="ph:play-fill" class="w-4 h-4" />
+    </button>
+    <button class="p-2 hover:bg-red-500/20 rounded-lg text-red-400 transition-colors">
+      <Icon name="ph:trash-fill" class="w-4 h-4" />
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/webpage/src/components/FileRow.svelte b/webpage/src/components/FileRow.svelte
new file mode 100644
index 0000000..30ef8c0
--- /dev/null
+++ b/webpage/src/components/FileRow.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { buzzer } from '../lib/buzzerStore';
+  import { playFile, deleteFile } from '../lib/buzzerActions';
+
+  // Die Datei-Daten werden vom Parent (FileStorage) übergeben
+  export let file: { name: string, size: string, isSystem: boolean };
+  export let selected = false;
+
+  // Wir benötigen den Port für die Kommandos
+  // In einem echten Szenario würden wir den Port in einem Store speichern.
+  // Hier nehmen wir an, er wird über die Actions gehandelt.
+</script>
+
+<div 
+  class="flex items-center justify-between p-3 cursor-pointer transition-all group border-b border-slate-700/30 
+  {selected ? 'bg-blue-600/20 border-l-4 border-blue-500 shadow-[inset_0_0_20px_rgba(59,130,246,0.1)]' : 'hover:bg-slate-700/40 border-l-4 border-transparent'}"
+>
+  <div class="flex items-center gap-4 overflow-hidden">
+    <div class="text-2xl {selected ? 'text-blue-400' : 'text-slate-500'} shrink-0">
+      {#if file.isSystem}
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M225.9,103.11l-40.45,40.44a8,8,0,0,1-11.31,0L148,117.41a8,8,0,0,1,0-11.31l40.44-40.45a72,72,0,0,0-85.3,109.11l-51.5,51.5a24,24,0,0,0,33.94,33.94l51.5-51.5A72,72,0,0,0,225.9,103.11ZM160,80a8,8,0,1,1-8-8A8,8,0,0,1,160,80Z"></path></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M210.3,56.34l-80-24A8,8,0,0,0,120,40V148.26A48,48,0,1,0,136,184V98.71l69.7,20.91a8,8,0,0,0,10.3-7.62V64A8,8,0,0,0,210.3,56.34ZM88,216a32,32,0,1,1,32-32A32,32,0,0,1,88,216Zm112-112.71L136,83.89V49.11L200,68.31Z"></path></svg>
+      {/if}
+    </div>
+    
+    <div class="flex flex-col overflow-hidden">
+      <span class="text-sm truncate {selected ? 'font-bold text-white' : 'text-slate-200'}">{file.name}</span>
+      <span class="text-[10px] text-slate-500 font-mono tracking-tighter uppercase">{file.size}</span>
+    </div>
+  </div>
+  
+  <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+    <button 
+      on:click|stopPropagation={() => playFile(file.name)}
+      class="p-2 hover:bg-blue-500/20 rounded-lg text-blue-400 transition-colors"
+      title="Play Sound"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.75a16,16,0,0,1-16.2,0A15.86,15.86,0,0,1,64,216.24V39.76a15.86,15.86,0,0,1,8.12-13.51,16,16,0,0,1,16.2,0L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path></svg>
+    </button>
+    
+    <button 
+      on:click|stopPropagation={() => deleteFile(file.name)}
+      class="p-2 hover:bg-red-500/20 rounded-lg text-red-400 transition-colors"
+      title="Delete File"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/webpage/src/components/FileStorage.svelte b/webpage/src/components/FileStorage.svelte
new file mode 100644
index 0000000..8691869
--- /dev/null
+++ b/webpage/src/components/FileStorage.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { buzzer } from '../lib/buzzerStore';
+  import { refreshFileList } from '../lib/buzzerActions';
+  import FileRow from './FileRow.svelte';
+
+  async function handleRefresh() {
+    // Falls wir den Port im Store haben, hier nutzen
+    // ansonsten wird er über die Actions verwaltet
+    await refreshFileList();
+  }
+</script>
+
+<div class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl relative">
+  
+  <div class="p-5 border-b border-slate-700 bg-slate-800/80 flex justify-between items-center shrink-0">
+    <h2 class="font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">
+      Flash Storage <span class="text-slate-600">/LFS/A</span>
+    </h2>
+    
+    <button 
+      on:click={handleRefresh}
+      class="text-slate-500 hover:text-blue-400 transition-colors active:rotate-180 duration-500">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
+        <rect width="256" height="256" fill="none"/><polyline points="88 96 40 96 40 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M40,96,68.28,67.72A88,88,0,0,1,192,67" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="168 160 216 160 216 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M216,160l-28.28,28.28A88,88,0,0,1,64,189" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>      </svg>
+    </button>
+  </div>
+
+  <div class="flex-1 overflow-y-auto custom-scrollbar relative z-10">
+    {#if $buzzer.connected}
+      <div class="flex flex-col">
+        {#each $buzzer.files as file}
+          <FileRow {file} />
+        {:else}
+          <div class="p-10 text-center text-slate-600 text-[10px] uppercase tracking-widest italic">
+            Keine Dateien auf dem Buzzer
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="flex-1 flex items-center justify-center p-10">
+        <span class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">
+          Offline - Warte auf Port
+        </span>
+      </div>
+    {/if}
+  </div>
+
+  <div class="absolute bottom-6 right-6 text-slate-700 opacity-5 pointer-events-none">
+     <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" fill="currentColor" viewBox="0 0 256 256">
+        <path d="M208,40V216a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V40A16,16,0,0,1,64,24H192A16,16,0,0,1,208,40Z" opacity="0.2"></path>
+        <path d="M208,40V216a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V40A16,16,0,0,1,64,24H192A16,16,0,0,1,208,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
+        <line x1="80" y1="24" x2="80" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
+        <line x1="128" y1="24" x2="128" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
+        <line x1="176" y1="24" x2="176" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
+     </svg>
+  </div>
+</div>
\ No newline at end of file
diff --git a/webpage/src/components/SerialWarning.svelte b/webpage/src/components/SerialWarning.svelte
new file mode 100644
index 0000000..5bfa867
--- /dev/null
+++ b/webpage/src/components/SerialWarning.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  let unsupported = true;
+
+  onMount(() => {
+    if (typeof navigator !== 'undefined' && 'serial' in navigator) {
+      unsupported = false;
+    }
+  });
+</script>
+
+{#if unsupported}
+  <div class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-slate-950/40 backdrop-blur-2xl transition-all">
+    <div class="w-full max-w-md bg-slate-900 border-2 border-red-500/30 rounded-[3rem] p-12 text-center shadow-2xl">
+      
+      <div class="flex justify-center text-slate-400 text500 mb-8">
+        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="currentColor" viewBox="0 0 256 256">
+          <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM164,108a12,12,0,1,1-12-12A12,12,0,0,1,164,108ZM92,120a12,12,0,1,1,12-12A12,12,0,0,1,92,120Zm71.74,48a8,8,0,0,1-11.48,1.26,44,44,0,0,0-56.52,0,8,8,0,1,1-10.22-12.31,60,60,0,0,1,77,0A8,8,0,0,1,163.74,168Z"></path>
+        </svg>
+      </div>
+
+      <h2 class="text-2xl font-black text-white uppercase tracking-tight mb-4">Browser Check</h2>
+      <p class="text-slate-400 text-sm leading-relaxed mb-8">
+        Diese App benötigt die <span class="text-blue-400 font-mono">Web Serial API</span>, um direkt mit dem Buzzer zu interagieren. 
+        Dein Browser scheint das nicht zu unterstützen.
+      </p>
+      
+      <div class="flex flex-col gap-3">
+        <a href="https://www.google.com/chrome/" target="_blank" 
+           class="block w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl text-xs font-bold uppercase tracking-[0.2em] transition-all">
+          Chrome nutzen
+        </a>
+        <p class="text-[10px] text-slate-500 uppercase tracking-widest font-medium italic">
+          Dieses komische Winzigweich Kante geht wohl auch...
+        </p>
+      </div>
+    </div>
+  </div>
+{/if}
\ No newline at end of file
diff --git a/webpage/src/components/StatusModal.astro b/webpage/src/components/StatusModal.astro
new file mode 100644
index 0000000..4e62bed
--- /dev/null
+++ b/webpage/src/components/StatusModal.astro
@@ -0,0 +1,47 @@
+---
+// src/components/StatusModal.astro
+import { Icon } from 'astro-icon/components';
+const { visible = false, currentFile = "firmware.bin", progress = 45, totalProgress = 20 } = Astro.props;
+---
+
+{visible && (
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-slate-950/80 backdrop-blur-sm">
+    <div class="w-full max-w-lg bg-slate-800 border border-slate-700 rounded-[2.5rem] p-8 shadow-2xl">
+      <div class="flex items-center gap-4 mb-8">
+        <div class="p-3 bg-blue-500/20 rounded-2xl text-blue-400 animate-pulse">
+          <Icon name="ph:upload-simple-fill" class="w-8 h-8" />
+        </div>
+        <div>
+          <h2 class="text-xl font-bold text-white">Transferring Data</h2>
+          <p class="text-sm text-slate-400">Please do not disconnect the device</p>
+        </div>
+      </div>
+
+      <div class="space-y-6">
+        <div>
+          <div class="flex justify-between text-xs mb-2">
+            <span class="text-slate-300 font-mono">{currentFile}</span>
+            <span class="text-blue-400 font-bold">{progress}%</span>
+          </div>
+          <div class="h-2 w-full bg-slate-900 rounded-full overflow-hidden">
+            <div class="h-full bg-blue-500 transition-all" style={`width: ${progress}%`}></div>
+          </div>
+        </div>
+
+        <div>
+          <div class="flex justify-between text-xs mb-2 italic text-slate-500">
+            <span>Overall Progress</span>
+            <span>{totalProgress}%</span>
+          </div>
+          <div class="h-1.5 w-full bg-slate-900 rounded-full overflow-hidden">
+            <div class="h-full bg-indigo-500 transition-all" style={`width: ${totalProgress}%`}></div>
+          </div>
+        </div>
+      </div>
+
+      <button class="mt-10 w-full py-3 bg-slate-700 hover:bg-red-900/40 hover:text-red-400 rounded-2xl text-xs font-bold uppercase tracking-widest transition-all">
+        Abort Transfer
+      </button>
+    </div>
+  </div>
+)}
\ No newline at end of file
diff --git a/webpage/src/lib/buzzerActions.ts b/webpage/src/lib/buzzerActions.ts
new file mode 100644
index 0000000..6ef598d
--- /dev/null
+++ b/webpage/src/lib/buzzerActions.ts
@@ -0,0 +1,123 @@
+// src/lib/buzzerActions.ts
+import { buzzer } from './buzzerStore';
+
+let activePort: SerialPort | null = null;
+/**
+ * Hilfsfunktion für die Kommunikation
+ */
+async function sendCommand(port: SerialPort, command: string): Promise<string[]> {
+    const encoder = new TextEncoder();
+    const decoder = new TextDecoder();
+    const writer = port.writable.getWriter();
+    const reader = port.readable.getReader();
+
+    try {
+        await writer.write(encoder.encode(command + "\n"));
+        writer.releaseLock();
+
+        let raw = "";
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            raw += decoder.decode(value);
+            if (raw.includes("OK")) break;
+        }
+        return raw.split('\n').map(l => l.trim()).filter(l => l && l !== "OK" && !l.startsWith(command));
+    } finally {
+        reader.releaseLock();
+    }
+}
+
+// WICHTIG: Hier muss "export" stehen!
+export async function updateDeviceInfo(port: SerialPort) {
+    const lines = await sendCommand(port, "info");
+    if (lines.length > 0) {
+        const parts = lines[0].split(';');
+        if (parts.length >= 6) {
+            const pageSize = parseInt(parts[2]);
+            const totalPages = parseInt(parts[3]);
+            const availablePages = parseInt(parts[4]);
+
+            const totalMB = (totalPages * pageSize) / (1024 * 1024);
+            const availableMB = (availablePages * pageSize) / (1024 * 1024);
+
+            buzzer.update(s => ({
+                ...s,
+                version: parts[1],
+                protocol: parseInt(parts[0]),
+                storage: { ...s.storage, total: totalMB, available: availableMB }
+            }));
+        }
+    }
+}
+
+// WICHTIG: Auch hier "export"
+export async function refreshFileList(port: SerialPort) {
+    if (!port) return;
+    let audioSize = 0;
+    let sysSize = 0;
+    const audioFiles: {name: string, size: string, crc32: number, isSystem: boolean}[] = [];
+
+    async function scanDir(path: string) {
+        const lines = await sendCommand(port, `ls ${path}`);
+        for (const line of lines) {
+            const parts = line.split(',');
+            if (parts.length < 3) continue;
+            const [type, sizeStr, name] = parts;
+            const size = parseInt(sizeStr);
+            const fullPath = `${path}/${name}`;
+
+            if (type === 'D') {
+                await scanDir(fullPath);
+            } else if (type === 'F') {
+                if (path.startsWith('/lfs/a')) {
+                    audioSize += size;
+                    console.log("Audio-Datei gefunden:", name);
+                    audioFiles.push({ name, size: (size / 1024).toFixed(1) + " KB", crc32: 0, isSystem: false });
+                } else if (path.startsWith('/lfs/sys')) {
+                    sysSize += size;
+                }
+            }
+        }
+    }
+
+    await scanDir('/lfs');
+
+    buzzer.update(s => {
+        const bytesToMB = 1024 * 1024;
+        const usedMB = s.storage.total - s.storage.available;
+        const audioMB = audioSize / bytesToMB;
+        const sysMB = sysSize / bytesToMB;
+        const unknownMB = usedMB - audioMB - sysMB;
+
+        return {
+            ...s,
+            files: audioFiles,
+            storage: { ...s.storage, usedAudio: audioMB, usedSys: sysMB, unknown: unknownMB > 0 ? unknownMB : 0 }
+        };
+    });
+}
+
+export function setActivePort(port: SerialPort) {
+    activePort = port;
+}
+
+export async function playFile(filename: string) {
+    if (!activePort) {
+        console.warn("Kein aktiver Port zum Abspielen der Datei.");   
+        return;
+    }
+    console.log(`Starte Wiedergabe: ${filename}`);
+    // Kommando: play /lfs/a/filename
+    await sendCommand(activePort, `play /lfs/a/${filename}`);
+}
+
+export async function deleteFile(filename: string) {
+    if (!activePort || !confirm(`Datei ${filename} wirklich löschen?`)) return;
+    
+    // Kommando: rm /lfs/a/filename
+    await sendCommand(activePort, `rm /lfs/a/${filename}`);
+    
+    // Liste nach dem Löschen aktualisieren
+    await refreshFileList(activePort);
+}
\ No newline at end of file
diff --git a/webpage/src/lib/buzzerStore.ts b/webpage/src/lib/buzzerStore.ts
new file mode 100644
index 0000000..9e54139
--- /dev/null
+++ b/webpage/src/lib/buzzerStore.ts
@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+
+export const buzzer = writable({
+  connected: false,
+  version: 'v0.0.0',
+  protocol: 0,
+  build: 'unknown',
+  storage: {
+    total: 8.0,      // 8 MB Flash laut Spezifikation
+    unknown: 8.0,
+    available: 0.0,
+    usedSys: 0.0,
+    usedAudio: 0.0
+  },
+  files: [] as {name: string, size: string, crc32: number, isSystem: boolean}[]
+});
\ No newline at end of file
diff --git a/webpage/src/pages/index.astro b/webpage/src/pages/index.astro
index e28c8c9..d8b4645 100644
--- a/webpage/src/pages/index.astro
+++ b/webpage/src/pages/index.astro
@@ -1,73 +1,95 @@
 ---
 import "../styles/global.css";
-import DiskUsage from '../components/DiskUsage.astro';
-import FileRow from '../components/FileRow.astro';
+import { Icon } from "astro-icon/components";
+import DiskUsage from "../components/DiskUsage.svelte";
+import FileRow from "../components/FileRow.astro";
+import StatusModal from "../components/StatusModal.astro";
+import ConnectButton from "../components/ConnectButton.svelte";
+import SerialWarning from "../components/SerialWarning.svelte";
+import FileStorage from "../components/FileStorage.svelte";
+import DeviceInfo from "../components/DeviceInfo.svelte";
 ---
 
 <html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <title>Buzzer Dashboard v2</title>
-  </head>
-  <body class="bg-slate-900 selection:bg-blue-500/30">
-    <div class="min-h-screen max-w-[1600px] min-w-[1024px] mx-auto text-slate-100 flex flex-col font-sans">
-      
-      <header class="h-16 border-b border-slate-700 bg-slate-800 flex items-center justify-between px-8 shrink-0 shadow-lg">
-        <div class="flex items-center gap-4">
-          <div class="h-3 w-3 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981] animate-pulse"></div>
-          <h1 class="font-bold tracking-tighter text-xl italic">EDI_BUZZER <span class="text-slate-600 not-italic text-xs font-mono ml-2">PROT_V2</span></h1>
-        </div>
-        
-        <DiskUsage />
+	<head>
+		<meta charset="utf-8" />
+		<title>Buzzer Dashboard v2</title>
+	</head>
+	<body class="bg-slate-900 selection:bg-blue-500/30">
+		<SerialWarning client:load />
+		<StatusModal visible={false} />
 
-        <button class="px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-black rounded-full transition-all shadow-lg hover:shadow-emerald-900/40 active:scale-95 uppercase tracking-widest">
-          Connect
-        </button>
-      </header>
+		<div class="min-h-screen max-w-[1600px] min-w-[1024px] mx-auto text-slate-100 flex flex-col font-sans">
+			<header
+				class="h-16 border-b border-slate-700 bg-slate-800 grid grid-cols-3 items-center px-8 shrink-0 shadow-lg">
+				<div class="flex items-center gap-4">
+					<div class="h-3 w-3 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981] animate-pulse"></div>
+					<h1 class="font-bold tracking-tighter text-xl italic text-white uppercase">
+						EDIs_BUZZER <span class="text-slate-600 not-italic text-xs font-mono ml-2">PROT_V2</span>
+					</h1>
+				</div>
 
-      <main class="flex-1 flex overflow-hidden p-6 gap-6 bg-gradient-to-b from-slate-900 to-slate-950">
-        
-        <section class="flex-1 flex flex-col gap-6">
-          <div class="h-48 bg-slate-800/30 border-2 border-dashed border-slate-700 rounded-[2rem] flex flex-col items-center justify-center group hover:border-blue-500/40 transition-all cursor-pointer">
-            <span class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em] group-hover:text-blue-400 transition-colors">Drop PC Files</span>
-          </div>
-          <div class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl">
-            <div class="p-5 border-b border-slate-700 bg-slate-800/80 font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">Local Queue</div>
-            <div class="flex-1 overflow-y-auto custom-scrollbar">
-              <FileRow name="Intro_Song.mp3" size="1.2 MB" />
-              <FileRow name="Buzzer_Hit.wav" size="450 KB" selected={true} />
-            </div>
-          </div>
-        </section>
+				<div class="justify-self-center">
+					<DiskUsage client:load />
+				</div>
 
-        <section class="w-16 flex flex-col items-center justify-center gap-8">
-            <button class="w-14 h-14 bg-blue-600 rounded-2xl shadow-xl hover:bg-blue-500 active:scale-90 transition-all flex items-center justify-center text-2xl">⮕</button>
-            <button class="w-14 h-14 bg-slate-700 rounded-2xl shadow-xl hover:bg-slate-600 active:scale-90 transition-all flex items-center justify-center text-2xl">⬅</button>
-        </section>
+				<div class="justify-self-end">
+					<ConnectButton client:load />
+				</div>
+			</header>
 
-        <section class="flex-1 flex flex-col gap-6">
-          <div class="h-48 bg-indigo-950/20 border border-indigo-500/20 rounded-[2rem] p-6">
-            <h3 class="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-4">Device Info</h3>
-            <div class="text-[11px] font-mono text-slate-400 space-y-1">
-              <p>Firmware: <span class="text-indigo-300">v0.1.12</span></p>
-              <p>Build: <span class="text-indigo-300">NCS 3.2.1</span></p>
-            </div>
-          </div>
-          <div class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl">
-            <div class="p-5 border-b border-slate-700 bg-slate-800/80 font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">Flash Storage /lfs/a</div>
-            <div class="flex-1 overflow-y-auto custom-scrollbar">
-              <FileRow name="confirm.bin" size="12 KB" isSystem={true} />
-              <FileRow name="test_sound.bin" size="142 KB" />
-            </div>
-          </div>
-        </section>
+			<main class="flex-1 flex overflow-hidden p-6 gap-6 bg-gradient-to-b from-slate-900 to-slate-950">
+				<section class="flex-1 flex flex-col gap-6">
+					<div
+						class="h-48 bg-slate-800/30 border-2 border-dashed border-slate-700 rounded-[2rem] flex flex-col items-center justify-center group hover:border-blue-500/40 transition-all cursor-pointer">
+						<Icon
+							name="ph:cloud-arrow-up-fill"
+							class="text-4xl text-slate-700 group-hover:text-blue-500 mb-2 transition-colors"
+						/>
+						<span
+							class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em] group-hover:text-blue-400 transition-colors"
+							>Drop PC Files</span
+						>
+					</div>
+					<div
+						class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl">
+						<div
+							class="p-5 border-b border-slate-700 bg-slate-800/80 font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">
+							Local Queue
+						</div>
+						<div class="flex-1 overflow-y-auto custom-scrollbar">
+							<FileRow name="Intro_Song.mp3" size="1.2 MB" />
+							<FileRow name="Buzzer_Hit.wav" size="450 KB" selected={true} />
+						</div>
+					</div>
+				</section>
 
-      </main>
+				<section class="flex-1 flex flex-col gap-6 min-h-0">
+					<div
+						class="h-48 bg-indigo-950/20 border border-indigo-500/20 rounded-[2rem] p-6 relative overflow-hidden shrink-0">
+						<div class="absolute top-6 right-6 text-indigo-500 opacity-20">
+							<Icon name="ph:cpu-fill" class="w-12 h-12" />
+						</div>
+						<h3 class="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-4">
+							Device Info
+						</h3>
+						<DeviceInfo client:load />
+					</div>
 
-      <footer class="h-10 bg-black/40 border-t border-slate-800 px-8 flex items-center justify-between font-mono text-[9px] text-emerald-500/50 uppercase tracking-widest">
-        <span>Status: Idle</span>
-        <span class="text-slate-700 italic font-sans">Protocol V2.0 Active</span>
-      </footer>
-    </div>
-  </body>
-</html>
\ No newline at end of file
+					<div class="flex-1 flex flex-col overflow-hidden">
+						<FileStorage client:load />
+					</div>
+				</section>
+			</main>
+
+			<footer
+				class="h-10 bg-black/40 border-t border-slate-800 px-8 flex items-center justify-between font-mono text-[9px] text-emerald-500/50 uppercase tracking-widest">
+				<div class="flex items-center gap-2">
+					<Icon name="ph:terminal-window-fill" class="w-4 h-4" />
+					<span>Status: Idle</span>
+				</div>
+				<span class="text-slate-700 italic font-sans">Protocol V2.0 Active</span>
+			</footer>
+		</div>
+	</body>
+</html>