diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
index ef8bed17d5c4118aa06ea115236ca575074d1fb8..b83d695a0893ad34dae2c6aeb1adc574c6dded21 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 import {
   formatDate,
   getFileExtension,
-  truncate,
-} from "../../../../../../utils/directories";
+  middleTruncate,
+} from "@/utils/directories";
 import { File, Trash } from "@phosphor-icons/react";
-import System from "../../../../../../models/system";
+import System from "@/models/system";
 import debounce from "lodash.debounce";
 
 export default function FileRow({
@@ -76,7 +76,7 @@ export default function FileRow({
           onMouseLeave={handleMouseLeave}
         >
           <p className="whitespace-nowrap overflow-hidden">
-            {truncate(item.title, 17)}
+            {middleTruncate(item.title, 17)}
           </p>
           {showTooltip && (
             <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
index abf4cef9cda050adbaa62e4aeacffadce85984f1..f2d5d5c71c41f1b5cc9bdf4635e5ce9dec04e40e 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import FileRow from "../FileRow";
 import { CaretDown, FolderNotch } from "@phosphor-icons/react";
-import { truncate } from "../../../../../../utils/directories";
+import { middleTruncate } from "@/utils/directories";
 
 export default function FolderRow({
   item,
@@ -50,7 +50,7 @@ export default function FolderRow({
             weight="fill"
           />
           <p className="whitespace-nowrap overflow-show">
-            {truncate(item.name, 40)}
+            {middleTruncate(item.name, 40)}
           </p>
         </div>
         <p className="col-span-2 pl-3.5" />
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index 1eeb00f44adf3659fd4ac845376d19aa41ecfcc5..072010336d2f394c3f82d1dc1c3dff37a3427fb3 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -1,9 +1,8 @@
 import UploadFile from "../UploadFile";
-import PreLoader from "../../../../Preloader";
+import PreLoader from "@/components/Preloader";
 import { useEffect, useState } from "react";
 import FolderRow from "./FolderRow";
 import pluralize from "pluralize";
-import Workspace from "../../../../../models/workspace";
 
 export default function Directory({
   files,
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index 4468ee27b2b0eb2245bc19fd3361b0a7a0e0bce6..da75ec02fe93731d875bf58aebcf84d33e679c71 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 import {
   formatDate,
   getFileExtension,
-  truncate,
-} from "../../../../../../utils/directories";
+  middleTruncate,
+} from "@/utils/directories";
 import { ArrowUUpLeft, File } from "@phosphor-icons/react";
-import Workspace from "../../../../../../models/workspace";
+import Workspace from "@/models/workspace";
 import debounce from "lodash.debounce";
 
 export default function WorkspaceFileRow({
@@ -65,7 +65,7 @@ export default function WorkspaceFileRow({
           onMouseLeave={handleMouseLeave}
         >
           <p className="whitespace-nowrap overflow-hidden">
-            {truncate(item.title, 17)}
+            {middleTruncate(item.title, 17)}
           </p>
           {showTooltip && (
             <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
index 8b1381a141b64c406f721af5c814553010bcd9e0..9969e844e268bded928bc4b68ae9d937e4ec07f2 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -1,5 +1,5 @@
-import PreLoader from "../../../../Preloader";
-import { dollarFormat } from "../../../../../utils/numbers";
+import PreLoader from "@/components/Preloader";
+import { dollarFormat } from "@/utils/numbers";
 import WorkspaceFileRow from "./WorkspaceFileRow";
 
 export default function WorkspaceDirectory({
diff --git a/frontend/src/utils/directories.js b/frontend/src/utils/directories.js
index 9a63ceb3fa821c387e0dbe74aa7013f5a69e923a..48021c514893ac482cd0ba846c258f4fd4ff21a2 100644
--- a/frontend/src/utils/directories.js
+++ b/frontend/src/utils/directories.js
@@ -11,7 +11,7 @@ export function getFileExtension(path) {
   return path?.split(".")?.slice(-1)?.[0] || "file";
 }
 
-export function truncate(str, n) {
+export function middleTruncate(str, n) {
   const fileExtensionPattern = /(\..+)$/;
   const extensionMatch = str.match(fileExtensionPattern);