diff --git a/crates/frontend/index.html b/crates/frontend/index.html
index ca5262b..3c765bb 100644
--- a/crates/frontend/index.html
+++ b/crates/frontend/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Elnafo Dev</title>
     </head>
-    <body class="h-full bg-zinc-900 text-zinc-200 font-sans">
+    <body class="h-full bg-zinc-900 text-zinc-200 font-sans overflow-hidden">
         <div id="app" class="flex flex-col h-full"></div>
         <script type="module" src="src/main.ts"></script>
     </body>
diff --git a/crates/frontend/src/assets/style.css b/crates/frontend/src/assets/style.css
index 6f35bae..f52eb77 100644
--- a/crates/frontend/src/assets/style.css
+++ b/crates/frontend/src/assets/style.css
@@ -7,3 +7,25 @@
         @apply text-green-500 hover:text-green-400;
     }
 }
+
+@layer utilities {
+    .bg-roll::before {
+        background: linear-gradient(90deg, #fb0094, #0000ff, #fb0093);
+        background-size: 200%;
+
+        @apply absolute w-[100%] h-[100%] content-[''] animate-border-roll;
+    }
+
+    .bg-grid {
+        background: 
+            linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%, 
+                rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px), 
+            linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%, 
+                rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px);
+        background-size: 2em 4em, 6em 2em;
+        transform: perspective(300px) rotateX(30deg) scale(1);
+        z-index: -1;
+
+        @apply absolute w-[200%] -left-[50%] h-full;
+    }
+}
diff --git a/crates/frontend/src/components/NavBar.vue b/crates/frontend/src/components/NavBar.vue
index 815415b..0cb03a2 100644
--- a/crates/frontend/src/components/NavBar.vue
+++ b/crates/frontend/src/components/NavBar.vue
@@ -1,10 +1,13 @@
 <template>
-    <nav class="flex justify-between items-center m-0 pl-3 pr-3 bg-zinc-800 border-b border-b-zinc-500">
-        <div class="items-center m-0 flex">
-            <slot name="left"></slot>
-        </div>
-        <div class="items-center m-0 flex">
-            <slot name="right"></slot>
-        </div>
-    </nav>
+    <div class="relative bg-roll h-12">
+        <nav
+            class="absolute w-full h-[calc(100%-1px)] flex justify-between items-center m-0 pl-3 pr-3 bg-gradient-to-t from-zinc-800 to-zinc-900">
+            <div class="items-center m-0 flex">
+                <slot name="left"></slot>
+            </div>
+            <div class="items-center m-0 flex">
+                <slot name="right"></slot>
+            </div>
+        </nav>
+    </div>
 </template>
diff --git a/crates/frontend/src/views/Base.vue b/crates/frontend/src/views/Base.vue
index 84224bb..3ea3e5a 100644
--- a/crates/frontend/src/views/Base.vue
+++ b/crates/frontend/src/views/Base.vue
@@ -87,11 +87,15 @@ async function user_logout() {
             </template>
         </NavBar>
 
-        <main>
+        <main class="overflow-hidden">
+            <div>
+                <div class="bg-grid"></div>
+            </div>
             <slot></slot>
         </main>
     </div>
-    <footer class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-zinc-800 border-t border-t-zinc-500">
+    <footer
+        class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-gradient-to-b from-zinc-800 to-zinc-900 border-t border-t-zinc-500">
         <a href="/">Made with glove</a>
         <a href="/api/v1">API</a>
     </footer>
diff --git a/crates/frontend/src/views/user/Preferencies.vue b/crates/frontend/src/views/user/Preferencies.vue
index 072da86..5f1415e 100644
--- a/crates/frontend/src/views/user/Preferencies.vue
+++ b/crates/frontend/src/views/user/Preferencies.vue
@@ -14,7 +14,7 @@ const preferenciesStore = usePreferenciesStore();
     <div class="flex gap-4 mt-4 ml-auto mr-auto content ">
         <Router-View />
         <div>
-            <div class="border rounded border-zinc-500 flex-col w-64">
+            <div class="border rounded border-zinc-500 flex-col w-64 side-nav">
                 <h1 class="pl-5 pr-5 pt-2 pb-2">User Preferencies</h1>
                 <RouterLink :to="{ name: 'Preferencies-Profile' }"
                     :class="{ 'bg-zinc-600': preferenciesStore.current_tab === 0 }"
@@ -35,4 +35,8 @@ const preferenciesStore = usePreferenciesStore();
     width: 1280px;
     max-width: calc(100% - 64px);
 }
+
+.side-nav {
+    transform: perspective(300px) rotateY(-8deg) scaleY(1.05);
+}
 </style>
diff --git a/crates/frontend/tailwind.config.js b/crates/frontend/tailwind.config.js
index a6e8615..0571ef1 100644
--- a/crates/frontend/tailwind.config.js
+++ b/crates/frontend/tailwind.config.js
@@ -2,7 +2,24 @@
 export default {
     content: ['./index.html', './src/**/*.{vue,ts,js}'],
     theme: {
-        extend: {},
+        extend: {
+            keyframes: {
+                "border-spin": {
+                    "100%": {
+                        transform: "rotate(-360deg)",
+                    }
+                },
+                "border-roll": {
+                    "100%": {
+                        "background-position": "200% 0",
+                    }
+                }
+            },
+            animation: {
+                "border-spin": "border-spin 7s linear infinite",
+                "border-roll": "border-roll 5s linear infinite"
+            }
+        },
     },
     plugins: [],
 }
