diff --git a/cateditor/src/components/AddProductDialog.vue b/cateditor/src/components/AddProductDialog.vue
index 522faf3..6b8a993 100644
--- a/cateditor/src/components/AddProductDialog.vue
+++ b/cateditor/src/components/AddProductDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="280">
       <v-card>
 
@@ -25,9 +25,9 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn small flat @click="show = false">Cancel</v-btn>
+          <v-btn small text @click="show = false">Cancel</v-btn>
           <v-spacer></v-spacer>
-          <v-btn small flat color="primary" @click="doAdd()">Add</v-btn>
+          <v-btn small text color="primary" @click="doAdd()">Add</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
 
diff --git a/cateditor/src/components/AddSectionDialog.vue b/cateditor/src/components/AddSectionDialog.vue
index 13736bf..af343a9 100644
--- a/cateditor/src/components/AddSectionDialog.vue
+++ b/cateditor/src/components/AddSectionDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="300">
       <v-form v-model="valid">
         <v-card>
diff --git a/cateditor/src/components/CatalogContents.vue b/cateditor/src/components/CatalogContents.vue
index 9e42b06..9443e82 100644
--- a/cateditor/src/components/CatalogContents.vue
+++ b/cateditor/src/components/CatalogContents.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-container fluid grid-list-lg ma-0 pa-1>
+  <v-container fluid>
 
-    <v-layout row fill-height>
+    <v-row class="fill-height">
       <v-btn @click="showAddProductDialog = true">Add products</v-btn>
-    </v-layout>
+    </v-row>
 
-    <v-layout row fill-height>
-      <v-flex xs4>
+    <v-row class="fill-height">
+      <v-col cols="4">
         <v-card>
           <DragListHeading title="Sections">
             <v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
@@ -17,7 +17,7 @@
           <div id="sections" class="list-group">
             <div v-for="item in catalog.sections" :key="item.id">
               <v-hover :key="item.id">
-                <v-list-tile
+                <v-list-item
                   slot-scope="{ hover }"
                   :class="sectionListItemClasses(item.id, hover)"
                   @click="selectSection(item.id)"
@@ -25,18 +25,18 @@
                   <!-- TODO try move sectionparent into v-list-title
                        and so section-drop can cover all interior
                   -->
-                  <v-list-tile-content class="section-parent">
-                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                    <v-list-tile-sub-title
+                  <v-list-item-content class="section-parent">
+                    <v-list-item-title v-html="item.name"></v-list-item-title>
+                    <v-list-item-subtitle
                       class="caption font-weight-light"
                       color="grey lighten-2"
                     >
                       {{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
-                    </v-list-tile-sub-title>
-                    <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
-                  </v-list-tile-content>
+                    </v-list-item-subtitle>
+                    <v-list-item-subtitle class="section-drop" :section-id="item.id"></v-list-item-subtitle>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popSectionInfo(item.id)">
                         <v-icon small color="grey lighten-1">info</v-icon>
@@ -45,37 +45,37 @@
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
+                  </v-list-item-action>
 
-                </v-list-tile>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs4>
+      <v-col cols="4">
         <v-card>
           <DragListHeading title="Models" />
 
           <div id="models" class="list-group">
             <div v-for="item in selectedModels" :key="item.model">
               <v-hover :key="item.model">
-                <v-list-tile
+                <v-list-item
                   slot-scope="{ hover }"
                   :class="modelListItemClasses(item.model, hover)"
                   @click="selectModel(item.model)"
                 >
-                  <v-list-tile-content>
-                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                    <v-list-tile-sub-title
+                  <v-list-item-content>
+                    <v-list-item-title v-html="item.name"></v-list-item-title>
+                    <v-list-item-subtitle
                       class="caption font-weight-light"
                       color="grey lighten-2">
                       {{item.ids.length}} {{item.ids.length | pluralize('material') }}
-                    </v-list-tile-sub-title>
-                  </v-list-tile-content>
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popModelInfo(item.model)">
                         <v-icon small color="grey lighten-1">info</v-icon>
@@ -84,48 +84,47 @@
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
+                  </v-list-item-action>
 
-                </v-list-tile>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs4>
+      <v-col cols="4">
         <v-card>
           <DragListHeading title="Materials" />
 
           <div id="materials" class="list-group">
             <div v-for="item in selectedMaterials" :key="item.id">
               <v-hover :key="item.id">
-                <v-list-tile
+                <v-list-item
                   @click="selectMaterial(item.id)"
                   slot-scope="{ hover }"
                   :class="materialListItemClasses(item.id, hover)"
                 >
-                  <v-list-tile-content>
-                    <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
-                    <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
-                  </v-list-tile-content>
+                  <v-list-item-content>
+                    <v-list-item-title><b>{{ item.id }}</b> {{ item.name }}</v-list-item-title>
+                    <v-list-item-subtitle v-html="item.color"></v-list-item-subtitle>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click="popMaterialDelete(item.id)">
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
-                </v-list-tile>
+                  </v-list-item-action>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
+      </v-col>
 
-      </v-flex>
-
-    </v-layout>
+    </v-row>
 
     <AddProductDialog v-model="showAddProductDialog"/>
     <AddSectionDialog v-model="showAddSectionDialog"/>
diff --git a/cateditor/src/components/CatalogEditor.vue b/cateditor/src/components/CatalogEditor.vue
index 9011ea4..96ca06f 100644
--- a/cateditor/src/components/CatalogEditor.vue
+++ b/cateditor/src/components/CatalogEditor.vue
@@ -16,7 +16,7 @@
         <v-stepper-content step="1">
           <CatalogInfo/>
           <v-spacer></v-spacer>
-          <v-btn flat @click="popExit()">Cancel</v-btn>
+          <v-btn text @click="popExit()">Cancel</v-btn>
           <v-btn
             :disabled="!valid"
             @click="step = 2"
@@ -27,7 +27,7 @@
         <v-stepper-content step="2">
           <CatalogContents/>
           <v-spacer></v-spacer>
-          <v-btn flat @click="popExit()">Cancel</v-btn>
+          <v-btn text @click="popExit()">Cancel</v-btn>
           <v-btn @click="step = 1">Back</v-btn>
           <!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> -->
           <v-btn
@@ -40,7 +40,7 @@
 
         <!-- <v-stepper-content step="3">
              <CatalogPagination/>
-             <v-btn flat>Cancel</v-btn>
+             <v-btn text>Cancel</v-btn>
              <v-btn @click="step = 2">Back</v-btn>
              <v-btn color="primary" class="black--text">Save</v-btn>
              </v-stepper-content> -->
@@ -54,7 +54,7 @@
                 multi-line top :timeout="10000">
       This is a public catalog.<br/>
       Changes will be saved in a new catalog that you own.
-      <v-btn dark flat @click="showPublicNotice = false">Close</v-btn>
+      <v-btn dark text @click="showPublicNotice = false">Close</v-btn>
     </v-snackbar>
 
   </v-form>
diff --git a/cateditor/src/components/CatalogInfo.vue b/cateditor/src/components/CatalogInfo.vue
index 863f420..122e6bd 100644
--- a/cateditor/src/components/CatalogInfo.vue
+++ b/cateditor/src/components/CatalogInfo.vue
@@ -1,16 +1,8 @@
 <template>
-  <v-container fluid grid-list-sm>
+  <v-container fluid>
 
-    <!--
-    <v-layout row>
-      <v-flex xs8>
-        <h2>Catalog Info</h2>
-      </v-flex>
-    </v-layout>
-    -->
-
-    <v-layout row>
-      <v-flex xs8>
+    <v-row>
+      <v-col cols="8">
         <v-text-field
           v-model="name"
           label="Catalog name"
@@ -19,11 +11,11 @@
           class="headline font-weight-medium"
           height="30px"
         ></v-text-field>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
-    <v-layout row>
-      <v-flex xs4>
+    <v-row>
+      <v-col cols="4">
         <v-select
           v-model="season"
           :items="seasons"
@@ -31,8 +23,8 @@
           item-text="name"
           :rules="[rules.required]"
           label="Season"></v-select>
-      </v-flex>
-      <v-flex xs4>
+      </v-col>
+      <v-col cols="4">
         <v-select
           v-model="region"
           :items="regions"
@@ -42,11 +34,11 @@
           label="Region"
           class="pl-4"
         ></v-select>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
-    <v-layout row>
-      <v-flex xs8>
+    <v-row>
+      <v-col cols="8">
         <v-text-field
           v-model="email"
           :rules="[rules.emailRules]"
@@ -54,29 +46,29 @@
           hint="Get notified when the catalog PDF is done"
           persistent-hint
         ></v-text-field>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
-    <v-layout row>
-      <v-flex xs4>
+    <v-row>
+      <v-col cols="4">
         <v-checkbox
           v-model="isPublic"
           label="Public"
         ></v-checkbox>
-      </v-flex>
-      <v-flex xs4>
+      </v-col>
+      <v-col cols="4">
         <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
-    <v-layout row>
-      <v-flex xs4 v-if="isAdmin">
+    <v-row>
+      <v-col cols="4" v-if="isAdmin">
         <v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
-      </v-flex>
-      <v-flex xs4 v-if="isAdmin">
+      </v-col>
+      <v-col cols="4" v-if="isAdmin">
         <v-checkbox v-model="master" label="Region master"></v-checkbox>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
   </v-container>
 </template>
diff --git a/cateditor/src/components/ExitEditorDialog.vue b/cateditor/src/components/ExitEditorDialog.vue
index 34e9c39..8690763 100644
--- a/cateditor/src/components/ExitEditorDialog.vue
+++ b/cateditor/src/components/ExitEditorDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <v-dialog v-model="show" max-width="280">
       <v-card>
 
@@ -20,7 +20,7 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
diff --git a/cateditor/src/components/MaterialDeleteDialog.vue b/cateditor/src/components/MaterialDeleteDialog.vue
index 61f6951..3dd3154 100644
--- a/cateditor/src/components/MaterialDeleteDialog.vue
+++ b/cateditor/src/components/MaterialDeleteDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Remove Material">
@@ -18,13 +18,13 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn flat @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
+          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
diff --git a/cateditor/src/components/ModelDeleteDialog.vue b/cateditor/src/components/ModelDeleteDialog.vue
index 1108cdb..107aa7f 100644
--- a/cateditor/src/components/ModelDeleteDialog.vue
+++ b/cateditor/src/components/ModelDeleteDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Remove Model">
@@ -17,13 +17,13 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn flat @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
+          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
diff --git a/cateditor/src/components/ModelInfoDialog.vue b/cateditor/src/components/ModelInfoDialog.vue
index 8c714ba..d8f159a 100644
--- a/cateditor/src/components/ModelInfoDialog.vue
+++ b/cateditor/src/components/ModelInfoDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="250">
       <v-card>
         <DialogHeading title="Model Info">
@@ -15,7 +15,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" flat @click="show = false">OK</v-btn>
+          <v-btn color="primary" text @click="show = false">OK</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/components/SectionDeleteDialog.vue b/cateditor/src/components/SectionDeleteDialog.vue
index 461b58c..28dccfe 100644
--- a/cateditor/src/components/SectionDeleteDialog.vue
+++ b/cateditor/src/components/SectionDeleteDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Delete Section">
@@ -17,13 +17,13 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn flat @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
+          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
diff --git a/cateditor/src/components/SectionInfoDialog.vue b/cateditor/src/components/SectionInfoDialog.vue
index 59fa8e4..990df5a 100644
--- a/cateditor/src/components/SectionInfoDialog.vue
+++ b/cateditor/src/components/SectionInfoDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="250">
       <v-card>
         <DialogHeading title="Section Info">
@@ -16,7 +16,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" flat @click="show = false">OK</v-btn>
+          <v-btn color="primary" text @click="show = false">OK</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/pages/editor/main.js b/cateditor/src/pages/editor/main.js
index 5062007..edf32e1 100644
--- a/cateditor/src/pages/editor/main.js
+++ b/cateditor/src/pages/editor/main.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import './../../plugins/vuetify'
+import Vuetify from 'vuetify/lib'
 import Vue2Filters from 'vue2-filters'
 import App from './App.vue'
 import { store } from './store'
@@ -7,8 +7,35 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
 
 Vue.config.productionTip = false
 Vue.use(Vue2Filters)
+Vue.use(Vuetify)
+
+const opts = {
+  theme: {
+    themes: {
+      light: {
+        primary: '#fdd02f',
+        keen_yellow: '#fddd04',
+        keen_dark_grey: '#373737',
+        keen_light_grey: '#bababa',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107'
+      },
+    },
+  },
+  options: {
+    customProperties: true
+  },
+  // icons: {
+  //   iconfont: 'md',
+  // },
+}
 
 new Vue({
   store,
-  render: h => h(App)
+  render: h => h(App),
+  vuetify: new Vuetify(opts)
 }).$mount('#app')