diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx
new file mode 100644
index 000000000..772c35f6f
--- /dev/null
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import {
+  Tablet,
+  Laptop,
+  Download,
+  Document,
+  Development,
+  Touch_1,
+} from "@carbon/react/icons";
+import {
+  Layer,
+  Header,
+  HeaderContainer,
+  Tile,
+  Theme,
+  HeaderGlobalBar,
+  HeaderGlobalAction,
+  SideNav,
+  HeaderMenuItem,
+  HeaderNavigation,
+  HeaderPanel,
+} from "@carbon/react";
+import { BrowserRouter } from "react-router-dom";
+import { ConfigurableLink, useConfig, useStore } from "@openmrs/esm-framework";
+import { implementerToolsStore } from "./store";
+import styles from "./implementer-tools.styles.scss";
+import { useTranslation } from "react-i18next";
+
+const ImplementerNavbar: React.FC = () => {
+  const { isOpen } = useStore(implementerToolsStore);
+  const { t } = useTranslation();
+  const [showPages, setShowPages] = useState(false);
+  const { logo } = useConfig();
+
+  return isOpen ? (
+    <BrowserRouter>
+      <div>
+        <HeaderContainer
+          render={({ isSideNavExpanded, onClickSideNavExpand }) => (
+            <>
+              <Theme theme="g90">
+                <Header
+                  className={styles.implementerToolsHeader}
+                  aria-label="OpenMRS Implementer Tools"
+                >
+                  <ConfigurableLink
+                    className={styles.navLogo}
+                    to="${openmrsSpaBase}/home"
+                  >
+                    <div className={styles.spacedLogo}>
+                      {logo?.src ? (
+                        <img
+                          className={styles.logo}
+                          src={logo.src}
+                          alt={logo.alt}
+                          width={110}
+                          height={40}
+                        />
+                      ) : logo?.name ? (
+                        logo.name
+                      ) : (
+                        <svg role="img" width={110} height={40}>
+                          <use xlinkHref="#omrs-logo-white"></use>
+                        </svg>
+                      )}
+                    </div>
+                  </ConfigurableLink>
+                  <HeaderNavigation>
+                    <HeaderMenuItem>UI editor</HeaderMenuItem>
+                    <HeaderMenuItem>Module Manager</HeaderMenuItem>
+                  </HeaderNavigation>
+                  <HeaderGlobalBar>
+                    <HeaderGlobalAction
+                      className={styles.implementerToolsGlobalBar}
+                    >
+                      <Tablet size={20} />
+                    </HeaderGlobalAction>
+                    <HeaderGlobalAction
+                      className={styles.implementerToolsGlobalBar}
+                    >
+                      <Laptop size={20} />
+                    </HeaderGlobalAction>
+                    <HeaderGlobalAction
+                      className={styles.implementerToolsGlobalBar}
+                      aria-label="Downloads"
+                      onClick={() => {}}
+                    >
+                      <Download size={20} />
+                    </HeaderGlobalAction>
+                  </HeaderGlobalBar>
+                  <div className={styles.sideRailNav}>
+                    <div>
+                      <Document
+                        onClick={() => {
+                          setShowPages(!showPages);
+                        }}
+                        size={20}
+                      />
+                    </div>
+                    <div>
+                      <Development
+                        onClick={() => {
+                          setShowPages(!showPages);
+                        }}
+                        size={20}
+                      />
+                    </div>
+                  </div>
+                  <SideNav
+                    className={styles.sideNavComponents}
+                    isFixedNav
+                    expanded={showPages && isOpen}
+                  >
+                    <p>
+                      Select an element from the canvas to activate this panel
+                    </p>
+                  </SideNav>
+                  <HeaderPanel style={{ backgroundColor: "#393939" }} expanded>
+                    <Layer className={styles.selectElement}>
+                      <Tile className={styles.selectionText}>
+                        <Touch_1 size={30} />
+                        <h5>Nothing selected</h5>
+                        <p>
+                          Select an element from the canvas to activate this
+                          panel
+                        </p>
+                      </Tile>
+                    </Layer>
+                  </HeaderPanel>
+                </Header>
+              </Theme>
+            </>
+          )}
+        />
+      </div>
+    </BrowserRouter>
+  ) : null;
+};
+export default ImplementerNavbar;
diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
index 554fe9a6f..4e5a7f265 100644
--- a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
@@ -16,7 +16,7 @@ const GlobalImplementerToolsButton: React.FC = () => {
         data-testid="globalImplementerToolsButton"
       >
         <div onClick={togglePopup} role="button" tabIndex={0}>
-          {isOpen ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
+          {isOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
         </div>
       </div>
     </UserHasAccess>
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
index 2d6468915..08b5e00d9 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
@@ -23,7 +23,12 @@ function PopupHandler() {
   const frontendModules = useFrontendModules();
   const backendDependencies = useBackendDependencies();
   const [shouldShowNotification, setShouldShowNotification] = useState(false);
+  const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
+    implementerToolsStore
+  );
+
   const { t } = useTranslation();
+
   useEffect(() => {
     // displaying toast if modules are missing
     setShouldShowNotification(
@@ -47,9 +52,17 @@ function PopupHandler() {
     }
   }, [t, shouldShowNotification]);
 
-  const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
-    implementerToolsStore
-  );
+  useEffect(() => {
+    if (!isOpen) {
+      const homeDivElement = document.querySelector(
+        `div[id^="single-spa-application:@openmrs/esm-home-app-page"]`
+      ) as HTMLDivElement;
+      if (homeDivElement) {
+        homeDivElement.style.display = "unset";
+      }
+    }
+  }, [isOpen]);
+
   return (
     <>
       {isOpen ? (
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
index fa62baaa2..b274d5c8c 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
+++ b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
@@ -21,7 +21,7 @@
 // Chevron button - implementer-tools component
 .chevronImplementerToolsButton {
   position: fixed;
-  bottom: 0;
+  top: 0;
   left: calc(50vw - spacing.$spacing-05);
   z-index: 9999;
 
@@ -33,8 +33,103 @@
     cursor: pointer;
     transition: all 0.1s ease-in-out;
   }
+}
+
+.spacedLogo {
+  margin-left: 1rem;
+  padding-right: 1rem;
+}
+
+.implementerToolsHeader,
+.implementerToolsGlobalBar {
+  border-bottom: 1px solid $color-gray-90;
+}
+
+.implementerToolsHeader,
+.implementerToolsHeader button,
+.implementerToolsHeader a,
+.implementerToolsHeader nav {
+  background-color: $color-gray-80;
+  color: $ui-03;
+}
+
+.implementerToolsHeader button:hover,
+.implementerToolsHeader button:active,
+.implementerToolsHeader button:focus,
+.implementerToolsHeader a:hover,
+.implementerToolsHeader a:active,
+.implementerToolsHeader a:focus {
+  background-color: $color-gray-70;
+  border-color: transparent !important;
+  color: $ui-02;
+}
+
+.implementerToolsHeader nav::before {
+  background-color: #525252;
+}
+
+.selectElement {
+  position: relative;
+  top: 6.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+}
+
+.selectElement div {
+  height: 12rem;
+}
+
+.selectionText {
+  h5,
+  svg,
+  p {
+    margin-top: 1rem;
+  }
+
+  h5,
+  svg {
+    color: white;
+  }
+
+  p {
+    font-size: small;
+  }
+}
+
+.sideNavComponents {
+  left: 3rem;
+}
 
-  div:hover {
-    padding: spacing.$spacing-03 0;
+.sideRailNav {
+  height: 100%;
+  width: 3rem;
+  position: fixed;
+  z-index: 1;
+  top: 3rem;
+  left: 0;
+  background-color: $color-gray-80;
+  transition: 0.5s ease;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid $color-gray-90;
+
+  div {
+    text-align: center;
+    background-color: $color-gray-80;
+    color: $ui-03;
+    height: 3rem;
+    width: 3rem;
+    display: grid;
+    place-items: center;
+  }
+  div:hover,
+  div:active,
+  div:focus {
+    background-color: $color-gray-70;
+    border-color: transparent !important;
+    color: $ui-02;
   }
 }
diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx b/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
index 1c54c9bf1..58ec2b11e 100644
--- a/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
@@ -1,6 +1,4 @@
 import React, { useMemo, useState } from "react";
-import { Button, ContentSwitcher, Switch } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import { Configuration } from "../configuration/configuration.component";
 import type { FrontendModule } from "../types";
@@ -8,6 +6,9 @@ import { FrontendModules } from "../frontend-modules/frontend-modules.component"
 import { BackendDependencies } from "../backend-dependencies/backend-dependencies.component";
 import type { ResolvedDependenciesModule } from "../backend-dependencies/openmrs-backend-dependencies";
 import styles from "./popup.styles.scss";
+import ImplementerNavbar from "../global-implementer-tools-navbar";
+import { useStore, useLayoutType } from "@openmrs/esm-framework";
+import { implementerToolsStore } from "../store";
 
 interface DevToolsPopupProps {
   close(): void;
@@ -23,6 +24,8 @@ export default function Popup({
 }: DevToolsPopupProps) {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(0);
+  const isTablet = useLayoutType() === "tablet";
+
   const tabContent = useMemo(() => {
     if (activeTab == 0) {
       return <Configuration />;
@@ -33,41 +36,74 @@ export default function Popup({
     }
   }, [activeTab, backendDependencies, frontendModules]);
 
-  return (
-    <div className={styles.popup}>
-      <div className={styles.topBar}>
-        <div className={styles.tabs}>
-          <ContentSwitcher
-            onChange={(c) => {
-              setActiveTab((c as any).index);
+  const currentPageURL = window.location.href;
+  const { isOpen } = useStore(implementerToolsStore);
+
+  const iframeContent = useMemo(() => {
+    const homeDivElement = document.querySelector(
+      `div[id^="single-spa-application:@openmrs/esm-home-app-page"]`
+    ) as HTMLDivElement;
+    const applyStyles = () => {
+      if (homeDivElement) {
+        if (isOpen) {
+          homeDivElement.style.display = "none";
+        } else {
+        }
+      }
+    };
+
+    const removeImplementerToolsDiv = (iframeBody: HTMLElement | undefined) => {
+      const divElements = iframeBody?.querySelectorAll(
+        `div[id^="single-spa-application:@openmrs/esm-implementer-tools-app-page"]`
+      ) as Array<HTMLDivElement> | undefined;
+      divElements?.forEach((div) => {
+        div.remove();
+      });
+    };
+    return (
+      <div style={{ backgroundColor: "#525252" }}>
+        <div
+          className={
+            isTablet ? styles.iframeTabletLayout : styles.iframeDesktopLayout
+          }
+        >
+          <iframe
+            className={styles.implementerToolsIframe}
+            title="implementer-tools-iframe"
+            src={currentPageURL}
+            width="100%"
+            loading="lazy"
+            onLoad={(event) => {
+              const iframe = event.target as HTMLIFrameElement;
+              const contentWindow = iframe.contentWindow;
+
+              const iframeMutationObserver = new MutationObserver(() => {
+                // Do something before DOM updates or elements are added within the iframe
+                // For example:
+                removeImplementerToolsDiv(contentWindow?.document?.body);
+              });
+
+              iframeMutationObserver.observe(contentWindow!.document, {
+                childList: true,
+                subtree: true,
+              });
+
+              if (document.readyState === "loading") {
+                document.addEventListener("DOMContentLoaded", applyStyles);
+              } else {
+                applyStyles();
+              }
             }}
-          >
-            <Switch
-              name="configuration-tab"
-              text={t("configuration", "Configuration")}
-            />
-            <Switch
-              name="frontend-modules-tab"
-              text={t("frontendModules", "Frontend Modules")}
-            />
-            <Switch
-              name="backend-modules-tab"
-              text={t("backendModules", "Backend Modules")}
-            />
-          </ContentSwitcher>
-        </div>
-        <div>
-          <Button
-            kind="secondary"
-            renderIcon={(props) => <Close size={16} {...props} />}
-            iconDescription="Close"
-            onClick={close}
-            hasIconOnly
-            size="sm"
           />
         </div>
       </div>
-      <div className={styles.content}>{tabContent}</div>
-    </div>
+    );
+  }, [currentPageURL, isOpen, isTablet]);
+
+  return (
+    <>
+      <ImplementerNavbar />
+      {iframeContent}
+    </>
   );
 }
diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss b/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
index a9c8d9539..47acb33d2 100644
--- a/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
+++ b/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
@@ -33,3 +33,17 @@
   background: #e0e0e0;
   padding: 0.25rem;
 }
+
+.implementerToolsIframe {
+  position: relative;
+  left: 3rem;
+  height: 100vh;
+}
+
+.iframeTabletLayout {
+  margin: 0 2rem;
+  width: 50%;
+}
+
+.iframeDesktopLayout {
+}
\ No newline at end of file
diff --git a/packages/framework/esm-styleguide/src/_vars.scss b/packages/framework/esm-styleguide/src/_vars.scss
index 2740cb6f7..8b367ac60 100644
--- a/packages/framework/esm-styleguide/src/_vars.scss
+++ b/packages/framework/esm-styleguide/src/_vars.scss
@@ -8,6 +8,8 @@ $text-03: #a8a8a8;
 $ui-background: #ffffff;
 $color-gray-30: #c6c6c6;
 $color-gray-70: #525252;
+$color-gray-80: #393939;
+$color-gray-90: #262626;
 $color-gray-100: #161616;
 $color-blue-60-2: #0f62fe;
 $color-blue-10: #edf5ff;