diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index 1fc1197..c434fca 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="tag" :data-type="application.type" v-text="applicationTypeName"/>
-      <li class="tag">{{ application.level }}</li>
+      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
+      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
     </ul>
   </div>
 </template>
@@ -16,21 +16,15 @@ export default {
   computed: {
     applicationTypeName () {
       return this.$attrs.types[this.application.type].name
+    },
+
+    typeClasses() {
+      return {
+        '': 'bg-white border-gray-400',
+        drupal: 'bg-blue-100 border-blue-100 text-white',
+        nodejs: 'bg-green border-green text-white'
+      }[this.application.type]
     }
   }
 }
 </script>
-
-<style scoped>
-.tag {
-  @apply text-2xs py-1 px-2 rounded uppercase border border-gray-400 bg-white mr-2 mb-2
-}
-
-.tag[data-type="drupal"] {
-  @apply bg-blue-100 border-blue-100 text-white
-}
-
-.tag[data-type="nodejs"] {
-  @apply bg-green border-green text-white
-}
-</style>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 9fedfae..aa07eb2 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -7,18 +7,18 @@
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
-      <div class="wrapper" :class="[ active == 'code' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'code' ? 'block' : 'hidden' ]">
         <action-card title="Code" :description="`${ environment.name }: ${environment.label}`">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Deploy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Switch">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </action-card-button>
@@ -27,24 +27,24 @@
         </action-card>
       </div>
 
-      <div class="wrapper" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
         <action-card title="Databases" :description="environment.name">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Copy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Back up">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Restore" :disabled="isProduction" :class="{
                 'text-blue-300': !isProduction,
                 'text-gray-500 cursor-not-allowed': isProduction
@@ -56,12 +56,12 @@
         </action-card>
       </div>
 
-      <div class="wrapper" :class="[ active == 'files' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
         <action-card title="Files" :description="environment.name">
           <svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Copy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
               </action-card-button>
@@ -95,21 +95,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.wrapper {
-  @apply w-full px-4 mb-4;
-
-  @screen md {
-    @apply w-1/3 block
-  }
-}
-
-.button-list {
-  @apply flex -ml-px
-}
-
-.button-list-item {
-  @apply w-1/2 flex-1 text-center border-l border-gray-400
-}
-</style>