diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 07f9255bb..98b2ffbe0 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -64,6 +64,7 @@ hinnoittelulaskuri
 hyväksy
 hyväksyä
 hyväksyäksesi
+ikkunan
 ilman
 ja
 jaa
@@ -338,6 +339,7 @@ ota
 ottaneesi
 ovat
 oy
+paikkaan
 paina
 painikkeella
 painikkeesta
@@ -464,6 +466,7 @@ sivupyynnössä
 sivutus
 sopimus
 sulje
+suljet
 suodata
 suositellut
 suuren
@@ -549,6 +552,7 @@ tunnus
 tunti
 tuo
 tuottaa
+turvalliseen
 tyhjennä
 tyhjä
 tyyppi
@@ -557,6 +561,7 @@ tägejä
 tägillä
 tägit
 tähän
+tälle
 tällä
 tältä
 tämä
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13647359e..986bf2025 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #989) Make selected Display Options consistent when browsing between pages
 - (GH #944) Create new Taginput component to replace Buefy's taginput component
 - (GL #944) Replace buefy upload button with a new component: `CUploadButton`
+- (GL #940) Added TokenModal to replace token page
 
 ### Changed
 
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 3b62798c0..86d0ff57c 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -197,6 +197,7 @@ let default_translations = {
         complete: "Uploading completed",
         cancelled: "Uploading cancelled",
       },
+      close: "Close",
       copy: " Copy",
       copied: "Share ID copied to clipboard",
       copy_failed: "Copying failed",
@@ -242,20 +243,21 @@ let default_translations = {
       },
       tokens: {
         empty: "No API tokens created for the project",
-        identifier: "Identifier",
-        revoke: "Revoke",
-        identLabel: "New token identifier",
-        identMessage: "Insert new token identifier here",
+        title: "Create API-tokens",
+        identifier: "Token identifier",
+        identLabel: "Insert new token identifier",
         createToken: "Create token",
         latestToken: "Latest token: ",
-        copyToken:
-          "The token will be displayed just this once after its " +
-          "creation, and recovering it will not be possible " +
-          "afterwards. Please make sure that you have stored " +
-          "the token somewhere before navigating away from the " +
-          "token page.",
+        copy: "Copy token",
+        copyWarning:
+          "Token will be displayed just this once " +
+          "and recovering it is not be possible. " +
+          "Please store the token somewhere " +
+          "safe before closing this modal.",
         tokenCopied: "Token copied.",
-        back: "Back to all folders",
+        tokenRemoved: "Token removed.",
+        inUse: "Token identifier already in use.",
+        creationFailed: "Token creation failed.",
       },
       encrypt: {
         uploadFiles: "Upload files",
@@ -557,6 +559,7 @@ let default_translations = {
         complete: "Lähetys on valmis",
         cancelled: "Lähetys peruutettu",
       },
+      close: "Sulje",
       copy: " Kopioi",
       copied: "Jakamistunnus kopioitu leikepöydälle.",
       copy_failed: "Kopiointi epäonnistui.",
@@ -598,20 +601,22 @@ let default_translations = {
         name_newFolder: "Nimeä uusi kansio",
       },
       tokens: {
-        empty: "Projektille ei ole luotu API-avaimia",
-        identifier: "Tunniste",
-        revoke: "Mitätöi",
-        identLabel: "Uuden avaimen tunniste",
-        identMessage: "Syötä tunniste uudelle API-avaimelle",
+        empty: "Tälle projektille ei ole luotu API-avaimia",
+        title: "Luo API-avaimet",
+        identifier: "Avainten tunnisteet",
+        identLabel: "Syötä tunniste uudelle API-avaimelle",
         createToken: "Luo avain",
         latestToken: "Viimeisin avain: ",
-        back: "Palaa päänäkymään",
-        copyToken:
-          "Avain näytetään vain kerran luonnin jälkeen, eikä sen " +
-          "kopiointi tai palautus jälkeenpäin ole mahdollista. " +
-          "Kopioi avain talteen ennen kuin " +
-          "poistut tältä sivulta.",
+        copy: "Kopioi avain",
+        copyWarning:
+          "Avain näytetään vain tämän kerran, " +
+          "eikä sen kopiointi tai palautus ole mahdollista jälkeenpäin. " +
+          "Tallenna avain turvalliseen paikkaan " +
+          "ennen kuin suljet tämän ikkunan.",
         tokenCopied: "Avain kopioitu.",
+        tokenRemoved: "Avain poistettu.",
+        creationFailed: "Avaimen luonti epäonnistui.",
+        inUse: "Avaimen tunniste on jo käytössä.",
       },
       encrypt: {
         uploadFiles: "Lataa tiedostoja",
diff --git a/swift_browser_ui_frontend/src/common/router.js b/swift_browser_ui_frontend/src/common/router.js
index 8e3c08ae7..989cd45a2 100644
--- a/swift_browser_ui_frontend/src/common/router.js
+++ b/swift_browser_ui_frontend/src/common/router.js
@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
 import FoldersView from "@/views/Folders.vue";
 import ObjectsView from "@/views/Objects.vue";
 import SharedObjects from "@/views/SharedObjects.vue";
-import TokensView from "@/views/Tokens.vue";
 
 export default createRouter({
   history: createWebHistory(),
@@ -12,11 +11,6 @@ export default createRouter({
       name: "AllFolders",
       component: FoldersView,
     },
-    {
-      path: "/browse/:user/:project/tokens",
-      name: "TokensView",
-      component: TokensView,
-    },
     {
       path: "/browse/:user/:project/:container/shared/:owner",
       name: "SharedObjects",
diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
index 4b3825d20..ac3a9c117 100644
--- a/swift_browser_ui_frontend/src/common/store.js
+++ b/swift_browser_ui_frontend/src/common/store.js
@@ -51,6 +51,7 @@ const store = createStore({
     selectedObjectName: "",
     openCopyFolderModal: false,
     openDeleteModal: false,
+    openTokenModal: false,
     deletableObjects: [],
     isFolderCopied: false,
     sourceProjectId: "",
@@ -231,6 +232,9 @@ const store = createStore({
     toggleDeleteModal(state, payload) {
       state.openDeleteModal = payload;
     },
+    toggleTokenModal(state, payload) {
+      state.openTokenModal = payload;
+    },
     setDeletableObjects(state, payload) {
       state.deletableObjects = payload;
     },
diff --git a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
index 13e5f2da3..e1e32a828 100644
--- a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
@@ -157,10 +157,8 @@ export default {
               href: this.$t("message.supportMenu.itemLink2"),
             },
             {
-              title: this.$t("message.supportMenu.item3"),
-              route: {name: "TokensView", params: {
-                user: this.uname,
-                project: this.active.id}},
+              title: this.$t("message.supportMenu.sharing"),
+              action: () => this.$store.commit("toggleTokenModal", true),
             },
             {
               title: this.$t("message.supportMenu.item4"),
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
new file mode 100644
index 000000000..13bfecb17
--- /dev/null
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -0,0 +1,299 @@
+<template>
+  <c-card class="token-card">
+    <c-card-actions
+      justify="space-between"
+      align="center"
+    >
+      <h2 class="title is-4 has-text-dark">
+        {{ $t("message.tokens.title") }}
+      </h2>
+      <c-button
+        text
+        @click="closeTokenModal"
+        @keyup.enter="closeTokenModal"
+      >
+        <c-icon
+          :path="mdiClose"
+          alt=""
+          aria-hidden="true"
+        />
+        {{ $t("message.close") }}
+      </c-button>
+    </c-card-actions>
+    <c-card-content>
+      <c-text-field
+        v-model="newIdentifier"
+        v-csc-control
+        name="newIdentifier"
+        :label="$t('message.tokens.identLabel')"
+      />
+      <c-button
+        id="create-button"
+        @click="addToken(newIdentifier)"
+        @keyup.enter="addToken(newIdentifier)"
+      >
+        {{ $t('message.tokens.createToken') }}
+      </c-button>
+      <c-row
+        v-show="latest"
+        align="start"
+        justify="space-between"
+      >
+        <p>
+          <strong>{{ $t('message.tokens.latestToken') }}</strong>
+        </p>
+        <div id="token">
+          <p>{{ latest }}</p>
+        </div>
+        <c-button
+          size="small"
+          @click="copyLatestToken"
+          @keyup.enter="copyLatestToken"
+        >
+          <i
+            slot="icon"
+            class="mdi mdi-content-copy"
+          />
+          {{ $t('message.tokens.copy') }}
+        </c-button>
+      </c-row>
+      <c-alert
+        v-show="latest"
+        type="warning"
+      >
+        <p>{{ $t('message.tokens.copyWarning') }}</p>
+      </c-alert>
+      <c-data-table
+        class="tokenContents"
+        sort-by="identifier"
+        sort-direction="asc"
+        :no-data-text="$t('message.tokens.empty')"
+        :data.prop="tableTokens"
+        :headers.prop="headers"
+        :pagination.prop="tokenPagination"
+        :footer-options.prop="footer"
+        :hide-footer="tokens.length <= tokensPerPage"
+      />
+      <c-toasts
+        id="token-toasts"
+        data-testid="token-toasts"
+      />
+    </c-card-content>
+  </c-card>
+</template>
+
+<script>
+import { mdiClose, mdiDelete } from "@mdi/js";
+import {
+  createExtToken,
+  listTokens,
+  removeToken,
+} from "@/common/api";
+
+export default {
+  name: "TokenModal",
+  data() {
+    return {
+      tokens: [],
+      newIdentifier: "",
+      latest: undefined,
+      copied: false,
+      tokensPerPage: 5,
+      mdiClose,
+      mdiDelete,
+    };
+  },
+  computed: {
+    activeId() {
+      return this.$store.state.active.id;
+    },
+    headers () {
+      return [
+        {
+          key: "identifier",
+          value: this.$t("message.tokens.identifier"),
+          sortable: this.tokens.length > 1,
+        },
+        {
+          key: "controls",
+          width: "10%",
+          value: null,
+          sortable: false,
+          children: [
+            {
+              value: this.$t("message.remove"),
+              component: {
+                tag: "c-button",
+                params: {
+                  text: true,
+                  size: "small",
+                  title: this.$t("message.remove"),
+                  type: "error",
+                  path: mdiDelete,
+                  onClick: ({ data: { identifier } }) =>
+                    this.deleteToken(identifier.value),
+                },
+              },
+            },
+          ],
+        },
+      ];
+    },
+    tableTokens () {
+      return this.tokens.map(token => {
+        return {
+          identifier: {
+            value: token,
+          },
+        };
+      });
+    },
+    tokenPagination() {
+      return {
+        itemCount: this.tokens.length,
+        itemsPerPage: this.tokensPerPage,
+        currentPage: 1,
+      };
+    },
+    footer() {
+      return {
+        hideDetails: true,
+      };
+    },
+  },
+  watch: {
+    activeId () {
+      this.getTokens(this.activeId);
+    },
+  },
+  methods: {
+    closeTokenModal: function () {
+      this.$store.commit("toggleTokenModal", false);
+      this.newIdentifier = "";
+      this.latest = undefined;
+      this.copied = false;
+      document.querySelector("#token-toasts").removeToast("error-failed");
+      document.querySelector("#token-toasts").removeToast("error-in-use");
+      document.querySelector("#token-toasts").removeToast("success-copied");
+      document.querySelector("#token-toasts").removeToast("success-removed");
+    },
+    getTokens: function () {
+      listTokens(this.activeId).then((ret) => {this.tokens = ret;});
+    },
+    addToken: function (identifier) {
+      if (!this.tokenExists(identifier)) {
+        createExtToken(
+          this.activeId,
+          identifier,
+        ).then((ret) => {
+          this.latest = ret;
+          this.newIdentifier = "";
+          this.getTokens();
+        }).catch(() => {
+          document.querySelector("#token-toasts").addToast(
+            {
+              id: "error-failed",
+              type: "error",
+              progress: false,
+              message: this.$t("message.tokens.creationFailed"),
+            },
+          );
+        });
+      }
+      else {
+        document.querySelector("#token-toasts").addToast(
+          {
+            id: "error-in-use",
+            type: "error",
+            progress: false,
+            message: this.$t("message.tokens.inUse"),
+          },
+        );
+      }
+    },
+    tokenExists: function (identifier) {
+      return this.tokens.includes(identifier) ? true : false;
+    },
+    copyLatestToken: function () {
+      if (!this.copied) {
+        navigator.clipboard.writeText(
+          this.latest,
+        ).then(() => {
+          this.copied = true;
+          document.querySelector("#token-toasts").addToast(
+            {
+              id: "success-copied",
+              type: "success",
+              progress: false,
+              message: this.$t("message.tokens.tokenCopied"),
+            },
+          );
+          //like with ShareID copy button:
+          //avoid overlapping toasts
+          setTimeout(() => { this.copied = false; }, 6000);
+        });
+      }
+    },
+    deleteToken: function (identifier) {
+      removeToken(
+        this.activeId,
+        identifier,
+      ).then(() => {
+        document.querySelector("#token-toasts").addToast(
+          {
+            id: "success-removed",
+            type: "success",
+            progress: false,
+            message: this.$t("message.tokens.tokenRemoved"),
+          },
+        );
+        this.getTokens();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/css/prod.scss";
+
+.token-card {
+  padding: 3rem 2rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  max-height: 75vh;
+  overflow-y: scroll;
+}
+
+#create-button {
+  width: max-content;
+  margin-top: -2rem;
+}
+
+#token {
+  width: 70%;
+  padding: 0rem 0.5rem;
+  overflow-wrap: anywhere;
+}
+
+@media screen and (max-width: 1366px) {
+  #token {
+    width: 100%;
+    padding: 0.5rem 0;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .token-card {
+    max-height: 60vh;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .token-card {
+    padding: 1.5rem 1rem;
+  }
+}
+</style>
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index 8836376b7..18488dcc4 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -12,6 +12,7 @@ import EditTagsModal from "@/components/EditTagsModal.vue";
 import ShareModal from "@/components/ShareModal.vue";
 import CopyFolderModal from "@/components/CopyFolderModal.vue";
 import DeleteModal from "@/components/DeleteModal.vue";
+import TokenModal from "@/components/TokenModal.vue";
 
 // CSC UI things
 import { applyPolyfills, defineCustomElements } from "csc-ui/dist/loader";
@@ -110,6 +111,7 @@ const app = createApp({
     ShareModal,
     CopyFolderModal,
     DeleteModal,
+    TokenModal,
   },
   data: function () {
     return {
@@ -202,6 +204,12 @@ const app = createApp({
       },
       set() { },
     },
+    openTokenModal: {
+      get() {
+        return this.$store.state.openTokenModal;
+      },
+      set() { },
+    },
   },
   watch: {
     openCreateFolderModal: function () {
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 39e130393..d1803d022 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -56,6 +56,13 @@
       >
         <DeleteModal />
       </c-modal>
+      <c-modal
+        v-model="openTokenModal"
+        v-csc-control
+        width="64vw"
+      >
+        <TokenModal />
+      </c-modal>
       <router-view class="content-wrapper" />
       <c-toasts id="toasts" />
       <c-toasts
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
deleted file mode 100644
index b4ba54123..000000000
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <div class="contents">
-    <div class="tokenContents">
-      <section class="section">
-        <router-link
-          class="back-link"
-          :to="{
-            name: 'AllFolders',
-          }"
-        >
-          <i class="mdi mdi-chevron-left" />
-          {{ $t('message.tokens.back') }}
-        </router-link>
-      </section>
-      <c-row gap="8">
-        <c-text-field
-          v-model="newIdentifier"
-          v-csc-control
-          name="newIdentifier"
-          :label="$t('message.tokens.identLabel')"
-          :hint="$t('message.tokens.identMessage')"
-          fit
-        />
-        <c-button
-          :disabled="tokenExists(newIdentifier)"
-          @click="addToken(newIdentifier)"
-        >
-          {{ $t('message.tokens.createToken') }}
-        </c-button>
-      </c-row>
-    </div>
-    <div
-      v-if="latest"
-      class="tokenContents"
-    >
-      <div class="latestTokenRow">
-        <span>
-          <b>{{ $t('message.tokens.latestToken') }}</b>&nbsp;{{ latest }}&nbsp;
-        </span>
-        <c-button
-          class="copyButton"
-          outlined
-          @click="copyTokenHex()"
-        >
-          <i
-            slot="icon"
-            class="mdi mdi-content-copy"
-          />
-          {{ $t('message.copy') }}
-        </c-button>
-      </div>
-    </div>
-    <c-data-table
-      class="tokenContents"
-      sort-by="identifier"
-      sort-direction="asc"
-      :data.prop="tableTokens"
-      :headers.prop="headers"
-      :no-data-text="$t('message.tokens.empty')"
-      hide-footer
-    />
-    <c-toasts
-      id="add-token-toasts"
-      data-testid="add-token-toasts"
-      vertical="top"
-      horizontal="right"
-    />
-    <c-toasts
-      id="copy-token-toasts"
-      data-testid="copy-token-toasts"
-    />
-  </div>
-</template>
-
-<script>
-import {
-  createExtToken,
-  listTokens,
-  removeToken,
-} from "@/common/api";
-import {
-  mdiDelete,
-} from "@mdi/js";
-
-export default {
-  name: "TokensView",
-  data () {
-    return {
-      tokens: [],
-      selected: undefined,
-      newIdentifier: "",
-      latest: undefined,
-      copied: false,
-    };
-  },
-  computed: {
-    active () {
-      return this.$route.params.project;
-    },
-    headers () {
-      return [
-        {
-          key: "identifier",
-          value: this.$t("message.tokens.identifier"),
-          sortable: true,
-        },
-        {
-          key: "controls",
-          value: null,
-          sortable: false,
-          children: [
-            {
-              value: this.$t("message.tokens.revoke"),
-              component: {
-                tag: "c-button",
-                params: {
-                  text: true,
-                  size: "small",
-                  title: this.$t("message.tokens.revoke"),
-                  type: "error",
-                  path: mdiDelete,
-                  onClick: ({ data: { identifier } }) =>
-                    this.deleteToken(identifier.value),
-                },
-              },
-            },
-          ],
-        },
-      ];
-    },
-    tableTokens () {
-      return this.tokens.map(token => {
-        return {
-          identifier: {
-            value: token,
-          },
-        };
-      });
-    },
-  },
-  beforeMount () {
-    this.getTokens();
-  },
-  methods: {
-    getTokens: function () {
-      listTokens(this.active).then((ret) => {this.tokens = ret;});
-    },
-    deleteToken: function (identifier) {
-      removeToken(
-        this.active,
-        identifier,
-      ).then(() => {this.getTokens();});
-    },
-    addToken: function (identifier) {
-      createExtToken(
-        this.active,
-        identifier,
-      ).then((ret) => {
-        this.latest = ret;
-        document.querySelector("#add-token-toasts").addToast(
-          {
-            duration: 3600000,
-            type: "success",
-            progress: false,
-            message: this.$t("message.tokens.copyToken"),
-          },
-        );
-        this.getTokens();
-      });
-    },
-    tokenExists: function (identifier) {
-      return this.tokens.includes(identifier) ? true : false;
-    },
-    copyTokenHex: function () {
-      if (!this.copied) {
-        navigator.clipboard.writeText(
-          this.latest,
-        ).then(() => {
-          this.copied = true;
-          document.querySelector("#copy-token-toasts").addToast(
-            {
-              duration: 6000,
-              type: "success",
-              progress: false,
-              message: this.$t("message.tokens.tokenCopied"),
-            },
-          );
-          //like with ShareID copy button:
-          //avoid overlapping toasts
-          setTimeout(() => { this.copied = false; }, 6000);
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-.contents{
-  font-family: var(--csc-font-family);
-}
-.tokenContents {
-  width: 90%;
-  margin-left: 5%;
-  margin-right: 5%;
-}
-.emptyContents {
-  width: 100%;
-  text-align: center;
-  margin-top: 5%;
-  margin-bottom: 5%;
-}
-.latestTokenRow {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-}
-.copyButton {
-  margin-left: 1%;
-}
-.back-link {
-  display: flex;
-  padding-bottom: .5rem;
-  color: $csc-primary;
-  font-weight: 600;
-  align-items: center;
-
-  & .mdi {
-    font-size: 2rem;
-  }
-}
-</style>