diff --git a/public/img/top_bg_transparency.png b/public/img/top_bg_transparency.png
new file mode 100644
index 0000000..89f4b76
Binary files /dev/null and b/public/img/top_bg_transparency.png differ
diff --git a/public/img/top_bg_transparency_2.png b/public/img/top_bg_transparency_2.png
new file mode 100644
index 0000000..10e1d6e
Binary files /dev/null and b/public/img/top_bg_transparency_2.png differ
diff --git a/public/img/top_bg_transparency_3.png b/public/img/top_bg_transparency_3.png
new file mode 100644
index 0000000..d868c5e
Binary files /dev/null and b/public/img/top_bg_transparency_3.png differ
diff --git a/public/img/top_bg_transparency_4.png b/public/img/top_bg_transparency_4.png
new file mode 100644
index 0000000..5fe0d73
Binary files /dev/null and b/public/img/top_bg_transparency_4.png differ
diff --git a/resources/css/app.css b/resources/css/app.css
index 68906e2..47b74c5 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,16 +1,18 @@
-@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+@import 'bootstrap';
 
 :root {
     --primary: #7F00FF;
     --accent: #00C9FF;
     --background: #121212;
     --text: #EAEAEA;
+    --gradient-start: #4f46e5;
+    --gradient-end: #7c3aed;
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: var(--background);
-    color: var(--text);
+    background-color: #0f172a!important;
+    color: #e2e8f0;
+    background: url('../../img/top_bg_transparency_4.png') repeat-x #0f172a;
 }
 
 .gradient-text {
@@ -165,3 +167,64 @@ body {
     background: rgba(255, 255, 255, 0.1) !important;
     color: var(--text);
 }
+
+.text-gradient {
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.btn-gradient {
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    border: none;
+    color: white;
+}
+
+.btn-gradient:hover {
+    background: linear-gradient(to right, var(--gradient-end), var(--gradient-start));
+    color: white;
+}
+
+.btn-outline-gradient {
+    border: 1px solid var(--gradient-start);
+    color: var(--gradient-start);
+}
+
+.btn-outline-gradient:hover {
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    color: white;
+}
+
+.gradient-border {
+    border: 1px solid transparent;
+    background: linear-gradient(#0f172a, #0f172a) padding-box,
+    linear-gradient(to right, var(--gradient-start), var(--gradient-end)) border-box;
+}
+
+.navbar {
+    background-color: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(10px);
+}
+
+.navbar a {
+    color: white!important;
+}
+
+.dropdown-menu {
+    background-color: #1e293b;
+    border: 1px solid #334155;
+}
+
+.dropdown-item {
+    color: #e2e8f0;
+}
+
+.dropdown-item:hover {
+    background-color: #334155;
+    color: #e2e8f0;
+}
+
+.dropdown-divider {
+    border-top: 1px solid #334155;
+}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 350b6c3..0c39bf9 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -10,7 +10,7 @@
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-        
+
         <!-- Font Awesome -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
@@ -20,74 +20,6 @@
         <!-- Bootstrap CSS -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
-        <style>
-            :root {
-                --gradient-start: #4f46e5;
-                --gradient-end: #7c3aed;
-            }
-
-            body {
-                background-color: #0f172a;
-                color: #e2e8f0;
-            }
-
-            .text-gradient {
-                background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-            }
-
-            .btn-gradient {
-                background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
-                border: none;
-                color: white;
-            }
-
-            .btn-gradient:hover {
-                background: linear-gradient(to right, var(--gradient-end), var(--gradient-start));
-                color: white;
-            }
-
-            .btn-outline-gradient {
-                border: 1px solid var(--gradient-start);
-                color: var(--gradient-start);
-            }
-
-            .btn-outline-gradient:hover {
-                background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
-                color: white;
-            }
-
-            .gradient-border {
-                border: 1px solid transparent;
-                background: linear-gradient(#0f172a, #0f172a) padding-box,
-                            linear-gradient(to right, var(--gradient-start), var(--gradient-end)) border-box;
-            }
-
-            .navbar {
-                background-color: rgba(15, 23, 42, 0.8);
-                backdrop-filter: blur(10px);
-            }
-
-            .dropdown-menu {
-                background-color: #1e293b;
-                border: 1px solid #334155;
-            }
-
-            .dropdown-item {
-                color: #e2e8f0;
-            }
-
-            .dropdown-item:hover {
-                background-color: #334155;
-                color: #e2e8f0;
-            }
-
-            .dropdown-divider {
-                border-top: 1px solid #334155;
-            }
-        </style>
     </head>
     <body class="font-sans antialiased">
         <div class="min-h-screen bg-gray-100 dark:bg-gray-900">