diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
index b5c3e10299..1d19fba241 100644
--- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
+++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
@@ -3,6 +3,6 @@
 		On this page
 	</div>
 	<div class="daffio-docs-table-of-contents__links">
-		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
+		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" queryParamsHandling="merge" [fragment]="entry.slug">{{ entry.content }}</a>
 	</div>
 </aside>
\ No newline at end of file
diff --git a/apps/daffio/src/app/docs/design/components/component-content/component-content.component.html b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.html
new file mode 100644
index 0000000000..c579164709
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.html
@@ -0,0 +1,30 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs" [toc]="toc()">
+	<daff-tabs
+		[initiallySelected]="USAGE_TAB_ID"
+		[linkMode]="true"
+		[url]="doc().id"
+		(tabChange)="setTab($event)"
+	>
+		<daff-tab [id]="USAGE_TAB_ID">
+			<daff-tab-label>
+				Usage
+			</daff-tab-label>
+			<daff-tab-panel>
+				<daff-article
+					[innerHtml]="doc().contents | safe">
+				</daff-article>
+			</daff-tab-panel>
+		</daff-tab>
+
+		<daff-tab [id]="API_TAB_ID">
+			<daff-tab-label>
+				API
+			</daff-tab-label>
+			<daff-tab-panel>
+				@for (apiDoc of doc().api; track $index) {
+					<div [innerHtml]="apiDoc | safe"></div>
+				}
+			</daff-tab-panel>
+		</daff-tab>
+	</daff-tabs>
+</daffio-doc-article>
diff --git a/apps/daffio/src/app/docs/design/components/component-content/component-content.component.spec.ts b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.spec.ts
new file mode 100644
index 0000000000..a8363963d1
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.spec.ts
@@ -0,0 +1,39 @@
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffioDocsDesignComponentPageComponent } from './docs-list.component';
+
+describe('DaffioDocsDesignComponentPageComponent', () => {
+  let component: DaffioDocsDesignComponentPageComponent;
+  let fixture: ComponentFixture<DaffioDocsDesignComponentPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DaffioDocsDesignComponentPageComponent,
+        RouterTestingModule,
+        NoopAnimationsModule],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsDesignComponentPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/daffio/src/app/docs/design/components/component-content/component-content.component.ts b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.ts
new file mode 100644
index 0000000000..4287ce1e9b
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/component-content/component-content.component.ts
@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import {
+  DAFF_TABS_COMPONENTS,
+  DaffTabsComponent,
+} from '@daffodil/design/tabs';
+import {
+  DaffDocKind,
+  DaffPackageGuideDoc,
+} from '@daffodil/docs-utils';
+
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocArticleModule } from '../../../components/doc-article/module';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
+
+
+@Component({
+  selector: 'daffio-docs-design-component-content',
+  templateUrl: './component-content.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    DAFF_ARTICLE_COMPONENTS,
+    DaffioDocArticleModule,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
+  static readonly kind = DaffDocKind.COMPONENT;
+
+  private readonly _tab = signal<string>('');
+
+  readonly USAGE_TAB_ID = 'usage';
+  readonly API_TAB_ID = 'api';
+
+  tabs = viewChild.required(DaffTabsComponent);
+  doc = input<DaffPackageGuideDoc>();
+  toc = computed(() => {
+    switch (this._tab()) {
+      case this.API_TAB_ID:
+        return this.doc().apiToc;
+
+      default:
+      case this.USAGE_TAB_ID:
+        return this.doc().tableOfContents;
+    }
+  });
+
+  setTab(tab: string) {
+    this._tab.set(tab);
+  }
+}
diff --git a/apps/daffio/src/app/docs/design/components/component-content/component-content.provider.ts b/apps/daffio/src/app/docs/design/components/component-content/component-content.provider.ts
new file mode 100644
index 0000000000..2b1c65aada
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/component-content/component-content.provider.ts
@@ -0,0 +1,4 @@
+import { DaffioDocsDesignComponentContentComponent } from './component-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const provideDaffioDocsDesignComponentContentComponent = () => provideDaffioDocsDynamicContentComponents(DaffioDocsDesignComponentContentComponent);
diff --git a/apps/daffio/src/app/docs/design/design.module.ts b/apps/daffio/src/app/docs/design/design.module.ts
index 82b90e00a3..88efb73a99 100644
--- a/apps/daffio/src/app/docs/design/design.module.ts
+++ b/apps/daffio/src/app/docs/design/design.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 
+import { provideDaffioDocsDesignComponentContentComponent } from './components/component-content/component-content.provider';
 import { DaffioDocsDesignRoutingModule } from './design-routing.module';
 import { DaffioDocsDesignIndexService } from './services/index.service';
+import { provideDaffioDocsPackagesContentComponent } from '../packages/components/packages-content/packages-content.provider';
 
 @NgModule({
   imports: [
@@ -9,6 +11,8 @@ import { DaffioDocsDesignIndexService } from './services/index.service';
   ],
   providers: [
     DaffioDocsDesignIndexService,
+    provideDaffioDocsDesignComponentContentComponent(),
+    provideDaffioDocsPackagesContentComponent(),
   ],
 })
 export class DaffioDocsDesignModule {}