diff --git a/package-lock.json b/package-lock.json
index e1c48c99..82fd0803 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "GPL",
       "dependencies": {
         "@chenfengyuan/vue-qrcode": "^2.0.0",
-        "@edge/account-utils": "^0.4.1",
+        "@edge/account-utils": "github:edge/account-utils#feature/vpn",
         "@edge/cache-config": "^1.1.0",
         "@edge/index-utils": "^0.6.2",
         "@headlessui/vue": "^1.7.3",
@@ -1882,8 +1882,8 @@
     },
     "node_modules/@edge/account-utils": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@edge/account-utils/-/account-utils-0.4.1.tgz",
-      "integrity": "sha512-3NDXXR3B/518yVVOEhFLtyi179m4IyS3EbK9WAATC5BElnwKoF3DtZtJaRaMdRvdyAgjpAnrtPBIsWI+yo/cbQ==",
+      "resolved": "git+ssh://git@github.com/edge/account-utils.git#f5fb45ab1be29b722b43625dbba937735a71a794",
+      "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@edge/cache-config": "^1.1.0",
         "@edge/xe-utils": "^1.11.1",
@@ -15412,9 +15412,8 @@
       "requires": {}
     },
     "@edge/account-utils": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@edge/account-utils/-/account-utils-0.4.1.tgz",
-      "integrity": "sha512-3NDXXR3B/518yVVOEhFLtyi179m4IyS3EbK9WAATC5BElnwKoF3DtZtJaRaMdRvdyAgjpAnrtPBIsWI+yo/cbQ==",
+      "version": "git+ssh://git@github.com/edge/account-utils.git#f5fb45ab1be29b722b43625dbba937735a71a794",
+      "from": "@edge/account-utils@github:edge/account-utils#feature/vpn",
       "requires": {
         "@edge/cache-config": "^1.1.0",
         "@edge/xe-utils": "^1.11.1",
diff --git a/package.json b/package.json
index fc62592f..c409fc8a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   "main": "server/index.js",
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "^2.0.0",
-    "@edge/account-utils": "^0.4.1",
+    "@edge/account-utils": "github:edge/account-utils#feature/vpn",
     "@edge/cache-config": "^1.1.0",
     "@edge/index-utils": "^0.6.2",
     "@headlessui/vue": "^1.7.3",
diff --git a/src/components/MobileNavigation.vue b/src/components/MobileNavigation.vue
index 819f4ed9..ac6cde43 100644
--- a/src/components/MobileNavigation.vue
+++ b/src/components/MobileNavigation.vue
@@ -51,6 +51,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index 3777863f..d6315fd0 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -34,6 +34,16 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
+        {
+          _key: 'vpn',
+          link: '/vpns',
+          text: 'VPN'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 957885b3..c76028cc 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -28,7 +28,7 @@
         </MenuItem>
         <MenuItem v-slot="{ active }">
           <button
-            @click.prevent="navigate('/account')"
+            @click.prevent="navigate({ name: 'Settings' })"
             :class="[
               'menu__item',
               active ? 'active' : ''
diff --git a/src/components/billing/Invoices.vue b/src/components/billing/Invoices.vue
index 42687553..44923059 100644
--- a/src/components/billing/Invoices.vue
+++ b/src/components/billing/Invoices.vue
@@ -43,11 +43,11 @@ const isCryptoView = Boolean(store.state.account?.useCryptoView)
               If you add an email address to your account, you will receive an email notification when a new invoice is generated and whenever your account status changes.
               You can also use your email address to log in to your Edge Account, keeping your account number secure.
               <span v-if="!accountEmail">
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Add an email address</RouterLink>.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Add an email address</RouterLink>.
               </span>
               <span v-else>
                 Your email address is <span class="text-green">{{ accountEmail }}</span>.
-                You can <RouterLink :to="{ name: 'Account' }" class="text-green">change your email address</RouterLink> if you need to.
+                You can <RouterLink :to="{ name: 'Settings' }" class="text-green">change your email address</RouterLink> if you need to.
               </span>
             </p>
             <p>
diff --git a/src/components/billing/PaymentCards.vue b/src/components/billing/PaymentCards.vue
index 0363789d..dc55ef3b 100644
--- a/src/components/billing/PaymentCards.vue
+++ b/src/components/billing/PaymentCards.vue
@@ -101,7 +101,7 @@
                 <RouterLink :to="{ name: 'Wallet' }" class="text-green">View your wallet</RouterLink> to start funding your account manually.
               </p>
               <p v-else>
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
               </p>
             </section>
           </article>
diff --git a/src/components/billing/Wallet.vue b/src/components/billing/Wallet.vue
index 6a1ec4c6..fc43eb09 100644
--- a/src/components/billing/Wallet.vue
+++ b/src/components/billing/Wallet.vue
@@ -108,7 +108,7 @@ async function startPurchase() {
                 You're currently using the crypto view, which provides comprehensive visibility of your wallet and transactions on the XE blockchain.
                 This page enables you to manage your account balance directly using XE.
                 If you're new to cryptocurrency, you can <a href="https://wiki.edge.network/getting-and-storing-tokens/wallets" target="_blank" class="text-green">learn more about XE on the Edge Wiki</a>.
-                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Account' }" class="text-green">disable the crypto view</RouterLink>.
+                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Settings' }" class="text-green">disable the crypto view</RouterLink>.
               </p>
             </section>
           </article>
diff --git a/src/components/server/ServerPowerToggle.vue b/src/components/server/ServerPowerToggle.vue
index c19173b6..a350d21a 100644
--- a/src/components/server/ServerPowerToggle.vue
+++ b/src/components/server/ServerPowerToggle.vue
@@ -55,7 +55,7 @@ import { mapGetters, mapState } from 'vuex'
 
 export default {
   name: 'ServerPowerToggle',
-  props: ['activeTasks', 'disableActions', 'server'],
+  props: ['disableActions', 'server'],
   data() {
     return {
       showConfirmationModal: false,
@@ -71,6 +71,9 @@ export default {
   computed: {
     ...mapGetters(['balanceSuspend']),
     ...mapState(['session']),
+    activeTasks() {
+      return this.$store.getters.tasksByServerId(this.serverId)
+    },
     destroying() {
       return this.activeTasks.some(task => task.action === 'destroy')
     },
diff --git a/src/layout/EditableTitle.vue b/src/layout/EditableTitle.vue
new file mode 100644
index 00000000..a33c6b40
--- /dev/null
+++ b/src/layout/EditableTitle.vue
@@ -0,0 +1,98 @@
+<script setup>
+import LoadingSpinner from '@/components/icons/LoadingSpinner.vue'
+import { CheckIcon, PencilIcon, XIcon } from '@heroicons/vue/outline'
+import { defineEmits, defineModel, defineProps, ref, watchPostEffect } from 'vue'
+
+const emit = defineEmits(['cancel', 'edit','save'])
+
+const props = defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  invalid: Boolean,
+  placeholder: String
+})
+
+const editing = ref(false)
+const input = ref(null)
+const model = defineModel()
+const previousValue = ref(model.value)
+
+function cancel() {
+  editing.value = false
+  model.value = previousValue.value
+
+  emit('cancel')
+}
+
+function edit() {
+  editing.value = true
+
+  emit('edit')
+}
+
+function save() {
+  if (props.invalid) return
+
+  editing.value = false
+  previousValue.value = model.value
+
+  emit('save')
+}
+
+watchPostEffect(() => {
+  if (input.value) {
+    input.value.focus()
+  }
+})
+</script>
+
+<template>
+  <div v-if="editing" class="editable-title__container flex">
+    <input
+      v-model="model"
+      @keypress.enter="save"
+      class="editable-title__value"
+      :placeholder="placeholder"
+      ref="input"
+      type="text"
+    />
+
+    <div class="mt-3 flex">
+      <button class="ml-2" @click="save" :disabled="invalid || disabled">
+        <CheckIcon class="button__icon text-green hover:text-green-600" />
+      </button>
+      <button @click="cancel" class="ml-2">
+        <XIcon class="button__icon text-red hover:text-red-600" />
+      </button>
+    </div>
+  </div>
+
+  <div v-else class="editable-title__container flex">
+    <h1 class="w-max mb-0">{{ model }}</h1>
+
+    <div class="mt-3">
+      <button v-if="busy" class="ml-2" disabled>
+        <LoadingSpinner />
+      </button>
+      <button v-else class="ml-2" @click="edit" :disabled="disabled">
+        <PencilIcon class="button__icon text-gray-400 hover:text-green" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.editable-title__value {
+  @apply bg-transparent text-3xl text-gray-600 border-b border-gray-400 w-full;
+  @apply focus:outline-none focus:border-green focus:text-green;
+}
+
+.editable-title__container .button__icon {
+  @apply w-5 ml-1;
+}
+
+.editable-title__container button:disabled,
+.editable-title__container button:disabled .button__icon {
+  @apply text-gray-400 hover:no-underline;
+}
+</style>
diff --git a/src/layout/ErrorV2.vue b/src/layout/ErrorV2.vue
new file mode 100644
index 00000000..1bfebdcd
--- /dev/null
+++ b/src/layout/ErrorV2.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import { computed, defineProps } from 'vue'
+
+const props = defineProps({
+  error: Object
+})
+
+const message = computed(() => {
+  if (!props.error) return ''
+
+  if (props.error && props.error.response && props.error.response.body) {
+    const body = props.error.response.body
+    if (body.hint) return body.hint
+    if (body.reason) return body.reason
+    if (body.error) return body.error
+    if (body.message) return body.message
+  }
+
+  if (props.error.value && props.error.message) {
+    return props.error.message
+  }
+
+  return 'Unknown error'
+})
+</script>
+
+<template>
+  <div v-if="error" class="error_wrapper block errorMessage">
+    <div class="float-left">
+      <ExclamationIcon class="w-3.5 text-red" />
+    </div>
+    <span class="errorMessage__text text-red">{{ message }}</span>
+  </div>
+</template>
diff --git a/src/layout/PowerToggle.vue b/src/layout/PowerToggle.vue
new file mode 100644
index 00000000..427d4cd4
--- /dev/null
+++ b/src/layout/PowerToggle.vue
@@ -0,0 +1,46 @@
+<script setup>
+import LoadingSpinner from '../components/icons/LoadingSpinner.vue'
+import { Switch } from '@headlessui/vue'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+const emit = defineEmits(['click'])
+
+/** v-model must be a Boolean ref! */
+const model = defineModel()
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  offText: String,
+  on: Boolean,
+  onText: String
+})
+</script>
+
+<template>
+  <Switch
+    v-model="model"
+    class="relative inline-flex flex-shrink-0 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-16 md:w-20 h-7 md:h-8 focus:outline-none"
+    :class="model ? 'bg-green' : 'bg-gray-300'"
+    :disabled="busy || disabled"
+    @click="emit('click', !model)"
+  >
+    <span class="sr-only">Status</span>
+
+    <span v-if="model" class="absolute w-full h-full flex items-center text-xs leading-none justify-start text-white pl-3 md:pl-4">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ onText || 'ON' }}</span>
+    </span>
+    <span v-else class="absolute w-full h-full flex items-center text-xs leading-none justify-end text-gray-500 pr-2.5 md:pr-3.5">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ offText || 'OFF' }}</span>
+    </span>
+
+    <span v-if="model" aria-hidden class="translate-x-9 md:translate-x-12 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+    <span v-else aria-hidden class="translate-x-0 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+  </Switch>
+</template>
diff --git a/src/layout/Slider.vue b/src/layout/Slider.vue
new file mode 100644
index 00000000..68871cb9
--- /dev/null
+++ b/src/layout/Slider.vue
@@ -0,0 +1,60 @@
+<script setup>
+import 'vue-slider-component/theme/antd.css'
+import VueSlider from 'vue-slider-component'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean,
+  formatter: Function,
+  marks: Object,
+  max: Number,
+  min: Number,
+  title: String,
+  tooltip: String
+})
+
+const emit = defineEmits(['change'])
+
+const model = defineModel()
+</script>
+
+<template>
+  <div class="slider__container" :class="{ disabled }">
+    <span v-if="title" class="slider__title">{{ title }}</span>
+    <vue-slider
+      v-model="model"
+      adsorb
+      tooltipPlacement="top"
+      width="100%"
+      :contained="true"
+      :disabled="disabled"
+      :dot-style="{ background: '#4ecd5f', boxShadow: '0 0 2px 1px #eee', border: 'none' }"
+      :dotSize="20"
+      :label-style="{ color: '#999', fontSize: '12px' }"
+      :marks="marks"
+      :max="max"
+      :min="min"
+      :process-style="{ background: '#4ecd5f' }"
+      :step-active-style="{ background: '#fff', opacity: '1', border: 'none', boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px' }"
+      :tooltip="tooltip || 'hover'"
+      :tooltip-formatter="formatter"
+      :tooltip-style="{ background: '#4ecd5f', borderColor: '#4ecd5f' }"
+      @change="val => emit('change', val)"
+    />
+  </div>
+</template>
+
+<style>
+.slider__container {
+  @apply relative flex space-x-3 items-start justify-center pr-5 pl-2 pt-14 pb-8 border border-gray-300 rounded-md;
+}
+
+.slider__container.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.slider__title {
+  @apply absolute top-0 inline-block px-3 text-gray-500 transform -translate-y-1/2 bg-white;
+}
+
+</style>
diff --git a/src/modules/gpu/components/GPUDestroyPanel.vue b/src/modules/gpu/components/GPUDestroyPanel.vue
new file mode 100644
index 00000000..f7761e51
--- /dev/null
+++ b/src/modules/gpu/components/GPUDestroyPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+// import HttpError from '../../../components/HttpError.vue'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Modal from '../../../components/Modal.vue'
+import { defineEmits, defineProps, ref } from 'vue'
+
+const emit = defineEmits(['destroy'])
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  gpu: Object
+})
+
+const showModal = ref(false)
+
+function toggleModal() {
+  showModal.value = !showModal.value
+}
+</script>
+
+<template>
+  <div class="pb-20">
+    <div class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">This is irreversible. All data will be irretrievable.</p>
+      <p class="text-gray-500">Upon destruction, you will no longer be billed for this GPU.</p>
+      <div class="flex flex-col space-y-2">
+        <button
+          class="mt-4 button button--error button--small w-full md:max-w-xs"
+          :disabled="disabled"
+          @click.prevent="toggleModal"
+        >
+          <div v-if="busy" class="flex">
+            <span>Destroying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </div>
+          <span v-else>Destroy this GPU</span>
+        </button>
+
+        <!--<HttpError :error=httpError />-->
+      </div>
+    </div>
+    <!-- destroy confirmation modal -->
+    <Modal v-if="showModal">
+      <template v-slot:icon>
+        <ExclamationIcon class="w-8 h-8" aria-hidden="true" />
+      </template>
+      <template v-slot:header>
+        <span>Destroy {{ gpu.name }}</span>
+      </template>
+      <template v-slot:body>
+        <span class="font-semibold">Warning: this cannot be undone.</span>
+        <div class="flex flex-col space-y-2 pt-4">
+          <li>All data will be lost and cannot be recovered</li>
+          <li>Server will be powered off immediately</li>
+          <li>IP Address will be unassigned</li>
+        </div>
+      </template>
+      <template v-slot:buttons>
+        <button
+          class="w-full mt-3 button button--small button--outline sm:mt-0"
+          @click="toggleModal"
+        >
+          Cancel
+        </button>
+        <button
+          class="w-full button button--small button--error"
+          @click="emit('destroy')"
+        >
+          Yes, Destroy GPU
+        </button>
+      </template>
+    </Modal>
+  </div>
+</template>
diff --git a/src/modules/gpu/components/GPUOverviewPanel.vue b/src/modules/gpu/components/GPUOverviewPanel.vue
new file mode 100644
index 00000000..d776129b
--- /dev/null
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '../../../components/StatusDot.vue'
+import { defineProps, ref } from 'vue'
+
+defineProps({
+  gpu: Object
+})
+
+const copied = ref(false)
+
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <div class="box overflow_hidden gpu-details xl:col-span-2">
+      <h4 class="section__title">Details</h4>
+      <div class="overview__grid">
+        <!-- Name, hostname, IP address -->
+        <div class="grid__col col__1">
+          <div class="info__section">
+            <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">IP Address</span>
+            <div class="relative flex w-max">
+              <span>{{ gpu.ipAddress }}</span>
+              <button
+                @click.prevent="copyToClipboard(gpu.ipAddress)"
+                class="text-gray-400 hover:text-green"
+              >
+                <DuplicateIcon class="ml-2 w-5 h-5" />
+              </button>
+              <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+            </div>
+          </div>
+        </div>
+        <div class="grid__col col__2">
+          <div class="info__section">
+            <span class="label">Status</span>
+            <span class="info">
+              <StatusDot
+                :isActive="gpu.status === 'active'"
+                :isInactive="gpu.status !== 'active'"
+                :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+              />
+            </span>
+          </div>
+          <div class="info__section">
+            <span class="label">Created</span>
+            <span class="info">{{ gpu.created }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="box overflow_hidden gpu-specs">
+      <h4 class="section__title">GPU specs</h4>
+      <!-- vcpus, ram, disk, bandwidth -->
+      <div class="overview__grid">
+        <div class="info__section col-span-2 lg:col-span-4">
+          <span class="label">GPU Model</span>
+          <span class="info">{{ gpu.gpuModel }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">GPU</span>
+          <span class="info">{{ gpu.gpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">vCPUs</span>
+          <span class="info">{{ gpu.cpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">RAM</span>
+          <span class="info">{{ gpu.memoryGiB }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Disk</span>
+          <span class="info">{{ gpu.diskGiB }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.gpu-details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-row;
+  }
+
+  .gpu-specs .overview__grid, .gpu-costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .gpu-specs .label, .gpu-costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .gpu-specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .gpu-specs .label {
+    @apply w-max;
+  }
+  .gpu-costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .gpu-details .overview__grid {
+    @apply grid-cols-2
+  }
+  .gpu-specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .gpu-specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
new file mode 100644
index 00000000..0975d722
--- /dev/null
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -0,0 +1,132 @@
+<script setup>
+/* global process */
+
+import superagent from 'superagent'
+import { useStore } from 'vuex'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
+
+const model = defineModel()
+const store = useStore()
+
+defineProps({
+  disabled: Boolean
+})
+
+const error = ref()
+const gpus = ref([])
+const loading = ref(true)
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/gpu-models`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+
+// const gpus = [
+//   {
+//     _key: 'a100',
+//     cudoId: 'nvidia-a100-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'A100 PCI-E',
+//     memoryGib: 80
+//   },
+//   {
+//     _key: 'h100',
+//     cudoId: 'nvidia-h100-nvl-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'H100 NVL PCI-E',
+//     memoryGib: 96
+//   }
+// ]
+</script>
+
+<template>
+  <RadioGroup v-model="model">
+    <RadioGroupLabel class="sr-only">GPU Model</RadioGroupLabel>
+
+    <div class="box__grid">
+      <RadioGroupOption
+        v-for="gpu in gpus"
+        v-slot="{ active, checked, disabled }"
+        as="template"
+        :disabled="disabled"
+        :key="gpu.id"
+        :value="gpu.id"
+      >
+        <div
+          :class="{ active, checked, disabled }"
+          class="radioOption"
+        >
+          <div class="flex flex-col items-center w-full">
+            <RadioGroupLabel
+              as="div"
+              class="optionTitle"
+              :class="{ active, checked, disabled }"
+            >
+              <h4 class="capitalize">{{ gpu.modelName }}</h4>
+            </RadioGroupLabel>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+<style scoped>
+  .box__grid {
+    @apply mt-6 w-full grid grid-cols-1 gap-4;
+    @apply sm:grid-cols-1 lg:grid-cols-3;
+  }
+
+  /* radio option */
+  .radioOption {
+    @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+    @apply hover:bg-gray-100 hover:bg-opacity-50;
+    @apply focus:outline-none;
+  }
+  .radioOption.active {
+    @apply border-green border-opacity-40;
+  }
+  .radioOption.checked {
+    @apply bg-gray-100 border-green bg-opacity-75;
+    @apply ring-4 ring-green ring-opacity-10;
+  }
+  .radioOption.disabled {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  /* option title */
+  .optionTitle {
+    @apply text-center w-full;
+  }
+  .optionTitle.active {
+
+  }
+  .optionTitle.checked {
+
+  }
+
+  /* option specs */
+  .optionSpecs {
+    @apply flex flex-col items-center w-full mt-4 text-sm text-gray-500;
+  }
+</style>
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
new file mode 100644
index 00000000..3573f5c0
--- /dev/null
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -0,0 +1,210 @@
+<script setup>
+/* global process */
+
+import ErrorV2 from '../../../layout/ErrorV2.vue'
+import GPUSelect from '../components/GPUSelect.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Password from '../../../components/server/deploy/Password.vue'
+import Slider from '../../../layout/Slider.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import { serverNameChars } from '../../../utils/validation'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
+
+const router = useRouter()
+const store = useStore()
+
+const formState = reactive({
+  name: '',
+  hostname: '',
+  gpuModel: '',
+  gpuCount: 1,
+  cpuCount: 1,
+  memoryGiB: 2,
+  diskGiB: 10,
+  password: ''
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3)],
+  hostname: [required, minLength(3), serverNameChars],
+  gpuModel: [required],
+  gpuCount: [minValue(1), maxValue(8)],
+  cpuCount: [minValue(1), maxValue(32)],
+  memoryGiB: [minValue(2), maxValue(32)],
+  diskGiB: [minValue(10), maxValue(200)],
+  password: [required, minLength(8)]
+}, formState)
+
+const busy = ref(false)
+const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+const error = ref()
+
+function setPassword(value) {
+  v$.value.password.$model = value
+}
+
+async function submit() {
+  if (!store.state.session || !store.state.session._key) return
+
+  const data = {
+    name: v$.value.name.$model,
+    hostname: v$.value.hostname.$model,
+    gpuModel: v$.value.gpuModel.$model,
+    gpuCount: v$.value.gpuCount.$model,
+    cpuCount: v$.value.cpuCount.$model,
+    memoryGiB: v$.value.memoryGiB.$model,
+    diskGiB: v$.value.diskGiB.$model,
+    password: v$.value.password.$model
+  }
+
+  try {
+    busy.value = true
+    error.value = undefined
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+      .send(data)
+
+    router.push({ name: 'GPU', params: { id: res.body.id } })
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <h1>Deploy a new Edge GPU</h1>
+
+    <form class="flex flex-col col-span-12 pb-20 space-y-4" @submit.prevent="submit">
+      <div class="box">
+        <h4>Select GPU</h4>
+        <GPUSelect v-model="v$.gpuModel.$model" />
+        <ValidationError :errors="v$.gpuModel.$errors" />
+      </div>
+
+      <div class="box">
+        <h4>Specs</h4>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <Slider
+              v-model="v$.gpuCount.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8]"
+              :max="8"
+              :min="1"
+              title="GPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.gpuCount.$errors" />
+          </div>
+
+          <div>
+            <Slider
+              v-model="v$.cpuCount.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8,12,16,24,32]"
+              :max="32"
+              :min="1"
+              title="vCPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.cpuCount.$errors" />
+          </div>
+
+          <div>
+            <Slider
+              v-model="v$.memoryGiB.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[2,4,8,12,16,24,32]"
+              :max="32"
+              :min="2"
+              title="RAM (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.memoryGiB.$errors" />
+          </div>
+
+          <div>
+            <Slider
+              v-model="v$.diskGiB.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[10,20,50,100,200]"
+              :max="200"
+              :min="10"
+              title="Disk (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.diskGiB.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <!-- Name -->
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Name</label>
+            <input
+              v-model="v$.name.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Name of your server e.g. My Edge GPU"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.name.$errors" />
+          </div>
+
+          <!-- Hostname -->
+          <div class="input-group">
+            <label class="label">Hostname</label>
+            <input
+              v-model="v$.hostname.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Hostname of your server e.g. my-gpu.example.com"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.hostname.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <Password :disableControls="busy" @password-changed="setPassword" />
+        <ValidationError :errors="v$.password.$errors" />
+      </div>
+
+      <div class="flex flex-col w-full space-y-2 items-end">
+        <ErrorV2 :error="error" />
+
+        <button
+          :disabled="!canDeploy"
+          class="button button--success self-end w-full md:max-w-xs"
+          type="submit"
+        >
+          <span v-if="busy" class="flex">
+            <span>Deploying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </span>
+          <span v-else>Deploy</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
new file mode 100644
index 00000000..80035990
--- /dev/null
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -0,0 +1,440 @@
+<script setup>
+/* global process */
+
+import { ArrowLeftIcon } from '@heroicons/vue/outline'
+import EditableTitle from '../../../layout/EditableTitle.vue'
+import GPUDestroyPanel from '../components/GPUDestroyPanel.vue'
+import GPUOverviewPanel from '../components/GPUOverviewPanel.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import PowerToggle from '../../../layout/PowerToggle.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import superagent from 'superagent'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+import { computed, effect, reactive, ref } from 'vue'
+import { helpers, minLength, required } from '@vuelidate/validators'
+
+const route = useRoute()
+const store = useStore()
+
+const busy = ref(false)
+const destroying = ref(false)
+const disabled = ref(false)
+const error = ref()
+const gpu = ref()
+const loading = ref(true)
+const poll = ref()
+
+const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
+
+const formState = reactive({
+  name: '',
+  active: true
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3), helpers.withMessage('Currently unable to change GPU name. This feature is coming soon', () => false)],
+  active: []
+}, formState)
+
+async function destroy() {
+  try {
+    destroying.value = true
+    error.value = undefined
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    startPoll(['deleted'])
+  }
+  catch (err) {
+    error.value = err
+    destroying.value = false
+  }
+}
+
+async function reload() {
+  if (!route.params.id || !store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpu.value = res.body
+    reset()
+  }
+  catch (err) {
+    // Workaround for deletion
+    if (destroying.value && gpu.value && err.status === 404) {
+      gpu.value.status = 'deleted'
+    }
+    else {
+      error.value = err
+    }
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function reset() {
+  v$.value.name.$model = gpu.value.name
+  v$.value.active.$model = gpu.value.status === 'active'
+
+  v$.value.$reset()
+}
+
+function stopPoll() {
+  if (poll.value) {
+    clearInterval(poll.value)
+    poll.value = undefined
+    busy.value = false
+  }
+}
+
+function startPoll(stopOnStatus) {
+  if (poll.value) return
+  busy.value = true
+
+  poll.value = setInterval(() => {
+    reload().then(() => {
+      if (stopOnStatus.includes(gpu.value.status)) {
+        stopPoll()
+        busy.value = false
+      }
+    })
+  }, 5000)
+}
+
+async function togglePower(toActive) {
+  if (!gpu.value) return
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    if (toActive) {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+    else {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/stop/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+
+    startPoll(['active', 'deleted', 'stopped'])
+  }
+  catch (err) {
+    error.value = err
+  }
+}
+
+/** @todo */
+async function updateName() {
+  console.log(v$.value.name.$model)
+}
+
+effect(() => {
+  reload().then(() => {
+    if (!['active', 'deleted', 'stopped'].includes(gpu.value.status)) {
+      startPoll(['active', 'deleted', 'stopped'])
+    }
+  })
+
+  return () => {
+    stopPoll()
+  }
+})
+</script>
+
+<template>
+  <div v-if="destroying || destroyed" class="mainContent__inner pt-0 mt-6">
+    <div v-if="destroyed" class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">Your GPU and backups have been successfully deleted.</p>
+      <router-link
+        class="button button--success button--small w-full md:max-w-xs"
+        :to="{ name: 'GPUs' }"
+      >
+      <span>Return to GPUs</span>
+      </router-link>
+    </div>
+    <div v-else class="box">
+      <h4>Destroy GPU</h4>
+      <div class="flex">
+        <span>Destroying {{ gpu && gpu.name }}</span>
+        <span class="ml-2"><LoadingSpinner /></span>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
+    <div class="flex items-center">
+      <span>Loading GPU</span>
+      <LoadingSpinner />
+    </div>
+  </div>
+
+  <div v-else-if="error" class="mainContent__inner pt-0 mt-6">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>Error</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">{{ error.message }}</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="gpu" class="mainContent__inner pt-0 mt-6">
+    <!-- Backlink -->
+    <div class="w-max">
+      <router-link :to="{ name: 'GPUs' }" class="flex items-center space-x-1 hover:text-green mb-4">
+        <ArrowLeftIcon class="w-4" /><span>GPUs</span>
+      </router-link>
+    </div>
+
+    <!-- Name -->
+    <EditableTitle
+      v-model="v$.name.$model"
+      :busy="busy || loading"
+      :disabled="busy || disabled"
+      :invalid="v$.name.$invalid"
+      @cancel="v$.name.$reset()"
+      @save="updateName"
+    />
+    <ValidationError :errors="v$.name.$errors" />
+
+    <!-- IP address and hostname -->
+    <div
+      class="flex items-center mt-1 text-gray-500 truncate collapse sub-header"
+      :class="gpu.ipAddress ? 'space-x-2' : ''"
+    >
+      <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+      <span v-if="gpu.ipAddress" class="divider"/>
+      <span class="truncate">{{ gpu.hostname }}</span>
+    </div>
+
+    <!-- Overview and power toggle -->
+    <div class="flex items-center mt-3 space-x-3 text-gray-500 md:justify-between sm:mt-4 collapse status-row">
+      <div class="relative flex-1">
+        <div class="flex items-center justify-start space-x-2 collapse gpu-info">
+          <div class="flex items-center flex-shrink-0 space-x-1 text-gray-900">
+            <span class="gpu-detail">{{ gpu.gpuModel }}</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-2 flex-shrink-0 specs">
+            <span class="gpu-detail">{{ gpu.gpuCount }} GPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.cpuCount }} vCPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.diskGiB }} Disk</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.memoryGiB }} RAM</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-1">
+            <StatusDot
+              :isActive="gpu.status === 'active'"
+              :isInactive="gpu.status !== 'active'"
+              :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-shrink-0">
+        <PowerToggle v-model="v$.active.$model" :busy="busy" @click="togglePower" />
+      </div>
+    </div>
+
+    <div class="mt-4 space-x-10">
+      <!-- Tabs -->
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Overview -->
+          <TabPanel>
+            <GPUOverviewPanel :gpu="gpu" />
+          </TabPanel>
+
+          <!-- Destroy -->
+          <TabPanel>
+            <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  </div>
+
+  <div v-else class="mainContent__inner pt-0 mt-6">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>GPU not found</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">This GPU does not exist or has been destroyed.</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.divider {
+  @apply h-4 bg-gray-400 w-px flex-shrink-0;
+}
+
+@media (max-width: 450px) {
+  .collapse.sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+  .collapse .specs {
+    @apply flex-col items-start space-x-0
+  }
+  .collapse .specs .divider {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 450px) and (max-width: 650px) {
+  .collapse .specs .divider {
+    @apply block
+  }
+  .collapse.sub-header .divider {
+    @apply block
+  }
+}
+
+@media (max-width: 650px) {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse .sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+}
+
+@screen md {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse.gpu-info .divider {
+    @apply hidden;
+  }
+  .collapse .specs .divider {
+    @apply block
+  }
+}
+
+@screen lg {
+  .collapse.gpu-info {
+    @apply flex-row items-center space-x-2 space-y-0;
+  }
+  .collapse.gpu-info .divider {
+    @apply block;
+  }
+}
+
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.server__details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .server__details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .server__details .info__section {
+    @apply flex-row;
+  }
+
+  .server__specs .overview__grid, .server__costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .server__specs .label, .server__costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .server__specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .server__specs .label {
+    @apply w-max;
+  }
+  .server__costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .server__details .overview__grid {
+    @apply grid-cols-2
+  }
+  .server__specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .server__specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
new file mode 100644
index 00000000..11b10c9f
--- /dev/null
+++ b/src/modules/gpu/views/GPUList.vue
@@ -0,0 +1,154 @@
+<script setup>
+/* global process */
+
+// import ListSortingMenu from '../../../components/ListSortingMenu.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Pagination from '../../../components/Pagination.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const router = useRouter()
+const store = useStore()
+
+const currentPage = 1
+const error = ref()
+const gpus = ref([])
+const limit = 20
+const loading = ref(true)
+const totalCount = 0
+
+// const sortFields = [
+//   { label: 'Name', param: 'name' },
+//   { label: 'Created', param: 'created' }
+// ]
+
+function changePage(e) {
+  console.log(e)
+}
+
+async function reload() {
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body.vms
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge GPUs</h1>
+      <router-link
+        v-if="gpus.length"
+        :to="{ name: 'Deploy GPU' }"
+        class="button button--success button--small h-full mb-5 sm:mb-0"
+      >
+        Deploy GPU
+      </router-link>
+    </div>
+
+    <div v-if="loading" class="flex items-center">
+      <span>Loading GPUs</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+
+    <div v-else-if="gpus.length">
+      <!--
+      <div class="float-right mb-2">
+        <ListSortingMenu
+          :fields="sortFields"
+          :query="sortQuery"
+          @update-sort="updateSortQuery"
+        />
+      </div>
+      -->
+      <ul role="list" class="space-y-2">
+        <li
+          v-for="gpu in gpus"
+          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
+          :class="{ 'border-green': gpu.status === 'active', 'border-red': gpu.status !== 'active' }"
+          :key="gpu.id"
+          @click="router.push({ name: 'GPU', params: { id: gpu.id }})"
+        >
+          <!-- Basic details -->
+          <div class="flex flex-col details overflow-hidden">
+            <!-- Name -->
+            <span class="text-md text-gray-500 truncate">{{ gpu.name }}</span>
+            <!-- IP address / hostname -->
+            <div class="flex flex-row space-x-1 text-m">
+              <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+              <span v-if="gpu.ipAddress" class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <div class="truncate" :data="gpu.hostname">{{ gpu.hostname }}</div>
+            </div>
+          </div>
+
+          <!-- Specs -->
+          <div class="flex flex-col lg:flex-shrink-0" style="flex-basis: 320px">
+            <!-- GPU model -->
+            <div class="text-md mr-2 sm:mr-0">
+              <span>{{ gpu.gpuModel }}</span>
+            </div>
+            <!-- specs -->
+            <div class="flex flex-col space-x-0 sm:flex-row sm:space-x-1.5 text-m">
+              <span>{{ gpu.gpuCount }} GPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.cpuCount }} vCPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.diskGiB }} Disk</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.memoryGiB }} RAM</span>
+            </div>
+          </div>
+
+          <!-- Created -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Created</span>
+            <span class="text-m">{{ gpu.created }}</span>
+          </div>
+
+          <!-- status dot -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Status</span>
+            <StatusDot :isActive="gpu.status === 'active'" :isInactive="gpu.status !== 'active'" small :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'" />
+          </div>
+        </li>
+      </ul>
+      <Pagination
+        :currentPage="currentPage"
+        :limit="limit"
+        :totalCount="totalCount"
+        @change-page="changePage"
+      />
+    </div>
+
+    <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>You haven't deployed any GPUs yet. Once you deploy your first GPU it will be available here.</p>
+        <router-link
+          :to="{ name: 'Deploy GPU' }"
+          class="button button--success button--small"
+        >
+          Deploy GPU
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/settings/components/APIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
new file mode 100644
index 00000000..660fedee
--- /dev/null
+++ b/src/modules/settings/components/APIKeysPanel.vue
@@ -0,0 +1,175 @@
+<script setup>
+/* global process */
+
+import ErrorV2 from '../../../layout/ErrorV2.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import superagent from 'superagent'
+import { useStore } from 'vuex'
+import { DuplicateIcon, TrashIcon } from '@heroicons/vue/solid'
+import { effect, ref } from 'vue'
+
+const store = useStore()
+
+const busy = ref(false)
+const copied = ref(false)
+const error = ref()
+const generatedKey = ref()
+const loading = ref(true)
+const keys = ref([])
+
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
+async function deleteKey(id) {
+  try {
+    busy.value = true
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys/${id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    return reload()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+function hideGeneratedKey() {
+  generatedKey.value = undefined
+}
+
+async function generate() {
+  try {
+    busy.value = true
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    generatedKey.value = res.body
+
+    return reload()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    keys.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div>
+    <ErrorV2 class="mb-2 text-center w-full" :error="error" />
+
+    <div v-if="loading" class="box flex pb-20">
+      <span class="mr-2">Loading</span>
+      <LoadingSpinner />
+    </div>
+
+    <div v-if="keys.length" class="pb-20">
+      <ul class="space-y-2">
+        <li
+          v-for="key in keys"
+          class="flex flex-col lg:grid keys-grid gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
+          :key="key.id"
+        >
+          <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
+          <div class="flex flex-col">
+            <span class="text-md text-gray-500">Created</span>
+            <span class="text-sm text-gray-500">{{ key.created }}</span>
+          </div>
+          <div class="flex flex-col items-end">
+            <button class="button button--error" @click.prevent="deleteKey(key.id)">
+              <TrashIcon class="w-4" />
+              <span>Delete</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+
+      <div v-if="generatedKey" class="box flex flex-col mt-4">
+        <h4>Your new API key</h4>
+        <div class="mb-2">
+          <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
+          <button
+            class="text-gray-400 hover:text-green"
+            @click.prevent="copyToClipboard(generatedKey.secret)"
+          >
+            <DuplicateIcon class="ml-2 w-5 h-5" />
+          </button>
+        </div>
+        <p>
+          Copy this API key to a safe place.
+          This key's ID is {{ generatedKey.id }}.
+        </p>
+        <button @click="hideGeneratedKey" class="button button--success">
+          <span>I confirm have stored my API key in a safe place</span>
+        </button>
+      </div>
+
+      <div class="flex flex-col w-full mt-4 space-y-2">
+        <button
+          :disabled="busy"
+          class="button button--success self-end w-full md:max-w-xs"
+          @click="generate"
+        >
+          Generate API Key
+        </button>
+      </div>
+    </div>
+
+    <div v-else class="pb-20">
+      <div class="box box-flex">
+        <div class="flex flex-col items-center justify-center py-4">
+          <p>You haven't created any API keys yet.</p>
+          <button
+            :disabled="busy"
+            class="button button--success w-full md:max-w-xs"
+            @click="generate"
+          >
+            Generate API Key
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.keys-grid {
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</style>
diff --git a/src/modules/settings/components/AccountPanel.vue b/src/modules/settings/components/AccountPanel.vue
new file mode 100644
index 00000000..3008d894
--- /dev/null
+++ b/src/modules/settings/components/AccountPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+import * as format from '@/utils/format'
+import AddAccountEmail from '../../../components/account/AddAccountEmail.vue'
+import Disable2FA from '../../../components/account/Disable2FA.vue'
+import Enable2FA from '../../../components/account/Enable2FA.vue'
+import ManageAccountEmail from '../../../components/account/ManageAccountEmail.vue'
+import { useStore } from 'vuex'
+import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
+import { computed, ref } from 'vue'
+
+const store = useStore()
+
+const showAccountNumber = ref(false)
+const showAddTwoFactor = ref(false)
+
+const accountNumber = computed(() => {
+  if (showAccountNumber.value) return format.accountNumber(store.state.account._key)
+  return format.accountNumberMasked(store.state.account._key)
+})
+
+const hasEmail = computed(() => Boolean(store.state.account && store.state.account.email && store.state.account.email.address))
+const hasTwoFactor = computed(() => Boolean(store.state.account && store.state.account.totps))
+
+function toggleShowAccountNumber() {
+  showAccountNumber.value = !showAccountNumber.value
+}
+
+function toggleShowAddTwoFactor() {
+  showAddTwoFactor.value = !showAddTwoFactor.value
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="box">
+      <div>
+        <h4>Account Number</h4>
+        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
+      </div>
+      <!-- account number display -->
+      <div class="flex items-center justify-between relative w-max max-w-full">
+        <span class="text-3xl pr-4 monospace" :class="{ 'text-gray': !showAccountNumber, 'text-green': showAccountNumber }">{{ accountNumber }}</span>
+        <!-- hide/show account number button button -->
+        <button
+          @click.prevent="toggleShowAccountNumber"
+          class="ml-2 text-gray-400 hover:text-green"
+        >
+          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
+          <EyeOffIcon v-else class="ml-2 w-5 h-5" />
+        </button>
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Account Email</h4>
+      <div>
+        <ManageAccountEmail v-if="hasEmail" />
+        <AddAccountEmail v-else />
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Two-factor Authentication (2FA)</h4>
+      <div>
+        <Disable2FA v-if="hasTwoFactor && !showAddTwoFactor && !backupCodes" />
+        <Enable2FA v-else @enable2FA="toggleShowAddTwoFactor" />
+        <button
+          v-if="hasTwoFactor && !backupCodes"
+          @click="toggleShowAddTwoFactor"
+          class="mt-2 underline text-gray-500 hover:text-green"
+        >
+          {{ showAddTwoFactor ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/settings/components/CryptoPaymentsPanel.vue b/src/modules/settings/components/CryptoPaymentsPanel.vue
new file mode 100644
index 00000000..f3e9eed5
--- /dev/null
+++ b/src/modules/settings/components/CryptoPaymentsPanel.vue
@@ -0,0 +1,32 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+async function toggleCryptoView() {
+  if (!store.state.account) return
+
+  await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+    account: store.state.account._key,
+    useCryptoView: !store.state.account.useCryptoView
+  })
+
+  store.dispatch('updateAccount')
+}
+</script>
+
+<template>
+  <div class="box">
+    <h4>Crypto Payments</h4>
+    <p class="text-gray-500">
+      Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
+      By default payment information in the account interface is presented in fiat.
+      If you would prefer to see payment information in crypto, you can enable it here.
+    </p>
+    <button v-if="store.state.account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
+    <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
+  </div>
+</template>
diff --git a/src/modules/settings/views/SettingsView.vue b/src/modules/settings/views/SettingsView.vue
new file mode 100644
index 00000000..6a518f6a
--- /dev/null
+++ b/src/modules/settings/views/SettingsView.vue
@@ -0,0 +1,48 @@
+<script setup>
+import APIKeysPanel from '../components/APIKeysPanel.vue'
+import AccountPanel from '../components/AccountPanel.vue'
+import CryptoPaymentsPanel from '../components/CryptoPaymentsPanel.vue'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+
+</script>
+
+<template>
+  <div class="mainContent__inner space-y-4">
+    <h1>Settings</h1>
+
+    <div class="mt-4 space-x-10">
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Account</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Crypto Payments</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Account -->
+          <TabPanel>
+            <AccountPanel />
+          </TabPanel>
+
+          <!-- API Keys -->
+          <TabPanel>
+            <APIKeysPanel />
+          </TabPanel>
+
+          <!-- Crypto Payments -->
+          <TabPanel>
+            <CryptoPaymentsPanel />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/vpns/components/MultiuserToggle.vue b/src/modules/vpns/components/MultiuserToggle.vue
new file mode 100644
index 00000000..a0296bc6
--- /dev/null
+++ b/src/modules/vpns/components/MultiuserToggle.vue
@@ -0,0 +1,105 @@
+<script setup>
+import CheckIcon from '../../../components/icons/CheckIcon.vue'
+import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean,
+  singleUserDisabled: Boolean,
+  multiuserDisabled: Boolean
+})
+
+const model = defineModel()
+</script>
+
+<template>
+  <!-- Single/multi-user -->
+  <RadioGroup v-model="model">
+    <div class="box__grid mb-8">
+      <RadioGroupOption as="template" :value="false" :disabled="disabled || singleUserDisabled" v-slot="{ active, checked, disabled }">
+        <div :class="{ radioOption: true, active, checked, disabled }">
+          <div :class="{ checkmark: true, active, checked }">
+            <CheckIcon class="checkmark__icon" />
+          </div>
+          <div class="optionDetails">
+            <RadioGroupLabel as="h4" class="optionDetails__name">
+              Single-user VPN
+            </RadioGroupLabel>
+            <RadioGroupDescription as="span" class="optionDetails__description">
+              <span>Ideal for individual use.</span>
+            </RadioGroupDescription>
+          </div>
+        </div>
+      </RadioGroupOption>
+
+      <RadioGroupOption as="template" :value="true" :disabled="disabled || multiuserDisabled" v-slot="{ active, checked, disabled }">
+        <div :class="{ radioOption: true, active, checked, disabled }">
+          <div :class="{ checkmark: true, active, checked }">
+            <CheckIcon class="checkmark__icon" />
+          </div>
+          <div class="optionDetails">
+            <RadioGroupLabel as="h4" class="optionDetails__name">
+              Multi-user VPN
+            </RadioGroupLabel>
+            <RadioGroupDescription as="span" class="optionDetails__description">
+              <span>Multi-user VPN includes up to five users. You can pay for additional users.</span>
+            </RadioGroupDescription>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+
+<style scoped>
+.box__grid {
+  @apply mt-6 w-full grid grid-cols-1 gap-4;
+  @apply sm:grid-cols-2 lg:grid-cols-2;
+}
+
+/* radio option */
+.radioOption {
+  @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 hover:bg-opacity-50;
+  @apply focus:outline-none;
+}
+.radioOption.active {
+  @apply border-green border-opacity-40;
+}
+.radioOption.checked {
+  @apply bg-gray-100 border-green bg-opacity-75;
+  @apply ring-4 ring-green ring-opacity-10;
+}
+.radioOption.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* radio option details */
+.optionDetails {
+  @apply flex flex-col flex-1 text-sm;
+}
+.optionDetails__city {
+  @apply text-sm text-gray-500;
+}
+
+/* checkmark */
+.checkmark {
+  @apply flex items-center justify-center text-white flex-shrink-0 rounded-full w-5 h-5 bg-gray-100 border border-gray-300;
+}
+.checkmark.active {
+  @apply border-green border-opacity-40 bg-opacity-20;
+}
+.checkmark.checked {
+  @apply border-green bg-green;
+}
+.checkmark .checkmark__icon {
+  @apply opacity-0 w-3 h-3;
+}
+.checkmark.active .checkmark__icon {
+  @apply opacity-40;
+}
+.checkmark.checked .checkmark__icon {
+  @apply opacity-100;
+}
+</style>
diff --git a/src/modules/vpns/components/SpeedSlider.vue b/src/modules/vpns/components/SpeedSlider.vue
new file mode 100644
index 00000000..5ee4cc97
--- /dev/null
+++ b/src/modules/vpns/components/SpeedSlider.vue
@@ -0,0 +1,50 @@
+<script setup>
+import Slider from '../../../layout/Slider.vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
+
+defineProps({
+  disabled: Boolean
+})
+
+const model = defineModel()
+const ready = ref(false)
+
+const rawMarks = [
+  ['fast', 'Fast'],
+  ['faster', 'Faster'],
+  ['fastest', 'Fastest']
+]
+
+const marks = rawMarks.reduce((ms, m, i) => {
+  ms[i] = m[1]
+  return ms
+}, {})
+
+function formatter(i) {
+  return rawMarks[i][1]
+}
+
+function setSpeed(i) {
+  model.value = rawMarks[i][0]
+}
+
+effect(() => {
+  if (!ready.value) {
+    /** WIP */
+    ready.value = true
+  }
+})
+</script>
+
+<template>
+  <Slider
+    :disabled="disabled"
+    :formatter="formatter"
+    :marks="marks"
+    :max="2"
+    :min="0"
+    title="Speed"
+    tooltip="always"
+    @change="setSpeed"
+  />
+</template>
diff --git a/src/modules/vpns/components/VPNOverview.vue b/src/modules/vpns/components/VPNOverview.vue
new file mode 100644
index 00000000..6145d5f4
--- /dev/null
+++ b/src/modules/vpns/components/VPNOverview.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <div class="box overflow_hidden vpn__details xl:col-span-2">
+      <h4 class="section__title">VPN details</h4>
+      <div class="overview__grid">
+        <!-- name, hostname, ip, region -->
+        <div class="grid__col col__1">
+          <div class="info__section">
+            <span class="label">VPN Name</span><span class="info">{{ vpn.name }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Hostname</span><span class="info">{{ server.settings.domain }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">IP Address</span>
+            <div class="relative flex w-max">
+              <span class="">{{ server.network.ip[0] }}</span>
+              <button
+                @click.prevent="copyToClipboard(server.network.ip[0])"
+                class="text-gray-400 hover:text-green"
+              >
+                <DuplicateIcon class="ml-2 w-5 h-5" />
+              </button>
+              <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+            </div>
+          </div>
+          <div class="info__section">
+            <span class="label">Region</span>
+            <span class="info">{{ region ? region.name : 'Unknown' }}</span>
+          </div>
+        </div>
+        <!-- status, os, created, updated -->
+        <div class="grid__col col__2">
+          <div class="info__section">
+            <span class="label">Status</span><span class="info">
+              <StatusDot
+                :isActive=isActive
+                :isInactive=isInactive
+                :statusText=statusText
+              />
+            </span>
+          </div>
+          <div class="info__section">
+            <span class="label">OS</span><span class="info">{{ server.settings.os.version }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Created</span><span class="info">{{ created }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Last Updated</span><span class="info">{{ updated }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="box overflow_hidden vpn__specs">
+      <h4 class="section__title">VPN specs</h4>
+      <div class="overview__grid">
+        <div class="info__section">
+          <span class="label">Type</span>
+          <span v-if="vpn.multiuser" class="info">Multiuser</span>
+          <span v-else class="info">Single-user</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Speed</span>
+          <span v-if="vpn.speed === 'fastest'" class="info">Fastest</span>
+          <span v-else-if="vpn.speed === 'faster'" class="info">Faster</span>
+          <span v-if="vpn.speed === 'fast'" class="info">Fast</span>
+        </div>
+      </div>
+    </div>
+    <div class="box overflow_hidden vpn__costs">
+      <h4 class="section__title">Cost</h4>
+      <!-- hourly and daily costs -->
+      <div class="overview__grid">
+        <div class="info__section">
+          <span class="label">Hourly</span><span class="info">${{ formattedHourlyCost }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Daily</span><span class="info">${{ formattedDailyCost }}</span>
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+import * as format from '@/utils/format'
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '@/components/StatusDot'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'VPNOverview',
+  props: ['region', 'server', 'vpn'],
+  components: {
+    DuplicateIcon,
+    StatusDot
+  },
+  data() {
+    return {
+      copied: false
+    }
+  },
+  computed: {
+    ...mapState(['config']),
+    activeTasks() {
+      if (this.server) return this.$store.getters.tasksByServerId(this.server._key)
+      return []
+    },
+    created() {
+      return this.formatTimestamp(this.server.created)
+    },
+    disablingTaskInProgress() {
+      return this.isStopping || this.isStarting || this.isResizing || this.isRestoring
+    },
+    formattedDailyCost() {
+      return format.usd(this.hourlyCost * 24, 2)
+    },
+    formattedDisk() {
+      return format.mib(this.server.spec.disk)
+    },
+    formattedHourlyCost() {
+      return format.usd(this.hourlyCost, 4)
+    },
+    formattedRAM() {
+      return format.mib(this.server.spec.ram)
+    },
+    hourlyCost() {
+      if (this.vpn.multiuser) {
+        const chargeableUsers = Math.max(0, this.vpn.users - this.config.vpn.multiuser.usersIncluded)
+        const userCost = this.config.vpn.multiuser.costPerUser * chargeableUsers
+        const periodCost = this.config.vpn.multiuser.cost + userCost
+        const hourlyCost = periodCost / this.config.vpn.multiuser.costBasis
+        return hourlyCost
+      }
+
+      return this.config.vpn.singleuser.cost / this.config.vpn.singleuser.costBasis
+    },
+    isCreating() {
+      return this.activeTasks.some(task => task.action === 'create')
+    },
+    isActive() {
+      return (!this.disablingTaskInProgress) && this.server.status === 'active'
+    },
+    isDestroyed() {
+      return this.server.status === 'deleted' && !this.activeTasks.some(task => task.action === 'destroy')
+    },
+    isDestroying() {
+      return this.activeTasks.some(task => task.action === 'destroy')
+    },
+    isInactive() {
+      return (!this.disablingTaskInProgress) && (['deleted', 'deleting', 'stopped'].includes(this.server.status) || this.isDestroying)
+    },
+    isResizing() {
+      const diskResize = this.activeTasks.some(task => task.action === 'resizeDisk')
+      const resourceResize = this.activeTasks.some(task => task.action === 'resizeResource')
+      return diskResize || resourceResize
+    },
+    isRestoring() {
+      return this.activeTasks.some(task => task.action === 'restoreBackup')
+    },
+    isStarting() {
+      return this.activeTasks.some(task => task.action === 'start')
+    },
+    isStopping() {
+      return this.activeTasks.some(task => task.action === 'stop')
+    },
+    statusText() {
+      if (this.isStopping) return 'Stopping'
+      if (this.isDestroying) return 'Deleting'
+      if (this.isResizing) return 'Resizing'
+      if (this.isRestoring) return 'Restoring'
+      if (this.isStarting) return 'Starting'
+      return this.server.status
+    },
+    updated() {
+      return this.formatTimestamp(this.server.updatedByUser || this.server.created)
+    }
+  },
+  methods: {
+    async copyToClipboard(str) {
+      await navigator.clipboard.writeText(str)
+      this.copied = true
+
+      setTimeout(() => {
+        this.copied = false
+      }, 1000)
+    },
+    formatTimestamp(ts) {
+      return `${format.date(ts)}, ${format.time(ts)}`
+    }
+  }
+}
+</script>
+<style scoped>
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.vpn__details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .vpn__details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .vpn__details .info__section {
+    @apply flex-row;
+  }
+
+  .vpn__specs .overview__grid, .vpn__costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .vpn__specs .label, .vpn__costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .vpn__specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .vpn__specs .label {
+    @apply w-max;
+  }
+  .vpn__costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .vpn__details .overview__grid {
+    @apply grid-cols-2
+  }
+  .vpn__specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .vpn__specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/vpns/components/VPNSettings.vue b/src/modules/vpns/components/VPNSettings.vue
new file mode 100644
index 00000000..4dd34164
--- /dev/null
+++ b/src/modules/vpns/components/VPNSettings.vue
@@ -0,0 +1,239 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import * as validation from '@/utils/validation'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import HttpError from '../../../components/HttpError.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Modal from '../../../components/Modal.vue'
+import MultiuserToggle from './MultiuserToggle.vue'
+import SpeedSlider from './SpeedSlider.vue'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { computed, defineProps, effect, reactive, ref } from 'vue'
+
+const store = useStore()
+
+const props = defineProps(['vpn'])
+
+const formState = reactive({
+  multiuser: false,
+  speed: 'fast'
+})
+
+const v$ = useVuelidate({
+  multiuser: [],
+  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
+}, formState)
+
+const canSubmit = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+const error = ref(null)
+const isLoading = ref(false)
+const ready = ref(false)
+const showConfirmationModal = ref(false)
+
+const internalServerError = computed(() => {
+  if (error.value && error.value.status === 500) return error.value
+  return null
+})
+
+const overCapacityError = computed(() => {
+  if (error.value && error.value.status === 500) {
+    if (error.value.response && error.value.response.body && error.value.response.body.detail === 'there is no suitable node in cluster') {
+      return new Error(error.value.response.body.detail)
+    }
+  }
+  return null
+})
+
+function calculateHourlyCost(speed, multiuser, users) {
+  const vpnConfig = store.state.config.vpn
+
+  if (multiuser) {
+    const chargeableUsers = Math.max(0, users - vpnConfig.multiuser.usersIncluded)
+    const userCost = vpnConfig.multiuser.costPerUser * chargeableUsers
+    const periodCost = vpnConfig.multiuser.cost + userCost
+    const hourlyCost = periodCost / vpnConfig.multiuser.costBasis
+    return hourlyCost
+  }
+
+  return vpnConfig.singleuser.cost / vpnConfig.singleuser.costBasis
+}
+
+const activeTasks = computed(() => store.getters.tasksByServerId(props.vpn.server))
+
+const costs = computed(() => {
+  const currentHourly = calculateHourlyCost(props.vpn.speed, props.vpn.multiuser, props.vpn.users)
+  const newHourly = calculateHourlyCost(v$.value.speed.$model, v$.value.multiuser.$model, props.vpn.users)
+
+  const current30d = currentHourly * 24 * 30
+  const new30d = newHourly * 24 * 30
+
+  const increased = newHourly > currentHourly
+
+  return {
+    currentHourly,
+    current30d,
+    newHourly,
+    new30d,
+
+    increased
+  }
+})
+
+const resizedInLastHour = computed(() => {
+  const oneHourAgo = Date.now() - 3.6e6
+
+  const recentResizes = activeTasks.value
+    .filter(t => /^resize/.test(t.action) && t.updated > oneHourAgo)
+    .sort((a, b) => b.updated - a.updated)
+
+  if (recentResizes.length > 0) return this.recentResizes[0].updated > oneHourAgo
+  return false
+})
+
+function formatCost(cost) {
+  return (Math.ceil(cost * 1e4) / 1e4).toFixed(4)
+}
+
+function reset() {
+  if (props.vpn) {
+    v$.value.multiuser.$model = props.vpn.multiuser
+    v$.value.speed.$model = props.vpn.speed
+  }
+}
+
+function toggleConfirmationModal() {
+  showConfirmationModal.value = !showConfirmationModal.value
+}
+
+async function updateVPN() {
+  toggleConfirmationModal()
+
+  try {
+    isLoading.value = true
+    error.value = null
+
+    const res = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, props.vpn._key, {
+      vpn: {
+        multiuser: v$.value.multiuser.$model,
+        speed: v$.value.speed.$model
+      }
+    })
+
+    for (const i in res.tasks) {
+      store.commit('addTask', res.tasks[i])
+    }
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+effect(() => {
+  if (!ready.value) {
+    reset()
+    ready.value = true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="box">
+      <h4>VPN Settings</h4>
+
+      <MultiuserToggle v-model="v$.multiuser.$model" :multiuserDisabled="vpn.users > 1" />
+
+      <SpeedSlider v-model="v$.speed.$model" />
+    </div>
+    <!-- balance warning -->
+    <div class="box mt-4 flex space-x-2" v-if="costs.increased && (store.getters.balanceSuspend || store.getters.balanceWarning)">
+        <div><ExclamationIcon class="w-5 text-red" /></div>
+        <span class="text-red">You are unable to increase this VPN's specs while your available balance is below ${{ balance.threshold.warning.usd }}. Please add funds or set up Pay by Credit Card to enable this service.</span>
+    </div>
+    <!-- resize button and errors -->
+    <div class="flex flex-col relative my-4 space-y-2">
+      <button
+        @click="toggleConfirmationModal"
+        :disabled="!canSubmit"
+        class="button button--success md:self-end w-full md:max-w-xs"
+      >
+        <span v-if="isLoading">Updating</span>
+        <span v-else>Update</span>
+        <span v-if="isLoading" class="ml-2">
+          <LoadingSpinner />
+        </span>
+      </button>
+      <div class="flex md:justify-end mt-2">
+        <HttpError :error="error" />
+      </div>
+      <div v-if="overCapacityError" class="vpn__error over-capacity">
+        <span class="font-bold">We're over capacity</span>
+        <span>It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon.</span>
+      </div>
+      <div v-else-if="internalServerError" class="vpn__error">
+        <span class="font-bold">Something went wrong</span>
+        <span>There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists.</span>
+      </div>
+    </div>
+
+    <Modal v-if="showConfirmationModal">
+      <template v-slot:icon>
+        <ExclamationIcon class="w-8 h-8" aria-hidden="true" />
+      </template>
+      <template v-slot:header>
+        <span>Update {{ vpn.name }}</span>
+      </template>
+      <template v-slot:body>
+      <div class="flex flex-col space-y-2">
+        <span class="font-semibold">Warning: VPN will be powered off while updating.</span>
+      </div>
+        <div class="flex flex-col space-y-2 pt-4">
+          <li v-if="resizedInLastHour">Your VPN was updated less than one hour ago. If you continue to update it again, you will be charged a full hour for the previous settings.</li>
+          <li>Cost will {{ costs.increased ? 'increase' : 'decrease' }} from {{ formatCost(costs.current30d) }} to {{ formatCost(costs.new30d) }} per 30 days.</li>
+        </div>
+      </template>
+      <template v-slot:buttons>
+        <button
+          class="w-full mt-3 button button--small button--outline sm:mt-0"
+          @click="toggleConfirmationModal"
+        >
+          Cancel
+        </button>
+        <button
+          class="w-full button button--small button--error"
+          @click="updateVPN"
+        >
+          Yes, Update VPN
+        </button>
+      </template>
+    </Modal>
+    <!-- resize confirmation modal -->
+    <!--<ResizeServerConfirmation
+      v-if=showConfirmationModal
+      @modal-confirm=resizeServer
+      @modal-close=toggleConfirmationModal
+      :currentCost=currentHourlyCost
+      :currentSpec=currentSpec
+      :lastResizeTask="lastResizeTask"
+      :newCost=newHourlyCost
+      :newSpec=newSpec
+      :serverName="vpn.name"
+    />-->
+  </div>
+</template>
+
+<style scoped>
+.vpn__error {
+  @apply flex flex-col bg-red text-white p-4 w-full rounded space-y-1;
+}
+
+.vpn__error.over-capacity {
+  @apply bg-blue-100 text-black;
+}
+</style>
diff --git a/src/modules/vpns/views/DeployVPN.vue b/src/modules/vpns/views/DeployVPN.vue
new file mode 100644
index 00000000..9acf5f64
--- /dev/null
+++ b/src/modules/vpns/views/DeployVPN.vue
@@ -0,0 +1,262 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import * as validation from '@/utils/validation'
+import { CheckIcon } from '@heroicons/vue/outline'
+import DeploymentWarning from '../../../components/DeploymentWarning.vue'
+import HttpError from '../../../components/HttpError.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import NetworkRegion from '../../../components/server/deploy/NetworkRegion.vue'
+import SpeedSlider from '../components/SpeedSlider.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { computed, reactive, ref } from 'vue'
+
+const router = useRouter()
+const store = useStore()
+
+const disabled = computed(() => store.state.balanceWarning || store.state.balanceSuspend || store.state.isRegionDisabled)
+const error = ref()
+const loading = ref(false)
+
+const formState = reactive({
+  multiuser: false,
+  name: '',
+  region: '',
+  speed: 'fast'
+})
+
+const httpError = computed(() => {
+  if (error && typeof error.status === 'number') {
+    return error
+  }
+  return null
+})
+
+const internalServerError = computed(() => {
+  if (error && error.status === 500) {
+    return error
+  }
+  return null
+})
+
+const overCapacityError = computed(() => {
+  if (error && error.status === 500 && error.response.body.detail === 'there is no suitable node in cluster') {
+    return error
+  }
+  return null
+})
+
+const v$ = useVuelidate({
+  multiuser: [],
+  name: [validation.required],
+  region: [validation.required],
+  speed: [validation.oneOf(['fast', 'faster', 'fastest'])]
+}, formState)
+
+const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+
+async function deploy() {
+  await v$.value.$validate()
+  if (v$.$invalid) return
+
+  try {
+    error.value = null
+    loading.value = true
+
+    const res = await utils.createVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+      vpn: {
+        ...formState,
+        account: store.state.session.account
+      }
+    })
+
+    for (const i in res.tasks) {
+      store.commit('addTask', res.tasks[i])
+    }
+
+    router.push({ name: 'VPN', params: { id: res.vpn._key }})
+  }
+  catch (err) {
+    error.value = err
+    return
+  }
+  finally {
+    loading.value = false
+  }
+
+  console.log({ ...formState })
+}
+
+function setRegion(region) {
+  formState.region = region._key
+}
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <h1>Deploy a new VPN</h1>
+    <form class="flex flex-col col-span-12 pb-20 space-y-4">
+      <!-- balance warning -->
+      <DeploymentWarning v-if="store.state.balanceSuspend || store.state.balanceWarning" />
+
+      <!-- network region -->
+      <div class="box">
+        <h4>Network region</h4>
+        <NetworkRegion
+          :disableControls=disabled
+          @region-changed="setRegion"
+          ref="networkRegion"
+        />
+      </div>
+
+      <!-- server specs - cpu / ram / storage -->
+      <div class="box">
+        <h4>VPN specs</h4>
+
+        <!-- Single/multi-user -->
+        <RadioGroup v-model="formState.multiuser">
+          <div class="box__grid mb-8">
+            <RadioGroupOption as="template" :value="false" :disabled="disabled" v-slot="{ active, checked, disabled }">
+              <div :class="{ radioOption: true, active, checked, disabled }">
+                <div :class="{ checkmark: true, active, checked }">
+                  <CheckIcon class="checkmark__icon" />
+                </div>
+                <div class="optionDetails">
+                  <RadioGroupLabel as="h4" class="optionDetails__name">
+                    Single-user VPN
+                  </RadioGroupLabel>
+                  <RadioGroupDescription as="span" class="optionDetails__description">
+                    <span>Ideal for individual use.</span>
+                  </RadioGroupDescription>
+                </div>
+              </div>
+            </RadioGroupOption>
+
+            <RadioGroupOption as="template" :value="true" :disabled="disabled" v-slot="{ active, checked, disabled }">
+              <div :class="{ radioOption: true, active, checked, disabled }">
+                <div :class="{ checkmark: true, active, checked }">
+                  <CheckIcon class="checkmark__icon" />
+                </div>
+                <div class="optionDetails">
+                  <RadioGroupLabel as="h4" class="optionDetails__name">
+                    Multi-user VPN
+                  </RadioGroupLabel>
+                  <RadioGroupDescription as="span" class="optionDetails__description">
+                    <span>Multi-user VPN includes up to five users. You can pay for additional users.</span>
+                  </RadioGroupDescription>
+                </div>
+              </div>
+            </RadioGroupOption>
+          </div>
+        </RadioGroup>
+
+        <!-- VPN speed -->
+        <SpeedSlider v-model="v$.speed.$model" />
+        <ValidationError :errors="v$.speed.$errors" />
+      </div>
+
+      <!-- server name -->
+      <div class="box">
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Name</label>
+            <input
+              class="input input--floating"
+              placeholder="My VPN"
+              required
+              type="text"
+              :class="{ disabled }"
+              :disabled="disabled"
+              v-model="v$.name.$model"
+            />
+          </div>
+        </div>
+        <ValidationError :errors="v$.name.$errors" />
+      </div>
+
+      <!-- deploy button & error message -->
+      <div class="flex flex-col w-full space-y-2">
+        <button
+          @click.prevent="deploy"
+          :disabled="!canDeploy"
+          class="button button--success self-end w-full md:max-w-xs"
+        >
+          <div v-if="loading" class="flex">
+            <span>Deploying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </div>
+          <span v-else>Deploy</span>
+        </button>
+
+        <div v-if="overCapacityError" class="server__error over-capacity">
+          <span class="font-bold">We're over capacity</span>
+          <span>It appears that we are at capacity in this region. We're working hard to increase this. Please check back soon.</span>
+        </div>
+        <div v-else-if="internalServerError" class="server__error">
+          <span class="font-bold">Something went wrong</span>
+          <span>There was an issue while deploying this VPN. Please try again, or contact support@edge.network if the issue persists.</span>
+        </div>
+        <div v-else-if="httpError" class="flex md:justify-end mt-2">
+          <HttpError :error="httpError" />
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.box__grid {
+  @apply mt-6 w-full grid grid-cols-1 gap-4;
+  @apply sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4;
+}
+
+/* radio option */
+.radioOption {
+  @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 hover:bg-opacity-50;
+  @apply focus:outline-none;
+}
+.radioOption.active {
+  @apply border-green border-opacity-40;
+}
+.radioOption.checked {
+  @apply bg-gray-100 border-green bg-opacity-75;
+  @apply ring-4 ring-green ring-opacity-10;
+}
+.radioOption.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* radio option details */
+.optionDetails {
+  @apply flex flex-col flex-1 text-sm;
+}
+.optionDetails__city {
+  @apply text-sm text-gray-500;
+}
+
+/* checkmark */
+.checkmark {
+  @apply flex items-center justify-center text-white flex-shrink-0 rounded-full w-5 h-5 bg-gray-100 border border-gray-300;
+}
+.checkmark.active {
+  @apply border-green border-opacity-40 bg-opacity-20;
+}
+.checkmark.checked {
+  @apply border-green bg-green;
+}
+.checkmark .checkmark__icon {
+  @apply opacity-0 w-3 h-3;
+}
+.checkmark.active .checkmark__icon {
+  @apply opacity-40;
+}
+.checkmark.checked .checkmark__icon {
+  @apply opacity-100;
+}
+</style>
diff --git a/src/modules/vpns/views/VPN.vue b/src/modules/vpns/views/VPN.vue
new file mode 100644
index 00000000..ac5491fd
--- /dev/null
+++ b/src/modules/vpns/views/VPN.vue
@@ -0,0 +1,366 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import DestroyServerConfirmation from '../../../components/confirmations/DestroyServerConfirmation.vue'
+import DistroIcon from '../../../components/icons/DistroIcon.vue'
+import EditableTitle from '../../../layout/EditableTitle.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import ProgressBar from '../../../components/ProgressBar.vue'
+import ServerMetrics from '../../../components/server/ServerMetrics.vue'
+import ServerPowerToggle from '../../../components/server/ServerPowerToggle.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import Tooltip from '../../../components/Tooltip.vue'
+import VPNOverview from '../components/VPNOverview.vue'
+import VPNSettings from '../components/VPNSettings.vue'
+import ValidationError from '../../../components/ValidationError.vue'
+import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { ArrowLeftIcon, InformationCircleIcon } from '@heroicons/vue/outline'
+import { RouterLink, useRoute } from 'vue-router'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+import { computed, effect, reactive, ref } from 'vue'
+import { minLength, required } from '@vuelidate/validators'
+
+const route = useRoute()
+const store = useStore()
+
+const busy = ref(false)
+const error = ref()
+const loading = ref(false)
+const region = ref()
+const server = ref()
+const vpn = ref()
+
+const activeTasks = computed(() => {
+  if (!store.value) return []
+  if (!server.value) return []
+  return store.value.getters.tasksByServerId(this.serverId)
+})
+
+const isCreating = computed(() => activeTasks.value.some(task => task.action === 'create'))
+const isDestroying = computed(() => activeTasks.value.some(task => task.action === 'destroy'))
+const isResizing = computed(() => activeTasks.value.some(task => task.action === 'resizeDisk' || task.action === 'resizeResource'))
+const isRestoring = computed(() => activeTasks.value.some(task => task.action === 'restoreBackup'))
+
+const showDestroyConfirmationModal = ref(false)
+
+function toggleDestroyConfirmationModal() {
+  showDestroyConfirmationModal.value = !showDestroyConfirmationModal.value
+}
+
+const formState = reactive({
+  name: ''
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3)]
+}, formState)
+
+async function destroy() {
+  console.log('WIP')
+}
+
+async function reload() {
+  try {
+    error.value = undefined
+    loading.value = true
+
+    let res = await utils.getVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id)
+    server.value = res.server
+    vpn.value = res.vpn
+
+    res = await utils.getRegion(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, server.value.region)
+    region.value = res.region
+    reset()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function reset() {
+  if (vpn.value) {
+    v$.value.name.$model = vpn.value.name
+  }
+}
+
+async function updateName() {
+  try {
+    error.value = undefined
+    busy.value = true
+
+    const res = await utils.updateVpn(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, route.params.id, {
+      vpn: {
+        name: v$.value.name.$model
+      }
+    })
+    server.value = res.server
+    vpn.value = res.vpn
+    reset()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner vpn" v-if="vpn">
+    <div class="w-max">
+      <RouterLink :to="{ name: 'VPNs' }" class="flex items-center space-x-1 hover:text-green mb-4">
+        <ArrowLeftIcon class="w-4" /><span>VPNs</span>
+      </RouterLink>
+    </div>
+
+    <!-- Title -->
+    <EditableTitle
+      v-model="v$.name.$model"
+      placeholder="VPN name"
+      :busy="busy"
+      :invalid="v$.name.$invalid"
+      @save="updateName"
+    />
+    <ValidationError :errors="v$.name.$errors" />
+
+    <!-- IP and domain -->
+    <div v-if="server" class="flex items-center mt-1 text-gray-500 truncate collapse sub-header space-x-2">
+      <span>{{ server.network.ip[0] }}</span>
+      <span class="divider" />
+      <span class="truncate">{{ server.settings.domain }}</span>
+    </div>
+
+    <!-- Server overview -->
+    <div v-if="server" class="flex items-center mt-3 space-x-3 text-gray-500 md:justify-between sm:mt-4 collapse status-row">
+      <div class="relative flex-1">
+        <div class="flex items-center justify-start space-x-2 collapse server-info">
+          <div class="flex items-center flex-shrink-0 space-x-1 text-gray-900">
+            <DistroIcon
+              :os="server.settings.os.group"
+              className="server-icon"
+            />
+            <span class="server-detail">{{ server.settings.os.version }}</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-2 flex-shrink-0 specs">
+            <span v-if="vpn.multiuser" class="server-detail">Multiuser</span>
+            <span v-else>Single-user</span>
+            <span class="divider"/>
+
+            <span v-if="vpn.speed === 'fastest'" class="server-detail">Fastest</span>
+            <span v-else-if="vpn.speed === 'faster'" class="server-detail">Faster</span>
+            <span v-else class="server-detail">Fast</span>
+            <span class="divider"/>
+          </div>
+          <div class="flex items-center space-x-1">
+            <StatusDot
+              :isActive="server.status === 'active'"
+              :isInactive="server.status !== 'active'"
+              :statusText="server.status === 'active' ? 'Active': 'Stopped'"
+            />
+            <Tooltip v-if="vpn.suspended" position="right" theme="error" text="Your VPN has been suspended due to unpaid invoices. When you add funds to your account it will automatically restart.">
+              <InformationCircleIcon class="w-4" />
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0" v-if="server">
+        <ServerPowerToggle :disableActions="busy" :server="server" />
+      </div>
+    </div>
+
+    <div v-if="vpn" class="grid items-start grid-cols-12 mt-4 space-x-10">
+      <div class="col-span-12">
+        <!-- Destroyed -->
+        <div v-if="vpn.status === 'deleted'" class="box">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4>VPN Destroyed</h4>
+            <p class="mb-0 text-gray-500">This VPN and all of its associated backups have been destroyed.</p>
+            <router-link
+              class="mt-4 button button--success button--small"
+              :to="{ name: 'VPNs' }"
+            >
+              <span>Return to VPNs</span>
+            </router-link>
+          </div>
+        </div>
+
+        <!-- crashed -->
+        <div v-else-if="vpn.status === 'crashed'" class="box">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4>Server Crashed</h4>
+            <p class="mb-0 text-gray-500">There was a problem with your VPN, please either delete and re-deploy the VPN or contact support@edge.network for assistance.</p>
+            <button
+              class="mt-4 button button--error button--small w-full md:max-w-xs"
+              :disabled="isDestroying"
+              @click.prevent="toggleDestroyConfirmationModal"
+            >
+              <div v-if=isDestroying class="flex">
+                <span>Destroying</span>
+                <span class="ml-2"><LoadingSpinner /></span>
+              </div>
+              <span v-else>Destroy VPN</span>
+            </button>
+          </div>
+          <!-- destroy confirmation modal -->
+          <DestroyServerConfirmation
+            v-if="server && showDestroyConfirmationModal"
+            @modal-confirm="destroy"
+            @modal-close="toggleDestroyConfirmationModal"
+            :serverName="vpn.name"
+          />
+        </div>
+
+        <!-- action in progress section -->
+        <div v-else-if="isCreating || isDestroying || isResizing" class="box box--tall">
+          <div class="flex flex-col items-center justify-center text-center">
+            <h4 class="mt-4">
+              <span v-if="isCreating">Deploying your new VPN</span>
+              <span v-else-if="isDestroying">Destroying your VPN</span>
+              <span v-else-if="isResizing">Resizing your VPN</span>
+              <span v-else-if="isRestoring">Restoring your VPN backup</span>
+            </h4>
+            <p class="mt-2 mb-0 text-gray-500">This may take a few minutes. Feel free to close this page.</p>
+            <div class="mt-4 max-w-full"><ProgressBar :red="isDestroying" /></div>
+          </div>
+        </div>
+
+        <TabGroup v-else as="div" class="tabGroup">
+          <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+          <TabList class="tabs pr-6">
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Overview
+              </button>
+            </Tab>
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Metrics
+              </button>
+            </Tab>
+            <Tab v-slot="{selected}">
+              <button
+                class="tab"
+                :class="[selected ? 'tab--selected' : '']"
+              >
+                Settings
+              </button>
+            </Tab>
+          </TabList>
+
+          <TabPanels class="mt-4">
+            <TabPanel>
+              <VPNOverview v-if="region && server && vpn" :region="region" :server="server" :vpn="vpn" />
+            </TabPanel>
+
+            <TabPanel>
+              <ServerMetrics v-if="server" :server="server" />
+            </TabPanel>
+
+            <TabPanel>
+              <VPNSettings v-if="vpn" :vpn="vpn" />
+            </TabPanel>
+          </TabPanels>
+        </TabGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mainContent__inner.vpn {
+  @apply pt-0 mt-6;
+}
+
+.server-detail {
+  @apply flex-shrink-0;
+}
+.server-icon {
+  @apply w-4 h-4 text-gray-500 flex-shrink-0;
+}
+.specsGradient {
+  @apply absolute top-0 right-0 w-10 h-full pointer-events-none bg-gradient-to-l from-gray-200;
+}
+
+.box.box--tall {
+  @apply py-20 !important;
+}
+
+.divider {
+  @apply h-4 bg-gray-400 w-px flex-shrink-0;
+}
+
+
+@media (max-width: 450px) {
+  .collapse.sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+  .collapse .specs {
+    @apply flex-col items-start space-x-0
+  }
+  .collapse .specs .divider {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 450px) and (max-width: 650px) {
+  .collapse .specs .divider {
+    @apply block
+  }
+  .collapse.sub-header .divider {
+    @apply block
+  }
+}
+
+@media (max-width: 650px) {
+  .collapse.server-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse .sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+}
+
+@screen md {
+  .collapse.server-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse.server-info .divider {
+    @apply hidden;
+  }
+  .collapse .specs .divider {
+    @apply block
+  }
+}
+
+@screen lg {
+  .collapse.server-info {
+    @apply flex-row items-center space-x-2 space-y-0;
+  }
+  .collapse.server-info .divider {
+    @apply block;
+  }
+}
+</style>
diff --git a/src/modules/vpns/views/VPNs.vue b/src/modules/vpns/views/VPNs.vue
new file mode 100644
index 00000000..338b2d75
--- /dev/null
+++ b/src/modules/vpns/views/VPNs.vue
@@ -0,0 +1,285 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import LoadingSpinner from '@/components/icons/LoadingSpinner'
+import StatusDot from '@/components/StatusDot'
+import moment from 'moment'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const router = useRouter()
+const store = useStore()
+
+const data = ref()
+const error = ref()
+const loading = ref(true)
+
+function getCreated(time) {
+  const created = moment(time).fromNow()
+  return created === 'a few seconds ago' ? 'Just now' : created
+}
+
+async function reload() {
+  try {
+    error.value = undefined
+    loading.value = true
+
+    data.value = await utils.getVpns(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+      limit: 100,
+      page: 1
+    })
+  }
+  catch (err) {
+    console.error(err)
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge VPN</h1>
+      <router-link
+        v-if="data && data.results.length > 0"
+        :to="{ name: 'Deploy VPN' }"
+        class="button button--success button--small h-full mb-5 sm:mb-0"
+      >
+        Deploy VPN
+      </router-link>
+    </div>
+    <div v-if="error" class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        There was a problem loading your VPNs. Please try again or contact support for assistance.
+      </div>
+    </div>
+    <div v-else-if="loading" class="flex items-center">
+      <span>Loading VPNs</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+    <div v-else-if="data">
+      <ul v-if="data.results.length > 0" class="space-y-2">
+        <li
+          v-for="{ vpn, server } in data.results"
+          :key="vpn._key"
+          @click="router.push({ name: 'VPN', params: { id: vpn._key }})"
+          class="vpns__item"
+          :class="vpn.active ? 'active' : 'inactive'"
+        >
+          <div class="vpns__field details overflow-hidden">
+            <!-- name -->
+            <div class="vpns__name">
+              <span
+                class="text-md truncate"
+                :class="vpn.active ? 'text-green' : 'text-red'"
+                :title="vpn.name"
+              >
+                {{ vpn.name }}
+              </span>
+            </div>
+            <div class="ip__and__domain text-m">
+              <span v-if="server.network">{{ server.network.ip[0] }}</span>
+              <span v-if="server.network" class="divider hidden"></span>
+              <div class="truncate" :data="server.settings.domain">{{ server.settings.domain }}</div>
+            </div>
+          </div>
+
+          <!-- server specs -->
+          <div class="vpns__field specs">
+            <span class="vpns__header">Type</span>
+            <!-- Multi or single user -->
+            <div class="text-m">
+              <span v-if="vpn.multiuser">Multiuser</span>
+              <span v-else>Single User</span>
+            </div>
+          </div>
+
+
+          <!-- Speed -->
+          <div class="vpns__field speed">
+            <span class="vpns__header">Speed</span>
+            <div class="text-m">
+
+              <span v-if="vpn.speed === 'fast'">Fast</span>
+              <span v-else-if="vpn.speed === 'faster'">Faster</span>
+              <span v-else-if="vpn.speed === 'fastest'">Fastest</span>
+              <span v-else>???</span>
+            </div>
+          </div>
+
+          <!-- created -->
+          <div class="vpns__field created">
+            <span class="vpns__header">Created</span>
+            <span class="text-m">{{ getCreated(vpn.created) }}</span>
+          </div>
+
+          <!-- status dot -->
+          <div class="vpns__field status">
+            <span class="vpns__header">Status</span>
+            <StatusDot :isActive="vpn.active" :isInactive="!vpn.active" :small="true" :statusText="vpn.active ? 'Active' : 'Inactive' " />
+          </div>
+        </li>
+      </ul>
+
+      <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>You haven't deployed any VPNs yet. Once you deploy your first VPN it will be available here.</p>
+        <router-link
+          :to="{ name: 'Deploy VPN' }"
+          class="button button--success button--small"
+        >
+          Deploy VPN
+        </router-link>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-m {
+  font-size: 0.8rem;
+}
+
+.flagIcon {
+  @apply h-4 w-4 rounded-xl mr-1;
+}
+
+/* list item */
+.vpns__item {
+  @apply grid auto-rows-auto gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8;
+  @apply cursor-pointer transition-all duration-100;
+}
+.vpns__item.active {
+  @apply border-green;
+}
+.vpns__item.inactive {
+  @apply border-red;
+}
+
+/* list item content */
+.vpns__field {
+  @apply flex flex-col;
+}
+.vpns__header {
+  @apply text-md mr-2;
+}
+.ip__and__domain {
+  @apply flex flex-col overflow-hidden;
+}
+.zone, .created, .status {
+  @apply flex flex-col;
+}
+.vpns__name {
+  @apply text-md text-gray-500 truncate;
+}
+.active .vpns__name {
+  @apply text-green font-medium;
+}
+.inactive .vpns__name {
+  @apply text-red font-medium;
+}
+.vpns__stats {
+  @apply flex space-x-1.5;
+}
+/* status dot */
+.vpns__statusDot {
+  @apply w-2.5 h-2.5 rounded-full mr-1 bg-gray-400;
+}
+.active .vpns__statusDot {
+  @apply bg-green;
+}
+.inactive .vpns__statusDot {
+  @apply bg-red;
+}
+.divider {
+  @apply h-full bg-gray-400;
+  width: 1px
+}
+
+/* tablet sized screens up to desktop */
+@media (min-width: 470px) {
+  .vpns__item {
+    @apply grid-rows-3 gap-x-10;
+    grid-template-columns: auto;
+  }
+  .vpns__header {
+    @apply mr-0;
+  }
+  .details {
+    @apply col-span-2;
+  }
+  .ip__and__domain {
+    @apply flex-row space-x-1
+  }
+  .ip__and__domain.divider {
+    @apply block;
+  }
+  .zone {
+    @apply col-start-2 row-start-2;
+  }
+
+  .created {
+    @apply col-start-1 row-start-3;
+  }
+
+  .status {
+    @apply col-start-2 row-start-3;
+  }
+
+  .divider {
+    @apply block;
+  }
+}
+
+@screen lg {
+  .vpns__item {
+    @apply flex justify-between border-l-8 border-t-0 gap-x-4;
+  }
+  .details {
+    @apply col-span-1 flex-shrink;
+    flex-basis: 280px;
+  }
+  .zone {
+    @apply col-start-3 row-start-1 flex-shrink-0;
+    flex-basis: 100px;
+  }
+  .created {
+    @apply col-start-4 row-start-1 flex-shrink-0;
+    flex-basis: 120px;
+  }
+  .status {
+    @apply col-start-5 row-start-1;
+    flex-basis: 100px;
+  }
+  /* zone and created fields are hidden on small desktop screens */
+  .zone, .created {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 1180px) {
+  .zone, .created {
+    @apply flex;
+  }
+}
+
+@media (max-width: 370px) {
+  .vpns__stats {
+    @apply flex-col space-x-0;
+  }
+
+  .vpns__stats .divider {
+    @apply hidden;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index bc93f410..8724286b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,6 @@
 /* global process */
 
 import * as utils from '@edge/account-utils'
-import Account from '@/views/dashboard/Account'
 import BareMetal from '../modules/bareMetals/views/BareMetal.vue'
 import BareMetals from '../modules/bareMetals/views/BareMetals.vue'
 import Billing from '@/views/dashboard/Billing'
@@ -14,6 +13,7 @@ import CdnIntegration  from '@/views/dashboard/CdnIntegration'
 import CdnIntegrations from '@/views/dashboard/CdnIntegrations'
 import CreateAccount from '@/views/landing/CreateAccount'
 import Dashboard from '@/views/Dashboard'
+import DeployVPN from '../modules/vpns/views/DeployVPN.vue'
 import Domain from '@/views/dashboard/Domain'
 import Domains from '@/views/dashboard/Domains'
 import GettingStarted from '@/views/dashboard/GettingStarted'
@@ -40,6 +40,8 @@ import Storage from '@/views/dashboard/Storage'
 import StorageDeploy from '@/views/dashboard/StorageDeploy'
 import StorageIntegration from '@/views/dashboard/StorageIntegration'
 import Support from '@/views/dashboard/Support'
+import VPN from '../modules/vpns/views/VPN.vue'
+import VPNs from '../modules/vpns/views/VPNs.vue'
 import Wallet from '@/components/billing/Wallet'
 import store from '@/store'
 import { createRouter, createWebHistory } from 'vue-router'
@@ -56,11 +58,6 @@ const routes = [
         name: 'Index',
         component: Index
       },
-      {
-        path: 'account',
-        name: 'Account',
-        component: Account
-      },
       {
         path: 'bare-metals',
         name: 'Bare Metals',
@@ -138,6 +135,21 @@ const routes = [
         name: 'Getting Started',
         component: GettingStarted
       },
+      {
+        path: 'gpus',
+        name: 'GPUs',
+        component: () => import('../modules/gpu/views/GPUList.vue')
+      },
+      {
+        path: 'gpus/deploy',
+        name: 'Deploy GPU',
+        component: () => import('../modules/gpu/views/GPUDeploy.vue')
+      },
+      {
+        path: 'gpu/:id',
+        name: 'GPU',
+        component: () => import('../modules/gpu/views/GPUDetail.vue')
+      },
       {
         path: 'notifications',
         name: 'Notifications',
@@ -178,6 +190,11 @@ const routes = [
         name: 'Server',
         component: Server
       },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: () => import('../modules/settings/views/SettingsView.vue')
+      },
       {
         path: 'shield',
         name: 'Shield',
@@ -202,6 +219,21 @@ const routes = [
         path: '/support',
         name: 'Support',
         component: Support
+      },
+      {
+        path: '/vpns',
+        name: 'VPNs',
+        component: VPNs
+      },
+      {
+        path: '/vpns/deploy',
+        name: 'Deploy VPN',
+        component: DeployVPN
+      },
+      {
+        path: '/vpn/:id',
+        name: 'VPN',
+        component: VPN
       }
     ]
   },
diff --git a/src/utils/validation.js b/src/utils/validation.js
index e9579f5b..cecde5f8 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -10,6 +10,11 @@ import { email as _email, required as _required, helpers, or } from '@vuelidate/
  */
 export const required = helpers.withMessage('A value is required.', _required)
 
+export const oneOf = values => {
+  const message = `Must be one of "${values.join('", "')}"`
+  return helpers.withMessage(message, value => values.includes(value))
+}
+
 /**
  * Account number validator.
  */
diff --git a/src/views/dashboard/Account.vue b/src/views/dashboard/Account.vue
deleted file mode 100644
index 33542910..00000000
--- a/src/views/dashboard/Account.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div class="mainContent__inner space-y-4">
-    <h1>Account</h1>
-    <div class="box">
-      <div>
-        <h4>Account Number</h4>
-        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
-      </div>
-      <!-- account number display -->
-      <div class="account-number-wrapper">
-        <span v-if="showAccountNumber" class="account-number monospace">{{ formattedAccountNumber }}</span>
-        <span v-else class="account-number masked monospace">{{ formattedAccountNumberMasked }}</span>
-        <!-- hide/show account number button button -->
-        <button
-          @click.prevent="toggleShowAccountNumber"
-          class="ml-2 text-gray-400 hover:text-green"
-        >
-          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
-          <EyeOffIcon v-if="!showAccountNumber" class="ml-2 w-5 h-5" />
-        </button>
-      </div>
-    </div>
-    <div class="box">
-      <h4>Account Email</h4>
-      <div>
-        <ManageAccountEmail v-if="isEmailEnabled" />
-        <AddAccountEmail v-else />
-      </div>
-    </div>
-    <div class="box">
-      <h4>Two-factor Authentication (2FA)</h4>
-      <div>
-        <Disable2FA v-if="is2FAEnabled && !showAddExtra2FA && !backupCodes" />
-        <Enable2FA v-else @enable2FA="onEnable2FA" />
-        <button
-          v-if="is2FAEnabled && !backupCodes"
-          @click="toggleAddExtra2FA"
-          class="mt-2 underline text-gray-500 hover:text-green"
-        >
-          {{ showAddExtra2FA ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
-        </button>
-      </div>
-    </div>
-
-    <div class="box">
-      <h4>Crypto Payments</h4>
-      <p class="text-gray-500">
-        Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
-        By default payment information in the account interface is presented in fiat.
-        If you would prefer to see payment information in crypto, you can enable it here.
-      </p>
-      <button v-if="account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
-      <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global process */
-
-import * as format from '@/utils/format'
-import * as utils from '@edge/account-utils'
-import AddAccountEmail from '@/components/account/AddAccountEmail'
-import Disable2FA from '@/components/account/Disable2FA'
-import Enable2FA from '@/components/account/Enable2FA'
-import ManageAccountEmail from '@/components/account/ManageAccountEmail'
-import ReferralCode from '@/components/ReferralCode'
-import { mapState } from 'vuex'
-import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
-
-export default {
-  name: 'Account',
-  title() {
-    return 'Edge Account Portal » Account'
-  },
-  components: {
-    AddAccountEmail,
-    Disable2FA,
-    EyeIcon,
-    EyeOffIcon,
-    Enable2FA,
-    ManageAccountEmail,
-    ReferralCode
-  },
-  computed: {
-    ...mapState(['account', 'backupCodes', 'session']),
-    formattedAccountNumber() {
-      return format.accountNumber(this.account._key)
-    },
-    formattedAccountNumberMasked() {
-      return format.accountNumberMasked(this.account._key)
-    },
-    is2FAEnabled() {
-      return this.account.totps
-    },
-    isEmailEnabled() {
-      return this.account.email && this.account.email.address
-    }
-  },
-  data() {
-    return {
-      copied: false,
-      showAccountNumber: false,
-      showAddExtra2FA: false
-    }
-  },
-  methods: {
-    async copyToClipboard () {
-      this.copied = true
-      await navigator.clipboard.writeText(this.account._key)
-      setTimeout(() => {
-        this.copied = false
-      }, 2000)
-    },
-    onEnable2FA() {
-      this.showAddExtra2FA = false
-    },
-    async toggleCryptoView() {
-      await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, {
-        account: this.account._key,
-        useCryptoView: !this.account.useCryptoView
-      })
-      this.$store.dispatch('updateAccount')
-    },
-    toggleShowAccountNumber() {
-      this.showAccountNumber = !this.showAccountNumber
-    },
-    toggleAddExtra2FA() {
-      this.showAddExtra2FA = !this.showAddExtra2FA
-    }
-  }
-}
-</script>
-<style scoped>
-.account-number-wrapper {
-  @apply flex items-center justify-between relative w-max max-w-full;
-}
-.account-number {
-  @apply text-3xl text-green pr-4;
-}
-.account-number.masked {
-  @apply text-gray;
-}
-</style>
diff --git a/src/views/dashboard/Server.vue b/src/views/dashboard/Server.vue
index 0bdc3ba4..65135c5f 100644
--- a/src/views/dashboard/Server.vue
+++ b/src/views/dashboard/Server.vue
@@ -59,11 +59,7 @@
         </div>
       </div>
       <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
-        <ServerPowerToggle
-          :activeTasks=activeTasks
-          :disableActions=disableActions
-          :server=server
-        />
+        <ServerPowerToggle :disableActions=disableActions :server=server />
       </div>
 
     </div>