diff --git a/src/components/DeleteNetworkDialog.vue b/src/components/DeleteNetworkDialog.vue
index 8f07e715..9704f174 100644
--- a/src/components/DeleteNetworkDialog.vue
+++ b/src/components/DeleteNetworkDialog.vue
@@ -117,6 +117,7 @@ export default Vue.extend({
   watch: {
     dialog() {
       if (this.dialog) {
+        this.clear();
         this.confirmationPhrase = randomPhrase();
       } else {
         this.$emit('closed');
@@ -134,6 +135,11 @@ export default Vue.extend({
       await Promise.all(selection.map((network) => api.deleteNetwork(workspace, network)));
       this.dialog = false;
     },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
+    },
   },
 });
 </script>
diff --git a/src/components/DeleteTableDialog.vue b/src/components/DeleteTableDialog.vue
index d7831b7c..cdc27412 100644
--- a/src/components/DeleteTableDialog.vue
+++ b/src/components/DeleteTableDialog.vue
@@ -165,6 +165,7 @@ export default Vue.extend({
         if (using.length > 0) {
           this.using = using;
         } else {
+          this.clear();
           this.confirmationPhrase = randomPhrase();
         }
       } else {
@@ -181,10 +182,12 @@ export default Vue.extend({
       } = this;
 
       await Promise.all(selection.map((table) => api.deleteTable(workspace, table)));
-
       this.dialog = false;
+    },
+
+    clear() {
+      this.confirmationPhrase = '';
       this.confirmation = '';
-      this.confirmationPhrase = randomPhrase();
     },
 
     async findDependentNetworks() {
diff --git a/src/components/DeleteWorkspaceDialog.vue b/src/components/DeleteWorkspaceDialog.vue
index 27849c4a..9742cfaf 100644
--- a/src/components/DeleteWorkspaceDialog.vue
+++ b/src/components/DeleteWorkspaceDialog.vue
@@ -123,6 +123,7 @@ export default Vue.extend({
   watch: {
     dialog() {
       if (this.dialog) {
+        this.clear();
         this.confirmationPhrase = randomPhrase();
       } else {
         this.$emit('closed');
@@ -143,6 +144,11 @@ export default Vue.extend({
 
       this.dialog = false;
     },
+
+    clear() {
+      this.confirmationPhrase = '';
+      this.confirmation = '';
+    },
   },
 });
 </script>
diff --git a/src/components/LoginMenu.vue b/src/components/LoginMenu.vue
index 391f17d7..c221b2bc 100644
--- a/src/components/LoginMenu.vue
+++ b/src/components/LoginMenu.vue
@@ -80,7 +80,7 @@ export default {
       const userInfo = this.userInfo as unknown as UserSpec | null;
 
       if (userInfo !== null) {
-        return `${userInfo.first_name[0]}${userInfo.last_name[0]}`;
+        return `${userInfo.first_name[0] || ''}${userInfo.last_name[0] || ''}`;
       }
       return '';
     },
diff --git a/src/components/NetworkCreateForm.vue b/src/components/NetworkCreateForm.vue
index a5f0a179..0c6baa27 100644
--- a/src/components/NetworkCreateForm.vue
+++ b/src/components/NetworkCreateForm.vue
@@ -32,7 +32,9 @@
       <v-spacer />
       <v-btn
         depressed
-        :disabled="networkCreateDisabled"
+        color="primary"
+        :disabled="networkCreateDisabled || loading"
+        :loading="loading"
         @click="createNetwork"
       >
         create network
@@ -64,6 +66,7 @@ export default Vue.extend({
       networkCreationErrors: [] as string[],
       networkEdgeTable: null as string | null,
       newNetwork: '',
+      loading: false,
     };
   },
   computed: {
@@ -80,16 +83,24 @@ export default Vue.extend({
       }
 
       try {
+        this.loading = true;
         await api.createNetwork(workspace, newNetwork, {
           edgeTable: this.networkEdgeTable,
         });
         this.networkCreationErrors = [];
+        this.clear();
         this.$emit('success');
       } catch (error) {
         const message = `Network "${this.newNetwork}" already exists.`;
         this.networkCreationErrors = [message];
       }
     },
+
+    clear() {
+      this.networkEdgeTable = null;
+      this.newNetwork = '';
+      this.loading = false;
+    },
   },
 });
 </script>
diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index 4fb17b85..ba4af52f 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -32,8 +32,10 @@
         <v-stepper-step
           :complete="step > 2"
           step="2"
+          :rules="[() => tableCreationError === null]"
         >
           Set Column Types
+          <small>{{ tableCreationError }}</small>
         </v-stepper-step>
       </v-stepper-header>
 
@@ -45,7 +47,7 @@
                 <v-layout wrap>
                   <v-flex>
                     <v-file-input
-                      :error-messages="fileUploadError"
+                      v-model="selectedFile"
                       label="Upload File"
                       prepend-inner-icon="attach_file"
                       prepend-icon=""
@@ -53,7 +55,8 @@
                       clearable
                       dense
                       outlined
-                      @change="handleFileInput"
+                      show-size
+                      accept=".csv"
                     />
                   </v-flex>
                 </v-layout>
@@ -61,7 +64,6 @@
                   <v-flex>
                     <v-text-field
                       v-model="fileName"
-                      :error-messages="tableCreationError"
                       label="Table Name"
                       outlined
                       dense
@@ -162,6 +164,8 @@
             <v-btn
               color="primary"
               depressed
+              :loading="loading"
+              :disabled="loading"
               @click="createTable"
             >
               Create Table
@@ -175,24 +179,16 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, Ref, computed,
+  defineComponent, ref, Ref, computed, watch,
 } from '@vue/composition-api';
 
 import api from '@/api';
-import { TableFileType, CSVColumnType } from '@/types';
-import { validFileType, fileName as getFileName, analyzeCSV } from '@/utils/files';
+import { CSVColumnType } from '@/types';
+import { analyzeCSV } from '@/utils/files';
 import store from '@/store';
 
 const defaultKeyField = '_key';
 const multinetTypes: readonly CSVColumnType[] = ['label', 'boolean', 'category', 'number', 'date'];
-const fileTypes: readonly TableFileType[] = [
-  {
-    extension: ['csv'],
-    queryCall: 'csv',
-    hint: 'Comma Separated Value file',
-    displayName: 'CSV',
-  },
-];
 
 export default defineComponent({
   name: 'TableDialog',
@@ -231,35 +227,29 @@ export default defineComponent({
     // Type recommendation
     const columnType: Ref<{[key: string]: CSVColumnType}> = ref({});
 
+    const tableCreationError = ref<string | null>(null);
+
     // File selection
     const selectedFile = ref<File | null>(null);
     const fileName = ref<string | null>(null);
-    const fileUploadError = ref<string | null>(null);
-    async function handleFileInput(file: File | undefined) {
-      if (file === undefined) {
-        fileUploadError.value = null;
-        selectedFile.value = null;
+    watch(selectedFile, async (newFile) => {
+      tableCreationError.value = null;
+
+      if (newFile === null) {
+        fileName.value = null;
         columnType.value = {};
 
         return;
       }
+      fileName.value = newFile.name.replace('.csv', '');
 
-      selectedFile.value = file;
-
-      if (!validFileType(file, fileTypes)) {
-        fileUploadError.value = 'Invalid file type';
-      } else {
-        fileName.value = fileName.value || getFileName(file);
-        fileUploadError.value = null;
-      }
-
-      const analysis = await analyzeCSV(file);
+      const analysis = await analyzeCSV(newFile);
       columnType.value = Array.from(analysis.typeRecs.keys()).reduce(
         (acc, key) => ({ ...acc, [key]: analysis.typeRecs.get(key) }), {},
       );
 
       sampleRows.value = [...analysis.sampleRows];
-    }
+    });
 
     // Upload options
     const overwrite = ref(false);
@@ -280,7 +270,6 @@ export default defineComponent({
 
       selectedFile.value = null;
       fileName.value = null;
-      fileUploadError.value = null;
 
       overwrite.value = false;
       restoreKeyField();
@@ -291,8 +280,8 @@ export default defineComponent({
 
     // Table creation state
     const tableDialog = ref(false);
-    const tableCreationError = ref<string | null>(null);
-    const createDisabled = computed(() => !selectedFile.value || !fileName.value || fileUploadError.value);
+    const createDisabled = computed(() => selectedFile.value === null || !fileName.value);
+    const loading = ref(false);
     async function createTable() {
       if (selectedFile.value === null || fileName.value === null) {
         return;
@@ -302,6 +291,7 @@ export default defineComponent({
       uploading.value = true;
 
       try {
+        loading.value = true;
         await api.uploadTable(workspace, fileName.value, {
           data: selectedFile.value,
           edgeTable: edgeTable.value,
@@ -310,11 +300,12 @@ export default defineComponent({
 
         tableCreationError.value = null;
         tableDialog.value = false;
+        loading.value = false;
 
         emit('success');
         resetAllFields();
       } catch (err) {
-        tableCreationError.value = err.statusText;
+        tableCreationError.value = `${Object.values(err.response.data).flat()[0]}`;
       } finally {
         uploading.value = false;
         uploadProgress.value = null;
@@ -330,14 +321,14 @@ export default defineComponent({
       sampleRows,
       columnType,
       multinetTypes,
+      selectedFile,
       fileName,
-      fileUploadError,
       tableDialog,
       tableCreationError,
       uploading,
       uploadProgress,
       createDisabled,
-      handleFileInput,
+      loading,
       createTable,
       restoreKeyField,
       keyField,
diff --git a/src/components/WorkspaceOptionMenu.vue b/src/components/WorkspaceOptionMenu.vue
new file mode 100644
index 00000000..2780bc84
--- /dev/null
+++ b/src/components/WorkspaceOptionMenu.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-menu
+    v-model="actionsMenu"
+    max-width="275"
+    offset-y
+    origin="center center"
+    transition="scale-transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        icon
+        v-on="on"
+      >
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-list
+        dense
+        width="224"
+      >
+        <!-- Each listing here should contain a v-list-item -->
+        <PermissionsDialog :workspace="workspace" />
+        <v-list-item :to="{ name: 'aqlWizard' }">
+          <v-list-item-icon class="mr-3">
+            <v-icon>search</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            AQL Wizard
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from '@vue/composition-api';
+import PermissionsDialog from '@/components/PermissionsDialog.vue';
+
+export default defineComponent({
+  components: {
+    PermissionsDialog,
+  },
+
+  props: {
+    workspace: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+
+  setup() {
+    const actionsMenu = ref(false);
+
+    return {
+      actionsMenu,
+    };
+  },
+});
+</script>
diff --git a/src/store/index.ts b/src/store/index.ts
index 1eb954fe..86584f9f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -37,23 +37,30 @@ const {
     currentWorkspacePermission: null,
   } as State,
   getters: {
+    tables(state: State, getters): string[] {
+      if (state.currentWorkspace !== null && state.currentWorkspace.nodeTables && state.currentWorkspace.edgeTables) {
+        return getters.nodeTables.concat(getters.edgeTables).sort();
+      }
+      return [];
+    },
+
     nodeTables(state: State): string[] {
       if (state.currentWorkspace !== null && state.currentWorkspace.nodeTables) {
-        return state.currentWorkspace.nodeTables;
+        return state.currentWorkspace.nodeTables.sort();
       }
       return [];
     },
 
     edgeTables(state: State): string[] {
       if (state.currentWorkspace !== null && state.currentWorkspace.edgeTables) {
-        return state.currentWorkspace.edgeTables;
+        return state.currentWorkspace.edgeTables.sort();
       }
       return [];
     },
 
     networks(state: State) {
       if (state.currentWorkspace !== null && state.currentWorkspace.networks) {
-        return state.currentWorkspace.networks;
+        return state.currentWorkspace.networks.sort();
       }
       return [];
     },
@@ -75,7 +82,7 @@ const {
   },
   mutations: {
     setWorkspaces(state, workspaces: string[]) {
-      state.workspaces = workspaces;
+      state.workspaces = workspaces.sort();
     },
 
     setCurrentWorkspace(state, workspace: WorkspaceState) {
diff --git a/src/utils/files.ts b/src/utils/files.ts
index 8dd56609..d097dcf0 100644
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@@ -1,15 +1,6 @@
 import Papa, { ParseResult } from 'papaparse';
 import dayjs from 'dayjs';
-import { validUploadType } from 'multinet';
-import { FileType, CSVColumnType } from '@/types';
-
-const fileExtension = (file: File) => file.name.split('.').slice(-1)[0];
-const fileName = (file: File) => file.name.split('.')[0];
-
-function validFileType(file: File, allowedTypes: readonly FileType[]) {
-  const extension = fileExtension(file);
-  return allowedTypes.some((type) => type.extension.includes(extension) && validUploadType(type.queryCall));
-}
+import { CSVColumnType } from '@/types';
 
 function isBoolean(strings: Set<string>) {
   // This function tests whether both elements of an array belong to the string
@@ -150,7 +141,5 @@ async function analyzeCSV(file: File): Promise<CSVAnalysis> {
 }
 
 export {
-  fileName,
-  validFileType,
   analyzeCSV,
 };
diff --git a/src/views/NetworkDetail.vue b/src/views/NetworkDetail.vue
index 21f18210..74e89efe 100644
--- a/src/views/NetworkDetail.vue
+++ b/src/views/NetworkDetail.vue
@@ -40,9 +40,7 @@
 
       <v-spacer />
 
-      <v-btn icon>
-        <v-icon>more_vert</v-icon>
-      </v-btn>
+      <workspace-option-menu :workspace="workspace" />
     </v-app-bar>
     <v-main class="fill-height">
       <v-container
@@ -327,12 +325,18 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import { EdgesSpec, TableRow } from 'multinet';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 import api from '@/api';
 import { App } from '@/types';
 
 export default Vue.extend({
   name: 'NetworkDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
@@ -441,6 +445,8 @@ export default Vue.extend({
         }
       });
       this.edgeTypes = edges.results.length > 0 ? [tableName(edges.results[0])] : [];
+      this.nodeTypes = this.nodeTypes.sort();
+      this.edgeTypes = this.edgeTypes.sort();
 
       // eslint-disable-next-line no-underscore-dangle
       this.nodes = nodes.results.map((node) => node._id);
diff --git a/src/views/NodeDetail.vue b/src/views/NodeDetail.vue
index 2bb38144..4e0316e2 100644
--- a/src/views/NodeDetail.vue
+++ b/src/views/NodeDetail.vue
@@ -52,9 +52,7 @@
 
         <v-spacer />
 
-        <v-btn icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
       <v-container
@@ -262,6 +260,7 @@ import { EdgesSpec } from 'multinet';
 
 import api from '@/api';
 import { KeyValue } from '@/types';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 interface EdgeRecord {
   id: string;
@@ -278,6 +277,11 @@ type EdgeType = 'incoming' | 'outgoing';
 
 export default Vue.extend({
   name: 'NodeDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 9001d486..eb9ff94d 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -18,7 +18,7 @@
 
           <v-divider />
 
-          <div v-if="loading">
+          <div v-if="loadingTables">
             <v-skeleton-loader type="list-item" />
             <v-skeleton-loader type="list-item" />
             <v-skeleton-loader type="list-item" />
@@ -81,9 +81,7 @@
 
         <v-spacer />
 
-        <v-btn icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
       <div class="wrapper">
         <v-data-table
@@ -128,6 +126,8 @@ import Vue, { PropType } from 'vue';
 
 import api from '@/api';
 import { KeyValue, TableRow } from '@/types';
+import store from '@/store';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 interface DataPagination {
   page: number;
@@ -140,6 +140,11 @@ interface DataPagination {
 
 export default Vue.extend({
   name: 'TableDetail',
+
+  components: {
+    WorkspaceOptionMenu,
+  },
+
   props: {
     workspace: {
       type: String as PropType<string>,
@@ -155,14 +160,15 @@ export default Vue.extend({
     return {
       rowKeys: [] as KeyValue[][],
       headers: [] as Array<keyof TableRow>,
-      tables: [] as string[],
       editing: false,
       tableSize: 1,
       pagination: {} as DataPagination,
       loading: true,
+      loadingTables: true,
     };
   },
   computed: {
+    tables: () => store.getters.tables,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dataTableHeaders(this: any) {
       const {
@@ -217,12 +223,21 @@ export default Vue.extend({
       this.update();
     },
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tables(this: any) {
+      this.loadingTables = false;
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pagination(this: any) {
       this.update();
     },
   },
 
+  created() {
+    store.dispatch.fetchWorkspace(this.workspace);
+  },
+
   methods: {
     rowClassName(index: number): 'even-row' | 'odd-row' {
       return index % 2 === 0 ? 'even-row' : 'odd-row';
@@ -271,11 +286,6 @@ export default Vue.extend({
       this.rowKeys = rowKeys;
       this.headers = headers;
 
-      // Roni to convert these lines to computed function
-      this.tables = (await api.tables(this.workspace, {
-        type: 'all',
-      })).results.map((table) => table.name);
-
       this.loading = false;
     },
   },
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index fe47dafd..bc9355db 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -80,39 +80,7 @@
         />
         <v-spacer />
 
-        <v-menu
-          v-model="actionsMenu"
-          max-width="275"
-          offset-y
-          origin="center center"
-          transition="scale-transition"
-        >
-          <template v-slot:activator="{ on }">
-            <v-btn
-              icon
-              v-on="on"
-            >
-              <v-icon>more_vert</v-icon>
-            </v-btn>
-          </template>
-          <v-card>
-            <v-list
-              dense
-              width="224"
-            >
-              <!-- Each listing here should contain a v-list-item -->
-              <PermissionsDialog :workspace="workspace" />
-              <v-list-item :to="{ name: 'aqlWizard' }">
-                <v-list-item-icon class="mr-3">
-                  <v-icon>search</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  AQL Wizard
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </v-card>
-        </v-menu>
+        <workspace-option-menu :workspace="workspace" />
       </v-app-bar>
 
       <v-layout
@@ -166,8 +134,8 @@ import Vue, { PropType } from 'vue';
 import api from '@/api';
 import TablePanel from '@/components/TablePanel.vue';
 import NetworkPanel from '@/components/NetworkPanel.vue';
-import PermissionsDialog from '@/components/PermissionsDialog.vue';
 import store from '@/store';
+import WorkspaceOptionMenu from '@/components/WorkspaceOptionMenu.vue';
 
 const surroundingWhitespace = /^\s+|\s+$/;
 const workspaceNameRules: Array<(x: string) => string|boolean> = [
@@ -180,7 +148,7 @@ export default Vue.extend({
   components: {
     TablePanel,
     NetworkPanel,
-    PermissionsDialog,
+    WorkspaceOptionMenu,
   },
   props: {
     workspace: {
@@ -194,13 +162,13 @@ export default Vue.extend({
       editing: false,
       requestError: null as string | null,
       loading: false,
-      actionsMenu: false,
     };
   },
 
   computed: {
     nodeTables: () => store.getters.nodeTables,
     edgeTables: () => store.getters.edgeTables,
+    tables: () => store.getters.tables,
     networks: () => store.getters.networks,
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -213,14 +181,6 @@ export default Vue.extend({
 
       return errors.filter((res): res is string => typeof res === 'string');
     },
-    tables(): string[] {
-      const {
-        nodeTables,
-        edgeTables,
-      } = this;
-
-      return nodeTables.concat(edgeTables);
-    },
   },
 
   watch: {
@@ -268,7 +228,7 @@ export default Vue.extend({
           if (err.response.status === 409) {
             this.requestError = 'A workspace by that name already exists';
           } else {
-            this.requestError = err.response.statusText;
+            this.requestError = `${Object.values(err.response.data).flat()[0]}`;
           }
         }
       }