diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 94dec5b6e..95d693019 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -168,4 +168,12 @@ export default {
   opacity: 1;
   transition: opacity 0.15s;
 }
+
+.speckle-gradient-bg {
+  @include speckle-gradient-bg;
+}
+
+.speckle-gradient-txt {
+  @include speckle-gradient-txt;
+}
 </style>
diff --git a/packages/frontend/src/components/admin/AdminCard.vue b/packages/frontend/src/components/admin/AdminCard.vue
index 1f58fe5e6..d327c18e4 100644
--- a/packages/frontend/src/components/admin/AdminCard.vue
+++ b/packages/frontend/src/components/admin/AdminCard.vue
@@ -1,12 +1,14 @@
 <template>
   <v-card class="rounded-lg" v-bind="$attrs">
     <v-card-title class="d-flex justify-space-between">
-      <span>{{ title }}</span>
+      <span class="text--secondary">{{ title }}</span>
       <span>
         <slot name="menu"></slot>
       </span>
     </v-card-title>
-    <v-card-text><slot></slot></v-card-text>
+    <v-card-text>
+      <slot></slot>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -17,4 +19,4 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss"></style>
diff --git a/packages/frontend/src/components/admin/GeneralInfoCard.vue b/packages/frontend/src/components/admin/GeneralInfoCard.vue
index 665607ee2..2fab4534b 100644
--- a/packages/frontend/src/components/admin/GeneralInfoCard.vue
+++ b/packages/frontend/src/components/admin/GeneralInfoCard.vue
@@ -7,7 +7,7 @@
         <v-tooltip bottom color="primary" :disabled="value < 1000">
           <template v-slot:activator="{ on, attrs }">
             <p class="primary--text text-h3 text-md-h2 text-lg-h1 text-center" v-bind="attrs" v-on="on">
-              <animated-number :value="value"/>
+              <animated-number :value="value" class="speckle-gradient-txt"/>
             </p>
           </template>
           <span>{{ value }}</span>
@@ -36,6 +36,6 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 </style>
diff --git a/packages/frontend/src/components/admin/ServerInfoCard.vue b/packages/frontend/src/components/admin/ServerInfoCard.vue
index 7dc2f6b27..853a79aa3 100644
--- a/packages/frontend/src/components/admin/ServerInfoCard.vue
+++ b/packages/frontend/src/components/admin/ServerInfoCard.vue
@@ -22,21 +22,15 @@
               {{ name }}
               <v-btn :disabled="edit" v-model="serverInfo['name']">Enable</v-btn>
             </span>
-            <v-text-field v-else
-                          :hint="value.hint"
-                          :label="value.label"
-                          dense
-                          outlined
-                          v-model="serverInfo[name]"/>
+            <v-text-field v-else :hint="value.hint" :label="value.label" dense outlined v-model="serverInfo[name]"/>
           </v-card-text>
         </div>
         <div v-else key="viewPanel">
-          <v-card-text class="pb-0">
-            <p class="d-flex rounded-lg overflow-hidden" v-for="(value,name) in serverDetails" :key="name">
-              <span class="pa-3 primary lighten-2 white--text" style="min-width: 25%">{{ value.label }}</span>
-              <span class="pa-3 grey lighten-3 flex-grow-1">{{ serverInfo[name] }}</span>
-            </p>
-          </v-card-text>
+          <div class="d-flex align-center pb-2" outlined v-for="(value,name) in serverDetails" :key="name">
+            <span class="cover-fill secondary rounded-r-0 d-inline-block" disabled style="min-width: 25%">{{ value.label }}</span>
+            <v-text-field dense solo hide-details :hint="value.hint"  v-model="serverInfo[name]" class="rounded-l-0">
+            </v-text-field>
+          </div>
         </div>
       </v-fade-transition>
     </div>
diff --git a/packages/frontend/src/components/admin/VersionInfoCard.vue b/packages/frontend/src/components/admin/VersionInfoCard.vue
index 090ba8343..c24587dba 100644
--- a/packages/frontend/src/components/admin/VersionInfoCard.vue
+++ b/packages/frontend/src/components/admin/VersionInfoCard.vue
@@ -14,13 +14,13 @@
       <div>
         <h4 class="primary--text text--lighten-2">
           Current </h4>
-        <p class="primary--text text-h4 text-sm-h2">
+        <p class="primary--text text-h4 text-sm-h2 speckle-gradient-txt">
           {{ versionInfo.current }} </p>
       </div>
       <v-icon color="primary lighten-1">mdi-arrow-right</v-icon>
       <div>
         <h4 class="primary--text text--lighten-2">Latest</h4>
-        <p class="primary--text text-h4 text-sm-h2">
+        <p class="primary--text text-h4 text-sm-h2 speckle-gradient-txt">
           {{ versionInfo.latest }} </p>
       </div>
     </div>
diff --git a/packages/frontend/src/plugins/vuetify.js b/packages/frontend/src/plugins/vuetify.js
index 39dba7ddf..aa57511b3 100644
--- a/packages/frontend/src/plugins/vuetify.js
+++ b/packages/frontend/src/plugins/vuetify.js
@@ -27,7 +27,7 @@ export default new Vuetify({
         info: "#313BCF", //dark blue
         success: "#4caf50",
         background: "#eeeeee",
-        text: "#FFFFFF"
+        text: "#FFFFFF",
       },
       dark: {
         primary: "#047EFB", //blue
@@ -37,7 +37,7 @@ export default new Vuetify({
         warning: "#FF9100", //orange
         info: "#313BCF", //dark blue
         success: "#4caf50",
-        background: "#3a3b3c"
+        background: "#3a3b3c",
       }
     }
   },
diff --git a/packages/frontend/src/sass/variables.scss b/packages/frontend/src/sass/variables.scss
index 7dc1ca952..c7de42579 100644
--- a/packages/frontend/src/sass/variables.scss
+++ b/packages/frontend/src/sass/variables.scss
@@ -1 +1,16 @@
 $heading-font-family: 'Space Grotesk';
+
+$primary-base: var(--v-primary-base);
+$primary-darken: var(--v-secondary-base);
+$primary-gradient: linear-gradient(0deg, $primary-darken 0%, $primary-base 40%);
+
+@mixin speckle-gradient-bg {
+  background: $primary-base;
+  background: $primary-gradient;
+}
+
+@mixin speckle-gradient-txt {
+  @include speckle-gradient-bg;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/packages/frontend/src/views/admin/AdminPanel.vue b/packages/frontend/src/views/admin/AdminPanel.vue
index 57cc41e9b..62bfb82bb 100644
--- a/packages/frontend/src/views/admin/AdminPanel.vue
+++ b/packages/frontend/src/views/admin/AdminPanel.vue
@@ -1,17 +1,18 @@
 <template lang="html">
   <v-container>
     <v-row>
-      <v-col cols="12" sm="12" md="4" lg="3" xl="3" class="pt-10">
+      <v-col cols="12" sm="12" md="4" lg="3" xl="3" class="pt-md-10">
         <v-card id="sideMenu" elevation="1" class="rounded-lg overflow-hidden">
-          <v-card-title>Admin panel</v-card-title>
+          <v-card-title class="text--secondary font-weight-regular">Admin panel</v-card-title>
           <div v-for="child in childRoutes" :key="child.to">
             <router-link :to="child.to" v-slot="{ isExactActive, route, navigate }">
-              <v-hover v-slot="{ hover }" >
+              <v-hover v-slot="{ hover }">
                   <span :disabled="isExactActive"
                         @click="navigate"
                         :class="{'active-border primary--text': isExactActive,'primary--text': hover}"
                         class="pa-2 pl-6 text-left d-flex admin-menu-item bold">
-                    <v-icon small class="pr-1" :color="(hover || isExactActive) ? 'primary' : null">{{ child.icon }}</v-icon>
+                    <v-icon small class="pr-1" :color="(hover || isExactActive) ? 'primary' : null">{{ child.icon
+                                                                                                    }}</v-icon>
                     {{ child.name }}
                   </span>
               </v-hover>
@@ -20,7 +21,7 @@
         </v-card>
       </v-col>
 
-      <v-col cols="12" sm="12" md="8" lg="9" xl="9" class="pt-10">
+      <v-col cols="12" sm="12" md="8" lg="9" xl="9" class="pt-md-10">
         <v-fade-transition mode="out-in">
           <router-view></router-view>
         </v-fade-transition>
@@ -66,6 +67,7 @@ export default {
 .gray-border {
   border-top: 1pt solid var(--v-background-base) !important;
 }
+
 .admin-menu-item {
   overflow: hidden;
   position: relative;
@@ -74,13 +76,14 @@ export default {
   transition: 0.5s all ease-out, border-top-color 0s;
 
   &::before {
+    @include speckle-gradient-bg;
+
     position: absolute;
     content: "";
     width: 0;
     height: 100%;
     top: 0;
     left: 0;
-    background-color: var(--v-primary-base);
     transition: all 0.5s ease-in-out, border-top-color 0s;
   }
 
diff --git a/packages/frontend/src/views/admin/AdminUsers.vue b/packages/frontend/src/views/admin/AdminUsers.vue
index 6841b7c9b..d8d6ee081 100644
--- a/packages/frontend/src/views/admin/AdminUsers.vue
+++ b/packages/frontend/src/views/admin/AdminUsers.vue
@@ -1,7 +1,20 @@
 <template>
-  <v-container>
-    <admin-card title="Test card"/>
-  </v-container>
+  <div>
+    <admin-card title="Test card">
+      <template slot="menu">
+        <v-btn icon x-small color="primary">
+          <v-icon small>mdi-pencil</v-icon>
+        </v-btn>
+        <v-btn icon x-small color="primary">
+          <v-icon small>mdi-pencil</v-icon>
+        </v-btn>
+        <v-btn icon x-small color="primary">
+          <v-icon small>mdi-pencil</v-icon>
+        </v-btn>
+      </template>
+      User list goes here!
+    </admin-card>
+  </div>
 </template>
 
 <script>