diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 664d781829a..936bd8fd8dc 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -30,6 +30,11 @@ Please see LICENSE files in the repository root for full details.
         width: 68px;
     }
 
+    &.newUi {
+        background-color: var(--cpd-color-bg-canvas-default);
+        border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+    }
+
     .mx_SpacePanel_toggleCollapse {
         position: absolute;
         width: 18px;
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index cf68f85b4cd..2f57e73f3b5 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -701,6 +701,8 @@ class LoggedInView extends React.Component<IProps, IState> {
             return <AudioFeedArrayForLegacyCall call={call} key={call.callId} />;
         });
 
+        const newRoomListEnabled = SettingsStore.getValue("feature_new_room_list");
+
         return (
             <MatrixClientContextProvider client={this._matrixClient}>
                 <div
@@ -714,9 +716,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                         <div className="mx_LeftPanel_outerWrapper">
                             <LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
                             <div className="mx_LeftPanel_wrapper">
-                                <BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
+                                {!newRoomListEnabled && (
+                                    <BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
+                                )}
                                 <SpacePanel />
-                                <BackdropPanel backgroundImage={this.state.backgroundImage} />
+                                {!newRoomListEnabled && <BackdropPanel backgroundImage={this.state.backgroundImage} />}
                                 <div
                                     className="mx_LeftPanel_wrapper--user"
                                     ref={this._resizeContainer}
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 321f6c9e36c..9f0d534767b 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -363,6 +363,8 @@ const SpacePanel: React.FC = () => {
         }
     });
 
+    const newRoomListEnabled = useSettingValue("feature_new_room_list");
+
     return (
         <RovingTabIndexProvider handleHomeEnd handleUpDown={!dragging}>
             {({ onKeyDownHandler, onDragEndHandler }) => (
@@ -378,7 +380,10 @@ const SpacePanel: React.FC = () => {
                     }}
                 >
                     <nav
-                        className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
+                        className={classNames("mx_SpacePanel", {
+                            collapsed: isPanelCollapsed,
+                            newUi: newRoomListEnabled,
+                        })}
                         onKeyDown={(ev) => {
                             const navAction = getKeyBindingsManager().getNavigationAction(ev);
                             if (