diff --git a/package-lock.json b/package-lock.json
index 0aadbae..3c3f665 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@angular/forms": "^20.2.0",
         "@angular/platform-browser": "^20.2.0",
         "@angular/router": "^20.2.0",
+        "@fontsource-variable/jetbrains-mono": "^5.2.6",
         "@fontsource-variable/open-sans": "^5.2.6",
         "@fortawesome/angular-fontawesome": "^3.0.0",
         "@fortawesome/fontawesome-free": "^7.0.0",
@@ -1429,6 +1430,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.6.tgz",
+      "integrity": "sha512-1pvtyK6H1paBOixbtZ9xfQgArVQ4SJMW3WSGZPOd5PiW3yg0t8umwKnjDMzW2ofb7qSdiXnsnIaHPT36vEOdlg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fontsource-variable/open-sans": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/open-sans/-/open-sans-5.2.6.tgz",
diff --git a/package.json b/package.json
index a9f8da3..7e73efd 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@angular/forms": "^20.2.0",
     "@angular/platform-browser": "^20.2.0",
     "@angular/router": "^20.2.0",
+    "@fontsource-variable/jetbrains-mono": "^5.2.6",
     "@fontsource-variable/open-sans": "^5.2.6",
     "@fortawesome/angular-fontawesome": "^3.0.0",
     "@fortawesome/fontawesome-free": "^7.0.0",
diff --git a/public/theme/theme.ts b/public/theme/theme.ts
index 7ef3443..4bc3f26 100644
--- a/public/theme/theme.ts
+++ b/public/theme/theme.ts
@@ -2,6 +2,302 @@ import Aura from "@primeuix/themes/aura";
 import { definePreset } from "@primeuix/themes";
 
 export const Theme = definePreset(Aura, {
+    primitive: {
+        borderRadius: {
+            none: "0",
+            xs: "2px",
+            sm: "4px",
+            md: "6px",
+            lg: "8px",
+            xl: "12px"
+        },
+        emerald: {
+            50: "#ecfdf5",
+            100: "#d1fae5",
+            200: "#a7f3d0",
+            300: "#6ee7b7",
+            400: "#34d399",
+            500: "#10b981",
+            600: "#059669",
+            700: "#047857",
+            800: "#065f46",
+            900: "#064e3b",
+            950: "#022c22"
+        },
+        green: {
+            50: "#f0fdf4",
+            100: "#dcfce7",
+            200: "#bbf7d0",
+            300: "#86efac",
+            400: "#4ade80",
+            500: "#22c55e",
+            600: "#16a34a",
+            700: "#15803d",
+            800: "#166534",
+            900: "#14532d",
+            950: "#052e16"
+        },
+        lime: {
+            50: "#f7fee7",
+            100: "#ecfccb",
+            200: "#d9f99d",
+            300: "#bef264",
+            400: "#a3e635",
+            500: "#84cc16",
+            600: "#65a30d",
+            700: "#4d7c0f",
+            800: "#3f6212",
+            900: "#365314",
+            950: "#1a2e05"
+        },
+        red: {
+            50: "#fef2f2",
+            100: "#fee2e2",
+            200: "#fecaca",
+            300: "#fca5a5",
+            400: "#f87171",
+            500: "#ef4444",
+            600: "#dc2626",
+            700: "#b91c1c",
+            800: "#991b1b",
+            900: "#7f1d1d",
+            950: "#450a0a"
+        },
+        orange: {
+            50: "#fff7ed",
+            100: "#ffedd5",
+            200: "#fed7aa",
+            300: "#fdba74",
+            400: "#fb923c",
+            500: "#f97316",
+            600: "#ea580c",
+            700: "#c2410c",
+            800: "#9a3412",
+            900: "#7c2d12",
+            950: "#431407"
+        },
+        amber: {
+            50: "#fffbeb",
+            100: "#fef3c7",
+            200: "#fde68a",
+            300: "#fcd34d",
+            400: "#fbbf24",
+            500: "#f59e0b",
+            600: "#d97706",
+            700: "#b45309",
+            800: "#92400e",
+            900: "#78350f",
+            950: "#451a03"
+        },
+        yellow: {
+            50: "#fefce8",
+            100: "#fef9c3",
+            200: "#fef08a",
+            300: "#fde047",
+            400: "#facc15",
+            500: "#eab308",
+            600: "#ca8a04",
+            700: "#a16207",
+            800: "#854d0e",
+            900: "#713f12",
+            950: "#422006"
+        },
+        teal: {
+            50: "#f0fdfa",
+            100: "#ccfbf1",
+            200: "#99f6e4",
+            300: "#5eead4",
+            400: "#2dd4bf",
+            500: "#14b8a6",
+            600: "#0d9488",
+            700: "#0f766e",
+            800: "#115e59",
+            900: "#134e4a",
+            950: "#042f2e"
+        },
+        cyan: {
+            50: "#ecfeff",
+            100: "#cffafe",
+            200: "#a5f3fc",
+            300: "#67e8f9",
+            400: "#22d3ee",
+            500: "#06b6d4",
+            600: "#0891b2",
+            700: "#0e7490",
+            800: "#155e75",
+            900: "#164e63",
+            950: "#083344"
+        },
+        sky: {
+            50: "#f0f9ff",
+            100: "#e0f2fe",
+            200: "#bae6fd",
+            300: "#7dd3fc",
+            400: "#38bdf8",
+            500: "#0ea5e9",
+            600: "#0284c7",
+            700: "#0369a1",
+            800: "#075985",
+            900: "#0c4a6e",
+            950: "#082f49"
+        },
+        blue: {
+            50: "#eff6ff",
+            100: "#dbeafe",
+            200: "#bfdbfe",
+            300: "#93c5fd",
+            400: "#60a5fa",
+            500: "#3b82f6",
+            600: "#2563eb",
+            700: "#1d4ed8",
+            800: "#1e40af",
+            900: "#1e3a8a",
+            950: "#172554"
+        },
+        indigo: {
+            50: "#eef2ff",
+            100: "#e0e7ff",
+            200: "#c7d2fe",
+            300: "#a5b4fc",
+            400: "#818cf8",
+            500: "#6366f1",
+            600: "#4f46e5",
+            700: "#4338ca",
+            800: "#3730a3",
+            900: "#312e81",
+            950: "#1e1b4b"
+        },
+        violet: {
+            50: "#f5f3ff",
+            100: "#ede9fe",
+            200: "#ddd6fe",
+            300: "#c4b5fd",
+            400: "#a78bfa",
+            500: "#8b5cf6",
+            600: "#7c3aed",
+            700: "#6d28d9",
+            800: "#5b21b6",
+            900: "#4c1d95",
+            950: "#2e1065"
+        },
+        purple: {
+            50: "#faf5ff",
+            100: "#f3e8ff",
+            200: "#e9d5ff",
+            300: "#d8b4fe",
+            400: "#c084fc",
+            500: "#a855f7",
+            600: "#9333ea",
+            700: "#7e22ce",
+            800: "#6b21a8",
+            900: "#581c87",
+            950: "#3b0764"
+        },
+        fuchsia: {
+            50: "#fdf4ff",
+            100: "#fae8ff",
+            200: "#f5d0fe",
+            300: "#f0abfc",
+            400: "#e879f9",
+            500: "#d946ef",
+            600: "#c026d3",
+            700: "#a21caf",
+            800: "#86198f",
+            900: "#701a75",
+            950: "#4a044e"
+        },
+        pink: {
+            50: "#fdf2f8",
+            100: "#fce7f3",
+            200: "#fbcfe8",
+            300: "#f9a8d4",
+            400: "#f472b6",
+            500: "#ec4899",
+            600: "#db2777",
+            700: "#be185d",
+            800: "#9d174d",
+            900: "#831843",
+            950: "#500724"
+        },
+        rose: {
+            50: "#fff1f2",
+            100: "#ffe4e6",
+            200: "#fecdd3",
+            300: "#fda4af",
+            400: "#fb7185",
+            500: "#f43f5e",
+            600: "#e11d48",
+            700: "#be123c",
+            800: "#9f1239",
+            900: "#881337",
+            950: "#4c0519"
+        },
+        slate: {
+            50: "#f8fafc",
+            100: "#f1f5f9",
+            200: "#e2e8f0",
+            300: "#cbd5e1",
+            400: "#94a3b8",
+            500: "#64748b",
+            600: "#475569",
+            700: "#334155",
+            800: "#1e293b",
+            900: "#0f172a",
+            950: "#020617"
+        },
+        gray: {
+            50: "#f9fafb",
+            100: "#f3f4f6",
+            200: "#e5e7eb",
+            300: "#d1d5db",
+            400: "#9ca3af",
+            500: "#6b7280",
+            600: "#4b5563",
+            700: "#374151",
+            800: "#1f2937",
+            900: "#111827",
+            950: "#030712"
+        },
+        zinc: {
+            50: "#fafafa",
+            100: "#f4f4f5",
+            200: "#e4e4e7",
+            300: "#d4d4d8",
+            400: "#a1a1aa",
+            500: "#71717a",
+            600: "#52525b",
+            700: "#3f3f46",
+            800: "#27272a",
+            900: "#18181b",
+            950: "#09090b"
+        },
+        neutral: {
+            50: "#fafafa",
+            100: "#f5f5f5",
+            200: "#e5e5e5",
+            300: "#d4d4d4",
+            400: "#a3a3a3",
+            500: "#737373",
+            600: "#525252",
+            700: "#404040",
+            800: "#262626",
+            900: "#171717",
+            950: "#0a0a0a"
+        },
+        stone: {
+            50: "#fafaf9",
+            100: "#f5f5f4",
+            200: "#e7e5e4",
+            300: "#d6d3d1",
+            400: "#a8a29e",
+            500: "#78716c",
+            600: "#57534e",
+            700: "#44403c",
+            800: "#292524",
+            900: "#1c1917",
+            950: "#0c0a09"
+        }
+    },
     semantic: {
         formField: {
             paddingX: "0.75rem",
@@ -27,17 +323,17 @@ export const Theme = definePreset(Aura, {
             transitionDuration: "{transition.duration}"
         },
         primary: {
-            50:  "#fffbeb",
-            100: "#fef3c7",
-            200: "#fde68a",
-            300: "#fcd34d",
-            400: "#fbbf24",
-            500: "#f59e0b",
-            600: "#d97706",
-            700: "#b45309",
-            800: "#92400e",
-            900: "#78350f",
-            950: "#451a03"
+            50:  "#fffdea",
+            100: "#fff7c2",
+            200: "#ffef85",
+            300: "#ffe24d",
+            400: "#ffd700",
+            500: "#e6c200",
+            600: "#bfa100",
+            700: "#997f00",
+            800: "#735f00",
+            900: "#4d3f00",
+            950: "#1f1600"
         },
         colorScheme: {
             light: {
@@ -54,30 +350,311 @@ export const Theme = definePreset(Aura, {
                     800: "#292524",
                     900: "#1c1917",
                     950: "#0c0a09"
-                }
+                },
+                primary: {
+                    color: "{primary.500}",
+                    contrastColor: "#ffffff",
+                    hoverColor: "{primary.600}",
+                    activeColor: "{primary.700}"
+                },
+                highlight: {
+                    background: "{primary.50}",
+                    focusBackground: "{primary.100}",
+                    color: "{primary.700}",
+                    focusColor: "{primary.800}"
+                },
+                mask: {
+                    background: "rgba(0,0,0,0.4)",
+                    color: "{surface.200}"
+                },
+                formField: {
+                    background: "{surface.0}",
+                    disabledBackground: "{surface.200}",
+                    filledBackground: "{surface.50}",
+                    filledHoverBackground: "{surface.50}",
+                    filledFocusBackground: "{surface.50}",
+                    borderColor: "{surface.300}",
+                    hoverBorderColor: "{surface.400}",
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.400}",
+                    color: "{surface.700}",
+                    disabledColor: "{surface.500}",
+                    placeholderColor: "{surface.500}",
+                    invalidPlaceholderColor: "{red.600}",
+                    floatLabelColor: "{surface.500}",
+                    floatLabelFocusColor: "{primary.600}",
+                    floatLabelActiveColor: "{surface.500}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{surface.400}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+                },
+                text: {
+                    color: "{surface.700}",
+                    hoverColor: "{surface.800}",
+                    mutedColor: "{surface.500}",
+                    hoverMutedColor: "{surface.600}"
+                },
+                content: {
+                    background: "{surface.0}",
+                    hoverBackground: "{surface.100}",
+                    borderColor: "{surface.200}",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}"
+                },
+                overlay: {
+                    select: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    },
+                    popover: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    },
+                    modal: {
+                        background: "{surface.0}",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}"
+                    }
+                },
+                list: {
+                    option: {
+                        focusBackground: "{surface.100}",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}"
+                        }
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    }
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.100}",
+                        activeBackground: "{surface.100}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                            activeColor: "{surface.500}"
+                        }
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    },
+                    submenuIcon: {
+                        color: "{surface.400}",
+                        focusColor: "{surface.500}",
+                        activeColor: "{surface.500}"
+                    }
+                },
             },
             dark: {
                 surface: {
-                    0: "#030303",
-                    50: "#171717",
-                    100: "#262626",
-                    200: "#404040",
-                    300: "#525252",
-                    400: "#737373",
-                    500: "#a3a3a3",
-                    600: "#d4d4d4",
-                    700: "#e5e5e5",
-                    800: "#f5f5f5",
-                    900: "#fafafa",
-                    950: "#ffffff"
+                    0: "#ffffff",
+                    50: "#fafafa",
+                    100: "#f5f5f5",
+                    200: "#e5e5e5",
+                    300: "#d4d4d4",
+                    400: "#a3a3a3",
+                    500: "#737373",
+                    600: "#525252",
+                    700: "#404040",
+                    800: "#262626",
+                    900: "#171717",
+                    950: "#030303"
                 },
                 primary: {
-                    color: "{primary.400}",      // Gold Button Hintergrund
-                    contrastColor: "#1a1a1a",    // ***Dunkler Text für gute Lesbarkeit***
+                    color: "{primary.400}",
+                    contrastColor: "{surface.900}",
                     hoverColor: "{primary.300}",
                     activeColor: "{primary.200}"
-                }
+                },
+                highlight: {
+                    background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+                    focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+                    color: "rgba(255,255,255,.87)",
+                    focusColor: "rgba(255,255,255,.87)"
+                },
+                mask: {
+                    background: "rgba(0,0,0,0.6)",
+                    color: "{surface.200}"
+                },
+                formField: {
+                    background: "{surface.950}",
+                    disabledBackground: "{surface.700}",
+                    filledBackground: "{surface.800}",
+                    filledHoverBackground: "{surface.800}",
+                    filledFocusBackground: "{surface.800}",
+                    borderColor: "{surface.600}",
+                    hoverBorderColor: "{surface.500}",
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.300}",
+                    color: "{surface.0}",
+                    disabledColor: "{surface.400}",
+                    placeholderColor: "{surface.400}",
+                    invalidPlaceholderColor: "{red.400}",
+                    floatLabelColor: "{surface.400}",
+                    floatLabelFocusColor: "{primary.color}",
+                    floatLabelActiveColor: "{surface.400}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{surface.400}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+                },
+                text: {
+                    color: "{surface.0}",
+                    hoverColor: "{surface.0}",
+                    mutedColor: "{surface.400}",
+                    hoverMutedColor: "{surface.300}"
+                },
+                content: {
+                    background: "{surface.900}",
+                    hoverBackground: "{surface.800}",
+                    borderColor: "{surface.700}",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}"
+                },
+                overlay: {
+                    select: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    },
+                    popover: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    },
+                    modal: {
+                        background: "{surface.900}",
+                        borderColor: "{surface.700}",
+                        color: "{text.color}"
+                    }
+                },
+                list: {
+                    option: {
+                        focusBackground: "{surface.800}",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.500}",
+                            focusColor: "{surface.400}"
+                        }
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    }
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.800}",
+                        activeBackground: "{surface.800}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.500}",
+                            focusColor: "{surface.400}",
+                            activeColor: "{surface.400}"
+                        }
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}"
+                    },
+                    submenuIcon: {
+                        color: "{surface.500}",
+                        focusColor: "{surface.400}",
+                        activeColor: "{surface.400}"
+                    }
+                },
             }
-        }
+        },
+        transitionDuration: "0.2s",
+        focusRing: {
+            width: "1px",
+            style: "solid",
+            color: "{primary.color}",
+            offset: "2px",
+            shadow: "none"
+        },
+        disabledOpacity: "0.6",
+        iconSize: "1rem",
+        anchorGutter: "2px",
+        list: {
+            padding: "0.25rem 0.25rem",
+            gap: "2px",
+            header: {
+                padding: "0.5rem 1rem 0.25rem 1rem"
+            },
+            option: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}"
+            },
+            optionGroup: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600"
+            }
+        },
+        content: {
+            borderRadius: "{border.radius.md}"
+        },
+        mask: {
+            transitionDuration: "0.15s"
+        },
+        navigation: {
+            list: {
+                padding: "0.25rem 0.25rem",
+                gap: "2px"
+            },
+            item: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}",
+                gap: "0.5rem"
+            },
+            submenuLabel: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600"
+            },
+            submenuIcon: {
+                size: "0.875rem"
+            }
+        },
+        overlay: {
+            select: {
+                borderRadius: "{border.radius.md}",
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            },
+            popover: {
+                borderRadius: "{border.radius.md}",
+                padding: "0.75rem",
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            },
+            modal: {
+                borderRadius: "{border.radius.xl}",
+                padding: "1.25rem",
+                shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+            },
+            navigation: {
+                shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+            }
+        },
     }
 });
diff --git a/src/app/core/components/background/background.ts b/src/app/core/components/background/background.ts
index a3d0263..ed2fed3 100644
--- a/src/app/core/components/background/background.ts
+++ b/src/app/core/components/background/background.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { ThemeSwitchService } from '../../service/theme-switch.service';
 
 @Component({
   selector: 'app-background',
@@ -8,6 +9,10 @@ import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 })
 export class Background {
 
+  constructor(
+    private themeSwitchService: ThemeSwitchService,
+  ) {}
+
   @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
 
   // Config
@@ -90,7 +95,9 @@ export class Background {
       // Stern zeichnen mit Scroll-Parallax
       ctx.beginPath();
       ctx.arc(star.x, star.y - this.scrollY * this.parallaxFactor, star.radius, 0, Math.PI * 2);
-      ctx.fillStyle = `rgba(255, 215, 0, ${star.alpha})`; // gold
+      ctx.fillStyle = this.themeSwitchService.darkMode()
+        ? `rgba(255, 215, 0, ${star.alpha})`
+        : `rgba(184, 134, 11, ${star.alpha})`;
       ctx.fill();
     }
 
diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index a7967e9..7989f1f 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -3,63 +3,18 @@
         <span class="font-semibold text-3xl">BH</span>
     </div>
     <div class="navigation grid place-items-center">
-        @if (themeSwitchService.darkMode()) {
-            <ul class="relative hidden items-center space-x-1 rounded-full border border-black/10 bg-black/5 px-1.5 py-1 backdrop-blur-md md:flex border-white/10 bg-white/10">
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80 text-white/70 hover:text-white" routerLink="/">
+        <p-card class="px-4! py-3!">
+            <ul>
+                <li class="relative list-none flex flex-row gap-3">
+                    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                         Home
                     </a>
-                    @if (isActive('/')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80 text-white/70 hover:text-white" routerLink="/about">
+                    <a routerLink="/about" routerLinkActive="active">
                         About
                     </a>
-                    @if (isActive('/about')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
                 </li>
             </ul>
-            <ng-template #activeNavItem>
-                <span class="bg-white/5 absolute inset-0 -z-5000 w-full rounded-full">
-                    <div class="bg-white absolute -top-[9px] left-1/2 h-1 w-8 -translate-x-1/2 rounded-t-full">
-                    <div class="bg-white/20 absolute -top-2 -left-2 h-6 w-12 rounded-full blur-md"></div>
-                    <div class="bg-white/20 absolute -top-1 h-6 w-8 rounded-full blur-md"></div>
-                    <div class="bg-white/20 absolute top-0 left-2 h-4 w-4 rounded-full blur-sm"></div>
-                    </div>
-                </span>
-            </ng-template>
-        } @else {
-            <ul class="relative hidden items-center space-x-1 rounded-full border border-black/10 bg-black/5 px-1.5 py-1 backdrop-blur-md md:flex">
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80" routerLink="/">
-                        Home
-                    </a>
-                    @if (isActive('/')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-                <li class="relative list-none">
-                    <a class="block px-4 py-1.5 text-sm font-light text-black transition hover:text-black/80" routerLink="/about">
-                        About
-                    </a>
-                    @if (isActive('/about')) {
-                        <ng-container *ngTemplateOutlet="activeNavItem"/>
-                    }
-                </li>
-            </ul>
-            <ng-template #activeNavItem>
-                <span class="bg-black/5 absolute inset-0 -z-5000 w-full rounded-full">
-                    <div class="bg-black absolute -top-[9px] left-1/2 h-1 w-8 -translate-x-1/2 rounded-t-full">
-                    <div class="bg-black/20 absolute -top-2 -left-2 h-6 w-12 rounded-full blur-md"></div>
-                    <div class="bg-black/20 absolute -top-1 h-6 w-8 rounded-full blur-md"></div>
-                    <div class="bg-black/20 absolute top-0 left-2 h-4 w-4 rounded-full blur-sm"></div>
-                    </div>
-                </span>
-            </ng-template>
-        }
+        </p-card>
     </div>
     <div class="options flex flex-row gap-[10px]">
         @if (themeSwitchService.darkMode()) {
diff --git a/src/app/core/components/navigation-bar/navigation-bar.scss b/src/app/core/components/navigation-bar/navigation-bar.scss
index a2f5357..08ba449 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.scss
+++ b/src/app/core/components/navigation-bar/navigation-bar.scss
@@ -15,6 +15,35 @@ nav {
             border-color: var(--surface-500);
         }
     }
+
+    .navigation ul li a {
+        display: block;
+        padding: 5px 10px;
+        position: relative;
+        color: color-mix(in srgb, var(--content-color) 80%, transparent);
+        font-family: 'JetBrains Mono', monospace;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+
+        &.active {
+            color: var(--primary-500);
+            position: relative;
+            top: -3px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                left: calc(50% - 1px);
+                transform: translate(-50%);
+                width: 50%;
+                height: .1px;
+                background: var(--primary-500);
+                border-radius: 50%;
+                bottom: 2px;
+                box-shadow: 0 -3px 10px 1px var(--primary-500);
+            }
+        }
+    }
 }
 
 .blur {
diff --git a/src/app/core/components/navigation-bar/navigation-bar.ts b/src/app/core/components/navigation-bar/navigation-bar.ts
index 12a4ee0..0857dfa 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.ts
+++ b/src/app/core/components/navigation-bar/navigation-bar.ts
@@ -1,14 +1,14 @@
-import { NgTemplateOutlet } from '@angular/common';
 import { Component } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faMoon } from '@fortawesome/free-solid-svg-icons';
 import { faSun } from '@fortawesome/free-solid-svg-icons';
 import { ThemeSwitchService } from '../../service/theme-switch.service';
+import { Card } from 'primeng/card';
 
 @Component({
   selector: 'app-navigation-bar',
-  imports: [FontAwesomeModule, RouterLink, NgTemplateOutlet ],
+  imports: [FontAwesomeModule, RouterLink, RouterLinkActive, Card ],
   templateUrl: './navigation-bar.html',
   styleUrl: './navigation-bar.scss'
 })
diff --git a/src/styles.scss b/src/styles.scss
index a758e20..9d976c3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
 @use "tailwindcss";
 @import '@fontsource-variable/open-sans/wght.css';
+@import '@fontsource-variable/jetbrains-mono/wght.css';
 @import '@fortawesome/fontawesome-free/css/all.css';
 
 body {
@@ -8,5 +9,20 @@ body {
   margin: 0;
   font-size: 14px;
   overflow: auto;
-  background-color: var(--surface-0);
+  background-color: var(--primary-50);
+}
+
+html.dark body {
+  background-color: var(--surface-950);
+}
+
+p-card {
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--primary-500) 50%, transparent);
+  box-shadow: inset 0 0 10px 2px color-mix(in srgb, var(--primary-500) 20%, transparent);
+  padding: var(--card-body-padding);
+
+  .p-card-body {
+    padding: 0;
+  }
 }
\ No newline at end of file