diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss b/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
index 41c3c4dcb..a30616243 100644
--- a/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
+++ b/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
@@ -1,4 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
   position: fixed;
@@ -19,20 +20,20 @@
 
 .tabList {
   position: fixed;
-  height: 4rem;
+  height: layout.$spacing-10;
   width: 100%;
   z-index: 1000;
   background-color: black;
 }
 
 .tabPanels {
-  padding: 1.5rem;
+  padding: layout.$spacing-06;
 }
 
 .farRight {
   position: absolute;
-  right: 24px;
-  top: 16px;
+  right: layout.$spacing-04;
+  top: layout.$spacing-04;
   display: flex;
   z-index: 1000;
 }
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx b/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
index 12a6923f3..5af587620 100644
--- a/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
+++ b/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
@@ -5,7 +5,7 @@ import { type AppProps } from 'single-spa';
 import { getCoreTranslation } from '@openmrs/esm-framework';
 import { importMapOverridden } from './import-map.component';
 import DevToolsPopup from './devtools-popup.component';
-import styles from './devtools.styles.css';
+import styles from './devtools.styles.scss';
 
 const showDevTools = () => window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools'));
 
@@ -23,13 +23,18 @@ function DevTools(props: AppProps) {
   return (
     <>
       <IconButton
+        align="left"
         className={classNames(styles.devtoolsTriggerButton, {
           [styles.overridden]: isOverridden,
         })}
+        direction="left"
         kind="ghost"
         label={getCoreTranslation('toggleDevTools')}
         onClick={toggleDevTools}
         size="md"
+        tooltipAlignment="left"
+        tooltipPosition="top"
+        wrapperClasses={styles.popover}
       >
         {'{\u00B7\u00B7\u00B7}'}
       </IconButton>
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
deleted file mode 100644
index b707d102d..000000000
--- a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.devtoolsTriggerButton {
-  z-index: 7900;
-  background: #c6c6c6;
-  bottom: 5rem;
-  right: 0.25rem;
-  position: fixed;
-  border-radius: 0.25rem;
-}
-
-.overridden {
-  background-color: #da1e28;
-  color: white;
-}
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss
new file mode 100644
index 000000000..53572dc4f
--- /dev/null
+++ b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss
@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.devtoolsTriggerButton {
+  z-index: 7900;
+  background: colors.$white;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  border-radius: layout.$spacing-02;
+  color: colors.$gray-100;
+
+  &:hover {
+    color: colors.$blue-60 !important;
+  }
+}
+
+.overridden {
+  background-color: colors.$red-30;
+  color: colors.$white;
+}
+
+.popover {
+  z-index: 7900;
+  bottom: layout.$spacing-11;
+  right: layout.$spacing-02;
+  position: fixed;
+}
diff --git a/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss b/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
index a90c37297..f150d496b 100644
--- a/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
+++ b/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
@@ -29,5 +29,5 @@
   z-index: 7900;
   bottom: layout.$spacing-07;
   position: fixed;
-  right: 3.25rem;
+  right: 3rem;
 }