diff --git a/packages/grid_client/src/storage/tfkvstore.ts b/packages/grid_client/src/storage/tfkvstore.ts
index df49f9bd36..8ae87690df 100644
--- a/packages/grid_client/src/storage/tfkvstore.ts
+++ b/packages/grid_client/src/storage/tfkvstore.ts
@@ -15,16 +15,33 @@ class TFKVStoreBackend implements BackendStorageInterface {
     this.client = new TFClient(url, mnemonic, storeSecret, keypairType);
   }
 
+  private async cleanFragments(key: string, start: number) {
+    let k = `${key}.${start}`;
+    let value = await this.client.kvStore.get({ key: k });
+    if (!value) {
+      return [];
+    }
+    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
+    while (value) {
+      extrinsics.push(await this.client.kvStore.delete({ key: k }));
+      start++;
+      k = `${key}.${start}`;
+      value = await this.client.kvStore.get({ key: k });
+    }
+    return extrinsics;
+  }
+
   @crop
   async set(key: string, value: string) {
     if (!value || value === '""') {
       return await this.remove(key);
     }
-    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
+    let extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
     const splits = this.split(key, value);
     for (const k of Object.keys(splits)) {
       extrinsics.push(await this.client.kvStore.set({ key: k, value: splits[k] }));
     }
+    extrinsics = extrinsics.concat(await this.cleanFragments(key, Object.keys(splits).length));
     return extrinsics;
   }
 
@@ -52,15 +69,9 @@ class TFKVStoreBackend implements BackendStorageInterface {
     if (!value) {
       return;
     }
-    let i = 0;
-    let val = value;
-    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
-    while (val) {
-      extrinsics.push(await this.client.kvStore.delete({ key }));
-      i++;
-      key = `${key}.${i}`;
-      val = await this.client.kvStore.get({ key });
-    }
+
+    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = await this.cleanFragments(key, 1);
+    extrinsics.push(await this.client.kvStore.delete({ key }));
     return extrinsics;
   }
 
diff --git a/packages/playground/src/components/copy_input_wrapper.vue b/packages/playground/src/components/copy_input_wrapper.vue
index d35dd9cd30..321b13848f 100644
--- a/packages/playground/src/components/copy_input_wrapper.vue
+++ b/packages/playground/src/components/copy_input_wrapper.vue
@@ -1,9 +1,13 @@
 <template>
   <slot
-    :props="{
-      'append-inner-icon': 'mdi-content-copy',
-      'onClick:append-inner': copy,
-    }"
+    :props="
+      props.data
+        ? {
+            'append-inner-icon': 'mdi-content-copy',
+            'onClick:append-inner': copy,
+          }
+        : {}
+    "
   ></slot>
 </template>
 
diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
index 98260297c3..41915b3b65 100644
--- a/packages/playground/src/components/input_tooltip.vue
+++ b/packages/playground/src/components/input_tooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex" v-if="!disabled">
-    <v-tooltip :text="tooltip || 'None!'" :location="location">
+    <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
         <div class="d-flex" :class="{ 'w-100': !inline, 'align-center': alignCenter }">
@@ -51,6 +51,10 @@ export default {
       type: String as PropType<VTooltip["location"]>,
       required: false,
     },
+    width: {
+      type: String,
+      required: false,
+    },
     disabled: Boolean,
   },
   setup() {
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
new file mode 100644
index 0000000000..7930bc30e9
--- /dev/null
+++ b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -0,0 +1,191 @@
+<template>
+  <v-card class="" variant="tonal">
+    <v-card-title>
+      <v-icon>mdi-key-chain</v-icon>
+      Manage SSH keys
+    </v-card-title>
+    <v-card-text>
+      SSH grants secure remote access to your deployed machine for seamless management and execution of commands.
+      <v-alert v-if="selectedKeys.length === 0" type="warning" class="mt-2">
+        Attention: It appears that no SSH keys have been selected. In order to access your deployment, you must send at
+        least one SSH key. You can manage your SSH keys from the
+        <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link> and add more as needed.
+      </v-alert>
+    </v-card-text>
+
+    <VDivider />
+
+    <v-card-actions>
+      <VSpacer />
+      <v-btn color="primary" variant="flat" @click="openManageDialog = true" class="mr-2">Manage SSH keys</v-btn>
+    </v-card-actions>
+  </v-card>
+
+  <v-dialog v-model="openManageDialog" max-width="850">
+    <v-card>
+      <v-toolbar color="primary" class="custom-toolbar">
+        <p class="mb-5">
+          <v-icon>mdi-cog-sync</v-icon>
+          Manage SSH keys
+        </p>
+      </v-toolbar>
+
+      <v-card-text>
+        <v-alert type="info" class="mb-5">
+          The keys you've chosen will be forwarded to your deployment. To make changes, simply tap on the key you wish
+          to cancel or add.
+        </v-alert>
+
+        <v-row>
+          <v-tooltip
+            v-for="_key of sshKeys"
+            :key="_key.id"
+            :text="selectedKeys.includes(_key) ? 'Selected' : 'Not selected'"
+            location="bottom"
+          >
+            <template #activator="{ props }">
+              <v-chip
+                class="pa-5 ml-5 mt-5"
+                :variant="selectedKeys.includes(_key) ? 'flat' : 'outlined'"
+                :color="selectedKeys.includes(_key) ? 'primary' : 'white'"
+                v-bind="props"
+                @click="selectKey(_key)"
+              >
+                <div class="d-flex justify-center">
+                  <v-icon>mdi-key-variant</v-icon>
+                </div>
+                <div class="d-flex justify-center">
+                  <p class="ml-2">
+                    {{ capitalize(_key.name) }}
+                  </p>
+                </div>
+              </v-chip>
+            </template>
+          </v-tooltip>
+        </v-row>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn class="mt-2 mb-2 mr-2" variant="outlined" color="white" text="Close" @click="openManageDialog = false" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- View SSH Key -->
+  <ssh-data-dialog :open="isViewSSHKey" :selected-key="selectedKey" @close="onCloseSelectKey" />
+</template>
+
+<script lang="ts">
+import { noop } from "lodash";
+import { capitalize, defineComponent, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
+import { onUnmounted } from "vue";
+
+import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
+import { useForm, ValidatorStatus } from "@/hooks/form_validator";
+import type { InputValidatorService } from "@/hooks/input_validator";
+import { DashboardRoutes } from "@/router/routes";
+import { useProfileManager } from "@/stores";
+import type { SSHKeyData } from "@/types";
+
+export default defineComponent({
+  name: "ManageSshDeployemnt",
+  emits: ["selectedKeys"],
+  components: {
+    SshDataDialog,
+  },
+
+  setup(_, { emit }) {
+    const defaultKeyData = { createdAt: "", id: 0, publicKey: "", name: "", isActive: false };
+    const openManageDialog = ref<boolean>(false);
+    const profileManager = useProfileManager();
+    const sshKeys = profileManager.profile?.ssh as SSHKeyData[];
+    const selectedKey = ref<SSHKeyData>(defaultKeyData);
+    const selectedKeys = ref<SSHKeyData[]>([]);
+    const isViewSSHKey = ref<boolean>(false);
+
+    // Each key will be added then add `\n` as a new line.
+    const selectedKeysString = ref<string>("");
+
+    onMounted(() => {
+      selectedKeys.value = sshKeys.filter(_key => _key.isActive === true);
+      handleKeys();
+      emit("selectedKeys", selectedKeysString.value);
+    });
+
+    function selectKey(key: SSHKeyData) {
+      if (selectedKeys.value.includes(key)) {
+        const index = selectedKeys.value.indexOf(key);
+        if (index !== -1) {
+          selectedKeys.value.splice(index, 1);
+        }
+      } else {
+        selectedKeys.value.push(key);
+      }
+      handleKeys();
+      emit("selectedKeys", selectedKeysString.value);
+    }
+
+    function onSelectKey(key: SSHKeyData) {
+      selectedKey.value = key;
+      isViewSSHKey.value = true;
+    }
+
+    function onCloseSelectKey() {
+      isViewSSHKey.value = false;
+      nextTick(() => {
+        selectedKey.value = defaultKeyData;
+      });
+    }
+
+    function handleKeys() {
+      selectedKeysString.value = selectedKeys.value.map(_key => _key.publicKey).join("\n\n");
+    }
+
+    /* interact with form_validator */
+    const { uid } = getCurrentInstance() as { uid: number };
+    const form = useForm();
+
+    const fakeService: InputValidatorService = {
+      validate: () => Promise.resolve(true),
+      setStatus: noop,
+      reset: noop,
+      status: ValidatorStatus.Init,
+      error: null,
+    };
+
+    onMounted(() => form?.register(uid, fakeService));
+    onUnmounted(() => form?.unregister(uid));
+
+    watch(
+      () => selectedKeys.value.length,
+      num => {
+        form?.updateStatus(uid, num === 0 ? ValidatorStatus.Invalid : ValidatorStatus.Valid);
+      },
+      { immediate: true },
+    );
+
+    return {
+      openManageDialog,
+      sshKeys,
+      selectedKeys,
+      selectedKey,
+      isViewSSHKey,
+      defaultKeyData,
+      selectedKeysString,
+      DashboardRoutes,
+
+      capitalize,
+      onSelectKey,
+      onCloseSelectKey,
+      selectKey,
+    };
+  },
+});
+</script>
+
+<style>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/packages/playground/src/components/ssh_keys/SshDataDialog.vue b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
new file mode 100644
index 0000000000..efab0da3a5
--- /dev/null
+++ b/packages/playground/src/components/ssh_keys/SshDataDialog.vue
@@ -0,0 +1,103 @@
+<template>
+  <v-dialog
+    @click:outside="() => $emit('close')"
+    @keydown.esc="() => $emit('close')"
+    v-model="$props.open"
+    max-width="750"
+  >
+    <template v-slot:default>
+      <v-card>
+        <v-toolbar color="primary" class="custom-toolbar">
+          <p class="mb-5">SSH-Key Detials</p>
+        </v-toolbar>
+
+        <v-card-text>
+          <template v-for="[_key, value] of Object.entries(selectedKey).sort()" :key="_key">
+            <template v-if="!notNeededFields.includes(_key)">
+              <CopyInputWrapper v-if="_key !== 'publicKey'" :data="value" #="{ props: copyInputProps }">
+                <v-text-field v-bind="{ ...copyInputProps }" :label="_key" :model-value="value" :readonly="true" />
+              </CopyInputWrapper>
+              <CopyInputWrapper v-else :data="value" #="{ props: copyInputProps }">
+                <v-textarea
+                  :class="value.length ? 'ssh-key' : ''"
+                  :model-value="value"
+                  :readonly="true"
+                  label="Public SSH Key"
+                  no-resize
+                  :spellcheck="false"
+                  v-bind="{ ...copyInputProps }"
+                />
+              </CopyInputWrapper>
+            </template>
+          </template>
+
+          <v-tooltip text="Key status">
+            <template #activator="{ props }">
+              <v-chip v-bind="props" color="primary" v-if="selectedKey.isActive">Active</v-chip>
+              <v-chip v-bind="props" color="grey-lighten-1" v-else>Inactive</v-chip>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip text="Created at">
+            <template #activator="{ props }">
+              <v-chip v-bind="props" class="ml-2" color="primary">{{ selectedKey.createdAt }}</v-chip>
+            </template>
+          </v-tooltip>
+        </v-card-text>
+
+        <v-card-actions class="mb-3 custom-actions">
+          <v-spacer></v-spacer>
+          <div class="mt-2">
+            <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
+          </div>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { capitalize, defineComponent, type PropType } from "vue";
+
+import type { SSHKeyData } from "@/types";
+
+export default defineComponent({
+  name: "SSHDataDialog",
+  emits: ["close"],
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    selectedKey: {
+      type: Object as PropType<SSHKeyData>,
+      required: true,
+    },
+  },
+  setup() {
+    const notNeededFields = ["id", "activating", "deleting", "isActive", "createdAt"];
+    return {
+      notNeededFields,
+      capitalize,
+    };
+  },
+});
+</script>
+
+<style>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+.ssh-key .v-field__input {
+  height: 230px !important;
+}
+.custom-actions {
+  border-top: 1px solid rgb(101 99 99);
+  display: flex;
+  justify-content: center;
+  margin-right: 15px;
+  margin-left: 15px;
+  margin-top: 15px;
+}
+</style>
diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
new file mode 100644
index 0000000000..014f111584
--- /dev/null
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -0,0 +1,278 @@
+<template>
+  <v-dialog
+    @click:outside="() => $emit('close')"
+    @keydown.esc="() => $emit('close')"
+    v-model="$props.open"
+    max-width="750"
+  >
+    <template v-slot:default>
+      <v-card>
+        <v-toolbar color="primary" class="custom-toolbar">
+          <p v-if="$props.dialogType === SSHCreationMethod.Generate" class="mb-5">Add new SSH Key</p>
+          <p v-else-if="$props.dialogType === SSHCreationMethod.Import" class="mb-5">Import an exact SSH Key</p>
+        </v-toolbar>
+
+        <v-card-text>
+          <input-tooltip
+            width="500"
+            location="top right"
+            tooltip="Enter a descriptive name for your SSH key to easily identify it later, e.g., 'My-Laptop-Key' or 'Work-Server-Key'."
+          >
+            <v-text-field
+              hint="Leave this field empty to generate a name automatically, or enter a custom name to save it with your key."
+              :rules="[
+                keyName.length < 15 || 'Please enter a key name with fewer than 15 characters.',
+                !keyName.includes(' ') || 'Key names cannot include spaces. Please use a name without spaces.',
+              ]"
+              class="mb-4"
+              hide-details="auto"
+              v-model="keyName"
+              label="name"
+            />
+          </input-tooltip>
+
+          <v-alert width="95%" class="mb-4" type="info">
+            Updating or generating SSH key will cost you up to 0.01 TFT
+          </v-alert>
+
+          <div v-if="$props.dialogType === SSHCreationMethod.Generate" class="create">
+            <v-alert width="95%" type="info" class="mt-4">
+              We will not keep your private key information. Be sure to save the private key downloaded after creation.
+            </v-alert>
+          </div>
+
+          <div class="import" v-if="$props.dialogType === SSHCreationMethod.Import">
+            <input-tooltip
+              class="mt-4"
+              width="500"
+              location="top right"
+              #="{ props }"
+              tooltip="This key will be used for authentication when accessing remote servers securely via SSH protocol."
+            >
+              <CopyInputWrapper :data="sshKey" #="{ props: copyInputProps }">
+                <v-textarea
+                  hide-details="auto"
+                  v-model.trim="sshKey"
+                  no-resize
+                  label="Public ssh key"
+                  v-bind="{ ...props, ...copyInputProps }"
+                  :rules="sshRules(sshKey)"
+                >
+                </v-textarea>
+              </CopyInputWrapper>
+            </input-tooltip>
+          </div>
+        </v-card-text>
+
+        <v-card-actions class="custom-actions">
+          <v-spacer></v-spacer>
+          <div class="mt-3">
+            <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
+
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Generate"
+              @click="generateSSHKey"
+              :loading="generating"
+              :disabled="generating || !!generatedSshKey"
+              variant="outlined"
+              color="secondary"
+            >
+              Generate and Save
+            </v-btn>
+            <v-btn
+              v-if="$props.dialogType === SSHCreationMethod.Import"
+              :loading="$props.savingKey"
+              :disabled="!sshKey || !isValidSSHKey(sshKey)"
+              color="secondary"
+              variant="outlined"
+              text="Save"
+              @click="createNewSSHKey"
+            ></v-btn>
+          </div>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { type Profile, useProfileManager } from "@/stores/profile_manager";
+import { SSHCreationMethod, type SSHKeyData } from "@/types";
+import { formatSSHKeyTableCreatedAt } from "@/utils/date";
+import { type Balance, getGrid, loadBalance } from "@/utils/grid";
+import { isEnoughBalance } from "@/utils/helpers";
+import { generateSSHKeyName } from "@/utils/strings";
+import { isValidSSHKey } from "@/utils/validators";
+
+export default defineComponent({
+  emits: ["close", "save", "generate"],
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    generating: {
+      type: Boolean,
+      required: false,
+    },
+    generatedSshKey: {
+      type: String,
+      required: false,
+    },
+    savingKey: {
+      type: Boolean,
+      required: false,
+    },
+    allKeys: {
+      type: Object as PropType<SSHKeyData[]>,
+      required: true,
+    },
+    dialogType: {
+      type: Object as PropType<SSHCreationMethod>,
+      required: true,
+    },
+  },
+
+  setup(props, { emit }) {
+    const profileManager = useProfileManager();
+    const sshKey = ref<string>("");
+    const keyName = ref<string>(generateUniqueSSHKeyName());
+    const createdKey = ref<SSHKeyData | null>(null); // Initialize createdKey with null
+    const balance = ref<Balance>();
+    const hasEnoughBalance = computed(() => isEnoughBalance(balance.value, 0.01));
+    const loadingBalance = ref<boolean>(false);
+    let interval: any;
+
+    watch(
+      () => props.open,
+      isOpen => {
+        if (isOpen) {
+          const now = new Date();
+          const lastID = props.allKeys.length ? props.allKeys[props.allKeys.length - 1].id : 1;
+
+          keyName.value = generateUniqueSSHKeyName();
+          sshKey.value = "";
+          createdKey.value = {
+            id: lastID + 1,
+            publicKey: props.generatedSshKey as string,
+            createdAt: formatSSHKeyTableCreatedAt(now),
+            name: keyName.value.length === 0 ? generateUniqueSSHKeyName() : keyName.value,
+            isActive: true,
+          };
+        }
+      },
+      { deep: true },
+    );
+
+    watch(
+      () => props.generatedSshKey,
+      () => {
+        if (props.generatedSshKey?.length) {
+          createNewSSHKey();
+        }
+      },
+      { deep: true },
+    );
+
+    function generateSSHKey() {
+      emit("generate", createdKey.value);
+    }
+
+    function createNewSSHKey() {
+      if (createdKey.value) {
+        const isNewSSHKey = ref<boolean>(props.dialogType === SSHCreationMethod.Generate);
+        createdKey.value.publicKey = isNewSSHKey.value ? props.generatedSshKey || "" : sshKey.value;
+        createdKey.value.name = keyName.value;
+        emit("save", createdKey.value);
+      }
+    }
+
+    function generateUniqueSSHKeyName(depth = 0): string {
+      const keyName: string = generateSSHKeyName();
+      if (!props.allKeys.length) {
+        return keyName;
+      }
+
+      const exists: boolean = props.allKeys.some(key => key.name === keyName);
+
+      if (exists && depth < 100) {
+        return generateUniqueSSHKeyName(depth + 1);
+      }
+
+      return keyName;
+    }
+
+    async function __loadBalance(profile?: Profile, tries = 1) {
+      profile = profile || profileManager.profile!;
+      if (!profile) return;
+
+      try {
+        loadingBalance.value = true;
+        const grid = await getGrid(profile);
+        balance.value = await loadBalance(grid!);
+        loadingBalance.value = false;
+      } catch {
+        if (tries > 10) {
+          loadingBalance.value = false;
+          return;
+        }
+
+        setTimeout(() => __loadBalance(profile, tries + 1), Math.floor(Math.exp(tries) * 1_000));
+      }
+    }
+
+    watch(
+      () => profileManager.profile,
+      profile => {
+        if (profile) {
+          __loadBalance(profile);
+          if (interval) clearInterval(interval);
+          interval = setInterval(__loadBalance.bind(undefined, profile), 1000 * 60 * 2);
+        } else {
+          if (interval) clearInterval(interval);
+          balance.value = undefined;
+        }
+      },
+      { immediate: true, deep: true },
+    );
+
+    function sshRules(value: any) {
+      return [
+        (v: any) => !!v || "SSH key is required.",
+        (v: string) =>
+          isValidSSHKey(v) ||
+          "The SSH key you provided is not valid. Please double-check that it is copied correctly and follows the correct format.",
+      ];
+    }
+
+    return {
+      keyName,
+      createdKey,
+      hasEnoughBalance,
+      sshKey,
+      SSHCreationMethod,
+
+      generateUniqueSSHKeyName,
+      createNewSSHKey,
+      sshRules,
+      generateSSHKey,
+      isValidSSHKey,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+.custom-actions {
+  border-top: 1px solid rgb(101 99 99);
+  display: flex;
+  justify-content: center;
+  margin: 13px;
+}
+</style>
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
new file mode 100644
index 0000000000..7fa8ce8689
--- /dev/null
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -0,0 +1,244 @@
+<template>
+  <v-card class="pt-6 pl-6 pr-6 mb-4">
+    <div class="head">
+      <h2 class="text-light">
+        <v-icon>{{ headerIcon }}</v-icon>
+        {{ headerTitle }}
+      </h2>
+    </div>
+
+    <div class="table mt-3">
+      <v-alert type="info">
+        Clicking on the <strong>Active</strong> or <strong>Inactive</strong> status will toggle the
+        <strong>activation</strong>/<strong>deactivation</strong> of the key.
+      </v-alert>
+
+      <v-data-table
+        show-select
+        :no-data-text="capitalize(`No keys found.`)"
+        class="pa-5"
+        v-model="selectedKeys"
+        :loading="loading"
+        :headers="headers"
+        :items="sshKeys"
+        loading-text="Loading..."
+        @click:row="(_, { item }) => $emit('view', item.raw)"
+      >
+        <template #loading> </template>
+        <template #[`item.createdAt`]="{ item }">
+          <v-tooltip location="bottom" :text="`The date when this SSH key was created.`">
+            <template #activator="{ props }">
+              <v-chip color="primary" v-bind="props">
+                {{ item.raw.createdAt }}
+              </v-chip>
+            </template>
+          </v-tooltip>
+        </template>
+
+        <template #[`item.name`]="{ item }">
+          <v-tooltip
+            location="bottom"
+            :text="`This name is used to associate between the key and its corresponding system or deployment.`"
+          >
+            <template #activator="{ props }">
+              <p v-bind="props">
+                {{ item.raw.name || "-" }}
+              </p>
+            </template>
+          </v-tooltip>
+        </template>
+
+        <template #[`item.fingerPrint`]="{ item }">
+          <v-tooltip
+            location="bottom"
+            :text="`The fingerprint of an SSH key is a unique identifier generated from the key's contents. It's displayed as a sequence of hexadecimal characters and serves to verify the key's authenticity.`"
+          >
+            <template #activator="{ props }">
+              <p v-bind="props">
+                {{ item.raw.fingerPrint || "-" }}
+              </p>
+            </template>
+          </v-tooltip>
+        </template>
+
+        <template #[`item.activation`]="{ item }">
+          <v-tooltip
+            location="bottom"
+            v-if="item.raw.isActive"
+            :text="`The '${item.raw.name}' key is currently activated and will be utilized in deployments.`"
+          >
+            <template #activator="{ props }">
+              <VCheckboxBtn
+                class="d-inline"
+                :disabled="loading"
+                v-bind="props"
+                :loading="item.raw.activating"
+                color="secondary"
+                @click="activateKey(item.raw)"
+                :model-value="item.raw.isActive"
+              />
+            </template>
+          </v-tooltip>
+
+          <v-tooltip
+            location="bottom"
+            v-else
+            :text="`Click to activate the '${item.raw.name}' for use in deployments.`"
+          >
+            <template #activator="{ props }">
+              <VCheckboxBtn
+                class="d-inline"
+                :disabled="loading"
+                v-bind="props"
+                :loading="item.raw.activating"
+                :color="theme.name.value === AppThemeSelection.light ? '' : 'grey-lighten-1'"
+                @click="activateKey(item.raw)"
+                :model-value="item.raw.isActive"
+              />
+            </template>
+          </v-tooltip>
+        </template>
+
+        <template #bottom></template>
+      </v-data-table>
+    </div>
+
+    <div class="bottom mt-3 d-flex justify-end">
+      <v-tooltip location="bottom" text="Export all selected keys.">
+        <template #activator="{ props }">
+          <v-btn
+            :disabled="loading || selectedKeys.length === 0 || $props.sshKeys.length === 0 || deleting"
+            class="mr-2"
+            :loading="loading"
+            v-bind="props"
+            prepend-icon="mdi-export"
+            color="primary"
+            variant="tonal"
+            @click="() => $emit('export', selectedKeys)"
+          >
+            Export
+          </v-btn>
+        </template>
+      </v-tooltip>
+
+      <v-tooltip location="bottom" text="Delete all selected keys.">
+        <template #activator="{ props }">
+          <v-btn
+            :disabled="loading || selectedKeys.length === 0 || deleting"
+            :loading="deleting"
+            v-bind="props"
+            variant="tonal"
+            prepend-icon="mdi-trash-can-outline"
+            color="error"
+            @click="deleteSelected"
+          >
+            Delete
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { capitalize, defineComponent, type PropType, ref } from "vue";
+import { useTheme } from "vuetify";
+
+import type { SSHKeyData, VDataTableHeader } from "@/types";
+import { AppThemeSelection } from "@/utils/app_theme";
+
+export default defineComponent({
+  props: {
+    sshKeys: {
+      type: Array as PropType<SSHKeyData[]>,
+      required: true,
+    },
+    headerTitle: {
+      type: String,
+      required: true,
+    },
+    headerIcon: {
+      type: String,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    deleting: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  emits: ["inactive", "active", "delete", "view", "update:keys", "export"],
+
+  setup(props, { emit }) {
+    const selectedKeys = ref<number[]>([]); // IDs
+    const theme = useTheme();
+
+    const headers: VDataTableHeader = [
+      {
+        title: "ID",
+        key: "id",
+      },
+      {
+        title: "Name",
+        key: "name",
+      },
+      {
+        title: "Creation Datetime",
+        key: "createdAt",
+      },
+      {
+        title: "Key Fingerprint",
+        key: "fingerPrint",
+      },
+      {
+        title: "Active",
+        key: "activation",
+        sortable: false,
+      },
+    ];
+
+    const deleteSelected = () => {
+      const ids: number[] = [];
+      Object.keys(selectedKeys.value).forEach(key => ids.push(selectedKeys.value[key as any]));
+
+      const filteredKeys = props.sshKeys.filter(_key => ids.includes(_key.id));
+      emit("delete", filteredKeys);
+      selectedKeys.value = [];
+    };
+
+    const deleteKey = (key: SSHKeyData) => {
+      emit("delete", [key]);
+    };
+
+    const activateKey = (key: SSHKeyData) => {
+      if (key.isActive) {
+        emit("inactive", key);
+      } else {
+        emit("active", key);
+      }
+    };
+
+    return { headers, selectedKeys, capitalize, theme, AppThemeSelection, deleteSelected, deleteKey, activateKey };
+  },
+});
+</script>
+
+<style scoped>
+.head {
+  border-bottom: 1px solid #8d848d;
+  padding-bottom: 15px;
+}
+
+.bottom {
+  width: 100%;
+  border-top: 1px solid #8d848d;
+  padding: 15px;
+}
+.activation {
+  cursor: pointer;
+}
+</style>
diff --git a/packages/playground/src/router/routes.ts b/packages/playground/src/router/routes.ts
index fd3c59b182..7c0b65af96 100644
--- a/packages/playground/src/router/routes.ts
+++ b/packages/playground/src/router/routes.ts
@@ -69,7 +69,7 @@ enum ApplicationRoutes {
   Freeflow = "/deploy/applications/freeflow/",
 }
 
-export const DashboardRoutes = {
+const DashboardRoutes = {
   TFGrid: { ...TFGridRoutes },
   TFChain: { ...TFChainRoutes },
   Deploy: { ...DeployRoutes },
@@ -78,4 +78,16 @@ export const DashboardRoutes = {
   Other: { ...OtherRoutes },
   VirtualMachines: { ...VirtualMachinesRoutes },
   Orchestrators: { ...OrchestratorsRoutes },
-} as const;
+};
+
+export {
+  DashboardRoutes,
+  VirtualMachinesRoutes,
+  TFGridRoutes,
+  TFChainRoutes,
+  OtherRoutes,
+  OrchestratorsRoutes,
+  FarmRoutes,
+  DeployRoutes,
+  ApplicationRoutes,
+};
diff --git a/packages/playground/src/stores/profile_manager.ts b/packages/playground/src/stores/profile_manager.ts
index 887e3a0ea5..cce44e5bbf 100644
--- a/packages/playground/src/stores/profile_manager.ts
+++ b/packages/playground/src/stores/profile_manager.ts
@@ -1,11 +1,13 @@
 import type { KeypairType } from "@threefold/grid_client";
 import { defineStore } from "pinia";
 
+import type { SSHKeyData } from "@/types";
+
 import { useGrid } from "./grid";
 
 export interface Profile {
   mnemonic: string;
-  ssh: string;
+  ssh: SSHKeyData[];
   twinId: number;
   address: string;
   relay: string;
@@ -28,7 +30,7 @@ const useProfileManager = defineStore("profile-manager", {
       this.profile = profile;
       useGrid().set(profile);
     },
-    updateSSH(ssh: string) {
+    updateSSH(ssh: SSHKeyData[]) {
       if (this.profile) {
         this.profile.ssh = ssh;
       }
diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
index ac80ab56d0..3423399e64 100644
--- a/packages/playground/src/types/index.ts
+++ b/packages/playground/src/types/index.ts
@@ -353,3 +353,20 @@ export const nodeInitializer: GridNode = {
   },
   price_usd: 0,
 };
+
+export interface SSHKeyData {
+  id: number;
+  publicKey: string;
+  name: string;
+  createdAt: string;
+  isActive: boolean;
+  fingerPrint?: string;
+  deleting?: boolean;
+  activating?: boolean;
+}
+
+export enum SSHCreationMethod {
+  None = "",
+  Generate = "generate",
+  Import = "import",
+}
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
index 849f97ca84..934e5b838c 100644
--- a/packages/playground/src/utils/date.ts
+++ b/packages/playground/src/utils/date.ts
@@ -3,3 +3,7 @@ import moment from "moment";
 export default function toHumanDate(timeInSeconds: number): string {
   return moment(timeInSeconds * 1000).format("M/D/YY, h:m A");
 }
+
+export function formatSSHKeyTableCreatedAt(date: Date) {
+  return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+}
diff --git a/packages/playground/src/utils/grid.ts b/packages/playground/src/utils/grid.ts
index 637b8aafa4..aab386339d 100644
--- a/packages/playground/src/utils/grid.ts
+++ b/packages/playground/src/utils/grid.ts
@@ -1,6 +1,8 @@
 import { BackendStorageType, GridClient, KeypairType, NetworkEnv } from "@threefold/grid_client";
 import { InsufficientBalanceError } from "@threefold/types";
 
+import type { SSHKeyData } from "@/types";
+
 import type { Profile } from "../stores/profile_manager";
 const network = (process.env.NETWORK as NetworkEnv) || window.env.NETWORK;
 export async function getGrid(
@@ -96,30 +98,27 @@ export async function loadProfile(grid: GridClient): Promise<Profile> {
 
 export async function getMetadata(grid: GridClient): Promise<{ [key: string]: any }> {
   try {
-    const metadata = await grid.kvstore.get({ key: "metadata" });
-    return JSON.parse(metadata);
-  } catch {
+    const metadata = await grid.tfchain.backendStorage.load("metadata");
+    return metadata;
+  } catch (e) {
+    console.log(`Error while trying to get metadata due: ${e}`);
     return {};
   }
 }
 
-export async function readSSH(grid: GridClient): Promise<string> {
+export async function readSSH(grid: GridClient): Promise<SSHKeyData[]> {
   const metadata = await getMetadata(grid);
-  return metadata.sshkey || "";
+  return metadata.sshkey;
 }
 
-export async function storeSSH(grid: GridClient, newSSH: string): Promise<void> {
+export async function storeSSH(grid: GridClient, newSSH: SSHKeyData[]): Promise<void> {
   const metadata = await getMetadata(grid);
-  const ssh = metadata.sshkey;
-  if (ssh === newSSH) return;
-
-  return grid.kvstore.set({
-    key: "metadata",
-    value: JSON.stringify({
-      ...metadata,
-      sshkey: newSSH,
-    }),
+  const ext = await grid.tfchain.backendStorage.dump("metadata", {
+    ...metadata,
+    sshkey: newSSH,
   });
+
+  await grid.tfclient.applyAllExtrinsics(ext);
 }
 
 export async function readEmail(grid: GridClient): Promise<string> {
@@ -133,11 +132,10 @@ export async function storeEmail(grid: GridClient, newEmail: string): Promise<vo
   const email = metadata.email;
   if (email === newEmail) return;
 
-  return grid.kvstore.set({
-    key: "metadata",
-    value: JSON.stringify({
-      ...metadata,
-      email: newEmail,
-    }),
+  const ext = await grid.tfchain.backendStorage.dump("metadata", {
+    ...metadata,
+    email: newEmail,
   });
+
+  await grid.tfclient.applyAllExtrinsics(ext);
 }
diff --git a/packages/playground/src/utils/strings.ts b/packages/playground/src/utils/strings.ts
index ea3543e008..839c664d47 100644
--- a/packages/playground/src/utils/strings.ts
+++ b/packages/playground/src/utils/strings.ts
@@ -24,3 +24,32 @@ function generateString(from: string, length: number): string {
   }
   return str;
 }
+
+export function generateSSHKeyName() {
+  // List of words to choose from
+  const words = [
+    "moon",
+    "earth",
+    "sun",
+    "star",
+    "galaxy",
+    "nebula",
+    "comet",
+    "planet",
+    "asteroid",
+    "satellite",
+    "mercury",
+    "venus",
+    "mars",
+    "jupiter",
+    "saturn",
+    "uranus",
+    "neptune",
+    "pluto",
+    "meteor",
+    "cosmos",
+  ];
+
+  const keyName = words.sort(() => Math.random() - 0.5)[0];
+  return keyName;
+}
diff --git a/packages/playground/src/views/sshkey_view.vue b/packages/playground/src/views/sshkey_view.vue
index c3057805c7..4c27ac5e9c 100644
--- a/packages/playground/src/views/sshkey_view.vue
+++ b/packages/playground/src/views/sshkey_view.vue
@@ -1,158 +1,372 @@
 <template>
-  <v-card>
-    <v-alert v-if="hasEnoughBalance" type="info" variant="tonal" class="ma-4">
-      Updating or generating SSH key will cost you up to 0.01 TFT
-    </v-alert>
-    <v-alert v-else-if="balance" type="warning" variant="tonal" class="ma-4">
-      Your balance is not enough to {{ profileManager.profile?.ssh ? "update the" : `generate a` }} SSH key. Please make
-      sure you have at least 0.01 TFT.
+  <v-card class="pa-6 mb-4">
+    <div>
+      <h2 class="text-light">
+        <v-icon> mdi-cog-sync </v-icon>
+        Manage SSH Keys
+      </h2>
+      <p class="mt-2">
+        Facilitating access to deployed machines involves the incorporation or adaptation of SSH keys, with the
+        flexibility to manage multiple keys seamlessly, allowing users to switch between them. Moreover, users can
+        activate individual keys or enable them all, streamlining the process of distributing them to the machines and
+        effectively managing accessibility to the deployed nodes.
+      </p>
+    </div>
+  </v-card>
+
+  <div v-if="migrating">
+    <v-progress-linear color="info" indeterminate></v-progress-linear>
+    <v-alert type="info" class="mb-3 pa-6" variant="tonal">
+      Migrating the old key. This process may require 15 to 30 seconds. Thank you for your patience.
     </v-alert>
-    <VTooltip
-      text="SSH Keys are used to authenticate you to the deployment instance for management purposes. If you don't have an SSH Key or are not familiar, we can generate one for you."
-      location="top right"
-      max-width="600px"
-    >
-      <template #activator="{ props }">
-        <CopyInputWrapper :data="profileManager.profile?.ssh" #="{ props: copyInputProps }">
-          <VTextarea
-            class="mx-4"
-            label="Public SSH Key"
-            no-resize
-            :spellcheck="false"
-            v-model.trim="ssh"
-            v-bind="{ ...props, ...copyInputProps }"
-            :readonly="!hasEnoughBalance"
-            :disabled="updatingSSH || generatingSSH"
-            :hint="
-              updatingSSH
-                ? 'Updating your public ssh key.'
-                : generatingSSH
-                ? 'Generating a new public ssh key.'
-                : SSHKeyHint
-            "
-            :persistent-hint="updatingSSH || generatingSSH || !!SSHKeyHint"
-            :rules="sshRules(ssh)"
-          />
-        </CopyInputWrapper>
-
-        <div class="d-flex justify-end mb-5 mx-4">
-          <VBtn
-            class="mr-2 text-subtitle-2"
-            color="secondary"
-            variant="outlined"
-            :disabled="!!ssh || updatingSSH || generatingSSH || !hasEnoughBalance"
-            :loading="generatingSSH"
-            @click="generateSSH"
-          >
-            Generate SSH Keys
-          </VBtn>
-          <VBtn
-            class="text-subtitle-2"
-            color="secondary"
-            variant="outlined"
-            @click="updateSSH"
-            :disabled="!ssh || profileManager.profile?.ssh === ssh || updatingSSH || !hasEnoughBalance"
-            :loading="updatingSSH"
-          >
-            Update Public SSH Key
-          </VBtn>
-        </div>
-      </template>
-    </VTooltip>
+  </div>
+
+  <v-card v-else class="mb-3 pa-3" color="transparent">
+    <v-col class="d-flex justify-end">
+      <v-btn
+        variant="outlined"
+        class="mr-2"
+        @click="() => openDialog(SSHCreationMethod.Import)"
+        prepend-icon="mdi-key-plus"
+        color="secondary"
+        :disabled="loading"
+      >
+        Import
+      </v-btn>
+      <v-btn
+        :loading="isExporting"
+        @click="exportKeys(allKeys)"
+        variant="outlined"
+        class="mr-2"
+        prepend-icon="mdi-export"
+        color="secondary"
+        :disabled="!allKeys || allKeys.length === 0 || loading"
+      >
+        Export
+      </v-btn>
+      <v-btn
+        class="mr-2"
+        :disabled="loading"
+        @click="openDialog(SSHCreationMethod.Generate)"
+        prepend-icon="mdi-key-plus"
+        color="primary"
+      >
+        Generate
+      </v-btn>
+    </v-col>
   </v-card>
+
+  <ssh-table
+    v-if="!migrating"
+    @active="setActiveKey"
+    @inactive="setInactiveKey"
+    @delete="deleteKey($event)"
+    @view="viewSelectedKey"
+    @export="exportKeys($event)"
+    :header-icon="'mdi-key-chain-variant'"
+    :header-title="'Active Keys'"
+    :ssh-keys="activeKeys"
+    :loading="loading"
+    :deleting="deleting"
+  />
+
+  <ssh-table
+    v-if="!migrating"
+    @active="setActiveKey"
+    @inactive="setInactiveKey"
+    @delete="deleteKey($event)"
+    @view="viewSelectedKey"
+    @export="exportKeys($event)"
+    :header-icon="'mdi-key-chain'"
+    :header-title="'All Keys'"
+    :ssh-keys="allKeys"
+    :loading="loading"
+    :deleting="deleting"
+  />
+
+  <!-- Dialogs -->
+  <!-- Generate -->
+  <ssh-form-dialog
+    :open="dialogType === SSHCreationMethod.Generate"
+    :all-keys="allKeys"
+    :dialog-type="dialogType"
+    :generating="generatingSSH"
+    :generated-ssh-key="generatedSSHKey"
+    :saving-key="savingKey"
+    @save="addKey($event)"
+    @close="closeDialog"
+    @generate="generateSSHKeys($event)"
+  />
+
+  <!-- Import -->
+  <ssh-form-dialog
+    :open="dialogType === SSHCreationMethod.Import"
+    :all-keys="allKeys"
+    :dialog-type="dialogType"
+    :generating="generatingSSH"
+    :generated-ssh-key="generatedSSHKey"
+    :saving-key="savingKey"
+    @save="addKey($event)"
+    @close="closeDialog"
+    @generate="generateSSHKeys($event)"
+  />
+
+  <!-- View -->
+  <ssh-data-dialog :open="isViewKey" :selected-key="selectedKey" @close="isViewKey = false" />
 </template>
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-import { computed } from "vue";
+
+<script lang="ts">
+import crypto from "crypto";
+import { computed, defineComponent, ref } from "vue";
+import { onMounted } from "vue";
 import { generateKeyPair } from "web-ssh-keygen";
 
-import { isValidSSHKey } from "@/utils/validators";
-
-import { useProfileManager } from "../stores";
-import type { Profile } from "../stores/profile_manager";
-import { type Balance, getGrid, loadBalance, storeSSH } from "../utils/grid";
-import { downloadAsFile } from "../utils/helpers";
-import { isEnoughBalance } from "../utils/helpers";
-
-const balance = ref<Balance>();
-const SSHKeyHint = ref("");
-const generatingSSH = ref(false);
-const profileManager = useProfileManager();
-const ssh = ref(profileManager.profile!.ssh);
-const updatingSSH = ref(false);
-const loadingBalance = ref(false);
-
-const hasEnoughBalance = computed(() => isEnoughBalance(balance.value, 0.01));
-let interval: any;
-
-async function __loadBalance(profile?: Profile, tries = 1) {
-  profile = profile || profileManager.profile!;
-  if (!profile) return;
-
-  try {
-    loadingBalance.value = true;
-    const grid = await getGrid(profile);
-    balance.value = await loadBalance(grid!);
-    loadingBalance.value = false;
-  } catch {
-    if (tries > 10) {
-      loadingBalance.value = false;
-      return;
-    }
-
-    setTimeout(() => __loadBalance(profile, tries + 1), Math.floor(Math.exp(tries) * 1_000));
-  }
-}
-watch(
-  () => profileManager.profile,
-  profile => {
-    if (profile) {
-      __loadBalance(profile);
-      if (interval) clearInterval(interval);
-      interval = setInterval(__loadBalance.bind(undefined, profile), 1000 * 60 * 2);
-    } else {
-      if (interval) clearInterval(interval);
-      balance.value = undefined;
-    }
+import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
+import SshFormDialog from "@/components/ssh_keys/SshFormDialog.vue";
+import SshTable from "@/components/ssh_keys/SshTable.vue";
+import { useProfileManager } from "@/stores";
+import { SSHCreationMethod, type SSHKeyData } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import { formatSSHKeyTableCreatedAt } from "@/utils/date";
+import { getGrid, getMetadata, storeSSH } from "@/utils/grid";
+import { downloadAsFile, downloadAsJson } from "@/utils/helpers";
+
+export default defineComponent({
+  name: "SSHView",
+  components: {
+    SshTable,
+    SshFormDialog,
+    SshDataDialog,
   },
-  { immediate: true, deep: true },
-);
-async function updateSSH() {
-  updatingSSH.value = true;
-  const grid = await getGrid(profileManager.profile!);
-  await storeSSH(grid!, ssh.value);
-  profileManager.updateSSH(ssh.value);
-  updatingSSH.value = false;
-  SSHKeyHint.value = "SSH key updated successfully.";
-}
-async function generateSSH() {
-  generatingSSH.value = true;
-  const keys = await generateKeyPair({
-    alg: "RSASSA-PKCS1-v1_5",
-    hash: "SHA-256",
-    name: "Threefold",
-    size: 4096,
-  });
-  const grid = await getGrid(profileManager.profile!);
-  await storeSSH(grid!, keys.publicKey);
-  profileManager.updateSSH(keys.publicKey);
-  ssh.value = profileManager.profile!.ssh;
-  downloadAsFile("id_rsa", keys.privateKey);
-  generatingSSH.value = false;
-  SSHKeyHint.value = "SSH key generated successfully.";
-}
-
-function sshRules(value: any) {
-  return [
-    (v: any) => !!v || "SSH key is required.",
-    (v: string) =>
-      isValidSSHKey(v) ||
-      "The SSH key you provided is not valid. Please double-check that it is copied correctly and follows the correct format.",
-  ];
-}
-</script>
-<script lang="ts">
-export default {
-  name: "SSHkey",
-};
+
+  setup() {
+    const isViewKey = ref(false);
+    const isExporting = ref(false);
+    const generatingSSH = ref(false);
+    const generatedSSHKey = ref("");
+    const selectedKey = ref<SSHKeyData>({
+      id: 0,
+      publicKey: "",
+      name: "",
+      createdAt: "",
+      isActive: false,
+    });
+    const migrating = ref(false);
+
+    const openDialog = (type: SSHCreationMethod) => {
+      dialogType.value = type;
+    };
+
+    const closeDialog = () => {
+      dialogType.value = SSHCreationMethod.None;
+      generatedSSHKey.value = "";
+    };
+
+    // Add SSH key
+    const addKey = async (key: SSHKeyData) => {
+      savingKey.value = true;
+      if (!key.fingerPrint) {
+        key.fingerPrint = calculateFingerprint(key.publicKey);
+      }
+
+      allKeys.value.push(key);
+      await updateSSHKeysInChain();
+      createCustomToast(`The created ${key.name} key has been saved.`, ToastType.success);
+      savingKey.value = false;
+      closeDialog();
+    };
+
+    const viewSelectedKey = (key: SSHKeyData) => {
+      selectedKey.value = key;
+      isViewKey.value = true;
+    };
+
+    const setActiveKey = async (key: SSHKeyData) => {
+      key.activating = true;
+      key.isActive = true;
+      await updateSSHKeysInChain();
+      createCustomToast(`The activation of ${key.name} key has been enabled.`, ToastType.success);
+      key.activating = false;
+    };
+
+    const setInactiveKey = async (key: SSHKeyData) => {
+      key.activating = true;
+      key.isActive = false;
+      await updateSSHKeysInChain();
+      createCustomToast(`The activation of ${key.name} key has been disabled.`, ToastType.success);
+      key.activating = false;
+    };
+
+    const deleteKey = async (selectedKeys: SSHKeyData[]) => {
+      deleting.value = true;
+      const ids: number[] = selectedKeys.map(key => key.id);
+      allKeys.value = allKeys.value.filter(_key => !ids.includes(_key.id));
+      selectedKeys.map(key => (key.deleting = true));
+      await updateSSHKeysInChain();
+      selectedKeys.map(key => (key.deleting = false));
+      createCustomToast(
+        `The selected ${selectedKeys.length > 1 ? "keys" : "key"} has been deleted successfully.`,
+        ToastType.success,
+      );
+      deleting.value = false;
+    };
+
+    const generateSSHKeys = async (key: SSHKeyData) => {
+      generatingSSH.value = true;
+      const keys = await generateKeyPair({
+        alg: "RSASSA-PKCS1-v1_5",
+        hash: "SHA-256",
+        name: key.name,
+        size: 4096,
+      });
+
+      generatedSSHKey.value = keys.publicKey;
+      key.fingerPrint = calculateFingerprint(keys.publicKey);
+      downloadAsFile("id_rsa", keys.privateKey);
+      createCustomToast(`${key.name} key has been generated successfully.`, ToastType.success);
+      generatingSSH.value = false;
+    };
+
+    const exportKeys = async (keys: SSHKeyData[] | number[]) => {
+      isExporting.value = true;
+      let exportKeys: SSHKeyData[] = [];
+
+      if (Array.isArray(keys) && keys.length > 0 && typeof keys[0] === "number") {
+        exportKeys = allKeys.value.filter(key => keys.includes(key.id as SSHKeyData & number));
+      } else {
+        exportKeys = keys as SSHKeyData[];
+      }
+
+      exportKeys.forEach(key => {
+        delete key.deleting;
+        delete key.activating;
+      });
+
+      downloadAsJson(exportKeys, `ssh_keys.json`);
+      isExporting.value = false;
+    };
+
+    const migrateOldKey = async (publicSSHKey: string) => {
+      migrating.value = true;
+      const parts = publicSSHKey.split(" ");
+      const keyName = parts[parts.length - 1];
+
+      const newKey: SSHKeyData = {
+        createdAt: formatSSHKeyTableCreatedAt(new Date()),
+        name: keyName,
+        id: 1,
+        isActive: true,
+        publicKey: publicSSHKey,
+      };
+
+      allKeys.value.push(newKey);
+      await updateSSHKeysInChain();
+      newKey.fingerPrint = calculateFingerprint(publicSSHKey);
+      migrating.value = false;
+    };
+
+    const profileManager = useProfileManager();
+    const userSshKey = ref<SSHKeyData[] | string>(profileManager.profile!.ssh);
+
+    const loading = ref<boolean>(false);
+    const savingKey = ref<boolean>(false);
+    const deleting = ref<boolean>(false);
+    const allKeys = ref<SSHKeyData[]>([]);
+    const activeKeys = computed(() => (allKeys.value.length ? allKeys.value.filter(key => key.isActive) : []));
+    const dialogType = ref<SSHCreationMethod>(SSHCreationMethod.None);
+
+    const parsePublicKey = (publicKey: string) => {
+      const parts = publicKey.split(" ");
+      return {
+        type: parts[0],
+        data: parts[1],
+        comment: parts[2],
+      };
+    };
+
+    const calculateFingerprint = (publicKey: string) => {
+      if (publicKey.length) {
+        const sshPublicKey = parsePublicKey(publicKey);
+        const md5 = crypto.createHash("md5");
+
+        if (sshPublicKey.data) {
+          md5.update(sshPublicKey.data);
+          const fingerprint = md5
+            .digest("hex")
+            .replace(/(.{2})(?=.)/g, "$1:")
+            .toUpperCase();
+          return fingerprint;
+        }
+      }
+      return "-";
+    };
+
+    const updateSSHKeysInChain = async () => {
+      const copiedKeys = allKeys.value.map(key => {
+        // Remove the fingerprint, activating, and deleting before saving the key to the chain
+        const { fingerPrint, activating, deleting, ...keyWithoutSensitiveProps } = key;
+        return keyWithoutSensitiveProps;
+      });
+
+      // Update the chain with the current sshkeys => this.allkeys
+      const grid = await getGrid(profileManager.profile!);
+      await getMetadata(grid!);
+      await storeSSH(grid!, copiedKeys);
+      profileManager.updateSSH(copiedKeys);
+    };
+
+    onMounted(async () => {
+      if (typeof userSshKey.value === "string") {
+        migrateOldKey(userSshKey.value);
+      } else {
+        loading.value = true;
+        if (!userSshKey.value) {
+          profileManager.updateSSH(allKeys.value);
+        }
+
+        const grid = await getGrid(profileManager.profile!);
+        await getMetadata(grid!);
+
+        allKeys.value = userSshKey.value || [];
+        if (allKeys.value) {
+          // Calculate the fingerprint for each key after saving them to the chain
+          allKeys.value = allKeys.value.map(key => {
+            const fingerprint = calculateFingerprint(key.publicKey);
+            return { ...key, fingerPrint: fingerprint };
+          });
+        }
+        loading.value = false;
+      }
+    });
+
+    return {
+      loading,
+      deleting,
+      allKeys,
+      activeKeys,
+      SSHCreationMethod,
+      dialogType,
+      savingKey,
+      generatingSSH,
+      migrating,
+      isExporting,
+      generatedSSHKey,
+      isViewKey,
+      selectedKey,
+
+      openDialog,
+      closeDialog,
+      addKey,
+      viewSelectedKey,
+      setActiveKey,
+      setInactiveKey,
+      deleteKey,
+      generateSSHKeys,
+      exportKeys,
+      migrateOldKey,
+      calculateFingerprint,
+      updateSSHKeysInChain,
+    };
+  },
+});
 </script>
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index c24b7f953c..8b3dd7b09d 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -74,6 +74,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -108,6 +110,8 @@ const certified = ref(false);
 const ipv4 = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
+
 onMounted(() => {
   disks.value.push({
     name: "disk",
@@ -161,7 +165,7 @@ async function deploy() {
           entryPoint: flist.value!.entryPoint,
           publicIpv4: ipv4.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "USER_ID", value: threebotName.value },
             { key: "DIGITALTWIN_APPID", value: domain },
             { key: "NODE_ENV", value: "staging" },
@@ -201,17 +205,22 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Freeflow instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import rootFs from "../utils/root_fs";
 
 export default {
   name: "TFFreeflow",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index a2cc1f4233..59bfb6589d 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -90,6 +90,9 @@
           }"
           v-model="selectionDetails"
         />
+
+        <!-- Manage the selected keys and send them to the deployment as env var -->
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #disks>
@@ -183,6 +186,7 @@ const images: VmImage[] = [
   },
 ];
 
+const selectedSSHKeys = ref("");
 const name = ref(generateName({ prefix: "vm" }));
 const flist = ref<Flist>();
 const ipv4 = ref(false);
@@ -250,7 +254,7 @@ async function deploy() {
           publicIpv6: ipv6.value,
           planetary: planetary.value,
           mycelium: mycelium.value,
-          envs: [{ key: "SSH_KEY", value: profileManager.profile!.ssh }],
+          envs: [{ key: "SSH_KEY", value: selectedSSHKeys.value }],
           rootFilesystemSize,
           hasGPU: hasGPU.value,
           nodeId: selectionDetails.value?.node?.nodeId,
@@ -269,12 +273,17 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a full virtual machine instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import ExpandableLayout from "../components/expandable_layout.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SelectVmImage, { type VmImage } from "../components/select_vm_image.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 
@@ -284,6 +293,7 @@ export default {
     SelectVmImage,
     SelectSolutionFlavor,
     ExpandableLayout,
+    ManageSshDeployemnt,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index af5d02336f..f88fa00792 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -82,6 +82,8 @@
           }"
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #env>
@@ -241,6 +243,7 @@ const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = computed(() => solution.value?.disk);
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function layoutMount() {
   if (envs.value.length > 0) {
@@ -249,7 +252,7 @@ function layoutMount() {
 
   envs.value.unshift({
     key: "SSH_KEY",
-    value: profileManager.profile!.ssh,
+    value: selectedSSHKeys.value,
   });
 }
 
@@ -305,11 +308,16 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy micro virtual machine instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import ExpandableLayout from "../components/expandable_layout.vue";
 import SelectVmImage from "../components/select_vm_image.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 443dea9767..1018c86ded 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -173,6 +173,8 @@
         }"
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
     <template #footer-actions>
       <v-btn color="secondary" variant="outlined" @click="deploy" :disabled="!valid"> Deploy </v-btn>
@@ -214,6 +216,7 @@ const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = computed(() => storage.value);
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 watch(firstRound, () => lastRoundInput.value.validate(lastRound.value.toString()));
 
@@ -255,7 +258,7 @@ async function deploy() {
           certified: certified.value,
 
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "NETWORK", value: network.value },
             { key: "NODE_TYPE", value: type.value },
             ...(type.value === "participant"
@@ -290,17 +293,22 @@ function customLastRoundValidation(validators: Validators) {
     return validators.min(`Last round must be greater than ${min}`, min + 1)(value);
   };
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import AlgorandCapacity from "../components/algorand_capacity.vue";
 import Networks from "../components/networks.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "TfAlgorand",
-  components: { AlgorandCapacity, Networks },
+  components: { AlgorandCapacity, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index c2cbe8d8e6..a931e8c152 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -77,6 +77,8 @@
             </input-tooltip>
           </input-validator>
         </password-input-wrapper>
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #leader>
@@ -114,6 +116,7 @@ const domain = ref("");
 const password = ref(generatePassword(10));
 const leader = ref(createWorker(generateName({ prefix: "cr" })));
 const workers = ref<CW[]>([]);
+const selectedSSHKeys = ref("");
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -134,14 +137,14 @@ async function deploy() {
           { key: "SWM_NODE_MODE", value: "leader" },
           { key: "CAPROVER_ROOT_DOMAIN", value: domain.value },
           { key: "CAPTAIN_IMAGE_VERSION", value: "latest" },
-          { key: "PUBLIC_KEY", value: profileManager.profile!.ssh },
+          { key: "PUBLIC_KEY", value: selectedSSHKeys.value },
           { key: "DEFAULT_PASSWORD", value: password.value },
           { key: "CAPTAIN_IS_DEBUG", value: "true" },
         ]),
         ...workers.value.map(worker =>
           normalizeCaproverWorker(worker, [
             { key: "SWM_NODE_MODE", value: "worker" },
-            { key: "PUBLIC_KEY", value: profileManager.profile!.ssh },
+            { key: "PUBLIC_KEY", value: selectedSSHKeys.value },
           ]),
         ),
       ],
@@ -183,6 +186,10 @@ function normalizeCaproverWorker(worker: CW, envs: Env[]): Machine {
     certified: worker.certified,
   };
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
@@ -190,6 +197,7 @@ import { createNetwork } from "@/utils/deploy_helpers";
 
 import CaproverWorker, { createWorker } from "../components/caprover_worker.vue";
 import ExpandableLayout from "../components/expandable_layout.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import rootFs from "../utils/root_fs";
 
@@ -198,6 +206,7 @@ export default {
   components: {
     CaproverWorker,
     ExpandableLayout,
+    ManageSshDeployemnt,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 85df7503a9..f545e39d7e 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -64,6 +64,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -102,6 +104,7 @@ const ipv4 = ref(false);
 const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -150,7 +153,7 @@ async function deploy() {
           publicIpv4: ipv4.value,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "CASPERLABS_HOSTNAME", value: domain },
           ],
           nodeId: selectionDetails.value!.node!.nodeId,
@@ -188,17 +191,22 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Casperlabs instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import rootFs from "../utils/root_fs";
 
 export default {
   name: "TFCasperlabs",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index f6daf8f7c9..1eb01f139e 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -85,6 +85,8 @@
           require-domain
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #mail>
@@ -133,6 +135,7 @@ const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/forum-docker-v3.1.2.flist",
   entryPoint: "/sbin/zinit init",
 };
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -182,7 +185,7 @@ async function deploy() {
           planetary: true,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "DISCOURSE_HOSTNAME", value: domain },
             { key: "DISCOURSE_DEVELOPER_EMAILS", value: email.value },
             { key: "DISCOURSE_SMTP_ADDRESS", value: smtp.value.hostname },
@@ -231,17 +234,22 @@ function generatePubKey(): string {
   const keypair = TweetNACL.box.keyPair();
   return Buffer.from(keypair.publicKey).toString("base64");
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfDiscourse",
-  components: { SmtpServer, SelectSolutionFlavor, Networks },
+  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index a9286ec2bd..b289f3e35e 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -60,6 +60,8 @@
             </input-tooltip>
           </password-input-wrapper>
         </input-validator>
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #master>
@@ -98,6 +100,7 @@ const name = ref(generateName({ prefix: "k8s" }));
 const clusterToken = ref(generatePassword(10));
 const master = ref(createWorker(generateName({ prefix: "mr" })));
 const workers = ref<K8sWorker[]>([]);
+const selectedSSHKeys = ref("");
 
 function addWorker() {
   workers.value.push(createWorker());
@@ -118,7 +121,7 @@ async function deploy() {
       clusterToken: clusterToken.value,
       master: master.value!,
       workers: workers.value,
-      sshKey: profileManager.profile!.ssh,
+      sshKey: selectedSSHKeys.value,
     });
 
     layout.value.reloadDeploymentsList();
@@ -128,11 +131,16 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy kubernetes cluster."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import ExpandableLayout from "../components/expandable_layout.vue";
 import K8SWorker from "../components/k8s_worker.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import { normalizeError } from "../utils/helpers";
 
@@ -141,6 +149,7 @@ export default {
   components: {
     K8SWorker,
     ExpandableLayout,
+    ManageSshDeployemnt,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index d5c1a77f08..8e02f4aea8 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -69,6 +69,8 @@
           require-domain
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #smtp>
@@ -112,6 +114,7 @@ const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -167,7 +170,7 @@ async function deploy() {
           planetary: true,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "DB_PASSWORD", value: generatePassword() },
             { key: "SITE_URL", value: "https://" + domain },
             { key: "MATTERMOST_DOMAIN", value: domain },
@@ -213,12 +216,17 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a mattermost instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { normalizeError } from "../utils/helpers";
@@ -226,6 +234,6 @@ import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfMattermost",
-  components: { SmtpServer, SelectSolutionFlavor, Networks },
+  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index b4b2a657ae..49705611cf 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -63,6 +63,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -101,6 +103,7 @@ const ipv4 = ref(false);
 const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -160,7 +163,7 @@ async function deploy() {
           publicIpv4: ipv4.value,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "NEXTCLOUD_DOMAIN", value: domain },
             { key: "NEXTCLOUD_AIO_LINK", value: aio_link },
             { key: "GATEWAY", value: String(has_gateway) },
@@ -201,17 +204,22 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Nextcloud instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import rootFs from "../utils/root_fs";
 
 export default {
   name: "TFNextcloud",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 3d53a7ad17..1216e560ca 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -87,6 +87,8 @@
         }"
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -118,6 +120,8 @@ const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = 2;
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
+
 async function deploy() {
   layout.value.setStatus("deploy");
 
@@ -141,7 +145,7 @@ async function deploy() {
           publicIpv4: true,
           publicIpv6: true,
           planetary: false,
-          envs: [{ key: "SSH_KEY", value: profileManager.profile!.ssh }],
+          envs: [{ key: "SSH_KEY", value: selectedSSHKeys.value }],
           rootFilesystemSize,
           disks: [
             {
@@ -167,14 +171,20 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Node Pilot instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "NodePilot",
+  components: { ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index c67b5898c0..8e1f362b57 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -106,6 +106,8 @@
           require-domain
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #smtp>
@@ -154,6 +156,7 @@ const ipv4 = ref(false);
 const mycelium = ref(false);
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -208,7 +211,7 @@ async function deploy() {
           planetary: true,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "OWNCLOUD_ADMIN_USERNAME", value: username.value },
             { key: "OWNCLOUD_ADMIN_PASSWORD", value: password.value },
             { key: "OWNCLOUD_DOMAIN", value: domain },
@@ -260,12 +263,17 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a owncloud instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { normalizeError } from "../utils/helpers";
@@ -277,6 +285,7 @@ export default {
     SmtpServer,
     SelectSolutionFlavor,
     Networks,
+    ManageSshDeployemnt,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index d00195d4dd..1717cf002d 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -90,6 +90,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -127,6 +129,7 @@ const ipv4 = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -180,7 +183,7 @@ async function deploy() {
           planetary: true,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "PEERTUBE_ADMIN_EMAIL", value: email.value },
             { key: "PT_INITIAL_ROOT_PASSWORD", value: password.value },
             { key: "PEERTUBE_WEBSERVER_HOSTNAME", value: domain },
@@ -220,11 +223,16 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a peertube instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { getGrid } from "../utils/grid";
@@ -233,6 +241,6 @@ import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfPeertube",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 862eecebd3..143601d68d 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -83,6 +83,8 @@
           }"
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #restore>
@@ -143,6 +145,7 @@ const dedicated = ref(false);
 const certified = ref(false);
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
+const selectedSSHKeys = ref("");
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -177,7 +180,7 @@ async function deploy() {
           envs: [
             {
               key: "SSH_KEY",
-              value: profileManager.profile!.ssh,
+              value: selectedSSHKeys.value,
             },
             {
               key: "PRESEARCH_REGISTRATION_CODE",
@@ -207,13 +210,19 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Presearch instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TFPresearch",
+  component: { ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 74b3f70107..2ff5c56a04 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -76,6 +76,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -114,6 +116,7 @@ const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -167,7 +170,7 @@ async function deploy() {
           publicIpv4: ipv4.value,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "CHAIN_ENDPOINT", value: endpoint.value },
             { key: "SUBSQUID_WEBSERVER_HOSTNAME", value: domain },
           ],
@@ -205,17 +208,22 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Subsquid instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfSubsquid",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 92b72c4a4e..1da6e055d7 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -117,6 +117,8 @@
           require-domain
           v-model="selectionDetails"
         />
+
+        <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
 
       <template #smtp>
@@ -165,6 +167,7 @@ const mycelium = ref(false);
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -220,7 +223,7 @@ async function deploy() {
           planetary: true,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "DOMAIN_NAME", value: domain },
             { key: "ADMIN_USERNAME", value: username.value },
             { key: "ADMIN_PASSWORD", value: password.value },
@@ -269,12 +272,17 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a taiga instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { normalizeError } from "../utils/helpers";
@@ -282,6 +290,6 @@ import rootFs from "../utils/root_fs";
 
 export default {
   name: "TfTaiga",
-  components: { SmtpServer, SelectSolutionFlavor, Networks },
+  components: { SmtpServer, SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 29e119b9ec..7a3a22c9b9 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -110,6 +110,8 @@
         }"
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -152,6 +154,7 @@ const certified = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
+const selectedSSHKeys = ref("");
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -190,7 +193,7 @@ async function deploy() {
           mycelium: mycelium.value,
           publicIpv4: ipv4.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "USERNAME", value: username.value },
             { key: "PASSWORD", value: password.value },
             { key: "UMBREL_DISK", value: "/umbrelDisk" },
@@ -210,15 +213,20 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy an Umbrel instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfUmbrel",
-  components: { SelectSolutionFlavor },
+  components: { SelectSolutionFlavor, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index eb7665d99d..25b6650fdb 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -117,6 +117,8 @@
         require-domain
         v-model="selectionDetails"
       />
+
+      <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </form-validator>
 
     <template #footer-actions>
@@ -157,6 +159,7 @@ const ipv4 = ref(false);
 const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
+const selectedSSHKeys = ref("");
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -208,7 +211,7 @@ async function deploy() {
           publicIpv4: ipv4.value,
           mycelium: mycelium.value,
           envs: [
-            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
             { key: "MYSQL_USER", value: username.value },
             { key: "MYSQL_PASSWORD", value: password.value },
             { key: "ADMIN_EMAIL", value: email.value },
@@ -249,17 +252,22 @@ async function deploy() {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Wordpress instance."));
   }
 }
+
+function updateSSHkeyEnv(selectedKeys: string) {
+  selectedSSHKeys.value = selectedKeys;
+}
 </script>
 
 <script lang="ts">
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
 import rootFs from "../utils/root_fs";
 
 export default {
   name: "TFWordpress",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>