diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index ee857556..2d14df0f 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -8,6 +8,7 @@ repos:
       - id: end-of-file-fixer
       - id: check-yaml
       - id: check-added-large-files
+        exclude: ^static/images/
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.13.3
diff --git a/static/images/hero.jpg b/static/images/hero.jpg
new file mode 100644
index 00000000..e363827d
Binary files /dev/null and b/static/images/hero.jpg differ
diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html
index ceab2021..be90915d 100644
--- a/templates/includes/navbar.html
+++ b/templates/includes/navbar.html
@@ -1,6 +1,6 @@
 {% load static %}
 {# Modern DaisyUI Navbar #}
-<div class="navbar bg-neutral text-neutral-content shadow-lg">
+<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg">
     <div class="navbar-start">
         <a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
             <img src='{% static "/images/logo-short-white.svg" %}' width="100" alt="enviPath">
diff --git a/templates/index/index.html b/templates/index/index.html
index fb635feb..acc26269 100644
--- a/templates/index/index.html
+++ b/templates/index/index.html
@@ -6,7 +6,7 @@
     <section>
             <div
                 class="hero min-h-screen w-full mx-auto"
-            >
+                style="background-image: url('{% static "/images/hero.jpg" %}'); background-size: cover; background-position: center;">
 
                 <div class="hero-content flex-col lg:flex-row-reverse w-full">
                   <div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-1/2">
@@ -45,8 +45,11 @@
                                 <input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
                                 <button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
                             </div>
-                            <span class="label"><a href="#"> Example 1</a><a href="#"> Example 2</a></span>
-                            <span class="label justify-self-end"><a href="#"> Advanced </a></span>
+                            <div class="label flex flex-row gap-2 w-full mt-1" >
+                                <a href="#">Example 1</a>
+                                <a href="#">Example 2</a>
+                                <a class="ml-auto w-[9em]" href="#">Advanced </a> <!-- TODO: positioning a bit sloppy. Better reference button?  -->
+                            </div>
                             <input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
                             <input type="hidden" id="index-form-predict" name="predict" value="predict">
                             <input type="hidden" id="current-action" value="predict">