diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 6dbbec4e1..9f7792e12 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -184,7 +184,7 @@ export default {
 
 ::v-deep(.product-grid-item) {
 	margin: .5rem;
-	border: 1px solid #dee2e6;
+	border: 1px solid var(--surface-border);
 
 	.product-grid-item-top,
 	.product-grid-item-bottom {
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 81b8867de..c83078682 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -638,7 +638,7 @@ export default {
 
 ::v-deep(.product-grid-item) {
 	margin: .5rem;
-	border: 1px solid #dee2e6;
+	border: 1px solid var(--surface-border);
 
 	.product-grid-item-top,
 	.product-grid-item-bottom {
@@ -871,7 +871,7 @@ export default {
 
 ::v-deep(.product-grid-item) {
 	margin: .5rem;
-	border: 1px solid #dee2e6;
+	border: 1px solid var(--surface-border);
 
 	.product-grid-item-top,
 	.product-grid-item-bottom {
@@ -1118,7 +1118,7 @@ export default {
 
         .product-grid-item {
             margin: .5rem;
-            border: 1px solid #dee2e6;
+            border: 1px solid var(--surface-border);
         }
 
         .product-grid-item .product-grid-item-top,