diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 7c54cd7..0297b52 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -1,6 +1,9 @@
 import logoWhite from "@assets/logo_white_1759167910147.png";
+import { useLocation } from "wouter";
 
 export default function Footer() {
+  const [, setLocation] = useLocation();
+  
   return (
     <footer className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 z-40">
         <div className="max-w-7xl mx-auto px-4 py-4">
@@ -10,8 +13,9 @@ export default function Footer() {
               <img 
                 src={logoWhite} 
                 alt="SAPIENS" 
-                className="h-5"
+                className="h-5 cursor-pointer hover:opacity-80 transition-opacity"
                 data-testid="footer-logo"
+                onClick={() => setLocation("/")}
               />
             </div>
             <div className="flex items-center">
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index aa0179b..ec8715b 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -20,6 +20,7 @@ export default function MainContent() {
   const { user } = useAuth();
   const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
   const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
     queryKey: ["/api/media-outlets"],
@@ -170,11 +171,32 @@ export default function MainContent() {
               </div>
             ))}
           </div>
+        ) : selectedCategory ? (
+          <div>
+            <div className="flex items-center mb-4">
+              <h2 className="text-2xl font-bold text-gray-900 cursor-pointer hover:text-blue-600">
+                {selectedCategory} 
+                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory(selectedCategory).length})</span>
+              </h2>
+              <button 
+                onClick={() => setSelectedCategory(null)}
+                className="ml-4 text-sm text-blue-600 hover:text-blue-800"
+              >
+                View All Categories
+              </button>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {getOutletsByCategory(selectedCategory).map(renderOutletCard)}
+            </div>
+          </div>
         ) : (
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* People Section */}
             <div data-testid="section-people">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("People")}
+              >
                 People 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
               </h2>
@@ -185,7 +207,10 @@ export default function MainContent() {
 
             {/* Topics Section */}
             <div data-testid="section-topics">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("Topics")}
+              >
                 Topics 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
               </h2>
@@ -196,7 +221,10 @@ export default function MainContent() {
 
             {/* Companies Section */}
             <div data-testid="section-companies">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("Companies")}
+              >
                 Companies 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
               </h2>
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 7bc977f..96420c9 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -343,7 +343,7 @@ export default function MediaOutlet() {
           </div>
 
           {articlesLoading ? (
-            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}>
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse">
                   <div className="h-40 bg-gray-200 rounded mb-4"></div>
@@ -353,7 +353,7 @@ export default function MediaOutlet() {
               ))}
             </div>
           ) : articles.length > 0 ? (
-            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}>
               {articles.map((article) => (
                 <ArticleCard 
                   key={article.id}