diff --git a/Helios/Views/Configurator/PanelDetails.cshtml b/Helios/Views/Configurator/PanelDetails.cshtml
index c03fffc9cf1cbb45395f6ba8be531fe3901dd0e5..562c1663a1a666d527abe8482cb0540c1f1bcd6c 100644
--- a/Helios/Views/Configurator/PanelDetails.cshtml
+++ b/Helios/Views/Configurator/PanelDetails.cshtml
@@ -6,7 +6,9 @@
 
 <div class="panelInfo">
     <div class="graph">
-        <p>Graph</p>
+        <div>
+            <canvas id="myChart"></canvas>
+        </div>
     </div>
     <div class="panelDetails">
         <h5>Panel Details</h5>
@@ -38,4 +40,47 @@
             </li>
         </ul>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+    const labels = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"];
+    const data = {
+        labels: labels,
+        datasets: [
+            {
+                label: 'Summer',
+                data: [100, 98, 97, 87, 71, 60, 58, 59, 54, 45, 50, 55],
+                backgroundColor: 'rgb(33, 85, 239)',
+                borderColor: 'rgb(33, 85, 239)',
+            },
+            {
+                label: 'Winter',
+                data: [100, 98, 97, 87, 71, 60, 55, 45, 42, 39, 36, 33, 30],
+                backgroundColor: 'rgb(239, 33, 31)',
+                borderColor: 'rgb(239, 33, 31)',
+            }
+        ]
+    };
+
+    const config = {
+        type: 'line',
+        data: data,
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: true,
+                    text: 'Summer and Winter Performance Comparison (For demonstration purposes only!)'
+                }
+            }
+        },
+    };
+
+    const myChart = new Chart(
+        document.getElementById('myChart'),
+        config
+    );
+</script>
\ No newline at end of file
diff --git a/Helios/Views/Shared/_Layout.cshtml b/Helios/Views/Shared/_Layout.cshtml
index bf5432f276c4172eb2fd7d53bd0d57a6c1fdff1a..39d5ea4a8062483799e375357e5014bc50e53aa1 100644
--- a/Helios/Views/Shared/_Layout.cshtml
+++ b/Helios/Views/Shared/_Layout.cshtml
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Helios</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/Helios.styles.css" asp-append-version="true" />
diff --git a/Helios/wwwroot/css/site.css b/Helios/wwwroot/css/site.css
index 931aa11c2a8195959733058ef54bfb08acc939fe..8ecab40982e070b1f0b06b3df2e4ce79157c6334 100644
--- a/Helios/wwwroot/css/site.css
+++ b/Helios/wwwroot/css/site.css
@@ -28,7 +28,7 @@ body {
 .panelInfo {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 0.25fr 1fr;
     gap: 0px 0px;
     grid-auto-flow: row;
     grid-template-areas: