diff --git a/index.php b/index.php
index 01427df..d976038 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,117 @@
 <!DOCTYPE html>
 <html lang="en">
 
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OctoPrint Dashboard</title>
+  <!-- Required meta tags -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+  <!-- FontAwesome -->
+  <script src="https://kit.fontawesome.com/719158633b.js" crossorigin="anonymous"></script>
+
+  <style>
+    body {
+      background-color: #212529;
+      color: #fff;
+    }
+
+    .card {
+      background-color: #343a40;
+      color: #fff;
+    }
+
+    .badge {
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Octotor</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>
+      </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="#">Dashboard</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="./styleControls.html">Control</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <div class="container my-3">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Printer infos</h5>
+        <ul class="list-group list-group-item-dark">
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Printer Name
+            <span class="badge bg-primary" id="lblPrinterName">My Printer</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Printer Status
+            <span class="badge bg-success" id="lblPrinterState">Operational</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Current Job
+            <span class="badge bg-info" id="lblCurrentJob">Printing</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Progress
+            <span class="badge bg-secondary" id="lblJobProgress">35%</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Temperature Bed
+            <span class="badge bg-primary" id="lblBedTemp">50.0°C / 60.0°C</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Temperature Tool 0
+            <span class="badge bg-primary" id="lblToolTemp">200.0°C / 210.0°C</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Remaining
+            <span class="badge bg-secondary" id="lblPrintTimeRemaining">1:23:45</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Elapsed
+            <span class="badge bg-secondary" id="lblTimeElapsed">2:01:23</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Time Print
+            <span class="badge bg-secondary" id="lblExpectedPrintTime">3:25:08</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            Filament Printed
+            <span class="badge bg-secondary" id="lblPrintedFilament">100m</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- Iframe -->
+  <div class="container my-3">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Webcam Stream</h5>
+        <iframe src="http://192.168.50.239/webcam/?action=stream" width="100%" height="200" frameborder="0"></iframe>
+      </div>
+    </div>
+  </div>
+
+<!DOCTYPE html>
+<html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/style.html b/style.html
index 11f1da6..aee174d 100644
--- a/style.html
+++ b/style.html
@@ -8,7 +8,8 @@
   <!-- Required meta tags -->
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
   <!-- FontAwesome -->
   <script src="https://kit.fontawesome.com/719158633b.js" crossorigin="anonymous"></script>
 
@@ -56,43 +57,43 @@
         <ul class="list-group list-group-item-dark">
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Printer Name
-            <span class="badge bg-primary">My Printer</span>
+            <span class="badge bg-primary" id="lblPrinterName">My Printer</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Printer Status
-            <span class="badge bg-success">Operational</span>
+            <span class="badge bg-success" id="lblPrinterState">Operational</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Current Job
-            <span class="badge bg-info">Printing</span>
+            <span class="badge bg-info" id="lblCurrentJob">Printing</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Progress
-            <span class="badge bg-secondary">35%</span>
+            <span class="badge bg-secondary" id="lblJobProgress">35%</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Temperature Bed
-            <span class="badge bg-primary">50.0°C / 60.0°C</span>
+            <span class="badge bg-primary" id="lblBedTemp">50.0°C / 60.0°C</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Temperature Tool 0
-            <span class="badge bg-primary">200.0°C / 210.0°C</span>
+            <span class="badge bg-primary" id="lblToolTemp">200.0°C / 210.0°C</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Time Remaining
-            <span class="badge bg-secondary">1:23:45</span>
+            <span class="badge bg-secondary" id="lblPrintTimeRemaining">1:23:45</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Time Elapsed
-            <span class="badge bg-secondary">2:01:23</span>
+            <span class="badge bg-secondary" id="lblTimeElapsed">2:01:23</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Time Print
-            <span class="badge bg-secondary">3:25:08</span>
+            <span class="badge bg-secondary" id="lblExpectedPrintTime">3:25:08</span>
           </li>
           <li class="list-group-item d-flex justify-content-between align-items-center">
             Filament Printed
-            <span class="badge bg-secondary">100m</span>
+            <span class="badge bg-secondary" id="lblPrintedFilament">100m</span>
           </li>
         </ul>
       </div>
@@ -112,6 +113,78 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
     integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
     crossorigin="anonymous"></script>
+  <script>
+    const apiPath = "http://192.168.50.239/api";
+    const apiKey = "AB36FE568344446D92F87BACD84F02CB";
+    // Retrieve printer name
+    fetch(apiPath+'/printer', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const printerName = data.name;
+        document.getElementById('lblPrinterName').textContent = printerName;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve printer status
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const printerStatus = data.state;
+        document.getElementById('lblPrinterState').textContent = printerStatus;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve current job and progress
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const currentJob = data.job.file.name;
+        document.getElementById('lblCurrentJob').textContent = currentJob;
+
+        const progress = data.progress.completion.toFixed(2) + '%';
+        document.getElementById('lblJobProgress').textContent = progress;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve bed temperature and target
+    fetch(apiPath+'/printer/bed', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const bedTemp = data.bed.actual.toFixed(1) + '°C';
+        const bedTarget = data.bed.target.toFixed(1) + '°C';
+        document.getElementById('lblBedTemp').textContent = bedTemp + " / " + bedTarget;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve tool temperature and target
+    fetch(apiPath+'/printer/tool', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const toolTemp = data[0].actual.toFixed(1) + '°C';
+        const toolTarget = data[0].target.toFixed(1) + '°C';
+        document.getElementById('lblToolTemps').textContent = toolTemp + " / " + toolTarget;
+      })
+      .catch(error => console.error(error));
+
+    // Retrieve time remaining, time elapsed, print time, and filament printed
+    fetch(apiPath+'/job', { headers: { 'X-Api-Key': apiKey } })
+      .then(response => response.json())
+      .then(data => {
+        const timeRemaining = data.progress.printTimeLeft;
+        document.getElementById('lblPrintTimeRemaining').textContent = timeRemaining;
+
+        const timeElapsed = data.progress.printTime;
+        document.getElementById('lblTimeElapsed').textContent = timeElapsed;
+
+        const printTime = data.job.estimatedPrintTime;
+        document.getElementById('lblExpectedPrintTime').textContent = printTime;
+
+        const filamentPrinted = data.job.filament.tool0.length.toFixed(2) + 'mm';
+        document.getElementById('lblPrintedFilament').textContent = filamentPrinted;
+      })
+      .catch(error => console.error(error));
+
+  </script>
 </body>
 
 </html>
\ No newline at end of file
