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..c9112d74 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -34,6 +34,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _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/icons/NvidiaIcon.vue b/src/components/icons/NvidiaIcon.vue
new file mode 100644
index 00000000..5df0cc30
--- /dev/null
+++ b/src/components/icons/NvidiaIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' :class="className">
+    <path fill="rgb(118 185 0)" d='M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062c3.957 0 6.82-2.023 9.593-4.408c.459.371 2.34 1.263 2.73 1.652c-2.633 2.208-8.772 3.984-12.253 3.984c-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936'/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NvidiaIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'w-6 h-6'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/server/deploy/Password.vue b/src/components/server/deploy/Password.vue
index 1f276a17..68ff584e 100644
--- a/src/components/server/deploy/Password.vue
+++ b/src/components/server/deploy/Password.vue
@@ -55,7 +55,12 @@
 <script>
 import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
 
-const passwordCharset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789*#$!?-_'
+const passwordCharset = {
+  lowercase: 'abcdefghijklmnopqrstuvwxyz',
+  uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  numbers: '0123456789',
+  symbols: '@#$%^&*'
+}
 
 export default {
   name: 'Password',
@@ -82,13 +87,21 @@ export default {
       }, 2000)
     },
     generate() {
-      this.password = (new Array(24))
-        .fill(null)
-        .map(() => {
-          const n = Math.floor(Math.random() * passwordCharset.length)
-          return passwordCharset[n]
-        })
-        .join('')
+      const password = [
+        passwordCharset.lowercase[Math.floor(Math.random() * passwordCharset.lowercase.length)],
+        passwordCharset.uppercase[Math.floor(Math.random() * passwordCharset.uppercase.length)],
+        passwordCharset.numbers[Math.floor(Math.random() * passwordCharset.numbers.length)],
+        passwordCharset.symbols[Math.floor(Math.random() * passwordCharset.symbols.length)]
+      ]
+      const allChars = Object.values(passwordCharset).join('')
+      for (let i = password.length; i < 24; i++) {
+        password.push(allChars[Math.floor(Math.random() * allChars.length)])
+      }
+      for (let i = password.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[password[i], password[j]] = [password[j], password[i]]
+      }
+      this.password = password.join('')
     },
     toggleShowPassword() {
       if (this.disableControls) return
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..4e43421c
--- /dev/null
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -0,0 +1,180 @@
+<script setup>
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '../../../components/StatusDot.vue'
+import { defineProps, ref } from 'vue'
+import * as format from '@/utils/format'
+
+defineProps({
+  gpu: Object
+})
+
+const copied = ref(false)
+
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
+function formatTimestamp(ts) {
+  return `${format.date(ts)}, ${format.time(ts)}`
+}
+</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">Server 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">{{ formatTimestamp(gpu.created) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="box overflow_hidden gpu-specs">
+      <h4 class="section__title">GPU specs</h4>
+      <div class="info__section mb-4">
+        <span class="label">GPU Model</span>
+        <span class="info">{{ gpu.gpuModel }}</span>
+      </div>
+      <!-- vcpus, ram, disk, bandwidth -->
+      <div class="overview__grid">
+        <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 }} GiB</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Disk</span>
+          <span class="info">{{ gpu.diskGiB }} GiB</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..625cca27
--- /dev/null
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -0,0 +1,167 @@
+<script setup>
+/* global process */
+
+import superagent from 'superagent'
+import { useStore } from 'vuex'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption, RadioGroupDescription } from '@headlessui/vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
+import NvidiaIcon from '../../../components/icons/NvidiaIcon.vue'
+import { CheckIcon } from '@heroicons/vue/outline'
+
+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">
+      <div
+        v-for="gpu in gpus"
+        :key="gpu.id"
+        class="flex flex-col"
+      >
+        <RadioGroupOption
+          as="template"
+          :value="gpu.id"
+          v-slot="{ active, checked, disabled }"
+          :disabled="disabled"
+        >
+          <div
+            :class="[
+              active ? 'active' : '',
+              checked ? 'checked' : '',
+              disabled ? 'disabled' : ''
+            ]"
+            class="radioOption"
+          >
+            <div
+              class="checkmark"
+              :class="[
+                active ? 'active' : '',
+                checked ? 'checked' : ''
+              ]"
+            >
+              <CheckIcon class="checkmark__icon" />
+            </div>
+            <div class="optionDetails">
+              <RadioGroupLabel as="h4" class="optionDetails__model">
+                {{ gpu.modelName }}
+              </RadioGroupLabel>
+              <RadioGroupDescription as="span" class="optionDetails__memory">
+                <span class="flex items-center space-x-2">
+                  <span>NVIDIA</span>
+                  <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+                  <span>{{ gpu.memoryGib }} GB</span>
+                </span>
+              </RadioGroupDescription>
+            </div>
+            <NvidiaIcon className="w-10" />
+          </div>
+        </RadioGroupOption>
+      </div>
+    </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-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__memory {
+  @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/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
new file mode 100644
index 00000000..1049d629
--- /dev/null
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -0,0 +1,233 @@
+<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, onMounted } from 'vue'
+import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
+import * as utils from '@edge/account-utils'
+
+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
+  }
+}
+
+onMounted(async () => {
+  const { hostname } = await utils.createServerHostname(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key)
+  formState.hostname = `${hostname}.edge.network`
+  formState.name = hostname
+})
+</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>Server 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 class="flex flex-col items-baseline mt-8">
+          <span class="text-green">Your server</span>
+          <div class="flex items-center space-x-2 mt-1">
+            <span class="text-lg">{{ v$.gpuCount.$model }} GPU</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.cpuCount.$model }} vCPU</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.memoryGiB.$model }} GiB RAM</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.diskGiB.$model }} GiB Disk</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <!-- Name -->
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Server 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" />
+        <p class="mt-4 mb-0">
+          You can connect to the server as <code>root</code> with this password.
+        </p>
+      </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..328c6506
--- /dev/null
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -0,0 +1,455 @@
+<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 ProgressBar from '../../../components/ProgressBar.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 isCreating = computed(() => gpu.value && ['queued', 'created', 'pending', 'starting'].includes(gpu.value.status))
+const deploymentMessage = computed(() => {
+  if (destroying.value) return 'Destroying your GPU'
+  if (isCreating.value) return 'Deploying your new GPU'
+  return ''
+})
+
+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}`)
+      startPoll(['active'])
+    }
+    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(['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="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 }} GiB Disk</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.memoryGiB }} GiB 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 v-if="destroyed" class="mainContent__inner pt-0 mt-6">
+      <div class="box">
+        <div class="flex flex-col items-center justify-center text-center">
+          <h4>GPU Destroyed</h4>
+          <p class="mb-0 text-gray-500">This GPU has been successfully destroyed.</p>
+          <router-link
+            class="mt-4 button button--success button--small"
+            :to="{ name: 'GPUs' }"
+          >
+          <span>Return to GPUs</span>
+          </router-link>
+        </div>
+      </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>
+
+    <!-- action in progress section -->
+    <div v-else-if="isCreating || destroying" class="box box--tall">
+      <div class="flex flex-col items-center justify-center text-center">
+        <h4 class="mt-4">{{ deploymentMessage }}</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="destroying" /></div>
+      </div>
+    </div>
+
+    <div v-else 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-if="loading" class="mainContent__inner pt-0 mt-6">
+    <div class="flex items-center">
+      <span>Loading GPU</span>
+      <LoadingSpinner />
+    </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;
+  }
+}
+
+.box.box--tall {
+  @apply py-20 !important;
+}
+</style>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
new file mode 100644
index 00000000..b35da546
--- /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 }} GiB Disk</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.memoryGiB }} GiB 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/router/index.js b/src/router/index.js
index bc93f410..b5cda9be 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'
@@ -56,11 +55,6 @@ const routes = [
         name: 'Index',
         component: Index
       },
-      {
-        path: 'account',
-        name: 'Account',
-        component: Account
-      },
       {
         path: 'bare-metals',
         name: 'Bare Metals',
@@ -138,6 +132,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 +187,11 @@ const routes = [
         name: 'Server',
         component: Server
       },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: () => import('../modules/settings/views/SettingsView.vue')
+      },
       {
         path: 'shield',
         name: 'Shield',
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>