diff --git a/src/app/(default)/_components/buttons.tsx b/src/app/(default)/_components/buttons.tsx
index c36f15b..d04a742 100644
--- a/src/app/(default)/_components/buttons.tsx
+++ b/src/app/(default)/_components/buttons.tsx
@@ -1,5 +1,5 @@
+import { CopyButton } from '@/components/copy-button';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/components/ui/use-toast';
 import type { AsciiData, Height } from '@/types';
 import { createAscii } from '@/utils';
 import type { Dispatch, SetStateAction } from 'react';
@@ -16,16 +16,6 @@ export const Buttons = ({
   width: number;
   height: Height;
 }) => {
-  const { toast } = useToast();
-
-  const handleCopy = () => {
-    const asciiString = createAscii(asciiData, width, height);
-    navigator.clipboard.writeText(asciiString);
-    toast({
-      title: 'Copied to clipboard!',
-    });
-  };
-
   const handleDownload = () => {
     const asciiString = createAscii(asciiData, width, height);
     const element: HTMLAnchorElement = document.createElement('a');
@@ -45,7 +35,7 @@ export const Buttons = ({
     <div className='w-[390px] md:w-[750px] lg:w-[1000px] mx-auto my-8'>
       <div className='flex justify-between'>
         <div className='flex gap-4'>
-          <Button onClick={handleCopy}>Copy</Button>
+          <CopyButton asciiData={asciiData} width={width} height={height} />
           <Button onClick={handleDownload}>Download</Button>
           <ShareButton asciiData={asciiData} width={width} height={height} />
         </div>
diff --git a/src/app/(default)/community/page.tsx b/src/app/(default)/community/page.tsx
index f4e4013..02cd60a 100644
--- a/src/app/(default)/community/page.tsx
+++ b/src/app/(default)/community/page.tsx
@@ -1,49 +1,29 @@
-import { auth } from '@/auth';
+import { prisma } from '@/client';
+import { ArtCards, SkeletonCards } from '@/components/art-cards';
 import type { Metadata } from 'next';
 import { Suspense } from 'react';
 
-const SessionData = async () => {
-  const session = await auth();
-  if (session?.user) {
-    return (
-      <div className='flex flex-col gap-4 p-4 w-full rounded-md border-2'>
-        <h2 className='text-xl font-bold'>Current Session Data</h2>
-        {Object.keys(session.user).length > 3 ? (
-          <p>
-            In this example, the whole session object is passed to the page,
-            including the raw user object. Our recommendation is to{' '}
-            <em>only pass the necessary fields</em> to the page, as the raw user
-            object may contain sensitive information.
-          </p>
-        ) : (
-          <p>
-            In this example, only some fields in the user object is passed to
-            the page to avoid exposing sensitive information.
-          </p>
-        )}
-        <div className='flex flex-col rounded-md '>
-          <div className='p-4 font-bold rounded-t-md'>Session</div>
-          <pre className='py-6 px-4 whitespace-pre-wrap break-all'>
-            {JSON.stringify(session, null, 2)}
-          </pre>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <p className='p-4 w-full rounded-md border-2'>
-      No session data, please <em>Sign In</em> first.
-    </p>
-  );
+const ArtsList = async () => {
+  const arts = await prisma.art.findMany({
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+  return <ArtCards arts={arts} />;
 };
 
 const Page = () => {
   return (
-    <div className='container'>
-      <Suspense>
-        <SessionData />
-      </Suspense>
+    <div className='container mb-20'>
+      <div className='flex flex-col gap-4 my-4'>
+        <Suspense
+          fallback={Array(3)
+            .fill(null)
+            .map((i) => <SkeletonCards key={i} />)}
+        >
+          <ArtsList />
+        </Suspense>
+      </div>
     </div>
   );
 };
diff --git a/src/components/art-cards.tsx b/src/components/art-cards.tsx
index daaa32a..c381bce 100644
--- a/src/components/art-cards.tsx
+++ b/src/components/art-cards.tsx
@@ -1,3 +1,8 @@
+import { cn } from '@/lib/utils';
+import { formatDate, unflattenArray } from '@/utils';
+import { Art } from '@prisma/client';
+import { CopyButton } from './copy-button';
+import { PreviewCanvas } from './preview-canvas';
 import {
   Card,
   CardContent,
@@ -8,23 +13,53 @@ import {
 } from './ui/card';
 import { Skeleton } from './ui/skeleton';
 
-const ArtCard = () => {
+const ArtCard = ({ art }: { art: Art }) => {
+  const asciiData = unflattenArray(art.body, art.width);
+  const date = formatDate(art.createdAt);
+
   return (
-    <Card className='w-[350px]'>
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
+    <Card
+      className={cn(
+        art.width === 27 ? 'w-[606px]' : 'w-[586px]',
+        'px-8 mx-auto',
+      )}
+    >
+      <CardHeader className='mx-0 px-0'>
+        <CardTitle className='mx-0 px-0'>{art.title}</CardTitle>
+        <CardDescription className='m-0 p-0 flex justify-between'>
+          <p>{art.description}</p>
+          <p>{date}</p>
+        </CardDescription>
       </CardHeader>
-      <CardContent></CardContent>
-      <CardFooter className='flex justify-between'></CardFooter>
+      <CardContent className='mx-0 px-0'>
+        <PreviewCanvas
+          asciiData={asciiData}
+          width={art.width}
+          height={art.height}
+        />
+      </CardContent>
+      <CardFooter className='flex justify-between mx-0 px-0'>
+        <CopyButton
+          asciiData={asciiData}
+          width={art.width}
+          height={art.height}
+        />
+        {/* favorite button */}
+      </CardFooter>
     </Card>
   );
 };
 
-export const ArtCards = () => {
-  return <div>artcards</div>;
+export const ArtCards = ({ arts }: { arts: Art[] }) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {arts.map((art) => (
+        <ArtCard art={art} key={art.id} />
+      ))}
+    </div>
+  );
 };
 
 export const SkeletonCards = () => {
-  return <Skeleton />;
+  return <Skeleton className='w-[586px] h-[330px] mx-auto' />;
 };
diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
new file mode 100644
index 0000000..1a98d7a
--- /dev/null
+++ b/src/components/copy-button.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { AsciiData } from '@/types';
+import { createAscii } from '@/utils';
+import { Button } from './ui/button';
+import { useToast } from './ui/use-toast';
+
+export const CopyButton = ({
+  asciiData,
+  width,
+  height,
+}: { asciiData: AsciiData; width: number; height: number }) => {
+  const { toast } = useToast();
+  const handleCopy = () => {
+    const asciiString = createAscii(asciiData, width, height);
+    navigator.clipboard.writeText(asciiString);
+    toast({
+      title: 'Copied to clipboard!',
+    });
+  };
+
+  return <Button onClick={handleCopy}>Copy</Button>;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 52fbe60..9a72f3f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -20,8 +20,8 @@ export const flattenArray = (array: boolean[][]): boolean[] => array.flat();
 
 export const unflattenArray = (
   array: boolean[],
-  rows = 13,
   cols = 27,
+  rows = 13,
 ): boolean[][] => {
   const result: boolean[][] = [];
   for (let i = 0; i < rows; i++) {
@@ -29,3 +29,20 @@ export const unflattenArray = (
   }
   return result;
 };
+
+const getUserLocale = (): string => {
+  return navigator.language ?? 'en-US';
+};
+
+const getUserTimeZone = (): string => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC';
+};
+
+export const formatDate = (date: Date): string => {
+  const locale = getUserLocale();
+  const timeZone = getUserTimeZone();
+
+  return date.toLocaleDateString(locale, {
+    timeZone: timeZone,
+  });
+};