diff --git a/packages/web/src/LoginPage.svelte b/packages/web/src/LoginPage.svelte
index b1b0af48d..bcb0bb7cf 100644
--- a/packages/web/src/LoginPage.svelte
+++ b/packages/web/src/LoginPage.svelte
@@ -13,6 +13,7 @@
   import FontIcon from './icons/FontIcon.svelte';
   import createRef from './utility/createRef';
   import Link from './elements/Link.svelte';
+  import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
 
   export let isAdminPage;
 
@@ -71,9 +72,6 @@
   }
 
   onMount(() => {
-    const removed = document.getElementById('starting_dbgate_zero');
-    if (removed) removed.remove();
-
     if (!isAdminPage) {
       loadAvailableAuthProviders();
     }
@@ -134,177 +132,151 @@
   }
 </script>
 
-<div class="root theme-light theme-type-light">
-  <div class="text">DbGate</div>
-  <div class="wrap">
-    <div class="logo">
-      <img class="img" src="logo192.png" />
-    </div>
-    <div class="box">
-      <div class="heading">Log In</div>
-      <div class="login-link">
-        {#if $config?.isAdminLoginForm}
-          {#if isAdminPage}
-            <Link internalRedirect="/login.html">Log In as Regular User</Link>
-          {:else}
-            <Link internalRedirect="/admin-login.html">Log In as Administrator</Link>
-          {/if}
-        {/if}
-      </div>
-      <FormProviderCore {values}>
-        {#if !isAdminPage && availableProviders?.length >= 2}
-          <FormSelectField
-            label="Authentization method"
-            name="amoid"
-            isNative
-            options={availableProviders.map(mtd => ({ value: mtd.amoid, label: mtd.name }))}
-          />
-        {/if}
-
-        {#if !isAdminPage && availableConnections && workflowType == 'database'}
-          <FormSelectField
-            label="Database server"
-            name="databaseServer"
-            isNative
-            options={availableConnections.map(conn => ({ value: conn.conid, label: conn.label }))}
-          />
-        {/if}
-
-        {#if selectedConnection}
-          {#if selectedConnection.passwordMode == 'askUser'}
-            <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
-          {/if}
-          {#if selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword'}
-            <FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
-          {/if}
-        {:else}
-          {#if !isAdminPage && workflowType == 'credentials'}
-            <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
-          {/if}
-          {#if workflowType == 'credentials'}
-            <FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
-          {/if}
-        {/if}
-
-        {#if isAdminPage && $config && !$config.isAdminLoginForm}
-          <ErrorInfo message="Admin login is not configured. Please set ADMIN_PASSWORD environment variable" />
-        {/if}
-
-        {#if isTesting}
-          <div class="ml-5">
-            <FontIcon icon="icon loading" /> Testing connection
-          </div>
-        {/if}
-
-        {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
-          <div class="error-result ml-5">
-            Connect failed: <FontIcon icon="img error" />
-            {sqlConnectResult.error}
-          </div>
-        {/if}
-
-        <div class="submit">
-          {#if selectedConnection?.useRedirectDbLogin}
-            <FormSubmit
-              value="Open database login page"
-              on:click={async e => {
-                const state = `dbg-dblogin:${strmid}:${selectedConnection?.conid}:${$values.amoid}`;
-                sessionStorage.setItem('dbloginAuthState', state);
-                // openWebLink(
-                //   `connections/dblogin?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${
-                //     location.origin + location.pathname
-                //   }`
-                // );
-                internalRedirectTo(
-                  `/connections/dblogin-web?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${extractRedirectUri()}`
-                );
-              }}
-            />
-          {:else if selectedConnection}
-            <FormSubmit
-              value="Log In"
-              on:click={async e => {
-                if (selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword') {
-                  enableApi();
-                  isTesting = true;
-                  testIdRef.update(x => x + 1);
-                  const testid = testIdRef.get();
-                  const resp = await apiCall('connections/dblogin-auth', {
-                    amoid: $values.amoid,
-                    conid: selectedConnection.conid,
-                    user: $values['login'],
-                    password: $values['password'],
-                  });
-                  if (testIdRef.get() != testid) return;
-                  isTesting = false;
-                  if (resp.accessToken) {
-                    localStorage.setItem('accessToken', resp.accessToken);
-                    internalRedirectTo('/');
-                  } else {
-                    sqlConnectResult = resp;
-                  }
-                } else {
-                  enableApi();
-                  const resp = await apiCall('connections/dblogin-auth', {
-                    amoid: $values.amoid,
-                    conid: selectedConnection.conid,
-                  });
-                  localStorage.setItem('accessToken', resp.accessToken);
-                  internalRedirectTo('/');
-                }
-              }}
-            />
-          {:else}
-            <FormSubmit
-              value={isAdminPage
-                ? 'Log In as Administrator'
-                : workflowType == 'redirect'
-                  ? 'Redirect to login page'
-                  : 'Log In'}
-              on:click={async e => {
-                enableApi();
-
-                if (isAdminPage || workflowType == 'credentials' || workflowType == 'anonymous') {
-                  await processCredentialsLogin($values.amoid, e.detail);
-                } else if (workflowType == 'redirect') {
-                  await processRedirectLogin($values.amoid);
-                }
-              }}
-            />
-          {/if}
-        </div>
-      </FormProviderCore>
-    </div>
-
-    <div class="loginButtonWrapper">
-      {#each availableProviders.filter(x => x.workflowType == 'anonymous' || x.workflowType == 'redirect') as provider}
-        <div class="loginButton" on:click={() => processSingleProvider(provider)}>
-          {provider.name}
-        </div>
-      {/each}
-    </div>
+<SpecialPageLayout>
+  <div class="heading">Log In</div>
+  <div class="login-link">
+    {#if $config?.isAdminLoginForm}
+      {#if isAdminPage}
+        <Link internalRedirect="/login.html">Log In as Regular User</Link>
+      {:else}
+        <Link internalRedirect="/admin-login.html">Log In as Administrator</Link>
+      {/if}
+    {/if}
   </div>
-</div>
+  <FormProviderCore {values}>
+    {#if !isAdminPage && availableProviders?.length >= 2}
+      <FormSelectField
+        label="Authentization method"
+        name="amoid"
+        isNative
+        options={availableProviders.map(mtd => ({ value: mtd.amoid, label: mtd.name }))}
+      />
+    {/if}
+
+    {#if !isAdminPage && availableConnections && workflowType == 'database'}
+      <FormSelectField
+        label="Database server"
+        name="databaseServer"
+        isNative
+        options={availableConnections.map(conn => ({ value: conn.conid, label: conn.label }))}
+      />
+    {/if}
+
+    {#if selectedConnection}
+      {#if selectedConnection.passwordMode == 'askUser'}
+        <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
+      {/if}
+      {#if selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword'}
+        <FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
+      {/if}
+    {:else}
+      {#if !isAdminPage && workflowType == 'credentials'}
+        <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
+      {/if}
+      {#if workflowType == 'credentials'}
+        <FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
+      {/if}
+    {/if}
+
+    {#if isAdminPage && $config && !$config.isAdminLoginForm}
+      <ErrorInfo message="Admin login is not configured. Please set ADMIN_PASSWORD environment variable" />
+    {/if}
+
+    {#if isTesting}
+      <div class="ml-5">
+        <FontIcon icon="icon loading" /> Testing connection
+      </div>
+    {/if}
+
+    {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
+      <div class="error-result ml-5">
+        Connect failed: <FontIcon icon="img error" />
+        {sqlConnectResult.error}
+      </div>
+    {/if}
+
+    <div class="submit">
+      {#if selectedConnection?.useRedirectDbLogin}
+        <FormSubmit
+          value="Open database login page"
+          on:click={async e => {
+            const state = `dbg-dblogin:${strmid}:${selectedConnection?.conid}:${$values.amoid}`;
+            sessionStorage.setItem('dbloginAuthState', state);
+            // openWebLink(
+            //   `connections/dblogin?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${
+            //     location.origin + location.pathname
+            //   }`
+            // );
+            internalRedirectTo(
+              `/connections/dblogin-web?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${extractRedirectUri()}`
+            );
+          }}
+        />
+      {:else if selectedConnection}
+        <FormSubmit
+          value="Log In"
+          on:click={async e => {
+            if (selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword') {
+              enableApi();
+              isTesting = true;
+              testIdRef.update(x => x + 1);
+              const testid = testIdRef.get();
+              const resp = await apiCall('connections/dblogin-auth', {
+                amoid: $values.amoid,
+                conid: selectedConnection.conid,
+                user: $values['login'],
+                password: $values['password'],
+              });
+              if (testIdRef.get() != testid) return;
+              isTesting = false;
+              if (resp.accessToken) {
+                localStorage.setItem('accessToken', resp.accessToken);
+                internalRedirectTo('/');
+              } else {
+                sqlConnectResult = resp;
+              }
+            } else {
+              enableApi();
+              const resp = await apiCall('connections/dblogin-auth', {
+                amoid: $values.amoid,
+                conid: selectedConnection.conid,
+              });
+              localStorage.setItem('accessToken', resp.accessToken);
+              internalRedirectTo('/');
+            }
+          }}
+        />
+      {:else}
+        <FormSubmit
+          value={isAdminPage
+            ? 'Log In as Administrator'
+            : workflowType == 'redirect'
+              ? 'Redirect to login page'
+              : 'Log In'}
+          on:click={async e => {
+            enableApi();
+
+            if (isAdminPage || workflowType == 'credentials' || workflowType == 'anonymous') {
+              await processCredentialsLogin($values.amoid, e.detail);
+            } else if (workflowType == 'redirect') {
+              await processRedirectLogin($values.amoid);
+            }
+          }}
+        />
+      {/if}
+    </div>
+  </FormProviderCore>
+
+  <svelte:fragment slot="bottom-buttons">
+    {#each availableProviders.filter(x => x.workflowType == 'anonymous' || x.workflowType == 'redirect') as provider}
+      <div class="loginButton" on:click={() => processSingleProvider(provider)}>
+        {provider.name}
+      </div>
+    {/each}
+  </svelte:fragment>
+</SpecialPageLayout>
 
 <style>
-  .logo {
-    display: flex;
-    margin-bottom: 1rem;
-    align-items: center;
-    justify-content: center;
-  }
-  .img {
-    width: 80px;
-  }
-  .text {
-    position: fixed;
-    top: 1rem;
-    left: 1rem;
-    font-size: 30pt;
-    font-family: monospace;
-    color: var(--theme-bg-2);
-    text-transform: uppercase;
-  }
   .submit {
     margin: var(--dim-large-form-margin);
     display: flex;
@@ -315,30 +287,6 @@
     font-size: larger;
   }
 
-  .root {
-    color: var(--theme-font-1);
-    display: flex;
-    justify-content: center;
-    background-color: var(--theme-bg-1);
-    align-items: baseline;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .box {
-    width: 600px;
-    max-width: 80vw;
-    /* max-width: 600px;
-    width: 40vw; */
-    border: 1px solid var(--theme-border);
-    border-radius: 4px;
-    background-color: var(--theme-bg-0);
-    position: relative;
-  }
-
   .wrap {
     margin-top: 20vh;
   }
@@ -370,12 +318,6 @@
     background-color: var(--theme-bg-button-inv-3);
   }
 
-  .loginButtonWrapper {
-    display: flex;
-    flex-wrap: wrap;
-    width: 600px;
-  }
-
   .login-link {
     position: absolute;
     top: 10px;
diff --git a/packages/web/src/widgets/SpecialPageLayout.svelte b/packages/web/src/widgets/SpecialPageLayout.svelte
index 8c52820b4..3da0701ca 100644
--- a/packages/web/src/widgets/SpecialPageLayout.svelte
+++ b/packages/web/src/widgets/SpecialPageLayout.svelte
@@ -64,6 +64,7 @@
     border: 1px solid var(--theme-border);
     border-radius: 4px;
     background-color: var(--theme-bg-0);
+    position: relative;
   }
 
   .wrap {