diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e099a71..a3ee1d9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -83,7 +83,7 @@ jobs:
       - name: Setup
         run: |
           pip install frappe-bench
-          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" --frappe-branch version-15 ~/frappe-bench
           mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
           mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
 
diff --git a/nano_press/templates/__base.html b/nano_press/templates/__base.html
deleted file mode 100644
index 8dd0f3d..0000000
--- a/nano_press/templates/__base.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block page_title %}{% endblock %}</title>
-    {% block head %}{% endblock %}
-</head>
-<body class="{% block body_class %}{% endblock %}">
-    {% block page_content %}{% endblock %}
-    {% block script %}{% endblock %}
-</body>
-</html>
diff --git a/nano_press/templates/components/core/apps.html b/nano_press/templates/components/core/apps.html
index 7ec1d1f..bb9db7d 100644
--- a/nano_press/templates/components/core/apps.html
+++ b/nano_press/templates/components/core/apps.html
@@ -4,105 +4,198 @@ <h2 class="text-xl font-semibold mb-6 text-gray-900">Select Apps</h2>
     <div class="mb-6">
         <label class="block text-sm font-medium mb-2 text-gray-900">Frappe Version</label>
         <div class="flex gap-2">
-            <template x-for="version in frappeVersionOptions" :key="version">
-                <button @click="selectFrappeVersion(version)"
-                    :class="localFrappeVersion === version
+            <template x-for="ver in frappeVersionOptions" :key="ver.scrubbed_version">
+                <button @click="selectFrappeVersion(ver.scrubbed_version)" :class="localFrappeVersion === ver.scrubbed_version
                         ? 'bg-gray-900 text-white border-gray-900'
                         : 'bg-white text-gray-900 border-gray-300 hover:border-gray-900'"
                     class="flex-1 px-4 py-2.5 border rounded-md cursor-pointer transition-all duration-200 font-medium text-sm"
-                    x-text="version">
+                    x-text="ver.version">
                 </button>
             </template>
         </div>
     </div>
 
-
     <div class="mb-6">
         <label class="block text-sm font-medium mb-2 text-gray-900">Apps</label>
-        <div class="grid grid-cols-2 gap-2 mb-4">
-            <template x-for="app in availableApps" :key="app.name">
+
+        <h3 class="text-sm font-semibold mb-3 text-gray-900">Frappe Apps</h3>
+        <div class="grid gap-2 mb-4" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
+            <template x-for="app in frappeApps" :key="app.name">
                 <button @click="toggleApp(app.name)" :class="localSelectedApps.includes(app.name.toLowerCase())
-                    ? 'bg-gray-900 text-white border-gray-900'
-                    : 'bg-white text-gray-900 border-gray-300'"
-                    class="p-3 border rounded-md text-left cursor-pointer transition-all duration-200 hover:border-gray-900">
-                    <div class="font-medium mb-1 text-sm" x-text="app.name"></div>
-                    <div class="text-xs text-gray-400" x-text="app.branch"></div>
+                        ? 'bg-gray-100 text-gray-900 border-gray-900'
+                        : 'bg-white text-gray-900 border-gray-300 hover:border-gray-900'"
+                    class="p-3 border rounded-md text-left cursor-pointer transition-all duration-200 flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 rounded-md overflow-hidden flex-shrink-0 bg-gray-200 flex items-center justify-center">
+                        <template x-if="app.app_logo">
+                            <img :src="app.app_logo" :alt="app.name" class="w-full h-full object-cover">
+                        </template>
+                        <template x-if="!app.app_logo">
+                            <span class="text-lg font-semibold text-gray-400"
+                                x-text="app.name.charAt(0).toUpperCase()"></span>
+                        </template>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium text-sm truncate" x-text="app.name"></div>
+                        <div class="text-xs text-gray-500 truncate" x-text="app.branch"></div>
+                    </div>
                 </button>
             </template>
         </div>
-    </div>
 
-    <button @click="localShowCustomAppDialog = true"
-        class="w-full p-3 bg-white border border-dashed border-gray-300 rounded-md cursor-pointer transition-all duration-200 flex items-center justify-center gap-2 text-gray-400 font-medium text-sm hover:border-gray-900 hover:text-gray-900">
-        <span class="text-xl">+</span> Add Custom App
-    </button>
-
-    <template x-if="localCustomApps.length > 0">
-        <div class="mt-4">
-            <template x-for="(app, index) in localCustomApps" :key="index">
-                <div class="flex items-center justify-between p-3 bg-gray-50 border border-gray-300 rounded-md mb-2">
-                    <div>
-                        <div class="font-medium mb-1 text-sm" x-text="app.name"></div>
-                        <div class="text-xs text-gray-400" x-text="app.branch || 'main'"></div>
+        <h3 class="text-sm font-semibold mb-3 mt-6 text-gray-900">Custom Apps</h3>
+
+        <div class="grid gap-2 mb-4" style="grid-template-columns: repeat(3, minmax(0, 1fr));"
+            x-show="customApps.length > 0">
+            <template x-for="app in customApps" :key="app.name">
+                <button @click="toggleApp(app.name)" :class="localSelectedApps.includes(app.name.toLowerCase())
+                        ? 'bg-gray-100 text-gray-900 border-gray-900'
+                        : 'bg-white text-gray-900 border-gray-300 hover:border-gray-900'"
+                    class="p-3 border rounded-md text-left cursor-pointer transition-all duration-200 flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 rounded-md overflow-hidden flex-shrink-0 bg-gray-200 flex items-center justify-center">
+                        <template x-if="app.app_logo">
+                            <img :src="app.app_logo" :alt="app.name" class="w-full h-full object-cover">
+                        </template>
+                        <template x-if="!app.app_logo">
+                            <span class="text-lg font-semibold text-gray-400"
+                                x-text="app.name.charAt(0).toUpperCase()"></span>
+                        </template>
                     </div>
-                    <button @click="removeCustomApp(index)"
-                        class="bg-red-500 border border-red-500 text-gray-900 cursor-pointer px-3 py-1 text-xs rounded-md hover:bg-red-600 hover:border-red-600 transition-colors duration-200">
-                        Remove
-                    </button>
-                </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium text-sm truncate" x-text="app.name"></div>
+                        <div class="text-xs text-gray-500 truncate" x-text="app.branch"></div>
+                    </div>
+                </button>
             </template>
         </div>
-    </template>
-
-  <div class="flex gap-3 mt-6">
-    <button @click="prevStep()"
-      class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
-      Back
-    </button>
-    <button @click="nextStep()"
-      class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
-      Continue
-    </button>
-  </div>    <!-- Custom App Modal -->
-    <div x-show="localShowCustomAppDialog" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50"
+
+        <template x-if="localCustomApps.length > 0">
+            <div class="grid gap-2 mb-4" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
+                <template x-for="(app, index) in localCustomApps" :key="index">
+                    <div class="relative p-3 bg-gray-50 border border-gray-300 rounded-md flex items-center gap-3">
+                        <div
+                            class="w-10 h-10 rounded-md overflow-hidden flex-shrink-0 bg-gray-200 flex items-center justify-center">
+                            <span class="text-lg font-semibold text-gray-400"
+                                x-text="app.name.charAt(0).toUpperCase()"></span>
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="font-medium text-sm truncate" x-text="app.name"></div>
+                            <div class="text-xs text-gray-400 truncate" x-text="app.branch || 'main'"></div>
+                        </div>
+                        <button @click="removeCustomApp(index)" class="flex-shrink-0 cursor-pointer p-1"
+                            title="Remove app">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                class="w-4 h-4 text-red-500">
+                                <path fill-rule="evenodd"
+                                    d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </button>
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <button @click="localShowCustomAppDialog = true"
+            class="w-full p-3 bg-white border border-dashed border-gray-300 rounded-md cursor-pointer transition-all duration-200 flex items-center justify-center gap-2 text-gray-400 font-medium text-sm hover:border-gray-900 hover:text-gray-900">
+            <span class="text-xl">+</span> Add Custom App
+        </button>
+    </div>
+
+    <div class="flex gap-3 mt-6">
+        <button @click="prevStep()"
+            class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
+            Back
+        </button>
+        <button @click="nextStep()"
+            class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
+            Continue
+        </button>
+    </div>
+    <div x-show="localShowCustomAppDialog" x-cloak
+        class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50"
         @click.self="localShowCustomAppDialog = false">
         <div class="bg-white rounded-lg p-8 max-w-md w-11/12 mx-4 border border-gray-300" @click.stop>
             <h3 class="text-lg font-semibold mb-6 text-gray-900">Add Custom App</h3>
 
-            <div class="mb-5">
-                <label class="block text-sm font-medium mb-2 text-gray-900">App Name</label>
-                <input type="text" x-model="localCustomAppForm.name" placeholder="my-custom-app"
-                    class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
-            </div>
+            <form @submit.prevent="addCustomApp()">
+                <div class="mb-6">
+                    <div role="tablist" aria-label="app type" class="flex gap-2 mb-6">
+                        <button type="button" role="tab" @click="appType = 'public'"
+                            :aria-selected="appType === 'public'" :class="appType === 'public'
+                                ? 'bg-gray-900 text-white border-gray-900'
+                                : 'bg-white text-gray-900 border-gray-300 hover:border-gray-900'"
+                            class="flex-1 px-4 py-2.5 border rounded-md cursor-pointer transition-all duration-200 font-medium text-sm">
+                            Public
+                        </button>
+                        <button type="button" role="tab" @click="appType = 'private'"
+                            :aria-selected="appType === 'private'" :class="appType === 'private'
+                                ? 'bg-gray-900 text-white border-gray-900'
+                                : 'bg-white text-gray-900 border-gray-300 hover:border-gray-900'"
+                            class="flex-1 px-4 py-2.5 border rounded-md cursor-pointer transition-all duration-200 font-medium text-sm">
+                            Private
+                        </button>
+                    </div>
 
-            <div class="mb-5">
-                <label class="block text-sm font-medium mb-2 text-gray-900">GitHub URL</label>
-                <input type="text" x-model="localCustomAppForm.githubUrl" placeholder="https://github.com/user/repo"
-                    class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
-            </div>
+                    <div class="mb-5">
+                        <label class="block text-sm font-medium mb-2 text-gray-900">
+                            App Name <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" x-model="localCustomAppForm.name" placeholder="my-custom-app" required
+                            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
+                    </div>
 
-            <div class="mb-6">
-                <label class="block text-sm font-medium mb-2 text-gray-900">GitHub Token</label>
-                <input type="password" x-model="localCustomAppForm.token" placeholder="ghp_xxxxxxxxxxxx"
-                    class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
-            </div>
+                    <div class="mb-5">
+                        <label class="block text-sm font-medium mb-2 text-gray-900">
+                            GitHub URL <span class="text-red-500">*</span>
+                        </label>
+                        <input type="url" x-model="localCustomAppForm.githubUrl"
+                            placeholder="https://github.com/user/repo" required pattern="https://.*"
+                            title="URL must start with https://"
+                            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
+                        <p class="mt-1 text-xs text-gray-500">Must start with https://</p>
+                    </div>
 
-            <div class="mb-5">
-                <label class="block text-sm font-medium mb-2 text-gray-900">Branch</label>
-                <input type="text" x-model="localCustomAppForm.branch" placeholder="main"
-                    class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
-            </div>
+                    <div x-show="appType === 'private'" class="mb-5">
+                        <label class="block text-sm font-medium mb-2 text-gray-900">
+                            GitHub Token <span class="text-red-500">*</span>
+                        </label>
+                        <input type="password" x-model="localCustomAppForm.token" placeholder="ghp_xxxxxxxxxxxx"
+                            :required="appType === 'private'"
+                            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
+                    </div>
 
-            <div class="flex gap-3">
-                <button @click="localShowCustomAppDialog = false"
-                    class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
-                    Cancel
-                </button>
-                <button @click="addCustomApp()"
-                    class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
-                    Add App
-                </button>
-            </div>
+                    <div class="mb-5">
+                        <label class="block text-sm font-medium mb-2 text-gray-900">
+                            Branch <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" x-model="localCustomAppForm.branch" placeholder="main" required
+                            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
+                    </div>
+
+                    <div class="mb-5">
+                        <label class="block text-sm font-medium mb-2 text-gray-900">
+                            Installation Order (Optional)
+                        </label>
+                        <input type="number" x-model.number="localCustomAppForm.order" placeholder="999" min="0"
+                            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900">
+                        <p class="mt-1 text-xs text-gray-500">Lower numbers install first. Leave empty for default (999)
+                        </p>
+                    </div>
+                </div>
+
+                <div class="flex gap-3">
+                    <button type="button" @click="localShowCustomAppDialog = false"
+                        class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button type="submit"
+                        class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
+                        Add App
+                    </button>
+                </div>
+            </form>
         </div>
     </div>
 </div>
@@ -110,47 +203,104 @@ <h3 class="text-lg font-semibold mb-6 text-gray-900">Add Custom App</h3>
     function appsComponent() {
         return {
             availableApps: {{ apps | tojson }},
-            frappeVersionOptions: ['Version-15', 'Nightly'],
-            
-            // Local state
+            frappeVersionOptions: {{ frappe_versions | tojson }},
+
+            get frappeApps() {
+                return this.availableApps.filter(app => app.frappe === 1);
+            },
+
+            get customApps() {
+                return this.availableApps.filter(app => app.frappe === 0);
+            },
+
             localSelectedApps: [],
-            localFrappeVersion: 'Version-15',
+            localFrappeVersion: 'version-15',
             localCustomApps: [],
             localShowCustomAppDialog: false,
+            appType: 'public',
             localCustomAppForm: {
                 name: '',
                 githubUrl: '',
                 token: '',
-                branch: 'main'
+                branch: 'main',
+                order: null
             },
-            
-            // Initialize local state from store
+
             init() {
                 this.localSelectedApps = [...this.$store.installer.selectedApps];
                 this.localFrappeVersion = this.$store.installer.frappeVersion;
                 this.localCustomApps = [...this.$store.installer.customApps];
             },
-            
-            addCustomApp() {
-                if (this.localCustomAppForm.name && this.localCustomAppForm.githubUrl) {
-                    const newApp = {
-                        name: this.localCustomAppForm.name.toLowerCase(),
-                        githubUrl: this.localCustomAppForm.githubUrl,
-                        token: this.localCustomAppForm.token,
-                        branch: this.localCustomAppForm.branch || 'main'
-                    };
-                    this.localCustomApps.push(newApp);
-                    this.localCustomAppForm = { name: '', githubUrl: '', token: '', branch: 'main' };
-                    this.localShowCustomAppDialog = false;
-                    // Sync with store
-                    this.syncToStore();
+
+            async addCustomApp() {
+                const appData = {
+                    name: this.localCustomAppForm.name.trim(),
+                    githubUrl: this.localCustomAppForm.githubUrl,
+                    branch: this.localCustomAppForm.branch || 'main'
+                };
+
+                if (this.appType === 'private' || this.localCustomAppForm.order !== null) {
+                    try {
+                        const url = '/api/method/nano_press.api.register_custom_app';
+                        const payload = {
+                            app_name: appData.name,
+                            github_url: appData.githubUrl,
+                            branch: appData.branch,
+                            token: this.appType === 'private' ? this.localCustomAppForm.token : null,
+                            order: this.localCustomAppForm.order
+                        };
+
+                        const response = await frappe_call(url, payload, "POST");
+
+                        if (!response?.message?.success) {
+                            throw new Error(response?.message?.message || "Failed to register custom app");
+                        }
+
+                        appData.app_reference_id = response.message.app_reference_id;
+
+                        toast("Custom app registered securely", { type: "success" });
+                    } catch (err) {
+                        toast(err.message || "Failed to register custom app", { type: "danger" });
+                        return;
+                    }
                 }
-            },
-            removeCustomApp(index) {
-                this.localCustomApps.splice(index, 1);
-                // Sync with store
+
+                this.localCustomApps.push(appData);
+
+                this.localCustomAppForm = { name: '', githubUrl: '', token: '', branch: 'main', order: null };
+                this.appType = 'public';
+                this.localShowCustomAppDialog = false;
+
                 this.syncToStore();
             },
+
+            async removeCustomApp(index) {
+                const app = this.localCustomApps[index];
+
+                if (app && app.app_reference_id) {
+                    try {
+                        const url = '/api/method/nano_press.api.delete_custom_app';
+                        const payload = { app_name: app.name };
+
+                        const response = await frappe_call(url, payload, "POST");
+
+                        if (!response?.message?.success) {
+                            throw new Error(response?.message?.message || "Failed to delete custom app");
+                        }
+
+                        toast("Custom app deleted", { type: "success" });
+
+                        this.localCustomApps.splice(index, 1);
+                        this.syncToStore();
+                    } catch (err) {
+                        toast(err.message || "Failed to delete custom app from backend", { type: "warning" });
+                    }
+                } else {
+                    this.localCustomApps.splice(index, 1);
+                    this.syncToStore();
+                }
+            },
+
             toggleApp(appName) {
                 const lowerCaseAppName = appName.toLowerCase();
                 if (this.localSelectedApps.includes(lowerCaseAppName)) {
@@ -161,17 +311,17 @@ <h3 class="text-lg font-semibold mb-6 text-gray-900">Add Custom App</h3>
 
                 this.syncToStore();
             },
-            
+
             syncToStore() {
                 this.$store.installer.selectedApps = [...this.localSelectedApps];
                 this.$store.installer.customApps = [...this.localCustomApps];
                 this.$store.installer.frappeVersion = this.localFrappeVersion;
             },
+
             selectFrappeVersion(version) {
                 this.localFrappeVersion = version;
-                // Sync with store
                 this.syncToStore();
-            },
+            }
         };
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/nano_press/templates/components/core/domain.html b/nano_press/templates/components/core/domain.html
index 324961f..90459d1 100644
--- a/nano_press/templates/components/core/domain.html
+++ b/nano_press/templates/components/core/domain.html
@@ -1,153 +1,123 @@
-<div x-show="$store.installer.currentStep === 3" class="animate-fade-in" x-data="domainSetup()" x-init="init()">
-  <h2 class="text-xl font-semibold mb-6 text-gray-900">Domain</h2>
-
-  <div class="mb-5">
-    <label class="block text-sm font-medium mb-2 text-gray-900">Domain (Optional)</label>
-    <input
-      type="text"
-      x-model="$store.installer.domain"
-      name="domain"
-      id="domain-input"
-      placeholder="example.com"
-      autocomplete="off"
-      class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900"
-      @input="updateDomain($event.target.value)"
-    />
-    <p class="text-xs text-gray-400 mt-1.5">Leave empty to skip domain setup</p>
-    
-    <!-- Domain Status Message -->
-    <div x-show="domainStatusMessage" class="mt-2 text-sm" :class="$store.installer.domainVerified ? 'text-green-600' : 'text-red-600'">
-      <span x-text="domainStatusMessage"></span>
+<div x-show="$store.installer.currentStep === 3" class="animate-fade-in" x-data="domainSetup()">
+    <h2 class="text-xl font-semibold mb-3 text-gray-900">Add Domain</h2>
+
+    <p class="text-sm text-gray-600 mb-6">
+        To add a custom domain, you must already own it. If you don't have one, skip this step and we'll provide you
+        with a free Traefik domain.
+    </p>
+
+    <div class="mb-5">
+        <label class="block text-sm font-medium mb-2 text-gray-900">Domain (Optional)</label>
+        <input type="text" x-model="$store.installer.domain" name="domain" id="domain-input" placeholder="example.com"
+            autocomplete="off"
+            class="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans focus:border-gray-900"
+            @input="updateDomain($event.target.value)" />
+        <p class="text-xs text-gray-400 mt-1.5">Leave empty to skip domain setup</p>
+
+        <div x-show="$store.installer.domain && $store.installer.domain.trim()" class="mt-3">
+            <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
+                <p class="text-sm text-gray-700 mb-2">Point your domain to the server by creating an <span
+                        class="font-semibold">A record</span>:</p>
+                <p class="font-mono text-sm text-gray-900 font-medium">
+                    <span x-text="$store.installer.domain"></span> → <span
+                        x-text="$store.installer.serverDetails?.ip || '0.0.0.0'"></span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex gap-3 mt-6">
+        <button @click="prevStep()"
+            class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
+            Back
+        </button>
+
+        <button @click="nextStep()" :disabled="isLoading"
+            class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm disabled:cursor-not-allowed inline-flex justify-center items-center gap-2 bg-gray-900 text-white hover:bg-gray-800 disabled:opacity-50">
+            <svg x-show="isLoading" class="animate-spin h-5 w-5 text-gray-950" xmlns="http://www.w3.org/2000/svg"
+                fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                </path>
+            </svg>
+            <span
+                x-text="isLoading ? 'Verifying...' : ($store.installer.domain && $store.installer.domain.trim() && !$store.installer.domainVerified ? 'Verify & Continue' : 'Continue')"></span>
+        </button>
     </div>
-  </div>
-
-  <div class="flex gap-3 mt-6">
-    <button
-      @click="prevStep()"
-      class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50"
-    >
-      Back
-    </button>
-
-    <!-- Dynamic Button -->
-    <button
-      @click="nextStep()"
-      :disabled="isLoading"
-      class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm disabled:cursor-not-allowed inline-flex justify-center items-center gap-2 bg-gray-900 text-white hover:bg-gray-800 disabled:opacity-50"
-    >
-      <!-- Spinner -->
-      <svg x-show="isLoading" class="animate-spin h-5 w-5 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none"
-          viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-          </path>
-      </svg>
-      <span x-text="isLoading ? 'Verifying...' : ($store.installer.domain && $store.installer.domain.trim() && !$store.installer.domainVerified ? 'Verify & Continue' : 'Continue')"></span>
-    </button>
-  </div>  
 </div>
 
 <script>
-function domainSetup() {
-    return {
-        isLoading: false,
-        domainStatusMessage: '',
-        
-        // Initialize from store
-        init() {
-            if (this.$store.installer.domainVerified && this.$store.installer.domain) {
-                this.domainStatusMessage = `✅ ${this.$store.installer.domain} is verified`;
-            }
-        },
-        
-        updateDomain(value) {
-            if (this.$store.installer.domainVerified && value !== this.$store.installer.domain) {
-                this.$store.installer.domainVerified = false;
-                this.domainStatusMessage = '';
-            }
-            this.$store.installer.domain = value;
-        },
-        
-        prevStep() {
-            this.$store.installer.currentStep = 2;
-        },
-        
-        async nextStep() {
-            const domain = this.$store.installer.domain;
-            
-            if (domain && domain.trim()) {
-                // Check if domain is already verified
-                if (this.$store.installer.domainVerified) {
-                    this.domainStatusMessage = `✅ ${domain} is verified`;
-                    this.$store.installer.currentStep = 4;
-                    return;
+    function domainSetup() {
+        return {
+            isLoading: false,
+
+            updateDomain(value) {
+                if (this.$store.installer.domainVerified && value !== this.$store.installer.domain) {
+                    this.$store.installer.domainVerified = false;
                 }
-                
-                // Domain verification step
-                this.isLoading = true;
-                this.domainStatusMessage = '';
+                this.$store.installer.domain = value;
+            },
 
+            async verifyDomain(domain, expectedIp) {
+                const url = '/api/method/nano_press.api.check_domain_resolves_to_ip';
                 try {
-                    const expectedIp = this.$store.installer.serverDetails?.ip;
-                    
-                    if (!expectedIp) {
-                        this.domainStatusMessage = "⚠️ Please enter a server IP address in the Server step to continue";
-                        if (typeof toast !== 'undefined') {
+                    const payload = {
+                        domain: domain,
+                        expected_ip: expectedIp
+                    };
+
+                    const response = await frappe_call(url, payload, "POST");
+
+                    if (!response?.message?.success) {
+                        throw new Error(response?.message?.message || "Domain verification failed");
+                    }
+
+                    const message = response.message.message;
+                    toast(message, { type: "success" });
+                    return response.message;
+                } catch (err) {
+                    const message = err.message || "Failed to verify domain";
+                    toast(message, { type: "danger" });
+                    throw err;
+                }
+            },
+
+            async nextStep() {
+                const domain = this.$store.installer.domain;
+
+                if (domain && domain.trim()) {
+                    // Always verify domain - don't skip even if previously verified
+                    this.isLoading = true;
+
+                    try {
+                        const expectedIp = this.$store.installer.serverDetails?.ip;
+
+                        if (!expectedIp) {
                             toast("Please enter a server IP address to continue", { type: "danger" });
+                            this.isLoading = false;
+                            return;
                         }
+
+                        await this.verifyDomain(domain, expectedIp);
+
+                        this.$store.installer.domainVerified = true;
+
+                        setTimeout(() => {
+                            this.$store.installer.currentStep++;
+                        }, 1000);
+                    } catch (err) {
+                        console.error('❌ Domain verification failed:', err);
+                        this.$store.installer.domainVerified = false;
+                    } finally {
                         this.isLoading = false;
-                        return;
                     }
-                    
-                    await verify_domain(domain, expectedIp);
-                    
-                    // Mark as verified in store
-                    this.$store.installer.domainVerified = true;
-                    this.domainStatusMessage = `✅ ${domain} resolves to ${expectedIp}`;
-                    
-                    
-                    setTimeout(() => {
-                        this.$store.installer.currentStep = 4;
-                    }, 1000);
-                } catch (err) {
-                    console.error('❌ Domain verification failed:', err);
+                } else {
+                    this.$store.installer.domain = '';
                     this.$store.installer.domainVerified = false;
-                    this.domainStatusMessage = err.message || "Error verifying domain.";
-                } finally {
-                    this.isLoading = false;
+                    this.$store.installer.currentStep++;
                 }
-            } else {
-                // No domain, just continue
-                this.$store.installer.domain = '';
-                this.$store.installer.domainVerified = false;
-                this.$store.installer.currentStep = 4;
             }
-        }
-    };
-}
-
-async function verify_domain(domain, expectedIp) {
-    const url = '/api/method/nano_press.api.check_domain_resolves_to_ip';
-    try {
-        const payload = {
-            domain: domain,
-            expected_ip: expectedIp
         };
-
-        const response = await frappe_call(url, payload, "POST");
-
-        if (!response?.message?.success) {
-            throw new Error(response?.message?.message || "Domain verification failed");
-        }
-
-        const message = response.message.message;
-        toast(message, { type: "success" });
-        return response.message;
-    } catch (err) {
-        const message = err.message || "Failed to verify domain";
-        toast(message, { type: "danger" });
-        throw err;
     }
-}
 </script>
\ No newline at end of file
diff --git a/nano_press/templates/components/core/server.html b/nano_press/templates/components/core/server.html
index 5ebd792..56da3be 100644
--- a/nano_press/templates/components/core/server.html
+++ b/nano_press/templates/components/core/server.html
@@ -4,50 +4,65 @@ <h2 class="text-xl font-semibold text-gray-900">Server Details</h2>
         <button @click="clearInstallerData()"
             class="inline-flex items-center gap-1 text-xs text-red-600 hover:text-red-700 hover:underline transition-colors duration-200"
             title="Clear all saved installer data">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
             <span>Clear Saved Data</span>
         </button>
     </div>
 
-    <div class="mb-5">
-        <label class="block text-sm font-medium mb-2 text-gray-900">
-            IP Address <span class="text-red-500">*</span>
-        </label>
-
-        <input type="text" x-model="serverDetails.ip" placeholder="192.168.1.100" @input="
-            error = '';
-            $store.installer.isVerified = false;
-            const regex = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
-            isValidIP = regex.test(serverDetails.ip);
-            if (serverDetails.ip && !isValidIP) {
-                error = 'Invalid IP address format';
-            }
-        " :class="[
-            'w-full px-3 py-2.5 bg-white rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans border focus:ring-1',
-            error ? 'border-red-500 focus:border-red-600 focus:ring-red-600' :
-                    (serverDetails.ip && isVerified ? 'border-green-500 focus:border-green-600 focus:ring-green-600' : 'border-gray-300 focus:border-gray-900')
-        ]">
-
-        <template x-if="error">
-            <p class="text-red-500 text-xs mt-1" x-text="error"></p>
-        </template>
+    <div class="grid grid-cols-1 {% if user_servers %}md:grid-cols-2{% endif %} gap-4 mb-5">
+        {% if user_servers %}
+        <div>
+            <label class="block text-sm font-medium mb-2 text-gray-900">Select Existing Server</label>
+            <div class="relative">
+                <select @change="onServerSelect($event.target.value)"
+                    style="-webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none;"
+                    class="w-full px-3 py-2.5 pr-10 bg-white border border-gray-300 rounded-md text-gray-900 outline-none transition-all duration-200 text-sm focus:border-gray-900 cursor-pointer">
+                    <option value="">-- Select a server --</option>
+                    {% for server in user_servers %}
+                    <option value="{{ server.name }}">{{ server.name }} - {{ server.server_ip }} ({{
+                        server.verify_status or 'Pending' }})</option>
+                    {% endfor %}
+                </select>
+                <div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-400">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                            stroke-linejoin="round"></path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+        <div>
+            <label class="block text-sm font-medium mb-2 text-gray-900">
+                IP Address <span class="text-red-500">*</span>
+            </label>
+
+            <input type="text" x-model="serverDetails.ip" placeholder="192.168.1.100" @input="
+                error = '';
+                selectedServerName = '';
+                $store.installer.isVerified = false;
+                isValidIP = validateIP(serverDetails.ip);
+                if (serverDetails.ip && !isValidIP) {
+                    error = 'Invalid IP address format';
+                }
+            " :class="[
+                'w-full px-3 py-2.5 bg-white rounded-md text-gray-900 outline-none transition-all duration-200 text-sm font-sans border focus:ring-1',
+                error ? 'border-red-500 focus:border-red-600 focus:ring-red-600' :
+                        (serverDetails.ip && isVerified ? 'border-gray-900 focus:border-gray-900 focus:ring-gray-900' : 'border-gray-300 focus:border-gray-900')
+            ]">
+
+            <template x-if="error">
+                <p class="text-red-500 text-xs mt-1" x-text="error"></p>
+            </template>
+        </div>
     </div>
 
 
-    <div class="mb-5" x-data="{
-    copyText: `{{ public_key }}`,
-    copyNotification: false,
-    copyToClipboard() {
-        navigator.clipboard.writeText(this.copyText);
-        this.copyNotification = true;
-        let that = this;
-        setTimeout(() => {
-            that.copyNotification = false;
-        }, 3000);
-    }
-}">
+    <div class="mb-5">
         <label class="block text-sm font-medium mb-2 text-gray-900">SSH Public Key</label>
         <div class="relative">
             <textarea readonly rows="3"
@@ -119,33 +134,64 @@ <h2 class="text-xl font-semibold text-gray-900">Server Details</h2>
         <span x-text="isLoading ? 'Verifying...' : (isVerified ? 'Continue' : 'Verify & Continue')"></span>
     </button>
 
-
 </div>
 
 <script>
     function serverSetup() {
         return {
-            // Use getters to access store directly for reactive updates
             get serverDetails() {
                 return this.$store.installer.serverDetails;
             },
             get isVerified() {
                 return this.$store.installer.isVerified;
             },
-            copied: false,
             isLoading: false,
             error: '',
             isValidIP: false,
+            showAdvanced: false,
+            selectedServerName: '',
+            copyText: `{{ public_key }}`,
+            copyNotification: false,
+            userServers: {{ user_servers | default([]) | tojson }},
+
+            copyToClipboard() {
+                navigator.clipboard.writeText(this.copyText);
+                this.copyNotification = true;
+                setTimeout(() => {
+                    this.copyNotification = false;
+                }, 3000);
+            },
+
+            onServerSelect(serverName) {
+                if (!serverName) {
+                    this.selectedServerName = '';
+                    return;
+                }
+
+                const server = this.userServers.find(s => s.name === serverName);
+                if (server) {
+                    this.selectedServerName = serverName;
+                    this.$store.installer.serverDetails.ip = server.server_ip;
+                    this.$store.installer.serverDetails.rootUser = server.ssh_user;
+                    this.$store.installer.serverDetails.sshPort = String(server.ssh_port);
+                    this.$store.installer.serverName = server.name;
+
+                    if (['Prepared', 'Verified'].includes(server.verify_status)) {
+                        this.$store.installer.isVerified = true;
+                        toast(`Server selected: ${server.server_ip}`, { type: 'success' });
+                    } else {
+                        this.$store.installer.isVerified = false;
+                    }
+                }
+            },
 
             validateIP(ip) {
-                // Basic IPv4 validation regex
                 const regex = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
                 return regex.test(ip);
             },
 
             clearInstallerData() {
                 if (confirm('Are you sure you want to clear all saved installer data? This will reset everything.')) {
-                    // Clear all nano_press localStorage keys
                     const keysToRemove = [
                         'nano_press_current_step',
                         'nano_press_server_details',
@@ -164,20 +210,73 @@ <h2 class="text-xl font-semibold text-gray-900">Server Details</h2>
                         localStorage.removeItem(key);
                     });
 
-                    // Show success message
-                    if (typeof toast !== 'undefined') {
-                        toast('All saved data cleared successfully', { type: 'success' });
-                    }
+                    toast('All saved data cleared successfully', { type: 'success' });
 
-                    // Reload page to reset state
                     setTimeout(() => {
                         window.location.reload();
                     }, 500);
                 }
             },
+
+            async createServerDoc(server_ip, ssh_user, ssh_port) {
+                const url = '/api/resource/Server';
+                try {
+                    const payload = {
+                        server_ip,
+                        ssh_user,
+                        ssh_port,
+                        traefik_email: '{{ user_email }}'
+                    };
+
+                    const response = await frappe_call(url, payload, "POST");
+
+                    if (response?.data?.name) {
+                        const message = "Server record created successfully";
+                        toast(message, { type: "success" });
+                        return response.data;
+                    } else {
+                        throw new Error("Failed to create server record.");
+                    }
+                } catch (err) {
+                    const message = err.message || "Error creating server record";
+                    toast(message, { type: "danger" });
+                    throw err;
+                }
+            },
+
+            async pingServer(server_ip, ssh_user = "root", ssh_port = 22) {
+                const url = '/api/v2/method/nano_press.api.ping_server';
+                try {
+                    const payload = {
+                        host: server_ip,
+                        user: ssh_user,
+                        port: ssh_port
+                    };
+
+                    const response = await frappe_call(url, payload, "POST");
+
+                    if (!response?.data?.ok) {
+                        throw new Error(response?.data?.message || "Server is unreachable.");
+                    }
+
+                    const message = "Server connection verified successfully";
+                    toast(message, { type: "success" });
+
+                    return response.data;
+                } catch (err) {
+                    const message = err.message || "Failed to verify server connection";
+                    toast(message, { type: "danger" });
+                    throw err;
+                }
+            },
+
+            async verifyAndCreateServer(server_ip, ssh_user = "root", ssh_port = 22) {
+                await this.pingServer(server_ip, ssh_user, ssh_port);
+                return await this.createServerDoc(server_ip, ssh_user, ssh_port);
+            },
+
             async nextStep() {
                 if (this.isVerified) {
-                    // Already verified, just move to next step
                     this.$store.installer.currentStep = 2;
                     return;
                 }
@@ -185,7 +284,6 @@ <h2 class="text-xl font-semibold text-gray-900">Server Details</h2>
                 this.error = '';
                 this.isLoading = true;
 
-                // Validate IP format first
                 if (!this.validateIP(this.serverDetails.ip)) {
                     this.error = 'Invalid IP address. Please check and try again.';
                     this.isLoading = false;
@@ -193,93 +291,27 @@ <h2 class="text-xl font-semibold text-gray-900">Server Details</h2>
                 }
 
                 try {
-                    // Call the combined function: ping + create server
-                    const serverData = await verify_and_create_server(
+                    const serverData = await this.verifyAndCreateServer(
                         this.serverDetails.ip,
                         this.serverDetails.rootUser,
                         this.serverDetails.sshPort
                     );
 
-                    // If server creation succeeded
                     const message = "Server verified and created successfully";
-                    if (typeof toast !== 'undefined') {
-                        toast(message, { type: "success" });
-                    }
+                    toast(message, { type: "success" });
 
-                    // Update store (serverDetails is already updated via binding, just update verification status)
                     this.$store.installer.isVerified = true;
-                    this.$store.installer.serverName = serverData.name; // Store the server document name
+                    this.$store.installer.serverName = serverData.name;
                     this.$store.installer.currentStep = 2;
 
                 } catch (err) {
                     const message = err.message || "Unable to verify or create server";
                     this.error = message;
-
-                    if (typeof toast !== 'undefined') {
-                        toast(message, { type: "danger" });
-                    }
+                    toast(message, { type: "danger" });
                 } finally {
                     this.isLoading = false;
                 }
             }
         }
     }
-    async function create_server_doc(server_ip, ssh_user, ssh_port) {
-        const url = '/api/resource/Server';
-        try {
-            const payload = {
-                server_ip,
-                ssh_user,
-                ssh_port,
-                traefik_email: '{{ user_email }}'
-                // server_name will be auto-generated as BENCH-00001, BENCH-00002, etc.
-            };
-
-            // Create document using frappe_call()
-            const response = await frappe_call(url, payload, "POST");
-
-            // Check if the response looks good
-            if (response?.data?.name) {
-                const message = ("Server record created successfully");
-                toast(message, { type: "success" });
-                return response.data;
-            } else {
-                throw new Error("Failed to create server record.");
-            }
-        } catch (err) {
-            const message = err.message || ("Error creating server record");
-            toast(message, { type: "danger" });
-            throw err; // rethrow if you want the caller to handle it
-        }
-    }
-    async function ping_server(server_ip, ssh_user = "root", ssh_port = 22) {
-        const url = '/api/v2/method/nano_press.api.ping_server';
-        try {
-            const payload = {
-                host: server_ip,
-                user: ssh_user,
-                port: ssh_port
-            };
-
-            const response = await frappe_call(url, payload, "POST");
-
-            if (!response?.data?.ok) {
-                throw new Error(response?.data?.message || "Server is unreachable.");
-            }
-
-            const message = ("Server connection verified successfully");
-            toast(message, { type: "success" });
-
-            return response.data;
-        } catch (err) {
-            const message = err.message || ("Failed to verify server connection");
-            toast(message, { type: "danger" });
-            throw err;
-        }
-    }
-    async function verify_and_create_server(server_ip, ssh_user = "root", ssh_port = 22) {
-        await ping_server(server_ip, ssh_user, ssh_port);
-        return await create_server_doc(server_ip, ssh_user, ssh_port);
-    }
-
 </script>
\ No newline at end of file
diff --git a/nano_press/templates/components/core/stepper.html b/nano_press/templates/components/core/stepper.html
index ec26273..897d2fd 100644
--- a/nano_press/templates/components/core/stepper.html
+++ b/nano_press/templates/components/core/stepper.html
@@ -1,11 +1,10 @@
 <div class="flex items-center justify-between mb-12 relative max-w-2xl mx-auto">
     <!-- Stepper line -->
     <div class="absolute top-4 left-0 right-0 h-px bg-gray-300 z-0"></div>
-    <div class="absolute top-4 left-0 h-px bg-gray-900 z-0 transition-all duration-500"
-         :style="`width: ${(currentStep - 1) * 33.33}%`"></div>
+    <div class="absolute top-4 left-0 h-px bg-gray-900 z-0 transition-all duration-500" :style="`width: ${(currentStep - 1) * 33.33}%`"></div>
 
     <template x-for="i in 4" :key="i">
-        <div class="flex flex-col items-center z-10 bg-white-50 px-2">
+        <div class="flex flex-col items-center z-0 bg-white-50 px-2">
             <div class="w-8 h-8 rounded-full flex items-center justify-center font-medium text-sm transition-all duration-300"
                  :class="i <= currentStep ? 'bg-gray-900 text-white border border-gray-900' : 'bg-white text-gray-400 border border-gray-300'">
                 <span x-text="i"></span>
diff --git a/nano_press/templates/components/core/summary.html b/nano_press/templates/components/core/summary.html
index a9ad92f..797c0e2 100644
--- a/nano_press/templates/components/core/summary.html
+++ b/nano_press/templates/components/core/summary.html
@@ -1,116 +1,131 @@
-<div x-show="$store.installer.currentStep === 4" class="animate-fade-in" x-data="summarySetup()">
+<div x-show="$store.installer.currentStep === 4" class="animate-fade-in" x-data="summarySetup()" x-init="init()">
     <h2 class="text-xl font-semibold mb-6 text-gray-900">Summary</h2>
 
     <div x-show="!deploying && !deployComplete">
-        <!-- Server -->
-        <div class="bg-gray-50 border border-gray-300 rounded-md p-4 mb-4">
-            <h3 class="text-sm font-semibold text-gray-900 mb-2">Server</h3>
-            <p class="text-xs text-gray-400 mb-1">
-                <span class="text-gray-400">IP:</span> 
-                <span x-text="$store.installer.serverDetails.ip" class="text-gray-900"></span>
-                <template x-if="$store.installer.isVerified">
-                    <span class="ml-2 text-green-600">✓ Verified</span>
+        <div class="bg-white border border-gray-300 rounded-md p-6 mb-6">
+            <h3 class="text-sm font-semibold text-gray-900 mb-4">Verified</h3>
+
+            <div class="mb-3">
+                <p class="text-xs text-gray-400 mb-1">Server IP</p>
+                <p class="text-sm text-gray-900" x-text="$store.installer.serverDetails.ip"></p>
+            </div>
+
+            <div>
+                <p class="text-xs text-gray-400 mb-1">Domain</p>
+                <template x-if="$store.installer.domain && $store.installer.domain.trim()">
+                    <p class="text-sm text-gray-900" x-text="$store.installer.domain"></p>
                 </template>
-            </p>
-            <p class="text-xs text-gray-400 mb-1">
-                <span class="text-gray-400">User:</span> 
-                <span x-text="$store.installer.serverDetails.rootUser" class="text-gray-900"></span>
-            </p>
-            <p class="text-xs text-gray-400">
-                <span class="text-gray-400">Port:</span> 
-                <span x-text="$store.installer.serverDetails.sshPort" class="text-gray-900"></span>
-            </p>
+                <template x-if="!$store.installer.domain || !$store.installer.domain.trim()">
+                    <p class="text-sm text-gray-500 italic">Not configured</p>
+                </template>
+            </div>
         </div>
 
-        <!-- Apps -->
-        <div class="bg-gray-50 border border-gray-300 rounded-md p-4 mb-4">
-            <h3 class="text-sm font-semibold text-gray-900 mb-2">Frappe Apps</h3>
-            <p class="text-xs text-gray-400 mb-1">
-                <span class="text-gray-400">Version:</span> 
-                <span x-text="$store.installer.frappeVersion" class="text-gray-900"></span>
-            </p>
-            <p class="text-xs text-gray-400 mb-1">
-                <span class="text-gray-400">Apps:</span> 
-                <span x-show="$store.installer.selectedApps.length > 0" class="text-gray-900">
-                    <template x-for="(app, index) in $store.installer.selectedApps" :key="app">
-                        <span>
-                            <span x-text="app"></span><span x-show="index < $store.installer.selectedApps.length - 1">, </span>
-                        </span>
-                    </template>
-                </span>
-                <span x-show="$store.installer.selectedApps.length === 0" class="text-gray-900 italic">None</span>
-            </p>
+        <div class="bg-white border border-gray-300 rounded-md p-6 mb-6">
+            <h3 class="text-sm font-semibold text-gray-900 mb-4">Environment Details</h3>
+
+            <div class="mb-3">
+                <p class="text-xs text-gray-400 mb-1">Frappe Version</p>
+                <p class="text-sm text-gray-900" x-text="$store.installer.frappeVersion"></p>
+            </div>
+
+            <div class="mb-3">
+                <p class="text-xs text-gray-400 mb-1">Frappe Apps</p>
+                <template x-if="$store.installer.selectedApps.length > 0">
+                    <p class="text-sm text-gray-900">
+                        <template x-for="(app, index) in $store.installer.selectedApps" :key="app">
+                            <span>
+                                <span x-text="app"></span><span
+                                    x-show="index < $store.installer.selectedApps.length - 1">, </span>
+                            </span>
+                        </template>
+                    </p>
+                </template>
+                <template x-if="$store.installer.selectedApps.length === 0">
+                    <p class="text-sm text-gray-500 italic">None</p>
+                </template>
+            </div>
+
             <template x-if="$store.installer.customApps.length > 0">
-                <p class="text-xs text-gray-400">
-                    <span class="text-gray-400">Custom Apps:</span>
-                    <span class="text-gray-900">
+                <div>
+                    <p class="text-xs text-gray-400 mb-1">Custom Apps</p>
+                    <p class="text-sm text-gray-900">
                         <template x-for="(app, index) in $store.installer.customApps" :key="app.name">
                             <span>
-                                <span x-text="app.name + (app.branch && app.branch !== 'main' ? ` (${app.branch})` : '')"></span><span x-show="index < $store.installer.customApps.length - 1">, </span>
+                                <span x-text="app.name + (app.branch ? ` (${app.branch})` : '')"></span><span
+                                    x-show="index < $store.installer.customApps.length - 1">, </span>
                             </span>
                         </template>
-                    </span>
-                </p>
-            </template>
-        </div>
-
-        <!-- Domain -->
-        <div class="bg-gray-50 border border-gray-300 rounded-md p-4 mb-6">
-            <h3 class="text-sm font-semibold text-gray-900 mb-2">Domain</h3>
-            <template x-if="$store.installer.domain && $store.installer.domain.trim()">
-                <p class="text-xs text-gray-400">
-                    <span class="text-gray-400">Domain:</span> 
-                    <span x-text="$store.installer.domain" class="text-gray-900"></span>
-                    <template x-if="$store.installer.domainVerified">
-                        <span class="ml-2 text-green-600">✓ Verified</span>
-                    </template>
-                    <template x-if="!$store.installer.domainVerified">
-                        <span class="ml-2 text-yellow-600">⚠ Not Verified</span>
-                    </template>
-                </p>
-            </template>
-            <template x-if="!$store.installer.domain || !$store.installer.domain.trim()">
-                <p class="text-xs text-gray-400 italic">No domain configured</p>
+                    </p>
+                </div>
             </template>
         </div>
 
         <div class="flex gap-3">
             <button @click="prevStep()"
-                    class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
+                class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-300 cursor-pointer transition-all duration-200 text-sm bg-white text-gray-900 hover:bg-gray-50">
                 Back
             </button>
             <button @click="startDeployment()"
-                    class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
+                class="flex-1 px-4 py-2.5 rounded-md font-medium border border-gray-900 cursor-pointer transition-all duration-200 text-sm bg-gray-900 text-white hover:bg-gray-800">
                 Deploy
             </button>
         </div>
     </div>
 
     <div x-show="deploying" class="text-center py-8">
-        <div class="inline-block w-12 h-12 border-2 border-gray-300 border-t-gray-900 rounded-full animate-spin mb-4"></div>
+        <div class="inline-block w-12 h-12 border-2 border-gray-300 border-t-gray-900 rounded-full animate-spin mb-4">
+        </div>
         <h3 class="text-lg font-semibold mb-2 text-gray-900">Deploying</h3>
         <p class="text-gray-400 text-sm mb-8" x-text="deploymentStatus"></p>
 
         <div class="max-w-64 mx-auto">
-            <div class="flex items-center gap-3 mb-3" :class="deployStep >= 1 ? 'text-gray-900' : 'text-gray-400'">
-                <div class="w-4 h-4 rounded-full shrink-0" :class="deployStep >= 1 ? 'bg-gray-900' : 'bg-gray-300'"></div>
-                <span class="text-sm">Preparing server</span>
+            <div class="flex items-start gap-3 mb-3">
+                <div class="flex flex-col items-center">
+                    <div class="w-4 h-4 rounded-full shrink-0 bg-gray-400"
+                        :class="{'bg-gray-900': deployStep > 1, 'animate-blink': deployStep === 1, 'bg-gray-300': deployStep < 1}">
+                    </div>
+                    <div class="w-0.5 h-8" :class="deployStep > 1 ? 'bg-gray-900' : 'bg-gray-300'"></div>
+                </div>
+                <span class="text-sm -mt-0.5" :class="deployStep >= 1 ? 'text-gray-900' : 'text-gray-400'">Preparing
+                    server</span>
             </div>
-            <div class="flex items-center gap-3 mb-3" :class="deployStep >= 2 ? 'text-gray-900' : 'text-gray-400'">
-                <div class="w-4 h-4 rounded-full shrink-0" :class="deployStep >= 2 ? 'bg-gray-900' : 'bg-gray-300'"></div>
-                <span class="text-sm">Setting up your Apps</span>
+            <div class="flex items-start gap-3 mb-3">
+                <div class="flex flex-col items-center">
+                    <div class="w-4 h-4 rounded-full shrink-0 bg-gray-400"
+                        :class="{'bg-gray-900': deployStep > 2, 'animate-blink': deployStep === 2, 'bg-gray-300': deployStep < 2}">
+                    </div>
+                    <div class="w-0.5 h-8" :class="deployStep > 2 ? 'bg-gray-900' : 'bg-gray-300'"></div>
+                </div>
+                <span class="text-sm -mt-0.5" :class="deployStep >= 2 ? 'text-gray-900' : 'text-gray-400'">Building
+                    custom image</span>
             </div>
-            <div class="flex items-center gap-3 mb-3" :class="deployStep >= 3 ? 'text-gray-900' : 'text-gray-400'">
-                <div class="w-4 h-4 rounded-full shrink-0" :class="deployStep >= 3 ? 'bg-gray-900' : 'bg-gray-300'"></div>
-                <span class="text-sm">Creating site</span>
+            <div class="flex items-start gap-3 mb-3">
+                <div class="flex flex-col items-center">
+                    <div class="w-4 h-4 rounded-full shrink-0 bg-gray-400"
+                        :class="{'bg-gray-900': deployStep > 3, 'animate-blink': deployStep === 3, 'bg-gray-300': deployStep < 3}">
+                    </div>
+                    <div class="w-0.5 h-8" :class="deployStep > 3 ? 'bg-gray-900' : 'bg-gray-300'"></div>
+                </div>
+                <span class="text-sm -mt-0.5" :class="deployStep >= 3 ? 'text-gray-900' : 'text-gray-400'">Creating
+                    site</span>
             </div>
-            <div class="flex items-center gap-3 mb-3" :class="deployStep >= 4 ? 'text-gray-900' : 'text-gray-400'">
-                <div class="w-4 h-4 rounded-full shrink-0" :class="deployStep >= 4 ? 'bg-gray-900' : 'bg-gray-300'"></div>
-                <span class="text-sm">Preparing deployment</span>
+            <div class="flex items-start gap-3 mb-3">
+                <div class="flex flex-col items-center">
+                    <div class="w-4 h-4 rounded-full shrink-0 bg-gray-400"
+                        :class="{'bg-gray-900': deployStep > 4, 'animate-blink': deployStep === 4, 'bg-gray-300': deployStep < 4}">
+                    </div>
+                    <div class="w-0.5 h-8" :class="deployStep > 4 ? 'bg-gray-900' : 'bg-gray-300'"></div>
+                </div>
+                <span class="text-sm -mt-0.5" :class="deployStep >= 4 ? 'text-gray-900' : 'text-gray-400'">Preparing
+                    deployment</span>
             </div>
-            <div class="flex items-center gap-3" :class="deployStep >= 5 ? 'text-gray-900' : 'text-gray-400'">
-                <div class="w-4 h-4 rounded-full shrink-0" :class="deployStep >= 5 ? 'bg-gray-900' : 'bg-gray-300'"></div>
-                <span class="text-sm">Deploying site</span>
+            <div class="flex items-start gap-3">
+                <div class="w-4 h-4 rounded-full shrink-0 bg-gray-400"
+                    :class="{'bg-gray-900': deployStep > 5, 'animate-blink': deployStep === 5, 'bg-gray-300': deployStep < 5}">
+                </div>
+                <span class="text-sm -mt-0.5" :class="deployStep >= 5 ? 'text-gray-900' : 'text-gray-400'">Deploying
+                    site</span>
             </div>
         </div>
     </div>
@@ -124,16 +139,13 @@ <h3 class="text-lg font-semibold mb-2 text-gray-900">Deploying</h3>
         <h3 class="text-xl font-semibold mb-2 text-gray-900">Deployment Complete</h3>
         <p class="text-gray-400 text-sm mb-2">Your Frappe site has been successfully deployed!</p>
 
-        <!-- Site URL -->
         <div class="mb-4">
             <p class="text-sm text-gray-900 font-medium mb-1">Site will be accessible at:</p>
-            <a :href="`https://${$store.installer.siteUrl}`"
-               target="_blank"
-               class="text-sm text-blue-600 hover:text-blue-700 underline break-all"
-               x-text="$store.installer.siteUrl"></a>
+            <a :href="`https://${$store.installer.siteUrl}`" target="_blank"
+                class="text-sm text-blue-600 hover:text-blue-700 underline break-all"
+                x-text="$store.installer.siteUrl"></a>
         </div>
 
-        <!-- Login Credentials -->
         <div class="max-w-lg mx-auto mb-6 p-4 bg-blue-50 border border-blue-200 rounded-md text-left">
             <p class="text-xs font-semibold text-gray-900 mb-3">Login Credentials:</p>
             <div class="space-y-2">
@@ -148,363 +160,488 @@ <h3 class="text-xl font-semibold mb-2 text-gray-900">Deployment Complete</h3>
             </div>
         </div>
 
-        <!-- Deployment notice -->
         <div class="max-w-lg mx-auto mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-md text-left">
             <p class="text-xs text-gray-700 mb-2">
-                <span class="font-semibold">Please Note:</span> Deployment time may vary depending on the number of applications being installed.
+                <span class="font-semibold">Please Note:</span> Deployment time may vary depending on the number of
+                applications being installed.
             </p>
             <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside">
                 <li>Typically, the first app becomes available within <span class="font-semibold">5 minutes</span></li>
-                <li>If the site remains inaccessible after <span class="font-semibold">10 minutes</span>, you may need to restart the containers</li>
+                <li>If the site remains inaccessible after <span class="font-semibold">10 minutes</span>, you may need
+                    to restart the containers</li>
             </ul>
         </div>
 
         <button @click="visitSite()"
-                class="inline-flex justify-center items-center rounded-md bg-gray-900 text-white px-4 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors duration-200">
+            class="inline-flex justify-center items-center rounded-md bg-gray-900 text-white px-4 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors duration-200">
             Access Site
         </button>
     </div>
 </div>
 
 <script>
-function summarySetup() {
-    return {
-        deploying: false,
-        deployComplete: false,
-        deploymentStatus: 'Initializing deployment...',
-        deployStep: 0,
-
-        
-        buildingImage: false,
-
-        
-        siteUsername: '',
-        sitePassword: '',
-
-        prevStep() {
-            this.$store.installer.currentStep = 3;
-        },
-        
-        async startDeployment() {
-            this.deploying = true;
-            this.deployComplete = false;
-            this.deployStep = 0;
-
-            try {
-                this.deploymentStatus = 'Preparing server (installing Docker, Docker Compose, Traefik)...';
-                this.deployStep = 1;
-
-                const serverName = this.$store.installer.serverName;
-                if (!serverName) {
-                    throw new Error('Server not found. Please verify your server first.');
+    function summarySetup() {
+        return {
+            deploying: false,
+            deployComplete: false,
+            deploymentStatus: 'Initializing deployment...',
+            deployStep: 0,
+            pollIntervalId: null,
+            siteUsername: '',
+            sitePassword: '',
+
+            init() {
+                const params = new URLSearchParams(window.location.search);
+                const isDeploying = params.get('deploying');
+                const isComplete = params.get('complete');
+                const siteName = params.get('site');
+
+                if (isComplete === 'true' && siteName) {
+                    this.$store.installer.currentStep = 4;
+                    this.resumeCompletedDeployment(siteName);
+                } else if (isDeploying === 'true' && siteName) {
+                    this.$store.installer.currentStep = 4;
+                    this.resumeDeployment(siteName);
                 }
 
-                const prepareResult = await this.callPrepareServer(serverName, true);
+                this.$cleanup(() => {
+                    if (this.pollIntervalId) {
+                        clearInterval(this.pollIntervalId);
+                        this.pollIntervalId = null;
+                    }
+                });
+            },
+
+            async startDeployment() {
+                this.deploying = true;
+                this.deployComplete = false;
+                this.deployStep = 0;
+
+                try {
+                    this.deploymentStatus = 'Preparing server (installing Docker, Docker Compose, Traefik)...';
+                    this.deployStep = 1;
 
-                if (typeof toast !== 'undefined') {
+                    const serverName = this.$store.installer.serverName;
+                    if (!serverName) {
+                        throw new Error('Server not found. Please verify your server first.');
+                    }
+
+                    const prepareResult = await this.callPrepareServer(serverName, true);
                     const successMsg = prepareResult.message || 'Server prepared successfully!';
                     toast(successMsg, { type: 'success' });
-                }
 
-                await new Promise(resolve => setTimeout(resolve, 1000));
+                    await new Promise(resolve => setTimeout(resolve, 1000));
 
-                this.deploymentStatus = 'Setting up your Apps...';
-                this.deployStep = 2;
-                this.buildingImage = true;
+                    this.deploymentStatus = 'Building custom image...';
+                    this.deployStep = 2;
 
-                const customImageName = await this.buildCustomImage();
+                    const customImageName = await this.buildCustomImage();
 
+                    toast('Custom image queued for building...', { type: 'success' });
 
-                if (typeof toast !== 'undefined') {
-                    toast('Custom image built successfully!', { type: 'success' });
-                }
+                    await new Promise(resolve => setTimeout(resolve, 1000));
 
-                // Wait a moment before moving to next step
-                await new Promise(resolve => setTimeout(resolve, 1000));
+                    this.deploymentStatus = 'Creating site structure...';
+                    this.deployStep = 3;
 
-                // Step 3: Create Frappe Site document (with custom image)
-                this.deploymentStatus = 'Creating site structure...';
-                this.deployStep = 3;
-                this.buildingImage = false;
+                    const siteDoc = await this.createFrappeSiteDoc(customImageName);
 
-                const siteDoc = await this.createFrappeSiteDoc(customImageName);
+                    window.history.replaceState({}, '', `/self-host?deploying=true&site=${siteDoc.name}`);
 
-                // Fetch actual credentials (passwords are masked in regular response)
-                await this.fetchSiteCredentials(siteDoc.name);
+                    await this.fetchSiteCredentials(siteDoc.name);
 
-                if (typeof toast !== 'undefined') {
                     toast('Site structure created successfully!', { type: 'success' });
-                }
 
-                // Wait a moment before moving to next step
-                await new Promise(resolve => setTimeout(resolve, 1000));
+                    if (siteDoc.status === 'Building') {
+                        this.deploymentStatus = 'Waiting for custom image to build...';
+                        this.deployStep = 2;
+
+                        toast('Custom image is building. Monitoring progress...', { type: 'info' });
+
+                        this.resumeDeployment(siteDoc.name);
+                        return;
+                    }
+
+                    await new Promise(resolve => setTimeout(resolve, 1000));
 
-                // Step 4: Prepare for deployment (provision bench structure)
-                this.deploymentStatus = 'Preparing deployment (provisioning bench structure)...';
-                this.deployStep = 4;
+                    this.deploymentStatus = 'Preparing deployment (provisioning bench structure)...';
+                    this.deployStep = 4;
 
-                const prepareDeploymentResult = await this.callPrepareForDeployment(siteDoc.name);
+                    const prepareDeploymentResult = await this.callPrepareForDeployment(siteDoc.name);
 
-                if (typeof toast !== 'undefined') {
                     toast('Deployment prepared successfully!', { type: 'success' });
-                }
 
-                // Wait a moment before moving to next step
-                await new Promise(resolve => setTimeout(resolve, 1000));
+                    await new Promise(resolve => setTimeout(resolve, 1000));
 
-                // Step 5: Deploy site (bring up containers)
-                this.deploymentStatus = 'Deploying site (starting containers)...';
-                this.deployStep = 5;
+                    this.deploymentStatus = 'Deploying site (starting containers)...';
+                    this.deployStep = 5;
 
-                const deployResult = await this.callDeploySite(siteDoc.name);
+                    const deployResult = await this.callDeploySite(siteDoc.name);
 
-                if (typeof toast !== 'undefined') {
                     toast('Site deployed successfully!', { type: 'success' });
-                }
 
-                // Store the site name for accessing later
-                this.$store.installer.siteName = siteDoc.name;
-                this.$store.installer.siteUrl = siteDoc.site_url;
+                    this.$store.installer.siteName = siteDoc.name;
+                    this.$store.installer.siteUrl = siteDoc.site_url;
 
-                // Deployment complete
-                this.deploying = false;
-                this.deployComplete = true;
+                    this.deploying = false;
+                    this.deployComplete = true;
+
+                    window.history.replaceState({}, '', `/self-host?complete=true&site=${siteDoc.name}`);
 
-                if (typeof toast !== 'undefined') {
                     toast('Deployment completed successfully!', { type: 'success' });
-                }
 
-            } catch (error) {
-                console.error('Deployment failed:', error);
-                this.deploying = false;
-                this.deploymentStatus = 'Deployment failed. Please try again.';
+                } catch (error) {
+                    console.error('Deployment failed:', error);
+                    this.deploying = false;
+                    this.deploymentStatus = 'Deployment failed. Please try again.';
 
-                if (typeof toast !== 'undefined') {
                     const errorMessage = error.message || 'Deployment failed. Please check your configuration.';
                     toast(errorMessage, { type: 'danger' });
                 }
-            }
-        },
-        
-        // Call the prepare_server API
-        async callPrepareServer(serverName, includeTraefik = false) {
-            const url = '/api/method/nano_press.nano_press.doctype.server.server.prepare_server';
-            
-            try {
-                const payload = {
-                    server_name: serverName,
-                    include_traefik: includeTraefik
-                };
-                
-                const response = await frappe_call(url, payload, "POST");
-                
-                
-                if (response?.message?.status === 200) {
-                    return response.message;
-                } else if (response?.message) {
-                    
-                    throw new Error(response.message.message || 'Server preparation failed');
-                } else {
-                    console.error('Unexpected response structure:', response);
-                    throw new Error('Server preparation failed - unexpected response structure');
-                }
-            } catch (error) {
-                console.error('Error preparing server:', error);
-                throw error;
-            }
-        },
+            },
 
-        async createFrappeSiteDoc(customImageName = null) {
-            const url = '/api/resource/Frappe Site';
+            async callPrepareServer(serverName, includeTraefik = false) {
+                const url = '/api/method/nano_press.nano_press.doctype.server.server.prepare_server';
 
-            try {
-                const payload = {
-                    server_name: this.$store.installer.serverName,
-                    frappe_version: this.$store.installer.frappeVersion,
-                    install_apps: this.$store.installer.selectedApps.map(app => ({ app_name: app }))
-                };
+                try {
+                    const payload = {
+                        server_name: serverName,
+                        include_traefik: includeTraefik
+                    };
 
-                if (customImageName) {
-                    payload.is_custom = 1;
-                    payload.custom_image = customImageName;
-                }
+                    const response = await frappe_call(url, payload, "POST");
 
-                if (this.$store.installer.domain && this.$store.installer.domain.trim()) {
-                    payload.site_url = this.$store.installer.domain.trim();
+                    if (response?.message?.status === 200) {
+                        return response.message;
+                    } else if (response?.message) {
+                        throw new Error(response.message.message || 'Server preparation failed');
+                    } else {
+                        console.error('Unexpected response structure:', response);
+                        throw new Error('Server preparation failed - unexpected response structure');
+                    }
+                } catch (error) {
+                    console.error('Error preparing server:', error);
+                    throw error;
                 }
+            },
 
-                const response = await frappe_call(url, payload, "POST");
+            async createFrappeSiteDoc(customImageName = null) {
+                const url = '/api/resource/Frappe Site';
 
-                if (response?.data?.name) {
-                    const docName = response.data.name;
-
-                    const submitUrl = `/api/resource/Frappe Site/${docName}`;
-                    const submitPayload = {
-                        docstatus: 1
+                try {
+                    const payload = {
+                        server_name: this.$store.installer.serverName,
+                        frappe_version: this.$store.installer.frappeVersion,
+                        install_apps: this.$store.installer.selectedApps.map(app => ({ app_name: app }))
                     };
 
-                    const submitResponse = await frappe_call(submitUrl, submitPayload, "PUT");
+                    if (customImageName) {
+                        payload.is_custom = 1;
+                        payload.custom_image = customImageName;
+                    }
+
+                    if (this.$store.installer.domain && this.$store.installer.domain.trim()) {
+                        payload.site_url = this.$store.installer.domain.trim();
+                    }
+
+                    const response = await frappe_call(url, payload, "POST");
+
+                    if (response?.data?.name) {
+                        const docName = response.data.name;
+
+                        const submitUrl = `/api/resource/Frappe Site/${docName}`;
+                        const submitPayload = {
+                            docstatus: 1
+                        };
+
+                        const submitResponse = await frappe_call(submitUrl, submitPayload, "PUT");
 
-                    if (submitResponse?.data) {
-                        return submitResponse.data;
+                        if (submitResponse?.data) {
+                            return submitResponse.data;
+                        } else {
+                            throw new Error('Failed to submit Frappe Site document');
+                        }
                     } else {
-                        throw new Error('Failed to submit Frappe Site document');
+                        throw new Error('Failed to create Frappe Site document');
                     }
-                } else {
-                    throw new Error('Failed to create Frappe Site document');
+                } catch (error) {
+                    console.error('Error creating Frappe Site:', error);
+                    throw error;
                 }
-            } catch (error) {
-                console.error('Error creating Frappe Site:', error);
-                throw error;
-            }
-        },
+            },
 
-        async callPrepareForDeployment(siteName) {
-            const url = `/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.prepare_for_deployment`;
+            async callPrepareForDeployment(siteName) {
+                const url = `/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.prepare_for_deployment`;
 
-            try {
-                const payload = {
-                    site_name: siteName
-                };
+                try {
+                    const payload = {
+                        site_name: siteName
+                    };
 
-                const response = await frappe_call(url, payload, "POST");
+                    const response = await frappe_call(url, payload, "POST");
 
-                if (response?.message?.status === 200) {
-                    return response.message;
-                } else if (response?.message) {
-                    throw new Error(response.message.message || 'Deployment preparation failed');
-                } else {
-                    console.error('Unexpected response structure:', response);
-                    throw new Error('Deployment preparation failed - unexpected response structure');
+                    if (response?.message?.status === 200) {
+                        return response.message;
+                    } else if (response?.message) {
+                        throw new Error(response.message.message || 'Deployment preparation failed');
+                    } else {
+                        console.error('Unexpected response structure:', response);
+                        throw new Error('Deployment preparation failed - unexpected response structure');
+                    }
+                } catch (error) {
+                    console.error('Error preparing deployment:', error);
+                    throw error;
                 }
-            } catch (error) {
-                console.error('Error preparing deployment:', error);
-                throw error;
-            }
-        },
+            },
 
-        async callDeploySite(siteName) {
-            const url = `/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.deploy_site`;
+            async callDeploySite(siteName) {
+                const url = `/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.deploy_site`;
 
-            try {
-                const payload = {
-                    site_name: siteName
-                };
+                try {
+                    const payload = {
+                        site_name: siteName
+                    };
 
-                const response = await frappe_call(url, payload, "POST");
+                    const response = await frappe_call(url, payload, "POST");
 
-                if (response?.message?.status === 200) {
-                    return response.message;
-                } else if (response?.message) {
-                    throw new Error(response.message.message || 'Site deployment failed');
-                } else {
-                    console.error('Unexpected response structure:', response);
-                    throw new Error('Site deployment failed - unexpected response structure');
+                    if (response?.message?.status === 200) {
+                        return response.message;
+                    } else if (response?.message) {
+                        throw new Error(response.message.message || 'Site deployment failed');
+                    } else {
+                        console.error('Unexpected response structure:', response);
+                        throw new Error('Site deployment failed - unexpected response structure');
+                    }
+                } catch (error) {
+                    console.error('Error deploying site:', error);
+                    throw error;
                 }
-            } catch (error) {
-                console.error('Error deploying site:', error);
-                throw error;
-            }
-        },
-
-        visitSite() {
-            const siteUrl = this.$store.installer.siteUrl;
-            const domain = this.$store.installer.domain?.trim();
-            const ip = this.$store.installer.serverDetails?.ip;
-
-            if (siteUrl) {
-                window.open(`https://${siteUrl}`, '_blank');
-            } else if (domain && this.$store.installer.domainVerified) {
-                window.open(`https://${domain}`, '_blank');
-            } else if (ip) {
-                window.open(`http://${ip}`, '_blank');
-            } else {
-                if (typeof toast !== 'undefined') {
+            },
+
+            visitSite() {
+                const siteUrl = this.$store.installer.siteUrl;
+                const domain = this.$store.installer.domain?.trim();
+                const ip = this.$store.installer.serverDetails?.ip;
+
+                if (siteUrl) {
+                    window.open(`https://${siteUrl}`, '_blank');
+                } else if (domain && this.$store.installer.domainVerified) {
+                    window.open(`https://${domain}`, '_blank');
+                } else if (ip) {
+                    window.open(`http://${ip}`, '_blank');
+                } else {
                     toast('Unable to determine site URL. Please check your configuration.', { type: 'warning' });
                 }
-            }
-        },
-
-        async buildCustomImage() {
-            const timestamp = Date.now();
-            const imageName = `custom-${timestamp}`;
-
-            try {
-                const url = '/api/method/nano_press.nano_press.doctype.custom_image.custom_image.create_and_build_custom_image';
-                const payload = {
-                    server_name: this.$store.installer.serverName,
-                    apps: this.$store.installer.selectedApps,
-                    custom_apps: this.$store.installer.customApps,
-                    image_name: imageName,
-                    frappe_version: this.$store.installer.frappeVersion
-                };
+            },
 
-                const response = await frappe_call(url, payload, "POST");
+            async rebuildCustomImage(siteName) {
+                try {
+                    const url = '/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.rebuild_custom_image_for_site';
+                    const payload = { site_name: siteName };
+                    const response = await frappe_call(url, payload, "POST");
 
-                if (response?.message?.custom_image_name) {
-                    const customImageName = response.message.custom_image_name;
+                    if (response?.message?.status === 'success') {
+                        toast('Rebuild started. Monitoring progress...', { type: 'success' });
+                        this.resumeDeployment(siteName);
+                    } else {
+                        throw new Error(response?.message?.message || 'Rebuild failed');
+                    }
+                } catch (error) {
+                    console.error('Rebuild error:', error);
+                    toast(error.message || 'Failed to start rebuild', { type: 'danger' });
+                }
+            },
+
+            async buildCustomImage() {
+                const timestamp = Date.now();
+                const imageName = `custom-${timestamp}`;
+
+                try {
+                    const url = '/api/method/nano_press.nano_press.doctype.custom_image.custom_image.create_and_build_custom_image';
+                    const payload = {
+                        server_name: this.$store.installer.serverName,
+                        apps: this.$store.installer.selectedApps,
+                        custom_apps: this.$store.installer.customApps,
+                        image_name: imageName,
+                        frappe_version: this.$store.installer.frappeVersion
+                    };
 
+                    const response = await frappe_call(url, payload, "POST");
 
-                    return await this.pollForBuildCompletion(customImageName);
-                } else if (response?.message?.status === 'error') {
-                    throw new Error(response.message.message || 'Failed to start build');
-                } else {
-                    throw new Error('Unexpected response from build API');
+                    if (response?.message?.custom_image_name) {
+                        const customImageName = response.message.custom_image_name;
+                        return customImageName;
+                    } else if (response?.message?.status === 'error') {
+                        throw new Error(response.message.message || 'Failed to start build');
+                    } else {
+                        throw new Error('Unexpected response from build API');
+                    }
+                } catch (error) {
+                    console.error('Build error:', error);
+                    throw error;
+                }
+            },
+
+            async fetchSiteCredentials(siteName) {
+                try {
+                    const url = '/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.get_site_credentials';
+                    const payload = {
+                        site_name: siteName
+                    };
+
+                    const response = await frappe_call(url, payload, "POST");
+
+                    if (response?.message) {
+                        this.siteUsername = response.message.username || 'Administrator';
+                        this.sitePassword = response.message.password || '';
+                    }
+                } catch (error) {
+                    console.error('Error fetching credentials:', error);
+                    this.siteUsername = 'Administrator';
+                    this.sitePassword = 'Check site document for password';
+                }
+            },
+
+            async resumeDeployment(siteName) {
+                this.deploying = true;
+                this.deploymentStatus = 'Resuming deployment...';
+
+                if (this.pollIntervalId) {
+                    clearInterval(this.pollIntervalId);
+                    this.pollIntervalId = null;
                 }
-            } catch (error) {
-                console.error('Build error:', error);
-                throw error;
-            }
-        },
 
-        async pollForBuildCompletion(customImageName) {
-            return new Promise((resolve, reject) => {
-                const pollInterval = setInterval(async () => {
+                this.pollIntervalId = setInterval(async () => {
                     try {
-                        const url = '/api/method/nano_press.nano_press.doctype.custom_image.custom_image.get_build_status';
-                        const payload = {
-                            custom_image_name: customImageName
-                        };
+                        const url = `/api/resource/Frappe Site/${siteName}`;
+                        const response = await frappe_call(url, {}, "GET");
+
+                        if (!response?.data) {
+                            throw new Error('Failed to fetch site status');
+                        }
+
+                        const status = response.data.status;
+                        console.log('Site status:', status);
+
+                        if (status === 'Building') {
+                            this.deploymentStatus = 'Building custom image...';
+                            this.deployStep = 2;
+
+                        } else if (status === 'Build Failed') {
+                            clearInterval(this.pollIntervalId);
+                            this.pollIntervalId = null;
+                            this.deploying = false;
+                            this.deploymentStatus = 'Custom image build failed';
+                            this.deployStep = 2;
+
+                            toast('Custom image build failed. Click Rebuild to try again.', { type: 'danger' });
+
+                        } else if (status === 'Ready To Deploy') {
+                            clearInterval(this.pollIntervalId);
+                            this.pollIntervalId = null;
+                            this.deploymentStatus = 'Preparing deployment...';
+                            this.deployStep = 4;
 
-                        const response = await frappe_call(url, payload, "POST");
+                            try {
+                                await this.callPrepareForDeployment(siteName);
 
-                        if (response?.message) {
-                            const status = response.message.status;
+                                toast('Deployment prepared successfully!', { type: 'success' });
 
-                            if (status === 'Built') {
-                                clearInterval(pollInterval);
-                                resolve(customImageName);
-                            } else if (status === 'Failed') {
-                                clearInterval(pollInterval);
-                                reject(new Error('Custom image build failed'));
+                                await new Promise(resolve => setTimeout(resolve, 1000));
+
+                                this.deploymentStatus = 'Deploying site (starting containers)...';
+                                this.deployStep = 5;
+
+                                await this.callDeploySite(siteName);
+
+                                toast('Site deployed successfully!', { type: 'success' });
+
+                                this.$store.installer.siteName = siteName;
+                                this.$store.installer.siteUrl = response.data.site_url || '';
+
+                                this.deploying = false;
+                                this.deployComplete = true;
+
+                                window.history.replaceState({}, '', `/self-host?complete=true&site=${siteName}`);
+
+                                await this.fetchSiteCredentials(siteName);
+
+                                toast('Deployment completed successfully!', { type: 'success' });
+                            } catch (error) {
+                                console.error('Deployment continuation failed:', error);
+                                this.deploying = false;
+                                this.deploymentStatus = 'Deployment failed';
+                                toast(error.message || 'Deployment failed', { type: 'danger' });
                             }
+
+                        } else if (status === 'Deployed') {
+                            clearInterval(this.pollIntervalId);
+                            this.pollIntervalId = null;
+                            this.deploying = false;
+                            this.deployComplete = true;
+                            this.deployStep = 5;
+
+                            window.history.replaceState({}, '', `/self-host?complete=true&site=${siteName}`);
+
+                            this.$store.installer.siteName = siteName;
+                            this.$store.installer.siteUrl = response.data.site_url || '';
+
+                            await this.fetchSiteCredentials(siteName);
+
+                            toast('Deployment completed!', { type: 'success' });
+
+                        } else if (status === 'Failed') {
+                            clearInterval(this.pollIntervalId);
+                            this.pollIntervalId = null;
+                            this.deploying = false;
+                            this.deploymentStatus = 'Deployment failed';
+
+                            toast('Deployment failed. Please check logs.', { type: 'danger' });
+
+                        } else {
+                            this.deploymentStatus = `Current status: ${status}`;
+                            this.deployStep = this.getStepFromStatus(status);
                         }
+
                     } catch (error) {
-                        console.error('Failed to poll build status:', error);
+                        console.error('Failed to poll deployment status:', error);
                     }
-                }, 5000);
-            });
-        },
-
-        async fetchSiteCredentials(siteName) {
-            try {
-                const url = '/api/method/nano_press.nano_press.doctype.frappe_site.frappe_site.get_site_credentials';
-                const payload = {
-                    site_name: siteName
-                };
+                }, 3000);
+            },
 
-                const response = await frappe_call(url, payload, "POST");
+            async resumeCompletedDeployment(siteName) {
+                this.deploying = false;
+                this.deployComplete = true;
+                this.deployStep = 5;
+
+                try {
+                    const url = `/api/resource/Frappe Site/${siteName}`;
+                    const response = await frappe_call(url, {}, "GET");
 
-                if (response?.message) {
-                    this.siteUsername = response.message.username || 'Administrator';
-                    this.sitePassword = response.message.password || '';
+                    if (response?.data) {
+                        this.$store.installer.siteName = siteName;
+                        this.$store.installer.siteUrl = response.data.site_url || '';
+                    }
+
+                    await this.fetchSiteCredentials(siteName);
+
+                } catch (error) {
+                    console.error('Failed to load completed deployment:', error);
+                    toast('Could not load deployment details', { type: 'warning' });
                 }
-            } catch (error) {
-                console.error('Error fetching credentials:', error);
-                this.siteUsername = 'Administrator';
-                this.sitePassword = 'Check site document for password';
+            },
+
+            getStepFromStatus(status) {
+                const statusMap = {
+                    'Not Deployed': 1,
+                    'Building': 2,
+                    'Build Failed': 2,
+                    'Ready To Deploy': 4,
+                    'Deploying': 4,
+                    'Deployed': 5
+                };
+                return statusMap[status] || 1;
             }
-        }
-    };
-}
-</script>
+        };
+    }
+</script>
\ No newline at end of file
diff --git a/nano_press/templates/includes/home/custom_app_modal.html b/nano_press/templates/includes/home/custom_app_modal.html
deleted file mode 100644
index 098bd0b..0000000
--- a/nano_press/templates/includes/home/custom_app_modal.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div x-show="showCustomAppDialog"
-     class="modal-overlay"
-     @click.self="showCustomAppDialog = false">
-    <div class="modal" @click.stop>
-        <h3>Add Custom App</h3>
-
-        <div class="form-group">
-            <label>App Name</label>
-            <input type="text" x-model="customAppForm.name" placeholder="my-custom-app">
-        </div>
-
-        <div class="form-group">
-            <label>GitHub URL</label>
-            <input type="text" x-model="customAppForm.githubUrl" placeholder="https://github.com/user/repo">
-        </div>
-
-        <div class="form-group">
-            <label>GitHub Token</label>
-            <input type="password" x-model="customAppForm.token" placeholder="ghp_xxxxxxxxxxxx">
-        </div>
-
-        <div class="btn-group">
-            <button @click="showCustomAppDialog = false" class="btn btn-secondary">Cancel</button>
-            <button @click="addCustomApp()" class="btn btn-primary">Add App</button>
-        </div>
-    </div>
-</div>
diff --git a/nano_press/templates/includes/home/header.html b/nano_press/templates/includes/home/header.html
deleted file mode 100644
index 330b23e..0000000
--- a/nano_press/templates/includes/home/header.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="header">
-    <h1>Self Host Frappe</h1>
-    <p>Deploy your Frappe applications in minutes</p>
-</div>
diff --git a/nano_press/templates/includes/home/step_domain.html b/nano_press/templates/includes/home/step_domain.html
deleted file mode 100644
index aac19f1..0000000
--- a/nano_press/templates/includes/home/step_domain.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div x-show="currentStep === 3" class="fade-in">
-    <h2>Domain</h2>
-
-    <div class="form-group">
-        <label>Domain (Optional)</label>
-        <input type="text" x-model="domain" placeholder="example.com">
-        <p class="hint">Leave empty to skip domain setup</p>
-    </div>
-
-    <div class="btn-group">
-        <button @click="prevStep()" class="btn btn-secondary">Back</button>
-        <button @click="nextStep()" class="btn btn-primary">Continue</button>
-    </div>
-</div>
diff --git a/nano_press/templates/includes/home/step_select_apps.html b/nano_press/templates/includes/home/step_select_apps.html
deleted file mode 100644
index e02a528..0000000
--- a/nano_press/templates/includes/home/step_select_apps.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<div x-show="currentStep === 2" class="fade-in">
-    <h2>Select Apps</h2>
-
-    <div>
-        <label>Frappe Version</label>
-        <div class="version-select">
-            <button @click="frappeVersion = 'version-15'"
-                    :class="frappeVersion === 'version-15' ? 'active' : ''"
-                    class="version-btn">
-                Version 15
-            </button>
-            <button @click="frappeVersion = 'nightly'"
-                    :class="frappeVersion === 'nightly' ? 'active' : ''"
-                    class="version-btn">
-                Nightly
-            </button>
-        </div>
-    </div>
-
-    <div>
-        <label>Apps</label>
-        <div class="app-grid">
-            <template x-for="app in availableApps" :key="app.id">
-                <button @click="toggleApp(app.id)"
-                        :class="selectedApps.includes(app.id) ? 'selected' : ''"
-                        class="app-card">
-                    <div class="app-card-title" x-text="app.name"></div>
-                    <div class="app-card-desc" x-text="app.desc"></div>
-                </button>
-            </template>
-        </div>
-    </div>
-
-    <button @click="showCustomAppDialog = true" class="add-custom-btn">
-        <span style="font-size: 1.25rem;">+</span> Add Custom App
-    </button>
-
-    <template x-if="customApps.length > 0">
-        <div class="custom-app-list">
-            <template x-for="(app, index) in customApps" :key="index">
-                <div class="custom-app-item">
-                    <span x-text="app.name"></span>
-                    <button @click="removeCustomApp(index)" class="remove-btn">Remove</button>
-                </div>
-            </template>
-        </div>
-    </template>
-
-    <div class="btn-group">
-        <button @click="prevStep()" class="btn btn-secondary">Back</button>
-        <button @click="nextStep()" class="btn btn-primary">Continue</button>
-    </div>
-</div>
diff --git a/nano_press/templates/includes/home/step_server_details.html b/nano_press/templates/includes/home/step_server_details.html
deleted file mode 100644
index d9ef4b9..0000000
--- a/nano_press/templates/includes/home/step_server_details.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div x-show="currentStep === 1" class="fade-in">
-    <h2>Server Details</h2>
-
-    <div class="form-group">
-        <label>IP Address</label>
-        <input type="text" x-model="serverDetails.ip" placeholder="192.168.1.100">
-    </div>
-
-    <div class="form-group">
-        <label>SSH Public Key</label>
-        <div class="textarea-wrapper">
-            <textarea x-model="generatedSSHKey" rows="3" readonly style="padding-right: 4rem;"></textarea>
-            <button @click="copyToClipboard()" class="copy-btn" x-text="copied ? 'Copied' : 'Copy'"></button>
-        </div>
-        <p class="hint">Copy this key and add it to your server. <a href="https://www.ssh.com/academy/ssh/authorized-keys" target="_blank">Learn how</a></p>
-    </div>
-
-    <div class="accordion">
-        <div class="accordion-header" @click="showAdvanced = !showAdvanced">
-            <span>Advanced Settings</span>
-            <svg class="accordion-icon" :class="showAdvanced ? 'open' : ''" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-            </svg>
-        </div>
-        <div x-show="showAdvanced" x-transition class="accordion-content">
-            <div class="form-group" style="margin-bottom: 1rem;">
-                <label>Root User</label>
-                <input type="text" x-model="serverDetails.rootUser" placeholder="root">
-            </div>
-
-            <div class="form-group" style="margin-bottom: 0;">
-                <label>SSH Port</label>
-                <input type="text" x-model="serverDetails.sshPort" placeholder="22">
-            </div>
-        </div>
-    </div>
-
-    <button @click="nextStep()" class="btn btn-primary" style="margin-top: 1.5rem;">
-        Continue
-    </button>
-</div>
diff --git a/nano_press/templates/includes/home/step_summary.html b/nano_press/templates/includes/home/step_summary.html
deleted file mode 100644
index c418012..0000000
--- a/nano_press/templates/includes/home/step_summary.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<div x-show="currentStep === 4" class="fade-in">
-    <h2>Summary</h2>
-
-    <div x-show="!deploying && !deployComplete">
-        <div class="summary-card">
-            <h3>Server</h3>
-            <p><span class="label">IP:</span> <span x-text="serverDetails.ip"></span></p>
-            <p><span class="label">User:</span> <span x-text="serverDetails.rootUser"></span></p>
-            <p><span class="label">Port:</span> <span x-text="serverDetails.sshPort"></span></p>
-        </div>
-
-        <div class="summary-card">
-            <h3>Configuration</h3>
-            <p><span class="label">Version:</span> <span x-text="frappeVersion"></span></p>
-            <p><span class="label">Apps:</span> <span x-text="getSelectedAppsNames()"></span></p>
-            <template x-if="domain">
-                <p><span class="label">Domain:</span> <span x-text="domain"></span></p>
-            </template>
-        </div>
-
-        <div class="btn-group">
-            <button @click="prevStep()" class="btn btn-secondary">Back</button>
-            <button @click="startDeployment()" class="btn btn-primary">Deploy</button>
-        </div>
-    </div>
-
-    <div x-show="deploying" class="deploy-status">
-        <div class="spinner"></div>
-        <h3>Deploying</h3>
-        <p x-text="deploymentStatus"></p>
-
-        <div class="deploy-steps">
-            <div class="deploy-step" :class="deployStep >= 1 ? 'active' : ''">
-                <div class="step-indicator" :class="deployStep >= 1 ? 'complete' : ''"></div>
-                <span>Preparing server</span>
-            </div>
-            <div class="deploy-step" :class="deployStep >= 2 ? 'active' : ''">
-                <div class="step-indicator" :class="deployStep >= 2 ? 'complete' : ''"></div>
-                <span>Deploying site</span>
-            </div>
-        </div>
-    </div>
-
-    <div x-show="deployComplete" class="deploy-status">
-        <div class="success-icon">
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-            </svg>
-        </div>
-        <h3 style="font-size: 1.25rem;">Deployment Complete</h3>
-        <p style="margin-bottom: 1.5rem;">Your Frappe site is ready</p>
-
-        <button @click="visitSite()" class="btn btn-primary" style="max-width: 16rem; margin: 0 auto;">
-            Access Site
-        </button>
-    </div>
-</div>
diff --git a/nano_press/templates/includes/home/stepper.html b/nano_press/templates/includes/home/stepper.html
deleted file mode 100644
index 8e13c1e..0000000
--- a/nano_press/templates/includes/home/stepper.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="stepper">
-    <div class="stepper-line"></div>
-    <div class="stepper-progress" :style="`width: ${(currentStep - 1) * 33.33}%`"></div>
-
-    <template x-for="i in 4" :key="i">
-        <div class="stepper-item">
-            <div class="stepper-circle" :class="i <= currentStep ? 'active' : ''">
-                <span x-text="i"></span>
-            </div>
-            <span class="stepper-label" x-text="stepNames[i-1]"></span>
-        </div>
-    </template>
-</div>
diff --git a/nano_press/www/home.html b/nano_press/www/home.html
deleted file mode 100644
index 3a3cf88..0000000
--- a/nano_press/www/home.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% extends "templates/__base.html" %}
-
-{% block page_title %}Self Host Frappe{% endblock %}
-
-{% block head %}
-    {{ super() }}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.3/cdn.min.js" defer></script>
-    <link rel="stylesheet" href="/assets/nano_press/css/style.css">
-{% endblock %}
-
-{% block page_content %}
-<div x-data="frappeInstaller()" class="container">
-    {% include "templates/includes/home/header.html" %}
-    {% include "templates/includes/home/stepper.html" %}
-
-    <div class="card">
-        {% include "templates/includes/home/step_server_details.html" %}
-        {% include "templates/includes/home/step_select_apps.html" %}
-        {% include "templates/includes/home/step_domain.html" %}
-        {% include "templates/includes/home/step_summary.html" %}
-    </div>
-
-    {% include "templates/includes/home/custom_app_modal.html" %}
-</div>
-{% endblock %}
-
-{% block script %}
-    {{ super() }}
-    <script src="/assets/nano_press/js/script.js"></script>
-{% endblock %}
diff --git a/nano_press/www/self-host.html b/nano_press/www/self-host.html
index 471242b..d31107f 100644
--- a/nano_press/www/self-host.html
+++ b/nano_press/www/self-host.html
@@ -22,7 +22,6 @@
 {% block script %}
 {{ super() }}
 <script>
-    // Create Alpine.store for shared state with persistence
     document.addEventListener('alpine:init', () => {
         Alpine.store('installer', {
             currentStep: Alpine.$persist(1).as('nano_press_current_step'),
@@ -32,96 +31,21 @@
                 sshPort: '22'
             }).as('nano_press_server_details'),
             isVerified: Alpine.$persist(false).as('nano_press_is_verified'),
-            serverName: Alpine.$persist(null).as('nano_press_server_name'),  // Store the server document name
+            serverName: Alpine.$persist(null).as('nano_press_server_name'),
             selectedApps: Alpine.$persist([]).as('nano_press_selected_apps'),
             customApps: Alpine.$persist([]).as('nano_press_custom_apps'),
-            frappeVersion: Alpine.$persist('Version-15').as('nano_press_frappe_version'),
+            frappeVersion: Alpine.$persist('version-15').as('nano_press_frappe_version'),
             domain: Alpine.$persist('').as('nano_press_domain'),
             domainVerified: Alpine.$persist(false).as('nano_press_domain_verified'),
-            siteName: Alpine.$persist(null).as('nano_press_site_name'),  // Store the Frappe Site document name
-            siteUrl: Alpine.$persist(null).as('nano_press_site_url')  // Store the generated site URL
+            siteName: Alpine.$persist(null).as('nano_press_site_name'),
+            siteUrl: Alpine.$persist(null).as('nano_press_site_url')
         });
     });
 
     function frappeInstaller() {
-        const data = {
+        return {
             stepNames: ['Server', 'Apps', 'Domain', 'Deploy'],
-            showAdvanced: false,
-            
-            generatedSSHKey: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC7... frappe@deploy',
-            showCustomAppDialog: false,
-            customAppForm: {
-                name: '',
-                githubUrl: '',
-                token: ''
-            },
-
-            domain: '',
-            domainVerified: false,
-            domainStatusMessage: '',
-            isLoading: false,
-
-            deploying: false,
-            deployComplete: false,
-            deployStep: 0,
-            deploymentStatus: 'Preparing server...',
-
-            copied: false,
-
-            copyToClipboard() {
-                navigator.clipboard.writeText(this.generatedSSHKey).then(() => {
-                    this.copied = true;
-                    setTimeout(() => {
-                        this.copied = false;
-                    }, 2000);
-                });
-            },
-
-            toggleApp(appId) {
-                const index = this.selectedApps.indexOf(appId);
-                if (index > -1) {
-                    this.selectedApps.splice(index, 1);
-                } else {
-                    this.selectedApps.push(appId);
-                }
-            },
-
-
-            getSelectedAppsNames() {
-                const appNames = this.selectedApps.map(id => {
-                    const app = this.availableApps.find(a => a.id === id);
-                    return app ? app.name : '';
-                });
-                const allApps = [...appNames, ...this.customApps.map(a => a.name)];
-                return allApps.join(', ') || 'None';
-            },
-
-            startDeployment() {
-                this.deploying = true;
-                this.deployStep = 0;
-
-                setTimeout(() => {
-                    this.deployStep = 1;
-                    this.deploymentStatus = 'Preparing server...';
-                }, 1000);
-
-                setTimeout(() => {
-                    this.deployStep = 2;
-                    this.deploymentStatus = 'Deploying site...';
-                }, 3000);
-
-                setTimeout(() => {
-                    this.deploying = false;
-                    this.deployComplete = true;
-                }, 5000);
-            },
-
-            visitSite() {
-                const siteUrl = this.domain || this.serverDetails.ip;
-                alert(`Opening site: ${siteUrl}`);
-            },
 
-            // Access store properties
             get currentStep() { return this.$store.installer.currentStep; },
             get serverDetails() { return this.$store.installer.serverDetails; },
             get selectedApps() { return this.$store.installer.selectedApps; },
@@ -142,8 +66,6 @@
                 }
             }
         };
-        
-        return data;
     }
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/nano_press/www/self_host.py b/nano_press/www/self_host.py
index 775c91e..99c93d1 100644
--- a/nano_press/www/self_host.py
+++ b/nano_press/www/self_host.py
@@ -7,11 +7,31 @@ def get_context(context):
 	context.public_key = Server._read_local_public_key()
 	context.apps = get_apps()
 	context.user_email = frappe.session.user
+	context.user_servers = get_user_servers()
+	context.frappe_versions = get_frappe_versions()
 	return context
 
 
+def get_user_servers():
+	return frappe.get_all(
+		"Server",
+		filters={"owner": frappe.session.user},
+		fields=["name", "server_ip", "ssh_user", "ssh_port", "verify_status"],
+		order_by="creation desc",
+	)
+
+
 def get_apps():
-	apps = frappe.db.get_list(
-		"Apps", filters={"is_public": 1, "enabled": 1}, fields=["name", "branch", "repo_url", "scrubbed_name"]
+	return frappe.get_all(
+		"Apps",
+		filters={"is_public": 1, "enabled": 1},
+		fields=["name", "branch", "repo_url", "scrubbed_name", "frappe", "app_logo"],
+	)
+
+
+def get_frappe_versions():
+	return frappe.get_all(
+		"App Version",
+		fields=["version", "scrubbed_version"],
+		order_by="creation asc",
 	)
-	return apps
