diff --git a/apps/daffio/src/app/docs/design/components/doc/component.html b/apps/daffio/src/app/docs/design/components/doc/component.html
new file mode 100644
index 0000000000..0cc88dcdf3
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/doc/component.html
@@ -0,0 +1,25 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs">
+	<daff-tabs>
+		<daff-tab>
+			<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>
+			<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/pages/component/component.spec.ts b/apps/daffio/src/app/docs/design/components/doc/component.spec.ts
similarity index 100%
rename from apps/daffio/src/app/docs/design/pages/component/component.spec.ts
rename to apps/daffio/src/app/docs/design/components/doc/component.spec.ts
diff --git a/apps/daffio/src/app/docs/design/components/doc/component.ts b/apps/daffio/src/app/docs/design/components/doc/component.ts
new file mode 100644
index 0000000000..40efaed0e6
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/doc/component.ts
@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+} from '@angular/core';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import { DAFF_TABS_COMPONENTS } 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 { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+
+@Component({
+  selector: 'daffio-docs-design-component-page',
+  templateUrl: './component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    DAFF_ARTICLE_COMPONENTS,
+    DaffioDocArticleModule,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocsDesignComponentDocComponent implements DaffioDocComponent<DaffPackageGuideDoc> {
+  static readonly kind = DaffDocKind.COMPONENT;
+
+  doc = input<DaffPackageGuideDoc>();
+}
diff --git a/apps/daffio/src/app/docs/design/components/doc/provider.ts b/apps/daffio/src/app/docs/design/components/doc/provider.ts
new file mode 100644
index 0000000000..90674d3259
--- /dev/null
+++ b/apps/daffio/src/app/docs/design/components/doc/provider.ts
@@ -0,0 +1,4 @@
+import { DaffioDocsDesignComponentDocComponent } from './component';
+import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
+
+export const daffioDocsDesignComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocsDesignComponentDocComponent);
diff --git a/apps/daffio/src/app/docs/design/design-routing.module.ts b/apps/daffio/src/app/docs/design/design-routing.module.ts
index 14a8729a0d..18e4101780 100644
--- a/apps/daffio/src/app/docs/design/design-routing.module.ts
+++ b/apps/daffio/src/app/docs/design/design-routing.module.ts
@@ -13,10 +13,8 @@ import {
 } from '@daffodil/docs-utils';
 
 import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
-import { DaffioDocsDesignComponentPageComponent } from './pages/component/component';
 import { DaffioDocsDesignComponentOverviewPageComponent } from './pages/components-overview/component-overview.component';
 import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
-import { DaffioDesignComponentDocResolver } from './resolvers/component-doc-resolver.service';
 import { DAFF_NAV_SIDEBAR_REGISTRATION } from '../../core/nav/sidebar.provider';
 import { DaffioRoute } from '../../core/router/route.type';
 import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
@@ -51,21 +49,6 @@ export const docsDesignRoutes: Routes = [
         path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.COMPONENT],
         component: DaffioDocsDesignComponentOverviewPageComponent,
       },
-      {
-        path: 'components',
-        children: [
-					<DaffioRoute>{
-					  path: '**',
-					  component: DaffioDocsDesignComponentPageComponent,
-					  resolve: {
-					    doc: DaffioDesignComponentDocResolver,
-					  },
-					  data: {
-					    sidebarMode: DaffSidebarModeEnum.SideFixed,
-					  },
-					},
-        ],
-      },
       <DaffioRoute>{
         path: '**',
         component: DaffioDocsPageComponent,
diff --git a/apps/daffio/src/app/docs/design/design.module.ts b/apps/daffio/src/app/docs/design/design.module.ts
index 82b90e00a3..ba5e4d0097 100644
--- a/apps/daffio/src/app/docs/design/design.module.ts
+++ b/apps/daffio/src/app/docs/design/design.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { daffioDocsDesignComponentProvider } from './components/doc/provider';
 import { DaffioDocsDesignRoutingModule } from './design-routing.module';
 import { DaffioDocsDesignIndexService } from './services/index.service';
 
@@ -9,6 +10,7 @@ import { DaffioDocsDesignIndexService } from './services/index.service';
   ],
   providers: [
     DaffioDocsDesignIndexService,
+    daffioDocsDesignComponentProvider(),
   ],
 })
 export class DaffioDocsDesignModule {}
diff --git a/apps/daffio/src/app/docs/design/pages/component/component.html b/apps/daffio/src/app/docs/design/pages/component/component.html
deleted file mode 100644
index 197fda0a05..0000000000
--- a/apps/daffio/src/app/docs/design/pages/component/component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<ng-container *ngrxLet="doc$; let doc">
-	<daffio-doc-viewer [doc]="doc.guide">
-		<daff-tabs>
-			<daff-tab>
-				<daff-tab-label>
-					Usage
-				</daff-tab-label>
-				<daff-tab-panel>
-					<daff-article
-						[innerHtml]="getInnerHtml(doc.guide)">
-					</daff-article>
-				</daff-tab-panel>
-			</daff-tab>
-
-			<daff-tab>
-				<daff-tab-label>
-					API
-				</daff-tab-label>
-				<daff-tab-panel>
-					@for (apiDoc of doc.api; track $index) {
-						<div [innerHtml]="getInnerHtml(apiDoc)"></div>
-					}
-				</daff-tab-panel>
-			</daff-tab>
-		</daff-tabs>
-	</daffio-doc-viewer>
-</ng-container>
diff --git a/apps/daffio/src/app/docs/design/pages/component/component.ts b/apps/daffio/src/app/docs/design/pages/component/component.ts
deleted file mode 100644
index 72b0672832..0000000000
--- a/apps/daffio/src/app/docs/design/pages/component/component.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnInit,
-} from '@angular/core';
-import {
-  DomSanitizer,
-  SafeHtml,
-} from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
-import { LetDirective } from '@ngrx/component';
-import {
-  map,
-  Observable,
-} from 'rxjs';
-
-import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
-import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
-import {
-  DaffDoc,
-  DaffGuideDoc,
-} from '@daffodil/docs-utils';
-
-import { DaffioDocViewerModule } from '../../../components/doc-viewer/doc-viewer.module';
-import { DaffioDesignComponentDoc } from '../../resolvers/component-doc-resolver.service';
-
-@Component({
-  selector: 'daffio-docs-design-component-page',
-  templateUrl: './component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    LetDirective,
-    DAFF_TABS_COMPONENTS,
-    DAFF_ARTICLE_COMPONENTS,
-    DaffioDocViewerModule,
-  ],
-})
-export class DaffioDocsDesignComponentPageComponent implements OnInit {
-  doc$: Observable<DaffioDesignComponentDoc>;
-
-  constructor(
-    private route: ActivatedRoute,
-    private sanitizer: DomSanitizer,
-  ) {}
-
-  ngOnInit() {
-    this.doc$ = this.route.data.pipe(map((data: { doc: DaffioDesignComponentDoc }) => data.doc));
-  }
-
-  getInnerHtml(doc: DaffDoc | DaffGuideDoc): SafeHtml {
-    //It is necessary to bypass the default angular sanitization to keep id tags in the injected html. These id tags are used for fragment routing.
-    return this.sanitizer.bypassSecurityTrustHtml(doc.contents);
-  }
-}
diff --git a/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.spec.ts b/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.spec.ts
deleted file mode 100644
index 33bec1e399..0000000000
--- a/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.spec.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import {
-  RouterStateSnapshot,
-  Router,
-} from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { cold } from 'jasmine-marbles';
-import {
-  of,
-  Observable,
-  throwError,
-} from 'rxjs';
-
-import { DaffDoc } from '@daffodil/docs-utils';
-
-import { DocsResolver } from './component-doc-resolver.service';
-import { DaffioDocsServiceInterface } from '../services/docs-service.interface';
-import { DaffioDocsService } from '../services/docs.service';
-import { DaffioDocsFactory } from '../testing/factories/docs.factory';
-
-describe('DocsResolver', () => {
-  let resolver: DocsResolver;
-  let docsService: DaffioDocsService;
-  let router: Router;
-
-  const doc = new DaffioDocsFactory().create();
-  const stubDocService: DaffioDocsServiceInterface = {
-    get: (path: string): Observable<DaffDoc> => of(doc),
-  };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-      ],
-      providers: [
-        { provide: DaffioDocsService, useValue: stubDocService },
-      ],
-    });
-
-    router = TestBed.inject(Router);
-    docsService = TestBed.inject(DaffioDocsService);
-    resolver = TestBed.inject(DocsResolver);
-  });
-
-  it('should be created', () => {
-    expect(resolver).toBeTruthy();
-  });
-
-  it('should complete with a doc', () => {
-    const expected = cold('(a|)', { a: doc });
-    expect(resolver.resolve(null, <RouterStateSnapshot>{ url: 'my/path' })).toBeObservable(expected);
-  });
-
-  describe('if the doc doesn\'t exist (the doc service errors)', () => {
-    beforeEach(() => {
-      spyOn(docsService, 'get').and.returnValue(throwError('error'));
-      spyOn(router, 'navigate');
-    });
-
-    it('should resolve with an empty observable', () => {
-      const expected = cold('(|)');
-      expect(resolver.resolve(null, <RouterStateSnapshot>{ url: 'my/path' })).toBeObservable(expected);
-    });
-
-    it('should redirect to the 404 page', () => {
-      resolver.resolve(null, <RouterStateSnapshot>{ url: 'my/path' }).subscribe();
-      expect(router.navigate).toHaveBeenCalledWith(['/404'], { skipLocationChange: true });
-    });
-  });
-});
diff --git a/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.ts b/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.ts
deleted file mode 100644
index b7e20a2495..0000000000
--- a/apps/daffio/src/app/docs/design/resolvers/component-doc-resolver.service.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot,
-  Router,
-} from '@angular/router';
-import {
-  Observable,
-  EMPTY,
-  combineLatest,
-} from 'rxjs';
-import {
-  take,
-  catchError,
-  switchMap,
-  withLatestFrom,
-  map,
-} from 'rxjs/operators';
-
-import {
-  daffUriTruncateLeadingSlash,
-  daffUriTruncateQueryFragment,
-} from '@daffodil/core/routing';
-import {
-  DaffApiDoc,
-  DaffPackageGuideDoc,
-} from '@daffodil/docs-utils';
-
-import { DaffioDocsService } from '../../services/docs.service';
-
-export interface DaffioDesignComponentDoc {
-  guide: DaffPackageGuideDoc;
-  api: Array<DaffApiDoc>;
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DaffioDesignComponentDocResolver {
-
-  constructor(private docService: DaffioDocsService, private router: Router) { }
-
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<DaffioDesignComponentDoc> {
-    return this.docService
-    //remove any route fragment and initial slash from the route.
-      .get<DaffPackageGuideDoc>(daffUriTruncateLeadingSlash(daffUriTruncateQueryFragment(state.url)))
-      .pipe(
-        take(1),
-        switchMap((packageDoc) =>
-          combineLatest(packageDoc.symbols?.map((symbol) =>
-            this.docService.get<DaffApiDoc>(symbol)),
-          ).pipe(
-            map((api) => ({
-              guide: packageDoc,
-              api,
-            })),
-          ),
-        ),
-        catchError(() => {
-          this.router.navigate(['/404'], { skipLocationChange: true });
-          return EMPTY;
-        }),
-      );
-  }
-}