diff --git a/package.json b/package.json
index 08e1568e..d5b5787a 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^10.1.8",
     "react-firebaseui": "^5.0.2",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^6",
     "react-image": "^4.0.3",
     "react-joyride": "^2.3.0",
@@ -106,6 +107,7 @@
     "@types/react-color": "^3.0.1",
     "@types/react-div-100vh": "^0.3.0",
     "@types/react-dom": "^17.0.8",
+    "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-router-hash-link": "^2.4.1",
     "@types/use-persisted-state": "^0.3.0",
diff --git a/src/assets/bg-pattern-dark.svg b/src/assets/bg-pattern-dark.svg
new file mode 100644
index 00000000..4b8c6f2a
--- /dev/null
+++ b/src/assets/bg-pattern-dark.svg
@@ -0,0 +1,5 @@
+<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="1.5">
+    <path d="M37 337h6a6 6 0 010 12h-6 0v-12zM296.447 20.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM406 51h12v6a6 6 0 01-12 0v-6h0zM394 200h6a6 6 0 010 12h-6 0v-12zM341.447 119.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM249.652 206.757l11.59-3.105 1.554 5.795a6 6 0 01-11.592 3.106l-1.552-5.796h0zM322.757 278.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM449 295a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM439 425h3v12h-12v-3a9 9 0 019-9zM333.447 409.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM197.804 422.804l10.392 6-6 10.392-10.392-6zM261.45 352.98l2.898.777h0l-3.105 11.591-11.591-3.105.776-2.898a9 9 0 0111.023-6.364zM73.652 440.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM147.804 332.804l10.392-6 3 5.196a6 6 0 01-10.392 6l-3-5.196h0zM211.757 102.652l11.591 3.105-1.552 5.796a6 6 0 01-11.592-3.106l1.553-5.795h0zM150.652 44.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM31 200a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM106.757 131.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM91.652 232.757l11.59-3.105 3.106 11.59-11.59 3.106zM57.598 38.304l2.598-1.5h0l6 10.392-10.392 6-1.5-2.598a9 9 0 013.294-12.294z"/>
+  </g>
+</svg>
diff --git a/src/assets/bg-pattern.svg b/src/assets/bg-pattern.svg
index 0fc158ef..c22330b0 100644
--- a/src/assets/bg-pattern.svg
+++ b/src/assets/bg-pattern.svg
@@ -1,5 +1,5 @@
 <svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd" stroke="rgba(128, 128, 128, 0.25)" stroke-width="1.5">
+  <g fill="none" fill-rule="evenodd" stroke="#000" stroke-width="1.5">
     <path d="M37 337h6a6 6 0 010 12h-6 0v-12zM296.447 20.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM406 51h12v6a6 6 0 01-12 0v-6h0zM394 200h6a6 6 0 010 12h-6 0v-12zM341.447 119.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM249.652 206.757l11.59-3.105 1.554 5.795a6 6 0 01-11.592 3.106l-1.552-5.796h0zM322.757 278.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM449 295a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM439 425h3v12h-12v-3a9 9 0 019-9zM333.447 409.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM197.804 422.804l10.392 6-6 10.392-10.392-6zM261.45 352.98l2.898.777h0l-3.105 11.591-11.591-3.105.776-2.898a9 9 0 0111.023-6.364zM73.652 440.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM147.804 332.804l10.392-6 3 5.196a6 6 0 01-10.392 6l-3-5.196h0zM211.757 102.652l11.591 3.105-1.552 5.796a6 6 0 01-11.592-3.106l1.553-5.795h0zM150.652 44.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM31 200a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM106.757 131.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM91.652 232.757l11.59-3.105 3.106 11.59-11.59 3.106zM57.598 38.304l2.598-1.5h0l6 10.392-10.392 6-1.5-2.598a9 9 0 013.294-12.294z"/>
   </g>
 </svg>
diff --git a/src/components/Auth/AuthLayout.tsx b/src/components/Auth/AuthLayout.tsx
index fb2cb371..fa889a0d 100644
--- a/src/components/Auth/AuthLayout.tsx
+++ b/src/components/Auth/AuthLayout.tsx
@@ -1,9 +1,11 @@
+import Helmet from "react-helmet";
 import { use100vh } from "react-div-100vh";
 
-import { Box, Paper, Typography, LinearProgress } from "@material-ui/core";
+import { useTheme, Paper, Typography, LinearProgress } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";
 
 import bgPattern from "assets/bg-pattern.svg";
+import bgPatternDark from "assets/bg-pattern-dark.svg";
 import Logo from "assets/Logo";
 
 export interface IAuthLayoutProps {
@@ -12,43 +14,72 @@ export interface IAuthLayoutProps {
 }
 
 export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
+  const theme = useTheme();
   const fullScreenHeight = use100vh() ?? "100vh";
 
   return (
-    <Box
-      sx={{
-        minHeight: fullScreenHeight,
-        backgroundBlendMode: "normal, overlay, normal, normal",
-        // backgroundImage: `
-        //   linear-gradient(to bottom, rgba(255,255,255,0), #fff),
-        //   linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
-        //   url('${bgPattern}'),
-        //   linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
-        // `,
-        backgroundImage: (theme) => `
-      linear-gradient(to bottom, ${alpha(
-        theme.palette.background.default,
-        0
-      )}, ${theme.palette.background.default} 75%),
-      linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
-          theme.palette.secondary.main
-        } 90%),
-      url('${bgPattern}'),
-      linear-gradient(161deg, ${alpha(
-        theme.palette.background.default,
-        0.95
-      )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
-    `,
+    <>
+      <Helmet>
+        <style type="text/css">
+          {`
+          body {
+            background-blend-mode: ${
+              // prettier-ignore
+              [
+                "normal",
+                "normal",
+                "normal",
 
-        display: "grid",
-        placeItems: "center",
-        p: 1,
+                "overlay",
+
+                "normal",
+                "normal",
+              ].join(", ")
+            };
+            background-size: ${
+              // prettier-ignore
+              [
+                "100%",
+                "100%",
+                "100%",
+
+                `${480 * 10 / 14}px`,
+
+                "100%",
+                "100%",
+              ].join(", ")
+            };
+            background-image: ${
+              // prettier-ignore
+              [
+                `radial-gradient(circle   at  85% 100%, ${theme.palette.background.paper} 20%, ${alpha(theme.palette.background.paper, 0)})`,
+                `radial-gradient(80%  80% at  15% 100%, ${alpha("#FA0", 0.1)} 25%, ${alpha("#F0A", 0.1)} 50%, ${alpha("#F0A", 0)} 100%)`,
+                `linear-gradient(to top, ${alpha(theme.palette.background.paper, 1)}, ${alpha(theme.palette.background.paper, 0)})`,
+
+                `url('${theme.palette.mode==="dark" ? bgPatternDark : bgPattern}')`,
+
+                `radial-gradient(60% 180% at 100%  15%, ${alpha("#0FA", 0.3)} 25%, ${alpha("#0AF", 0.2)} 50%, ${alpha("#0AF", 0)} 100%)`,
+                `linear-gradient(${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.primary.main, 0.2)})`,
+              ].join(", ")
+            };
+          }
+          
+          #root {
+            display: grid;
+            place-items: center;
+            padding: ${theme.spacing(1)};
+            cursor: default;
+            min-height: ${
+              fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh"
+            };
+          }
+          `}
+        </style>
+      </Helmet>
 
-        cursor: "default",
-      }}
-    >
       <Paper
         component="main"
+        elevation={8}
         sx={
           {
             position: "relative",
@@ -57,7 +88,6 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
             maxWidth: 400,
             width: "100%",
             p: 4,
-            bgcolor: "background.paper",
 
             "--spacing-contents": (theme) => theme.spacing(4),
             "& > * + *": { marginTop: "var(--spacing-contents)" },
@@ -92,6 +122,6 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
           />
         )}
       </Paper>
-    </Box>
+    </>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 7468c56b..f582e8ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3184,6 +3184,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
+  integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^16.7.1 || ^17.0.0":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.2.tgz#abc4d910bff5b0bc6b3e1bec57575f6b63fd4e05"
@@ -13559,6 +13566,16 @@ react-floater@^0.7.3:
     react-proptype-conditional-require "^1.0.4"
     tree-changes "^0.5.1"
 
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-hook-form@^6:
   version "6.15.8"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
@@ -13744,6 +13761,11 @@ react-scroll-sync@^0.8.0:
   resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.8.0.tgz#61fabed2afc47d41e6938819d620799da3610548"
   integrity sha512-Ms9srm41UM+lWexuqdocXjqaqqt6ZRSFxcudgB0sYhC7Or+m12WemTwY8BaQCRf7hA8zHDk55FHvMkqsH7gF+w==
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react-textarea-autosize@^8.3.2:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"