diff --git a/libs/design/image/src/image/image.component.ts b/libs/design/image/src/image/image.component.ts
index 1345fb5289..b0e5bd7e10 100644
--- a/libs/design/image/src/image/image.component.ts
+++ b/libs/design/image/src/image/image.component.ts
@@ -14,8 +14,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-  daffThumbnailCompatToken,
 } from '@daffodil/design';
+import { daffThumbnailCompatToken } from '@daffodil/design/media-gallery';
 
 const validateProperty = (object: Record<string, any>, prop: string) => {
   if (object[prop] === null || object[prop] === undefined || object[prop] === '') {
diff --git a/libs/design/src/molecules/media-gallery/README.md b/libs/design/media-gallery/README.md
similarity index 100%
rename from libs/design/src/molecules/media-gallery/README.md
rename to libs/design/media-gallery/README.md
diff --git a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
index a38df19309..f20c79c6c4 100644
--- a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { BasicMediaGalleryComponent } from './basic-media-gallery.component';
 
diff --git a/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts b/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
index d7af4a4bd9..e1da1eb012 100644
--- a/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';
 
diff --git a/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts b/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
index 5e3e662ad4..007b84e754 100644
--- a/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';
 
diff --git a/libs/design/media-gallery/ng-package.json b/libs/design/media-gallery/ng-package.json
new file mode 100644
index 0000000000..9877d523cb
--- /dev/null
+++ b/libs/design/media-gallery/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/media-gallery",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 
\ No newline at end of file
diff --git a/libs/design/src/molecules/media-gallery/media-gallery-registration.interface.ts b/libs/design/media-gallery/src/helpers/media-gallery-registration.interface.ts
similarity index 100%
rename from libs/design/src/molecules/media-gallery/media-gallery-registration.interface.ts
rename to libs/design/media-gallery/src/helpers/media-gallery-registration.interface.ts
diff --git a/libs/design/src/molecules/media-gallery/media-gallery-token.ts b/libs/design/media-gallery/src/helpers/media-gallery-token.ts
similarity index 100%
rename from libs/design/src/molecules/media-gallery/media-gallery-token.ts
rename to libs/design/media-gallery/src/helpers/media-gallery-token.ts
diff --git a/libs/design/media-gallery/src/index.ts b/libs/design/media-gallery/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/media-gallery/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/src/molecules/media-gallery/media-gallery-theme.scss b/libs/design/media-gallery/src/media-gallery-theme.scss
similarity index 86%
rename from libs/design/src/molecules/media-gallery/media-gallery-theme.scss
rename to libs/design/media-gallery/src/media-gallery-theme.scss
index 721b25794f..2f1ecdbac7 100644
--- a/libs/design/src/molecules/media-gallery/media-gallery-theme.scss
+++ b/libs/design/media-gallery/src/media-gallery-theme.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/theming';
-@use '../../../scss/core';
+@use '../../scss/theming';
+@use '../../scss/core';
 
 @mixin daff-media-gallery-theme($theme) {
 	$gray: core.daff-map-deep-get($theme, 'core.gray');
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.module.ts b/libs/design/media-gallery/src/media-gallery.module.ts
similarity index 86%
rename from libs/design/src/molecules/media-gallery/media-gallery.module.ts
rename to libs/design/media-gallery/src/media-gallery.module.ts
index 954a08a87e..1103e2f1b5 100644
--- a/libs/design/src/molecules/media-gallery/media-gallery.module.ts
+++ b/libs/design/media-gallery/src/media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryComponent } from './media-gallery.component';
+import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';
 import { DaffMediaRendererComponent } from './media-renderer/media-renderer.component';
 import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
 
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.html b/libs/design/media-gallery/src/media-gallery/media-gallery.component.html
similarity index 100%
rename from libs/design/src/molecules/media-gallery/media-gallery.component.html
rename to libs/design/media-gallery/src/media-gallery/media-gallery.component.html
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.scss b/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss
similarity index 93%
rename from libs/design/src/molecules/media-gallery/media-gallery.component.scss
rename to libs/design/media-gallery/src/media-gallery/media-gallery.component.scss
index 8c86ef25b2..88b3db8778 100644
--- a/libs/design/src/molecules/media-gallery/media-gallery.component.scss
+++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss
@@ -3,8 +3,6 @@
 @use '../../../scss/state';
 
 :host(.daff-media-gallery) {
-	// stylelint-disable-next-line scss/comment-no-loud
-	/* autoprefixer grid: autoplace */
 	$root: '.daff-media-gallery';
 	display: flex;
 	flex-direction: column;
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.spec.ts b/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts
similarity index 93%
rename from libs/design/src/molecules/media-gallery/media-gallery.component.spec.ts
rename to libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts
index 9ee47416bc..1241a2cf22 100644
--- a/libs/design/src/molecules/media-gallery/media-gallery.component.spec.ts
+++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts
@@ -10,9 +10,9 @@ import {
 import { By } from '@angular/platform-browser';
 
 import { DaffMediaGalleryComponent } from './media-gallery.component';
-import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
-import { daffThumbnailCompatToken } from './thumbnail/thumbnail-compat.token';
-import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import { daffThumbnailCompatToken } from '../thumbnail/thumbnail-compat.token';
+import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
 
 @Component({
   template: `<daff-media-gallery [name]="nameValue" [skeleton]="skeleton">
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.ts b/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts
similarity index 82%
rename from libs/design/src/molecules/media-gallery/media-gallery.component.ts
rename to libs/design/media-gallery/src/media-gallery/media-gallery.component.ts
index 7fa88b508d..928788fce4 100644
--- a/libs/design/src/molecules/media-gallery/media-gallery.component.ts
+++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts
@@ -9,14 +9,15 @@ import {
   Renderer2,
 } from '@angular/core';
 
-import { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from './media-gallery-token';
-import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
-import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-} from '../../core/skeletonable/public_api';
+  daffArticleEncapsulatedMixin,
+} from '@daffodil/design';
+
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 let uniqueGalleryId = 0;
 
diff --git a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts b/libs/design/media-gallery/src/media-renderer/media-renderer.component.spec.ts
similarity index 95%
rename from libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts
rename to libs/design/media-gallery/src/media-renderer/media-renderer.component.spec.ts
index b0dc067462..4050be3cdb 100644
--- a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts
+++ b/libs/design/media-gallery/src/media-renderer/media-renderer.component.spec.ts
@@ -13,8 +13,8 @@ import { BehaviorSubject } from 'rxjs';
 import { DaffArticleComponent } from '@daffodil/design/article';
 
 import { DaffMediaRendererComponent } from './media-renderer.component';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 import { daffThumbnailCompatToken } from '../thumbnail/thumbnail-compat.token';
 import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
diff --git a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.ts b/libs/design/media-gallery/src/media-renderer/media-renderer.component.ts
similarity index 92%
rename from libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.ts
rename to libs/design/media-gallery/src/media-renderer/media-renderer.component.ts
index 7297187120..c3e9a29c5b 100644
--- a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.ts
+++ b/libs/design/media-gallery/src/media-renderer/media-renderer.component.ts
@@ -13,8 +13,8 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 /**
@@ -23,7 +23,7 @@ import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
  */
 @Component({
   selector: 'daff-media-renderer',
-  templateUrl: './media-renderer.component.html',
+  template: '<ng-template></ng-template>',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffMediaRendererComponent implements OnInit, OnDestroy {
diff --git a/libs/design/src/molecules/media-gallery/public_api.ts b/libs/design/media-gallery/src/public_api.ts
similarity index 74%
rename from libs/design/src/molecules/media-gallery/public_api.ts
rename to libs/design/media-gallery/src/public_api.ts
index 2d801c4d29..07a2d31192 100644
--- a/libs/design/src/molecules/media-gallery/public_api.ts
+++ b/libs/design/media-gallery/src/public_api.ts
@@ -1,4 +1,4 @@
-export * from './media-gallery.component';
+export * from './media-gallery/media-gallery.component';
 export * from './media-gallery.module';
 export * from './thumbnail/thumbnail.directive';
 
diff --git a/libs/design/src/molecules/media-gallery/registry/media-gallery.registry.spec.ts b/libs/design/media-gallery/src/registry/media-gallery.registry.spec.ts
similarity index 98%
rename from libs/design/src/molecules/media-gallery/registry/media-gallery.registry.spec.ts
rename to libs/design/media-gallery/src/registry/media-gallery.registry.spec.ts
index 0f173a66bf..b492f6bbe1 100644
--- a/libs/design/src/molecules/media-gallery/registry/media-gallery.registry.spec.ts
+++ b/libs/design/media-gallery/src/registry/media-gallery.registry.spec.ts
@@ -12,16 +12,14 @@ import {
   DaffMediaGallery,
   DaffMediaGalleryRegistry,
 } from './media-gallery.registry';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
 
 @Component({})
 export class FakeComponent {}
 
 export class ChangeDetectorRefMock implements Partial<ChangeDetectorRef> {
-  markForCheck() {
-
-  }
+  markForCheck() {}
 }
 
 describe('DaffMediaGalleryRegistry', () => {
diff --git a/libs/design/src/molecules/media-gallery/registry/media-gallery.registry.ts b/libs/design/media-gallery/src/registry/media-gallery.registry.ts
similarity index 96%
rename from libs/design/src/molecules/media-gallery/registry/media-gallery.registry.ts
rename to libs/design/media-gallery/src/registry/media-gallery.registry.ts
index 35ae552ba7..867f2b8a70 100644
--- a/libs/design/src/molecules/media-gallery/registry/media-gallery.registry.ts
+++ b/libs/design/media-gallery/src/registry/media-gallery.registry.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffThumbnailRegistration } from '../thumbnail/thumbnail-registration.interface';
 
 export interface DaffMediaGalleryDict {
diff --git a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail-compat.token.ts b/libs/design/media-gallery/src/thumbnail/thumbnail-compat.token.ts
similarity index 100%
rename from libs/design/src/molecules/media-gallery/thumbnail/thumbnail-compat.token.ts
rename to libs/design/media-gallery/src/thumbnail/thumbnail-compat.token.ts
diff --git a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail-registration.interface.ts b/libs/design/media-gallery/src/thumbnail/thumbnail-registration.interface.ts
similarity index 73%
rename from libs/design/src/molecules/media-gallery/thumbnail/thumbnail-registration.interface.ts
rename to libs/design/media-gallery/src/thumbnail/thumbnail-registration.interface.ts
index dc30fe8cde..f7a34aa211 100644
--- a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail-registration.interface.ts
+++ b/libs/design/media-gallery/src/thumbnail/thumbnail-registration.interface.ts
@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 
 export interface DaffThumbnailRegistration {
   gallery: DaffMediaGalleryRegistration;
diff --git a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.spec.ts b/libs/design/media-gallery/src/thumbnail/thumbnail.directive.spec.ts
similarity index 97%
rename from libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.spec.ts
rename to libs/design/media-gallery/src/thumbnail/thumbnail.directive.spec.ts
index 8dcba07cbc..2e8a531a6f 100644
--- a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.spec.ts
+++ b/libs/design/media-gallery/src/thumbnail/thumbnail.directive.spec.ts
@@ -11,7 +11,7 @@ import { By } from '@angular/platform-browser';
 
 import { daffThumbnailCompatToken } from './thumbnail-compat.token';
 import { DaffThumbnailDirective } from './thumbnail.directive';
-import { DaffMediaGalleryComponent } from '../media-gallery.component';
+import { DaffMediaGalleryComponent } from '../media-gallery/media-gallery.component';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 @Component({
diff --git a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.ts b/libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts
similarity index 92%
rename from libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.ts
rename to libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts
index 5ee646379a..a4277ce819 100644
--- a/libs/design/src/molecules/media-gallery/thumbnail/thumbnail.directive.ts
+++ b/libs/design/media-gallery/src/thumbnail/thumbnail.directive.ts
@@ -13,8 +13,8 @@ import {
 
 import { daffThumbnailCompatToken } from './thumbnail-compat.token';
 import { DaffThumbnailRegistration } from './thumbnail-registration.interface';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 /**
diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss
index 5fc15e245d..3a07eddc18 100644
--- a/libs/design/scss/theme.scss
+++ b/libs/design/scss/theme.scss
@@ -31,7 +31,7 @@
 @use '../card/src/card-theme' as card;
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
-@use '../src/molecules/media-gallery/media-gallery-theme' as media-gallery;
+@use '../media-gallery/src/media-gallery-theme' as media-gallery;
 @use '../src/molecules/menu/menu-theme' as menu;
 @use '../src/molecules/modal/modal-theme' as modal;
 @use '../src/molecules/navbar/navbar-theme' as navbar;
diff --git a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.html b/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.html
deleted file mode 100644
index e2a7a80ddd..0000000000
--- a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-template></ng-template>
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index 3505cc73d3..a2d12dc105 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/media-gallery/public_api';
 export * from './molecules/menu/public_api';
 export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';