diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64f5b0f6d..a1b0af463 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #1007) Create new Taginput component to replace Buefy's taginput component
 - (GH #1009) Replace buefy toasts with c-toasts from `csc-ui`
 - (GH #1014) Replace buefy snackbars with custom c-toasts from `csc-ui`
+- (GL #944) Replace buefy b-input with c-text-field from `csc-ui`
+- (GL #944) Replace buefy b-button with c-button from `csc-ui`
+- (GL #944) Replace buefy b-select with c-select from `csc-ui`
+- (GL #944) Replace buefy b-loading with c-loader from `csc-ui` and remove unused b-loading
+- (GL #944) Replace buefy b-table with c-data-table from `csc-ui`
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
index 8f62eda2a..c04a68570 100644
--- a/swift_browser_ui_frontend/src/common/store.js
+++ b/swift_browser_ui_frontend/src/common/store.js
@@ -23,8 +23,6 @@ const store = new Vuex.Store({
     active: {},
     uname: "",
     multipleProjects: false,
-    isLoading: false,
-    isFullPage: true,
     objectCache: [], // Only for shared objects
     langs: [
       { ph: "In English", value: "en" },
@@ -59,9 +57,6 @@ const store = new Vuex.Store({
     uploadAbort: undefined,
   },
   mutations: {
-    loading(state, payload) {
-      state.isLoading = payload;
-    },
     updateObjects(state, objects) {
       // Update object cache with the new object listing.
       state.objectCache = [...objects];
@@ -86,9 +81,6 @@ const store = new Vuex.Store({
       // Update the username in store
       state.uname = newUname;
     },
-    setLoading(state, newValue) {
-      state.isLoading = newValue;
-    },
     setSharingClient(state, newClient) {
       state.client = newClient;
     },
@@ -248,24 +240,18 @@ const store = new Vuex.Store({
   },
   actions: {
     updateContainers: async function (
-      { state, commit, dispatch },
+      { state, dispatch },
       { projectID, signal },
     ) {
       const existingContainers = await state.db.containers
         .where({ projectID })
         .toArray();
-      if (existingContainers.length === 0) {
-        commit("loading", true);
-      }
       let containers;
       let marker = "";
       let newContainers = [];
       do {
         containers = [];
-        containers = await getContainers(projectID, marker).catch(() => {
-          commit("loading", false);
-        });
-        commit("loading", false);
+        containers = await getContainers(projectID, marker).catch(() => {});
         if (containers.length > 0) {
           containers.forEach(cont => {
             cont.tokens = tokenize(cont.name);
@@ -494,7 +480,6 @@ const store = new Vuex.Store({
       { commit, dispatch },
       { project, owner, container, signal },
     ) {
-      commit("loading", true);
       let sharedObjects = [];
       let marker = "";
       let objects = [];
@@ -507,7 +492,6 @@ const store = new Vuex.Store({
           true,
           owner,
         ).catch(() => {
-          commit("loading", false);
           commit("updateObjects", []);
         });
 
@@ -516,7 +500,6 @@ const store = new Vuex.Store({
           marker = objects[objects.length - 1].name;
         }
       } while (objects.length > 0);
-      commit("loading", false);
       commit("updateObjects", sharedObjects);
       dispatch("updateObjectTags", {
         projectID: project,
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index 880ead0e2..a502202b1 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -15,23 +15,17 @@
             {{ $t("message.replicate.destinationExists") }}
           </p>
         </c-alert>
-        <b-field
-          custom-class="has-text-dark"
+        <c-text-field
+          id="new-copy-folderName"
+          v-csc-model="folderName"
           :label="$t('message.replicate.name_newFolder')"
-          label-for="new-copy-folderName"
-        >
-          <b-input
-            id="new-copy-folderName"
-            v-model="folderName"
-            name="foldername"
-            custom-class="has-text-dark"
-            :loading="loadingFoldername"
-          />
-        </b-field>
+          name="foldername"
+          :loading="loadingFoldername"
+        />
         <label
           class="taginput-label"
           label-for="copy-folder-taginput"
-        >
+        >  
           {{ $t('message.tagName') }}
         </label>
         <TagInput
@@ -307,4 +301,4 @@ c-card-actions {
 c-card-actions > c-button {
   margin: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index c3eecd652..26324c92a 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -17,19 +17,14 @@
         <p class="info-text is-size-6">
           {{ $t("message.container_ops.norename") }}
         </p>
-        <b-field
-          custom-class="has-text-dark"
+        <c-text-field
+          id="folderName"
+          v-csc-model="folderName"
           :label="$t('message.container_ops.folderName')"
-          label-for="folderName"
-        >
-          <b-input
-            id="folderName"
-            v-model="folderName"
-            name="foldername"
-            aria-required="true"
-            data-testid="folder-name"
-          />
-        </b-field>
+          name="foldername"
+          aria-required="true"
+          data-testid="folder-name"
+        />
         <label
           class="taginput-label"
           label-for="create-folder-taginput"
diff --git a/swift_browser_ui_frontend/src/components/ObjectTable.vue b/swift_browser_ui_frontend/src/components/ObjectTable.vue
index 1d5917a61..a73dd0bf5 100644
--- a/swift_browser_ui_frontend/src/components/ObjectTable.vue
+++ b/swift_browser_ui_frontend/src/components/ObjectTable.vue
@@ -79,15 +79,18 @@
       id="optionsbar"
       justify="space-between"
     >
-      <div class="search">
-        <b-input
-          v-model="searchQuery"
-          :placeholder="$t('message.objects.filterBy')"
-          type="search"
-          icon="filter-variant"
+      <c-text-field
+        id="search"
+        v-csc-model="searchQuery"
+        name="search"
+        :placeholder="$t('message.objects.filterBy')"
+        type="search"
+      >
+        <i 
+          slot="pre" 
+          class="mdi mdi-filter-variant mdi-24px"
         />
-      </div>
-
+      </c-text-field>
       <c-menu
         :key="optionsKey"
         :items.prop="tableOptions"
@@ -764,6 +767,10 @@ export default {
 <style scoped lang="scss">
 @import "@/css/prod.scss";
 
+#search {
+  flex: 0.4;
+}
+
 .back-link {
   display: flex;
   padding-bottom: .5rem;
diff --git a/swift_browser_ui_frontend/src/components/SearchBox.vue b/swift_browser_ui_frontend/src/components/SearchBox.vue
index 336abcb8d..b7a194ad2 100644
--- a/swift_browser_ui_frontend/src/components/SearchBox.vue
+++ b/swift_browser_ui_frontend/src/components/SearchBox.vue
@@ -31,9 +31,8 @@
           v-if="searchArray.length > 0 && searchArray[0].length > 1"
           class="media empty-search"
         >
-          <b-loading
-            v-model="isSearching"
-            :is-full-page="false"
+          <c-loader
+            v-show="isSearching"
           />
           <div
             v-show="!isSearching"
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index 7f23794ec..b68f8f4fa 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -115,11 +115,13 @@
                   rows="3"
                 />
                 <c-button
-                  type="is-success"
-                  icon-left="lock-plus"
                   @click="appendPublicKey"
                   @keyup.enter="appendPublicKey"
                 >
+                  <i
+                    slot="icon"
+                    class="mdi mdi-lock-plus"
+                  />
                   {{ $t("message.encrypt.addkey") }}
                 </c-button>
                 <c-data-table
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index fc5032d6f..a7444a097 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -160,12 +160,6 @@ new Vue({
     user() {
       return this.$store.state.uname;
     },
-    isFullPage() {
-      return this.$store.state.isFullPage;
-    },
-    isLoading() {
-      return this.$store.state.isLoading;
-    },
     isChunking() {
       return this.$store.state.isChunking;
     },
diff --git a/swift_browser_ui_frontend/src/entries/select.js b/swift_browser_ui_frontend/src/entries/select.js
index 4c1d7e6cf..0e49f9c66 100644
--- a/swift_browser_ui_frontend/src/entries/select.js
+++ b/swift_browser_ui_frontend/src/entries/select.js
@@ -28,7 +28,7 @@ new Vue ({
     loginformname: "Openstack account:",
     idb: true,
     projects: [],
-    langs: [{ph: "In English", value: "en"}, {ph: "Suomeksi", value: "fi"}],
+    langs: [{name: "In English", value: "en"}, {name: "Suomeksi", value: "fi"}],
   },
   created() {
     document.title = this.$t("message.program_name");
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 4f27f9458..f87c9ef46 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -46,11 +46,6 @@
         <CopyFolderModal />
       </c-modal>
       <router-view class="content-wrapper" />
-      <b-loading
-        :is-full-page="isFullPage"
-        :active.sync="isLoading"
-        :can-cancel="false"
-      />
       <c-toasts id="toasts" />
       <!-- TODO: Move folder toast to programmatical modal -->
       <c-toasts
diff --git a/swift_browser_ui_frontend/src/pages/SelectPage.vue b/swift_browser_ui_frontend/src/pages/SelectPage.vue
index e4330ee21..d095d9513 100644
--- a/swift_browser_ui_frontend/src/pages/SelectPage.vue
+++ b/swift_browser_ui_frontend/src/pages/SelectPage.vue
@@ -9,45 +9,34 @@
         v-for="project in projects.filter(pro => pro.tainted)"
         :key="project.id"
       >
-        <b-button
-          tag="a"
-          expanded
+        <c-button
           :href="'/lock/'.concat(project.id)"
-          size="is-large"
-          type="is-primary is-outlined"
+          size="large"
+          outlined
+          fit
         >
           {{ project.name }}
-        </b-button>
+        </c-button>
       </p>
       <p>
-        <b-button
-          tag="a"
-          expanded
+        <c-button
           href="/lock/none"
-          size="is-large"
-          type="is-primary is-outlined"
+          size="large"
+          outlined
+          fit
         >
           {{ $t("message.select.unrestricted" ) }}
-        </b-button>
+        </c-button>
       </p>
       <p>
-        <b-field class="locale-changed block center">
-          <b-select
-            v-model="$i18n.locale"
-            placeholder="Language"
-            icon="earth"
-            expanded
-            @input="setCookieLang ()"
-          >
-            <option
-              v-for="lang in langs"
-              :key="lang.value"
-              :value="lang.value"
-            >
-              {{ lang.ph }}
-            </option>
-          </b-select>
-        </b-field>
+        <c-select
+          v-csc-model="$i18n.locale"
+          class="locale-changed block center"
+          placeholder="Language"
+          :items="langs"
+          fit
+          @input="setCookieLang ()"
+        />
       </p>
     </div>
   </div>
diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
index baacf61d0..55e299023 100644
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ b/swift_browser_ui_frontend/src/views/Tokens.vue
@@ -12,39 +12,21 @@
           {{ $t('message.tokens.back') }}
         </router-link>
       </section>
-      <b-field grouped>
-        <b-field
+      <c-row gap="8">
+        <c-text-field
+          v-csc-model="newIdentifier"
+          name="newIdentifier"
           :label="$t('message.tokens.identLabel')"
-          :message="$t('message.tokens.identMessage')"
-          expanded
+          :hint="$t('message.tokens.identMessage')"
+          fit
+        />
+        <c-button
+          :disabled="tokenExists(newIdentifier)"
+          @click="addToken(newIdentifier)"
         >
-          <b-input
-            v-model="newIdentifier"
-            name="newIdentifier"
-            expanded
-          />
-
-          <p
-            id="submitButton"
-            class="control"
-          >
-            <button
-              v-if="tokenExists(newIdentifier)"
-              class="button is-primary"
-              disabled
-            >
-              {{ $t('message.tokens.createToken') }}
-            </button>
-            <button
-              v-else
-              class="button is-primary"
-              @click="addToken(newIdentifier)"
-            >
-              {{ $t('message.tokens.createToken') }}
-            </button>
-          </p>
-        </b-field>
-      </b-field>
+          {{ $t('message.tokens.createToken') }}
+        </c-button>
+      </c-row>
     </div>
     <div
       v-if="latest"
@@ -54,70 +36,28 @@
         <span>
           <b>{{ $t('message.tokens.latestToken') }}</b>&nbsp;{{ latest }}&nbsp;
         </span>
-        <b-button
+        <c-button
           class="copyButton"
           outlined
-          icon-left="content-copy"
           @click="copyTokenHex()"
         >
+          <i
+            slot="icon"
+            class="mdi mdi-content-copy"
+          />
           {{ $t('message.copy') }}
-        </b-button>
+        </c-button>
       </div>
     </div>
-    <b-table
+    <c-data-table
       class="tokenContents"
-      narrowed
-      default-sort="identifier"
-      :data="tokens"
-      :selected.sync="selected"
-      :default-sort-direction="defaultSortDirection"
-    >
-      <b-table-column
-        field="identifier"
-        :label="$t('message.tokens.identifier')"
-        sortable
-      >
-        <template #default="props">
-          {{ props.row }}
-        </template>
-      </b-table-column>
-      <b-table-column
-        field="controls"
-      >
-        <template #default="props">
-          <div class="field has-addons">
-            <p class="control">
-              <b-button
-                v-if="selected==props.row"
-                type="is-danger"
-                icon-left="delete"
-                outlined
-                size="is-small"
-                inverted
-                @click="removeToken(props.row)"
-              >
-                {{ $t('message.tokens.revoke') }}
-              </b-button>
-              <b-button
-                v-else
-                type="is-danger"
-                icon-left="delete"
-                outlined
-                size="is-small"
-                @click="removeToken(props.row)"
-              >
-                {{ $t('message.tokens.revoke') }}
-              </b-button>
-            </p>
-          </div>
-        </template>
-      </b-table-column>
-      <template #empty>
-        <span class="emptyContents">
-          {{ $t('message.tokens.empty') }}
-        </span>
-      </template>
-    </b-table>
+      sort-by="identifier"
+      sort-direction="asc"
+      :data.prop="tableTokens"
+      :headers.prop="headers"
+      :no-data-text="$t('message.tokens.empty')"
+      hide-footer
+    />
     <c-toasts
       id="token-toasts"
       data-testid="token-toasts"
@@ -131,6 +71,9 @@ import {
   listTokens,
   removeToken,
 } from "@/common/api";
+import {
+  mdiDelete,
+} from "@mdi/js";
 
 export default {
   name: "TokensView",
@@ -138,7 +81,6 @@ export default {
     return {
       tokens: [],
       selected: undefined,
-      defaultSortDirection: "asc",
       newIdentifier: "",
       latest: undefined,
       copied: false,
@@ -148,6 +90,46 @@ export default {
     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();
@@ -156,7 +138,7 @@ export default {
     getTokens: function () {
       listTokens(this.active).then((ret) => {this.tokens = ret;});
     },
-    removeToken: function (identifier) {
+    deleteToken: function (identifier) {
       removeToken(
         this.active,
         identifier,