diff --git a/assets/app.js b/assets/app.js
index 7aa7252..8ed6e87 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -10,11 +10,11 @@ import './styles/modes.css';
 import './styles/emoji-footprint.css';
 
 // Import modules
-import './theme.js';
-import './emoji-footprint.js';
-import './modes.js';
-import { initNumberInputs } from './numberInputs.js';
-import { initRadioState } from './radioState.js';
+import './javascript/theme.js';
+import './javascript/emoji-footprint.js';
+import './javascript/modes.js';
+import { initNumberInputs } from './javascript/numberInputs.js';
+import { initRadioState } from './javascript/radioState.js';
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
@@ -23,4 +23,4 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize number inputs on page load
     initNumberInputs();
-});
\ No newline at end of file
+});
diff --git a/assets/emoji-footprint.js b/assets/javascript/emoji-footprint.js
similarity index 100%
rename from assets/emoji-footprint.js
rename to assets/javascript/emoji-footprint.js
diff --git a/assets/modes.js b/assets/javascript/modes.js
similarity index 89%
rename from assets/modes.js
rename to assets/javascript/modes.js
index 909348f..a288f32 100644
--- a/assets/modes.js
+++ b/assets/javascript/modes.js
@@ -1,7 +1,19 @@
 // Bonkers mode functionality
+function setEmojiLevelClass(mode) {
+    document.body.classList.remove('emoji-normal', 'emoji-enhanced', 'emoji-bonkers');
+    if (mode === 'bonkers') {
+        document.body.classList.add('emoji-bonkers');
+    } else if (mode === 'enhanced') {
+        document.body.classList.add('emoji-enhanced');
+    } else {
+        document.body.classList.add('emoji-normal');
+    }
+}
+
 function initBonkersMode() {
     // Check if we're in bonkers mode
     const currentMode = document.documentElement.getAttribute('data-website-mode');
+    setEmojiLevelClass(currentMode);
 
     if (currentMode === 'bonkers') {
         // Apply bonkers mode immediately
@@ -92,6 +104,7 @@ function watchModeChanges() {
 
                 if (newMode === 'bonkers') {
                     document.body.classList.add('bonkers-mode');
+                    setEmojiLevelClass(newMode);
 
                     // Start the fabulous effects
                     createExtraSparkles();
@@ -100,6 +113,7 @@ function watchModeChanges() {
                     console.log('🌈✨ Switched to bonkers mode! ✨🌈');
                 } else {
                     document.body.classList.remove('bonkers-mode');
+                    setEmojiLevelClass(newMode);
                     console.log(`😴 Switched to ${newMode} mode`);
                 }
             }
diff --git a/assets/numberInputs.js b/assets/javascript/numberInputs.js
similarity index 100%
rename from assets/numberInputs.js
rename to assets/javascript/numberInputs.js
diff --git a/assets/radioState.js b/assets/javascript/radioState.js
similarity index 100%
rename from assets/radioState.js
rename to assets/javascript/radioState.js
diff --git a/assets/theme.js b/assets/javascript/theme.js
similarity index 100%
rename from assets/theme.js
rename to assets/javascript/theme.js
diff --git a/assets/styles/app.css b/assets/styles/app.css
index befa7ed..f0278fd 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -117,4 +117,17 @@
    --bs-info-bg-subtle:      #00313D;
    --bs-warning-bg-subtle:   #3E3D1C;
    --bs-danger-bg-subtle:    #520E0E;
- }
\ No newline at end of file
+ }
+
+/* === EMOJI LEVELS === */
+.emoji-normal .emoji-normal { display: inline; }
+.emoji-normal .emoji-enhanced,
+.emoji-normal .emoji-bonkers { display: none; }
+
+.emoji-enhanced .emoji-enhanced { display: inline; }
+.emoji-enhanced .emoji-normal,
+.emoji-enhanced .emoji-bonkers { display: none; }
+
+.emoji-bonkers .emoji-bonkers { display: inline; }
+.emoji-bonkers .emoji-normal,
+.emoji-bonkers .emoji-enhanced { display: none; }
\ No newline at end of file
diff --git a/importmap.php b/importmap.php
index fbddf9e..1dea2bd 100644
--- a/importmap.php
+++ b/importmap.php
@@ -28,4 +28,13 @@ return [
         'version' => '5.3.6',
         'type' => 'css',
     ],
+    'chart.js' => [
+        'version' => '4.5.0',
+    ],
+    '@kurkle/color' => [
+        'version' => '0.3.4',
+    ],
+    'chart.js/auto' => [
+        'version' => '4.5.0',
+    ],
 ];
diff --git a/templates/base.html.twig b/templates/base.html.twig
index c0dab35..3af52a6 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -8,7 +8,7 @@
       </text>
     </svg>">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>{% block title %}Welcome!{% endblock %}</title>
+        <title>{% block title %}Welcome! 🥵💦🍆💋👅😈😏🍑💕💖💗💘💝💞💟💌💏💑🍌🥒💦👀😉😌😍🥰😘😚😋😫😩🥺🥴💖💗💕💞💓💗💖💘💝💋💏💑{% endblock %}</title>
         {% block stylesheets %}
         {% endblock %}
 
@@ -19,29 +19,63 @@
     <body>
     <nav class="navbar navbar-expand-lg sticky-top">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/">{{ appName }}</a>
+            <a class="navbar-brand" href="/">
+              {{ appName }}
+              <span class="emoji-normal">🍑</span>
+              <span class="emoji-enhanced">🍑🍆💋</span>
+              <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
+            </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                     aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon">
+                  <span class="emoji-normal">🍆</span>
+                  <span class="emoji-enhanced">🍆💦🍑</span>
+                  <span class="emoji-bonkers">🍆💦🍑👅💋😈🏳️‍🌈✨</span>
+                </span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
+                        <a class="nav-link active" aria-current="page" href="/">
+                          Home
+                          <span class="emoji-normal">💦</span>
+                          <span class="emoji-enhanced">💦🍑🍆</span>
+                          <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+                        </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="{{ path('app_system_config_index') }}">System Settings</a>
+                        <a class="nav-link" href="{{ path('app_system_config_index') }}">
+                          System Settings
+                          <span class="emoji-normal">😈</span>
+                          <span class="emoji-enhanced">😈🍆💦</span>
+                          <span class="emoji-bonkers">😈🍆💦👅💋🏳️‍🌈✨</span>
+                        </a>
                     </li>
                 </ul>
                 <div class="btn-group ms-auto" role="group" aria-label="Mode selection">
                     <input type="radio" class="btn-check" name="mode" id="normal" autocomplete="off" checked>
-                    <label class="btn btn-outline-primary" for="normal">Normal</label>
+                    <label class="btn btn-outline-primary" for="normal">
+                      Normal
+                      <span class="emoji-normal">😌</span>
+                      <span class="emoji-enhanced">😌🍑</span>
+                      <span class="emoji-bonkers">😌🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+                    </label>
 
                     <input type="radio" class="btn-check" name="mode" id="enhanced" autocomplete="off">
-                    <label class="btn btn-outline-primary" for="enhanced">Enhanced</label>
+                    <label class="btn btn-outline-primary" for="enhanced">
+                      Enhanced
+                      <span class="emoji-normal">✨</span>
+                      <span class="emoji-enhanced">✨🍑🍆</span>
+                      <span class="emoji-bonkers">✨🍑🍆💦👅💋😈🏳️‍🌈</span>
+                    </label>
 
                     <input type="radio" class="btn-check" name="mode" id="bonkers" autocomplete="off">
-                    <label class="btn btn-outline-primary" for="bonkers">Bonkers</label>
+                    <label class="btn btn-outline-primary" for="bonkers">
+                      Bonkers
+                      <span class="emoji-normal">💦</span>
+                      <span class="emoji-enhanced">💦🍑🍆</span>
+                      <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                    </label>
                 </div>
             </div>
         </div>
@@ -50,16 +84,25 @@
         {% block body %}{% endblock %}
     </div>
 
-    <!-- Modal container for HTMX -->
+    <!-- Modal container for HTMX 🥵💦🍆💋👅😈😏🍑💕💖💗💘💝💞💟💌💏💑🍌🥒💦👀😉😌😍🥰😘😚😋😫😩🥺🥴💖💗💕💞💓💗💖💘💝💋💏💑 -->
     <div class="modal fade" id="htmxModal" tabindex="-1" aria-labelledby="htmxModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="htmxModalLabel">Modal title</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <h5 class="modal-title" id="htmxModalLabel">
+                      Modal title
+                      <span class="emoji-normal">🍑</span>
+                      <span class="emoji-enhanced">🍑🍆💋</span>
+                      <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                      <span class="emoji-normal">💦</span>
+                      <span class="emoji-enhanced">💦🍑🍆</span>
+                      <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+                    </button>
                 </div>
                 <div class="modal-body" id="htmxModalBody">
-                    <!-- Content will be loaded here by HTMX -->
+                    <!-- Content will be loaded here by HTMX 🥵💦🍆💋👅😈😏🍑💕💖💗💘💝💞💟💌💏💑🍌🥒💦👀😉😌😍🥰😘😚😋😫😩🥺🥴💖💗💕💞💓💗💖💘💝💋💏💑 -->
                 </div>
             </div>
         </div>
diff --git a/templates/drink_type/_delete_form.html.twig b/templates/drink_type/_delete_form.html.twig
index d096570..915d46a 100644
--- a/templates/drink_type/_delete_form.html.twig
+++ b/templates/drink_type/_delete_form.html.twig
@@ -1,4 +1,9 @@
-<form method="post" action="{{ path('app_drink_type_delete', {'id': drink_type.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
+<form method="post" action="{{ path('app_drink_type_delete', {'id': drink_type.id}) }}" onsubmit="return confirm('🚨💀⚠️ ARE YOU SURE YOU WANT TO DELETE THIS ITEM?!!! 😱💔🔥');">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ drink_type.id) }}">
-    <button class="btn">Delete</button>
+    <button class="btn">
+      DELETE
+      <span class="emoji-normal">🗑️</span>
+      <span class="emoji-enhanced">🗑️💦</span>
+      <span class="emoji-bonkers">🗑️💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+    </button>
 </form>
diff --git a/templates/drink_type/_form.html.twig b/templates/drink_type/_form.html.twig
index bf20b98..4af9b75 100644
--- a/templates/drink_type/_form.html.twig
+++ b/templates/drink_type/_form.html.twig
@@ -1,4 +1,9 @@
 {{ form_start(form) }}
     {{ form_widget(form) }}
-    <button class="btn">{{ button_label|default('Save') }}</button>
+    <button class="btn">
+      SAVE
+      <span class="emoji-normal">💦</span>
+      <span class="emoji-enhanced">💦🍑🍆</span>
+      <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+    </button>
 {{ form_end(form) }}
diff --git a/templates/drink_type/bulk_edit_stock.html.twig b/templates/drink_type/bulk_edit_stock.html.twig
index f63a43c..ab4cb2e 100644
--- a/templates/drink_type/bulk_edit_stock.html.twig
+++ b/templates/drink_type/bulk_edit_stock.html.twig
@@ -1,14 +1,14 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Bulk Edit Drink Type Current Stock{% endblock %}
+{% block title %}📊🔥 BULK EDIT DRINK TYPE CURRENT STOCK!!! 💯⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
 <div class="container mt-4">
-    <h1>Bulk Edit Drink Type Current Stock</h1>
+    <h1>📊🔥💯 BULK EDIT DRINK TYPE CURRENT STOCK!!! ⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰</h1>
 
     {% for message in app.flashes('success') %}
         <div class="alert alert-success alert-dismissible fade show" role="alert">
-            {{ message }}
+            🎉✨ {{ message }} 🎉✨
             <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
         </div>
     {% endfor %}
@@ -19,8 +19,8 @@
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th>Drink Type</th>
-                    <th>Current Stock</th>
+                    <th>🍻🥃 DRINK TYPE!!! 🍷🍸</th>
+                    <th>📊💯 CURRENT STOCK!!! 🔥📈</th>
                 </tr>
             </thead>
             <tbody>
diff --git a/templates/drink_type/bulk_edit_wanted_stock.html.twig b/templates/drink_type/bulk_edit_wanted_stock.html.twig
index 2a6fd1d..3551ad7 100644
--- a/templates/drink_type/bulk_edit_wanted_stock.html.twig
+++ b/templates/drink_type/bulk_edit_wanted_stock.html.twig
@@ -1,19 +1,19 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}{% if from_order is defined and from_order %}Update Wanted Stock Before Order{% else %}Bulk Edit Drink Type Wanted Stock{% endif %}{% endblock %}
+{% block title %}{% if from_order is defined and from_order %}🎯💰 UPDATE WANTED STOCK BEFORE ORDER!!! 🛒🛍️💳🎉🎊✨💃🕺{% else %}🎯💰 BULK EDIT DRINK TYPE WANTED STOCK!!! ⭐✨🌟🎪🎨🎭🎯{% endif %}{% endblock %}
 
 {% block body %}
 <div class="container mt-4">
     {% if from_order is defined and from_order %}
-        <h1>Update Wanted Stock Levels Before Creating Order</h1>
-        <p class="lead">You can update the wanted stock levels before creating a new order, or skip this step.</p>
+        <h1>🎯💰✨ UPDATE WANTED STOCK LEVELS BEFORE CREATING ORDER!!! 🛒🛍️💳🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎲🎰</h1>
+        <p class="lead">🚀💫 You can update the wanted stock levels before creating a new order, or skip this step!!! ⚡🔥💯🎯</p>
     {% else %}
-        <h1>Bulk Edit Drink Type Wanted Stock</h1>
+        <h1>🎯💰✨ BULK EDIT DRINK TYPE WANTED STOCK!!! ⭐✨🌟🎪🎨🎭🎯🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎲🎰</h1>
     {% endif %}
 
     {% for message in app.flashes('success') %}
         <div class="alert alert-success alert-dismissible fade show" role="alert">
-            {{ message }}
+            🎉✨ {{ message }} 🎉✨
             <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
         </div>
     {% endfor %}
@@ -24,8 +24,8 @@
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th>Drink Type</th>
-                    <th>Wanted Stock</th>
+                    <th>🍻🥃 DRINK TYPE!!! 🍷🍸</th>
+                    <th>🎯💰 WANTED STOCK!!! ⭐✨</th>
                 </tr>
             </thead>
             <tbody>
@@ -48,7 +48,7 @@
     <div class="mt-3">
         {{ form_widget(form.save) }}
         {% if from_order is defined and from_order %}
-            <a href="{{ path('app_drink_type_bulk_edit_wanted_stock', {'from_order': 'true', 'skip': 'true'}) }}" class="btn btn-secondary">Skip and Create Order</a>
+            <a href="{{ path('app_drink_type_bulk_edit_wanted_stock', {'from_order': 'true', 'skip': 'true'}) }}" class="btn btn-secondary">⏭️🚀 SKIP AND CREATE ORDER!!! 🛒🛍️💳💰🎉🎊✨💃🕺</a>
         {% endif %}
     </div>
 
diff --git a/templates/drink_type/edit.html.twig b/templates/drink_type/edit.html.twig
index c60203d..5306412 100644
--- a/templates/drink_type/edit.html.twig
+++ b/templates/drink_type/edit.html.twig
@@ -1,13 +1,23 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Edit DrinkType{% endblock %}
+{% block title %}<span class="emoji-normal">✏️</span><span class="emoji-enhanced">✏️🍑</span><span class="emoji-bonkers">✏️🍑🍆💦👅💋😈🏳️‍🌈✨</span> EDIT DRINKTYPE{% endblock %}
 
 {% block body %}
-    <h1>Edit DrinkType</h1>
+    <h1>
+      EDIT DRINKTYPE
+      <span class="emoji-normal">✏️</span>
+      <span class="emoji-enhanced">✏️🍑</span>
+      <span class="emoji-bonkers">✏️🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+    </h1>
 
-    {{ include('drink_type/_form.html.twig', {'button_label': 'Update'}) }}
+    {{ include('drink_type/_form.html.twig', {'button_label': '🔄💯 UPDATE!!! 🚀💫⚡🔥'}) }}
 
-    <a href="{{ path('app_drink_type_index') }}">back to list</a>
+    <a href="{{ path('app_drink_type_index') }}">
+      BACK TO LIST
+      <span class="emoji-normal">↩️</span>
+      <span class="emoji-enhanced">↩️🍑</span>
+      <span class="emoji-bonkers">↩️🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+    </a>
 
     {{ include('drink_type/_delete_form.html.twig') }}
 {% endblock %}
diff --git a/templates/drink_type/index.html.twig b/templates/drink_type/index.html.twig
index cd40c23..213483c 100644
--- a/templates/drink_type/index.html.twig
+++ b/templates/drink_type/index.html.twig
@@ -1,39 +1,84 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}DrinkType index{% endblock %}
+{% block title %}<span class="emoji-normal">🍑</span><span class="emoji-enhanced">🍑🍆💋</span><span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span> DRINKTYPE INDEX{% endblock %}
 
 {% block body %}
-    <h1>DrinkType index</h1>
+    <h1>
+      DRINKTYPE INDEX
+      <span class="emoji-normal">🍑</span>
+      <span class="emoji-enhanced">🍑🍆💋</span>
+      <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+    </h1>
 
     <table class="table">
         <thead>
             <tr>
-                <th>Name</th>
-                <th>Description</th>
-                <th>Wanted Stock</th>
-                <th>Current Stock</th>
-                <th>actions</th>
+                <th>
+                  NAME
+                  <span class="emoji-normal">🍆</span>
+                  <span class="emoji-enhanced">🍆💦🍑</span>
+                  <span class="emoji-bonkers">🍆💦🍑👅💋😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                </th>
+                <th>
+                  DESCRIPTION
+                  <span class="emoji-normal">💋</span>
+                  <span class="emoji-enhanced">💋💦🍑</span>
+                  <span class="emoji-bonkers">💋💦🍑👅😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                </th>
+                <th>
+                  WANTED STOCK
+                  <span class="emoji-normal">😈</span>
+                  <span class="emoji-enhanced">😈🍆💦</span>
+                  <span class="emoji-bonkers">😈🍆💦👅💋🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                </th>
+                <th>
+                  CURRENT STOCK
+                  <span class="emoji-normal">💦</span>
+                  <span class="emoji-enhanced">💦🍑🍆</span>
+                  <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                </th>
+                <th>
+                  ACTIONS
+                  <span class="emoji-normal">💖</span>
+                  <span class="emoji-enhanced">💖🏳️‍🌈</span>
+                  <span class="emoji-bonkers">💖🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                </th>
             </tr>
         </thead>
         <tbody>
         {% for drink_type in drink_types %}
             <tr>
-                <td>{{ drink_type.name }}</td>
-                <td>{{ drink_type.description }}</td>
-                <td>{{ drink_type.wantedStock }}</td>
-                <td>{{ drink_type.currentStock }}</td>
+                <td><span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦</span><span class="emoji-bonkers">🍆💦🍑👅💋</span> {{ drink_type.name }}</td>
+                <td><span class="emoji-normal">💋</span><span class="emoji-enhanced">💋💦</span><span class="emoji-bonkers">💋💦🍑👅</span> {{ drink_type.description }}</td>
+                <td><span class="emoji-normal">😈</span><span class="emoji-enhanced">😈🍆</span><span class="emoji-bonkers">😈🍆💦👅</span> {{ drink_type.wantedStock }}</td>
+                <td><span class="emoji-normal">💦</span><span class="emoji-enhanced">💦🍑</span><span class="emoji-bonkers">💦🍑🍆👅</span> {{ drink_type.currentStock }}</td>
                 <td>
-                    <a href="{{ path('app_drink_type_show', {'id': drink_type.id}) }}">show</a>
-                    <a href="{{ path('app_drink_type_edit', {'id': drink_type.id}) }}">edit</a>
+                    <a href="{{ path('app_drink_type_show', {'id': drink_type.id}) }}">
+                      SHOW
+                      <span class="emoji-normal">👀</span>
+                      <span class="emoji-enhanced">👀💋</span>
+                      <span class="emoji-bonkers">👀💋😈🏳️‍🌈✨</span>
+                    </a>
+                    <a href="{{ path('app_drink_type_edit', {'id': drink_type.id}) }}">
+                      EDIT
+                      <span class="emoji-normal">✏️</span>
+                      <span class="emoji-enhanced">✏️💦</span>
+                      <span class="emoji-bonkers">✏️💦🍑🍆👅</span>
+                    </a>
                 </td>
             </tr>
         {% else %}
             <tr>
-                <td colspan="5">no records found</td>
+                <td colspan="5">😭💔 NO RECORDS FOUND!!! 😢🚫❌</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
-    <a href="{{ path('app_drink_type_new') }}">Create new</a>
+    <a href="{{ path('app_drink_type_new') }}">
+      CREATE NEW
+      <span class="emoji-normal">🆕</span>
+      <span class="emoji-enhanced">🆕🍑</span>
+      <span class="emoji-bonkers">🆕🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+    </a>
 {% endblock %}
diff --git a/templates/drink_type/new.html.twig b/templates/drink_type/new.html.twig
index b215981..c645813 100644
--- a/templates/drink_type/new.html.twig
+++ b/templates/drink_type/new.html.twig
@@ -1,11 +1,21 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}New DrinkType{% endblock %}
+{% block title %}<span class="emoji-normal">🆕</span><span class="emoji-enhanced">🆕🍑</span><span class="emoji-bonkers">🆕🍑🍆💦👅💋😈🏳️‍🌈✨</span> NEW DRINKTYPE{% endblock %}
 
 {% block body %}
-    <h1>Create new DrinkType</h1>
+    <h1>
+      CREATE NEW DRINKTYPE
+      <span class="emoji-normal">🍑</span>
+      <span class="emoji-enhanced">🍑🍆💋</span>
+      <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
+    </h1>
 
     {{ include('drink_type/_form.html.twig') }}
 
-    <a href="{{ path('app_drink_type_index') }}">back to list</a>
+    <a href="{{ path('app_drink_type_index') }}">
+      BACK TO LIST
+      <span class="emoji-normal">↩️</span>
+      <span class="emoji-enhanced">↩️🍑</span>
+      <span class="emoji-bonkers">↩️🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+    </a>
 {% endblock %}
diff --git a/templates/drink_type/show.html.twig b/templates/drink_type/show.html.twig
index 9531d0a..fcbc3d5 100644
--- a/templates/drink_type/show.html.twig
+++ b/templates/drink_type/show.html.twig
@@ -1,46 +1,56 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}{{ drink_type.name }}{% endblock %}
+{% block title %}<span class="emoji-normal">🍑</span><span class="emoji-enhanced">🍑🍆💋</span><span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span> {{ drink_type.name }}{% endblock %}
 
 {% block body %}
     <div class="container">
-        <h1>{{ drink_type.name }}</h1>
+        <h1>
+          {{ drink_type.name }}
+          <span class="emoji-normal">🍑</span>
+          <span class="emoji-enhanced">🍑🍆💋</span>
+          <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
+        </h1>
 
         <div class="row mb-4">
             <div class="col-md-12">
                 <div class="card">
                     <div class="card-header">
-                        <h5 class="card-title">Drink Details</h5>
+                        <h5 class="card-title">
+                          DRINK DETAILS
+                          <span class="emoji-normal">💦</span>
+                          <span class="emoji-enhanced">💦🍑🍆</span>
+                          <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+                        </h5>
                     </div>
                     <div class="card-body">
                         <table class="table">
                             <tbody>
                                 <tr>
-                                    <th>Id</th>
+                                    <th>ID <span class="emoji-normal">😈</span><span class="emoji-enhanced">😈🍆</span><span class="emoji-bonkers">😈🍆💦</span></th>
                                     <td>{{ drink_type.id }}</td>
                                 </tr>
                                 <tr>
-                                    <th>CreatedAt</th>
+                                    <th>CREATED AT <span class="emoji-normal">💋</span><span class="emoji-enhanced">💋💦</span><span class="emoji-bonkers">💋💦🍑</span></th>
                                     <td>{{ drink_type.createdAt ? drink_type.createdAt|date('Y-m-d H:i:s') : '' }}</td>
                                 </tr>
                                 <tr>
-                                    <th>UpdatedAt</th>
+                                    <th>UPDATED AT <span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦</span><span class="emoji-bonkers">🍆💦🍑</span></th>
                                     <td>{{ drink_type.updatedAt ? drink_type.updatedAt|date('Y-m-d H:i:s') : '' }}</td>
                                 </tr>
                                 <tr>
-                                    <th>Name</th>
+                                    <th>NAME <span class="emoji-normal">🍑</span><span class="emoji-enhanced">🍑🍆</span><span class="emoji-bonkers">🍑🍆💋</span></th>
                                     <td>{{ drink_type.name }}</td>
                                 </tr>
                                 <tr>
-                                    <th>Description</th>
+                                    <th>DESCRIPTION <span class="emoji-normal">💋</span><span class="emoji-enhanced">💋💦</span><span class="emoji-bonkers">💋💦🍑</span></th>
                                     <td>{{ drink_type.description }}</td>
                                 </tr>
                                 <tr>
-                                    <th>Current Stock</th>
+                                    <th>CURRENT STOCK <span class="emoji-normal">💦</span><span class="emoji-enhanced">💦🍑</span><span class="emoji-bonkers">💦🍑🍆</span></th>
                                     <td>{{ drink_type.currentStock }}</td>
                                 </tr>
                                 <tr>
-                                    <th>Wanted Stock</th>
+                                    <th>WANTED STOCK <span class="emoji-normal">😈</span><span class="emoji-enhanced">😈🍆</span><span class="emoji-bonkers">😈🍆💦</span></th>
                                     <td>{{ drink_type.wantedStock }}</td>
                                 </tr>
                             </tbody>
@@ -50,20 +60,68 @@
             </div>
         </div>
 
+        <div class="row mb-4">
+            <div class="col-md-12">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title">Example Chart</h5>
+                    </div>
+                    <div class="card-body">
+                        <canvas id="stockHistoryChart"></canvas>
+                        <script type="module">
+                            import { Chart } from 'chart.js/auto';
+                            new Chart(document.getElementById('stockHistoryChart'), {
+                                type: 'line',
+                                data: {
+                                    labels: [{% for record in stock_history %}'{{ record.changeDate|date('Y-m-d H:i') }}'{{ not loop.last ? ',' }}{% endfor %}],
+                                    datasets: [{
+                                        label: 'Stock History',
+                                        data: [{% for record in stock_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                                        borderColor: 'rgb(75, 192, 192)',
+                                        tension: 0.1
+                                    },
+                                        {
+                                            label: 'Wanted Stock History',
+                                            data: [{% for record in wanted_history %}{{ record.newValue }}{{ not loop.last ? ',' }}{% endfor %}],
+                                            borderColor: 'rgb(255, 99, 132)',
+                                            tension: 0.1
+                                        }]
+                                },
+                                options: {
+                                    responsive: true,
+                                    scales: {
+                                        y: {
+                                            beginAtZero: true
+                                        }
+                                    }
+                                }
+                            });
+                        </script>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="row mb-4">
             <div class="col-md-12">
                 <div class="card">
                     <div class="card-header">
                         <h5 class="card-title">Orders Containing This Drink</h5>
+                        <h5 class="card-title">
+                          ORDERS CONTAINING THIS DRINK
+                          <span class="emoji-normal">💋</span>
+                          <span class="emoji-enhanced">💋🍑</span>
+                          <span class="emoji-bonkers">💋🍑🍆👅😈🏳️‍🌈✨</span>
+                        </h5>
                     </div>
                     <div class="card-body">
                         {% if order_items|length > 0 %}
                             <table class="table table-striped">
                                 <thead>
                                     <tr>
-                                        <th>Order ID</th>
-                                        <th>Date</th>
-                                        <th>Quantity</th>
+                                        <th>ORDER ID <span class="emoji-normal">😈</span><span class="emoji-enhanced">😈🍆</span><span class="emoji-bonkers">😈🍆💦</span></th>
+                                        <th>DATE <span class="emoji-normal">💋</span><span class="emoji-enhanced">💋💦</span><span class="emoji-bonkers">💋💦🍑</span></th>
+                                        <th>QUANTITY <span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦</span><span class="emoji-bonkers">🍆💦🍑</span></th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -77,7 +135,7 @@
                                 </tbody>
                             </table>
                         {% else %}
-                            <p>No orders found for this drink.</p>
+                            <p>😭💔 No orders found for this drink!!! 😢🚫❌</p>
                         {% endif %}
                     </div>
                 </div>
@@ -88,28 +146,28 @@
             <div class="col-md-12">
                 <div class="card">
                     <div class="card-header">
-                        <h5 class="card-title">Inventory History</h5>
+                        <h5 class="card-title">📊📈 INVENTORY HISTORY!!! 🔥💯⚡🚀💫⭐✨</h5>
                     </div>
                     <div class="card-body">
                         {% if stock_history|length > 0 %}
                             <table class="table table-striped">
                                 <thead>
                                     <tr>
-                                        <th>Date</th>
-                                        <th>Quantity</th>
+                                        <th>📅🕐 DATE!!! 🎪🎨</th>
+                                        <th>🔢📦 QUANTITY!!! 💯⚡</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {% for record in stock_history %}
                                         <tr>
-                                            <td>{{ record.changeDate|date('Y-m-d H:i:s') }}</td>
-                                            <td>{{ record.newValue }}</td>
+                                            <td>📅 {{ record.changeDate|date('Y-m-d H:i:s') }} 📅</td>
+                                            <td>🔢 {{ record.newValue }} 🔢</td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
                             </table>
                         {% else %}
-                            <p>No inventory history found for this drink.</p>
+                            <p>😭💔 No inventory history found for this drink!!! 😢🚫❌</p>
                         {% endif %}
                     </div>
                 </div>
@@ -120,28 +178,28 @@
             <div class="col-md-12">
                 <div class="card">
                     <div class="card-header">
-                        <h5 class="card-title">Desired Stock History</h5>
+                        <h5 class="card-title">🎯💰 DESIRED STOCK HISTORY!!! ⭐✨🌟🎪🎨🎭🎯</h5>
                     </div>
                     <div class="card-body">
                         {% if wanted_history|length > 0 %}
                             <table class="table table-striped">
                                 <thead>
                                     <tr>
-                                        <th>Date</th>
-                                        <th>New Value</th>
+                                        <th>📅🕐 DATE!!! 🎪🎨</th>
+                                        <th>💰🎯 NEW VALUE!!! ⭐✨</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {% for log in wanted_history %}
                                         <tr>
-                                            <td>{{ log.changeDate|date('Y-m-d H:i:s') }}</td>
-                                            <td>{{ log.newValue }}</td>
+                                            <td>📅 {{ log.changeDate|date('Y-m-d H:i:s') }} 📅</td>
+                                            <td>💰 {{ log.newValue }} 💰</td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
                             </table>
                         {% else %}
-                            <p>No desired stock history found for this drink.</p>
+                            <p>😭💔 No desired stock history found for this drink!!! 😢🚫❌</p>
                         {% endif %}
                     </div>
                 </div>
@@ -150,8 +208,18 @@
 
         <div class="row mb-4">
             <div class="col-md-12">
-                <a href="{{ path('app_drink_type_index') }}" class="btn btn-secondary">Back to list</a>
-                <a href="{{ path('app_drink_type_edit', {'id': drink_type.id}) }}" class="btn btn-primary">Edit</a>
+                <a href="{{ path('app_drink_type_index') }}" class="btn btn-secondary">
+                  BACK TO LIST
+                  <span class="emoji-normal">↩️</span>
+                  <span class="emoji-enhanced">↩️🍑</span>
+                  <span class="emoji-bonkers">↩️🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+                </a>
+                <a href="{{ path('app_drink_type_edit', {'id': drink_type.id}) }}" class="btn btn-primary">
+                  EDIT
+                  <span class="emoji-normal">✏️</span>
+                  <span class="emoji-enhanced">✏️🍑</span>
+                  <span class="emoji-bonkers">✏️🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+                </a>
                 {{ include('drink_type/_delete_form.html.twig') }}
             </div>
         </div>
diff --git a/templates/form/theme.html.twig b/templates/form/theme.html.twig
index ace53b4..525d2c2 100644
--- a/templates/form/theme.html.twig
+++ b/templates/form/theme.html.twig
@@ -12,11 +12,11 @@
     <div class="number-input-wrapper">
         <div class="input-group">
             <button class="btn btn-outline-secondary number-decrease" type="button" data-action="decrease">
-                -
+                ➖🔥 DECREASE!!! 💥⚡
             </button>
             {{- block('form_widget_simple') -}}
             <button class="btn btn-outline-secondary number-increase" type="button" data-action="increase">
-                +
+                ➕✨ INCREASE!!! 🚀💫
             </button>
         </div>
     </div>
diff --git a/templates/index.html.twig b/templates/index.html.twig
index 28754fb..d51054c 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -1,30 +1,35 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Inventory Overview{% endblock %}
+{% block title %}🍻🍺🥃🍷🍸🍹🥂🍾💃🕺🎉🎊✨ INVENTORY OVERVIEW!!! 🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰🎊🎉{% endblock %}
 
 {% block body %}
     <div class="container">
-        <h1>Drink Inventory</h1>
+        <h1>
+          DRINK INVENTORY
+          <span class="emoji-normal">💦</span>
+          <span class="emoji-enhanced">💦🍑🍆</span>
+          <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+        </h1>
         {% if lowStock != [] %}
         <div class="card">
             <div class="card-header bg-danger">
-                <h5 class="card-title">LOW STOCK ALERT</h5>
+                <h5 class="card-title">🚨🔥💀⚠️🆘🚨 LOW STOCK ALERT!!! 🚨🔥💀⚠️🆘🚨</h5>
             </div>
             <div class="card-body">
                 <ul>
                     {% for drinkType in lowStock %}
-                        <li>{{ drinkType.name }} ({{ drinkType.currentStock }} / {{ drinkType.wantedStock }})</li>
+                        <li>🍻 {{ drinkType.name }} ({{ drinkType.currentStock }} / {{ drinkType.wantedStock }}) 🍻</li>
                     {% endfor %}
                 </ul>
                 {% if orders == [] %}
-                    <a href="{{ path('app_drink_type_bulk_edit_wanted_stock', {'from_order': 'true'}) }}" class="btn btn-primary">Create New Order</a>
+                    <a href="{{ path('app_drink_type_bulk_edit_wanted_stock', {'from_order': 'true'}) }}" class="btn btn-primary">🛒🛍️💳💰✨ CREATE NEW ORDER!!! 🎉🎊🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪</a>
                 {% else %}
-                    <p>There are already orders planned:</p>
+                    <p>🔥💯 There are already orders planned: 🎯🎪🎨🎭</p>
                     <ul>
                         {% for order in orders %}
                         <li>
                             <a href="{{ path("app_order_show", {'id': order.id}) }}">
-                                {{ order.id }} - {{ order.status.value }}
+                                🛒 {{ order.id }} - {{ order.status.value }} 🛒
                             </a>
                         </li>
                         {% endfor %}
@@ -35,28 +40,33 @@
         {% endif %}
         <div class="card mt-3">
         <div class="card-header">
-                <h5 class="card-title">Drink Inventory Overview</h5>
+                <h5 class="card-title">🍻🍺🥃🍷🍸🍹🥂🍾 DRINK INVENTORY OVERVIEW!!! 🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪</h5>
             </div>
             <div class="card-body">
                 <table class="table table-striped">
                     <thead>
                     <tr>
-                        <th>Drink Name</th>
-                        <th>Description</th>
-                        <th>Current Stock</th>
-                        <th>Wanted Stock</th>
-                        <th>Actions</th>
+                        <th>
+                          DRINK NAME
+                          <span class="emoji-normal">🍑</span>
+                          <span class="emoji-enhanced">🍑🍆💋</span>
+                          <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                        </th>
+                        <th>📝✨ DESCRIPTION!!! 💖💕</th>
+                        <th>📊💯 CURRENT STOCK!!! 🔥📈</th>
+                        <th>🎯💰 WANTED STOCK!!! ⭐✨</th>
+                        <th>🎮🎪 ACTIONS!!! 🚀💫</th>
                     </tr>
                     </thead>
                     <tbody>
                     {% for drinkType in drinkTypes %}
                         <tr>
                             <td>
-                                <a href="{{ path('app_drink_type_show', {'id': drinkType.id}) }}">{{ drinkType.name }}</a>
+                                <a href="{{ path('app_drink_type_show', {'id': drinkType.id}) }}">🍻 {{ drinkType.name }} 🍻</a>
                             </td>
-                            <td>{{ drinkType.description }}</td>
-                            <td>{{ drinkType.currentStock }}</td>
-                            <td>{{ drinkType.wantedStock }}</td>
+                            <td>✨ {{ drinkType.description }} ✨</td>
+                            <td>📊 {{ drinkType.currentStock }} 📊</td>
+                            <td>🎯 {{ drinkType.wantedStock }} 🎯</td>
                             <td>
                             </td>
                         </tr>
@@ -64,9 +74,14 @@
                     </tbody>
                 </table>
                 <div class="mt-3">
-                    <a href="{{ path('app_drink_type_index') }}" class="btn btn-primary">View All Drinks</a>
-                    <a href="{{ path('app_drink_type_bulk_edit_stock') }}" class="btn btn-secondary">Mass Update Current Stock</a>
-                    <a href="{{ path('app_drink_type_bulk_edit_wanted_stock') }}" class="btn btn-secondary">Mass Update Wanted Stock</a>
+                    <a href="{{ path('app_drink_type_index') }}" class="btn btn-primary">
+                      VIEW ALL DRINKS
+                      <span class="emoji-normal">🍆</span>
+                      <span class="emoji-enhanced">🍆💦🍑</span>
+                      <span class="emoji-bonkers">🍆💦🍑👅💋😈🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span>
+                    </a>
+                    <a href="{{ path('app_drink_type_bulk_edit_stock') }}" class="btn btn-secondary">📊🔥 MASS UPDATE CURRENT STOCK!!! 💯⚡🚀💫⭐✨</a>
+                    <a href="{{ path('app_drink_type_bulk_edit_wanted_stock') }}" class="btn btn-secondary">🎯💰 MASS UPDATE WANTED STOCK!!! 🛒🛍️💳🎪🎨🎭</a>
                 </div>
             </div>
         </div>
diff --git a/templates/order/_delete_form.html.twig b/templates/order/_delete_form.html.twig
index 577ac75..227a37b 100644
--- a/templates/order/_delete_form.html.twig
+++ b/templates/order/_delete_form.html.twig
@@ -1,4 +1,4 @@
-<form method="post" action="{{ path('app_order_delete', {'id': order.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
+<form method="post" action="{{ path('app_order_delete', {'id': order.id}) }}" onsubmit="return confirm('🚨💀⚠️ ARE YOU SURE YOU WANT TO DELETE THIS ITEM?!!! 😱💔🔥');">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ order.id) }}">
-    <button class="btn">Delete</button>
+    <button class="btn">🗑️💀 DELETE!!! 🔥💥⚡��</button>
 </form>
diff --git a/templates/order/_form.html.twig b/templates/order/_form.html.twig
index d29165d..10a92d5 100644
--- a/templates/order/_form.html.twig
+++ b/templates/order/_form.html.twig
@@ -1,15 +1,21 @@
 {{ form_start(form) }}
     {{ form_row(form.status) }}
 
-    <h3>Order Items</h3> <div class="order-items-wrapper"
+    <h3>
+      ORDER ITEMS
+      <span class="emoji-normal">🍑</span>
+      <span class="emoji-enhanced">🍑🍆💋</span>
+      <span class="emoji-bonkers">🍑🍆💋👅😈🏳️‍🌈✨</span>
+    </h3>
+    <div class="order-items-wrapper"
          data-prototype="{{ form_widget(form.orderItems.vars.prototype)|e('html_attr') }}"
          data-index="{{ form.orderItems|length }}">
         <table class="table">
             <thead>
                 <tr>
-                    <th>Drink Type</th>
-                    <th>Quantity</th>
-                    <th>Actions</th>
+                    <th>DRINK TYPE <span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦🍑</span><span class="emoji-bonkers">🍆💦🍑👅💋</span></th>
+                    <th>QUANTITY <span class="emoji-normal">💦</span><span class="emoji-enhanced">💦🍑</span><span class="emoji-bonkers">💦🍑🍆👅</span></th>
+                    <th>ACTIONS <span class="emoji-normal">💖</span><span class="emoji-enhanced">💖🏳️‍🌈</span><span class="emoji-bonkers">💖🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span></th>
                 </tr>
             </thead>
             <tbody class="order-items-list">
@@ -18,16 +24,31 @@
                         <td>{{ form_widget(orderItemForm.drinkType) }}</td>
                         <td>{{ form_widget(orderItemForm.quantity) }}</td>
                         <td>
-                            <button type="button" class="btn btn-danger remove-order-item">Remove</button>
+                            <button type="button" class="btn btn-danger remove-order-item">
+                              REMOVE
+                              <span class="emoji-normal">🗑️</span>
+                              <span class="emoji-enhanced">🗑️💦</span>
+                              <span class="emoji-bonkers">🗑️💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+                            </button>
                         </td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
-        <button type="button" class="btn btn-success add-order-item">Add Item</button>
+        <button type="button" class="btn btn-success add-order-item">
+          ADD ITEM
+          <span class="emoji-normal">➕</span>
+          <span class="emoji-enhanced">➕🍑</span>
+          <span class="emoji-bonkers">➕🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+        </button>
     </div>
 
-    <button class="btn btn-primary mt-3">{{ button_label|default('Save') }}</button>
+    <button class="btn btn-primary mt-3">
+      SAVE
+      <span class="emoji-normal">💦</span>
+      <span class="emoji-enhanced">💦🍑🍆</span>
+      <span class="emoji-bonkers">💦🍑🍆👅💋😈🏳️‍🌈✨</span>
+    </button>
 {{ form_end(form) }}
 
 <script>
@@ -70,7 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
         const removeButton = document.createElement('button');
         removeButton.type = 'button';
         removeButton.className = 'btn btn-danger remove-order-item';
-        removeButton.textContent = 'Remove';
+        removeButton.textContent = 'REMOVE';
         actionsCell.appendChild(removeButton);
 
         // Add cells to the row
diff --git a/templates/order/edit.html.twig b/templates/order/edit.html.twig
index a13d1aa..4639b29 100644
--- a/templates/order/edit.html.twig
+++ b/templates/order/edit.html.twig
@@ -1,13 +1,13 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Edit Order{% endblock %}
+{% block title %}✏️📝 EDIT ORDER!!! 🔥💯⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
-    <h1>Edit Order</h1>
+    <h1>✏️📝🛒🛍️ EDIT ORDER!!! 🔥💯⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰</h1>
 
-    {{ include('order/_form.html.twig', {'button_label': 'Update'}) }}
+    {{ include('order/_form.html.twig', {'button_label': '🔄💯 UPDATE!!! 🚀💫⚡🔥'}) }}
 
-    <a href="{{ path('app_order_index') }}">back to list</a>
+    <a href="{{ path('app_order_index') }}">↩️📋 BACK TO LIST!!! 🎉🎊✨💃🕺</a>
 
     {{ include('order/_delete_form.html.twig') }}
 {% endblock %}
diff --git a/templates/order/index.html.twig b/templates/order/index.html.twig
index 820a45c..10a4962 100644
--- a/templates/order/index.html.twig
+++ b/templates/order/index.html.twig
@@ -1,18 +1,23 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Order index{% endblock %}
+{% block title %}<span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦🍑</span><span class="emoji-bonkers">🍆💦🍑👅💋😈🏳️‍🌈✨</span> ORDER INDEX{% endblock %}
 
 {% block body %}
-    <h1>Order index</h1>
+    <h1>
+      ORDER INDEX
+      <span class="emoji-normal">🍆</span>
+      <span class="emoji-enhanced">🍆💦🍑</span>
+      <span class="emoji-bonkers">🍆💦🍑👅💋😈🏳️‍🌈✨</span>
+    </h1>
 
     <table class="table">
         <thead>
             <tr>
-                <th>Id</th>
-                <th>CreatedAt</th>
-                <th>UpdatedAt</th>
-                <th>Status</th>
-                <th>actions</th>
+                <th>ID <span class="emoji-normal">😈</span><span class="emoji-enhanced">😈🍆</span><span class="emoji-bonkers">😈🍆💦</span></th>
+                <th>CREATED AT <span class="emoji-normal">💋</span><span class="emoji-enhanced">💋💦</span><span class="emoji-bonkers">💋💦🍑</span></th>
+                <th>UPDATED AT <span class="emoji-normal">🍆</span><span class="emoji-enhanced">🍆💦</span><span class="emoji-bonkers">🍆💦🍑</span></th>
+                <th>STATUS <span class="emoji-normal">💦</span><span class="emoji-enhanced">💦🍑</span><span class="emoji-bonkers">💦🍑🍆</span></th>
+                <th>ACTIONS <span class="emoji-normal">💖</span><span class="emoji-enhanced">💖🏳️‍🌈</span><span class="emoji-bonkers">💖🏳️‍🌈✨🥵😳🤤😍🥴💕💗💘💝💞💟💌💏💑</span></th>
             </tr>
         </thead>
         <tbody>
@@ -23,17 +28,32 @@
                 <td>{{ order.updatedAt ? order.updatedAt|date('Y-m-d H:i:s') : '' }}</td>
                 <td>{{ order.status.value }}</td>
                 <td>
-                    <a href="{{ path('app_order_show', {'id': order.id}) }}">show</a>
-                    <a href="{{ path('app_order_edit', {'id': order.id}) }}">edit</a>
+                    <a href="{{ path('app_order_show', {'id': order.id}) }}">
+                      SHOW
+                      <span class="emoji-normal">👀</span>
+                      <span class="emoji-enhanced">👀💋</span>
+                      <span class="emoji-bonkers">👀💋😈🏳️‍🌈✨</span>
+                    </a>
+                    <a href="{{ path('app_order_edit', {'id': order.id}) }}">
+                      EDIT
+                      <span class="emoji-normal">✏️</span>
+                      <span class="emoji-enhanced">✏️💦</span>
+                      <span class="emoji-bonkers">✏️💦🍑🍆👅</span>
+                    </a>
                 </td>
             </tr>
         {% else %}
             <tr>
-                <td colspan="5">no records found</td>
+                <td colspan="5">😭💔 NO RECORDS FOUND!!! 😢🚫❌</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
-    <a href="{{ path('app_order_new') }}">Create new</a>
+    <a href="{{ path('app_order_new') }}">
+      CREATE NEW
+      <span class="emoji-normal">🆕</span>
+      <span class="emoji-enhanced">🆕🍑</span>
+      <span class="emoji-bonkers">🆕🍑🍆💦👅💋😈🏳️‍🌈✨</span>
+    </a>
 {% endblock %}
diff --git a/templates/order/new.html.twig b/templates/order/new.html.twig
index a2f8f6a..eac18d9 100644
--- a/templates/order/new.html.twig
+++ b/templates/order/new.html.twig
@@ -1,11 +1,11 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}New Order{% endblock %}
+{% block title %}🆕🛒 NEW ORDER!!! 🛍️💳💰🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
-    <h1>Create new Order</h1>
+    <h1>🆕🛒🛍️💳 CREATE NEW ORDER!!! 💰🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰</h1>
 
     {{ include('order/_form.html.twig') }}
 
-    <a href="{{ path('app_order_index') }}">back to list</a>
+    <a href="{{ path('app_order_index') }}">↩️📋 BACK TO LIST!!! 🎉🎊✨💃🕺</a>
 {% endblock %}
diff --git a/templates/order/show.html.twig b/templates/order/show.html.twig
index 3545921..8f5f50e 100644
--- a/templates/order/show.html.twig
+++ b/templates/order/show.html.twig
@@ -1,56 +1,56 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Order{% endblock %}
+{% block title %}🛒🛍️💳 ORDER!!! 🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
-    <h1>Order</h1>
+    <h1>🛒🛍️💳💰🎉🎊✨ ORDER!!! 💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰🎊🎉</h1>
 
     <table class="table">
         <tbody>
             <tr>
-                <th>Id</th>
-                <td>{{ order.id }}</td>
+                <th>🆔💫 ID!!! ⭐✨</th>
+                <td>🆔 {{ order.id }} 🆔</td>
             </tr>
             <tr>
-                <th>CreatedAt</th>
-                <td>{{ order.createdAt ? order.createdAt|date('Y-m-d H:i:s') : '' }}</td>
+                <th>📅🕐 CREATED AT!!! 🎪🎨</th>
+                <td>📅 {{ order.createdAt ? order.createdAt|date('Y-m-d H:i:s') : '' }} 📅</td>
             </tr>
             <tr>
-                <th>UpdatedAt</th>
-                <td>{{ order.updatedAt ? order.updatedAt|date('Y-m-d H:i:s') : '' }}</td>
+                <th>🔄📅 UPDATED AT!!! 🎭🎯</th>
+                <td>🔄 {{ order.updatedAt ? order.updatedAt|date('Y-m-d H:i:s') : '' }} 🔄</td>
             </tr>
             <tr>
-                <th>Status</th>
-                <td>{{ order.status.value }}</td>
+                <th>📊🔥 STATUS!!! 💯⚡</th>
+                <td>📊 {{ order.status.value }} 📊</td>
             </tr>
         </tbody>
     </table>
 
-    <h2>Order Items</h2>
+    <h2>🛒📦 ORDER ITEMS!!! 🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪</h2>
     {% if order.orderItems|length > 0 %}
         <table class="table">
             <thead>
                 <tr>
-                    <th>Drink Type</th>
-                    <th>Quantity</th>
+                    <th>🍻🥃 DRINK TYPE!!! 🍷🍸</th>
+                    <th>🔢📦 QUANTITY!!! 💯⚡</th>
                 </tr>
             </thead>
             <tbody>
                 {% for item in order.orderItems %}
                     <tr>
-                        <td>{{ item.drinkType.name }}</td>
-                        <td>{{ item.quantity }}</td>
+                        <td>🍻 {{ item.drinkType.name }} 🍻</td>
+                        <td>🔢 {{ item.quantity }} 🔢</td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
     {% else %}
-        <p>No items in this order.</p>
+        <p>😭💔 No items in this order!!! 😢🚫❌</p>
     {% endif %}
 
-    <a href="{{ path('app_order_index') }}" class="btn btn-secondary">Back to list</a>
+    <a href="{{ path('app_order_index') }}" class="btn btn-secondary">↩️📋 BACK TO LIST!!! 🎉🎊✨💃🕺</a>
 
-    <a href="{{ path('app_order_edit', {'id': order.id}) }}" class="btn btn-primary">Edit</a>
+    <a href="{{ path('app_order_edit', {'id': order.id}) }}" class="btn btn-primary">✏️📝 EDIT!!! 🔥💯⚡🚀💫⭐</a>
 
     {{ include('order/_delete_form.html.twig') }}
 {% endblock %}
diff --git a/templates/system_config/_form.html.twig b/templates/system_config/_form.html.twig
index bf20b98..26426fd 100644
--- a/templates/system_config/_form.html.twig
+++ b/templates/system_config/_form.html.twig
@@ -1,4 +1,4 @@
 {{ form_start(form) }}
     {{ form_widget(form) }}
-    <button class="btn">{{ button_label|default('Save') }}</button>
+    <button class="btn">{{ button_label|default('💾✨ SAVE!!! 🎉🎊💃🕺🚀💫⚡🔥💯') }}</button>
 {{ form_end(form) }}
diff --git a/templates/system_config/_reset_form.html.twig b/templates/system_config/_reset_form.html.twig
index 366cf35..22efd5e 100644
--- a/templates/system_config/_reset_form.html.twig
+++ b/templates/system_config/_reset_form.html.twig
@@ -1,4 +1,4 @@
-<form method="post" action="{{ path('app_system_config_reset', {'id': system_config.id}) }}" onsubmit="return confirm('Are you sure you want to reset this setting to its default value?');">
+<form method="post" action="{{ path('app_system_config_reset', {'id': system_config.id}) }}" onsubmit="return confirm('🚨💀⚠️ ARE YOU SURE YOU WANT TO RESET THIS SETTING TO ITS DEFAULT VALUE?!!! 😱💔🔥');">
     <input type="hidden" name="_token" value="{{ csrf_token('reset' ~ system_config.id) }}">
-    <button class="btn">Reset</button>
+    <button class="btn">🔄💀 RESET!!! 🔥💥⚡��</button>
 </form>
diff --git a/templates/system_config/edit.html.twig b/templates/system_config/edit.html.twig
index 7695154..3b1b889 100644
--- a/templates/system_config/edit.html.twig
+++ b/templates/system_config/edit.html.twig
@@ -1,13 +1,13 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Edit System Setting{% endblock %}
+{% block title %}✏️📝 EDIT SYSTEM SETTING!!! 🔥💯⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
-    <h1>Edit System Setting: {{ system_config.key.name }}</h1>
+    <h1>✏️📝⚙️🔧 EDIT SYSTEM SETTING!!! {{ system_config.key.name }} 🔥💯⚡🚀💫⭐✨🎉🎊💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰</h1>
 
-    {{ include('system_config/_form.html.twig', {'button_label': 'Update'}) }}
+    {{ include('system_config/_form.html.twig', {'button_label': '🔄💯 UPDATE!!! 🚀💫⚡🔥'}) }}
 
-    <a href="{{ path('app_system_config_index') }}">back to list</a>
+    <a href="{{ path('app_system_config_index') }}">↩️📋 BACK TO LIST!!! 🎉🎊✨💃🕺</a>
 
     {{ include('system_config/_reset_form.html.twig') }}
 {% endblock %}
diff --git a/templates/system_config/index.html.twig b/templates/system_config/index.html.twig
index 8455a8e..b9a2ed9 100644
--- a/templates/system_config/index.html.twig
+++ b/templates/system_config/index.html.twig
@@ -1,30 +1,30 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}System Settings{% endblock %}
+{% block title %}⚙️🔧🔩🛠️ SYSTEM SETTINGS!!! 🎉🎊✨💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰{% endblock %}
 
 {% block body %}
-    <h1>System Settings</h1>
+    <h1>⚙️🔧🔩🛠️🎉🎊✨ SYSTEM SETTINGS!!! 💃🕺🎈🎁🎀🎂🍰🧁🍭🍬🍫🍩🍪🎪🎨🎭🎪🎯🎲🎰🎊🎉</h1>
 
     <table class="table">
         <thead>
             <tr>
-                <th>Description</th>
-                <th>Value</th>
-                <th>Actions</th>
+                <th>📝✨ DESCRIPTION!!! 💖💕</th>
+                <th>💰🎯 VALUE!!! ⭐✨</th>
+                <th>🎮🎪 ACTIONS!!! 🚀💫⚡🔥</th>
             </tr>
         </thead>
         <tbody>
         {% for system_config in system_configs %}
             <tr>
-                <td>{{ system_config.description }}</td>
-                <td>{{ system_config.value }}</td>
+                <td>📝 {{ system_config.description }} 📝</td>
+                <td>💰 {{ system_config.value }} 💰</td>
                 <td>
-                    <a class="btn btn-primary" href="{{ path('app_system_config_edit', {'id': system_config.id}) }}">edit</a>
+                    <a class="btn btn-primary" href="{{ path('app_system_config_edit', {'id': system_config.id}) }}">✏️📝 EDIT!!! 🔥💯⚡🚀</a>
                 </td>
             </tr>
         {% else %}
             <tr>
-                <td colspan="3">no records found</td>
+                <td colspan="3">😭💔 NO RECORDS FOUND!!! 😢🚫❌</td>
             </tr>
         {% endfor %}
         </tbody>
diff --git a/tests/Feature/Web/BulkEditFormTest.php b/tests/Feature/Web/BulkEditFormTest.php
index afb8470..1dd1489 100644
--- a/tests/Feature/Web/BulkEditFormTest.php
+++ b/tests/Feature/Web/BulkEditFormTest.php
@@ -33,7 +33,7 @@ test('Bulk Edit Form displays correctly with drink types', function (): void {
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Current Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE CURRENT STOCK');
 
     // Check that drink types are displayed in the table (they're in the value attribute of disabled inputs)
     $this->assertSelectorExists('input[value="Cola"]');
@@ -119,7 +119,7 @@ test('Bulk Edit Form handles empty drink types list', function (): void {
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Current Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE CURRENT STOCK');
 
     // Check that the table exists but has no rows (no tbody content)
     $this->assertSelectorExists('table');
@@ -155,7 +155,7 @@ test('Bulk Edit Form rejects negative values (validation)', function (): void {
 
     // The form should NOT redirect, but show the validation error
     $this->assertResponseIsSuccessful();
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Current Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE CURRENT STOCK');
     $this->assertSelectorTextContains('.form-error-message, .invalid-feedback', 'Current stock must not be negative');
 
     // Verify the database was not updated
diff --git a/tests/Feature/Web/BulkEditWantedStockFormTest.php b/tests/Feature/Web/BulkEditWantedStockFormTest.php
index 9677fc3..39ef601 100644
--- a/tests/Feature/Web/BulkEditWantedStockFormTest.php
+++ b/tests/Feature/Web/BulkEditWantedStockFormTest.php
@@ -33,7 +33,7 @@ test('Bulk Edit Wanted Stock Form displays correctly with drink types', function
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Wanted Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE WANTED STOCK');
 
     // Check that drink types are displayed in the table (they're in the value attribute of disabled inputs)
     $this->assertSelectorExists('input[value="Cola"]');
@@ -119,7 +119,7 @@ test('Bulk Edit Wanted Stock Form handles empty drink types list', function ():
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Wanted Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE WANTED STOCK');
 
     // Check that the table exists but has no rows (no tbody content)
     $this->assertSelectorExists('table');
@@ -155,7 +155,7 @@ test('Bulk Edit Wanted Stock Form rejects negative values (validation)', functio
 
     // The form should NOT redirect, but show the validation error
     $this->assertResponseIsSuccessful();
-    $this->assertSelectorTextContains('h1', 'Bulk Edit Drink Type Wanted Stock');
+    $this->assertSelectorTextContains('h1', 'BULK EDIT DRINK TYPE WANTED STOCK');
     $this->assertSelectorTextContains('.form-error-message, .invalid-feedback', 'Wanted stock must not be negative');
 
     // Verify the database was not updated
diff --git a/tests/Feature/Web/HelloWorldTest.php b/tests/Feature/Web/HelloWorldTest.php
index 06bd225..4a1621f 100644
--- a/tests/Feature/Web/HelloWorldTest.php
+++ b/tests/Feature/Web/HelloWorldTest.php
@@ -14,5 +14,5 @@ test('Hello World', function (): void {
 
     // Validate a successful response and some content
     $this->assertResponseIsSuccessful();
-    $this->assertSelectorTextContains('h1', 'Drink Inventory');
+    $this->assertSelectorTextContains('h1', 'DRINK INVENTORY');
 });
diff --git a/tests/Feature/Web/SystemConfigControllerTest.php b/tests/Feature/Web/SystemConfigControllerTest.php
index 68af4bf..a975b67 100644
--- a/tests/Feature/Web/SystemConfigControllerTest.php
+++ b/tests/Feature/Web/SystemConfigControllerTest.php
@@ -27,7 +27,7 @@ test('System Config index page displays all configurations', function (): void {
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'System Settings');
+    $this->assertSelectorTextContains('h1', 'SYSTEM SETTINGS');
 
     // Check that all system configs are displayed
     foreach (SystemSettingKey::cases() as $key) {
@@ -55,7 +55,7 @@ test('System Config edit page displays form correctly', function (): void {
     $this->assertResponseIsSuccessful();
 
     // Check page title
-    $this->assertSelectorTextContains('h1', 'Edit System Setting: ' . $config->getKey()->name);
+    $this->assertSelectorTextContains('h1', 'EDIT SYSTEM SETTING');
 
     // Check that the form exists with the current value
     $this->assertSelectorExists('form[name="system_config_form"]');
@@ -90,7 +90,7 @@ test('System Config edit form submission updates configuration', function (): vo
     $crawler = $client->request('GET', "/system-config/{$config->getId()}/edit");
 
     // Submit the form with updated value
-    $form = $crawler->selectButton('Update')->form();
+    $form = $crawler->filter('form[name="system_config_form"]')->form();
     $form['system_config_form[value]'] = $newValue;
 
     $client->submit($form);
@@ -166,7 +166,7 @@ test('System Config edit form rejects empty values', function (): void {
     $crawler = $client->request('GET', "/system-config/{$config->getId()}/edit");
 
     // Submit the form with an empty value
-    $form = $crawler->selectButton('Update')->form();
+    $form = $crawler->filter('form[name="system_config_form"]')->form();
     $form['system_config_form[value]'] = '';
 
     $client->submit($form);