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 100%
rename from assets/modes.js
rename to assets/javascript/modes.js
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/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/drink_type/show.html.twig b/templates/drink_type/show.html.twig
index 1bb7c95..fcbc3d5 100644
--- a/templates/drink_type/show.html.twig
+++ b/templates/drink_type/show.html.twig
@@ -64,6 +64,49 @@
             <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>