diff --git a/compose.dev.yml b/compose.dev.yml
index b803460..37b438e 100644
--- a/compose.dev.yml
+++ b/compose.dev.yml
@@ -12,8 +12,6 @@ services:
     restart: always
     networks:
       - caddy
-    depends_on:
-      - landing
 
   landing:
     container_name: landing
@@ -24,6 +22,8 @@ services:
       - ./src/landing/rxconfig.py:/app/rxconfig.py
     networks:
       - caddy
+    depends_on:
+      - caddy
 
 networks:
   caddy:
diff --git a/src/landing/landing/components/footer.py b/src/landing/landing/components/footer.py
index f67375b..dfbe77d 100644
--- a/src/landing/landing/components/footer.py
+++ b/src/landing/landing/components/footer.py
@@ -1,10 +1,10 @@
 import reflex as rx
+from landing.style import * 
 
 def footer():
     return rx.box(
         footer_content(),
-        background="#FFF",
-        border_top=f"8px solid {rx.color('mauve', 4)};"
+        border_top=f"2px solid {color['white']};"
     )
 
 
diff --git a/src/landing/landing/components/navbar.py b/src/landing/landing/components/navbar.py
index fbc5537..1e8d700 100644
--- a/src/landing/landing/components/navbar.py
+++ b/src/landing/landing/components/navbar.py
@@ -1,16 +1,15 @@
 import reflex as rx
-
+from landing.style import *
 
 def navbar():
-    return rx.flex(
-        background = "#FFF",
-        border_bottom=f"8px solid {rx.color('mauve', 4)};",
-        height="10vh",
-        position="fixed",
-        width="100%",
-        top="0px",
-        z_index="5", 
-        align_items= "center",
-        spacing="6",
-        padding= "7px 20px 7px 20px;",
+    return rx.box(
+        rx.center(
+            rx.vstack(
+                rx.heading("Navbar", size="9"),
+                align="center",
+                spacing="7"
+            ),
+            border_bottom=f"2px solid {color['white']};",
+            height="10vh"
+        )
     )
diff --git a/src/landing/landing/landing.py b/src/landing/landing/landing.py
index f35327d..7bdafc2 100644
--- a/src/landing/landing/landing.py
+++ b/src/landing/landing/landing.py
@@ -2,9 +2,15 @@ import reflex as rx
 from rxconfig import config
 from landing.state import *
 from landing.pages import *
+from landing.style import *
 
 # Create app instance and add index page.
 app = rx.App(
+    style=style,
+    stylesheets=[
+        "fonts/fonts.css",
+        "css/scrollbar.css"
+    ]
 )
 
 for route in routes:
diff --git a/src/landing/landing/state/__init__.py b/src/landing/landing/state/__init__.py
index 0a2dce5..3560a06 100644
--- a/src/landing/landing/state/__init__.py
+++ b/src/landing/landing/state/__init__.py
@@ -1,2 +1 @@
 from .state import State
-from .theme import ThemeState
diff --git a/src/landing/landing/state/theme.py b/src/landing/landing/state/theme.py
deleted file mode 100644
index 1f3631f..0000000
--- a/src/landing/landing/state/theme.py
+++ /dev/null
@@ -1,10 +0,0 @@
-import reflex as rx
-
-from .state import State
-
-class ThemeState(State):
-    """State for the global theme"""
-    theme: str = "day"
-
-    def toggle_theme(self):
-        self.theme == "day" if self.theme != "day" else self.theme == "night"
diff --git a/src/landing/landing/style.py b/src/landing/landing/style.py
new file mode 100644
index 0000000..60d392a
--- /dev/null
+++ b/src/landing/landing/style.py
@@ -0,0 +1,60 @@
+import reflex as rx
+
+color = {
+    "white": "#ebdbb2",
+    "black": "#000000",
+    "red": {
+        100: "#fb4934",
+        200: "#cc241d",
+    },
+    "green": {
+        100: "#b8bb26",
+        200: "#98971a",
+    },
+    "yellow": {
+        100: "#fabd2f",
+        200: "#d79921",
+    },
+    "blue": {
+        100: "#83a598",
+        200: "#458588",
+    },
+    "purple": { 
+        100: "#d3869b",
+        200: "#b16286",
+    },
+    "aqua": {
+        100: "#8ec07c",
+        200: "#689d6a",
+    }
+}
+
+style = {
+    # Background color
+    "background_color": color["black"],
+        
+    # Text
+    rx.text: {
+        "font_family": "ComicCode",
+        "font_size": 24,
+        "color": color["white"]
+    },
+
+    # Heading
+    rx.heading: {        
+        "font_family": "ComicCode",
+        "font_size": 32,
+        "color": color["white"]
+    },
+
+    # Link
+    rx.link: {
+        "font_family": "ComicCode",
+        "font_size": 24,
+        "color": color["black"],
+        "text_decoration": "none", 
+        "_hover": {
+            "color": color["green"][100]
+        }
+    },
+}