diff --git a/official-templates/better-ai-launcher/app/templates/index.html b/official-templates/better-ai-launcher/app/templates/index.html
index d07a176..0d2408c 100644
--- a/official-templates/better-ai-launcher/app/templates/index.html
+++ b/official-templates/better-ai-launcher/app/templates/index.html
@@ -727,29 +727,29 @@
         }
 
         .settings-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
             padding: 20px;
-            width: 100%;
             box-sizing: border-box;
-            height: 100%;
-            overflow-y: auto;
+            width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
         }
 
         .settings-grid {
-            display: grid;
-            gap: 20px;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-            margin-bottom: 20px;
-            max-width: 1800px; /* Prevent excessive stretching on very wide screens */
-            margin: 0 auto;
+            flex: 1 1 400px; /* Changed from just flex: 1 to better control growth */
+            min-width: 400px;
+            max-width: none; /* Remove max-width restriction */
         }
 
         .setting-group {
             background-color: #2a2a2a;
             border-radius: 10px;
             padding: 20px;
-            height: fit-content;
-            min-width: unset; /* Remove fixed min-width */
-            max-width: 100%;
+            width: 100%;
+            box-sizing: border-box;
+            margin-bottom: 20px;
         }
 
         .setting-group h3 {
@@ -822,6 +822,7 @@
             flex-direction: column;
             gap: 10px;
             width: 100%;
+            max-width: none;
         }
 
         .model-downloader input,
@@ -848,18 +849,17 @@
 
         .example-urls {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
             gap: 15px;
-            background-color: #333;
-            border-radius: 5px;
+            width: 100%;
             padding: 15px;
-            margin-top: 10px;
+            box-sizing: border-box;
         }
 
         .example-url {
             display: grid;
-            grid-template-columns: 120px 1fr;
-            gap: 10px;
+            grid-template-columns: 150px 1fr;
+            gap: 15px;
             align-items: center;
         }
 
@@ -886,15 +886,14 @@
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 20px;
             width: 100%;
-            max-width: 1800px;
-            margin: 0 auto;
         }
 
         .model-folder {
             background-color: #333;
             border-radius: 5px;
-            padding: 15px;
+            padding: 20px;
             height: fit-content;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
 
         #model-download-progress {
@@ -1069,6 +1068,7 @@
             position: relative;
         }
 
+
         #logs {
             flex: 1;
             overflow-y: auto;
@@ -1083,55 +1083,55 @@
         }
 
         /* Add responsive styles */
-        @media screen and (max-width: 1200px) {
-            .settings-grid,
-            .model-management-container {
-                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-            }
-            
-            .model-folders-grid {
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            }
+        @media screen and (max-width: 1600px) {
+        .settings-grid {
+            flex: 1 1 350px;
+            min-width: 350px;
         }
-
-        @media screen and (max-width: 768px) {
-            .settings-grid,
-            .model-management-container {
-                grid-template-columns: 1fr;
-            }
-
-            .model-folders-grid {
-                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            }
-
-            .settings-container {
-                padding: 15px;
-            }
+        
+        .model-folders-grid {
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         }
-
-        @media screen and (max-width: 480px) {
-            .settings-container {
-                padding: 10px;
-            }
-
-            .setting-group {
-                padding: 15px;
-            }
-
-            .model-folders-grid {
-                grid-template-columns: 1fr;
-            }
+        
+        .example-urls {
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
         }
+    }
 
-        /* Update the models tab layout */
-        #models-tab .settings-container {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            padding: 20px;
-            height: 100%;
-            overflow-y: auto;
+    @media screen and (max-width: 1200px) {
+        .settings-grid {
+            flex: 1 1 300px;
+            min-width: 300px;
         }
+        
+        .model-folders-grid {
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        }
+        
+        .example-urls {
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        .settings-grid {
+            flex: 1 1 100%;
+            min-width: 100%;
+        }
+        
+        .model-folders-grid {
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        }
+        
+        .example-urls {
+            grid-template-columns: 1fr;
+        }
+        
+        .example-url {
+            grid-template-columns: 120px 1fr;
+        }
+    }
+
 
         /* Make all top sections the same height */
         .model-downloader-section,
@@ -1284,6 +1284,1058 @@
             background-color: #4CAF50;
             transition: width 0.3s ease;
         }
+
+        /* Update the settings container layout */
+        .settings-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            padding: 20px;
+            box-sizing: border-box;
+            width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
+        }
+
+        .settings-grid {
+            flex: 1 1 400px; /* Changed from just flex: 1 to better control growth */
+            min-width: 400px;
+            max-width: none; /* Remove max-width restriction */
+        }
+
+        .setting-group {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            width: 100%;
+            box-sizing: border-box;
+            margin-bottom: 20px;
+        }
+
+        /* Update model folders grid for better responsiveness */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            width: 100%;
+        }
+
+        /* Add responsive breakpoints */
+        @media screen and (max-width: 1600px) {
+            .settings-grid {
+                flex: 1 1 350px;
+                min-width: 350px;
+            }
+            
+            .model-folders-grid {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+            
+            .example-urls {
+                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            }
+        }
+
+        @media screen and (max-width: 1200px) {
+            .settings-grid {
+                flex: 1 1 300px;
+                min-width: 300px;
+            }
+            
+            .model-folders-grid {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            }
+            
+            .example-urls {
+                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            .settings-grid {
+                flex: 1 1 100%;
+                min-width: 100%;
+            }
+            
+            .model-folders-grid {
+                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            }
+            
+            .example-urls {
+                grid-template-columns: 1fr;
+            }
+            
+            .example-url {
+                grid-template-columns: 120px 1fr;
+            }
+        }
+
+        /* Add horizontal scrolling prevention */
+        body {
+            overflow-x: hidden;
+        }
+
+        .content-container {
+            max-width: 100vw;
+            overflow-x: hidden;
+        }
+
+        /* Ensure proper tab content sizing */
+        .tab-content {
+            width: 100%;
+            max-width: 100%;
+            padding: 0;
+            margin: 0;
+        }
+
+        /* Update example URLs section */
+        .example-urls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+            gap: 15px;
+            width: 100%;
+            padding: 15px;
+            box-sizing: border-box;
+        }
+
+        .example-url {
+            display: grid;
+            grid-template-columns: 150px 1fr;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .example-link {
+            word-break: break-all;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        /* Update the models tab container layout */
+        #models-tab .settings-container {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 20px;
+            padding: 20px;
+            box-sizing: border-box;
+            width: 100%;
+            height: calc(100vh - 140px);
+        }
+
+        /* Right column with tabs */
+        .right-column {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* Inner tabs navigation */
+        .inner-tabs {
+            display: flex;
+            background-color: #333;
+            padding: 10px 10px 0;
+            gap: 5px;
+        }
+
+        .inner-tab-link {
+            padding: 10px 20px;
+            background-color: #2a2a2a;
+            border: none;
+            border-radius: 5px 5px 0 0;
+            color: #888;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .inner-tab-link.active {
+            background-color: #4CAF50;
+            color: white;
+        }
+
+        /* Inner tab content */
+        .inner-tab-content {
+            display: none;
+            padding: 20px;
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        .inner-tab-content.active {
+            display: block;
+        }
+
+        /* Settings page grid layout */
+        #settings-tab .settings-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 20px;
+            padding: 20px;
+            max-width: 1800px;
+            margin: 0 auto;
+        }
+
+        /* Settings cards */
+        #settings-tab .setting-group {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            height: fit-content;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 1fr;
+                height: auto;
+            }
+            
+            #settings-tab .settings-container {
+                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            #settings-tab .settings-container {
+                grid-template-columns: 1fr;
+            }
+            
+            .inner-tabs {
+                padding: 5px 5px 0;
+            }
+            
+            .inner-tab-link {
+                padding: 8px 15px;
+                font-size: 14px;
+            }
+        }
+
+        /* Model Downloader section */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 1;
+            grid-row: 1;
+        }
+
+        /* Civitai API Token section */
+        .civitai-token-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 1;
+            grid-row: 2;
+        }
+
+        /* Download Examples section */
+        .download-examples-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 2;
+            grid-row: 1;
+        }
+
+        /* Existing Models section */
+        .model-folders-container {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 2;
+            grid-row: 2;
+            overflow-y: auto;
+        }
+
+        /* Example URLs styling */
+        .example-urls {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 10px;
+            width: 100%;
+        }
+
+        .example-url {
+            display: grid;
+            grid-template-columns: 120px 1fr;
+            gap: 10px;
+            align-items: center;
+            background-color: #333;
+            padding: 8px;
+            border-radius: 4px;
+        }
+
+        /* Model folders grid */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
+            width: 100%;
+        }
+
+        /* Scrollbar styling */
+        .model-folders-container::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .model-folders-container::-webkit-scrollbar-track {
+            background: #1a1a1a;
+            border-radius: 4px;
+        }
+
+        .model-folders-container::-webkit-scrollbar-thumb {
+            background: #4CAF50;
+            border-radius: 4px;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 300px 1fr;
+            }
+            
+            .example-urls {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+        }
+
+        @media screen and (max-width: 900px) {
+            #models-tab .settings-container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto auto 1fr;
+            }
+            
+            .model-downloader-section,
+            .civitai-token-section,
+            .download-examples-section,
+            .model-folders-container {
+                grid-column: 1;
+            }
+            
+            .model-downloader-section { grid-row: 1; }
+            .civitai-token-section { grid-row: 2; }
+            .download-examples-section { grid-row: 3; }
+            .model-folders-container { grid-row: 4; }
+        }
+
+        /* Input and button styling */
+        .model-downloader input,
+        .model-downloader select,
+        .civitai-token-section input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #444;
+            border-radius: 5px;
+            background-color: #333;
+            color: #fff;
+        }
+
+        /* Ensure proper rounded corners and shadows */
+        .model-downloader-section,
+        .civitai-token-section,
+        .download-examples-section,
+        .model-folders-container {
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Left column container */
+        .left-column {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: 100%;
+        }
+
+        /* Model Downloader section */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 1;
+            grid-row: 1;
+        }
+
+        /* Civitai API Token section */
+        .civitai-token-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 1;
+            grid-row: 2;
+        }
+
+        /* Constrain input widths */
+        .model-downloader {
+            max-width: 100%;
+            width: 100%;
+        }
+
+        /* Progress info container */
+        #model-download-progress {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #333;
+            border-radius: 8px;
+        }
+
+        /* Existing Models section */
+        .model-folders-container {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            grid-column: 2;
+            grid-row: 2;
+            overflow-y: auto;
+        }
+
+        /* Model folders grid */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
+            width: 100%;
+        }
+
+        /* Style scrollbars */
+        .model-folders-container::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .model-folders-container::-webkit-scrollbar-track {
+            background: #1a1a1a;
+            border-radius: 4px;
+        }
+
+        .model-folders-container::-webkit-scrollbar-thumb {
+            background: #4CAF50;
+            border-radius: 4px;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 1fr;
+                height: auto;
+                overflow-y: auto;
+            }
+
+            .model-folders-container {
+                max-height: 600px;
+            }
+        }
+
+        /* Ensure proper rounded corners and shadows */
+        .model-downloader-section,
+        .civitai-token-section,
+        .model-folders-container {
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Model folder styling */
+        .model-folder {
+            background-color: #333;
+            border-radius: 8px;
+            padding: 15px;
+        }
+
+        /* Input and button styling */
+        .model-downloader input,
+        .model-downloader select,
+        .civitai-token-section input {
+            width: 100%;
+            padding: 12px;
+            margin-bottom: 10px;
+            border: 1px solid #444;
+            border-radius: 5px;
+            background-color: #333;
+            color: #fff;
+        }
+
+        .model-downloader button,
+        .civitai-token-section button {
+            width: 100%;
+            padding: 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        /* Update settings page layout */
+        #settings-tab .settings-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 20px;
+            padding: 20px;
+            margin-bottom: 60px; /* Space for footer */
+            max-width: 1800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Settings grid items */
+        #settings-tab .settings-grid {
+            min-width: unset;
+            max-width: unset;
+            flex: unset;
+        }
+
+        /* Model folders grid */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 15px;
+            width: 100%;
+        }
+
+        .model-folder {
+            background-color: #333;
+            border-radius: 8px;
+            padding: 15px;
+            height: fit-content;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 1fr; /* Stack on smaller screens */
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            #settings-tab .settings-container {
+                grid-template-columns: 1fr;
+            }
+            
+            .model-folders-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+
+        /* Ensure proper spacing from footer */
+        .content-container {
+            padding-bottom: 60px; /* Space for footer */
+        }
+
+        /* Update footer positioning */
+        .copyright {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: #1a1a1a;
+            padding: 10px;
+            text-align: center;
+            z-index: 100;
+        }
+
+        /* Add container padding to prevent content being cut off by footer */
+        .main-container {
+            padding-bottom: 60px;
+        }
+
+        /* Ensure proper rounded corners and shadows for all cards */
+        .setting-group,
+        .model-downloader-section,
+        .civitai-token-section,
+        .model-folders-container,
+        .model-folder {
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+        /* Update main container to prevent scrolling */
+        .main-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* Content container adjustments */
+        .content-container {
+            flex: 1;
+            overflow: hidden;
+            padding: 0 20px 20px 20px; /* Add padding to prevent content touching edges */
+        }
+
+        /* Models tab layout */
+        #models-tab .settings-container {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 20px;
+            height: calc(100vh - 140px); /* Adjusted height */
+            overflow: hidden;
+        }
+
+        /* Left column */
+        .left-column {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: 100%;
+        }
+
+        /* Model Downloader section with integrated token */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        /* Remove separate Civitai token section since it's now integrated */
+        .civitai-token-section {
+            display: none;
+        }
+
+        /* Right column */
+        .right-column {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        /* Tab content */
+        .inner-tab-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        /* Ensure proper spacing from footer */
+        .copyright {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: #1a1a1a;
+            padding: 10px;
+            text-align: center;
+            z-index: 100;
+        }
+
+        /* Add margin to prevent content being cut off by footer */
+        .settings-container {
+            margin-bottom: 20px;
+        }
+
+        /* Ensure proper rounded corners */
+        .model-downloader-section,
+        .right-column,
+        .model-folder {
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Update scrollbar styling */
+        .inner-tab-content::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .inner-tab-content::-webkit-scrollbar-track {
+            background: #1a1a1a;
+            border-radius: 4px;
+        }
+
+        .inner-tab-content::-webkit-scrollbar-thumb {
+            background: #4CAF50;
+            border-radius: 4px;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 1fr;
+                height: auto;
+                overflow-y: auto;
+            }
+            
+            .model-downloader-section,
+            .right-column {
+                height: auto;
+                max-height: calc(50vh - 100px);
+            }
+        }
+
+        /* Update main container layout */
+        .main-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding-bottom: 40px; /* Reduced padding for footer */
+        }
+
+        /* Content container adjustments */
+        .content-container {
+            flex: 1;
+            overflow: hidden;
+            padding: 0 20px;
+        }
+
+        /* Models tab layout */
+        #models-tab .settings-container {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 20px;
+            height: calc(100vh - 140px); /* Adjusted height */
+            overflow: hidden;
+        }
+
+        /* Model Downloader section */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Group buttons together */
+        .model-downloader {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        /* Adjust input and button spacing */
+        .model-downloader input,
+        .model-downloader select {
+            padding: 10px;
+            margin-bottom: 5px;
+        }
+
+        /* Right column with models */
+        .right-column {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        /* Model folders grid */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 15px;
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        /* Footer adjustments */
+        .copyright {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: #1a1a1a;
+            padding: 8px; /* Reduced padding */
+            text-align: center;
+            z-index: 100;
+            height: 40px; /* Fixed height */
+        }
+
+        /* Progress container */
+        #model-download-progress {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: #333;
+            border-radius: 8px;
+        }
+
+        /* Status messages */
+        #civitaiTokenStatus {
+            margin: 5px 0;
+            font-size: 0.9em;
+        }
+
+        /* Main container adjustments */
+        .main-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding-bottom: 30px; /* Reduced padding for footer */
+        }
+
+        /* Content container */
+        .content-container {
+            flex: 1;
+            overflow: hidden;
+            padding: 10px 20px;
+        }
+
+        /* Models tab layout */
+        #models-tab .settings-container {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 15px;
+            height: calc(100vh - 120px); /* Adjusted to minimize space */
+        }
+
+        /* Model Downloader section */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Model downloader inputs and buttons */
+        .model-downloader input,
+        .model-downloader select {
+            padding: 8px;
+            margin-bottom: 5px;
+        }
+
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            margin-top: 5px;
+        }
+
+        /* Right column */
+        .right-column {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* Model folders grid with balanced padding */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            gap: 10px;
+            padding: 15px;
+            width: calc(100% - 30px); /* Account for padding */
+            margin: 0 15px; /* Add margin for balanced spacing */
+        }
+
+        .model-folder {
+            background-color: #333;
+            border-radius: 8px;
+            padding: 12px;
+            font-size: 0.9em; /* Slightly smaller text */
+            height: fit-content;
+        }
+
+        /* Footer adjustments */
+        .copyright {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: #1a1a1a;
+            padding: 5px; /* Reduced padding */
+            text-align: center;
+            z-index: 100;
+            height: 30px; /* Reduced height */
+        }
+
+        /* Progress container */
+        #model-download-progress {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #333;
+            border-radius: 8px;
+        }
+
+        /* Inner tab content */
+        .inner-tab-content {
+            padding: 15px;
+            overflow-y: auto; /* Prevent scrolling */
+        }
+
+        /* Example URLs */
+        .example-urls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 10px;
+            padding: 0;
+        }
+
+        .example-url {
+            padding: 8px;
+            font-size: 0.9em;
+        }
+
+        /* Ensure proper spacing and alignment */
+        h3 {
+            margin: 0 0 10px 0;
+        }
+
+        /* Responsive adjustments */
+        @media screen and (max-width: 1400px) {
+            .model-folders-grid {
+                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            }
+        }
+
+        @media screen and (max-width: 1200px) {
+            #models-tab .settings-container {
+                grid-template-columns: 300px 1fr;
+            }
+        }
+
+        /* Model folders grid with no horizontal scroll */
+        .model-folders-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            gap: 10px;
+            padding: 15px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        /* Inner tab content */
+        .inner-tab-content {
+            padding: 15px;
+            overflow-y: auto;
+            overflow-x: hidden; /* Prevent horizontal scroll */
+            height: 100%;
+        }
+
+        /* Model folder */
+        .model-folder {
+            background-color: #333;
+            border-radius: 8px;
+            padding: 12px;
+            font-size: 0.9em;
+            word-break: break-word; /* Allow text to wrap */
+        }
+
+        /* Right column container */
+        .right-column {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden;
+            width: 100%;
+        }
+
+        /* Progress container styling */
+        #model-download-progress {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: #333;
+            border-radius: 8px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        /* Progress bar */
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background-color: #444;
+            border-radius: 10px;
+            overflow: hidden;
+            margin-bottom: 10px;
+        }
+
+        .progress-bar-fill {
+            height: 100%;
+            background-color: #4CAF50;
+            transition: width 0.3s ease-out;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 12px;
+        }
+
+        /* Status messages */
+        #model-download-status,
+        #model-download-speed,
+        #model-download-eta {
+            padding: 5px 0;
+            font-size: 14px;
+            line-height: 1.4;
+            color: #fff;
+            white-space: normal; /* Allow text to wrap */
+            word-break: break-word;
+            margin-bottom: 5px;
+        }
+
+        /* Model downloader section */
+        .model-downloader-section {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            height: auto; /* Allow section to grow with content */
+            min-height: 200px;
+        }
+
+        /* Button group */
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        /* Status messages with better spacing */
+        #model-download-status {
+            padding: 5px 0;
+            font-size: 14px;
+            line-height: 1.4;
+            color: #fff;
+            white-space: normal;
+            word-break: break-word;
+            margin-bottom: 15px; /* Increased margin for better spacing */
+        }
+
+        #model-download-speed,
+        #model-download-eta {
+            padding: 5px 0;
+            font-size: 14px;
+            line-height: 1.4;
+            color: #fff;
+            white-space: normal;
+            word-break: break-word;
+            margin-bottom: 5px;
+        }
+
+        /* Progress container */
+        #model-download-progress {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: #333;
+            border-radius: 8px;
+            width: 100%;
+            box-sizing: border-box;
+        }
     </style>
 </head>
 <body>
@@ -1366,7 +2418,7 @@
                                                 <div class="download-info">
                                                     <span class="download-speed"></span>
                                                     <span class="download-eta"></span>
-                                                </div>
+                                                </div>4
                                                 <div class="install-stage"></div>
                                             </div>
                                         </div>
@@ -1412,6 +2464,12 @@
                         <div class="setting-group">
                             <h3>File Browser</h3>
                             <button onclick="openFileBrowser()" class="settings-button">Open File Browser</button>
+                            <!-- lutzapps - re-added default logon information -->
+                            <p style="font-size: 16px; line-height: 1.5;">
+                                Default credentials:<br>
+                                <strong>Username:</strong> admin<br>
+                                <strong>Password:</strong> admin
+                            </p>
                             <p>Status: <span id="filebrowser-status">Checking...</span></p>
                             <button id="start-filebrowser" onclick="controlFileBrowser('start')" class="settings-button">Start File Browser</button>
                             <button id="stop-filebrowser" onclick="controlFileBrowser('stop')" class="settings-button">Stop File Browser</button>
@@ -1430,8 +2488,9 @@
             </div>
             <div id="models-tab" class="tab-content">
                 <div class="settings-container">
-                    <div class="settings-grid">
-                        <div class="setting-group">
+                    <div class="left-column">
+                        <!-- Model Downloader Section -->
+                        <div class="model-downloader-section">
                             <h3>Model Downloader</h3>
                             <div class="model-downloader">
                                 <input type="text" id="modelUrl" placeholder="Enter Civitai or Hugging Face URL">
@@ -1444,7 +2503,10 @@
                                 </select>
                                 <input type="password" id="civitaiToken" placeholder="Civitai API Token">
                                 <input type="password" id="hfToken" placeholder="Hugging Face API Token (optional)">
-                                <button onclick="downloadModel()" class="settings-button">Download Model</button>
+                                <div class="button-group">
+                                    <button onclick="saveCivitaiToken()" class="settings-button">Save Civitai Token</button>
+                                    <button onclick="downloadModel()" class="settings-button">Download Model</button>
+                                </div>
                             </div>
                             <div id="model-download-progress" style="display: none;">
                                 <div class="progress-bar">
@@ -1455,18 +2517,24 @@
                                 <div id="model-download-eta"></div>
                             </div>
                         </div>
-                        
-                        <div class="setting-group">
+
+                        <!-- Civitai API Token Section -->
+                        <div class="civitai-token-section">
                             <h3>Civitai API Token</h3>
-                            <div class="model-downloader">
-                                <input type="password" id="civitaiTokenSave" placeholder="Enter Civitai API Token">
-                                <button onclick="saveCivitaiToken()" class="settings-button">Save Token</button>
-                            </div>
+                            <input type="password" id="civitaiTokenSave" placeholder="Enter Civitai API Token">
+                            <button onclick="saveCivitaiToken()" class="settings-button">Save Token</button>
                             <p id="civitaiTokenStatus"></p>
                         </div>
+                    </div>
+
+                    <!-- Right Column with Tabs -->
+                    <div class="right-column">
+                        <div class="inner-tabs">
+                            <button class="inner-tab-link active" onclick="switchInnerTab(event, 'example-urls')">Example URLs</button>
+                            <button class="inner-tab-link" onclick="switchInnerTab(event, 'existing-models')">Existing Models</button>
+                        </div>
                         
-                        <div class="setting-group">
-                            <h3>Download Examples</h3>
+                        <div id="example-urls" class="inner-tab-content active">
                             <div class="example-urls">
                                 <div class="example-url">
                                     <span class="example-label">Stable Diffusion:</span>
@@ -1494,13 +2562,13 @@
                                 </div>
                             </div>
                         </div>
+                        
+                        <div id="existing-models" class="inner-tab-content">
+                            <div class="model-folders-grid" id="model-folders">
+                                <!-- Model folders will be populated dynamically -->
+                            </div>
+                        </div>
                     </div>
-                    
-                    <div class="setting-group" style="width: 100%;">
-                        <h3>Existing Models</h3>
-                        <div id="model-folders" class="model-folders-grid"></div>
-                    </div>
-                    <div id="recreate-symlinks-container" style="display: none;"></div>
                 </div>
             </div>
         </div>
@@ -2040,7 +3108,7 @@
                 document.body.removeChild(modal);
             }
         }
-    }
+    } // Added missing closing bracket here
 
     function selectVersion(versionId, url, modelName, modelType, civitaiToken, hfToken) {
         document.body.removeChild(document.body.lastChild); // Remove the dialog
@@ -2739,6 +3807,20 @@
         }
     }
 
+    function switchInnerTab(evt, tabName) {
+        const innerTabContents = document.getElementsByClassName('inner-tab-content');
+        for (let content of innerTabContents) {
+            content.classList.remove('active');
+        }
+        
+        const innerTabLinks = document.getElementsByClassName('inner-tab-link');
+        for (let link of innerTabLinks) {
+            link.classList.remove('active');
+        }
+        
+        document.getElementById(tabName).classList.add('active');
+        evt.currentTarget.classList.add('active');
+    }
     </script>
 </body>
 </html>
\ No newline at end of file