diff --git a/attached_assets/스크린샷 2025-09-30 오후 2.52.58_1759211582522.png b/attached_assets/스크린샷 2025-09-30 오후 2.52.58_1759211582522.png
new file mode 100644
index 0000000..8192fde
Binary files /dev/null and b/attached_assets/스크린샷 2025-09-30 오후 2.52.58_1759211582522.png differ
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 778182a..75496cd 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Textarea } from "@/components/ui/textarea";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit, Info } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/use-toast";
@@ -467,27 +468,45 @@ export default function MediaOutlet() {
         <div className="mb-4">
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-xl font-bold">Latest Articles</h2>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setViewMode("grid")}
-                className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
-                data-testid="button-grid-view"
-              >
-                <Grid className="h-4 w-4 mr-2" />
-                Grid
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setViewMode("list")}
-                className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
-                data-testid="button-list-view"
-              >
-                <List className="h-4 w-4 mr-2" />
-                List
-              </Button>
+            <div className="flex items-center space-x-2" role="group" aria-label="Article view mode">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setViewMode("grid")}
+                      className={viewMode === "grid" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
+                      aria-label="Grid view"
+                      aria-pressed={viewMode === "grid"}
+                      data-testid="button-grid-view"
+                    >
+                      <Grid className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Grid view</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setViewMode("list")}
+                      className={viewMode === "list" ? "bg-gray-600 text-white hover:bg-gray-700" : ""}
+                      aria-label="List view"
+                      aria-pressed={viewMode === "list"}
+                      data-testid="button-list-view"
+                    >
+                      <List className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>List view</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
           </div>