diff --git a/assets/images/root/background.jpg b/assets/images/root/background.jpg
new file mode 100644
index 0000000..810983f
Binary files /dev/null and b/assets/images/root/background.jpg differ
diff --git a/assets/styles/root/root.css b/assets/styles/root/root.css
new file mode 100644
index 0000000..5043a72
--- /dev/null
+++ b/assets/styles/root/root.css
@@ -0,0 +1,154 @@
+body {
+    height: 100vh;
+}
+
+/* Scanline sweep */
+.scanline {
+    position: absolute;
+    bottom: 100%;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+    background: linear-gradient(0deg, transparent 0%, rgba(80, 167, 250, .05) 50%, transparent 100%);
+    opacity: .1;
+    animation: scanline 8s linear infinite;
+}
+
+@keyframes scanline {
+    0% {
+        bottom: 100%;
+    }
+    100% {
+        bottom: -100px;
+    }
+}
+
+/* Primary hero button shimmer */
+.hero-btn-primary {
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-btn-primary::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, .2);
+    transform: translateY(100%);
+    transition: transform .3s ease;
+}
+
+.hero-btn-primary:hover::before {
+    transform: translateY(0);
+}
+
+/* Azure glow on hover */
+.glow-hover:hover {
+    box-shadow: 0 0 25px rgba(80, 167, 250, .4);
+}
+
+.badge {
+    background: rgba(80, 167, 250, .1);
+    border: 1px solid rgba(80, 167, 250, .3);
+}
+
+.badge .text-label-sm {
+    color: var(--color-primary-container);
+    letter-spacing: .15em;
+}
+
+/* Pulsing availability dot */
+.dot-pulse {
+    animation: dot-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #50a7fa;
+}
+
+@keyframes dot-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: .35;
+    }
+}
+
+.headline {
+    text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
+}
+
+.headline span {
+    color: var(--color-primary-container);
+}
+
+.subheadline {
+    max-width: 640px;
+    color: rgba(255, 255, 255, .85);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
+}
+
+/* Scroll indicator line */
+.scroll-line {
+    width: 1px;
+    height: 48px;
+    background: linear-gradient(to bottom, #50a7fa, transparent);
+}
+
+.hud-decorator-line {
+    width: 128px;
+    height: 1px;
+    background-color: var(--color-primary-container);
+}
+
+.hud-decorator {
+    opacity: .4;
+}
+
+.hud-decorator p {
+    color: var(--color-primary-container);
+    letter-spacing: .3em;
+}
+
+#bg {
+    z-index: 0;
+}
+
+#bg-img {
+    filter: grayscale(.2) brightness(.75);
+    transform: scale(1.05);
+}
+
+#bg-overlay {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, transparent 50%, rgba(0, 0, 0, .8) 100%);
+}
+
+#content-div {
+    z-index: 10;
+    min-height: 100vh;
+}
+
+#hud-decorator-top-left {
+    margin-top: 96px;
+}
+
+#hud-decorator-bottom-right {
+    margin-bottom: 96px;
+}
+
+#hud-decorator-bottom span {
+    letter-spacing: .2em;
+}
+
+#hero-content {
+    max-width: 896px;
+}
+
+#button-about-me {
+    background: rgba(255, 255, 255, .05);
+    border: 1px solid rgba(255, 255, 255, .2);
+    backdrop-filter: blur(4px);
+}
+
diff --git a/assets/ts/root/root.ts b/assets/ts/root/root.ts
new file mode 100644
index 0000000..a13a336
--- /dev/null
+++ b/assets/ts/root/root.ts
@@ -0,0 +1,11 @@
+import "../../styles/root/root.css";
+
+document.addEventListener('mousemove', (e) => {
+    const bg = document.getElementById('bg-img');
+    const x = (e.clientX - window.innerWidth / 2) * 0.005;
+    const y = (e.clientY - window.innerHeight / 2) * 0.005;
+
+    if (bg) {
+        bg.style.transform = `scale(1.05) translate(${x}px, ${y}px)`;
+    }
+});
diff --git a/templates/root/root.html.twig b/templates/root/root.html.twig
index 6d0f48a..5664daa 100644
--- a/templates/root/root.html.twig
+++ b/templates/root/root.html.twig
@@ -1,20 +1,97 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Hello RootController!{% endblock %}
+{% block title %}creative-dragonslayer.de | Deep Space Engineering{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('root') }}
+
+    <link rel="preload" href="{{ preload(asset('images/root/background.jpg'), { as: 'image' }) }}">
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('root') }}
+{% endblock %}
 
 {% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
 
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
+    {# ── Fixed Background ────────────────────────────────────────────────────── #}
+    <div id="bg" class="position-fixed top-0 start-0 w-100 h-100">
+        <img
+            id="bg-img"
+            src="{{ asset('images/root/background.jpg') }}"
+            alt="Hintergrundbild"
+            class="w-100 h-100 object-fit-cover"
+        >
+        <div id="bg-overlay" class="position-absolute top-0 start-0 w-100 h-100"></div>
+        <div class="scanline"></div>
+    </div>
+
+    <div id="content-div" class="position-relative d-flex flex-column align-items-center justify-content-center
+             w-100 text-center px-4">
+        {# HUD Decorator — Top Left #}
+        <div id="hud-decorator-top-left"
+             class="hud-decorator position-absolute top-0 start-0 d-none d-xl-flex flex-column gap-3 ps-4">
+            <div class="hud-decorator-line"></div>
+            <p class="text-label-sm mb-0 text-uppercase">System.Status: Stable</p>
+            <p class="text-label-sm mb-0 text-uppercase">Lat: 52.5200° N</p>
+        </div>
+
+        {# HUD Decorator — Bottom Right #}
+        <div id="hud-decorator-bottom-right"
+             class="hud-decorator position-absolute bottom-0 end-0 d-none d-xl-flex flex-column align-items-end gap-3 pe-4">
+            <p class="text-label-sm mb-0 text-end text-uppercase">V.0.9.0 // CORE</p>
+            <p class="text-label-sm mb-0 text-end text-uppercase">Syncing Precision...</p>
+            <div class="hud-decorator-line"></div>
+        </div>
+
+        {# Hero Content #}
+        <div id="hero-content" class="d-flex flex-column align-items-center gap-4">
+
+            {# Badge #}
+            <div class="badge d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill">
+                <span class="rounded-circle dot-pulse"></span>
+                <span class="text-label-sm text-uppercase">
+                    Debugging Life Since 2018
+                </span>
+            </div>
+
+            {# Headline #}
+            <h1 class="text-display-lg mb-0 text-white lh-1 headline">
+                CREATIVE
+                <span class="fst-italic fw-light">
+                    DRAGONSLAYER
+                </span>
+            </h1>
+
+            {# Subheadline #}
+            <p class="text-body-lg mb-0 mx-auto subheadline">
+                Code, Kommandozeile und Kaffee. Dies ist eine Sammlung meiner Hobbyprojekte, entwickelt mit
+                Leidenschaft. Hier geht es nicht um Skalierung oder Marktanteile, sondern darum, Probleme zu lösen,
+                die mich beschäftigen, und Techniken auszuprobieren, die mich neugierig machen.
+            </p>
+
+            {# CTAs #}
+            <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center align-items-center mt-2">
+                <a href="#projects"
+                   class="hero-btn-primary btn btn-primary text-white fw-bold px-5 py-3 rounded-3
+                      glow-hover d-inline-flex align-items-center gap-2">
+                    Zu den Projekten
+                    <span class="material-symbols-outlined">arrow_forward</span>
+                </a>
+                <a href="#about" id="button-about-me" class="btn fw-bold px-5 py-3 rounded-3 text-white">
+                    Werdegang
+                </a>
+            </div>
+        </div>
+
+        {# Scroll Indicator #}
+        <div id="hud-decorator-bottom" class="position-absolute bottom-0 start-50 translate-middle-x
+                d-flex flex-column align-items-center gap-2 pb-4 hud-decorator">
+            <span class="text-label-sm text-white text-uppercase">Deploying Scroll</span>
+            <div class="scroll-line"></div>
+        </div>
+    </div>
 
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code>/var/www/html/src/Controller/RootController.php</code></li>
-        <li>Your template at <code>/var/www/html/templates/root/index.html.twig</code></li>
-    </ul>
-</div>
 {% endblock %}