diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 7b3eb5d..35e4e62 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -1,5 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
+
 html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+
+    font-family: 'Noto Sans', sans-serif;
+}
+
+body {
+    background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
+    overflow: hidden
+}
+
+html::before,
+body::before,
+body::after {
+    content: "";
+    position: absolute;
+}
+
+html::before {
+    /*Green orb*/
+    position: absolute;
+    width: 605px;
+    height: 605px;
+    left: 0px;
+    top: -188px;
+    background: #315941;
+    filter: blur(250px);
+    z-index: -999;
+}
+
+body::before {
+    /*Blue orb*/
+    position: absolute;
+    width: 1036px;
+    height: 1036px;
+    left: 26px;
+    top: 348px;
+    background: #3A4156;
+    filter: blur(250px);
+    z-index: -999;
+}
+
+body::after {
+    /*Reb orb*/
+    position: absolute;
+    width: 719px;
+    height: 719px;
+    left: 728px;
+    top: -188px;
+    background: #593533;
+    filter: blur(250px);
+    z-index: -999;
 }
 
 h1:focus {