diff --git a/src/components/page-description/d-page-description.tsx b/src/components/page-description/d-page-description.tsx
index 585bfc0..7c7b513 100644
--- a/src/components/page-description/d-page-description.tsx
+++ b/src/components/page-description/d-page-description.tsx
@@ -11,9 +11,9 @@ export class DPageDescription {
 
   render() {
     return (
-      <Host>
-        <d-heading size="s">{this.title}</d-heading>
-        <d-text size="l">
+      <Host class="pb-4">
+        <d-heading size="xs" class="font-semibold">{this.title}</d-heading>
+        <d-text size="m">
           <p>{this.description}</p>
         </d-text>
       </Host>
diff --git a/src/components/page-description/test/d-page-description.spec.tsx b/src/components/page-description/test/d-page-description.spec.tsx
index a87bf5f..6f1c9f1 100644
--- a/src/components/page-description/test/d-page-description.spec.tsx
+++ b/src/components/page-description/test/d-page-description.spec.tsx
@@ -8,11 +8,11 @@ describe('d-page-description', () => {
       html: `<d-page-description></d-page-description>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-page-description>
+    <d-page-description class="pb-4">
         <mock:shadow-root>
-          <d-heading size="s"></d-heading>
-          <d-text size="l">
-            <p></p>
+          <d-heading class="font-semibold" size="xs"></d-heading>
+          <d-text size="m">
+              <p></p>
           </d-text>
         </mock:shadow-root>
       </d-page-description>