1 files changed, 6 insertions, 16 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index d381abf..2f728e7 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -23,12 +23,8 @@ import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import BrowserViewPlaceholder from './BrowserViewPlaceholder';
+import ServicePanel from './ServicePanel';
 import { useStore } from './StoreProvider';
-import InsecureConnectionBanner from './banner/InsecureConnectionBanner';
-import NewWindowBanner from './banner/NewWindowBanner';
-import ErrorPage from './errorPage/ErrorPage';
-import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
 
 function App({ devMode }: { devMode: boolean }): JSX.Element {
@@ -37,6 +33,7 @@ function App({ devMode }: { devMode: boolean }): JSX.Element {
   });
   const {
     settings: { selectedService },
+    shared: { services },
   } = useStore();
   const {
     settings: { name: serviceName },
@@ -95,20 +92,13 @@ function App({ devMode }: { devMode: boolean }): JSX.Element {
       <Box
         sx={{
           flex: 1,
-          display: 'flex',
-          overflow: 'hidden',
-          flexDirection: 'column',
-          alignItems: 'stretch',
           height: '100%',
-          zIndex: 100,
+          position: 'relative',
         }}
       >
-        <LocationBar />
-        <InsecureConnectionBanner service={selectedService} />
-        <NewWindowBanner service={selectedService} />
-        <BrowserViewPlaceholder>
-          <ErrorPage service={selectedService} />
-        </BrowserViewPlaceholder>
+        {services.map((service) => (
+          <ServicePanel key={service.id} service={service} />
+        ))}
       </Box>
     </Box>
   );