diff --git a/components/Aside/Aside.module.css b/components/Aside/Aside.module.css
index 95027bc98..d17e3fca2 100644
--- a/components/Aside/Aside.module.css
+++ b/components/Aside/Aside.module.css
@@ -5,17 +5,16 @@
 .admonition div,
 .admonition ol,
 .admonition ul {
-  @apply mb-3;
+  @apply mb-3 !important;
 }
 
 .admonition ol li::before {
-  @apply mr-1;
+  @apply mr-1 !important;
 }
 
 .admonition div:last-child,
 .admonition ol:last-child,
 .admonition ul:last-child,
-.admonition li,
-.admonition div p {
+.admonition li {
   @apply my-0 !important;
 }
diff --git a/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap b/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap
index ab81192ab..a83799b97 100644
--- a/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap
+++ b/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap
@@ -40,56 +40,40 @@ exports[`ErrorBoundary should render alert message correctly (snapshot) 1`] = `
         role="alert"
       >
         <div
-          class="ant-typography"
+          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide"
         >
-          <p
-            class="mt-0 mb-9 leading-relaxed tracking-wide"
+          <span
+            class="ant-typography text-xl font-extrabold"
           >
-            <span
-              class="ant-typography text-xl font-extrabold"
-            >
-              Please check the following information:
-            </span>
-          </p>
+            Please check the following information:
+          </span>
         </div>
         <div
-          class="ant-typography"
+          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide"
         >
-          <p
-            class="mt-0 mb-9 leading-relaxed tracking-wide"
+          <span
+            class="ant-typography"
           >
-            <span
-              class="ant-typography"
-            >
-              ComponentWithError.
-            </span>
-          </p>
+            ComponentWithError.
+          </span>
         </div>
         <div
-          class="ant-typography"
+          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide"
         >
-          <p
-            class="mt-0 mb-9 leading-relaxed tracking-wide"
+          <span
+            class="ant-typography"
           >
-            <span
-              class="ant-typography"
-            >
-              Please check terminal output for further details.
-            </span>
-          </p>
+            Please check terminal output for further details.
+          </span>
         </div>
         <div
-          class="ant-typography"
+          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide"
         >
-          <p
-            class="mt-0 mb-9 leading-relaxed tracking-wide"
+          <span
+            class="ant-typography"
           >
-            <span
-              class="ant-typography"
-            >
-              Please reload this page after changing code.
-            </span>
-          </p>
+            Please reload this page after changing code.
+          </span>
         </div>
       </div>
     </div>
diff --git a/components/ImageCard/ImageCard.tsx b/components/ImageCard/ImageCard.tsx
index 3160e9716..d4f22671a 100644
--- a/components/ImageCard/ImageCard.tsx
+++ b/components/ImageCard/ImageCard.tsx
@@ -1,13 +1,15 @@
 import Card from '@components/Card';
 import Image from '@components/Image';
+import { classNames } from '@components/utils';
 
 interface Props {
   src?: string;
   title?: string;
   alt?: string;
+  className?: string;
 }
 
-const ImageCard = ({ src, title, alt }: Props): JSX.Element => {
+const ImageCard = ({ src, title, alt, className }: Props): JSX.Element => {
   if (!src) {
     return (
       <Image
@@ -20,7 +22,11 @@ const ImageCard = ({ src, title, alt }: Props): JSX.Element => {
   }
 
   return (
-    <Card size="small" cover={<Image src={src} alt={alt} />}>
+    <Card
+      size="small"
+      cover={<Image src={src} alt={alt} />}
+      className={classNames(className, 'text-center')}
+    >
       <Card.Meta title={title} description={alt} />
     </Card>
   );
diff --git a/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap b/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap
index c309ebae7..3c0cf42b1 100644
--- a/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap
+++ b/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ImageCard should render local image correctly (snapshot) 1`] = `
 <div>
   <div
-    class="ant-card ant-card-bordered ant-card-small"
+    class="ant-card ant-card-bordered ant-card-small text-center"
   >
     <div
       class="ant-card-cover"
diff --git a/components/Paragraph/Paragraph.tsx b/components/Paragraph/Paragraph.tsx
index 6ae197d94..c1cc95106 100644
--- a/components/Paragraph/Paragraph.tsx
+++ b/components/Paragraph/Paragraph.tsx
@@ -1,13 +1,18 @@
+import { classNames } from '@components/utils';
 import { Typography } from 'antd';
 import type { ReactNode } from 'react';
 
 interface Props {
   children?: ReactNode;
+  className?: string;
 }
 
-const Paragraph = ({ children, ...props }: Props): JSX.Element => (
-  <Typography.Paragraph {...props}>
-    <p className="mt-0 mb-9 leading-relaxed tracking-wide">{children}</p>
+const Paragraph = ({ children, className, ...props }: Props): JSX.Element => (
+  <Typography.Paragraph
+    {...props}
+    className={classNames(className, 'mt-0 mb-9 leading-relaxed tracking-wide')}
+  >
+    {children}
   </Typography.Paragraph>
 );