diff --git a/public/videos/hero.jpg b/public/videos/hero.jpg
new file mode 100644
index 0000000..b316633
Binary files /dev/null and b/public/videos/hero.jpg differ
diff --git a/public/videos/shook.webm b/public/videos/shook.webm
new file mode 100644
index 0000000..cf402a5
Binary files /dev/null and b/public/videos/shook.webm differ
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 784541a..1e62638 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -27,7 +27,7 @@ export default component$(() => {
         </button>
       </div>
       <div class={{
-        'lum-card': true,
+        'lum-card lum-bg-gray-900/50': true,
         'flex overflow-y-auto max-h-[calc(100dvh-300px)] mx-2 sm:mx-0 backdrop-blur-xl': true,
         'mt-2': menu.value,
         'opacity-0 sm:opacity-100 pointer-events-none sm:pointer-events-auto': !menu.value,
diff --git a/src/routes/colors/index.tsx b/src/routes/colors/index.tsx
deleted file mode 100644
index 09bb3be..0000000
--- a/src/routes/colors/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <section class="flex px-6 min-h-[100svh] pt-20">
-      <div class="flex flex-col">
-        <div class="lum-card lum-bg-burger-50 min-h-10">
-          50
-        </div>
-        <div class="lum-card lum-bg-burger-100 min-h-10">
-          100
-        </div>
-        <div class="lum-card lum-bg-burger-200 min-h-10">
-          200
-        </div>
-        <div class="lum-card lum-bg-burger-300 min-h-10">
-          300
-        </div>
-        <div class="lum-card lum-bg-burger-400 min-h-10">
-          400
-        </div>
-        <div class="lum-card lum-bg-burger-500 min-h-10">
-          500
-        </div>
-        <div class="lum-card lum-bg-burger-600 min-h-10">
-          600
-        </div>
-        <div class="lum-card lum-bg-burger-700 min-h-10">
-          700
-        </div>
-        <div class="lum-card lum-bg-burger-800 min-h-10">
-          800
-        </div>
-        <div class="lum-card lum-bg-burger-900 min-h-10">
-          900
-        </div>
-        <div class="lum-card lum-bg-burger-950 min-h-10">
-          950
-        </div>
-      </div>
-      <div class="flex flex-col">
-        <div class="lum-card lum-bg-gray-50 min-h-10">
-          50
-        </div>
-        <div class="lum-card lum-bg-gray-100 min-h-10">
-          100
-        </div>
-        <div class="lum-card lum-bg-gray-200 min-h-10">
-          200
-        </div>
-        <div class="lum-card lum-bg-gray-300 min-h-10">
-          300
-        </div>
-        <div class="lum-card lum-bg-gray-400 min-h-10">
-          400
-        </div>
-        <div class="lum-card lum-bg-gray-500 min-h-10">
-          500
-        </div>
-        <div class="lum-card lum-bg-gray-600 min-h-10">
-          600
-        </div>
-        <div class="lum-card lum-bg-gray-700 min-h-10">
-          700
-        </div>
-        <div class="lum-card lum-bg-gray-800 min-h-10">
-          800
-        </div>
-        <div class="lum-card lum-bg-gray-900 min-h-10">
-          900
-        </div>
-        <div class="lum-card lum-bg-gray-950 min-h-10">
-          950
-        </div>
-      </div>
-      <div class="flex flex-col">
-        <div class="lum-card lum-bg-newgray-50 min-h-10">
-          50
-        </div>
-        <div class="lum-card lum-bg-newgray-100 min-h-10">
-          100
-        </div>
-        <div class="lum-card lum-bg-newgray-200 min-h-10">
-          200
-        </div>
-        <div class="lum-card lum-bg-newgray-300 min-h-10">
-          300
-        </div>
-        <div class="lum-card lum-bg-newgray-400 min-h-10">
-          400
-        </div>
-        <div class="lum-card lum-bg-newgray-500 min-h-10">
-          500
-        </div>
-        <div class="lum-card lum-bg-newgray-600 min-h-10">
-          600
-        </div>
-        <div class="lum-card lum-bg-newgray-700 min-h-10">
-          700
-        </div>
-        <div class="lum-card lum-bg-newgray-800 min-h-10">
-          800
-        </div>
-        <div class="lum-card lum-bg-newgray-900 min-h-10">
-          900
-        </div>
-        <div class="lum-card lum-bg-newgray-950 min-h-10">
-          950
-        </div>
-      </div>
-      <div class="flex flex-col">
-        <div class="lum-card lum-bg-orange-50 min-h-10">
-          50
-        </div>
-        <div class="lum-card lum-bg-orange-100 min-h-10">
-          100
-        </div>
-        <div class="lum-card lum-bg-orange-200 min-h-10">
-          200
-        </div>
-        <div class="lum-card lum-bg-orange-300 min-h-10">
-          300
-        </div>
-        <div class="lum-card lum-bg-orange-400 min-h-10">
-          400
-        </div>
-        <div class="lum-card lum-bg-orange-500 min-h-10">
-          500
-        </div>
-        <div class="lum-card lum-bg-orange-600 min-h-10">
-          600
-        </div>
-        <div class="lum-card lum-bg-orange-700 min-h-10">
-          700
-        </div>
-        <div class="lum-card lum-bg-orange-800 min-h-10">
-          800
-        </div>
-        <div class="lum-card lum-bg-orange-900 min-h-10">
-          900
-        </div>
-        <div class="lum-card lum-bg-orange-950 min-h-10">
-          950
-        </div>
-      </div>
-    </section>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Colors',
-};
diff --git a/src/routes/halal/index.tsx b/src/routes/halal/index.tsx
index 94b9b8f..e37ddf4 100644
--- a/src/routes/halal/index.tsx
+++ b/src/routes/halal/index.tsx
@@ -1,15 +1,11 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { Blobs } from '@luminescent/ui-qwik';
 import Icon from '~/components/svg/Icon';
 
 export default component$(() => {
   return (
     <section class="flex flex-col mx-auto max-w-6xl px-6 items-center justify-center text-center min-h-[100svh] pt-20">
       <div class="relative fade-in mb-10 w-full sm:w-96 h-32 flex justify-center">
-        <Blobs color="yellow" class={{
-          'opacity-50': true,
-        }} />
         <div class="z-10">
           <Icon width={119} height={150} id="mobile"/>
         </div>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index efd5f02..23386c7 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,6 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import { Link } from '@builder.io/qwik-city';
-import { Blobs } from '@luminescent/ui-qwik';
 
 import Logo from '~/components/svg/Logo';
 import Icon from '~/components/svg/Icon';
@@ -12,18 +11,12 @@ export default component$(() => {
   return (
     <section class="flex mx-auto max-w-6xl px-6 items-center justify-center min-h-[100svh] pt-20">
       <div class="hidden sm:flex relative justify-start align-center mr-auto max-w-[50%]">
-        <div class="absolute top-32 left-10 h-96 w-96">
-          <Blobs color="yellow" />
-        </div>
         <div class="z-10 animate-in fade-in slide-in-from-top-8 anim-duration-1000" style="max-width: 60%" >
           <Logo width={476} height={600} id="pc"/>
         </div>
       </div>
       <div class="text-center justify-center">
         <div class="flex sm:hidden relative justify-center align-center w-full mb-10">
-          <div class="absolute -top-10 w-64 h-64">
-            <Blobs color="yellow" />
-          </div>
           <div class="z-10 animate-in fade-in slide-in-from-top-8 anim-duration-1000">
             <Icon width={160} id="mobile"/>
           </div>
@@ -43,14 +36,14 @@ export default component$(() => {
             <Link href="/menu" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-500 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
+              'lum-bg-burger-700/5 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
             }}>
               <BookOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> View the menu
             </Link>
             <Link href="/halal" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-500 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
+              'lum-bg-burger-700/5 hover:lum-bg-burger-700 bg-gradient-to-b from-burger-500/50 to-burger-700': true,
             }}>
               <Halal width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> Halal
             </Link>
@@ -59,14 +52,14 @@ export default component$(() => {
             <a href="tel:+1 (905) 427 4377" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-700 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
+              'lum-bg-burger-800/5 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
             }}>
               <CallOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> +1 (905) 427 4377
             </a>
             <a href="https://maps.app.goo.gl/Unrrg3uda7AQQs4DA" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-700 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
+              'lum-bg-burger-800/5 hover:lum-bg-burger-800 bg-gradient-to-b from-burger-700/50 to-burger-800': true,
             }}>
               <MapOutline width="24" class="fill-current w-5 sm:w-auto sm:mr-1" /> Google Maps
             </a>
@@ -75,7 +68,7 @@ export default component$(() => {
             <a href="https://instagram.com/burgersonfleek.ca" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
+              'bg-transparent border-[#dd2a7baa] bg-gradient-to-b from-burger-800/50': true,
               'to-[#dd2a7baa] hover:lum-bg-[#dd2a7baa]': true,
             }}>
               <LogoInstagram width="24" class="fill-current w-5 sm:w-auto" />
@@ -83,7 +76,7 @@ export default component$(() => {
             <a href="https://facebook.com/burgersonfleek.ca" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
+              'bg-transparent border-[#1877f2aa] bg-gradient-to-b from-burger-800/50': true,
               'to-[#1877f2aa] hover:lum-bg-[#1877f2aa]': true,
             }}>
               <LogoFacebook width="24" class="fill-current w-5 sm:w-auto" />
@@ -91,7 +84,7 @@ export default component$(() => {
             <a href="https://tiktok.com/@burgersonfleek.ca" class={{
               'lum-btn lum-pad-lg text-sm sm:lum-pad-xl sm:text-lg rounded-xl': true,
               'text-gray-100 hover:!text-white border-gray-900': true,
-              'bg-burger-800 bg-gradient-to-b from-burger-800/50': true,
+              'bg-transparent border-[#ee1d52aa] bg-gradient-to-b from-burger-800/50': true,
               'to-[#ee1d52aa] hover:lum-bg-[#ee1d52aa]': true,
             }}>
               <LogoTiktok width="24" class="fill-current w-5 sm:w-auto" />
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index d7dcdee..38b7282 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,10 +1,24 @@
 import { component$, Slot } from '@builder.io/qwik';
 import Nav from '~/components/Nav';
 import Footer from '~/components/Footer';
+import { useLocation } from '@builder.io/qwik-city';
 
 export default component$(() => {
+  const loc = useLocation();
   return (
     <main>
+      <video
+        class={{
+          'transition-all duration-1000 fixed top-0 overflow-hidden -z-10 w-full h-full object-cover opacity-10': true,
+          'blur-xl scale-110': loc.url.pathname != '/',
+        }}
+        autoplay
+        muted
+        preload="auto"
+        poster="/videos/hero.jpg"
+      >
+        <source src="/videos/shook.webm" type="video/mp4"/>
+      </video>
       <Nav />
       <Slot />
       <Footer />
diff --git a/src/routes/menu/index.tsx b/src/routes/menu/index.tsx
index 7fb0c21..c20ba01 100644
--- a/src/routes/menu/index.tsx
+++ b/src/routes/menu/index.tsx
@@ -63,7 +63,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {beefburgers.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 flex-row sm:flex-col min-w-[18rem] gap-6': true,
             }}>
               <div class="mb-4">
@@ -92,7 +92,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {chickenburgers.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
             }}>
               <div class="mb-4">
@@ -120,7 +120,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {veggieburgers.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
             }}>
               <div class="mb-4">
@@ -148,7 +148,7 @@ export default component$(() => {
         <div class="grid sm:grid-cols-2 gap-4 pt-5 pb-10">
           {steaksandwiches.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 sm:flex-col min-w-[18rem] gap-6': true,
             }}>
               <div class="mb-4">
@@ -176,7 +176,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {extras.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 min-w-[18rem]': true,
             }}>
               <Header class={{
@@ -204,7 +204,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {sides.map((item, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 min-w-[18rem]': true,
             }}>
               <Header class={{
@@ -232,7 +232,7 @@ export default component$(() => {
         <div class="flex flex-wrap gap-4 pt-5 pb-10">
           {drinks.map((drink, i) => {
             return <div key={i} class={{
-              'lum-card': true,
+              'lum-card lum-bg-gray-900/50': true,
               'flex-1 min-w-[18rem]': true,
             }}>
               <Header class={{