diff --git a/package.json b/package.json
index e42e8c7fb..f375ef569 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "start:pmtct": "openmrs develop --backend https://ohri-namibia-dev.globalhealthapp.net --sources 'packages/esm-ohri-pmtct-app/'",
     "start:form-render": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-form-render-app",
     "start:tb": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-tb-app",
+    "start:opd": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-opd-app",
     "prettier": "prettier --fix --config prettier.config.js --write \"packages/**/*.{ts,tsx}\"",
     "prepare": "husky install",
     "test": "jest --config jest.config.js --verbose false --passWithNoTests",
diff --git a/packages/esm-opd-app/package.json b/packages/esm-opd-app/package.json
new file mode 100644
index 000000000..8ce376159
--- /dev/null
+++ b/packages/esm-opd-app/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@ohri/openmrs-esm-ohri-opd-app",
+  "version": "2.2.0",
+  "description": "opd active visits",
+  "browser": "dist/openmrs-esm-ohri-opd-app.js",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "homepage": "https://github.com/UCSF-IGHS/openmrs-esm-ohri#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext tsx",
+    "typescript": "tsc",
+    "prepublishOnly": "npm run build",
+    "extract-translations": "i18next 'src/**/*.component.tsx'"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "ohri",
+    "opd"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/UCSF-IGHS/openmrs-esm-ohri.git"
+  },
+  "bugs": {
+    "url": "https://github.com/UCSF-IGHS/openmrs-esm-ohri/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.13.0",
+    "@ohri/esm-patient-chart-app": "7.1.0-2"
+  },
+  "peerDependencies": {
+    "@ohri/esm-patient-chart-app": "7.1.0-2",
+    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-patient-common-lib": "6.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "@ohri/esm-patient-chart-app": "7.1.0-2",
+    "webpack": "^5.88.2"
+  }
+}
diff --git a/packages/esm-opd-app/src/config-schema.ts b/packages/esm-opd-app/src/config-schema.ts
new file mode 100644
index 000000000..11f523bd0
--- /dev/null
+++ b/packages/esm-opd-app/src/config-schema.ts
@@ -0,0 +1 @@
+export const configSchema = {};
diff --git a/packages/esm-opd-app/src/dashboard.meta.tsx b/packages/esm-opd-app/src/dashboard.meta.tsx
new file mode 100644
index 000000000..29c682181
--- /dev/null
+++ b/packages/esm-opd-app/src/dashboard.meta.tsx
@@ -0,0 +1,12 @@
+export const opdFolderMeta = {
+  title: 'OPD',
+  slotName: 'opd-slot',
+  isExpanded: false,
+};
+
+export const activeVisitDashboardMeta = {
+  slot: 'patient-chart-active-visit-dashboard-slot',
+  columns: 1,
+  path: 'Active Visits',
+  title: 'Active Visits',
+};
diff --git a/packages/esm-opd-app/src/dashboard.scss b/packages/esm-opd-app/src/dashboard.scss
new file mode 100644
index 000000000..009007b57
--- /dev/null
+++ b/packages/esm-opd-app/src/dashboard.scss
@@ -0,0 +1,21 @@
+@import "./root.scss";
+
+.noMarker {
+  list-style-type: none;
+}
+
+.noMarker ul li a {
+  padding-left: 40px !important;
+  font: lighter;
+}
+
+.currentNavItem > a {
+  background-color: #cecece !important;
+  color: #161616 !important;
+  border-left-color: var(--brand-01) !important;
+  font: bolder;
+}
+
+.hide {
+  display: none;
+}
diff --git a/packages/esm-opd-app/src/declarations.d.tsx b/packages/esm-opd-app/src/declarations.d.tsx
new file mode 100644
index 000000000..875203d56
--- /dev/null
+++ b/packages/esm-opd-app/src/declarations.d.tsx
@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';
diff --git a/packages/esm-opd-app/src/index.ts b/packages/esm-opd-app/src/index.ts
new file mode 100644
index 000000000..4549d9e9b
--- /dev/null
+++ b/packages/esm-opd-app/src/index.ts
@@ -0,0 +1,30 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, registerFeatureFlag } from '@openmrs/esm-framework';
+import { opdFolderMeta } from './dashboard.meta';
+import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { configSchema } from './config-schema';
+import { activeVisitDashboardMeta } from '@ohri/esm-patient-chart-app/src/dashboard.meta';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+require('./root.scss');
+
+export const moduleName = '@ohri/openmrs-esm-ohri-opd-app';
+
+const options = {
+  featureName: 'ohri-opd',
+  moduleName,
+};
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const opdPatientChartDashboard = getSyncLifecycle(createDashboardGroup(opdFolderMeta), options);
+
+export const activeVisitDashboardLink = getSyncLifecycle(
+  createDashboardLink({
+    ...activeVisitDashboardMeta,
+    moduleName,
+  }),
+  { featureName: 'active-visit', moduleName },
+);
diff --git a/packages/esm-opd-app/src/root.scss b/packages/esm-opd-app/src/root.scss
new file mode 100644
index 000000000..c504fa3d9
--- /dev/null
+++ b/packages/esm-opd-app/src/root.scss
@@ -0,0 +1,116 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+$ui-01: #f4f4f4;
+$ui-02: #ffffff;
+$ui-03: #e0e0e0;
+$ui-05: #161616;
+$ui-background: #ffffff;
+$color-gray-70: #525252;
+$color-blue-60-2: #0f62fe;
+$color-yellow-50: #feecae;
+$inverse-support-03: #f1c21b;
+$warning-background: #fff8e1;
+$openmrs-background-grey: #f4f4f4;
+$danger: #da1e28;
+$interactive-01: #0f62fe;
+$brand-teal-01: #3197D9;
+$ohri-input-width: 22.313rem;
+$ohri-home-background: #ededed;
+$button-primary: #0078A6;
+
+.productiveHeading01 {
+  @include type.type-style("heading-compact-01");
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-compact-02");
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+}
+
+.productiveHeading04 {
+  @include type.type-style("heading-04");
+}
+
+.productiveHeading05 {
+  @include type.type-style("heading-05");
+}
+
+.productiveHeading06 {
+  @include type.type-style("heading-06");
+}
+
+.bodyShort01 {
+  @include type.type-style("body-compact-01");
+}
+
+.helperText01 {
+  @include type.type-style("helper-text-01");
+}
+
+.bodyShort02 {
+  @include type.type-style("body-compact-02");
+}
+
+.bodyLong01 {
+  @include type.type-style("body-01");
+}
+
+.bodyLong02 {
+  @include type.type-style("body-02");
+}
+
+.label01 {
+  @include type.type-style("label-01");
+}
+
+.text02 {
+  color: $text-02;
+}
+
+aside {
+   background-color: $ui-02 !important;
+}
+
+// Login Overrides
+
+div[class*='-esm-login__styles__center'] > img {
+  width: 140px; // design has 120px
+}
+
+:global(.tab-12rem) > button {
+  width: 12rem !important;
+}
+
+:global(.tab-14rem) > button {
+  width: 14rem !important;
+}
+
+:global(.tab-16rem) > button {
+  width: 16rem !important;
+}
+
+:global(.cds--overflow-menu) > div {
+  width: 15rem !important;
+}
+
+nav :global(.cds--accordion__title) {
+  color: #525252;
+  font-weight: 600 !important;
+}
+
+nav :global(.cds--accordion__content) {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
+
+nav :global(.cds--accordion__content) > a {
+  background-color: #cecece !important;
+  color: #161616 !important;
+  border-left-color: var(--brand-01)  !important;
+  font: bolder;
+}
diff --git a/packages/esm-opd-app/src/routes.json b/packages/esm-opd-app/src/routes.json
new file mode 100644
index 000000000..a2c331b41
--- /dev/null
+++ b/packages/esm-opd-app/src/routes.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [
+  ],
+  "extensions": [
+    {
+      "name": "opd",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "opdPatientChartDashboard",
+      "order": 25,
+      "meta": {
+        "path": "OPD",
+        "slot": "opd-slot",
+        "isExpanded": false
+      }
+    },
+    {
+      "name": "active-visit-summary-dashboard",
+      "component": "activeVisitDashboardLink",
+      "slot": "opd-slot",
+      "meta": {
+        "slot": "patient-chart-active-visit-dashboard-slot",
+        "columns": 1,
+        "path": "Active Visits"
+      }
+    },
+    {
+      "name": "opd-summary-ext",
+      "slot": "opd-summary-slot",
+      "component": "opdSummaryDashboard"
+    }
+    
+
+  ]
+}
diff --git a/packages/esm-opd-app/src/setupTests.ts b/packages/esm-opd-app/src/setupTests.ts
new file mode 100644
index 000000000..3abed9870
--- /dev/null
+++ b/packages/esm-opd-app/src/setupTests.ts
@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+
+declare global {
+  interface Window {
+    openmrsBase: string;
+    spaBase: string;
+  }
+}
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (element) => getComputedStyle(element);
+window.openmrsBase = '/openmrs';
+window.spaBase = '/spa';
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
diff --git a/packages/esm-opd-app/translations/en.json b/packages/esm-opd-app/translations/en.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/packages/esm-opd-app/translations/en.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/esm-opd-app/tsconfig.json b/packages/esm-opd-app/tsconfig.json
new file mode 100644
index 000000000..db240ff83
--- /dev/null
+++ b/packages/esm-opd-app/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext",
+    "paths": {
+      "@openmrs/*": [
+        "./node_modules/@openmrs/*"
+      ]
+    }
+  }
+}
diff --git a/packages/esm-opd-app/webpack.config.js b/packages/esm-opd-app/webpack.config.js
new file mode 100644
index 000000000..b15408968
--- /dev/null
+++ b/packages/esm-opd-app/webpack.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const config = (module.exports = require('openmrs/default-webpack-config'));
+config.scriptRuleConfig.exclude =
+  path.sep == '/'
+    ? /(node_modules[^\/@openmrs\/esm\-patient\-common\-lib])/
+    : /(node_modules[^\\@openmrs\/esm\-patient\-common\-lib])/;
+
+// Temporary fix to resolve webpack issues with imports from the commons library
+config.overrides.resolve = {
+  extensions: ['.tsx', '.ts', '.jsx', '.js', '.scss'],
+  alias: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/src/internal',
+    '@ohri/openmrs-esm-ohri-commons-lib': path.resolve(__dirname, '../esm-commons-lib/src/index'),
+    '@openmrs/openmrs-form-engine-lib': '@openmrs/openmrs-form-engine-lib/src/index',
+  },
+};
+module.exports = config;
diff --git a/yarn.lock b/yarn.lock
index a539ba384..abe0ec12f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2721,6 +2721,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ohri/esm-patient-chart-app@npm:7.1.0-2":
+  version: 7.1.0-2
+  resolution: "@ohri/esm-patient-chart-app@npm:7.1.0-2"
+  dependencies:
+    lodash-es: "npm:^4.17.21"
+    uuid: "npm:^8.3.2"
+  peerDependencies:
+    "@carbon/react": 1.x
+    "@openmrs/esm-framework": 5.x
+    "@openmrs/esm-patient-common-lib": "*"
+    dayjs: 1.x
+    lodash-es: 4.x
+    react: 18.x
+    react-i18next: 11.x
+    react-router-dom: 6.x
+    rxjs: 6.x
+    single-spa: 6.x
+    single-spa-react: 6.x
+    swr: 2.x
+  checksum: 4652f57696856673c720277a93ef65c14afc890a8335729dfa6d4babe3b132db04770f1964a0a88b7331854be65d6266e6c6c8f513a19867903b92dd9c599e60
+  languageName: node
+  linkType: hard
+
 "@ohri/openmrs-esm-ohri-cervical-cancer-app@workspace:packages/esm-cervical-cancer-app":
   version: 0.0.0-use.local
   resolution: "@ohri/openmrs-esm-ohri-cervical-cancer-app@workspace:packages/esm-cervical-cancer-app"
@@ -2828,6 +2851,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@ohri/openmrs-esm-ohri-opd-app@workspace:packages/esm-opd-app":
+  version: 0.0.0-use.local
+  resolution: "@ohri/openmrs-esm-ohri-opd-app@workspace:packages/esm-opd-app"
+  dependencies:
+    "@carbon/react": "npm:^1.13.0"
+    "@ohri/esm-patient-chart-app": "npm:7.1.0-2"
+    webpack: "npm:^5.88.2"
+  peerDependencies:
+    "@ohri/esm-patient-chart-app": 7.1.0-2
+    "@openmrs/esm-framework": 5.x
+    "@openmrs/esm-patient-common-lib": 6.x
+    dayjs: 1.x
+    react: 18.x
+    react-i18next: 11.x
+    swr: 2.x
+  languageName: unknown
+  linkType: soft
+
 "@ohri/openmrs-esm-ohri-pmtct@workspace:packages/esm-ohri-pmtct-app":
   version: 0.0.0-use.local
   resolution: "@ohri/openmrs-esm-ohri-pmtct@workspace:packages/esm-ohri-pmtct-app"