diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index b3fe412d95..6418630dba 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -91,68 +91,6 @@
             .note-paths-widget {
                 padding: 0.5em;
             }
-
-            .note-path-intro {
-                color: var(--muted-text-color);
-            }
-
-            .note-path-list {
-                margin: 12px 0;
-                padding: 0;
-                list-style: none;
-
-                /* Note path card */
-                li {
-                    --border-radius: 6px;
-
-                    position: relative;
-                    background: var(--card-background-color);
-                    padding: 8px 20px 8px 25px;
-
-                    &:first-child {
-                        border-radius: var(--border-radius) var(--border-radius) 0 0;
-                    }
-
-                    &:last-child {
-                        border-radius: 0 0 var(--border-radius) var(--border-radius);
-                    }
-
-                    & + li {
-                        margin-top: 2px;
-                    }
-
-                    /* Current path arrow */
-                    &.path-current::before {
-                        position: absolute;
-                        display: flex;
-                        justify-content: flex-end;
-                        align-items: center;
-                        content: "\ee8f";
-                        top: 0;
-                        left: 0;
-                        width: 20px;
-                        bottom: 0;
-                        font-family: "boxicons";
-                        font-size: .75em;
-                        color: var(--menu-item-icon-color);
-                    }
-                }
-
-                /* Note path segment */
-                a {
-                    margin-inline: 2px;
-                    padding-inline: 2px;
-                    color: currentColor;
-                    font-weight: normal;
-                    text-decoration: none;
-
-                    /* The last segment of the note path */
-                    &.basename {
-                        color: var(--muted-text-color);
-                    }
-                }
-
-            }
         }
 
         .backlinks-widget > .dropdown-menu {
diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
index 8116eceb6e..d1a1977404 100644
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
@@ -120,14 +120,12 @@ function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalS
             show={modalShown}
             onHidden={() => setModalShown(false)}
         >
-            <ul className="note-paths-items">
-                {note && (
-                    <NotePathsWidget
-                        sortedNotePaths={sortedNotePaths}
-                        currentNotePath={notePath}
-                    />
-                )}
-            </ul>
+            {note && (
+                <NotePathsWidget
+                    sortedNotePaths={sortedNotePaths}
+                    currentNotePath={notePath}
+                />
+            )}
         </Modal>
     );
 }
diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.css b/apps/client/src/widgets/ribbon/NotePathsTab.css
new file mode 100644
index 0000000000..64c7374480
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.css
@@ -0,0 +1,63 @@
+body.experimental-feature-new-layout .note-paths-widget {
+    .note-path-intro {
+        color: var(--muted-text-color);
+    }
+
+    .note-path-list {
+        margin: 12px 0;
+        padding: 0;
+        list-style: none;
+
+        /* Note path card */
+        li {
+            --border-radius: 6px;
+
+            position: relative;
+            background: var(--card-background-color);
+            padding: 8px 20px 8px 25px;
+
+            &:first-child {
+                border-radius: var(--border-radius) var(--border-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--border-radius) var(--border-radius);
+            }
+
+            & + li {
+                margin-top: 2px;
+            }
+
+            /* Current path arrow */
+            &.path-current::before {
+                position: absolute;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                content: "\ee8f";
+                top: 0;
+                left: 0;
+                width: 20px;
+                bottom: 0;
+                font-family: "boxicons";
+                font-size: .75em;
+                color: var(--menu-item-icon-color);
+            }
+        }
+
+        /* Note path segment */
+        a {
+            margin-inline: 2px;
+            padding-inline: 2px;
+            color: currentColor;
+            font-weight: normal;
+            text-decoration: none;
+
+            /* The last segment of the note path */
+            &.basename {
+                color: var(--muted-text-color);
+            }
+        }
+
+    }
+}
diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
index 19b361a5de..0b81ebe036 100644
--- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
@@ -1,15 +1,16 @@
+import "./NotePathsTab.css";
+
+import clsx from "clsx";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
 import { useTriliumEvent } from "../react/hooks";
+import LinkButton from "../react/LinkButton";
 import NoteLink from "../react/NoteLink";
 import { joinElements } from "../react/react_utils";
 import { TabContext } from "./ribbon-interface";
-import LinkButton from "../react/LinkButton";
-import clsx from "clsx";
-
 
 export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
     const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
@@ -112,9 +113,9 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
         <li class={classes}>
             {joinElements(fullNotePaths.map((notePath, index, arr) => (
                 <NoteLink key={notePath}
-                          className={clsx({"basename": (index === arr.length - 1)})}
-                          notePath={notePath}
-                          noPreview />
+                    className={clsx({"basename": (index === arr.length - 1)})}
+                    notePath={notePath}
+                    noPreview />
             )), NOTE_PATH_TITLE_SEPARATOR)}
 
             {icons.map(({ icon, title }) => (