diff --git a/src/Main.tsx b/src/Main.tsx
index ddb6a22fe..120558a4b 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -115,6 +115,8 @@ const App = (): JSX.Element => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [explorer]);
+  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
+  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
 
   if (!explorer) {
     return <LoadingExplorer />;
@@ -129,6 +131,12 @@ const App = (): JSX.Element => {
           ) : (
             <DivExplorer explorer={explorer} />
           )}
+          <SidePanel />
+          <Dialog />
+          {<QuickstartCarousel isOpen={isCarouselOpen} />}
+          {<SQLQuickstartTutorial />}
+          {<MongoQuickstartTutorial />}
+          {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
         </div>
       </KeyboardShortcutRoot>
     </div>
@@ -136,8 +144,6 @@ const App = (): JSX.Element => {
 };
 
 const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
-  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
-  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
   useInteractive(MetricScenario.ApplicationLoad);
 
   return (
@@ -180,12 +186,6 @@ const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
           <NotificationConsole />
         </div>
       </div>
-      <SidePanel />
-      <Dialog />
-      {<QuickstartCarousel isOpen={isCarouselOpen} />}
-      {<SQLQuickstartTutorial />}
-      {<MongoQuickstartTutorial />}
-      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
     </div>
   );
 };