diff --git a/ui/charts.go b/ui/charts.go
index 4305d6ef..4222bab2 100644
--- a/ui/charts.go
+++ b/ui/charts.go
@@ -123,16 +123,6 @@ func CreateItem() []Item {
 			Content: "This is a card that displays dynamic entity count data",
 			Widget:  "entityCount",
 		},
-		{
-			Title:   "Label Card",
-			Content: "This is a label card",
-			Widget:  "label",
-		},
-		{
-			Title:   "Progress Bar",
-			Content: "This is a progress bar",
-			Widget:  "progressBar",
-		},
 	}
 
 	return items
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 2b55ad99..379f79a7 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -604,7 +604,7 @@ class EntityCount extends Chart {
     super(widgetID, chartData);
     this.Style = {
       width: "400px",
-      height: "175px",
+      height: "220px",
     };
     this.Content = this.#generateContent();
   }
@@ -617,16 +617,14 @@ class EntityCount extends Chart {
             <h5 class="card-title">Entity Count</h5>
           </div>
           <div class="card-body text-center">
-            <p class="card-text value"> 35</p>
+            <p class="card-text count"> 35</p>
           </div>
           <div class="card-footer text-right">
-            <p class="card-text">
-              Domain Name: D1
-            </p>
+            <p class="card-text"> Entity Name: ${this.chartData.entityType}</p>
           </div>
         </div>
     </div>
-        `;
+    `;
   }
 }
 
@@ -755,35 +753,6 @@ class HorizontalBarChart extends Echart {
   }
 }
 
-class LabelCard extends Chart {
-  constructor(chartData, widgetID) {
-    super(widgetID, chartData);
-    this.Style = {
-      width: "420px",
-      height: "180px",
-    };
-    this.Content = this.#generateContent();
-  }
-
-  #generateContent() {
-    return `
-    <div class="item-content" id="${this.ID}" style="width: ${this.Style.width}; height: ${this.Style.height};">
-    <div class="card widgetcard">
-    <div class="card-header text-center">
-      <h5 class="card-title">Label</h5>
-    </div>
-    <div class="card-body text-center">
-      <p class="card-subtitle mb-2 text-muted">Selected Entity: <span class="badge bg-primary">Thing6</span></p>
-    </div>
-    <div class="card-footer">
-      <p class="card-text text"> ThingID: 666 666 666</p>
-    </div>
-    </div>
-    </div>
-`;
-  }
-}
-
 class TimeSeriesLineChart extends Echart {
   constructor(chartData, widgetID) {
     super(widgetID, chartData);
@@ -1313,40 +1282,6 @@ class PieChart extends Echart {
   }
 }
 
-class ProgressBar extends Chart {
-  constructor(chartData, widgetID) {
-    super(widgetID, chartData);
-    this.Style = {
-      width: "400px",
-      height: "100px",
-    };
-    this.Content = this.#generateContent();
-  }
-
-  #generateContent() {
-    return `
-    <div class="item-content" id="${this.ID}" style="width: ${this.Style.width}; height: ${this.Style.height};">
-        <div class="card widgetcard">
-          <div class="card-header text-center">
-            <h5 class="card-title">${this.chartData.title}</h5>
-          </div>
-          <div class="card-body p-2">
-            <div class="progress">
-              <div class="progress-bar ${this.chartData.progressBarColor}" role="progressbar" style="width: 70%" aria-valuemin=${this.chartData.minValue} 
-              aria-valuemax=${this.chartData.maxValue}></div>
-            </div>
-          </div>
-          <div class="card-footer text-center">
-            <p class="card-text">
-              Status: 70%
-            </p>
-          </div>
-        </div>
-    </div>
-      `;
-  }
-}
-
 class SharedDatasetChart extends Echart {
   constructor(chartData, widgetID) {
     super(widgetID, chartData);
@@ -1853,9 +1788,10 @@ class ValueCard extends Chart {
     super(widgetID, chartData);
     this.Style = {
       width: "400px",
-      height: "200px",
+      height: "220px",
     };
     this.Content = this.#generateContent();
+    this.Script = this.#generateScript();
   }
 
   #generateContent() {
@@ -1876,6 +1812,36 @@ class ValueCard extends Chart {
     </div>
   `;
   }
+
+  #generateScript() {
+    return `
+    (function() {
+      var valueCard = document.getElementById("${this.ID}");
+
+      async function getData() {
+        try {
+          const response = await fetch(
+            "${pathPrefix}/data?channel=${this.chartData.channel}"+
+            "&publisher=${this.chartData.thing}" +
+            "&name=${this.chartData.valueName}" +
+            "&limit=1",
+          );
+          if (response.ok) {
+            const data = await response.json();
+            valueCard.querySelector(".value").textContent = data.messages[0].value;
+          } else {
+            console.error("HTTP request failed with status: ", response.status);
+          }
+        } catch (error) {
+          console.error("Failed to fetch card data: ", error);
+        }
+      }
+
+      getData();
+      setInterval(getData, "${this.chartData.updateInterval}");
+    })();
+    `;
+  }
 }
 
 const chartTypes = {
@@ -1890,13 +1856,11 @@ const chartTypes = {
   entityCount: EntityCount,
   gaugeChart: GaugeChart,
   horizontalBarChart: HorizontalBarChart,
-  labelCard: LabelCard,
   lineChart: TimeSeriesLineChart,
   multiBarChart: MultiBarChart,
   multiGaugeChart: MultiGaugeChart,
   multipleLineChart: MultipleLineChart,
   pieChart: PieChart,
-  progressBar: ProgressBar,
   sharedDatasetChart: SharedDatasetChart,
   speedGaugeChart: SpeedGaugeChart,
   stackedLineChart: StackedLineChart,
diff --git a/ui/web/templates/charts/labelmodal.html b/ui/web/templates/charts/labelmodal.html
deleted file mode 100644
index 7d36064a..00000000
--- a/ui/web/templates/charts/labelmodal.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!-- Copyright (c) Abstract Machines
-SPDX-License-Identifier: Apache-2.0 -->
-
-{{ define "labelmodal" }}
-  <!-- Modal -->
-  <div
-    class="modal fade"
-    id="labelModal"
-    tabindex="-1"
-    role="dialog"
-    aria-labelledby="labelModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="labelModalLabel">Label Card</h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <form id="create-label-form">
-          <div class="modal-body">
-            <div class="mb-3">
-              <label for="channel-id" class="form-label">Channel ID</label>
-              <input
-                type="text"
-                pattern="{{ .UUIDPattern }}"
-                class="form-control mb-3"
-                name="channel"
-                id="channel-id"
-                placeholder="Enter the channel ID"
-                required
-              />
-              <div class="invalid-feedback">Please enter a valid uuid</div>
-            </div>
-            <div class="mb-3">
-              <label for="thing-id" class="form-label">Thing ID</label>
-              <input
-                type="text"
-                pattern="{{ .UUIDPattern }}"
-                class="form-control mb-3"
-                name="thing"
-                id="thing-id"
-                placeholder="Enter the thing ID"
-                required
-              />
-              <div class="invalid-feedback">Please enter a valid uuid</div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-secondary"
-              id="close-label-button"
-              data-bs-dismiss="modal"
-            >
-              Close
-            </button>
-            <button type="button" class="btn body-button" id="create-label-button">
-              Create Chart
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-  <script>
-    // Label card form
-    document.getElementById("create-label-button").addEventListener("click", function () {
-      const form = document.getElementById("create-label-form");
-      if (!form.checkValidity()) {
-        form.classList.add("was-validated");
-        return;
-      }
-
-      // Create an object to store the form data
-      let chartData = {};
-      let formData = new FormData(form);
-      for (var pair of formData.entries()) {
-        chartData[pair[0]] = pair[1];
-      }
-
-      var widgetID = "labelCard-" + Date.now();
-
-      chartData["Type"] = "labelCard";
-      addWidget(chartData, widgetID);
-      metadataBuffer[widgetID] = chartData;
-
-      form.reset();
-      form.classList.remove("was-validated");
-      bootstrap.Modal.getInstance(document.getElementById("labelModal")).hide();
-    });
-
-    document.getElementById("close-label-button").addEventListener("click", function () {
-      const form = document.getElementById("create-label-form");
-      form.reset();
-      form.classList.remove("was-validated");
-    });
-  </script>
-{{ end }}
diff --git a/ui/web/templates/charts/progressbarmodal.html b/ui/web/templates/charts/progressbarmodal.html
deleted file mode 100644
index ada7e2b4..00000000
--- a/ui/web/templates/charts/progressbarmodal.html
+++ /dev/null
@@ -1,206 +0,0 @@
-<!-- Copyright (c) Abstract Machines
-SPDX-License-Identifier: Apache-2.0 -->
-
-{{ define "progressbarmodal" }}
-  <!-- Modal -->
-  <div
-    class="modal fade"
-    id="progressBarModal"
-    tabindex="-1"
-    role="dialog"
-    aria-labelledby="progressBarModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="progressBarModalLabel">Progress bar</h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="modal-body">
-          <!-- Tab Navs -->
-          <ul class="nav nav-tabs mb-3" id="chartTab" role="tablist">
-            <li class="nav-item" role="presentation">
-              <button
-                class="nav-link active"
-                id="data-tab"
-                data-bs-toggle="tab"
-                data-bs-target="#progressBarData"
-                type="button"
-                role="tab"
-                aria-controls="data"
-                aria-selected="true"
-              >
-                Data
-              </button>
-            </li>
-            <li class="nav-item" role="presentation">
-              <button
-                class="nav-link"
-                id="appearance-tab"
-                data-bs-toggle="tab"
-                data-bs-target="#progressBarAppearance"
-                type="button"
-                role="tab"
-                aria-controls="appearance"
-                aria-selected="false"
-              >
-                Appearance
-              </button>
-            </li>
-          </ul>
-          <form id="create-progressBar-form">
-            <div class="tab-content" id="myTabContent">
-              <!-- Data Tab -->
-              <div
-                class="tab-pane fade show active"
-                id="progressBarData"
-                role="tabpanel"
-                aria-labelledby="data-tab"
-              >
-                <div class="mb-3">
-                  <label for="channel-id" class="form-label">Channel ID</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="channel"
-                    id="channel-id"
-                    placeholder="Enter the channel ID"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
-                </div>
-                <div class="mb-3">
-                  <label for="thing-id" class="form-label">Thing ID</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="thing"
-                    id="thing-id"
-                    placeholder="Enter the thing ID"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
-                </div>
-                <div class="mb-3">
-                  <label for="value-name" class="form-label">Value name</label>
-                  <input
-                    type="text"
-                    class="form-control mb-3"
-                    name="valueName"
-                    id="value-name"
-                    placeholder="Enter the value name eg. temperature"
-                    required
-                  />
-                </div>
-              </div>
-              <!-- Appearance Tab -->
-              <div
-                class="tab-pane fade"
-                id="progressBarAppearance"
-                role="tabpanel"
-                aria-labelledby="appearance-tab"
-              >
-                <div class="mb-3">
-                  <label for="title" class="form-label">Title</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    name="title"
-                    id="title"
-                    placeholder="Enter the chart title"
-                  />
-                </div>
-                <div class="mb-3">
-                  <label for="min-value" class="form-label">Min value</label>
-                  <input
-                    type="text"
-                    class="form-control mb-3"
-                    name="minValue"
-                    id="min-value"
-                    placeholder="Enter the minimum data value"
-                    value="0"
-                  />
-                </div>
-                <div class="mb-3">
-                  <label for="max-value" class="form-label">Max value</label>
-                  <input
-                    type="text"
-                    class="form-control mb-3"
-                    name="maxValue"
-                    id="max-value"
-                    placeholder="Enter the maximum data value"
-                    value="100"
-                  />
-                </div>
-                <div class="mb-3">
-                  <label for="progress-bar-color" class="form-label">Progress Bar Color</label>
-                  <select class="form-select mb-3" name="progressBarColor" id="progress-bar-color">
-                    <option value="" disabled>Select Progress Bar Color</option>
-                    <option value="bg-success">Green</option>
-                    <option value="bg-info">Blue</option>
-                    <option value="bg-warning">Yellow</option>
-                    <option value="bg-danger">Red</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </form>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            id="close-progressBar-button"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
-          <button type="button" class="btn body-button" id="create-progressBar-button">
-            Create Chart
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script>
-    // Progress bar form
-    document.getElementById("create-progressBar-button").addEventListener("click", function () {
-      const form = document.getElementById("create-progressBar-form");
-      if (!form.checkValidity()) {
-        form.classList.add("was-validated");
-        return;
-      }
-
-      // Create an object to store the form data
-      let chartData = {};
-      let formData = new FormData(form);
-      for (var pair of formData.entries()) {
-        chartData[pair[0]] = pair[1];
-      }
-
-      var widgetID = "progressBar-" + Date.now();
-
-      chartData["Type"] = "progressBar";
-      addWidget(chartData, widgetID);
-      metadataBuffer[widgetID] = chartData;
-
-      form.reset();
-      form.classList.remove("was-validated");
-      bootstrap.Modal.getInstance(document.getElementById("progressBarModal")).hide();
-    });
-
-    document.getElementById("close-progressBar-button").addEventListener("click", function () {
-      const form = document.getElementById("create-progressBar-form");
-      form.reset();
-      form.classList.remove("was-validated");
-    });
-  </script>
-{{ end }}
diff --git a/ui/web/templates/charts/valuecardmodal.html b/ui/web/templates/charts/valuecardmodal.html
index 762de3c1..12a66a8c 100644
--- a/ui/web/templates/charts/valuecardmodal.html
+++ b/ui/web/templates/charts/valuecardmodal.html
@@ -104,11 +104,11 @@ <h5 class="modal-title" id="valueCardModalLabel">Value card</h5>
                   <label for="update-interval" class="form-label">Update interval</label>
                   <input
                     type="text"
-                    pattern="{{ .IntervalPattern }}"
+                    pattern="^\d+$"
                     class="form-control mb-3"
                     name="updateInterval"
                     id="update-interval"
-                    placeholder="Enter the update interval, eg. 5s, 10m, 1h, 1d"
+                    placeholder="Enter the update interval in milliseconds"
                     required
                   />
                   <div class="invalid-feedback">Please enter a valid interval</div>
diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html
index 0a80b908..8bdd7fa3 100644
--- a/ui/web/templates/dashboard.html
+++ b/ui/web/templates/dashboard.html
@@ -117,8 +117,6 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
               {{ template "alarmstablemodal" . }}
               {{ template "entitiestablemodal" . }}
               {{ template "entitycountmodal" . }}
-              {{ template "progressbarmodal" . }}
-              {{ template "labelmodal" . }}
             </div>
           </div>
         </div>