diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index 19cdb71b..f91dd6e8 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,5 +1,7 @@
 <template>
-  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`">
+  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
+    :style="`${color ? 'background: '+color : ''}; ${customStyles}`"
+  >
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -28,6 +30,8 @@ export default {
     collapsed: Boolean,
     cols: Number,
     rows: Number,
+    color: String,
+    customStyles: String,
   },
   data() {
     return {
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 36c76047..50b676a8 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -5,6 +5,8 @@
     :collapsed="displayData.collapsed"
     :cols="displayData.cols"
     :rows="displayData.rows"
+    :color="displayData.color"
+    :customStyles="displayData.customStyles"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
diff --git a/src/data/conf.yml b/src/data/conf.yml
index 6749997d..880b0a78 100644
--- a/src/data/conf.yml
+++ b/src/data/conf.yml
@@ -47,10 +47,6 @@ sections:
     iconType: img
     url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
-  displayData:
-    collapsed: false
-    rows: 2
-    cols: 2
   collapsed: false
   items:
   - title: Pi-Hole
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a4c9d56a..c1d0fb1e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -59,8 +59,7 @@ export default {
       });
     },
     getDisplayData(section) {
-      const defaultDisplayData = { collapsed: null, rows: null, cols: null };
-      return !section.displayData ? defaultDisplayData : section.displayData;
+      return !section.displayData ? {} : section.displayData;
     },
   },
 };