diff --git a/src/app/page.tsx b/src/app/page.tsx
index c8de23e..bfc0ee0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,8 +15,8 @@ export default function Home() {
   return (
     <main>
       <div className="flex flex-row bg-slate-100 dark:bg-gray-800">
-        <div className="flex flex-col w-3/5  bg-red-500">
-          <span className="px-28 py-20">
+        <div className="flex flex-col w-3/5">
+          <span className="px-10 md:px-28 py-10 md:py-20">
             <p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p>
             <span className="text-sm md:text-lg">
               <p>
@@ -42,36 +42,36 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="flex flex-row gap-10 justify-center mt-5">
+      <div className="flex flex-row gap-0 md:gap-10 justify-start md:justify-center mt-3 md:mt-5">
         <Card className="border-0 shadow-none">
           <CardHeader>
-            <CardTitle>100M+</CardTitle>
+            <CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
             <CardDescription>Global investor community</CardDescription>
           </CardHeader>
         </Card>
         <Card className="border-0 shadow-none">
           <CardHeader>
-            <CardTitle>2,500+</CardTitle>
+            <CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
             <CardDescription>Ventures supported</CardDescription>
           </CardHeader>
         </Card>
         <Card className="border-0 shadow-none">
           <CardHeader>
-            <CardTitle>$2.6B+</CardTitle>
+            <CardTitle className="text-lg md:text-2xl">$2.6B+</CardTitle>
             <CardDescription>Capital raised</CardDescription>
           </CardHeader>
         </Card>
         <Card className="border-0 shadow-none">
           <CardHeader className="pb-2">
-            <CardTitle>Follow Us</CardTitle>
+            <CardTitle className="text-lg md:text-2xl">Follow Us</CardTitle>
           </CardHeader>
           <CardContent className="flex gap-2">
-            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground">
-              <Image src={"/github.svg"} width={20} height={20} alt="github" />
+            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
+              <Image src={"/github.svg"} width={20} height={20} alt="github"  className="scale-75 md:scale-100"/>
               Github
             </Button>
-            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground">
-              <Image src={"/github.svg"} width={20} height={20} alt="github" />
+            <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
+              <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100"/>
               Github
             </Button>
           </CardContent>
@@ -80,10 +80,10 @@ export default function Home() {
 
       <Separator className="mb-6" />
 
-      <div className="flex flex-col px-28">
+      <div className="flex flex-col px-10 md:px-28">
         <span className="pb-5">
-          <p className="text-2xl font-bold">Hottest Deals</p>
-          <p className="text-lg">
+          <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
+          <p className="text-md md:text-lg">
             The deals attracting the most interest right now
           </p>
         </span>
@@ -139,7 +139,7 @@ export default function Home() {
             totalRaised={1500000}
           />
         </div>
-        <div className="self-center py-5">
+        <div className="self-center py-5 scale-75 md:scale-100">
           <Button>
             <Link href={"/deals"}>View all</Link>
           </Button>
diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx
index f266e69..8f5df5e 100644
--- a/src/components/extendableCard.tsx
+++ b/src/components/extendableCard.tsx
@@ -19,7 +19,7 @@ interface ExtendableCardProps {
 
 export function ExtendableCard(props: ExtendableCardProps) {
   return (
-    <div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg">
+    <div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg ">
       <div className="aspect-[4/3] overflow-hidden">
         <img
           src="/money.png"
@@ -30,26 +30,26 @@ export function ExtendableCard(props: ExtendableCardProps) {
           style={{ aspectRatio: "400/300", objectFit: "cover" }}
         />
       </div>
-      <div className="p-4">
-        <h3 className="text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
+      <div className="p-1 md:p-4">
+        <div className="text-sm md:text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
           {props.name}
-        </h3>
+        </div>
 
         {/* Default content (visible when not hovered) */}
         <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
           <span className="flex items-center pt-2 gap-1">
             <CalendarDaysIcon width={20} />
-            Joined {props.joinDate}
+            <div className="text-xs md:text-lg">Joined {props.joinDate}</div>
           </span>
         </div>
         <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
-          <span className="text-sm">{props.location}</span>
+          <span className="text-xs md:text-sm">{props.location}</span>
         </div>
         <div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
           {["Technology", "Gaming"].map((tag) => (
             <span
               key={tag}
-              className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
+              className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
             >
               {tag}
             </span>
@@ -58,22 +58,24 @@ export function ExtendableCard(props: ExtendableCardProps) {
 
         {/* Hover content (appears when hovered) */}
         <div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out">
-          <p className="text-sm text-muted-foreground">{props.description}</p>
+          <p className="text-xs md:text-sm text-muted-foreground">
+            {props.description}
+          </p>
           <div className="mt-4 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <div>
                 <hr className="w-screen -ml-4 mb-2" />
-                <p>
+                <p className="text-xs md:text-base">
                   <strong>${props.totalRaised.toLocaleString()}</strong>{" "}
                   committed and reserved
                 </p>
                 <hr className="w-screen -ml-4 mb-2 mt-2" />
-                <p className="mb-2">
+                <p className="mb-2 text-xs md:text-base">
                   <strong>{props.totalInvestor.toLocaleString()}</strong>{" "}
                   investors
                 </p>
                 <hr className="w-screen -ml-4 mb-2" />
-                <p>
+                <p className="text-xs md:text-base">
                   <strong>${props.minInvestment.toLocaleString()}</strong> min.
                   investment
                 </p>