diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js
index 4490edc611..1aa8a42f68 100644
--- a/services/web/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -999,6 +999,7 @@ module.exports = {
     sourceEditorToolbarEndButtons: [],
     rootContextProviders: [],
     mainEditorLayoutModals: [],
+    mainEditorLayoutPanels: [],
     langFeedbackLinkingWidgets: [],
     labsExperiments: [],
     integrationLinkingWidgets: [],
diff --git a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
index 4e2436c283..fa271c8a02 100644
--- a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
@@ -15,6 +15,11 @@ import HistoryContainer from '@/features/ide-react/components/history-container'
 import { DefaultSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 
+const mainEditorLayoutPanels: Array<{
+  import: { default: ElementType }
+  path: string
+}> = importOverleafModules('mainEditorLayoutPanels')
+
 const mainEditorLayoutModalsModules: Array<{
   import: { default: ElementType }
   path: string
@@ -121,6 +126,11 @@ export default function MainLayout() {
               </Panel>
             </PanelGroup>
           </Panel>
+          {mainEditorLayoutPanels.map(
+            ({ import: { default: Component }, path }, i) => {
+              return <Component key={path} order={i + 3} />
+            }
+          )}
         </PanelGroup>
       </div>
       {mainEditorLayoutModalsModules.map(