diff --git a/assets/app.js b/assets/app.js
index 8ed6e87..157e085 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -13,8 +13,10 @@ import './styles/emoji-footprint.css';
 import './javascript/theme.js';
 import './javascript/emoji-footprint.js';
 import './javascript/modes.js';
+import htmx from 'htmx.org';
 import { initNumberInputs } from './javascript/numberInputs.js';
 import { initRadioState } from './javascript/radioState.js';
+window.htmx = htmx;
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
diff --git a/config/packages/asset_mapper.php b/config/packages/asset_mapper.php
index 4b68e6a..c18fd42 100644
--- a/config/packages/asset_mapper.php
+++ b/config/packages/asset_mapper.php
@@ -2,22 +2,21 @@
 
 declare(strict_types=1);
 
+use Symfony\Config\FrameworkConfig;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 
-return static function (ContainerConfigurator $containerConfigurator): void {
-    $containerConfigurator->extension('framework', [
-        'asset_mapper' => [
-            'paths' => [
-                'assets/',
-            ],
-            'missing_import_mode' => 'strict',
-        ],
-    ]);
+return static function (
+    ContainerConfigurator $containerConfigurator,
+    FrameworkConfig $frameworkConfig,
+): void {
+    $frameworkConfig
+        ->assetMapper()
+        ->missingImportMode('strict')
+        ->importmapPolyfill(false)
+        ->path('assets/', true);
     if ($containerConfigurator->env() === 'prod') {
-        $containerConfigurator->extension('framework', [
-            'asset_mapper' => [
-                'missing_import_mode' => 'warn',
-            ],
-        ]);
+        $frameworkConfig
+            ->assetMapper()
+            ->missingImportMode('ignore');
     }
 };
diff --git a/importmap.php b/importmap.php
index 1dea2bd..f880a22 100644
--- a/importmap.php
+++ b/importmap.php
@@ -37,4 +37,7 @@ return [
     'chart.js/auto' => [
         'version' => '4.5.0',
     ],
+    'htmx.org' => [
+        'version' => '2.0.6',
+    ],
 ];
diff --git a/src/Controller/DrinkTypeController.php b/src/Controller/DrinkTypeController.php
index 714e92d..54c39a9 100644
--- a/src/Controller/DrinkTypeController.php
+++ b/src/Controller/DrinkTypeController.php
@@ -110,4 +110,19 @@ final class DrinkTypeController extends AbstractController
 
         return $this->redirectToRoute('app_drink_type_index', [], Response::HTTP_SEE_OTHER);
     }
+
+    #[Route(path: '/{id}/history-chart', name: 'app_drink_type_history_chart', methods: ['GET'])]
+    public function historyChart(
+        DrinkType $drinkType,
+        GetStockHistory $getStockHistory,
+        GetWantedHistory $getWantedHistory,
+    ): Response {
+        return $this->render('components/history_chart_with_dismiss.html.twig', [
+            'stock_history' => $getStockHistory($drinkType),
+            'wanted_history' => $getWantedHistory($drinkType),
+            'chart_id' => 'stockHistoryChart_' . $drinkType->getId(),
+            'title' => $drinkType->getName() . ' History',
+            'drink_type_id' => $drinkType->getId(),
+        ]);
+    }
 }
diff --git a/src/Service/DrinkType/GetStockHistory.php b/src/Service/DrinkType/GetStockHistory.php
index a9f34c1..3704887 100644
--- a/src/Service/DrinkType/GetStockHistory.php
+++ b/src/Service/DrinkType/GetStockHistory.php
@@ -23,10 +23,18 @@ final readonly class GetStockHistory
         if ($drinkType->getId() === null) {
             return[];
         }
-        return $this->propertyChangeLogRepository->findBy([
+        $items =  $this->propertyChangeLogRepository->findBy([
             'entityClass' => DrinkType::class,
             'propertyName' => 'currentStock',
             'entityId' => $drinkType->getId(),
         ]);
+        $currentStock = new PropertyChangeLog();
+        $currentStock->setNewValue((string) $drinkType->getCurrentStock());
+        $currentStock->setEntityClass(DrinkType::class);
+        $currentStock->setEntityId($drinkType->getId());
+        $currentStock->setPropertyName('currentStock');
+
+        $items[] = $currentStock;
+        return $items;
     }
 }
diff --git a/src/Service/DrinkType/GetWantedHistory.php b/src/Service/DrinkType/GetWantedHistory.php
index 9e1533b..c3b0796 100644
--- a/src/Service/DrinkType/GetWantedHistory.php
+++ b/src/Service/DrinkType/GetWantedHistory.php
@@ -18,10 +18,17 @@ final readonly class GetWantedHistory
             return[];
         }
 
-        return $this->propertyChangeLogRepository->findBy([
+        $items =  $this->propertyChangeLogRepository->findBy([
             'entityClass' => DrinkType::class,
             'propertyName' => 'wantedStock',
             'entityId' => $drinkType->getId(),
         ]);
+        $wantedStock = new PropertyChangeLog();
+        $wantedStock->setNewValue((string) $drinkType->getWantedStock());
+        $wantedStock->setEntityClass(DrinkType::class);
+        $wantedStock->setEntityId($drinkType->getId());
+        $wantedStock->setPropertyName('wantedStock');
+        $items[] = $wantedStock;
+        return $items;
     }
 }
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3af52a6..e738ad8 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -17,7 +17,7 @@
         {% endblock %}
     </head>
     <body>
-    <nav class="navbar navbar-expand-lg sticky-top">
+    <nav class="navbar navbar-expand-lg sticky-top bg-primary">
         <div class="container-fluid">
             <a class="navbar-brand" href="/">
               {{ appName }}
@@ -51,6 +51,14 @@
                           <span class="emoji-bonkers">😈🍆💦👅💋🏳️‍🌈✨</span>
                         </a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ path('app_order_index') }}">
+                            Orders
+                            <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>
@@ -80,7 +88,7 @@
             </div>
         </div>
     </nav>
-    <div class="container mt-4">
+    <div class="container my-4">
         {% block body %}{% endblock %}
     </div>
 
diff --git a/templates/components/history_chart.html.twig b/templates/components/history_chart.html.twig
new file mode 100644
index 0000000..09143a3
--- /dev/null
+++ b/templates/components/history_chart.html.twig
@@ -0,0 +1,123 @@
+{#
+    History Chart Component
+
+    Parameters:
+    - stock_history: Array of stock history records with changeDate and newValue properties
+    - wanted_history: Array of wanted stock history records with newValue properties
+    - chart_id: ID for the canvas element (default: 'stockHistoryChart')
+    - title: Title for the chart card (default: 'History')
+#}
+
+{% set chart_id = chart_id|default('stockHistoryChart') %}
+{% set title = title|default('History') %}
+
+<div class="card">
+    <div class="card-header">
+        <h5 class="card-title">{{ title }}</h5>
+    </div>
+    <div class="card-body">
+        <div style="height: 300px; position: relative;">
+            <canvas id="{{ chart_id }}"></canvas>
+        </div>
+        <script type="module">
+            import { Chart } from 'chart.js/auto';
+
+            // Create a unified set of dates from both datasets
+            {% set all_dates = [] %}
+            {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                    {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+            {% endfor %}
+            {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                    {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+            {% endfor %}
+
+            // Sort dates chronologically
+            {% set all_dates = all_dates|sort %}
+
+            // Create date-indexed maps for both datasets
+            {% set stock_map = {} %}
+            {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set stock_map = stock_map|merge({(date_str): record.newValue}) %}
+            {% endfor %}
+
+            {% set wanted_map = {} %}
+            {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set wanted_map = wanted_map|merge({(date_str): record.newValue}) %}
+            {% endfor %}
+
+            // Prepare data arrays with values aligned to dates
+            {% set stock_data = [] %}
+            {% set wanted_data = [] %}
+
+            {% for date in all_dates %}
+                {% if date in stock_map|keys %}
+                    {% set stock_data = stock_data|merge([stock_map[date]]) %}
+                {% else %}
+                    {% set stock_data = stock_data|merge(['null']) %}
+                {% endif %}
+
+                {% if date in wanted_map|keys %}
+                    {% set wanted_data = wanted_data|merge([wanted_map[date]]) %}
+                {% else %}
+                    {% set wanted_data = wanted_data|merge(['null']) %}
+                {% endif %}
+            {% endfor %}
+
+            new Chart(document.getElementById('{{ chart_id }}'), {
+                type: 'line',
+                data: {
+                    labels: [{% for date in all_dates %}'{{ date }}'{{ not loop.last ? ',' }}{% endfor %}],
+                    datasets: [{
+                        label: 'Stock History',
+                        data: [{{ stock_data|join(',') }}],
+                        borderColor: 'rgb(75, 192, 192)',
+                        tension: 0.1,
+                        spanGaps: true
+                    },
+                    {
+                        label: 'Wanted Stock History',
+                        data: [{{ wanted_data|join(',') }}],
+                        borderColor: 'rgb(255, 99, 132)',
+                        tension: 0.1,
+                        spanGaps: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                boxWidth: 12,
+                                padding: 10
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                maxTicksLimit: 6
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                maxTicksLimit: 8,
+                                maxRotation: 45
+                            }
+                        }
+                    }
+                }
+            });
+        </script>
+    </div>
+</div>
diff --git a/templates/components/history_chart_with_dismiss.html.twig b/templates/components/history_chart_with_dismiss.html.twig
new file mode 100644
index 0000000..09740f3
--- /dev/null
+++ b/templates/components/history_chart_with_dismiss.html.twig
@@ -0,0 +1,118 @@
+<tr id="history-row-{{ drink_type_id }}">
+    <td colspan="3">
+    <div class="card mb-3">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="card-title mb-0">{{ title }}</h5>
+            <button type="button" class="btn btn-sm btn-danger"
+                    onclick="document.getElementById('history-row-{{ drink_type_id }}').style.display = 'none';">
+                ❌ Dismiss
+            </button>
+        </div>
+        <div class="card-body">
+            <div style="height: 300px; position: relative;">
+                <canvas id="{{ chart_id }}"></canvas>
+            </div>
+            <script type="module">
+                import { Chart } from 'chart.js/auto';
+
+                // Create a unified set of dates from both datasets
+                {% set all_dates = [] %}
+                {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+                {% endfor %}
+                {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% if date_str not in all_dates %}
+                {% set all_dates = all_dates|merge([date_str]) %}
+                {% endif %}
+                {% endfor %}
+
+                // Sort dates chronologically
+                {% set all_dates = all_dates|sort %}
+
+                // Create date-indexed maps for both datasets
+                {% set stock_map = {} %}
+                {% for record in stock_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set stock_map = stock_map|merge({(date_str): record.newValue}) %}
+                {% endfor %}
+
+                {% set wanted_map = {} %}
+                {% for record in wanted_history %}
+                {% set date_str = record.changeDate|date('Y-m-d H:i') %}
+                {% set wanted_map = wanted_map|merge({(date_str): record.newValue}) %}
+                {% endfor %}
+
+                // Prepare data arrays with values aligned to dates
+                {% set stock_data = [] %}
+                {% set wanted_data = [] %}
+
+                {% for date in all_dates %}
+                {% if date in stock_map|keys %}
+                {% set stock_data = stock_data|merge([stock_map[date]]) %}
+                {% else %}
+                {% set stock_data = stock_data|merge(['null']) %}
+                {% endif %}
+
+                {% if date in wanted_map|keys %}
+                {% set wanted_data = wanted_data|merge([wanted_map[date]]) %}
+                {% else %}
+                {% set wanted_data = wanted_data|merge(['null']) %}
+                {% endif %}
+                {% endfor %}
+
+                new Chart(document.getElementById('{{ chart_id }}'), {
+                    type: 'line',
+                    data: {
+                        labels: [{% for date in all_dates %}'{{ date }}'{{ not loop.last ? ',' }}{% endfor %}],
+                        datasets: [{
+                            label: 'Stock History',
+                            data: [{{ stock_data|join(',') }}],
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1,
+                            spanGaps: true
+                        },
+                            {
+                                label: 'Wanted Stock History',
+                                data: [{{ wanted_data|join(',') }}],
+                                borderColor: 'rgb(255, 99, 132)',
+                                tension: 0.1,
+                                spanGaps: true
+                            }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    boxWidth: 12,
+                                    padding: 10
+                                }
+                            }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    maxTicksLimit: 6
+                                }
+                            },
+                            x: {
+                                ticks: {
+                                    maxTicksLimit: 8,
+                                    maxRotation: 45
+                                }
+                            }
+                        }
+                    }
+                });
+            </script>
+        </div>
+    </div>
+    </td>
+</tr>
diff --git a/templates/drink_type/bulk_edit_wanted_stock.html.twig b/templates/drink_type/bulk_edit_wanted_stock.html.twig
index 3551ad7..907d402 100644
--- a/templates/drink_type/bulk_edit_wanted_stock.html.twig
+++ b/templates/drink_type/bulk_edit_wanted_stock.html.twig
@@ -25,6 +25,7 @@
             <thead>
                 <tr>
                     <th>🍻🥃 DRINK TYPE!!! 🍷🍸</th>
+                    <th>📚🔍 HISTORY!!! 📊📈</th>
                     <th>🎯💰 WANTED STOCK!!! ⭐✨</th>
                 </tr>
             </thead>
@@ -36,10 +37,19 @@
                             {{ form_widget(drinkTypeForm.name) }}
                         </td>
                         <td>
-                            {{ form_widget(drinkTypeForm.wantedStock) }}
+                            <button class="btn btn-sm btn-info"
+                                    hx-get="{{ path('app_drink_type_history_chart', {'id': drinkTypeForm.vars.value.id}) }}"
+                                    hx-target="#history-row-{{ drinkTypeForm.vars.value.id }}"
+                                    hx-swap="outerHTML"
+                                    type="button"
+                            >📊 Show History</button>
+                        </td>
+                        <td>
+                        {{ form_widget(drinkTypeForm.wantedStock) }}
                             {{ form_errors(drinkTypeForm.wantedStock) }}
                         </td>
                     </tr>
+                    <tr id="history-row-{{ drinkTypeForm.vars.value.id }}" style="display: none;" class="history-row"></tr>
                 {% endfor %}
             </tbody>
         </table>
diff --git a/templates/drink_type/show.html.twig b/templates/drink_type/show.html.twig
index fcbc3d5..7d53344 100644
--- a/templates/drink_type/show.html.twig
+++ b/templates/drink_type/show.html.twig
@@ -62,43 +62,12 @@
 
         <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>
+                {% include 'components/history_chart.html.twig' with {
+                    'stock_history': stock_history,
+                    'wanted_history': wanted_history,
+                    'chart_id': 'stockHistoryChart',
+                    'title': 'History'
+                } %}
             </div>
         </div>
 
diff --git a/templates/form/theme.html.twig b/templates/form/theme.html.twig
index 525d2c2..22dc766 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!!! 💥⚡
+                ➖🔥 DECREASE!!! 💥⚡📉
             </button>
             {{- block('form_widget_simple') -}}
             <button class="btn btn-outline-secondary number-increase" type="button" data-action="increase">
-                ➕✨ INCREASE!!! 🚀💫
+                ➕✨ INCREASE!!! 🚀💫📈
             </button>
         </div>
     </div>
diff --git a/tests/Feature/Service/DrinkType/GetStockHistoryTest.php b/tests/Feature/Service/DrinkType/GetStockHistoryTest.php
index 644d75a..86e385e 100644
--- a/tests/Feature/Service/DrinkType/GetStockHistoryTest.php
+++ b/tests/Feature/Service/DrinkType/GetStockHistoryTest.php
@@ -43,7 +43,7 @@ test('it returns stock history for a drink type', function (): void {
 
     // Verify the result
     expect($result)->toBeArray();
-    expect($result)->toHaveCount(3);
+    expect($result)->toHaveCount(4);
 
     // Verify that all logs are for currentStock
     foreach ($result as $log) {
@@ -81,7 +81,7 @@ test('it only returns logs for the specified drink type', function (): void {
     $result = $getStockHistory($drinkType1);
 
     // Verify we only get logs for the first drink type
-    expect($result)->toHaveCount(1);
+    expect($result)->toHaveCount(2);
     expect($result[0]->getEntityId())->toBe($drinkType1->getId());
     expect($result[0]->getNewValue())->toBe('10');
 });
diff --git a/tests/Feature/Service/DrinkType/GetWantedHistoryTest.php b/tests/Feature/Service/DrinkType/GetWantedHistoryTest.php
index 1259ab2..c432757 100644
--- a/tests/Feature/Service/DrinkType/GetWantedHistoryTest.php
+++ b/tests/Feature/Service/DrinkType/GetWantedHistoryTest.php
@@ -43,7 +43,7 @@ test('it returns wanted stock history for a drink type', function (): void {
 
     // Verify the result
     expect($result)->toBeArray();
-    expect($result)->toHaveCount(3);
+    expect($result)->toHaveCount(4);
 
     // Verify that all logs are for wantedStock
     foreach ($result as $log) {
@@ -81,7 +81,7 @@ test('it only returns logs for the specified drink type', function (): void {
     $result = $getWantedHistory($drinkType1);
 
     // Verify we only get logs for the first drink type
-    expect($result)->toHaveCount(1);
+    expect($result)->toHaveCount(2);
     expect($result[0]->getEntityId())->toBe($drinkType1->getId());
     expect($result[0]->getNewValue())->toBe('10');
 });