diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
index d9a251231e..7cabcd8fa1 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@import "../../../../../scss/constants";
+
 :host {
   display: block;
   height: 100%;
@@ -293,7 +295,7 @@
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.12);
   background: transparent;
-  color: #305680;
+  color: $tb-primary-color;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -304,11 +306,11 @@
   transition: background 0.15s;
 
   &:hover {
-    background: rgba(48, 86, 128, 0.04);
+    background: rgba($tb-primary-color, 0.04);
   }
 }
 
-// Installed label — Design: check icon + text, no bg, #305680, h-32, pl-8 pr-12 py-6, rounded-4, gap-4
+// Installed label — Design: check icon + text, no bg, $tb-primary-color, h-32, pl-8 pr-12 py-6, rounded-4, gap-4
 .tb-iot-hub-card-installed-label {
   display: inline-flex;
   align-items: center;
@@ -316,7 +318,7 @@
   height: 32px;
   padding: 6px 12px 6px 8px;
   border-radius: 4px;
-  color: #305680;
+  color: $tb-primary-color;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
index 8a610ccb6b..c9e70d26e4 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@import "../../../../../scss/constants";
+
 // Dialog container
 .tb-iot-hub-detail-dialog {
   display: flex;
@@ -163,7 +165,7 @@
   }
 }
 
-// Author — Design: person icon 20px + name 14px Medium #305680
+// Author — Design: person icon 20px + name 14px Medium $tb-primary-color
 .dlg-author {
   display: flex;
   align-items: center;
@@ -182,7 +184,7 @@
     font-weight: 500;
     line-height: 20px;
     letter-spacing: 0.25px;
-    color: #305680;
+    color: $tb-primary-color;
   }
 
   &:hover span {