diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification.module.ts b/apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification.module.ts
index 98ca2db155..b596d920f2 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification.module.ts
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/add-to-cart-notification.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffModalModule } from '@daffodil/design';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { DemoAddToCartNotificationStateModule } from './add-to-cart-notification-state.module';
 import { AddToCartNotificationComponentModule } from './components/add-to-cart-notification/add-to-cart-notification.module';
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.spec.ts b/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.spec.ts
index a89fa05d8d..baa9acd373 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.spec.ts
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.spec.ts
@@ -8,13 +8,11 @@ import {
 import { Observable } from 'rxjs';
 
 import { DaffAddToCart } from '@daffodil/cart/state';
-import { DaffModalModule } from '@daffodil/design';
-
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { AddToCartNotificationEffects } from './add-to-cart-notification.effects';
 import { OpenAddToCartNotification } from '../actions/add-to-cart-notification.actions';
 
-
 describe('AddToCartNotificationEffects', () => {
   let actions$: Observable<any>;
   let effects: AddToCartNotificationEffects;
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts b/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts
index 37886a78ed..e8c7bf9ed7 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts
@@ -14,7 +14,7 @@ import { DaffCartActionTypes } from '@daffodil/cart/state';
 import {
   DaffModalService,
   DaffModal,
-} from '@daffodil/design';
+} from '@daffodil/design/modal';
 
 import {
   OpenAddToCartNotification,
diff --git a/apps/design-land/src/app/modal/modal.component.spec.ts b/apps/design-land/src/app/modal/modal.component.spec.ts
index 42fd1f9d76..5eae39ef12 100644
--- a/apps/design-land/src/app/modal/modal.component.spec.ts
+++ b/apps/design-land/src/app/modal/modal.component.spec.ts
@@ -4,7 +4,7 @@ import {
   TestBed,
 } from '@angular/core/testing';
 
-import { DaffModalModule } from '@daffodil/design';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { DesignLandModalComponent } from './modal.component';
 
diff --git a/libs/design/src/molecules/modal/README.md b/libs/design/modal/README.md
similarity index 100%
rename from libs/design/src/molecules/modal/README.md
rename to libs/design/modal/README.md
diff --git a/libs/design/modal/examples/src/basic-modal/basic-modal.component.ts b/libs/design/modal/examples/src/basic-modal/basic-modal.component.ts
index f2471006ec..3f313b1cd3 100644
--- a/libs/design/modal/examples/src/basic-modal/basic-modal.component.ts
+++ b/libs/design/modal/examples/src/basic-modal/basic-modal.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffModalService } from '@daffodil/design';
+import { DaffModalService } from '@daffodil/design/modal';
 
 import { BasicModalContentComponent } from './modal-content.component';
 
diff --git a/libs/design/modal/examples/src/basic-modal/basic-modal.module.ts b/libs/design/modal/examples/src/basic-modal/basic-modal.module.ts
index a077b32aa9..7079d6ee27 100644
--- a/libs/design/modal/examples/src/basic-modal/basic-modal.module.ts
+++ b/libs/design/modal/examples/src/basic-modal/basic-modal.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffModalModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffModalModule } from '@daffodil/design/modal';
 
 import { BasicModalComponent } from './basic-modal.component';
 import { BasicModalContentComponent } from './modal-content.component';
diff --git a/libs/design/modal/ng-package.json b/libs/design/modal/ng-package.json
new file mode 100644
index 0000000000..6ec96733b4
--- /dev/null
+++ b/libs/design/modal/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/modal",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 
\ No newline at end of file
diff --git a/libs/design/src/molecules/modal/animations/modal-animation-state.spec.ts b/libs/design/modal/src/animations/modal-animation-state.spec.ts
similarity index 100%
rename from libs/design/src/molecules/modal/animations/modal-animation-state.spec.ts
rename to libs/design/modal/src/animations/modal-animation-state.spec.ts
diff --git a/libs/design/src/molecules/modal/animations/modal-animation-state.ts b/libs/design/modal/src/animations/modal-animation-state.ts
similarity index 100%
rename from libs/design/src/molecules/modal/animations/modal-animation-state.ts
rename to libs/design/modal/src/animations/modal-animation-state.ts
diff --git a/libs/design/src/molecules/modal/animations/modal-animation.ts b/libs/design/modal/src/animations/modal-animation.ts
similarity index 100%
rename from libs/design/src/molecules/modal/animations/modal-animation.ts
rename to libs/design/modal/src/animations/modal-animation.ts
diff --git a/libs/design/modal/src/index.ts b/libs/design/modal/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/modal/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/src/molecules/modal/modal-actions/modal-actions.component.scss b/libs/design/modal/src/modal-actions/modal-actions.component.scss
similarity index 100%
rename from libs/design/src/molecules/modal/modal-actions/modal-actions.component.scss
rename to libs/design/modal/src/modal-actions/modal-actions.component.scss
diff --git a/libs/design/src/molecules/modal/modal-actions/modal-actions.component.spec.ts b/libs/design/modal/src/modal-actions/modal-actions.component.spec.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-actions/modal-actions.component.spec.ts
rename to libs/design/modal/src/modal-actions/modal-actions.component.spec.ts
diff --git a/libs/design/src/molecules/modal/modal-actions/modal-actions.component.ts b/libs/design/modal/src/modal-actions/modal-actions.component.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-actions/modal-actions.component.ts
rename to libs/design/modal/src/modal-actions/modal-actions.component.ts
diff --git a/libs/design/src/molecules/modal/modal-content/modal-content.component.scss b/libs/design/modal/src/modal-content/modal-content.component.scss
similarity index 100%
rename from libs/design/src/molecules/modal/modal-content/modal-content.component.scss
rename to libs/design/modal/src/modal-content/modal-content.component.scss
diff --git a/libs/design/src/molecules/modal/modal-content/modal-content.component.spec.ts b/libs/design/modal/src/modal-content/modal-content.component.spec.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-content/modal-content.component.spec.ts
rename to libs/design/modal/src/modal-content/modal-content.component.spec.ts
diff --git a/libs/design/src/molecules/modal/modal-content/modal-content.component.ts b/libs/design/modal/src/modal-content/modal-content.component.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-content/modal-content.component.ts
rename to libs/design/modal/src/modal-content/modal-content.component.ts
diff --git a/libs/design/src/molecules/modal/modal-header/modal-header.component.scss b/libs/design/modal/src/modal-header/modal-header.component.scss
similarity index 81%
rename from libs/design/src/molecules/modal/modal-header/modal-header.component.scss
rename to libs/design/modal/src/modal-header/modal-header.component.scss
index 0704ff7a02..e56997d9ff 100644
--- a/libs/design/src/molecules/modal/modal-header/modal-header.component.scss
+++ b/libs/design/modal/src/modal-header/modal-header.component.scss
@@ -1,5 +1,5 @@
-@use '../../../../scss/typography' as t;
-@use '../../../../scss/layout';
+@use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 
 :host {
 	display: block;
diff --git a/libs/design/src/molecules/modal/modal-header/modal-header.component.spec.ts b/libs/design/modal/src/modal-header/modal-header.component.spec.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-header/modal-header.component.spec.ts
rename to libs/design/modal/src/modal-header/modal-header.component.spec.ts
diff --git a/libs/design/src/molecules/modal/modal-header/modal-header.component.ts b/libs/design/modal/src/modal-header/modal-header.component.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-header/modal-header.component.ts
rename to libs/design/modal/src/modal-header/modal-header.component.ts
diff --git a/libs/design/src/molecules/modal/modal-theme.scss b/libs/design/modal/src/modal-theme.scss
similarity index 82%
rename from libs/design/src/molecules/modal/modal-theme.scss
rename to libs/design/modal/src/modal-theme.scss
index 2028f04add..faac0d3896 100644
--- a/libs/design/src/molecules/modal/modal-theme.scss
+++ b/libs/design/modal/src/modal-theme.scss
@@ -1,4 +1,4 @@
-@use '../../../scss/core';
+@use '../../scss/core';
 
 @mixin daff-modal-theme($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');
diff --git a/libs/design/src/molecules/modal/modal-title/modal-title.directive.spec.ts b/libs/design/modal/src/modal-title/modal-title.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-title/modal-title.directive.spec.ts
rename to libs/design/modal/src/modal-title/modal-title.directive.spec.ts
diff --git a/libs/design/src/molecules/modal/modal-title/modal-title.directive.ts b/libs/design/modal/src/modal-title/modal-title.directive.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal-title/modal-title.directive.ts
rename to libs/design/modal/src/modal-title/modal-title.directive.ts
diff --git a/libs/design/src/molecules/modal/modal.module.ts b/libs/design/modal/src/modal.module.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal.module.ts
rename to libs/design/modal/src/modal.module.ts
diff --git a/libs/design/src/molecules/modal/modal/modal-config.ts b/libs/design/modal/src/modal/modal-config.ts
similarity index 100%
rename from libs/design/src/molecules/modal/modal/modal-config.ts
rename to libs/design/modal/src/modal/modal-config.ts
diff --git a/libs/design/src/molecules/modal/modal/modal.component.html b/libs/design/modal/src/modal/modal.component.html
similarity index 100%
rename from libs/design/src/molecules/modal/modal/modal.component.html
rename to libs/design/modal/src/modal/modal.component.html
diff --git a/libs/design/src/molecules/modal/modal/modal.component.scss b/libs/design/modal/src/modal/modal.component.scss
similarity index 85%
rename from libs/design/src/molecules/modal/modal/modal.component.scss
rename to libs/design/modal/src/modal/modal.component.scss
index 5155873c76..64acde7fa4 100644
--- a/libs/design/src/molecules/modal/modal/modal.component.scss
+++ b/libs/design/modal/src/modal/modal.component.scss
@@ -1,4 +1,4 @@
-@use '../../../../scss/layout';
+@use '../../../scss/layout';
 
 :host {
 	display: block;
diff --git a/libs/design/src/molecules/modal/modal/modal.component.spec.ts b/libs/design/modal/src/modal/modal.component.spec.ts
similarity index 97%
rename from libs/design/src/molecules/modal/modal/modal.component.spec.ts
rename to libs/design/modal/src/modal/modal.component.spec.ts
index 0bbbf1e22f..fe564e880c 100644
--- a/libs/design/src/molecules/modal/modal/modal.component.spec.ts
+++ b/libs/design/modal/src/modal/modal.component.spec.ts
@@ -1,8 +1,5 @@
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
 } from '@angular/core';
 import {
diff --git a/libs/design/src/molecules/modal/modal/modal.component.ts b/libs/design/modal/src/modal/modal.component.ts
similarity index 97%
rename from libs/design/src/molecules/modal/modal/modal.component.ts
rename to libs/design/modal/src/modal/modal.component.ts
index 636fc1e562..a1e25a7370 100644
--- a/libs/design/src/molecules/modal/modal/modal.component.ts
+++ b/libs/design/modal/src/modal/modal.component.ts
@@ -20,7 +20,8 @@ import {
   AfterViewInit,
 } from '@angular/core';
 
-import { daffFocusableElementsSelector } from '../../../core/focus/public_api';
+import { daffFocusableElementsSelector } from '@daffodil/design';
+
 import { daffFadeAnimations } from '../animations/modal-animation';
 import { getAnimationState } from '../animations/modal-animation-state';
 
diff --git a/libs/design/src/molecules/modal/modal.ts b/libs/design/modal/src/modal/modal.ts
similarity index 83%
rename from libs/design/src/molecules/modal/modal.ts
rename to libs/design/modal/src/modal/modal.ts
index e06a06562d..f22ea92357 100644
--- a/libs/design/src/molecules/modal/modal.ts
+++ b/libs/design/modal/src/modal/modal.ts
@@ -1,7 +1,7 @@
 import { OverlayRef } from '@angular/cdk/overlay';
 import { ComponentRef } from '@angular/core';
 
-import { DaffModalComponent } from './modal/modal.component';
+import { DaffModalComponent } from './modal.component';
 
 export interface DaffModal {
   /**
diff --git a/libs/design/src/molecules/modal/public_api.ts b/libs/design/modal/src/public_api.ts
similarity index 91%
rename from libs/design/src/molecules/modal/public_api.ts
rename to libs/design/modal/src/public_api.ts
index 82486959e6..eebe4561b7 100644
--- a/libs/design/src/molecules/modal/public_api.ts
+++ b/libs/design/modal/src/public_api.ts
@@ -1,7 +1,7 @@
 export * from './modal/modal.component';
 export { DaffModalModule } from './modal.module';
 export { DaffModalService } from './service/modal.service';
-export { DaffModal } from './modal';
+export { DaffModal } from './modal/modal';
 export { DaffModalHeaderComponent } from './modal-header/modal-header.component';
 export { DaffModalTitleDirective } from './modal-title/modal-title.directive';
 export { DaffModalContentComponent } from './modal-content/modal-content.component';
diff --git a/libs/design/src/molecules/modal/service/modal.service.ts b/libs/design/modal/src/service/modal.service.ts
similarity index 98%
rename from libs/design/src/molecules/modal/service/modal.service.ts
rename to libs/design/modal/src/service/modal.service.ts
index 04831bfd88..d9ac73ab05 100644
--- a/libs/design/src/molecules/modal/service/modal.service.ts
+++ b/libs/design/modal/src/service/modal.service.ts
@@ -11,7 +11,7 @@ import {
   ComponentRef,
 } from '@angular/core';
 
-import { DaffModal } from '../modal';
+import { DaffModal } from '../modal/modal';
 import { DaffModalConfiguration } from '../modal/modal-config';
 import { DaffModalComponent } from '../modal/modal.component';
 import { DaffModalModule } from '../modal.module';
diff --git a/libs/design/src/molecules/modal/service/modal.service.spec.ts b/libs/design/modal/src/service/specs/modal.service.spec.ts
similarity index 95%
rename from libs/design/src/molecules/modal/service/modal.service.spec.ts
rename to libs/design/modal/src/service/specs/modal.service.spec.ts
index b9d270f720..6675b852af 100644
--- a/libs/design/src/molecules/modal/service/modal.service.spec.ts
+++ b/libs/design/modal/src/service/specs/modal.service.spec.ts
@@ -2,7 +2,6 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import {
   Component,
   NgModule,
-  DebugElement,
   ViewContainerRef,
 } from '@angular/core';
 import {
@@ -14,8 +13,8 @@ import {
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalService } from './modal.service';
-import { DaffModalModule } from '../modal.module';
+import { DaffModalModule } from '../../modal.module';
+import { DaffModalService } from '../modal.service';
 
 @Component({
   template: `
diff --git a/libs/design/src/molecules/modal/service/spec/multiple-modal.spec.ts b/libs/design/modal/src/service/specs/multiple-modal.spec.ts
similarity index 99%
rename from libs/design/src/molecules/modal/service/spec/multiple-modal.spec.ts
rename to libs/design/modal/src/service/specs/multiple-modal.spec.ts
index bf5c8a8d2e..fd18e4fc97 100644
--- a/libs/design/src/molecules/modal/service/spec/multiple-modal.spec.ts
+++ b/libs/design/modal/src/service/specs/multiple-modal.spec.ts
@@ -3,7 +3,6 @@ import {
   Component,
   NgModule,
   ViewContainerRef,
-  DebugElement,
 } from '@angular/core';
 import {
   waitForAsync,
@@ -17,7 +16,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DaffModalModule } from '../../modal.module';
 import { DaffModalService } from '../modal.service';
 
-
 @Component({
   selector: 'daff-dynamic-component',
   template: `
diff --git a/libs/design/src/molecules/modal/modal/spec/animations.spec.ts b/libs/design/modal/src/specs/animations.spec.ts
similarity index 94%
rename from libs/design/src/molecules/modal/modal/spec/animations.spec.ts
rename to libs/design/modal/src/specs/animations.spec.ts
index 916c7a5561..6d4a077f01 100644
--- a/libs/design/src/molecules/modal/modal/spec/animations.spec.ts
+++ b/libs/design/modal/src/specs/animations.spec.ts
@@ -1,8 +1,5 @@
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
 } from '@angular/core';
 import {
@@ -13,7 +10,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalComponent } from '../modal.component';
+import { DaffModalComponent } from '../modal/modal.component';
 
 @Component({ template: `
   <div class="daff-modal-wrapper">
diff --git a/libs/design/src/molecules/modal/modal/spec/dynamic-content.spec.ts b/libs/design/modal/src/specs/dynamic-content.spec.ts
similarity index 94%
rename from libs/design/src/molecules/modal/modal/spec/dynamic-content.spec.ts
rename to libs/design/modal/src/specs/dynamic-content.spec.ts
index deda687cab..fec26a3172 100644
--- a/libs/design/src/molecules/modal/modal/spec/dynamic-content.spec.ts
+++ b/libs/design/modal/src/specs/dynamic-content.spec.ts
@@ -4,9 +4,6 @@ import {
 } from '@angular/cdk/portal';
 import {
   Component,
-  Input,
-  Output,
-  EventEmitter,
   DebugElement,
   NgModule,
 } from '@angular/core';
@@ -18,7 +15,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffModalComponent } from '../modal.component';
+import { DaffModalComponent } from '../modal/modal.component';
 
 @Component({ template: `<daff-modal></daff-modal>` })
 class WrapperComponent {}
diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss
index f84b01a30f..b40c929c56 100644
--- a/libs/design/scss/theme.scss
+++ b/libs/design/scss/theme.scss
@@ -33,7 +33,7 @@
 @use '../list/src/list-theme' as list;
 @use '../media-gallery/src/media-gallery-theme' as media-gallery;
 @use '../menu/src/menu-theme' as menu;
-@use '../src/molecules/modal/modal-theme' as modal;
+@use '../modal/src/modal-theme' as modal;
 @use '../src/molecules/navbar/navbar-theme' as navbar;
 @use '../notification/src/notification-theme' as notification;
 @use '../src/molecules/paginator/paginator-theme' as paginator;
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index 6cfc4c3b78..576c3450af 100644
--- a/libs/design/src/public_api.ts
+++ b/libs/design/src/public_api.ts
@@ -19,7 +19,6 @@ export * from './molecules/backdrop/public_api';
 export * from './molecules/button-set/public_api';
 export * from './molecules/image-gallery/public_api';
 export * from './molecules/image-list/public_api';
-export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';
 export * from './molecules/paginator/public_api';
 export * from './molecules/qty-dropdown/public_api';