diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index 9daa351..39420c9 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -5,7 +5,6 @@ import { getClient } from "@/lib/ApolloClient";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import Link from "next/link";
 import Image from "next/image";
-import BlockRendererClient from "@/components/BlockRendererClient";
 const HOST_URL = process.env.HOST_URL;
 
 const GET_PROJECTS = gql(`
@@ -55,13 +54,15 @@ export default async function ProjectsPage() {
     }
 
     return (
-        <div className="flex flex-col items-center justify-center">
-            <h1 className="text-4xl font-extrabold ">Our Projects</h1>
-            <p className="text-sm text-muted-foreground">
-                Information about our various projects are shown here.
-            </p>
+        <div>
+            <div className="flex flex-col items-center justify-center">
+                <h1 className="text-4xl font-extrabold ">Our Projects</h1>
+                <p className="text-sm text-muted-foreground">
+                    Information about our various projects are shown here.
+                </p>
+            </div>
 
-            <div className="mt-4 flex flex-col items-center justify-center gap-4">
+            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData.data.projects.data.map((project) => {
                     let coverImage =
                         project?.attributes?.coverImage?.data?.attributes?.url;
@@ -72,39 +73,47 @@ export default async function ProjectsPage() {
                     let content: BlocksContent =
                         project?.attributes?.article ?? [];
 
+                    let text = "";
+
                     for (const block of content) {
                         if (block.type === "paragraph") {
-                            content = [block];
+                            const paragraphBlock = block as {
+                                type: "paragraph";
+                                children: { type: "text"; text: string }[];
+                            };
+
+                            text =
+                                paragraphBlock.children[0].text.slice(0, 100) +
+                                "...";
+
                             break;
                         }
                     }
                     return (
-                        <Card className="w-1/2" key={project.id}>
-                            <CardHeader>
-                                <CardTitle>
-                                    <Link
-                                        className="hover:underline"
-                                        href={
-                                            "/projects/" +
-                                            project?.attributes?.slug
-                                        }
-                                    >
+                        <Link
+                            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+                            href={"/projects/" + project?.attributes?.slug}
+                            key={project.id}
+                        >
+                            <Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
+                                <CardHeader></CardHeader>
+                                <CardContent>
+                                    {coverImage && (
+                                        <Image
+                                            className="h-36"
+                                            src={coverImage}
+                                            alt={coverImage}
+                                            width={500}
+                                            height={0}
+                                        />
+                                    )}
+                                    <CardTitle className="mb-2 mt-2 text-xl font-bold">
                                         {project?.attributes?.title}
-                                    </Link>
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                {coverImage && (
-                                    <Image
-                                        src={coverImage}
-                                        alt={coverImage}
-                                        width={500}
-                                        height={0} // Set height to 0 to maintain aspect ratio
-                                    />
-                                )}
-                                <BlockRendererClient content={content} />
-                            </CardContent>
-                        </Card>
+                                    </CardTitle>
+                                    <p className="break-words">{text}</p>
+                                </CardContent>
+                            </Card>
+                        </Link>
                     );
                 })}
             </div>
diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx
index 02c14da..99ee21c 100644
--- a/frontend/src/components/BlockRendererClient.tsx
+++ b/frontend/src/components/BlockRendererClient.tsx
@@ -54,7 +54,7 @@ export default function BlockRendererClient({
 
                 paragraph: ({ children }) => (
                     <>
-                        <p className="">{children}</p>
+                        <p className="break-words">{children}</p>
                         <br />
                     </>
                 ),