diff --git a/client-solid/src/Root.tsx b/client-solid/src/Root.tsx
index c1cfd63..6a04063 100644
--- a/client-solid/src/Root.tsx
+++ b/client-solid/src/Root.tsx
@@ -40,6 +40,7 @@ function Root(): JSXElement {
         <LoginContext.Provider
           value={{ token, setToken, username, setUsername }}
         >
+          <FancyBackground />
           <div class="flex flex-col items-center">
             <Navbar />
             <LoginModal />
@@ -53,4 +54,12 @@ function Root(): JSXElement {
   );
 }
 
+function FancyBackground(): JSXElement {
+  return (
+    <div class="bg-container">
+      <div class="bg-fancy min-h-screen bg-cover bg-center" />
+    </div>
+  );
+}
+
 export default Root;
diff --git a/client-solid/src/index.css b/client-solid/src/index.css
index bd6213e..966a578 100644
--- a/client-solid/src/index.css
+++ b/client-solid/src/index.css
@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.bg-container {
+    z-index: -1;
+    position: absolute;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.bg-fancy {
+    position: absolute;
+    top: -50vw;
+    left: -50vh;
+    height: 200vh;
+    width: 200vw;
+    opacity: 0.02;
+    background-image:
+        linear-gradient(#ffffff 2px, transparent 2px),
+        linear-gradient(90deg, #ffffff 2px, transparent 2px),
+        linear-gradient(#ffffff 1px, transparent 1px),
+        linear-gradient(90deg, #ffffff 1px, transparent 1px);
+    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
+    background-position: -8px -8px, -8px -8px, -4px -4px, -4px -4px;
+    transform: matrix(1.5, 0.2, -1, 1.2, 0, 0);
+}
\ No newline at end of file