diff --git a/src/components/activity/ActivityLog.tsx b/src/components/activity/ActivityLog.tsx
index 001d05a..c3e5431 100644
--- a/src/components/activity/ActivityLog.tsx
+++ b/src/components/activity/ActivityLog.tsx
@@ -346,10 +346,10 @@ export function ActivityLog() {
   /* ------------------------------ UI ------------------------------ */
 
   return (
-    <div className='flex flex-col gap-y-8'>
-      <div className='flex w-full flex-row items-center gap-4'>
+    <div className='flex flex-col gap-y-4 sm:gap-y-8'>
+      <div className='flex w-full flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4'>
         {/* search input */}
-        <div className='relative flex-1'>
+        <div className='relative w-full sm:flex-1'>
           <Search className='absolute left-2 top-2.5 h-4 w-4 text-muted-foreground' />
           <input
             type='text'
@@ -365,93 +365,102 @@ export function ActivityLog() {
           />
         </div>
 
-        {/* status select */}
-        <Select
-          value={filter.status || 'all'}
-          onValueChange={(v) =>
-            setFilter((p) => ({
-              ...p,
-              status: v === 'all' ? '' : (v as RepoStatus),
-            }))
-          }
-        >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
-            <SelectValue placeholder='All Status' />
-          </SelectTrigger>
-          <SelectContent>
-            {['all', ...repoStatusEnum.options].map((s) => (
-              <SelectItem key={s} value={s}>
-                {s === 'all' ? 'All Status' : s[0].toUpperCase() + s.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* Filter controls row */}
+        <div className='flex flex-row items-center gap-2 w-full sm:w-auto'>
+          {/* status select */}
+          <Select
+            value={filter.status || 'all'}
+            onValueChange={(v) =>
+              setFilter((p) => ({
+                ...p,
+                status: v === 'all' ? '' : (v as RepoStatus),
+              }))
+            }
+          >
+            <SelectTrigger className='h-9 w-full sm:w-[140px] max-h-9'>
+              <SelectValue placeholder='All Status' />
+            </SelectTrigger>
+            <SelectContent>
+              {['all', ...repoStatusEnum.options].map((s) => (
+                <SelectItem key={s} value={s}>
+                  {s === 'all' ? 'All Status' : s[0].toUpperCase() + s.slice(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
 
-        {/* repo/org name combobox */}
-        <ActivityNameCombobox
-          activities={activities}
-          value={filter.name || ''}
-          onChange={(name) => setFilter((p) => ({ ...p, name }))}
-        />
+          {/* type select - hidden on mobile */}
+          <Select
+            value={filter.type || 'all'}
+            onValueChange={(v) =>
+              setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
+            }
+          >
+            <SelectTrigger className='h-9 w-[140px] max-h-9 hidden sm:flex'>
+              <SelectValue placeholder='All Types' />
+            </SelectTrigger>
+            <SelectContent>
+              {['all', 'repository', 'organization'].map((t) => (
+                <SelectItem key={t} value={t}>
+                  {t === 'all' ? 'All Types' : t[0].toUpperCase() + t.slice(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
-        {/* type select */}
-        <Select
-          value={filter.type || 'all'}
-          onValueChange={(v) =>
-            setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
-          }
-        >
-          <SelectTrigger className='h-9 w-[140px] max-h-9'>
-            <SelectValue placeholder='All Types' />
-          </SelectTrigger>
-          <SelectContent>
-            {['all', 'repository', 'organization'].map((t) => (
-              <SelectItem key={t} value={t}>
-                {t === 'all' ? 'All Types' : t[0].toUpperCase() + t.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* repo/org name combobox - hidden on mobile */}
+        <div className='hidden sm:block'>
+          <ActivityNameCombobox
+            activities={activities}
+            value={filter.name || ''}
+            onChange={(name) => setFilter((p) => ({ ...p, name }))}
+          />
+        </div>
 
-        {/* export dropdown */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant='outline' className='flex items-center gap-1'>
-              <Download className='mr-1 h-4 w-4' />
-              Export
-              <ChevronDown className='ml-1 h-4 w-4' />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={exportAsCSV}>
-              Export as CSV
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={exportAsJSON}>
-              Export as JSON
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        {/* Action buttons row */}
+        <div className='flex items-center gap-2 ml-auto'>
+          {/* export dropdown - text hidden on mobile */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant='outline' size='sm' className='flex items-center gap-1'>
+                <Download className='h-4 w-4' />
+                <span className='hidden sm:inline'>Export</span>
+                <ChevronDown className='h-4 w-4 hidden sm:inline' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onClick={exportAsCSV}>
+                Export as CSV
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={exportAsJSON}>
+                Export as JSON
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
 
-        {/* refresh */}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => fetchActivities(false)} // Manual refresh, show loading skeleton
-          title="Refresh activity log"
-        >
-          <RefreshCw className='h-4 w-4' />
-        </Button>
+          {/* refresh */}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => fetchActivities(false)} // Manual refresh, show loading skeleton
+            title="Refresh activity log"
+            className='h-8 w-8 sm:h-9 sm:w-9'
+          >
+            <RefreshCw className='h-4 w-4' />
+          </Button>
 
-        {/* cleanup all activities */}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleCleanupClick}
-          title="Delete all activities"
-          className="text-destructive hover:text-destructive"
-        >
-          <Trash2 className='h-4 w-4' />
-        </Button>
+          {/* cleanup all activities */}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleCleanupClick}
+            title="Delete all activities"
+            className="text-destructive hover:text-destructive h-8 w-8 sm:h-9 sm:w-9"
+          >
+            <Trash2 className='h-4 w-4' />
+          </Button>
+        </div>
       </div>
 
       {/* activity list */}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e34b482..3eea9c1 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -7,7 +7,13 @@ import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useLiveRefresh } from "@/hooks/useLiveRefresh";
 import { useConfigStatus } from "@/hooks/useConfigStatus";
-import { Menu } from "lucide-react";
+import { Menu, LogOut } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface HeaderProps {
   currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
@@ -60,9 +66,9 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
         <div className="flex items-center gap-2">
           {/* Hamburger Menu Button - Mobile Only */}
           <Button
-            variant="ghost"
-            size="sm"
-            className="lg:hidden p-2"
+            variant="outline"
+            size="lg"
+            className="lg:hidden"
             onClick={onMenuClick}
           >
             <Menu className="h-5 w-5" />
@@ -96,12 +102,12 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
           {showLiveButton && (
             <Button
               variant="outline"
-              size="sm"
-              className="flex items-center gap-2 sm:px-4"
+              size="lg"
+              className="flex items-center gap-1.5 px-3 sm:px-4"
               onClick={toggleLive}
               title={getTooltip()}
             >
-              <div className={`w-3 h-3 rounded-full ${
+              <div className={`size-4 sm:size-3 rounded-full ${
                 configLoading
                   ? 'bg-yellow-400 animate-pulse'
                   : isLiveActive
@@ -110,7 +116,7 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
                       ? 'bg-orange-400'
                       : 'bg-gray-500'
               }`} />
-              <span className="hidden sm:inline">LIVE</span>
+              <span className="text-sm font-medium hidden sm:inline">LIVE</span>
             </Button>
           )}
 
@@ -120,15 +126,40 @@ export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
             <AuthButtonsSkeleton />
           ) : user ? (
             <>
-              <Avatar>
-                <AvatarImage src="" alt="@shadcn" />
-                <AvatarFallback>
-                  {user.username.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <Button variant="outline" size="sm" onClick={handleLogout} className="hidden sm:inline-flex">
-                Logout
-              </Button>
+              {/* Desktop: Show avatar and logout button */}
+              <div className="hidden sm:flex sm:items-center sm:gap-4">
+                <Avatar>
+                  <AvatarImage src="" alt="@shadcn" />
+                  <AvatarFallback>
+                    {user.username.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <Button variant="outline" size="sm" onClick={handleLogout}>
+                  Logout
+                </Button>
+              </div>
+              
+              {/* Mobile: Avatar with dropdown */}
+              <div className="sm:hidden">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="lg" className="relative h-10 w-10 rounded-full p-0">
+                      <Avatar className="h-full w-full">
+                        <AvatarImage src="" alt="@shadcn" />
+                        <AvatarFallback>
+                          {user.username.charAt(0).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48">
+                    <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
+                      <LogOut className="h-4 w-4 mr-2" />
+                      Logout
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             </>
           ) : (
             <Button variant="outline" size="sm" asChild>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 29b81cd..edc2dc0 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -78,7 +78,7 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
         )}
       >
         <div className="flex flex-col h-full pt-4">
-          <nav className="flex flex-col gap-y-1 pl-2 pr-3">
+          <nav className="flex flex-col gap-y-1 lg:gap-y-1 pl-2 pr-3">
             {links.map((link, index) => {
               const isActive = currentPath === link.href;
               const Icon = link.icon;
@@ -88,13 +88,13 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
                   key={index}
                   onClick={(e) => handleNavigation(link.href, e)}
                   className={cn(
-                    "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors w-full text-left",
+                    "flex items-center gap-3 rounded-md px-3 py-3 lg:py-2 text-sm lg:text-sm font-medium transition-colors w-full text-left",
                     isActive
                       ? "bg-primary text-primary-foreground"
                       : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   )}
                 >
-                  <Icon className="h-4 w-4" />
+                  <Icon className="h-5 w-5 lg:h-4 lg:w-4" />
                   {link.label}
                 </button>
               );
@@ -102,19 +102,19 @@ export function Sidebar({ className, onNavigate, isOpen, onClose }: SidebarProps
           </nav>
 
           <div className="mt-auto px-4 py-4">
-            <div className="rounded-md bg-muted p-3">
+            <div className="rounded-md bg-muted p-3 lg:p-3">
               <h4 className="text-sm font-medium mb-2">Need Help?</h4>
-              <p className="text-xs text-muted-foreground mb-2">
+              <p className="text-xs text-muted-foreground mb-3 lg:mb-2">
                 Check out the documentation for help with setup and configuration.
               </p>
               <a
                 href="/docs"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1 text-xs text-primary hover:underline"
+                className="inline-flex items-center gap-1.5 text-xs lg:text-xs text-primary hover:underline py-2 lg:py-0"
               >
                 Documentation
-                <ExternalLink className="h-3 w-3" />
+                <ExternalLink className="h-3.5 w-3.5 lg:h-3 lg:w-3" />
               </a>
             </div>
             <VersionInfo />
diff --git a/src/components/organizations/AddOrganizationDialog.tsx b/src/components/organizations/AddOrganizationDialog.tsx
index f2e50c3..8d85ab1 100644
--- a/src/components/organizations/AddOrganizationDialog.tsx
+++ b/src/components/organizations/AddOrganizationDialog.tsx
@@ -63,12 +63,12 @@ export default function AddOrganizationDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Organization</DialogTitle>
           <DialogDescription>
diff --git a/src/components/organizations/Organization.tsx b/src/components/organizations/Organization.tsx
index 4c3c123..78b28fb 100644
--- a/src/components/organizations/Organization.tsx
+++ b/src/components/organizations/Organization.tsx
@@ -293,10 +293,10 @@ export function Organization() {
 
 
   return (
-    <div className="flex flex-col gap-y-8">
-      {/* Combine search and actions into a single flex row */}
-      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
-        <div className="relative flex-grow">
+    <div className="flex flex-col gap-y-4 sm:gap-y-8">
+      {/* Search and filters */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full">
+        <div className="relative w-full sm:flex-grow">
           <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
           <input
             type="text"
@@ -309,91 +309,101 @@ export function Organization() {
           />
         </div>
 
-        {/* Membership Role Filter */}
-        <Select
-          value={filter.membershipRole || "all"}
-          onValueChange={(value) =>
-            setFilter((prev) => ({
-              ...prev,
-              membershipRole: value === "all" ? "" : (value as MembershipRole),
-            }))
-          }
-        >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
-            <SelectValue placeholder="All Roles" />
-          </SelectTrigger>
-          <SelectContent>
-            {["all", ...membershipRoleEnum.options].map((role) => (
-              <SelectItem key={role} value={role}>
-                {role === "all"
-                  ? "All Roles"
-                  : role
-                      .replace(/_/g, " ")
-                      .replace(/\b\w/g, (c) => c.toUpperCase())}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        {/* Filter controls */}
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          {/* Membership Role Filter */}
+          <Select
+            value={filter.membershipRole || "all"}
+            onValueChange={(value) =>
+              setFilter((prev) => ({
+                ...prev,
+                membershipRole: value === "all" ? "" : (value as MembershipRole),
+              }))
+            }
+          >
+            <SelectTrigger className="w-full sm:w-[140px] h-9 max-h-9">
+              <SelectValue placeholder="All Roles" />
+            </SelectTrigger>
+            <SelectContent>
+              {["all", ...membershipRoleEnum.options].map((role) => (
+                <SelectItem key={role} value={role}>
+                  {role === "all"
+                    ? "All Roles"
+                    : role
+                        .replace(/_/g, " ")
+                        .replace(/\b\w/g, (c) => c.toUpperCase())}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
 
-        {/* Status Filter */}
-        <Select
-          value={filter.status || "all"}
-          onValueChange={(value) =>
-            setFilter((prev) => ({
-              ...prev,
-              status:
-                value === "all"
-                  ? ""
-                  : (value as
-                      | ""
-                      | "imported"
-                      | "mirroring"
-                      | "mirrored"
-                      | "failed"
-                      | "syncing"
-                      | "synced"),
-            }))
-          }
-        >
-          <SelectTrigger className="w-[140px] h-9 max-h-9">
-            <SelectValue placeholder="All Statuses" />
-          </SelectTrigger>
-          <SelectContent>
-            {[
-              "all",
-              "imported",
-              "mirroring",
-              "mirrored",
-              "failed",
-              "syncing",
-              "synced",
-            ].map((status) => (
-              <SelectItem key={status} value={status}>
-                {status === "all"
-                  ? "All Statuses"
-                  : status.charAt(0).toUpperCase() + status.slice(1)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          {/* Status Filter */}
+          <Select
+            value={filter.status || "all"}
+            onValueChange={(value) =>
+              setFilter((prev) => ({
+                ...prev,
+                status:
+                  value === "all"
+                    ? ""
+                    : (value as
+                        | ""
+                        | "imported"
+                        | "mirroring"
+                        | "mirrored"
+                        | "failed"
+                        | "syncing"
+                        | "synced"),
+              }))
+            }
+          >
+            <SelectTrigger className="w-full sm:w-[140px] h-9 max-h-9">
+              <SelectValue placeholder="All Statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              {[
+                "all",
+                "imported",
+                "mirroring",
+                "mirrored",
+                "failed",
+                "syncing",
+                "synced",
+              ].map((status) => (
+                <SelectItem key={status} value={status}>
+                  {status === "all"
+                    ? "All Statuses"
+                    : status.charAt(0).toUpperCase() + status.slice(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleRefresh}
-          title="Refresh organizations"
-        >
-          <RefreshCw className="h-4 w-4" />
-        </Button>
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 ml-auto">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleRefresh}
+            title="Refresh organizations"
+            className="h-8 w-8 sm:h-9 sm:w-9"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
 
-        <Button
-          variant="default"
-          onClick={handleMirrorAllOrgs}
-          disabled={isLoading || loadingOrgIds.size > 0}
-        >
-          <FlipHorizontal className="h-4 w-4 mr-2" />
-          Mirror All
-        </Button>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleMirrorAllOrgs}
+            disabled={isLoading || loadingOrgIds.size > 0}
+            className="sm:size-default"
+          >
+            <FlipHorizontal className="h-4 w-4 mr-2" />
+            <span className="hidden sm:inline">Mirror All</span>
+            <span className="sm:hidden">Mirror</span>
+          </Button>
+        </div>
       </div>
 
       <OrganizationList
diff --git a/src/components/repositories/AddRepositoryDialog.tsx b/src/components/repositories/AddRepositoryDialog.tsx
index 73e572b..f44ec5a 100644
--- a/src/components/repositories/AddRepositoryDialog.tsx
+++ b/src/components/repositories/AddRepositoryDialog.tsx
@@ -60,12 +60,12 @@ export default function AddRepositoryDialog({
   return (
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
-        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+        <Button className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 rounded-full h-12 w-12 shadow-lg p-0 z-10">
           <Plus className="h-6 w-6" />
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+      <DialogContent className="w-[calc(100%-2rem)] sm:max-w-[425px] gap-0 gap-y-6 mx-4 sm:mx-0">
         <DialogHeader>
           <DialogTitle>Add Repository</DialogTitle>
           <DialogDescription>