diff --git a/Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx b/Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx
index e50317b..3253283 100644
--- a/Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx
+++ b/Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx
@@ -33,19 +33,21 @@ const getAudienceMatchColor = (level: string) => {
 
 // New subcomponents for readability and maintainability
 const CreatorStats: React.FC<{followers: string, engagement: string, content: string, collabs: number}> = ({ followers, engagement, content, collabs }) => (
-  <div className="grid grid-cols-2 gap-2 text-xs text-gray-700 w-full mb-2">
-    <div><span className="font-semibold">Followers</span><br />{followers}</div>
-    <div><span className="font-semibold">Engagement</span><br />{engagement}</div>
-    <div><span className="font-semibold">Content</span><br />{content}</div>
-    <div><span className="font-semibold">Collabs</span><br />{collabs} completed</div>
+  <div className="grid grid-cols-2 gap-3 text-xs text-gray-700 w-full mb-3">
+    <div className="space-y-1"><span className="font-semibold block">Followers</span><span className="block">{followers}</span></div>
+    <div className="space-y-1"><span className="font-semibold block">Engagement</span><span className="block">{engagement}</span></div>
+    <div className="space-y-1"><span className="font-semibold block">Content</span><span className="block truncate">{content}</span></div>
+    <div className="space-y-1"><span className="font-semibold block">Collabs</span><span className="block">{collabs} completed</span></div>
   </div>
 );
 
 const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
-  <div className="flex items-center gap-2 w-full justify-center mb-2">
-    <span className="text-xs text-gray-500">Audience Match</span>
-    <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
-    <div className="flex-1 h-2 rounded bg-gray-200 mx-2 min-w-[60px] max-w-[80px]" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
+  <div className="w-full mb-3 space-y-2">
+    <div className="flex items-center justify-between">
+      <span className="text-xs text-gray-500">Audience Match</span>
+      <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
+    </div>
+    <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
       <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} />
     </div>
   </div>
diff --git a/Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx b/Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx
index 57c1f01..6d36ba6 100644
--- a/Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx
+++ b/Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx
@@ -17,7 +17,7 @@ const CreatorMatchGrid: React.FC<CreatorMatchGridProps> = ({ creators }) => {
 
   return (
     <div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 justify-items-center">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 justify-items-center">
         {currentCreators.map((creator) => (
           <CreatorMatchCard key={creator.id} {...creator} />
         ))}
diff --git a/Frontend/src/pages/Collaborations.tsx b/Frontend/src/pages/Collaborations.tsx
index dbbbbc8..aeb67f1 100644
--- a/Frontend/src/pages/Collaborations.tsx
+++ b/Frontend/src/pages/Collaborations.tsx
@@ -20,7 +20,7 @@ import { mockCollabIdeas, mockRequestTexts } from "../components/collaboration-h
 import NewCollaborationModal from "../components/collaboration-hub/NewCollaborationModal";
 import CreatorSearchModal from "../components/collaboration-hub/CreatorSearchModal";
 
-export default function CollaborationsPage({ showHeader = true }: { showHeader?: boolean }) {
+export default function CollaborationsPage({ showHeader = true, compact = false }: { showHeader?: boolean; compact?: boolean }) {
   const {
     modals,
     filters,
@@ -91,8 +91,9 @@ export default function CollaborationsPage({ showHeader = true }: { showHeader?:
         </header>
       )}
       <main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
+        <div className={compact ? "w-full" : "grid grid-cols-1 md:grid-cols-4 gap-6 items-start"}>
           {/* Filter Sidebar */}
+          {!compact && (
           <Card className="md:col-span-1">
             <CardHeader>
               <CardTitle className="text-gray-900">Filters</CardTitle>
@@ -184,8 +185,9 @@ export default function CollaborationsPage({ showHeader = true }: { showHeader?:
               )}
             </CardContent>
           </Card>
+          )}
           {/* Main Content */}
-          <div className="md:col-span-3 pl-0 md:pl-4 space-y-4 w-full">
+          <div className={compact ? "w-full space-y-4" : "md:col-span-3 pl-0 md:pl-4 space-y-4 w-full"}>
             {/* Tabs for AI Matches, Active Collabs, Requests */}
             <Tabs defaultValue="matches">
               <TabsList className="grid w-full grid-cols-3 bg-gray-100 mb-2">
diff --git a/Frontend/src/pages/DashboardPage.tsx b/Frontend/src/pages/DashboardPage.tsx
index e5a8fc2..3485363 100644
--- a/Frontend/src/pages/DashboardPage.tsx
+++ b/Frontend/src/pages/DashboardPage.tsx
@@ -190,7 +190,7 @@ export default function DashboardPage() {
                   <CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Creators with complementary audiences</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <CollaborationsPage />
+                  <CollaborationsPage compact={true} />
                 </CardContent>
               </Card>
             </div>