diff --git a/src/app.tsx b/src/app.tsx
index 3aa58212b..1327ab92c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -17,7 +17,7 @@
  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 import {
     AlertGroup, Alert, AlertVariant, AlertActionCloseButton
@@ -67,6 +67,22 @@ export const FilesContext = React.createContext({
 
 export const useFilesContext = () => useContext(FilesContext);
 
+export const usePath = () => {
+    const { options } = usePageLocation();
+    let currentPath = decodeURIComponent(options.path?.toString() || "/");
+
+    // Our path will always be `/foo/` formatted
+    if (!currentPath.endsWith("/")) {
+        currentPath += "/";
+    }
+
+    if (!currentPath.startsWith("/")) {
+        currentPath = `/${currentPath}`;
+    }
+
+    return currentPath;
+};
+
 export const Application = () => {
     const { options } = usePageLocation();
     const [loading, setLoading] = useState(true);
@@ -79,10 +95,8 @@ export const Application = () => {
     const [alerts, setAlerts] = useState<Alert[]>([]);
     const [cwdInfo, setCwdInfo] = useState<FileInfo | null>(null);
 
-    const currentPath = decodeURIComponent(options.path?.toString() || "");
-    // the function itself is not expensive, but `path` is later used in expensive computation
-    // and changing its reference value on every render causes performance issues
-    const path = useMemo(() => currentPath?.split("/"), [currentPath]);
+    const path = usePath();
+    console.log("path", path);
 
     useEffect(() => {
         cockpit.user().then(user => {
@@ -102,7 +116,7 @@ export const Application = () => {
             setSelected([]);
 
             const client = new FsInfoClient(
-                `/${currentPath}`,
+                path,
                 ["type", "mode", "size", "mtime", "user", "group", "target", "entries", "targets"],
                 { superuser: 'try' }
             );
@@ -126,7 +140,7 @@ export const Application = () => {
                 client.close();
             };
         },
-        [options, currentPath]
+        [options, path]
     );
 
     if (loading)
@@ -159,9 +173,7 @@ export const Application = () => {
                             </Alert>
                         ))}
                     </AlertGroup>
-                    <FilesBreadcrumbs
-                      path={path}
-                    />
+                    <FilesBreadcrumbs path={path} />
                     <PageSection>
                         <Sidebar isPanelRight hasGutter>
                             <SidebarContent>
diff --git a/src/common.ts b/src/common.ts
index d1caaded4..d53aadfc8 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -53,6 +53,11 @@ export function * map_permissions<T>(func: (value: number, label: string) => T)
 }
 
 export function basename(path: string) {
+    if (path === '/') {
+        return path;
+    }
+
+    path = path.replace(/\/$/, '');
     const elements = path.split('/');
     if (elements.length === 0) {
         return '/';
diff --git a/src/dialogs/permissions.jsx b/src/dialogs/permissions.jsx
index 64d65c255..8529ca001 100644
--- a/src/dialogs/permissions.jsx
+++ b/src/dialogs/permissions.jsx
@@ -32,7 +32,7 @@ import { etc_group_syntax, etc_passwd_syntax } from 'pam_user_parser';
 import { superuser } from 'superuser';
 
 import { useFilesContext } from '../app';
-import { map_permissions, inode_types } from '../common';
+import { map_permissions, inode_types, basename } from '../common';
 
 const _ = cockpit.gettext;
 
@@ -41,7 +41,7 @@ const EditPermissionsModal = ({ dialogResult, selected, path }) => {
 
     // Nothing selected means we act on the current working directory
     if (!selected) {
-        const directory_name = path[path.length - 1];
+        const directory_name = basename(path);
         selected = { ...cwdInfo, isCwd: true, name: directory_name };
     }
 
@@ -82,7 +82,7 @@ const EditPermissionsModal = ({ dialogResult, selected, path }) => {
         const ownerChanged = owner !== selected.user || group !== selected.group;
 
         try {
-            const directory = selected?.isCwd ? path.join("/") : path.join("/") + "/" + selected.name;
+            const directory = selected?.isCwd ? path : path + selected.name;
             if (permissionChanged)
                 await cockpit.spawn(["chmod", mode.toString(8), directory],
                                     { superuser: "try", err: "message" });
diff --git a/src/dialogs/rename.tsx b/src/dialogs/rename.tsx
index ef29afdff..5c8bb4a7f 100644
--- a/src/dialogs/rename.tsx
+++ b/src/dialogs/rename.tsx
@@ -74,7 +74,7 @@ function checkCanOverride(candidate: string, entries: Record<string, FileInfo>,
 
 const RenameItemModal = ({ dialogResult, path, selected } : {
     dialogResult: DialogResult<void>
-    path: string[],
+    path: string,
     selected: FolderFileInfo,
 }) => {
     const { cwdInfo } = useFilesContext();
@@ -84,12 +84,12 @@ const RenameItemModal = ({ dialogResult, path, selected } : {
     const [overrideFileName, setOverrideFileName] = useState(false);
 
     const renameItem = (force = false) => {
-        const newPath = path.join("/") + "/" + name;
+        const newPath = path + name;
         const mvCmd = ["mv", "--no-target-directory"];
         if (force) {
             mvCmd.push("--force");
         }
-        mvCmd.push(path.join("/") + "/" + selected.name, newPath);
+        mvCmd.push(path + selected.name, newPath);
 
         cockpit.spawn(mvCmd, { superuser: "try", err: "message" })
                 .then(() => {
@@ -167,6 +167,6 @@ const RenameItemModal = ({ dialogResult, path, selected } : {
     );
 };
 
-export function show_rename_dialog(dialogs: Dialogs, path: string[], selected: FolderFileInfo) {
+export function show_rename_dialog(dialogs: Dialogs, path: string, selected: FolderFileInfo) {
     dialogs.run(RenameItemModal, { path, selected });
 }
diff --git a/src/files-breadcrumbs.tsx b/src/files-breadcrumbs.tsx
index c7710fa0d..eb834589d 100644
--- a/src/files-breadcrumbs.tsx
+++ b/src/files-breadcrumbs.tsx
@@ -60,7 +60,7 @@ function useHostname() {
     return hostname;
 }
 
-function BookmarkButton({ path }: { path: string[] }) {
+function BookmarkButton({ path }: { path: string }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [user, setUser] = React.useState<cockpit.UserInfo | null>(null);
     const [bookmarks, setBookmarks] = React.useState<string[]>([]);
@@ -68,7 +68,6 @@ function BookmarkButton({ path }: { path: string[] }) {
 
     const { addAlert, cwdInfo } = useFilesContext();
 
-    const currentPath = path.join("/") || "/";
     const defaultBookmarks = [];
     if (user?.home)
         defaultBookmarks.push({ name: _("Home"), loc: user?.home }); // TODO: add trash
@@ -122,11 +121,11 @@ function BookmarkButton({ path }: { path: string[] }) {
 
         try {
             await bookmarkHandle.modify((old_content: string) => {
-                if (bookmarks.includes(currentPath)) {
-                    return old_content.split('\n').filter(line => parse_uri(line) !== currentPath)
+                if (bookmarks.includes(path)) {
+                    return old_content.split('\n').filter(line => parse_uri(line) !== path)
                             .join('\n');
                 } else {
-                    const newBoomark = "file://" + path.map(part => encodeURIComponent(part))
+                    const newBoomark = "file://" + path.split('/').map(part => encodeURIComponent(part))
                             .join('/') + "\n";
                     return (old_content || '') + newBoomark;
                 }
@@ -152,8 +151,8 @@ function BookmarkButton({ path }: { path: string[] }) {
         return null;
 
     let actionText = null;
-    if (currentPath !== user.home) {
-        if (bookmarks.includes(currentPath)) {
+    if (path !== user.home) {
+        if (bookmarks.includes(path)) {
             actionText = _("Remove current directory");
         } else if (cwdInfo !== null) {
             actionText = _("Add bookmark");
@@ -206,13 +205,16 @@ function BookmarkButton({ path }: { path: string[] }) {
 }
 
 // eslint-disable-next-line max-len
-export function FilesBreadcrumbs({ path }: { path: string[] }) {
+export function FilesBreadcrumbs({ path }: { path: string }) {
     const [editMode, setEditMode] = React.useState(false);
     const [newPath, setNewPath] = React.useState<string | null>(null);
     const hostname = useHostname();
 
     function navigate(n_parts: number) {
-        cockpit.location.go("/", { path: encodeURIComponent(path.slice(0, n_parts).join("/")) });
+        cockpit.location.go("/", {
+            path: encodeURIComponent(path.split('/').slice(0, n_parts)
+                    .join("/"))
+        });
     }
 
     const handleInputKey = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -232,7 +234,7 @@ export function FilesBreadcrumbs({ path }: { path: string[] }) {
 
     const enableEditMode = () => {
         setEditMode(true);
-        setNewPath(path.join("/") || "/");
+        setNewPath(path);
     };
 
     const changePath = () => {
@@ -248,8 +250,12 @@ export function FilesBreadcrumbs({ path }: { path: string[] }) {
         setEditMode(false);
     };
 
-    const fullPath = path.slice(1);
+    const fullPath = path.split('/').slice(1, path.length);
     fullPath.unshift(hostname || "server");
+    // HACK: drop the last /, as the breadcrumb already inserts an artifical /
+    if (fullPath.length > 1) {
+        fullPath.pop();
+    }
 
     return (
         <PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
@@ -268,7 +274,7 @@ export function FilesBreadcrumbs({ path }: { path: string[] }) {
                     return (
                         <React.Fragment key={fullPath.slice(0, i).join("/") || "/"}>
                             <Button
-                              isDisabled={i === path.length - 1}
+                              isDisabled={i === fullPath.length - 1}
                               icon={i === 0 ? <HddIcon /> : null}
                               variant="link" onClick={() => { navigate(i + 1) }}
                               className={`breadcrumb-button breadcrumb-${i}`}
diff --git a/src/files-card-body.tsx b/src/files-card-body.tsx
index c69470ae8..b17dff136 100644
--- a/src/files-card-body.tsx
+++ b/src/files-card-body.tsx
@@ -66,7 +66,7 @@ function compare(sortBy: Sort): (a: FolderFileInfo, b: FolderFileInfo) => number
 }
 
 const ContextMenuItems = ({ path, selected, setSelected, clipboard, setClipboard } : {
-    path: string[],
+    path: string,
     selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
     clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>,
 }) => {
@@ -115,7 +115,7 @@ export const FilesCardBody = ({
     setCurrentFilter: React.Dispatch<React.SetStateAction<string>>,
     files: FolderFileInfo[],
     isGrid: boolean,
-    path: string[],
+    path: string,
     selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
     sortBy: Sort, setSortBy: React.Dispatch<React.SetStateAction<Sort>>,
     loadingFiles: boolean,
@@ -150,7 +150,7 @@ export const FilesCardBody = ({
     }
 
     const onDoubleClickNavigate = useCallback((file: FolderFileInfo) => {
-        const newPath = [...path, file.name].join("/");
+        const newPath = path + file.name;
         if (file.to === "dir") {
             cockpit.location.go("/", { path: encodeURIComponent(newPath) });
         }
@@ -272,7 +272,7 @@ export const FilesCardBody = ({
             } else if (e.key === "Enter" && selected.length === 1) {
                 onDoubleClickNavigate(selected[0]);
             } else if (e.key === "Delete" && selected.length !== 0) {
-                confirm_delete(dialogs, path.join("/") + "/", selected, setSelected);
+                confirm_delete(dialogs, path, selected, setSelected);
             }
         };
 
diff --git a/src/files-folder-view.tsx b/src/files-folder-view.tsx
index ea66fe463..90a7e442b 100644
--- a/src/files-folder-view.tsx
+++ b/src/files-folder-view.tsx
@@ -36,7 +36,7 @@ export const FilesFolderView = ({
     setClipboard,
     setShowHidden,
 }: {
-    path: string[],
+    path: string,
     files: FolderFileInfo[],
     loadingFiles: boolean,
     showHidden: boolean,
diff --git a/src/header.tsx b/src/header.tsx
index f941aa6bf..4c01fdd98 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -111,7 +111,7 @@ export const FilesCardHeader = ({
     isGrid: boolean, setIsGrid: React.Dispatch<React.SetStateAction<boolean>>,
     sortBy: Sort, setSortBy: React.Dispatch<React.SetStateAction<Sort>>
     showHidden: boolean, setShowHidden: React.Dispatch<React.SetStateAction<boolean>>,
-    path: string[],
+    path: string,
 }) => {
     return (
         <CardHeader className="card-actionbar">
diff --git a/src/menu.tsx b/src/menu.tsx
index b21b83ce5..e79d0ce8a 100644
--- a/src/menu.tsx
+++ b/src/menu.tsx
@@ -45,14 +45,13 @@ type MenuItem = { type: "divider" } | {
 };
 
 export function get_menu_items(
-    path: string[],
+    path: string,
     selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
     clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>,
     cwdInfo: FileInfo | null,
     addAlert: (title: string, variant: AlertVariant, key: string, detail?: string) => void,
     dialogs: Dialogs,
 ) {
-    const currentPath = path.join("/") + "/";
     const menuItems: MenuItem[] = [];
 
     if (selected.length === 0) {
@@ -73,7 +72,7 @@ export function get_menu_items(
                         "cp",
                         "-R",
                         ...clipboard,
-                        currentPath
+                        path
                     ]).catch(err => addAlert(err.message, AlertVariant.danger, `${new Date().getTime()}`));
                 }
             },
@@ -81,7 +80,7 @@ export function get_menu_items(
             {
                 id: "create-item",
                 title: _("Create directory"),
-                onClick: () => show_create_directory_dialog(dialogs, currentPath)
+                onClick: () => show_create_directory_dialog(dialogs, path)
             },
             { type: "divider" },
             {
@@ -95,7 +94,7 @@ export function get_menu_items(
             {
                 id: "copy-item",
                 title: _("Copy"),
-                onClick: () => setClipboard([currentPath + selected[0].name]),
+                onClick: () => setClipboard([path + selected[0].name]),
             },
             { type: "divider" },
             {
@@ -113,7 +112,7 @@ export function get_menu_items(
                 id: "delete-item",
                 title: _("Delete"),
                 className: "pf-m-danger",
-                onClick: () => confirm_delete(dialogs, currentPath, selected, setSelected)
+                onClick: () => confirm_delete(dialogs, path, selected, setSelected)
             },
         );
         if (selected[0].type === "reg")
@@ -122,7 +121,7 @@ export function get_menu_items(
                 {
                     id: "download-item",
                     title: _("Download"),
-                    onClick: () => downloadFile(currentPath, selected[0])
+                    onClick: () => downloadFile(path, selected[0])
                 }
             );
     } else if (selected.length > 1) {
@@ -130,13 +129,13 @@ export function get_menu_items(
             {
                 id: "copy-item",
                 title: _("Copy"),
-                onClick: () => setClipboard(selected.map(s => path.join("/") + "/" + s.name)),
+                onClick: () => setClipboard(selected.map(s => path + s.name)),
             },
             {
                 id: "delete-item",
                 title: _("Delete"),
                 className: "pf-m-danger",
-                onClick: () => confirm_delete(dialogs, currentPath, selected, setSelected)
+                onClick: () => confirm_delete(dialogs, path, selected, setSelected)
             }
         );
     }
diff --git a/src/sidebar.tsx b/src/sidebar.tsx
index b4839ad4e..4e0d0e38e 100644
--- a/src/sidebar.tsx
+++ b/src/sidebar.tsx
@@ -37,7 +37,7 @@ import { useDialogs } from "dialogs";
 import * as timeformat from "timeformat";
 
 import { FolderFileInfo, useFilesContext } from "./app";
-import { get_permissions } from "./common";
+import { basename, get_permissions } from "./common";
 import { edit_permissions } from "./dialogs/permissions";
 import { get_menu_items } from "./menu";
 
@@ -93,7 +93,7 @@ function getDescriptionListItems(selected: FolderFileInfo) {
 
 export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHidden, clipboard, setClipboard } : {
     files: FolderFileInfo[],
-    path: string[],
+    path: string,
     selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
     showHidden: boolean,
     clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>
@@ -103,7 +103,7 @@ export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHi
 
     useEffect(() => {
         if (selected.length === 1) {
-            const filePath = path.join("/") + "/" + selected[0]?.name;
+            const filePath = path + selected[0]?.name;
 
             cockpit.spawn(["file", "--brief", filePath], { superuser: "try", err: "message" })
                     .then(res => setInfo(res?.trim()))
@@ -112,7 +112,7 @@ export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHi
     }, [path, selected]);
 
     const dialogs = useDialogs();
-    const directory_name = path[path.length - 1];
+    const directory_name = basename(path);
     const hidden_count = files.filter(file => file.name.startsWith(".")).length;
     let shown_items = cockpit.format(cockpit.ngettext("$0 item", "$0 items", files.length), files.length);
     if (!showHidden)
diff --git a/src/upload-button.tsx b/src/upload-button.tsx
index c61971908..391e2f0fd 100644
--- a/src/upload-button.tsx
+++ b/src/upload-button.tsx
@@ -55,7 +55,7 @@ const FileConflictDialog = ({
     isMultiUpload,
     dialogResult
 }: {
-    path: string[];
+    path: string;
     file: FileInfo,
     uploadFile: File,
     isMultiUpload: boolean,
@@ -96,7 +96,7 @@ const FileConflictDialog = ({
             <p>
                 {cockpit.format(
                     _("A file with the same name already exists in \"$0\". Replacing it will overwrite its content."),
-                    path.join('/')
+                    path
                 )}
             </p>
             <Flex
@@ -129,7 +129,7 @@ const FileConflictDialog = ({
 export const UploadButton = ({
     path,
 } : {
-    path: string[],
+    path: string,
 }) => {
     const ref = useRef<HTMLInputElement>(null);
     const { addAlert, cwdInfo } = useFilesContext();
@@ -209,9 +209,7 @@ export const UploadButton = ({
 
         const cancelledUploads = [];
         await Promise.allSettled(toUploadFiles.map(async (file: File) => {
-            const tmp_path = path.slice();
-            tmp_path.push(file.name);
-            const destination = tmp_path.join('/');
+            const destination = path + file.name;
             const abort = new AbortController();
 
             setUploadedFiles(oldFiles => {
diff --git a/test/check-application b/test/check-application
index 2ce17b115..3ff70a309 100755
--- a/test/check-application
+++ b/test/check-application
@@ -348,7 +348,7 @@ class TestFiles(testlib.MachineCase):
 
         # Via escape
         b.click(edit_button)
-        b.wait_val(path_input, "/home")
+        b.wait_val(path_input, "/home/")
         b.set_input_text(path_input, "/home/admin")
         b.wait_visible(path_input)
         b.focus(path_input)
@@ -358,7 +358,7 @@ class TestFiles(testlib.MachineCase):
         # Via cancel button
         b.click(edit_button)
         # Cancelled edit should not save the path
-        b.wait_val(path_input, "/home")
+        b.wait_val(path_input, "/home/")
         b.click(cancel_button)
         b.wait_not_present(path_input)
 
@@ -384,7 +384,7 @@ class TestFiles(testlib.MachineCase):
         b.wait_not_present(path_input)
         b.click(edit_button)
         b.wait_visible(path_input)
-        b.wait_val(path_input, "/var")
+        b.wait_val(path_input, "/var/")
         b.click(cancel_button)
 
         # Editing / shows / in the input