diff --git a/src/app/ui/page.tsx b/src/app/ui/page.tsx
index b642a31a..1e1f3e91 100644
--- a/src/app/ui/page.tsx
+++ b/src/app/ui/page.tsx
@@ -1,12 +1,20 @@
-import { Button, buttonSizes, buttonVariants } from "@/components/ui";
+import {
+  Button,
+  buttonSizes,
+  buttonVariants,
+  Card,
+  cardVariants,
+} from "@/components/ui";
 import { NextPage } from "next";
 
 const Page: NextPage = () => {
   return (
     <>
-      <div className="flex flex-col items-center p-14 gap-14">
-        <h1 className="text-3xl font-bold text-center">Ledgity DApp UI kit</h1>
-        <div className="flex w-screen p-8">
+      <div className="flex flex-col items-center p-14">
+        <h1 className="text-3xl font-bold text-center mb-12">
+          Ledgity DApp UI kit
+        </h1>
+        <div className="flex w-screen p-12 gap-12">
           <section>
             <h2 className="text-2xl text-center font-semibold">Buttons</h2>
             <div className="p-2">
@@ -21,6 +29,23 @@ const Page: NextPage = () => {
               ))}
             </div>
           </section>
+          <section>
+            <h2 className="text-2xl text-center font-semibold">Cards</h2>
+            <div className="p-2">
+              {cardVariants.map((variant, index) => (
+                <Card variant={variant} key={index} className="max-w-lg">
+                  <h3 className="font-bold text-xl text-center">{variant}</h3>
+                  <br />
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  </p>
+                </Card>
+              ))}
+            </div>
+          </section>
         </div>
       </div>
     </>
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 120989f0..5e024a3f 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,2 +1,3 @@
 export * from "./Button";
-export * from "./Scroller";
\ No newline at end of file
+export * from "./Scroller";
+export * from "./Card";
\ No newline at end of file