diff --git a/package-lock.json b/package-lock.json
index 1495dc5ff..037eaf2c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
   "name": "platform-next",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "platform-next",
-      "version": "0.1.0",
+      "version": "1.0.0",
       "dependencies": {
-        "@bimdata/design-system": "^1.1.0-rc.3",
+        "@bimdata/design-system": "^1.1.0-rc.8",
         "@bimdata/typescript-fetch-api-client": "^6.20.0",
         "@bimdata/viewer": "^1.9.0-rc.10",
         "@uppy/core": "^2.1.2",
@@ -42,6 +42,55 @@
         "vue-jest": "^5.0.0-alpha.10"
       }
     },
+    "../design-system": {
+      "name": "@bimdata/design-system",
+      "version": "1.1.0-rc.7",
+      "extraneous": true,
+      "devDependencies": {
+        "@babel/preset-env": "^7.10.2",
+        "@bimdata/typescript-fetch-api-client": "^6.17.2",
+        "@rollup/plugin-alias": "^3.1.1",
+        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-image": "^2.1.1",
+        "@rollup/plugin-node-resolve": "^13.0.6",
+        "@rollup/plugin-replace": "^2.3.3",
+        "@semantic-release/changelog": "^6.0.1",
+        "@semantic-release/commit-analyzer": "^9.0.1",
+        "@semantic-release/git": "^10.0.1",
+        "@semantic-release/github": "^8.0.2",
+        "@semantic-release/npm": "^8.0.3",
+        "@semantic-release/release-notes-generator": "^10.0.2",
+        "@vue/cli-plugin-unit-jest": "^4.4.1",
+        "@vue/cli-service": "^4.0.0",
+        "@vue/compiler-sfc": "^3.0.4",
+        "@vue/test-utils": "^1.0.3",
+        "conventional-changelog-eslint": "^3.0.9",
+        "eslint": "^7.2.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-prettier": "^3.1.3",
+        "eslint-plugin-vue": "^6.2.2",
+        "i": "^0.3.7",
+        "npm": "^7.24.2",
+        "postcss": "^8.2.1",
+        "prettier": "^2.0.5",
+        "prismjs": "^1.25.0",
+        "rollup": "^2.2.0",
+        "rollup-plugin-copy": "^3.3.0",
+        "rollup-plugin-css-only": "^2.0.0",
+        "rollup-plugin-postcss": "^4.0.0",
+        "rollup-plugin-terser": "^5.3.0",
+        "rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
+        "rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
+        "sass": "^1.42.1",
+        "sass-loader": "^8.0.0",
+        "semantic-release": "^18.0.0",
+        "vue": "^2.6.10",
+        "vue-clipboard2": "^0.3.1",
+        "vue-router": "^3.1.3",
+        "vue-template-compiler": "^2.6.10",
+        "vuex": "^3.1.2"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@@ -542,9 +591,9 @@
       "dev": true
     },
     "node_modules/@bimdata/design-system": {
-      "version": "1.1.0-rc.5",
-      "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-1.1.0-rc.5.tgz",
-      "integrity": "sha512-d7q9K/gowSrlz8biOjuTkBvREyfZPCtbWfbA06cJkEtY1Yj6S6OHqW/mM9Btc5AnG/g+rfU+VVcDHS9SaI4dDg=="
+      "version": "1.1.0-rc.8",
+      "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-1.1.0-rc.8.tgz",
+      "integrity": "sha512-NLiW4x+xBQfKTljkTu0YgRp9PclHbO9huTtKbP9GhIRdaXOdnf0yJzL0o5KtbULrjGfY2rfnNbIKL+tWRqvCLQ=="
     },
     "node_modules/@bimdata/typescript-fetch-api-client": {
       "version": "6.20.0",
@@ -18696,9 +18745,9 @@
       "dev": true
     },
     "@bimdata/design-system": {
-      "version": "1.1.0-rc.5",
-      "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-1.1.0-rc.5.tgz",
-      "integrity": "sha512-d7q9K/gowSrlz8biOjuTkBvREyfZPCtbWfbA06cJkEtY1Yj6S6OHqW/mM9Btc5AnG/g+rfU+VVcDHS9SaI4dDg=="
+      "version": "1.1.0-rc.8",
+      "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-1.1.0-rc.8.tgz",
+      "integrity": "sha512-NLiW4x+xBQfKTljkTu0YgRp9PclHbO9huTtKbP9GhIRdaXOdnf0yJzL0o5KtbULrjGfY2rfnNbIKL+tWRqvCLQ=="
     },
     "@bimdata/typescript-fetch-api-client": {
       "version": "6.20.0",
diff --git a/package.json b/package.json
index 0ce583589..ef07d6fe5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-next",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,7 +10,7 @@
     "test:e2e": "start-server-and-test 'npm run dev -- --port 3030' 3030 'cypress open'"
   },
   "dependencies": {
-    "@bimdata/design-system": "^1.1.0-rc.3",
+    "@bimdata/design-system": "^1.1.0-rc.8",
     "@bimdata/typescript-fetch-api-client": "^6.20.0",
     "@bimdata/viewer": "^1.9.0-rc.10",
     "@uppy/core": "^2.1.2",
diff --git a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss
index 6213c3363..4576411f2 100644
--- a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss
+++ b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss
@@ -4,11 +4,16 @@
   &__header {
     padding: calc(var(--spacing-unit) / 2);
     cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &__text {
+      flex-grow: 1;
+      max-width: 120px;
+    }
 
     &__icon {
-      margin-left: calc(var(--spacing-unit) / 2);
-      margin-bottom: 1px;
-      vertical-align: bottom;
+      min-width: 16px;
     }
   }
 
diff --git a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue
index e4f8d4d0a..7c4ea1612 100644
--- a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue
+++ b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="breadcrumb-selector" v-click-away="close">
     <div class="breadcrumb-selector__header">
-      <TextBox
+      <BIMDataTextBox
+        class="breadcrumb-selector__header__text"
         :text="header"
-        :maxLength="24"
         @click="$emit('header-clicked')"
       />
       <BIMDataIcon
@@ -12,7 +12,7 @@
         size="xs"
         :rotate="isOpen ? 90 : 0"
         @click="toggle"
-        margin="0 0 1px 6px"
+        margin="0 0 0 6px"
       />
     </div>
     <transition name="slide-fade-down">
@@ -30,10 +30,9 @@
             :key="item[keyProp]"
             @click="() => selectItem(item)"
           >
-            <TextBox
+            <BIMDataTextBox
               :text="item[labelProp]"
-              :maxLength="24"
-              cutOn="end"
+              cutPosition="end"
               :tooltip="false"
             />
           </div>
@@ -47,13 +46,8 @@
 import { computed } from "vue";
 import { useToggle } from "@/composables/toggle";
 import { useListFilter } from "@/composables/list-filter";
-// Components
-import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
-  components: {
-    TextBox
-  },
   props: {
     list: {
       type: Array,
diff --git a/src/components/generic/text-box/TextBox.scss b/src/components/generic/text-box/TextBox.scss
deleted file mode 100644
index 6b3866790..000000000
--- a/src/components/generic/text-box/TextBox.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.text-box {
-  display: inline-block;
-  position: relative;
-  &__tooltip {
-    position: absolute;
-    z-index: 2;
-    min-width: 60px;
-    max-width: 200px;
-    width: max-content;
-    padding: calc(var(--spacing-unit) / 3) calc(var(--spacing-unit) / 2);
-    border-radius: 3px;
-    text-align: center;
-    word-wrap: break-word;
-
-    &::before {
-      content: "";
-      position: absolute;
-      border-style: solid;
-      border-width: 8px 0 0 8px;
-    }
-
-    &--primary {
-      background-color: var(--color-primary);
-      color: var(--color-white);
-      &::before {
-        border-color: var(--color-primary) transparent transparent;
-      }
-    }
-
-    &--secondary {
-      background-color: var(--color-secondary);
-      color: var(--color-primary);
-      &::before {
-        border-color: var(--color-secondary) transparent transparent;
-      }
-    }
-
-    &--granite-light {
-      background-color: var(--color-granite-light);
-      color: var(--color-white);
-      &::before {
-        border-color: var(--color-granite-light) transparent transparent;
-      }
-    }
-
-    &--silver-light {
-      background-color: var(--color-silver-light);
-      color: var(--color-primary);
-      &::before {
-        border-color: var(--color-silver-light) transparent transparent;
-      }
-    }
-
-    &--top {
-      top: -8px;
-      left: 50%;
-      transform: translateX(-50%) translateY(-100%);
-      &::before {
-        top: calc(100% - 4px);
-        left: calc(50% - 4px);
-        transform: rotate(135deg);
-      }
-    }
-
-    &--right {
-      top: 50%;
-      left: calc(100% + 8px);
-      transform: translateY(-50%);
-      &::before {
-        top: calc(50% - 4px);
-        left: -4px;
-        transform: rotate(-135deg);
-      }
-    }
-
-    &--bottom {
-      top: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%);
-      &::before {
-        top: -4px;
-        left: calc(50% - 4px);
-        transform: rotate(-45deg);
-      }
-    }
-
-    &--left {
-      top: 50%;
-      left: -8px;
-      transform: translateX(-100%) translateY(-50%);
-      &::before {
-        top: calc(50% - 4px);
-        left: calc(100% - 4px);
-        transform: rotate(45deg);
-      }
-    }
-  }
-}
diff --git a/src/components/generic/text-box/TextBox.vue b/src/components/generic/text-box/TextBox.vue
deleted file mode 100644
index 2aa51c14e..000000000
--- a/src/components/generic/text-box/TextBox.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div
-    class="text-box"
-    @mouseenter="showTooltip = true"
-    @mouseleave="showTooltip = false"
-  >
-    {{ displayedText }}
-    <div
-      v-if="tooltip && displayedText !== text"
-      v-show="showTooltip"
-      class="text-box__tooltip"
-      :class="[
-        `text-box__tooltip--${tooltipPosition}`,
-        `text-box__tooltip--${tooltipColor}`
-      ]"
-    >
-      {{ text }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-
-export default {
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    maxLength: {
-      type: Number,
-      validator: value => value > 0
-    },
-    cutOn: {
-      type: String,
-      default: "middle",
-      validator: value => ["start", "middle", "end"].includes(value)
-    },
-    cutSymbol: {
-      type: String,
-      default: "..."
-    },
-    tooltip: {
-      type: Boolean,
-      default: true
-    },
-    tooltipPosition: {
-      type: String,
-      default: "bottom",
-      validator: value => ["top", "right", "bottom", "left"].includes(value)
-    },
-    tooltipColor: {
-      type: String,
-      default: "primary",
-      validator: value =>
-        ["primary", "secondary", "granite-light", "silver-light"].includes(
-          value
-        )
-    }
-  },
-  setup(props) {
-    const displayedText = ref("");
-    const showTooltip = ref(false);
-
-    watch(
-      [
-        () => props.text,
-        () => props.maxLength,
-        () => props.cutOn,
-        () => props.cutSymbol
-      ],
-      () => {
-        const l = props.text.length;
-        const c = props.cutSymbol.length;
-        const max = props.maxLength;
-        if (max && max < l && max > c) {
-          let cutIndex,
-            head = "",
-            tail = "";
-          switch (props.cutOn) {
-            case "start":
-              cutIndex = l - (max - c);
-              tail = props.text.slice(cutIndex);
-              break;
-            case "middle":
-              cutIndex = (max - c) / 2;
-              head = props.text.slice(0, Math.ceil(cutIndex));
-              tail = props.text.slice(l - Math.floor(cutIndex));
-              break;
-            case "end":
-              cutIndex = max - c;
-              head = props.text.slice(0, cutIndex);
-              break;
-          }
-          displayedText.value = `${head}${props.cutSymbol}${tail}`;
-        } else {
-          displayedText.value = props.text;
-        }
-      },
-      { immediate: true }
-    );
-
-    return {
-      displayedText,
-      showTooltip
-    };
-  }
-};
-</script>
-
-<style scoped lang="scss" src="./TextBox.scss"></style>
diff --git a/src/components/global-components.js b/src/components/global-components.js
index 32a8fe086..ab5d7131a 100644
--- a/src/components/global-components.js
+++ b/src/components/global-components.js
@@ -15,9 +15,7 @@ import BIMDataSelect from "@bimdata/design-system/dist/js/BIMDataComponents/vue3
 import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
 import BIMDataTabs from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataTabs.js";
 import BIMDataText from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataText.js";
-
-// Generic components
-import TextBox from "@/components/generic/text-box/TextBox.vue";
+import BIMDataTextBox from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataTextbox.js";
 
 // Image components
 import BillingsTableEmptyImage from "@/components/images/BillingsTableEmptyImage.vue";
@@ -48,7 +46,7 @@ export default {
   BIMDataSpinner,
   BIMDataTabs,
   BIMDataText,
-  TextBox,
+  BIMDataTextBox,
 
   // Images
   BillingsTableEmptyImage,
diff --git a/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue b/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue
index 7406e8caf..e580a2d5f 100644
--- a/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue
+++ b/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue
@@ -22,10 +22,10 @@
         :name="showChildren ? 'folderOpen' : 'folder'"
         size="s"
       />
-      <TextBox
+      <BIMDataTextBox
         class="file-tree-node__node__name"
+        maxWidth="calc(100% - 48px)"
         :text="file.name"
-        :maxLength="32"
       />
     </div>
     <transition name="fade">
diff --git a/src/components/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue b/src/components/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue
index 5c020c4b7..737c1c077 100644
--- a/src/components/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue
+++ b/src/components/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue
@@ -2,9 +2,9 @@
   <div class="files-manager-breadcrumb">
     <span class="files-manager-breadcrumb__path">
       <template v-for="(folder, index) of path" :key="folder.id">
-        <TextBox
+        <BIMDataTextBox
+          maxWidth="100px"
           :text="folder.name"
-          :maxLength="24"
           @click="selectFile(folder)"
           tooltipColor="silver-light"
           :style="{
@@ -15,10 +15,10 @@
         <span>></span>
       </template>
     </span>
-    <TextBox
+    <BIMDataTextBox
       class="files-manager-breadcrumb__file"
+      width="100px"
       :text="file.name"
-      :maxLength="24"
       tooltipColor="silver-light"
       :style="{ marginLeft: path.length ? '15px' : '5px' }"
     />
@@ -27,7 +27,7 @@
 
 <script>
 import { ref, watch } from "vue";
-import { useFiles } from "@/state/files";
+import { useFiles } from "@/state/files.js";
 
 export default {
   props: {
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss b/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss
index 150478080..a142d623e 100644
--- a/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss
+++ b/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss
@@ -24,6 +24,7 @@
     align-items: center;
     gap: calc(var(--spacing-unit) / 2);
     cursor: pointer;
+    max-width: 320px;
 
     &__icon-folder {
       min-width: 22px;
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
index 539f5e351..afc456c73 100644
--- a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
+++ b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -53,7 +53,7 @@
         />
         <BIMDataFileIcon v-else-if="file.type === 'Ifc'" name="ifc" size="20" />
         <BIMDataFileIcon v-else :name="fileExtension(file.name)" size="20" />
-        <TextBox :text="file.name" :maxLength="64" />
+        <BIMDataTextBox :text="file.name" />
       </div>
     </transition>
   </div>
diff --git a/src/components/specific/files/folder-access-manager/FolderAccessManager.vue b/src/components/specific/files/folder-access-manager/FolderAccessManager.vue
index 42e3743b4..d91d99229 100644
--- a/src/components/specific/files/folder-access-manager/FolderAccessManager.vue
+++ b/src/components/specific/files/folder-access-manager/FolderAccessManager.vue
@@ -4,7 +4,7 @@
       <BIMDataIcon name="key" size="l" />
       <span class="folder-access-manager__title__text">
         {{ $t("FolderAccessManager.title") }} -
-        <TextBox :text="folder.name" :maxLength="16" />
+        <BIMDataTextBox width="auto" maxWidth="100px" :text="folder.name" />
       </span>
       <BIMDataButton ghost rounded icon @click="$emit('close')">
         <BIMDataIcon name="close" size="xxs" fill color="granite-light" />
diff --git a/src/components/specific/files/folder-access-manager/folder-permission-selector/FolderPermissionSelector.vue b/src/components/specific/files/folder-access-manager/folder-permission-selector/FolderPermissionSelector.vue
index 36fc14d90..d5cb6c540 100644
--- a/src/components/specific/files/folder-access-manager/folder-permission-selector/FolderPermissionSelector.vue
+++ b/src/components/specific/files/folder-access-manager/folder-permission-selector/FolderPermissionSelector.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="folder-permission-selector">
-    <TextBox
+    <BIMDataTextBox
       class="folder-permission-selector__label"
+      maxWidth="132px"
       :text="$t('FolderPermissionSelector.label')"
-      :maxLength="16"
     />
     <BIMDataDropdownList
       class="folder-permission-selector__input"
diff --git a/src/components/specific/files/folder-access-manager/group-permission-selector/GroupPermissionSelector.vue b/src/components/specific/files/folder-access-manager/group-permission-selector/GroupPermissionSelector.vue
index cf6fa27fd..994043c95 100644
--- a/src/components/specific/files/folder-access-manager/group-permission-selector/GroupPermissionSelector.vue
+++ b/src/components/specific/files/folder-access-manager/group-permission-selector/GroupPermissionSelector.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="group-permission-selector">
-    <TextBox
+    <BIMDataTextBox
       class="group-permission-selector__label"
+      maxWidth="132px"
       :text="group.name"
-      :maxLength="16"
     />
     <BIMDataDropdownList
       class="group-permission-selector__input"
-      width="150px"
+      width="144px"
       height="32px"
       :list="permissionList"
       :closeOnElementClick="true"
diff --git a/src/components/specific/files/folder-selector/FolderSelector.scss b/src/components/specific/files/folder-selector/FolderSelector.scss
index 0a8335b23..5aea6079b 100644
--- a/src/components/specific/files/folder-selector/FolderSelector.scss
+++ b/src/components/specific/files/folder-selector/FolderSelector.scss
@@ -22,7 +22,6 @@
     }
 
     &__name {
-      display: block;
       font-weight: bold;
     }
 
@@ -56,9 +55,13 @@
         cursor: initial;
       }
 
+      &__icon {
+        min-width: 14px;
+      }
+
       &__name {
         flex-grow: 1;
-        align-self: flex-end;
+        max-width: calc(100% - 50px);
         padding: 0 calc(var(--spacing-unit) / 2);
       }
     }
diff --git a/src/components/specific/files/folder-selector/FolderSelector.vue b/src/components/specific/files/folder-selector/FolderSelector.vue
index d50d5dcc4..9825888d5 100644
--- a/src/components/specific/files/folder-selector/FolderSelector.vue
+++ b/src/components/specific/files/folder-selector/FolderSelector.vue
@@ -13,10 +13,10 @@
       </BIMDataButton>
 
       <BIMDataIcon name="folder" size="xs" />
-      <TextBox
+      <BIMDataTextBox
         class="folder-selector__head__name"
+        maxWidth="120px"
         :text="currentFolder.name"
-        :maxLength="32"
       />
       <BIMDataButton
         class="folder-selector__head__btn-close"
@@ -40,13 +40,19 @@
         @click="selectFolder(file)"
         @dblclick="enterFolder(file)"
       >
-        <BIMDataIcon v-if="isFolder(file)" name="folder" size="xs" />
-        <BIMDataFileIcon v-else-if="file.type === 'Ifc'" name="ifc" size="13" />
-        <BIMDataFileIcon v-else :name="fileExtension(file.name)" size="13" />
-        <TextBox
+        <span class="folder-selector__body__item__icon">
+          <BIMDataIcon v-if="isFolder(file)" name="folder" size="xs" />
+          <BIMDataFileIcon
+            v-else-if="file.type === 'Ifc'"
+            name="ifc"
+            size="13"
+          />
+          <BIMDataFileIcon v-else :name="fileExtension(file.name)" size="13" />
+        </span>
+        <BIMDataTextBox
           class="folder-selector__body__item__name"
           :text="file.name"
-          :maxLength="32"
+          :tooltip="false"
         />
         <BIMDataIcon
           v-if="isFolder(file)"
@@ -74,10 +80,11 @@
         :class="{ visibility: selectedFolder }"
       >
         {{ $t("FolderSelector.selectedFolder") }}:
-        <TextBox
+        <BIMDataTextBox
           style="font-weight: bold"
+          width="auto"
+          maxWidth="100px"
           :text="selectedFolder ? selectedFolder.name : ''"
-          :maxLength="24"
         />
       </div>
       <BIMDataButton
diff --git a/src/components/specific/groups/group-card/GroupCard.scss b/src/components/specific/groups/group-card/GroupCard.scss
index fbfc09fce..1a6edaa5a 100644
--- a/src/components/specific/groups/group-card/GroupCard.scss
+++ b/src/components/specific/groups/group-card/GroupCard.scss
@@ -26,7 +26,9 @@
     }
 
     .group-card__title {
+      max-width: 220px;
       margin-bottom: var(--spacing-unit);
+      text-align: center;
     }
 
     &:deep() {
diff --git a/src/components/specific/groups/group-card/GroupCard.vue b/src/components/specific/groups/group-card/GroupCard.vue
index cad5c0fd2..ffc15243d 100644
--- a/src/components/specific/groups/group-card/GroupCard.vue
+++ b/src/components/specific/groups/group-card/GroupCard.vue
@@ -23,11 +23,7 @@
             <BIMDataIcon name="ellipsis" size="l" fill color="granite-light" />
           </BIMDataButton>
           <BIMDataIcon name="group" size="xxl" />
-          <TextBox
-            class="group-card__title"
-            :text="group.name"
-            :maxLength="32"
-          />
+          <BIMDataTextBox class="group-card__title" :text="group.name" />
           <UserAvatarList
             class="group-card__avatars"
             :users="group.members"
diff --git a/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue
index 1e6475654..05ce15013 100644
--- a/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue
+++ b/src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue
@@ -36,7 +36,7 @@
       <template v-else>
         <div class="group-card-action-menu__menu">
           <div class="group-card-action-menu__menu__title">
-            <TextBox :text="group.name" :maxLength="32" />
+            <BIMDataTextBox maxWidth="200px" :text="group.name" />
             <BIMDataButton
               data-test="btn-close-menu"
               ghost
diff --git a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.scss b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.scss
index 19d9c17e9..1f0f5d0e0 100644
--- a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.scss
+++ b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.scss
@@ -53,6 +53,10 @@
     background-color: var(--color-white);
     color: var(--color-text);
 
+    &__text {
+      width: calc(#{$card-width} - 2 * var(--spacing-unit) - 72px);
+    }
+
     &__btn-previous {
       margin-left: auto;
     }
diff --git a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
index aa2bbd637..b84f14054 100644
--- a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
+++ b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
@@ -25,7 +25,9 @@
     </div>
 
     <div class="models-card-model-preview__switcher" v-if="images.length > 0">
-      <TextBox :text="image.name" :maxLength="44" />
+      <div class="models-card-model-preview__switcher__text">
+        <BIMDataTextBox :text="image.name" tooltipPosition="top" />
+      </div>
       <template v-if="images.length > 1">
         <BIMDataButton
           class="models-card-model-preview__switcher__btn-previous"
diff --git a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.scss b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.scss
index 2dd4f0321..302b49c16 100644
--- a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.scss
+++ b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.scss
@@ -24,5 +24,6 @@
     display: flex;
     align-items: center;
     gap: calc(var(--spacing-unit) / 2);
+    max-width: 320px;
   }
 }
diff --git a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
index 670fbe89c..950fb1cba 100644
--- a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
+++ b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
@@ -37,7 +37,7 @@
 
       <div v-else class="model-name-cell__content">
         <img src="/static/ifc-logo.svg" />
-        <TextBox :text="model.name" :maxLength="64" />
+        <BIMDataTextBox :text="model.name" />
       </div>
     </transition>
   </div>
diff --git a/src/components/specific/organizations/organizations-manager/OrganizationsManager.vue b/src/components/specific/organizations/organizations-manager/OrganizationsManager.vue
index 59b98e578..c0f89fa9c 100644
--- a/src/components/specific/organizations/organizations-manager/OrganizationsManager.vue
+++ b/src/components/specific/organizations/organizations-manager/OrganizationsManager.vue
@@ -8,10 +8,10 @@
         <BIMDataIcon name="arrow" size="xxs" margin="0 6px 0 0" />
         <span>{{ $t("OrganizationsManager.backButtonText") }}</span>
       </BIMDataButton>
-      <TextBox
+      <BIMDataTextBox
         v-if="localState.organization"
+        maxWidth="260px"
         :text="localState.organization.name"
-        :maxLength="24"
       />
       <BIMDataButton
         ghost
diff --git a/src/components/specific/organizations/organizations-manager/organization-spaces-import/OrganizationSpacesImport.vue b/src/components/specific/organizations/organizations-manager/organization-spaces-import/OrganizationSpacesImport.vue
index 24c878d5c..dee48b4d1 100644
--- a/src/components/specific/organizations/organizations-manager/organization-spaces-import/OrganizationSpacesImport.vue
+++ b/src/components/specific/organizations/organizations-manager/organization-spaces-import/OrganizationSpacesImport.vue
@@ -22,10 +22,10 @@
                   <SpaceCardImage :space="space" />
                 </div>
                 <div class="organization-import-card__info">
-                  <TextBox
+                  <BIMDataTextBox
                     class="organization-import-card__info__name"
+                    maxWidth="220px"
                     :text="space.name"
-                    :maxLength="32"
                   />
                   <div class="organization-import-card__info__data">
                     {{ space.organization.name }}
diff --git a/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.scss b/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.scss
index dd9e43525..5af96e91c 100644
--- a/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.scss
+++ b/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.scss
@@ -7,6 +7,7 @@
   align-items: center;
 
   &__image {
+    min-width: 44px;
     width: 44px;
     height: 44px;
     margin-left: calc(var(--spacing-unit) / 2);
diff --git a/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.vue b/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.vue
index 4b5057600..8fa8ec33e 100644
--- a/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.vue
+++ b/src/components/specific/organizations/organizations-manager/organization-spaces-list/organization-space-card/OrganizationSpaceCard.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="organization-space-card__info">
       <div class="organization-space-card__info__name">
-        <TextBox :text="space.name" :maxLength="36" />
+        <BIMDataTextBox maxWidth="260px" :text="space.name" />
       </div>
       <div class="organization-space-card__info__data">
         <span class="organization-space-card__info__data--date">
diff --git a/src/components/specific/organizations/organizations-manager/organizations-list/organization-card/OrganizationCard.vue b/src/components/specific/organizations/organizations-manager/organizations-list/organization-card/OrganizationCard.vue
index 7de0a6330..6e13a046a 100644
--- a/src/components/specific/organizations/organizations-manager/organizations-list/organization-card/OrganizationCard.vue
+++ b/src/components/specific/organizations/organizations-manager/organizations-list/organization-card/OrganizationCard.vue
@@ -11,7 +11,7 @@
     </div>
     <div class="organization-card__info">
       <div class="organization-card__info__name">
-        <TextBox :text="organization.name" :maxLength="32" />
+        <BIMDataTextBox maxWidth="220px" :text="organization.name" />
       </div>
       <div class="organization-card__info__data">
         <span class="organization-card__info__data--spaces">
diff --git a/src/components/specific/projects/project-card/ProjectCard.scss b/src/components/specific/projects/project-card/ProjectCard.scss
index 28aff8d88..82d38c456 100644
--- a/src/components/specific/projects/project-card/ProjectCard.scss
+++ b/src/components/specific/projects/project-card/ProjectCard.scss
@@ -64,6 +64,11 @@
         justify-content: center;
         align-items: center;
         color: var(--color-text);
+
+        .project-card__title {
+          width: 80%;
+          text-align: center;
+        }
       }
     }
 
diff --git a/src/components/specific/projects/project-card/ProjectCard.vue b/src/components/specific/projects/project-card/ProjectCard.vue
index 80a002f1a..7708bac2e 100644
--- a/src/components/specific/projects/project-card/ProjectCard.vue
+++ b/src/components/specific/projects/project-card/ProjectCard.vue
@@ -27,7 +27,9 @@
           />
         </template>
         <template #footer>
-          <TextBox :text="project.name" :maxLength="30" />
+          <div class="project-card__title">
+            <BIMDataTextBox :text="project.name" />
+          </div>
         </template>
       </BIMDataCard>
     </template>
diff --git a/src/components/specific/projects/project-card/project-card-action-menu/ProjectCardActionMenu.vue b/src/components/specific/projects/project-card/project-card-action-menu/ProjectCardActionMenu.vue
index 21dc1569d..e08fac386 100644
--- a/src/components/specific/projects/project-card/project-card-action-menu/ProjectCardActionMenu.vue
+++ b/src/components/specific/projects/project-card/project-card-action-menu/ProjectCardActionMenu.vue
@@ -26,7 +26,7 @@
       <template v-else>
         <div class="project-card-action-menu__menu">
           <div class="project-card-action-menu__menu__title">
-            <TextBox :text="project.name" :maxLength="32" />
+            <BIMDataTextBox width="220px" :text="project.name" />
             <BIMDataButton
               data-test="btn-close-menu"
               ghost
diff --git a/src/components/specific/spaces/space-card/SpaceCard.scss b/src/components/specific/spaces/space-card/SpaceCard.scss
index 2ca858bd3..148e7a7d1 100644
--- a/src/components/specific/spaces/space-card/SpaceCard.scss
+++ b/src/components/specific/spaces/space-card/SpaceCard.scss
@@ -46,18 +46,19 @@
       height: calc(100% - #{$card-content-height});
       padding: 0;
 
-      .text-box {
-        color: var(--color-text);
+      .space-card__title {
+        width: 80%;
+        text-align: center;
       }
 
-      .title-underline {
+      .space-card__title-underline {
         height: 1px;
         width: 50px;
         margin: calc(var(--spacing-unit) * 2 / 3) 0;
         background-color: var(--color-silver);
       }
 
-      .sub-title {
+      .space-card__sub-title {
         text-align: center;
         line-height: 14px;
 
diff --git a/src/components/specific/spaces/space-card/SpaceCard.vue b/src/components/specific/spaces/space-card/SpaceCard.vue
index 0f8a01932..25e0ce08f 100644
--- a/src/components/specific/spaces/space-card/SpaceCard.vue
+++ b/src/components/specific/spaces/space-card/SpaceCard.vue
@@ -14,11 +14,17 @@
       <SpaceCardImage :space="space" topStripe />
     </template>
     <template #footer>
-      <TextBox :text="space.name" :maxLength="30" />
-      <div class="title-underline"></div>
-      <div class="sub-title">
-        <div class="sub-title__text">{{ $t("SpaceCard.projects") }}</div>
-        <div class="sub-title__number">{{ nbProjects }}</div>
+      <div class="space-card__title">
+        <BIMDataTextBox :text="space.name" />
+      </div>
+      <div class="space-card__title-underline"></div>
+      <div class="space-card__sub-title">
+        <div class="space-card__sub-title__text">
+          {{ $t("SpaceCard.projects") }}
+        </div>
+        <div class="space-card__sub-title__number">
+          {{ nbProjects }}
+        </div>
       </div>
     </template>
   </BIMDataCard>
diff --git a/src/components/specific/subscriptions/billings-table/BillingsTable.scss b/src/components/specific/subscriptions/billings-table/BillingsTable.scss
index cd3a6abb7..237180b9e 100644
--- a/src/components/specific/subscriptions/billings-table/BillingsTable.scss
+++ b/src/components/specific/subscriptions/billings-table/BillingsTable.scss
@@ -1,7 +1,10 @@
 .billings-table {
-  .space-cell:hover {
-    text-decoration: underline;
-    cursor: pointer;
+  .space-cell {
+    max-width: 300px;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
   }
 
   .status-cell {
diff --git a/src/components/specific/subscriptions/billings-table/BillingsTable.vue b/src/components/specific/subscriptions/billings-table/BillingsTable.vue
index 01cd517d8..105ba6387 100644
--- a/src/components/specific/subscriptions/billings-table/BillingsTable.vue
+++ b/src/components/specific/subscriptions/billings-table/BillingsTable.vue
@@ -13,9 +13,11 @@
           :perPage="7"
         >
           <template #cell-space="{ row: sub }">
-            <span class="space-cell" @click="goToSpaceBoard(sub.cloud)">
-              {{ (sub.cloud || {}).name }}
-            </span>
+            <BIMDataTextBox
+              class="space-cell"
+              :text="(sub.cloud || {}).name"
+              @click="goToSpaceBoard(sub.cloud)"
+            />
           </template>
           <template #cell-nextpayment="{ row: sub }">
             {{ $d(sub.next_bill_date, "short") }}
diff --git a/src/components/specific/subscriptions/invoices-table/InvoicesTable.vue b/src/components/specific/subscriptions/invoices-table/InvoicesTable.vue
index 40b5380b1..3f8f9ced5 100644
--- a/src/components/specific/subscriptions/invoices-table/InvoicesTable.vue
+++ b/src/components/specific/subscriptions/invoices-table/InvoicesTable.vue
@@ -14,7 +14,12 @@
           :placeholder="$t('InvoicesTable.tablePlaceholder')"
         >
           <template #cell-space="{ row: payment }">
-            {{ (subscriptionsMap[payment.subscription_id].cloud || {}).name }}
+            <BIMDataTextBox
+              maxWidth="300px"
+              :text="
+                (subscriptionsMap[payment.subscription_id].cloud || {}).name
+              "
+            />
           </template>
           <template #cell-date="{ row: payment }">
             {{ $d(payment.payout_date, "short") }}
diff --git a/src/components/specific/subscriptions/space-selected/SpaceSelected.vue b/src/components/specific/subscriptions/space-selected/SpaceSelected.vue
index 3268f1270..fba7a5f44 100644
--- a/src/components/specific/subscriptions/space-selected/SpaceSelected.vue
+++ b/src/components/specific/subscriptions/space-selected/SpaceSelected.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="space-selected flex items-center">
     <div class="m-r-24 flex items-center">
-      <span class="m-r-12 primary-font-bold">
+      <span class="m-r-12 primary-font-bold" style="white-space: nowrap">
         {{ $t("SpaceSelected.selectedOrga") }}
       </span>
-      <TextBox :text="space.organization.name" :maxLength="56" />
+      <BIMDataTextBox maxWidth="160px" :text="space.organization.name" />
     </div>
     <div class="flex items-center">
-      <span class="m-r-12 primary-font-bold">
+      <span class="m-r-12 primary-font-bold" style="white-space: nowrap">
         {{ $t("SpaceSelected.selectedSpace") }}
       </span>
-      <TextBox :text="space.name" :maxLength="56" />
+      <BIMDataTextBox maxWidth="160px" :text="space.name" />
     </div>
   </div>
 </template>