diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx
new file mode 100644
index 000000000..75907febb
--- /dev/null
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx
@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import React from "react";
+import "@testing-library/jest-dom";
+import GlobalImplementerToolsButton from "./global-implementer-tools.component";
+
+describe("Testing the global implementer tools button", () => {
+ afterEach(cleanup);
+ it("should render global Implementer tools", () => {
+ render();
+ const button = screen.getByTestId("globalImplementerToolsButton");
+ expect(button).toBeInTheDocument();
+ });
+});
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
new file mode 100644
index 000000000..780af3c7c
--- /dev/null
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import ChevronUp from "@carbon/icons-react/es/chevron--up/16";
+import ChevronDown from "@carbon/icons-react/es/chevron--down/16";
+import { UserHasAccess, useStore } from "@openmrs/esm-framework";
+import { implementerToolsStore, togglePopup } from "./store";
+import styles from "./implementer-tools.styles.scss";
+
+const GlobalImplementerToolsButton: React.FC = () => {
+ const { t } = useTranslation();
+ const { isOpen } = useStore(implementerToolsStore);
+
+ return (
+
+
+
+ );
+};
+
+export default GlobalImplementerToolsButton;
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 0886797dd..5b9a9ea69 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
@@ -17,3 +17,25 @@
.toolStyles {
background-color: transparent;
}
+
+// Chevron button - implementer-tools component
+
+.chevronImplementerToolsButton {
+ position: fixed;
+ bottom: 0;
+ left: calc(50vw - $spacing-05);
+ z-index: 9999;
+
+ div {
+ background-color: $ui-02;
+ width: $spacing-07;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.1s ease-in-out;
+ }
+
+ div:hover {
+ padding: $spacing-03 0;
+ }
+}
diff --git a/packages/apps/esm-implementer-tools-app/src/index.ts b/packages/apps/esm-implementer-tools-app/src/index.ts
index 0b81e3fe2..568f245b1 100644
--- a/packages/apps/esm-implementer-tools-app/src/index.ts
+++ b/packages/apps/esm-implementer-tools-app/src/index.ts
@@ -16,6 +16,13 @@ function setupOpenMRS() {
options
),
},
+ {
+ route: () => true,
+ load: getAsyncLifecycle(
+ () => import("./global-implementer-tools.component"),
+ options
+ ),
+ },
],
extensions: [
{