diff --git a/src/app.css b/src/app.css
index 8cfa93a3..f179ef0a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -22,6 +22,14 @@ body {
     linear-gradient(180deg, rgba(56, 0, 2, 1), rgba(97, 14, 17, 1));
 }
 
+.bg-ni-navbar {
+  background-image: linear-gradient(
+    180deg,
+    rgba(179, 54, 54, 1) 0%,
+    rgba(162, 49, 49, 1) 100%
+  )
+}
+
 .footer-icons svg,
 .footer-icons path {
   pointer-events: none;
diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 336777d3..ba9cd583 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,5 +1,5 @@
 <nav
-  class="fixed hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
+  class="fixed z-30 hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base bg-ni-topnav"
   aria-label="Navigation Bar"
 >
   <div class="flex w-full justify-start">