diff --git a/web/index.html b/web/index.html
deleted file mode 100644
index e49f7c0..0000000
--- a/web/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Numbus Configurator</title>
-    <!-- Tailwind CSS for modern styling -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Alpine.js for lightweight reactivity -->
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <!-- JS-YAML to convert JS objects to YAML strings -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
-    <!-- Material Design Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
-    <link rel="icon" href="./media/favicon.ico" type="image/x-icon">
-</head>
-
-<style>
-    @keyframes pulse-slow {
-        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.2)); }
-        50% { transform: scale(1.03); filter: drop-shadow(0 0 40px rgba(192, 38, 211, 0.4)); } 
-    }
-    .animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
-    .text-shadow-glow { text-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
-</style>
-
-<body class="bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
-  
-  <!-- Welcome screen -->
-  <div class="p-12 justify-center flex flex-col items-center">
-    <img class="w-64 h-64 auto drop-shadow-2xl animate-pulse-slow" src="./media/logo.png" alt="Numbus Logo">
-    <h1 class="p-8 text-center text-6xl font-extrabold tracking-tight">Welcome to <span class="text-sky-400 animate-pulse-slow text-shadow-glow">NUMBUS</span></h1>
-    <p class="text-center text-2xl p-2">Transform your device into a <strong>secure, reliable and private</strong> appliance <br> using the power of open-soure software.</p>
-    <p class="text-center text-2xl p-2 pb-10">You will be <strong>guided</strong> through the configuration process.</p>
-
-    <div class="bg-amber-500/20 border border-amber-500/30 p-4 rounded-xl flex gap-5 text-left items-center max-w-3xl mx-auto">
-      <span class="bg-amber-500 rounded-full p-1 px-2 shrink-0">
-        <i class="mdi mdi-shield-lock text-slate-900 text-2xl"></i>
-      </span>
-      <p class="text-xl text-amber-200/90 italic"><strong>Privacy First:</strong> No data entered here ever leaves your device. <br> This configurator runs entirely locally in your browser and is fully private.
-    </div>
-
-      <span class="animate-pulse-slow drop-shadow-2xl p-12">
-        <a class="text-shadow-glow px-10 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 rounded-full text-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-fuchsia-600/20" href="./pages/preparation.html">Get Started</a>
-      </span>
-  </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/web/pages/index.html b/web/pages/index.html
index e1ae477..e49f7c0 100644
--- a/web/pages/index.html
+++ b/web/pages/index.html
@@ -12,419 +12,38 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
     <!-- Material Design Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
-    <!-- Favicon -->
-    <link rel="icon" href="../media/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="./media/favicon.ico" type="image/x-icon">
 </head>
 
-<body x-data="numbusPreparation()" class="p-4 bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
-
-  <style>
-    [x-cloak] { display: none !important; }
-  </style>
-
-  <script>
-    function numbusPreparation() {
-      return {
-        step: 1,
-        formData: {
-          1: { language: 'French', country: 'France', timeZone: 'Europe/Paris' },
-          2: { deviceType: '' },
-          3: { deploymentMode: '' },
-          4: { replicationHardware: '', replicationStrategy: '', replicationSecrets: '' },
-          5: { liveIp: '', livePassword: '' },
-        },
-        isStepValid() {
-          const currentStepData = this.formData[this.step];
-          if (!currentStepData) return true;
-          return Object.values(currentStepData).every(value => !!value);
-        },
-        goToPrevStep() {
-          if (this.step === 5 && this.formData[3].deploymentMode === 'interactive') {
-            this.step--;
-          }
-          this.step--;
-        },
-        goToNextStep() {
-          if (this.step === 3 && this.formData[3].deploymentMode === 'interactive') {
-            this.step++;
-          }
-          this.step++;
-        },
-        startDiscovery() {
-          console.log("Discovery started with:", JSON.parse(JSON.stringify(this.formData)));
-          // Add your bridge communication logic here
-        }
-      }
+<style>
+    @keyframes pulse-slow {
+        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.2)); }
+        50% { transform: scale(1.03); filter: drop-shadow(0 0 40px rgba(192, 38, 211, 0.4)); } 
     }
-  </script>
+    .animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
+    .text-shadow-glow { text-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
+</style>
 
-  <nav class="bg-[#1e293b] border border-slate-700 rounded-2xl relative">
-    <div class="mx-auto relative flex h-16 items-center justify-between">
-      <div class="absolute inset-y-0 left-0 flex items-center">
-        <a href="https://numbus.eu"><img class="w-auto h-10 pr-5 pl-8" src="../media/logo.png" aria-label="The numbus logo"></a>
-        <a class="font-bold text-2xl tracking-tight bg-gradient-to-r from-sky-400 to-fuchsia-500 bg-clip-text text-transparent uppercase" href="https://numbus.eu">NUMBUS</a>
-      </div>
-      <div class="flex flex-1 items-center justify-center">
-        <h1 class="sm:text-2xl sm:pr-20 lg:pr-0 text-xl text-slate-200 font-bold flex items-center">Step 1 - Preparation</h1>
-      </div>
-      <div class="absolute inset-y-0 right-0 flex items-center my-auto">
-        <button  class="h-auto mdi mdi-menu text-slate-100 text-2xl sm:hidden pr-8" aria-label="Menu with links"></button>
-        <button  class="h-auto mdi mdi-brightness-2 text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="Change theme"></button>
-        <a href="https://gittea.dev/numbus" class="h-auto mdi mdi-source-repository text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="See the source code on Gitea"></a>
-        <a href="https://gittea.dev/numbus"  class="h-auto mdi mdi-text-box-search text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-8" aria-label="See the full documentation"></a>
-      </div>
-    </div>
-  </nav>
+<body class="bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
+  
+  <!-- Welcome screen -->
+  <div class="p-12 justify-center flex flex-col items-center">
+    <img class="w-64 h-64 auto drop-shadow-2xl animate-pulse-slow" src="./media/logo.png" alt="Numbus Logo">
+    <h1 class="p-8 text-center text-6xl font-extrabold tracking-tight">Welcome to <span class="text-sky-400 animate-pulse-slow text-shadow-glow">NUMBUS</span></h1>
+    <p class="text-center text-2xl p-2">Transform your device into a <strong>secure, reliable and private</strong> appliance <br> using the power of open-soure software.</p>
+    <p class="text-center text-2xl p-2 pb-10">You will be <strong>guided</strong> through the configuration process.</p>
 
-  <div class="pt-10 w-full"></div>
-
-  <!-- Main content -->
-
-  <div class="bg-[#1e293b] border border-slate-700 rounded-3xl h-[calc(100vh-10rem)] max-w-[60vw] mx-auto relative">
-
-    <!-- Step 1: Language & Region -->
-    <div x-show="step === 1" x-cloak class="pl-3 pr-3">
-      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Language</h2>
-      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
-      <p class="p-5 text-xl text-slate-200">Set your regional preferences to ensure <b>correct</b> time and language display.</p>
-      <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
-        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
-          <div class="flex items-center gap-2">
-            <label class="text-lg font-semibold text-slate-300">System Language</label>
-            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-              <div 
-              x-show="infoBubbleOpen" 
-              x-transition:enter="transition ease-out duration-150"
-              x-transition:enter-start="opacity-0 scale-90"
-              x-transition:enter-end="opacity-100 scale-100"
-              x-transition:leave="transition ease-in duration-300"
-              x-transition:leave-start="opacity-100 scale-100"
-              x-transition:leave-end="opacity-0 scale-90"
-              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
-                <p class="text-slate-200 text-lg italic">Select the primary language for the operating system and management interfaces.</p>
-              </div>
-            </button>
-          </div>
-          <select x-model="formData[1].language" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none transition-all appearance-none cursor-pointer">
-            <option value="FR">French</option>
-            <option value="EN">English</option>
-            <option value="DE">German</option>
-            <option value="IT">Italian</option>
-            <option value="ES">Spanish</option>
-          </select>
-        </div>
-        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
-          <div class="flex items-center gap-2">
-            <label class="text-lg font-semibold text-slate-300">Country</label>
-            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-              <div 
-              x-show="infoBubbleOpen" 
-              x-transition:enter="transition ease-out duration-150"
-              x-transition:enter-start="opacity-0 scale-90"
-              x-transition:enter-end="opacity-100 scale-100"
-              x-transition:leave="transition ease-in duration-300"
-              x-transition:leave-start="opacity-100 scale-100"
-              x-transition:leave-end="opacity-0 scale-90"
-              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
-                <p class="text-slate-200 text-lg italic">Select the country where you are located to help define the device's locale.</p>
-              </div>
-            </button>
-          </div>
-          <select x-model="formData[1].country" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none appearance-none cursor-pointer">
-            <option value="fr_FR">France</option>
-            <option value="de_DE">Germany</option>
-            <option value="it_IT">Italy</option>
-            <option value="en_GB">United Kingdom</option>
-            <option value="en_US">United States</option>
-          </select>
-        </div>
-        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
-          <div class="flex items-center gap-2">
-            <label class="text-lg font-semibold text-slate-300">Time zone</label>
-            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-              <div
-              x-show="infoBubbleOpen"
-              x-transition:enter="transition ease-out duration-150"
-              x-transition:enter-start="opacity-0 scale-90"
-              x-transition:enter-end="opacity-100 scale-100"
-              x-transition:leave="transition ease-in duration-300"
-              x-transition:leave-start="opacity-100 scale-100"
-              x-transition:leave-end="opacity-0 scale-90"
-              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
-                <p class="text-slate-200 text-lg italic">Select the time zone in which the device is located. <br> Don't know your time zone ? Find it at <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_UTC_offsets" class="text-sky-400 underline font-semibold">Wikipedia</a>.</p>
-              </div>
-            </button>
-          </div>
-          <select x-model="formData[1].timeZone" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none appearance-none cursor-pointer">
-            <option value="Europe/Paris">Europe/Paris</option>
-            <option value="Europe/Berlin">Europe/Berlin</option>
-            <option value="Europe/London">Europe/London</option>
-            <option value="America/New_York">America/New_York</option>
-            <option value="America/Los_Angeles">America/Los_Angeles</option>
-            <option value="UTC">UTC</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <!-- Device Type -->
-    <div x-show="step === 2" x-cloak class="pl-3 pr-3">
-      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Device Type</h2>
-      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
-      <p class="p-5 text-xl text-slate-300">Select the <b>device type</b> for your new Numbus machine that matches <b>your needs</b>.</p>
-      <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
-        <button @click="formData[2].deviceType = 'server'" :class="formData[2].deviceType === 'server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-server-light.svg" alt="Numbus Server icon">
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center gap-2 flex">
-              <span class="font-bold text-2xl">Numbus Server</span>
-              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                <div
-                x-show="infoBubbleOpen"
-                x-transition:enter="transition ease-out duration-150"
-                x-transition:enter-start="opacity-0 scale-90"
-                x-transition:enter-end="opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100 scale-100"
-                x-transition:leave-end="opacity-0 scale-90"
-                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                  <p class="text-slate-300 text-lg italic">A versatile home cloud solution for hosting containers, media, and automated services.</p>
-                </div>
-              </span>
-            </div>
-            <p class="text-sm transition-colors">Your own Cloud at Home.</p>
-          </div>
-        </button>
-        <button @click="formData[2].deviceType = 'backup-server'" :class="formData[2].deviceType === 'backup-server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-backup-server-light.svg" alt="Numbus Backup Server icon">
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center flex gap-2">
-                <span class="font-bold text-2xl mb-1">Numbus Backup Server</span>
-                <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                  <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                  <div
-                  x-show="infoBubbleOpen"
-                  x-transition:enter="transition ease-out duration-150"
-                  x-transition:enter-start="opacity-0 scale-90"
-                  x-transition:enter-end="opacity-100 scale-100"
-                  x-transition:leave="transition ease-in duration-300"
-                  x-transition:leave-start="opacity-100 scale-100"
-                  x-transition:leave-end="opacity-0 scale-90"
-                  x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                    <p class="text-slate-300 text-lg italic">An all-in-one backup solution for all your Numbus devices, with monitoring tools.</p>
-                  </div>
-                </span>
-              </div>
-            <p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
-          </div>
-        </button>
-        <button @click="formData[2].deviceType = 'computer'" :class="formData[2].deviceType === 'computer' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-computer-light.svg" alt="Numbus Computer icon">
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center flex gap-2">
-              <span class="font-bold text-2xl mb-1">Numbus Computer</span>
-              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                <div
-                x-show="infoBubbleOpen"
-                x-transition:enter="transition ease-out duration-150"
-                x-transition:enter-start="opacity-0 scale-90"
-                x-transition:enter-end="opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100 scale-100"
-                x-transition:leave-end="opacity-0 scale-90"
-                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                  <p class="text-slate-300 text-lg italic">A polished workstation powered by leading open-source software.</p>
-                </div>
-              </span>
-            </div>
-            <p class="text-sm transition-colors">A workstation powered by leading open-source software.</p>
-          </div>
-        </button>
-        <button @click="formData[2].deviceType = 'tv'" :class="formData[2].deviceType === 'tv' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-tv-light.svg" alt="Numbus TV icon">
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center flex gap-2">
-              <span class="font-bold text-2xl mb-1">Numbus TV</span>
-              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                <div
-                x-show="infoBubbleOpen"
-                x-transition:enter="transition ease-out duration-150"
-                x-transition:enter-start="opacity-0 scale-90"
-                x-transition:enter-end="opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100 scale-100"
-                x-transition:leave-end="opacity-0 scale-90"
-                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                  <p class="text-slate-300 text-lg italic">A computer -and all its accompanying advantages- but with a slick, familiar TV interface.</p>
-                </div>
-              </span>
-            </div>
-            <p class="text-sm transition-colors">Your TV, your way. No spying on you.</p>
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Deployment Mode -->
-    <div x-show="step === 3" x-cloak class="pl-3 pr-3">
-      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Deployment Mode</h2>
-      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
-      <p class="p-5 text-xl text-slate-300">Select your <b>preferred</b> deployment mode. Non-interactive <b>requires</b> a ready-to-go configuration hosted on a <b>git platform</b>.</p>
-      <div class="pl-5 pr-5 pt-10 grid grid-cols-2 gap-4">
-        <button @click="formData[3].deploymentMode = 'interactive'" :class="formData[3].deploymentMode === 'interactive' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-gesture-tap text-5xl flex-shrink-0"></i>
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center flex gap-2">
-              <span class="font-bold text-2xl mb-1">Interactive</span>
-              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                <div
-                x-show="infoBubbleOpen"
-                x-transition:enter="transition ease-out duration-150"
-                x-transition:enter-start="opacity-0 scale-90"
-                x-transition:enter-end="opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100 scale-100"
-                x-transition:leave-end="opacity-0 scale-90"
-                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                  <p class="text-slate-300 text-lg italic">If this is your first time setting up the Numbus device you chose, follow this option.</p>
-                </div>
-              </span>
-            </div>
-            <p class="text-sm transition-colors">We will guide you through the setup process.</p>
-          </div>
-        </button>
-        <button @click="formData[3].deploymentMode = 'non-interactive'" :class="formData[3].deploymentMode === 'non-interactive' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-cog-clockwise text-5xl flex-shrink-0"></i>
-          <div x-data="{ infoBubbleOpen: false }">
-            <div class="items-center flex gap-2">
-              <span class="font-bold text-2xl mb-1">Non-interactive</span>
-              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
-                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
-                <div
-                x-show="infoBubbleOpen"
-                x-transition:enter="transition ease-out duration-150"
-                x-transition:enter-start="opacity-0 scale-90"
-                x-transition:enter-end="opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-300"
-                x-transition:leave-start="opacity-100 scale-100"
-                x-transition:leave-end="opacity-0 scale-90"
-                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
-                  <p class="text-slate-300 text-lg italic">This option is used for mass devices deployments. It requires a first run in interactive mode.</p>
-                </div>
-              </span>
-            </div>
-            <p class="text-sm transition-colors">You already have a ready-to-go configuration.</p>
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Replication Mode -->
-    <div class="max-h-[calc(100vh-17rem)] overflow-y-auto" x-show="step === 4" x-cloak class="pl-3 pr-3">
-      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Replication Mode</h2>
-      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
-      <p class="p-5 text-xl text-slate-300">Select your <b>preferred</b> replication mode. It compares the current deployment to the old one.</p>
-      <h3 class="text-xl font-semibold text-slate-300 text-center pb-3">Hardware</h3>
-      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
-        <button @click="formData[4].replicationHardware = 'exact_same'" :class="formData[4].replicationHardware === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-check-network text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">Same hardware</span>
-            <p class="text-sm transition-colors">The hardware listed in the configuration is exactly the same as the hardware on the machine you want to deploy.</p>
-          </div>
-        </button>
-        <button @click="formData[4].replicationHardware = 'different'" :class="formData[4].replicationHardware === 'different' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-close-network text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">Different hardware</span>
-            <p class="text-sm transition-colors">The hardware listed in the configuration is different compared to the hardware on the machine you want to deploy.</p>
-          </div>
-        </button>
-      </div>
-      <h3 class="text-xl font-semibold text-center text-slate-300 pb-3 pt-5">Strategy</h3>
-      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
-        <button @click="formData[4].replicationStrategy = 'exact_same'" :class="formData[4].replicationStrategy === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-file-check text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">Same configuration</span>
-            <p class="text-sm transition-colors">Re-deploy the exact same configuration.</p>
-          </div>
-        </button>
-        <button @click="formData[4].replicationStrategy = 'with_tweaks'" :class="formData[4].replicationStrategy=== 'with_tweaks' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-file-cog text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">With tweaks</span>
-            <p class="text-sm transition-colors">Use the configuration as a base and tweak the desired settings.</p>
-          </div>
-        </button>
-      </div>
-      <h3 class="text-xl font-semibold text-center text-slate-300 pt-5 pb-3">Secrets</h3>
-      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
-        <button @click="formData[4].replicationSecrets = 'exact_same'" :class="formData[4].replicationSecrets === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-key-star text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">Same secrets</span>
-            <p class="text-sm transition-colors">Re-use the secrets in the repository.</p>
-          </div>
-        </button>
-        <button @click="formData[4].replicationSecrets = 'regenerate'" :class="formData[4].replicationSecrets === 'regenerate' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
-          <i class="mdi mdi-key-remove text-5xl flex-shrink-0"></i>
-          <div>
-            <span class="font-bold text-2xl mb-1">New secrets</span>
-            <p class="text-sm transition-colors">Provide and auto-generate new secrets.</p>
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Live Setup -->
-    <div x-show="step === 5" x-cloak class="pl-3 pr-3">
-      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Live Setup</h2>
-      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
-      <p class="p-5 pb-10 text-xl text-slate-300">Provide the <b>necessary information</b> to connect to the device. It needs to be in a <b>NixOS live environment</b>.</p>
-      <div class="flex flex-col items-center justify-center">
-        <div class="p-6 space-y-2">
-            <span class="text-base font-bold text-center text-slate-300 uppercase">Live Target IP Address</span>
-            <input x-model="formData[5].liveIp" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="text" placeholder="192.168.1.100">
-        </div>
-        <div class="p-6 space-y-2">
-            <span class="text-base font-bold text-center text-slate-300 uppercase">Temporary Password</span>
-            <input x-model="formData[5].livePassword" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="password" placeholder="••••••••">
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="bg-[#1e293b] border-t bottom-0 w-full rounded-3xl absolute border-slate-700 p-6 flex items-center justify-between">
-      <div x-show="step === 1" class="px-8 py-3"></div>
-      <button @click="goToPrevStep()" x-show="step > 1" x-cloak class="px-8 py-3 text-slate-400 font-bold rounded-xl hover:text-white transition-colors duration-200">Back</button>
-
-      <button @click="goToNextStep()" 
-              x-show="step != 5" 
-              :disabled="!isStepValid()"
-              class="px-10 py-3 text-white font-bold rounded-xl scale-100 transition duration-200 ease-in bg-gradient-to-r from-fuchsia-500 via-fuchsia-600 to-fuchsia-700 hover:scale-105 hover:bg-gradient-to-br shadow-lg shadow-fuchsia-500/30 dark:shadow-lg dark:shadow-fuchsia-800/80 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">Continue</button>
-
-      <button 
-      @click="startDiscovery()" 
-      x-show="step === 5"
-      x-cloak
-      :disabled="!isStepValid()"
-      class="px-10 py-3 text-white font-bold rounded-xl scale-100 transition duration-200 ease-in bg-gradient-to-r from-fuchsia-500 via-fuchsia-600 to-fuchsia-700 hover:scale-105 hover:bg-gradient-to-br shadow-lg shadow-fuchsia-500/30 dark:shadow-lg dark:shadow-fuchsia-800/80 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">Start Discovery
-      <svg aria-hidden="true" class="w-4 h-4 text-neutral-tertiary animate-spin fill-brand me-2" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-      </svg>
-    </button>
+    <div class="bg-amber-500/20 border border-amber-500/30 p-4 rounded-xl flex gap-5 text-left items-center max-w-3xl mx-auto">
+      <span class="bg-amber-500 rounded-full p-1 px-2 shrink-0">
+        <i class="mdi mdi-shield-lock text-slate-900 text-2xl"></i>
+      </span>
+      <p class="text-xl text-amber-200/90 italic"><strong>Privacy First:</strong> No data entered here ever leaves your device. <br> This configurator runs entirely locally in your browser and is fully private.
     </div>
 
+      <span class="animate-pulse-slow drop-shadow-2xl p-12">
+        <a class="text-shadow-glow px-10 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 rounded-full text-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-fuchsia-600/20" href="./pages/preparation.html">Get Started</a>
+      </span>
   </div>
 
 </body>
-</html> 
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/web/pages/preparation.html b/web/pages/preparation.html
new file mode 100644
index 0000000..e1ae477
--- /dev/null
+++ b/web/pages/preparation.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Numbus Configurator</title>
+    <!-- Tailwind CSS for modern styling -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Alpine.js for lightweight reactivity -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <!-- JS-YAML to convert JS objects to YAML strings -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
+    <!-- Material Design Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
+    <!-- Favicon -->
+    <link rel="icon" href="../media/favicon.ico" type="image/x-icon">
+</head>
+
+<body x-data="numbusPreparation()" class="p-4 bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
+
+  <style>
+    [x-cloak] { display: none !important; }
+  </style>
+
+  <script>
+    function numbusPreparation() {
+      return {
+        step: 1,
+        formData: {
+          1: { language: 'French', country: 'France', timeZone: 'Europe/Paris' },
+          2: { deviceType: '' },
+          3: { deploymentMode: '' },
+          4: { replicationHardware: '', replicationStrategy: '', replicationSecrets: '' },
+          5: { liveIp: '', livePassword: '' },
+        },
+        isStepValid() {
+          const currentStepData = this.formData[this.step];
+          if (!currentStepData) return true;
+          return Object.values(currentStepData).every(value => !!value);
+        },
+        goToPrevStep() {
+          if (this.step === 5 && this.formData[3].deploymentMode === 'interactive') {
+            this.step--;
+          }
+          this.step--;
+        },
+        goToNextStep() {
+          if (this.step === 3 && this.formData[3].deploymentMode === 'interactive') {
+            this.step++;
+          }
+          this.step++;
+        },
+        startDiscovery() {
+          console.log("Discovery started with:", JSON.parse(JSON.stringify(this.formData)));
+          // Add your bridge communication logic here
+        }
+      }
+    }
+  </script>
+
+  <nav class="bg-[#1e293b] border border-slate-700 rounded-2xl relative">
+    <div class="mx-auto relative flex h-16 items-center justify-between">
+      <div class="absolute inset-y-0 left-0 flex items-center">
+        <a href="https://numbus.eu"><img class="w-auto h-10 pr-5 pl-8" src="../media/logo.png" aria-label="The numbus logo"></a>
+        <a class="font-bold text-2xl tracking-tight bg-gradient-to-r from-sky-400 to-fuchsia-500 bg-clip-text text-transparent uppercase" href="https://numbus.eu">NUMBUS</a>
+      </div>
+      <div class="flex flex-1 items-center justify-center">
+        <h1 class="sm:text-2xl sm:pr-20 lg:pr-0 text-xl text-slate-200 font-bold flex items-center">Step 1 - Preparation</h1>
+      </div>
+      <div class="absolute inset-y-0 right-0 flex items-center my-auto">
+        <button  class="h-auto mdi mdi-menu text-slate-100 text-2xl sm:hidden pr-8" aria-label="Menu with links"></button>
+        <button  class="h-auto mdi mdi-brightness-2 text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="Change theme"></button>
+        <a href="https://gittea.dev/numbus" class="h-auto mdi mdi-source-repository text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="See the source code on Gitea"></a>
+        <a href="https://gittea.dev/numbus"  class="h-auto mdi mdi-text-box-search text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-8" aria-label="See the full documentation"></a>
+      </div>
+    </div>
+  </nav>
+
+  <div class="pt-10 w-full"></div>
+
+  <!-- Main content -->
+
+  <div class="bg-[#1e293b] border border-slate-700 rounded-3xl h-[calc(100vh-10rem)] max-w-[60vw] mx-auto relative">
+
+    <!-- Step 1: Language & Region -->
+    <div x-show="step === 1" x-cloak class="pl-3 pr-3">
+      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Language</h2>
+      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
+      <p class="p-5 text-xl text-slate-200">Set your regional preferences to ensure <b>correct</b> time and language display.</p>
+      <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
+        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
+          <div class="flex items-center gap-2">
+            <label class="text-lg font-semibold text-slate-300">System Language</label>
+            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+              <div 
+              x-show="infoBubbleOpen" 
+              x-transition:enter="transition ease-out duration-150"
+              x-transition:enter-start="opacity-0 scale-90"
+              x-transition:enter-end="opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-300"
+              x-transition:leave-start="opacity-100 scale-100"
+              x-transition:leave-end="opacity-0 scale-90"
+              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
+                <p class="text-slate-200 text-lg italic">Select the primary language for the operating system and management interfaces.</p>
+              </div>
+            </button>
+          </div>
+          <select x-model="formData[1].language" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none transition-all appearance-none cursor-pointer">
+            <option value="FR">French</option>
+            <option value="EN">English</option>
+            <option value="DE">German</option>
+            <option value="IT">Italian</option>
+            <option value="ES">Spanish</option>
+          </select>
+        </div>
+        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
+          <div class="flex items-center gap-2">
+            <label class="text-lg font-semibold text-slate-300">Country</label>
+            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+              <div 
+              x-show="infoBubbleOpen" 
+              x-transition:enter="transition ease-out duration-150"
+              x-transition:enter-start="opacity-0 scale-90"
+              x-transition:enter-end="opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-300"
+              x-transition:leave-start="opacity-100 scale-100"
+              x-transition:leave-end="opacity-0 scale-90"
+              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
+                <p class="text-slate-200 text-lg italic">Select the country where you are located to help define the device's locale.</p>
+              </div>
+            </button>
+          </div>
+          <select x-model="formData[1].country" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none appearance-none cursor-pointer">
+            <option value="fr_FR">France</option>
+            <option value="de_DE">Germany</option>
+            <option value="it_IT">Italy</option>
+            <option value="en_GB">United Kingdom</option>
+            <option value="en_US">United States</option>
+          </select>
+        </div>
+        <div class="space-y-2 relative" x-data="{ infoBubbleOpen: false }">
+          <div class="flex items-center gap-2">
+            <label class="text-lg font-semibold text-slate-300">Time zone</label>
+            <button class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+              <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+              <div
+              x-show="infoBubbleOpen"
+              x-transition:enter="transition ease-out duration-150"
+              x-transition:enter-start="opacity-0 scale-90"
+              x-transition:enter-end="opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-300"
+              x-transition:leave-start="opacity-100 scale-100"
+              x-transition:leave-end="opacity-0 scale-90"
+              x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl shadow-slate-900 z-50">
+                <p class="text-slate-200 text-lg italic">Select the time zone in which the device is located. <br> Don't know your time zone ? Find it at <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_UTC_offsets" class="text-sky-400 underline font-semibold">Wikipedia</a>.</p>
+              </div>
+            </button>
+          </div>
+          <select x-model="formData[1].timeZone" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none appearance-none cursor-pointer">
+            <option value="Europe/Paris">Europe/Paris</option>
+            <option value="Europe/Berlin">Europe/Berlin</option>
+            <option value="Europe/London">Europe/London</option>
+            <option value="America/New_York">America/New_York</option>
+            <option value="America/Los_Angeles">America/Los_Angeles</option>
+            <option value="UTC">UTC</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Device Type -->
+    <div x-show="step === 2" x-cloak class="pl-3 pr-3">
+      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Device Type</h2>
+      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
+      <p class="p-5 text-xl text-slate-300">Select the <b>device type</b> for your new Numbus machine that matches <b>your needs</b>.</p>
+      <div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
+        <button @click="formData[2].deviceType = 'server'" :class="formData[2].deviceType === 'server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-server-light.svg" alt="Numbus Server icon">
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center gap-2 flex">
+              <span class="font-bold text-2xl">Numbus Server</span>
+              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                <div
+                x-show="infoBubbleOpen"
+                x-transition:enter="transition ease-out duration-150"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
+                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                  <p class="text-slate-300 text-lg italic">A versatile home cloud solution for hosting containers, media, and automated services.</p>
+                </div>
+              </span>
+            </div>
+            <p class="text-sm transition-colors">Your own Cloud at Home.</p>
+          </div>
+        </button>
+        <button @click="formData[2].deviceType = 'backup-server'" :class="formData[2].deviceType === 'backup-server' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-backup-server-light.svg" alt="Numbus Backup Server icon">
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center flex gap-2">
+                <span class="font-bold text-2xl mb-1">Numbus Backup Server</span>
+                <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                  <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                  <div
+                  x-show="infoBubbleOpen"
+                  x-transition:enter="transition ease-out duration-150"
+                  x-transition:enter-start="opacity-0 scale-90"
+                  x-transition:enter-end="opacity-100 scale-100"
+                  x-transition:leave="transition ease-in duration-300"
+                  x-transition:leave-start="opacity-100 scale-100"
+                  x-transition:leave-end="opacity-0 scale-90"
+                  x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                    <p class="text-slate-300 text-lg italic">An all-in-one backup solution for all your Numbus devices, with monitoring tools.</p>
+                  </div>
+                </span>
+              </div>
+            <p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
+          </div>
+        </button>
+        <button @click="formData[2].deviceType = 'computer'" :class="formData[2].deviceType === 'computer' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-computer-light.svg" alt="Numbus Computer icon">
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center flex gap-2">
+              <span class="font-bold text-2xl mb-1">Numbus Computer</span>
+              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                <div
+                x-show="infoBubbleOpen"
+                x-transition:enter="transition ease-out duration-150"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
+                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                  <p class="text-slate-300 text-lg italic">A polished workstation powered by leading open-source software.</p>
+                </div>
+              </span>
+            </div>
+            <p class="text-sm transition-colors">A workstation powered by leading open-source software.</p>
+          </div>
+        </button>
+        <button @click="formData[2].deviceType = 'tv'" :class="formData[2].deviceType === 'tv' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-tv-light.svg" alt="Numbus TV icon">
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center flex gap-2">
+              <span class="font-bold text-2xl mb-1">Numbus TV</span>
+              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                <div
+                x-show="infoBubbleOpen"
+                x-transition:enter="transition ease-out duration-150"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
+                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                  <p class="text-slate-300 text-lg italic">A computer -and all its accompanying advantages- but with a slick, familiar TV interface.</p>
+                </div>
+              </span>
+            </div>
+            <p class="text-sm transition-colors">Your TV, your way. No spying on you.</p>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Deployment Mode -->
+    <div x-show="step === 3" x-cloak class="pl-3 pr-3">
+      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Deployment Mode</h2>
+      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
+      <p class="p-5 text-xl text-slate-300">Select your <b>preferred</b> deployment mode. Non-interactive <b>requires</b> a ready-to-go configuration hosted on a <b>git platform</b>.</p>
+      <div class="pl-5 pr-5 pt-10 grid grid-cols-2 gap-4">
+        <button @click="formData[3].deploymentMode = 'interactive'" :class="formData[3].deploymentMode === 'interactive' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-gesture-tap text-5xl flex-shrink-0"></i>
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center flex gap-2">
+              <span class="font-bold text-2xl mb-1">Interactive</span>
+              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                <div
+                x-show="infoBubbleOpen"
+                x-transition:enter="transition ease-out duration-150"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
+                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                  <p class="text-slate-300 text-lg italic">If this is your first time setting up the Numbus device you chose, follow this option.</p>
+                </div>
+              </span>
+            </div>
+            <p class="text-sm transition-colors">We will guide you through the setup process.</p>
+          </div>
+        </button>
+        <button @click="formData[3].deploymentMode = 'non-interactive'" :class="formData[3].deploymentMode === 'non-interactive' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-cog-clockwise text-5xl flex-shrink-0"></i>
+          <div x-data="{ infoBubbleOpen: false }">
+            <div class="items-center flex gap-2">
+              <span class="font-bold text-2xl mb-1">Non-interactive</span>
+              <span class="relative" @mouseenter="infoBubbleOpen = true" @mouseleave="infoBubbleOpen = false">
+                <i class="mdi mdi-information text-lg text-fuchsia-600 cursor-help transition-colors duration-300 hover:text-fuchsia-500"></i>
+                <div
+                x-show="infoBubbleOpen"
+                x-transition:enter="transition ease-out duration-150"
+                x-transition:enter-start="opacity-0 scale-90"
+                x-transition:enter-end="opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100 scale-100"
+                x-transition:leave-end="opacity-0 scale-90"
+                x-cloak class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-80 p-5 bg-slate-800 rounded-xl border border-slate-600 shadow-2xl z-50 text-sm leading-relaxed">
+                  <p class="text-slate-300 text-lg italic">This option is used for mass devices deployments. It requires a first run in interactive mode.</p>
+                </div>
+              </span>
+            </div>
+            <p class="text-sm transition-colors">You already have a ready-to-go configuration.</p>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Replication Mode -->
+    <div class="max-h-[calc(100vh-17rem)] overflow-y-auto" x-show="step === 4" x-cloak class="pl-3 pr-3">
+      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Replication Mode</h2>
+      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
+      <p class="p-5 text-xl text-slate-300">Select your <b>preferred</b> replication mode. It compares the current deployment to the old one.</p>
+      <h3 class="text-xl font-semibold text-slate-300 text-center pb-3">Hardware</h3>
+      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
+        <button @click="formData[4].replicationHardware = 'exact_same'" :class="formData[4].replicationHardware === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-check-network text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">Same hardware</span>
+            <p class="text-sm transition-colors">The hardware listed in the configuration is exactly the same as the hardware on the machine you want to deploy.</p>
+          </div>
+        </button>
+        <button @click="formData[4].replicationHardware = 'different'" :class="formData[4].replicationHardware === 'different' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-close-network text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">Different hardware</span>
+            <p class="text-sm transition-colors">The hardware listed in the configuration is different compared to the hardware on the machine you want to deploy.</p>
+          </div>
+        </button>
+      </div>
+      <h3 class="text-xl font-semibold text-center text-slate-300 pb-3 pt-5">Strategy</h3>
+      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
+        <button @click="formData[4].replicationStrategy = 'exact_same'" :class="formData[4].replicationStrategy === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-file-check text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">Same configuration</span>
+            <p class="text-sm transition-colors">Re-deploy the exact same configuration.</p>
+          </div>
+        </button>
+        <button @click="formData[4].replicationStrategy = 'with_tweaks'" :class="formData[4].replicationStrategy=== 'with_tweaks' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-file-cog text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">With tweaks</span>
+            <p class="text-sm transition-colors">Use the configuration as a base and tweak the desired settings.</p>
+          </div>
+        </button>
+      </div>
+      <h3 class="text-xl font-semibold text-center text-slate-300 pt-5 pb-3">Secrets</h3>
+      <div class="pl-5 pr-5 grid grid-cols-2 gap-4">
+        <button @click="formData[4].replicationSecrets = 'exact_same'" :class="formData[4].replicationSecrets === 'exact_same' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-key-star text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">Same secrets</span>
+            <p class="text-sm transition-colors">Re-use the secrets in the repository.</p>
+          </div>
+        </button>
+        <button @click="formData[4].replicationSecrets = 'regenerate'" :class="formData[4].replicationSecrets === 'regenerate' ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
+          <i class="mdi mdi-key-remove text-5xl flex-shrink-0"></i>
+          <div>
+            <span class="font-bold text-2xl mb-1">New secrets</span>
+            <p class="text-sm transition-colors">Provide and auto-generate new secrets.</p>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Live Setup -->
+    <div x-show="step === 5" x-cloak class="pl-3 pr-3">
+      <h2 class="p-5 pt-6 text-4xl font-bold text-sky-400">Live Setup</h2>
+      <div class="p-0.5 bg-slate-700 rounded-3xl w-[97%] mx-auto"></div>
+      <p class="p-5 pb-10 text-xl text-slate-300">Provide the <b>necessary information</b> to connect to the device. It needs to be in a <b>NixOS live environment</b>.</p>
+      <div class="flex flex-col items-center justify-center">
+        <div class="p-6 space-y-2">
+            <span class="text-base font-bold text-center text-slate-300 uppercase">Live Target IP Address</span>
+            <input x-model="formData[5].liveIp" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="text" placeholder="192.168.1.100">
+        </div>
+        <div class="p-6 space-y-2">
+            <span class="text-base font-bold text-center text-slate-300 uppercase">Temporary Password</span>
+            <input x-model="formData[5].livePassword" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="password" placeholder="••••••••">
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="bg-[#1e293b] border-t bottom-0 w-full rounded-3xl absolute border-slate-700 p-6 flex items-center justify-between">
+      <div x-show="step === 1" class="px-8 py-3"></div>
+      <button @click="goToPrevStep()" x-show="step > 1" x-cloak class="px-8 py-3 text-slate-400 font-bold rounded-xl hover:text-white transition-colors duration-200">Back</button>
+
+      <button @click="goToNextStep()" 
+              x-show="step != 5" 
+              :disabled="!isStepValid()"
+              class="px-10 py-3 text-white font-bold rounded-xl scale-100 transition duration-200 ease-in bg-gradient-to-r from-fuchsia-500 via-fuchsia-600 to-fuchsia-700 hover:scale-105 hover:bg-gradient-to-br shadow-lg shadow-fuchsia-500/30 dark:shadow-lg dark:shadow-fuchsia-800/80 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">Continue</button>
+
+      <button 
+      @click="startDiscovery()" 
+      x-show="step === 5"
+      x-cloak
+      :disabled="!isStepValid()"
+      class="px-10 py-3 text-white font-bold rounded-xl scale-100 transition duration-200 ease-in bg-gradient-to-r from-fuchsia-500 via-fuchsia-600 to-fuchsia-700 hover:scale-105 hover:bg-gradient-to-br shadow-lg shadow-fuchsia-500/30 dark:shadow-lg dark:shadow-fuchsia-800/80 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">Start Discovery
+      <svg aria-hidden="true" class="w-4 h-4 text-neutral-tertiary animate-spin fill-brand me-2" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+      </svg>
+    </button>
+    </div>
+
+  </div>
+
+</body>
+</html> 
\ No newline at end of file
