From 45ecd5c8ce3d54c7b26a0695adc543796695e70b Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koushd@gmail.com>
Date: Sat, 28 Aug 2021 00:45:54 -0700
Subject: [PATCH] ui cleanups

---
 plugins/core/ui/package-lock.json             |  13 ++++-
 plugins/core/ui/package.json                  |  17 +++---
 .../core/ui/public/images/cameraloading.jpg   | Bin 4969 -> 5763 bytes
 plugins/core/ui/src/App.vue                   |   6 +-
 plugins/core/ui/src/common/DeviceTable.vue    |   2 +-
 .../core/ui/src/components/BasicComponent.vue |   4 +-
 plugins/core/ui/src/components/Device.vue     |  21 ++++---
 plugins/core/ui/src/components/Devices.vue    |   4 +-
 plugins/core/ui/src/components/Drawer.vue     |  14 ++---
 .../components/aggregate/AggregateDevice.vue  |   2 +-
 .../src/components/automation/Automation.vue  |  12 ++--
 .../ui/src/components/dashboard/Dashboard.vue |  12 ++--
 .../components/dashboard/DashboardCamera.vue  |   2 +-
 .../components/dashboard/DashboardLock.vue    |  31 +++++++----
 .../dashboard/DashboardMediaPlayer.vue        |  19 ++++---
 .../dashboard/DashboardPopupToggle.vue        |  28 ++++++----
 .../components/dashboard/DashboardSensors.vue |   4 +-
 .../dashboard/DashboardStartStop.vue          |  25 +++++----
 .../dashboard/DashboardThermostat.vue         |  10 ++--
 .../components/dashboard/DashboardToggle.vue  |  47 ++++++++--------
 .../core/ui/src/components/header-card.css    |  40 --------------
 plugins/core/ui/src/components/helpers.ts     |  52 +++++++++---------
 .../src/components/script/InstallPlugin.vue   |   2 +-
 .../core/ui/src/components/script/Script.vue  |   6 +-
 .../ui/src/components/script/ScriptDevice.vue |   4 +-
 plugins/core/ui/src/plugins/icons.ts          |   5 +-
 plugins/core/ui/src/router.js                 |  11 ++--
 27 files changed, 195 insertions(+), 198 deletions(-)
 delete mode 100644 plugins/core/ui/src/components/header-card.css

diff --git a/plugins/core/ui/package-lock.json b/plugins/core/ui/package-lock.json
index b7eafb825..7b70e5b15 100644
--- a/plugins/core/ui/package-lock.json
+++ b/plugins/core/ui/package-lock.json
@@ -37,7 +37,8 @@
         "vue-swatches": "^1.0.4",
         "vue2-google-maps": "^0.10.7",
         "vuetify": "^2.5.8",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "xterm": "^4.13.0"
       },
       "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.13.0",
@@ -18736,6 +18737,11 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xterm": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.13.0.tgz",
+      "integrity": "sha512-HVW1gdoLOTnkMaqQCr2r3mQy4fX9iSa5gWxKZ2UTYdLa4iqavv7QxJ8n1Ypse32shPVkhTYPLS6vHEFZp5ghzw=="
+    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
@@ -33889,6 +33895,11 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
       "dev": true
     },
+    "xterm": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.13.0.tgz",
+      "integrity": "sha512-HVW1gdoLOTnkMaqQCr2r3mQy4fX9iSa5gWxKZ2UTYdLa4iqavv7QxJ8n1Ypse32shPVkhTYPLS6vHEFZp5ghzw=="
+    },
     "y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
diff --git a/plugins/core/ui/package.json b/plugins/core/ui/package.json
index bbf7a326b..32bb049cb 100644
--- a/plugins/core/ui/package.json
+++ b/plugins/core/ui/package.json
@@ -39,11 +39,19 @@
     "vue-swatches": "^1.0.4",
     "vue2-google-maps": "^0.10.7",
     "vuetify": "^2.5.8",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xterm": "^4.13.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.13.0",
     "@types/blob-stream": "^0.1.30",
     "@types/dom-webcodecs": "^0.1.0",
+    "@types/lodash": "^4.14.172",
     "@types/mkdirp": "^1.0.1",
     "@types/node": "^16.0.0",
     "@types/plist": "^3.0.2",
@@ -53,13 +61,6 @@
     "@types/socket.io-client": "^1.4.33",
     "@types/streamsaver": "^2.0.0",
     "@types/tmp": "^0.2.1",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/lodash": "^4.14.172",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@vue/cli-plugin-babel": "^4.5.13",
diff --git a/plugins/core/ui/public/images/cameraloading.jpg b/plugins/core/ui/public/images/cameraloading.jpg
index 637b8372a04d2d975e290aa3d7281a4053388461..dc17629252d251c89ae80689fded261535a66d7c 100644
GIT binary patch
literal 5763
zcmeHKNo*5W82;bPICjz=a7dugLx%}Vie%3c66_Ji0*5pp8HErE<u<k_$&lD%#zQ@c
zR4LE}+8f=VRS%(Mzp+CrwLsYqRl^!UNQ9*<mqLLqT&C|icH%=0RjE&%f8=?eXa4uS
z_kHi_=^uO0z6s+NH7#rcgaDfH1@;j9w7}BZ0iscu2>>2&qe`GLLihqS8C*FG5JRty
z;8mzLpF`ms5%3+V@y|d~4p(8kVZ8=SzVBDKC4omItix@KW~tpt#ncV9#n4&FFZcrh
zk{||Up+S}ctSAsrF9Fc~Xmn2fRDl=u_0t6mgJb}EsQmj*(@e`epUU`^gdS7<aXraf
zN}3n_0uOV-R$7U7sU{m!JG4}Y`}MmYI95x9xaIXxA)1b;omz9Rp)T!R+!pWciU$*1
zcrH7~lC5MqshSFFCA(7@*$Qzvav5XtnCIABirE$7RzzFah;FEC16Cw(xVMpLms=Z~
z@_q5Y5SO21Hk<Wl>-@UW!HdCQkQXFgl6*MBm+48FisegXY6=XEY9?-IX;afvEMZh)
z`WiFD;gN@@luVD%j;Wm_rsXJ}Z9*}XM#WS^oFqu1PYC#=KpXK~l7-nThw~zaN|vTg
z*Ska9SWA_s(-T^IPk~Gf`h*5TR#-ZY$MX5Sega2~oXa}lIN&(oIN&(oIN&(&|8rop
z6jM{U{>tJ)3+$ud^}rzNqmdUVFQUE3J^`=cs?mjVL5e&Qh@u%+ncGud@e)orFb*h0
z(-cFyTnsKc(L4A(FkV;X6meeJ_$7*)TU{ls-MGb5Gk?#q>ehirQ|n^Jy7Gz%6JMD$
zdD`?DwXe^dRo^f>5R@a03!2_&Ubtv!+p;&8uXt-^JfXICbZV<I=9;&&R!{G{@4f%Q
z`VAj`^zkR3e)jpM&0l=^^*39$ZQrqT*Y3Uh_8&NS=<tzmkN<e$<f+qV&YnAe;o_ys
zR|c<M8@hG-&fQ<`-GA`#@o!I_KKuQTKmU48bm6LYSQfsIsSBHcD2AaKH_?TtED`Qy
zTvNod%6UuN%Ifi)wANEKf8&-t$I5H!S|3%%jDd;?Q)dlLdrYL|l>IYd>;9Fp5n-dc
zu0sTWV7yq^nB>J6aBuqt{x}fqYw$9S@MfaD5C$8<&!HCjslJN;vI*NimyCI!WX$JF
z#(be<%oj_>e5qv2mrKTcrDV*`ejYs|!nU)Yi`{VcbFmxF`CROVb3PZl;hfLKZe0Bv
D^{9mZ

literal 4969
zcmex=<NpH&0WUXCHwH#V1_loxWcdG(;goAdW*P&7uP=iZ0|NsG13RM-12d4t2!srb
zQVgtMHUmQvqcohI#i#*Q!vs`g$N(f61cA7S(Fn{I0kT`#GZ|Q*dS?J>5CGZ;G8IAx
zWLBi+<R+Hn7bzI)S?HNCFc=vaT3Q*HSs7U<7#e^WrbY}5%nKM1?peSDGn27l0W*xv
za06uc|A(BDGD=Dctn~HsiuDpx@{>~alJj%*D-sLz4fPE48Eot;3KEmEQ%e+*Qqwc@
zY?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(;w+TacStlBiIT
zo0C^;Rbi_HHrxux1_|pcDS(xfWZNo5_y#CA=NF|anChA687KjD7p0_G1-ZCE^#Xae
zN>E3ZmzV368|&p4rRy77T3YHG80i}s=>k>g7FXt#Bv$C=6)VF`a7isrF3Kz@$;{7F
z0GXJWlwVq6s|2(e;-uUHxUpFM4pLZP<y@2s3ht2n{2W^)^x%gm@y$=kOsjNBEJ?Lh
z0!4?eftjw6MF=c9l=OjK(uev9#DoWqox&&>4S~@R7!85Z5Eu=C(GVDUA%JLJrRD+K
zROP_N6T|<v3>E<y`6c<q8TkdkW}X3qg_EZ*3#eTP1You*m?>~Yw&!L)!zPxO4V*LH
z{BWxKe}F-dgW(2a12dx%1Ct;lvmoRDBMkDu_9H7J7=X0_2}UMn7FITP4o)s^pn|Oe
z3`~s7%uFoItgIkw7;Ay@3@n1ILW+itY{G$w>`H|qMvW5}awt1(JSZA;@q>zSQc)8p
zmzcPOq?D?fx`w8fiK&^ng{76Vi>sTvho@I?NN8AiL}XNQN@`kqMrKxVNoiSmMP*fU
zOKV$uM`zch$y26In?7UatVN5LEM2yI#mZHiHgDOwZTpU$yAB;ba`f2o6DLnyx_ss8
zwd*%--g@}x@sp>|p1*kc>f@)+U%r0({^RE_kiUR!T!^=TB*bTE{t^WGi;0DWnS~wX
zFGi+vkjDjCSQQP~gd79e6AOivj2byaoF*>Zc#u=sIOv0DQqe^&F%^@CsvkjK1N)3P
zk2R6yGq}eP{<_WJ4D4#a027eG#LNT)%q+|xz=8%?!GH|}*x}$m&=8ObAZ<Vd^gSzF
zj%ddJyTGo3#Q$3iJj{&1#KbJfV9)T6?T`1Pc!7%3N2IQI+eEI7`O$skp3=@qpZ@*(
z<TkDH`P6QkN!CJV&Ky^nb$C%1g9eSTcJbjj)sO7WHI9pZY(7+V^?ZAc@59?O-s|YU
zd6KcbsbYqar}RpmHEWDG)>vsU|G)5`!Ty)Vq6RJ+V*CFW>0-+zy4Z4=F1B2ui!E2_
zV#_tU*m9jNwv6T%(#i_^|8&YPpyK!8dVvaaVDa1XCvwr9ALU2x$?lwV?%$zLW?dEP
zon3p1lo?K)I?N(<c>UV{4Egy#ZS`+8|2v)={GY*nYt2LlR*^v3;Jk|L!*L29r+1jd
zbN=vm-T6_xbB}AW?A+GYIk`HY&ug=KJa%QBIkS&Jv^_rh-$DCNRq>ntGyLtl75}e4
IisAoF0HPwk5&!@I

diff --git a/plugins/core/ui/src/App.vue b/plugins/core/ui/src/App.vue
index ee9475739..552464ee8 100644
--- a/plugins/core/ui/src/App.vue
+++ b/plugins/core/ui/src/App.vue
@@ -46,7 +46,7 @@
             @click="doAlert(alert)"
           >
             <v-list-item-icon>
-              <font-awesome-icon size="sm" :icon="getAlertIcon(alert)" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">{{ getAlertIcon(alert) }}</v-icon>
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="caption">{{ alert.title }}</v-list-item-title>
@@ -62,7 +62,7 @@
           </v-list-item>
           <v-list-item v-else class="font-weight-light" @click="clearAlerts">
             <v-list-item-icon>
-              <font-awesome-icon size="sm" icon="trash" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">fa-trash</v-icon>
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="caption">Clear All Alerts</v-list-item-title>
@@ -87,7 +87,7 @@
             @click="menuItem.click"
           >
             <v-list-item-icon v-if="menuItem.icon">
-              <font-awesome-icon size="sm" :icon="menuItem.icon" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">{{ menuItem.icon }}</v-icon>
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="caption">{{ menuItem.title }}</v-list-item-title>
diff --git a/plugins/core/ui/src/common/DeviceTable.vue b/plugins/core/ui/src/common/DeviceTable.vue
index cd257ea22..05b48f523 100644
--- a/plugins/core/ui/src/common/DeviceTable.vue
+++ b/plugins/core/ui/src/common/DeviceTable.vue
@@ -13,7 +13,7 @@
     <tbody v-if="deviceGroup.devices.length">
       <tr v-for="device in deviceGroup.devices" :key="device.id">
         <td>
-          <font-awesome-icon size="sm" :icon="typeToIcon(device.type)" color="#a9afbb" />
+          <v-icon x-small color="#a9afbb">{{ typeToIcon(device.type) }}</v-icon>
         </td>
         <td class="body-2 font-weight-light">
           <a link :href="'#' + getDeviceViewPath(device.id)">{{ device.name }}</a>
diff --git a/plugins/core/ui/src/components/BasicComponent.vue b/plugins/core/ui/src/components/BasicComponent.vue
index aa297faca..c85cc7d92 100644
--- a/plugins/core/ui/src/components/BasicComponent.vue
+++ b/plugins/core/ui/src/components/BasicComponent.vue
@@ -7,7 +7,7 @@
         xs12
         :md6="deviceGroups.length > 1"
       >
-        <v-card v-if="!card.hide" raised class="header-card">
+        <v-card v-if="!card.hide" raised >
           <v-card-title
             class="orange-gradient subtitle-1 text--white font-weight-light"
             >{{ card.title }}</v-card-title
@@ -39,7 +39,7 @@
         v-for="deviceGroup in deviceGroups"
         :key="deviceGroup.name"
       >
-        <v-card raised class="header-card">
+        <v-card raised >
           <v-card-title
             class="red-gradient subtitle-1 text--white font-weight-light"
             >{{ deviceGroup.name }}</v-card-title
diff --git a/plugins/core/ui/src/components/Device.vue b/plugins/core/ui/src/components/Device.vue
index 883102098..5286da1b8 100644
--- a/plugins/core/ui/src/components/Device.vue
+++ b/plugins/core/ui/src/components/Device.vue
@@ -13,19 +13,18 @@
                 xs12
                 md6
                 lg6
+                outlined
+                text
                 color="primary"
-                dark
                 icon="mdi-vuetify"
                 border="left"
-                prominent
               >
                 <template v-slot:prepend>
-                  <font-awesome-icon
+                  <v-icon
                     class="white--text mr-3"
                     size="sm"
-                    :icon="getAlertIcon(alert)"
                     color="#a9afbb"
-                  />
+                  >{{ getAlertIcon(alert) }}</v-icon>
                 </template>
                 <div class="caption">{{ alert.title }}</div>
                 <div
@@ -36,7 +35,7 @@
               </v-alert>
             </div>
 
-            <v-card raised class="header-card">
+            <v-card raised >
               <v-card-title
                 class="orange-gradient subtitle-1 font-weight-light"
               >
@@ -167,7 +166,7 @@
 
         <v-flex xs12 v-if="!ownerDevice && pluginData">
           <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
               <v-card-title
                 class="green-gradient subtitle-1 text--white font-weight-light"
               >
@@ -219,7 +218,7 @@
 
         <v-flex xs12 v-if="ownerDevice && pluginData">
           <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
               <v-card-title
                 class="green-gradient subtitle-1 text--white font-weight-light"
               >
@@ -246,7 +245,7 @@
 
         <v-flex xs12 v-if="availableMixins.length">
           <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
               <v-card-title
                 class="green-gradient subtitle-1 text--white font-weight-light"
               >
@@ -284,7 +283,7 @@
 
         <v-flex xs12 v-if="showStorage">
           <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
               <v-card-title
                 class="green-gradient subtitle-1 text--white font-weight-light"
                 >Storage</v-card-title
@@ -309,7 +308,7 @@
           <v-flex>
             <v-card
               raised
-              class="header-card"
+              
               v-for="iface in cardUnderInterfaces"
               :key="iface"
             >
diff --git a/plugins/core/ui/src/components/Devices.vue b/plugins/core/ui/src/components/Devices.vue
index c3b0d4ef8..35630fab3 100644
--- a/plugins/core/ui/src/components/Devices.vue
+++ b/plugins/core/ui/src/components/Devices.vue
@@ -20,7 +20,9 @@
           :search="search"
         >
           <template v-slot:[`item.icon`]="{ item }">
-            <font-awesome-icon size="sm" :icon="typeToIcon(item.type)" :color="colors.blue.base" />
+            <v-icon x-small :color="colors.blue.base">
+              {{ typeToIcon(item.type) }}
+            </v-icon>
           </template>
           <template v-slot:[`item.name`]="{ item }">
             <a link :href="'#' + getDeviceViewPath(item.id)">{{ item.name }}</a>
diff --git a/plugins/core/ui/src/components/Drawer.vue b/plugins/core/ui/src/components/Drawer.vue
index 73159b870..3ae376ff7 100644
--- a/plugins/core/ui/src/components/Drawer.vue
+++ b/plugins/core/ui/src/components/Drawer.vue
@@ -95,13 +95,13 @@ export default {
       actives: {},
       // components: [],
       builtinComponents: [
-        // {
-        //   id: "dashboard",
-        //   name: "Dashboard",
-        //   icon: "fa-sliders-h",
-        //   path: "/",
-        //   active: false
-        // },
+        {
+          id: "dashboard",
+          name: "Dashboard",
+          icon: "fa-tachometer-alt",
+          path: "/",
+          active: false
+        },
         {
           id: "devices",
           name: "Devices",
diff --git a/plugins/core/ui/src/components/aggregate/AggregateDevice.vue b/plugins/core/ui/src/components/aggregate/AggregateDevice.vue
index a470fbbad..dda3f97a4 100644
--- a/plugins/core/ui/src/components/aggregate/AggregateDevice.vue
+++ b/plugins/core/ui/src/components/aggregate/AggregateDevice.vue
@@ -1,6 +1,6 @@
 <template>
   <v-flex>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
       <v-card-title
         class="green-gradient subtitle-1 text--white font-weight-light"
       >
diff --git a/plugins/core/ui/src/components/automation/Automation.vue b/plugins/core/ui/src/components/automation/Automation.vue
index 560ad1391..ff0095711 100644
--- a/plugins/core/ui/src/components/automation/Automation.vue
+++ b/plugins/core/ui/src/components/automation/Automation.vue
@@ -2,14 +2,14 @@
   <v-flex>
     <v-card
       raised
-      class="header-card"
+      
       v-if="device.automationType !== 'Scene'"
       style="margin-bottom: 60px"
     >
       <v-card-title
         class="green-gradient subtitle-1 text--white font-weight-light"
       >
-        <font-awesome-icon size="sm" icon="bolt" />
+        <v-icon x-small>fa-bolt</v-icon>
         <span class="title font-weight-light"
           >&nbsp;&nbsp;Automation Triggers</span
         >
@@ -88,11 +88,11 @@
       </v-form>
     </v-card>
 
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
       <v-card-title
         class="green-gradient subtitle-1 text--white font-weight-light"
       >
-        <font-awesome-icon size="sm" icon="play" />
+        <v-icon x-small>fa-play</v-icon>
         <span v-if="device.automationType !== 'Scene'"
           >&nbsp;&nbsp;Automation Actions</span
         >
@@ -123,11 +123,11 @@
       </v-form>
     </v-card>
 
-    <v-card raised class="header-card" v-if="device.automationType === 'Scene'">
+    <v-card raised  v-if="device.automationType === 'Scene'">
       <v-card-title
         class="green-gradient subtitle-1 text--white font-weight-light"
       >
-        <font-awesome-icon size="sm" icon="play" />
+        <v-icon x-small>fa-play</v-icon>
         <h5 class="card-title">&nbsp;&nbsp;Scene Deactivation Actions</h5>
       </v-card-title>
       <v-card-text
diff --git a/plugins/core/ui/src/components/dashboard/Dashboard.vue b/plugins/core/ui/src/components/dashboard/Dashboard.vue
index 5bda9d04e..cea555214 100644
--- a/plugins/core/ui/src/components/dashboard/Dashboard.vue
+++ b/plugins/core/ui/src/components/dashboard/Dashboard.vue
@@ -53,7 +53,7 @@
       <div v-if="!cardColumns"></div>
       <v-flex v-else-if="isEmpty" xs12 md6 lg4>
         <v-flex>
-          <v-card raised class="header-card">
+          <v-card raised >
             <v-card-title
               class="red-gradient subtitle-1 text--white font-weight-light"
             >No Devices Found</v-card-title>
@@ -77,7 +77,7 @@
         :key="index"
       >
         <v-flex v-for="(card, cardIndex) in cardColumn" :key="cardIndex">
-          <v-card raised class="header-card" v-if="!card.state.hidden || editCardMode">
+          <v-card raised  v-if="!card.state.hidden || editCardMode">
             <v-card-title :class="card.color" class="subtitle-1 font-weight-light">
               <v-text-field
                 hide-details
@@ -209,7 +209,7 @@ import DashboardSensors from "./DashboardSensors.vue";
 import DashboardMediaPlayer from "./DashboardMediaPlayer.vue";
 import DashboardBase from "./DashboardBase";
 import DashboardAddComponent from "./DashboardAddComponent.vue";
-import "../header-card.css";
+// import "../header-card.css";
 import Vue from "vue";
 import Settings from "../../interfaces/Settings.vue";
 import cloneDeep from "lodash/cloneDeep";
@@ -287,7 +287,7 @@ export default {
     var menu: Menu[] = [
       {
         title: "Edit Layout",
-        icon: "edit",
+        icon: "fa-edit",
         click: () => {
           this.editMode = true;
           this.editCards = true;
@@ -295,14 +295,14 @@ export default {
       },
       {
         title: "Save Layout",
-        icon: "save",
+        icon: "fa-save",
         click: () => {
           this.saveLayout();
         }
       },
       {
         title: "Auto Layout",
-        icon: "magic",
+        icon: "fa-bell",
         click: async () => {
           await this.getCardLayout(true);
         }
diff --git a/plugins/core/ui/src/components/dashboard/DashboardCamera.vue b/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
index c736b18b8..20a2d5f1a 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
@@ -42,7 +42,7 @@ export default {
     return {
       pc: null,
       video: false,
-      src: undefined,
+      src: 'images/cameraloading.jpg',
       overlay: false,
       dialog: false,
     };
diff --git a/plugins/core/ui/src/components/dashboard/DashboardLock.vue b/plugins/core/ui/src/components/dashboard/DashboardLock.vue
index 2f340dc5c..47cb77693 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardLock.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardLock.vue
@@ -1,24 +1,31 @@
 <template>
   <v-list-item ripple :to="getDeviceViewPath(deviceId)">
     <v-list-item-icon>
-      <font-awesome-icon
+      <v-icon
+        x-small
         class="mt-1"
         size="sm"
-        :icon="locked ? 'lock' : 'lock-open'"
         :color="locked ? '#a9afbb' : 'orange'"
-      />
+        >{{ locked ? "fa-lock" : "fa-lock-open" }}</v-icon
+      >
     </v-list-item-icon>
     <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name || device.name
+      }}</v-list-item-title>
     </v-list-item-content>
     <v-list-item-action>
-      <v-btn icon x-small @click.prevent="locked = false">
-        <v-icon :color="device.lockState === 'Locked' ? undefined : 'orange'">lock_open</v-icon>
+      <v-btn icon small @click.prevent="locked = false">
+        <v-icon small :color="device.lockState === 'Locked' ? undefined : 'orange'"
+          >lock_open</v-icon
+        >
       </v-btn>
     </v-list-item-action>
     <v-list-item-action>
-      <v-btn icon x-small @click.prevent="locked = true">
-        <v-icon :color="device.lockState === 'Locked' ? 'green' : undefined">lock</v-icon>
+      <v-btn icon small @click.prevent="locked = true">
+        <v-icon small :color="device.lockState === 'Locked' ? 'green' : undefined"
+          >lock</v-icon
+        >
       </v-btn>
     </v-list-item-action>
   </v-list-item>
@@ -33,7 +40,7 @@ export default {
   mixins: [DashboardBase],
   props: ["name", "deviceId"],
   methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
   },
   computed: {
     locked: {
@@ -49,8 +56,8 @@ export default {
         } else {
           device.unlock();
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
diff --git a/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue b/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue
index 163aa163d..cfd2654e7 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue
@@ -14,29 +14,29 @@
     <v-list-item ripple :to="getDeviceViewPath(deviceId)">
       <v-list-item-icon>
         <v-icon
-          small
+          x-small
           :color="device.paused ? 'blue' : device.running ? 'green' : '#a9afbb'"
-        >{{ device.paused ? 'pause-circle' : device.running ? 'play-circle' : 'volume-off' }}</v-icon>
+        >{{ typeToIcon(device.type) }}</v-icon>
       </v-list-item-icon>
       <v-list-item-content>
         <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
       </v-list-item-content>
       <v-list-item-action class="mx-0 mt-0 mb-0">
         <span v-if="device.running">
-          <v-btn icon x-small @click.prevent="device.skipPrevious()">
+          <v-btn icon small @click.prevent="device.skipPrevious()">
             <v-icon color="#a9afbb">skip_previous</v-icon>
           </v-btn>
-          <v-btn icon x-small @click.prevent="device.paused ? device.start() : device.pause()">
+          <v-btn icon small @click.prevent="device.paused ? device.start() : device.pause()">
             <v-icon color="blue">{{ device.paused ? 'play_arrow' : 'pause' }}</v-icon>
           </v-btn>
-          <v-btn icon x-small @click.prevent="device.stop()">
+          <v-btn icon small @click.prevent="device.stop()">
             <v-icon color="red">stop</v-icon>
           </v-btn>
-          <v-btn icon x-small @click.prevent="device.skipNext()">
+          <v-btn icon small @click.prevent="device.skipNext()">
             <v-icon color="#a9afbb">skip_next</v-icon>
           </v-btn>
         </span>
-        <v-btn v-else icon x-small @click.prevent="device.stop()">
+        <v-btn v-else icon small @click.prevent="device.stop()">
           <v-icon color="#a9afbb">stop</v-icon>
         </v-btn>
       </v-list-item-action>
@@ -47,7 +47,7 @@
 import DashboardBase from "./DashboardBase";
 import { ScryptedInterface } from "@scrypted/sdk/types";
 import colors from "vuetify/es5/util/colors";
-import { getDeviceViewPath } from "../helpers";
+import { getDeviceViewPath, typeToIcon } from "../helpers";
 
 export default {
   name: "DashboardMediaPlayer",
@@ -86,7 +86,8 @@ export default {
     this.$once("destroyed", () => clearInterval(this.ticker));
   },
   methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
+    typeToIcon,
   },
   computed: {
     albumArt() {
diff --git a/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue b/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue
index 46b2ae178..8f5138e44 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue
@@ -1,23 +1,29 @@
 <template>
   <v-list-item ripple :to="getDeviceViewPath(device.id)">
     <v-list-item-icon>
-      <font-awesome-icon
-        size="sm"
-        :icon="typeToIcon(type)"
-        :color="on ? 'orange' : '#a9afbb'"
-      />
+      <v-icon x-small :color="on ? 'orange' : '#a9afbb'">
+        {{ typeToIcon(type) }}
+      </v-icon>
     </v-list-item-icon>
     <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name
+      }}</v-list-item-title>
     </v-list-item-content>
 
     <v-list-item-action>
-      <v-switch inset v-model="on" color="white" @click.native.stop.prevent :light="light"></v-switch>
+      <v-switch
+        inset
+        v-model="on"
+        color="white"
+        @click.native.stop.prevent
+        :light="light"
+      ></v-switch>
     </v-list-item-action>
   </v-list-item>
 </template>
 <script lang="ts">
-import {getDeviceViewPath} from "../helpers";
+import { getDeviceViewPath } from "../helpers";
 import DashboardBase from "./DashboardBase";
 export default {
   props: ["type", "name", "light"],
@@ -32,8 +38,8 @@ export default {
       },
       set(value) {
         value ? this.device.turnOn() : this.device.turnOff();
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/plugins/core/ui/src/components/dashboard/DashboardSensors.vue b/plugins/core/ui/src/components/dashboard/DashboardSensors.vue
index 5ee1abdc0..3720d3d7b 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardSensors.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardSensors.vue
@@ -1,7 +1,9 @@
 <template>
   <v-card-text class="text-md-center font-weight-light body-2 less-padding white--text">
     <span v-if="temperature !== undefined">
-      <font-awesome-icon size="sm" icon="thermometer-three-quarters" color="white" />
+      <v-icon x-small color="white">
+        thermometer-three-quarters
+      </v-icon>
       {{ temperature }}°
     </span>
     <span v-if="humidity !== undefined">
diff --git a/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue b/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue
index ec47b36c4..f74d90f92 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue
@@ -2,9 +2,9 @@
   <v-list-item ripple :to="getDeviceViewPath(deviceId)">
     <v-list-item-icon>
       <v-icon
-        small
+        x-small
         :color="device.paused ? 'blue' : device.running ? 'green' : '#a9afbb'"
-      >{{ device.docked ? 'home' : device.paused ? 'pause-circle' : device.running ? 'play-circle' : 'stop-circle' }}</v-icon>
+      >{{ typeToIcon(device.type) }}</v-icon>
     </v-list-item-icon>
     <v-list-item-content>
       <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
@@ -16,28 +16,28 @@
             <v-btn
               v-on="on"
               icon
-              x-small
+              small
               @click.prevent="device.dock()"
               v-if="device.interfaces.includes('Dock')"
             >
-              <v-icon color="#a9afbb">home</v-icon>
+              <v-icon small color="#a9afbb">home</v-icon>
             </v-btn>
           </template>
           <span>Dock</span>
         </v-tooltip>
         <v-btn
           icon
-          x-small
+          small
           @click.prevent="device.pause()"
           v-if="device.interfaces.includes('Pause')"
         >
-          <v-icon :color="device.paused ? 'blue' : '#a9afbb'">pause</v-icon>
+          <v-icon small :color="device.paused ? 'blue' : '#a9afbb'">pause</v-icon>
         </v-btn>
-        <v-btn icon x-small @click.prevent="device.stop()">
-          <v-icon color="#a9afbb">stop</v-icon>
+        <v-btn icon small @click.prevent="device.stop()">
+          <v-icon small color="#a9afbb">stop</v-icon>
         </v-btn>
-        <v-btn icon x-small @click.prevent="device.start()">
-          <v-icon :color="device.running ? 'green' : '#a9afbb'">play_arrow</v-icon>
+        <v-btn icon small @click.prevent="device.start()">
+          <v-icon small :color="device.running ? 'green' : '#a9afbb'">play_arrow</v-icon>
         </v-btn>
       </span>
     </v-list-item-action>
@@ -45,14 +45,15 @@
 </template>
 <script>
 import DashboardBase from "./DashboardBase";
-import { getDeviceViewPath } from "../helpers";
+import { getDeviceViewPath, typeToIcon } from "../helpers";
 
 export default {
   name: "DashboardStartStop",
   mixins: [DashboardBase],
   props: ["name", "deviceId"],
   methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
+    typeToIcon,
   }
 };
 </script>
\ No newline at end of file
diff --git a/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue b/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue
index fc9030168..997ac5527 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue
@@ -1,7 +1,7 @@
 <template>
   <v-list-item ripple :to="getDeviceViewPath(deviceId)">
     <v-list-item-icon>
-      <v-icon small :color="color">{{ icon }}</v-icon>
+      <v-icon x-small :color="color">{{ icon }}</v-icon>
     </v-list-item-icon>
     <v-list-item-content>
       <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
@@ -30,13 +30,13 @@ export default {
     icon() {
       switch (this.device.thermostatMode) {
         case ThermostatMode.Heat:
-          return "fire-alt";
+          return "fa-fire-alt";
         case ThermostatMode.Cool:
-          return "snowflake";
+          return "fa-snowflake";
         case ThermostatMode.Eco:
-          return "leaf";
+          return "fa-leaf";
       }
-      return "thermometer-three-quarters";
+      return "fa-thermometer-three-quarters";
     },
     color() {
       if (this.device.thermostatMode === ThermostatMode.Off) {
diff --git a/plugins/core/ui/src/components/dashboard/DashboardToggle.vue b/plugins/core/ui/src/components/dashboard/DashboardToggle.vue
index f11841c61..082de6a11 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardToggle.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardToggle.vue
@@ -1,10 +1,14 @@
 <template>
   <v-list-item ripple @click="showDevices()">
     <v-list-item-icon>
-      <v-icon small :color="on ? 'orange' : '#a9afbb'">{{ typeToIcon(type) }}</v-icon>
+      <v-icon x-small :color="on ? 'orange' : '#a9afbb'">{{
+        typeToIcon(type)
+      }}</v-icon>
     </v-list-item-icon>
     <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name
+      }}</v-list-item-title>
     </v-list-item-content>
 
     <v-list-item-action>
@@ -15,12 +19,9 @@
       <v-container fluid>
         <v-card v-click-outside="maybeHideDialog" dark color="purple" raised>
           <v-card-title>
-            <font-awesome-icon
-              size="sm"
-              :icon="typeToIcon(type)"
-              color="white"
-              style="margin-right: 20px"
-            />
+            <v-icon x-small color="white" style="margin-right: 20px">
+              {{ typeToIcon(type) }}
+            </v-icon>
             <span class="title font-weight-light">{{ name }}</span>
           </v-card-title>
 
@@ -70,15 +71,15 @@ export default {
   mixins: [DashboardBase],
   components: {
     VueSlider,
-    DashboardPopupToggle
+    DashboardPopupToggle,
   },
   directives: {
-    ClickOutside
+    ClickOutside,
   },
   data() {
     return {
       showLightsDialog: false,
-      watchClickOutside: false
+      watchClickOutside: false,
     };
   },
   methods: {
@@ -97,19 +98,19 @@ export default {
         this.watchClickOutside = true;
       }, 300);
     },
-    debounceSetBrightness: throttle(function(self) {
+    debounceSetBrightness: throttle(function (self) {
       self.deviceIds
-        .map(id => self.getDevice(id))
-        .filter(device =>
+        .map((id) => self.getDevice(id))
+        .filter((device) =>
           device.interfaces.includes(ScryptedInterface.Brightness)
         )
-        .forEach(device => device.setBrightness(self._debouncedBrightness));
-    }, 500)
+        .forEach((device) => device.setBrightness(self._debouncedBrightness));
+    }, 500),
   },
   computed: {
     brightness: {
       get() {
-        const brightnessDevices = this.devices.filter(device =>
+        const brightnessDevices = this.devices.filter((device) =>
           device.interfaces.includes(ScryptedInterface.Brightness)
         );
         if (!brightnessDevices.length) {
@@ -124,17 +125,19 @@ export default {
       set(value) {
         this._debouncedBrightness = value;
         this.debounceSetBrightness(this);
-      }
+      },
     },
     on: {
       get() {
         return this.devices.reduce((on, device) => on || device.on, false);
       },
       set(value) {
-        this.devices.forEach(device => device[value ? "turnOn" : "turnOff"]());
-      }
-    }
-  }
+        this.devices.forEach((device) =>
+          device[value ? "turnOn" : "turnOff"]()
+        );
+      },
+    },
+  },
 };
 </script>
 <style>
diff --git a/plugins/core/ui/src/components/header-card.css b/plugins/core/ui/src/components/header-card.css
deleted file mode 100644
index 2f74dbfff..000000000
--- a/plugins/core/ui/src/components/header-card.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.header-card::before {
-  margin-top: 20px;
-  display: block;
-  content: "";
-}
-.header-card>*:nth-child(1) {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-  color: white;
-  width: 90%;
-  margin-top: -20px;
-  margin-left: 5%;
-  position: absolute;
-  padding-top: 10px;
-}
-.header-card>*:nth-child(2)::before {
-  padding-top: 40px;
-  display: block;
-  content: "";
-}
-.purple-gradient {
-  background: linear-gradient(60deg, #ab47bc, #8e24aa);
-}
-.red-gradient {
-  background: linear-gradient(60deg, #ef5350, #e53935);
-}
-.orange-gradient {
-  background: linear-gradient(60deg, #ffa726, #fb8c00);
-}
-.green-gradient {
-  background: linear-gradient(60deg, #66bb6a, #43a047);
-}
-.blue-gradient {
-  background: linear-gradient(60deg,#546E7A,#78909C);
-}
-.small-header {
-  padding: 4px 4px 4px 8px;
-}
\ No newline at end of file
diff --git a/plugins/core/ui/src/components/helpers.ts b/plugins/core/ui/src/components/helpers.ts
index 43fd8bef2..5bf78bdf9 100644
--- a/plugins/core/ui/src/components/helpers.ts
+++ b/plugins/core/ui/src/components/helpers.ts
@@ -2,30 +2,30 @@ import { ScryptedDeviceType, ScryptedInterface } from "@scrypted/sdk/types";
 
 export function typeToIcon(type) {
     switch (type) {
-        case ScryptedDeviceType.Camera: return "video";
-        case ScryptedDeviceType.Doorbell: return "bell";
-        case ScryptedDeviceType.Fan: return "angle-double-right";
-        case ScryptedDeviceType.Light: return "lightbulb";
-        case ScryptedDeviceType.Switch: return "toggle-on";
-        case ScryptedDeviceType.Outlet: return "plug";
-        case ScryptedDeviceType.Sensor: return "exclamation-triangle";
-        case ScryptedDeviceType.Scene: return "sun";
-        case ScryptedDeviceType.Program: return "code";
-        case ScryptedDeviceType.Automation: return "bolt";
-        case ScryptedDeviceType.Event: return "exclamation";
-        case ScryptedDeviceType.Vacuum: return "trash";
-        case ScryptedDeviceType.Notifier: return "bell";
-        case ScryptedDeviceType.Lock: return "unlock-alt";
-        case ScryptedDeviceType.Thermostat: return "thermometer-three-quarters";
-        case ScryptedDeviceType.PasswordControl: return "key";
-        case ScryptedDeviceType.Display: return "tv";
-        case ScryptedDeviceType.Speaker: return "volume-up";
-        case ScryptedDeviceType.Entry: return "warehouse";
-        case ScryptedDeviceType.Garage: return "warehouse";
-        case ScryptedDeviceType.API: return "cloud";
-        case ScryptedDeviceType.DataSource: return "chart-area";
-        case ScryptedDeviceType.DeviceProvider: return "server";
-        case ScryptedDeviceType.Unknown: return "question-circle";
+        case ScryptedDeviceType.Camera: return "fa-video";
+        case ScryptedDeviceType.Doorbell: return "fa-bell";
+        case ScryptedDeviceType.Fan: return "fa-fan";
+        case ScryptedDeviceType.Light: return "fa-lightbulb";
+        case ScryptedDeviceType.Switch: return "fa-toggle-on";
+        case ScryptedDeviceType.Outlet: return "fa-plug";
+        case ScryptedDeviceType.Sensor: return "fa-exclamation-triangle";
+        case ScryptedDeviceType.Scene: return "fa-sun";
+        case ScryptedDeviceType.Program: return "fa-code";
+        case ScryptedDeviceType.Automation: return "fa-bolt";
+        case ScryptedDeviceType.Event: return "fa-exclamation";
+        case ScryptedDeviceType.Vacuum: return "fa-trash";
+        case ScryptedDeviceType.Notifier: return "fa-bell";
+        case ScryptedDeviceType.Lock: return "fa-unlock-alt";
+        case ScryptedDeviceType.Thermostat: return "fa-thermometer-three-quarters";
+        case ScryptedDeviceType.PasswordControl: return "fa-key";
+        case ScryptedDeviceType.Display: return "fa-tv";
+        case ScryptedDeviceType.Speaker: return "fa-volume-up";
+        case ScryptedDeviceType.Entry: return "fa-warehouse";
+        case ScryptedDeviceType.Garage: return "fa-warehouse";
+        case ScryptedDeviceType.API: return "fa-cloud";
+        case ScryptedDeviceType.DataSource: return "fa-chart-area";
+        case ScryptedDeviceType.DeviceProvider: return "fa-server";
+        case ScryptedDeviceType.Unknown: return "fa-question-circle";
 
     }
     return "toggle-on";
@@ -71,10 +71,10 @@ export function getAlertIcon(alert) {
         const id = alert.path.replace(device, '');
         const d = this.$scrypted.systemManager.getDeviceById(id);
         if (!d)
-            return 'question';
+            return 'fa-question';
         return typeToIcon(d.type);
     }
-    return 'bell';
+    return 'fa-bell';
 }
 
 export function hasFixedPhysicalLocation(type: ScryptedDeviceType, interfaces?: ScryptedInterface[]): boolean {
diff --git a/plugins/core/ui/src/components/script/InstallPlugin.vue b/plugins/core/ui/src/components/script/InstallPlugin.vue
index 46c5c15fd..e9f5fe07b 100644
--- a/plugins/core/ui/src/components/script/InstallPlugin.vue
+++ b/plugins/core/ui/src/components/script/InstallPlugin.vue
@@ -1,6 +1,6 @@
 <template>
   <v-flex xs12 md8 lg6>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
       <v-card-title
         class="orange-gradient subtitle-1 text--white  font-weight-light"
       >
diff --git a/plugins/core/ui/src/components/script/Script.vue b/plugins/core/ui/src/components/script/Script.vue
index 32bb5a81a..065d460bf 100644
--- a/plugins/core/ui/src/components/script/Script.vue
+++ b/plugins/core/ui/src/components/script/Script.vue
@@ -3,7 +3,7 @@
     <v-card
       v-if="managedDevices.devices.length"
       raised
-      class="header-card"
+      
       style="margin-bottom: 60px"
     >
       <v-card-title
@@ -15,7 +15,7 @@
       <DeviceGroup :deviceGroup="managedDevices"></DeviceGroup>
     </v-card>
 
-    <v-card raised class="header-card">
+    <v-card raised >
       <v-card-title
         class="red-gradient subtitle-1 text--white  font-weight-light"
       >{{ script.npmPackage ? "Plugin Management" : "Edit Script" }}</v-card-title>
@@ -171,7 +171,7 @@
       </v-card-actions>
     </v-card>
 
-    <v-card raised class="header-card" v-if="showStorage" style="margin-top: 60px">
+    <v-card raised  v-if="showStorage" style="margin-top: 60px">
       <v-card-title
         class="green-gradient subtitle-1 text--white  font-weight-light"
       >Script Storage</v-card-title>
diff --git a/plugins/core/ui/src/components/script/ScriptDevice.vue b/plugins/core/ui/src/components/script/ScriptDevice.vue
index 832ab7911..c2eddda41 100644
--- a/plugins/core/ui/src/components/script/ScriptDevice.vue
+++ b/plugins/core/ui/src/components/script/ScriptDevice.vue
@@ -1,6 +1,6 @@
 <template>
   <v-flex>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
       <v-card-title class="green-gradient subtitle-1 text--white font-weight-light">
         <font-awesome-icon size="sm" icon="database" />
         <span class="title font-weight-light">&nbsp;&nbsp;Managed Device</span>
@@ -17,7 +17,7 @@
       </v-card-actions>
     </v-card>
 
-    <v-card v-if="showStorage" raised class="header-card" style="margin-bottom: 60px">
+    <v-card v-if="showStorage" raised  style="margin-bottom: 60px">
       <v-card-title class="green-gradient subtitle-1 text--white font-weight-light">Script Storage</v-card-title>
       <v-flex>
         <Storage v-model="device.configuration" @input="onChange"></Storage>
diff --git a/plugins/core/ui/src/plugins/icons.ts b/plugins/core/ui/src/plugins/icons.ts
index 91cb0de3e..e875aa6cd 100644
--- a/plugins/core/ui/src/plugins/icons.ts
+++ b/plugins/core/ui/src/plugins/icons.ts
@@ -70,6 +70,7 @@ import {
   faTv,
   faVolumeUp,
   faQuestionCircle,
+  faFan,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -145,7 +146,9 @@ const icons =[
   faKey,
   faTv,
   faVolumeUp,
-  faQuestionCircle];
+  faQuestionCircle,
+  faFan,
+];
 
 for (var icon in icons) {
   library.add(icons[icon])
diff --git a/plugins/core/ui/src/router.js b/plugins/core/ui/src/router.js
index 81eec0858..b6a26b174 100644
--- a/plugins/core/ui/src/router.js
+++ b/plugins/core/ui/src/router.js
@@ -8,6 +8,7 @@ import ScriptComponent from "./components/script/ScriptComponent.vue";
 import InstallPlugin from "./components/script/InstallPlugin.vue";
 import LogComponent from "./components/builtin/LogComponent.vue";
 import SettingsComponent from "./components/builtin/SettingsComponent.vue";
+import Dashboard from "./components/dashboard/Dashboard.vue";
 
 let router = new VueRouter({
     routes: [
@@ -15,14 +16,14 @@ let router = new VueRouter({
         path: "/device",
         component: Devices
       },
-      {
-        path: "/",
-        component: Devices
-      },
       // {
       //   path: "/",
-      //   component: Dashboard
+      //   component: Devices
       // },
+      {
+        path: "/",
+        component: Dashboard
+      },
       {
         path: "/component/automation",
         component: AutomationComponent