diff --git a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
index 5e595a2e5..c125dd2c2 100644
--- a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
+++ b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
@@ -25,10 +25,10 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
         .filter(directory => !!directory)
         .map((directory, index, dirs) => {
             if (!withinFileEditor && index === dirs.length - 1) {
-                return { name: directory };
+                return { name: decodeURIComponent(directory) };
             }
 
-            return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
+            return { name: decodeURIComponent(directory), path: `/${dirs.slice(0, index + 1).join('/')}` };
         });
 
     return (
@@ -57,7 +57,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
             }
             {file &&
             <React.Fragment>
-                <span className={'px-1 text-neutral-300'}>{file}</span>
+                <span className={'px-1 text-neutral-300'}>{decodeURIComponent(file)}</span>
             </React.Fragment>
             }
         </div>
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 86141d213..842cddf8a 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -70,7 +70,12 @@ export default () => {
                             />
                             <p className={'text-xs mt-2 text-neutral-400'}>
                                 <span className={'text-neutral-200'}>This directory will be created as</span>
-                                &nbsp;/home/container/<span className={'text-cyan-200'}>{join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}</span>
+                                &nbsp;/home/container/
+                                <span className={'text-cyan-200'}>
+                                    {decodeURIComponent(
+                                        join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, ''),
+                                    )}
+                                </span>
                             </p>
                             <div className={'flex justify-end'}>
                                 <button className={'btn btn-sm btn-primary mt-8'}>
diff --git a/resources/scripts/state/server/files.ts b/resources/scripts/state/server/files.ts
index 7654a7f53..bc7f6539e 100644
--- a/resources/scripts/state/server/files.ts
+++ b/resources/scripts/state/server/files.ts
@@ -48,7 +48,7 @@ const files: ServerFileStore = {
     }),
 
     setDirectory: action((state, payload) => {
-        state.directory = cleanDirectoryPath(payload)
+        state.directory = cleanDirectoryPath(payload);
     }),
 };