From a853d36a6f36a7ca3cd094cc0e6966cc302a03e0 Mon Sep 17 00:00:00 2001
From: Muhammad Ibrahim <ibrahim@99problems.office.9tg.local>
Date: Sat, 22 Nov 2025 14:34:53 +0000
Subject: [PATCH] Mobile fixes #1

---
 frontend/src/components/GlobalSearch.jsx |  55 ++--
 frontend/src/components/Layout.jsx       | 266 ++++++++++++++++--
 frontend/src/pages/Dashboard.jsx         | 115 ++++----
 frontend/src/pages/Hosts.jsx             | 344 +++++++++++++++++++----
 4 files changed, 622 insertions(+), 158 deletions(-)

diff --git a/frontend/src/components/GlobalSearch.jsx b/frontend/src/components/GlobalSearch.jsx
index d1f5c91..4166e84 100644
--- a/frontend/src/components/GlobalSearch.jsx
+++ b/frontend/src/components/GlobalSearch.jsx
@@ -215,7 +215,7 @@ const GlobalSearch = () => {
 				<input
 					ref={inputRef}
 					type="text"
-					className="block w-full rounded-lg border border-secondary-200 bg-white py-2 pl-10 pr-10 text-sm text-secondary-900 placeholder-secondary-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-secondary-600 dark:bg-secondary-700 dark:text-white dark:placeholder-secondary-400"
+					className="block w-full rounded-lg border border-secondary-200 bg-white py-2.5 sm:py-2 pl-10 pr-10 text-sm text-secondary-900 placeholder-secondary-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-secondary-600 dark:bg-secondary-700 dark:text-white dark:placeholder-secondary-400 min-h-[44px]"
 					placeholder="Search hosts, packages, repos, users..."
 					value={query}
 					onChange={handleInputChange}
@@ -228,7 +228,8 @@ const GlobalSearch = () => {
 					<button
 						type="button"
 						onClick={handleClear}
-						className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary-400 hover:text-secondary-600"
+						className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary-400 hover:text-secondary-600 min-w-[44px] min-h-[44px] justify-center"
+						aria-label="Clear search"
 					>
 						<X className="h-4 w-4" />
 					</button>
@@ -237,9 +238,9 @@ const GlobalSearch = () => {
 
 			{/* Dropdown Results */}
 			{isOpen && (
-				<div className="absolute z-50 mt-2 w-full rounded-lg border border-secondary-200 bg-white shadow-lg dark:border-secondary-600 dark:bg-secondary-800">
+				<div className="absolute z-50 mt-2 w-full sm:w-[calc(100vw-2rem)] sm:max-w-md rounded-lg border border-secondary-200 bg-white shadow-lg dark:border-secondary-600 dark:bg-secondary-800 left-0 sm:left-auto right-0 sm:right-auto">
 					{isLoading ? (
-						<div className="px-4 py-2 text-center text-sm text-secondary-500">
+						<div className="px-4 py-2 text-center text-sm text-secondary-500 dark:text-white/70">
 							Searching...
 						</div>
 					) : hasResults ? (
@@ -247,7 +248,7 @@ const GlobalSearch = () => {
 							{/* Hosts */}
 							{results.hosts?.length > 0 && (
 								<div>
-									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
+									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
 										Hosts
 									</div>
 									{results.hosts.map((host, _idx) => {
@@ -260,7 +261,7 @@ const GlobalSearch = () => {
 												type="button"
 												key={host.id}
 												onClick={() => handleResultClick(host)}
-												className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
+												className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
 													globalIdx === selectedIndex
 														? "bg-primary-50 dark:bg-primary-900/20"
 														: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -271,12 +272,14 @@ const GlobalSearch = () => {
 													<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
 														{display.primary}
 													</span>
-													<span className="text-xs text-secondary-400">•</span>
-													<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
+													<span className="text-xs text-secondary-400 dark:text-white/50">
+														•
+													</span>
+													<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
 														{display.secondary}
 													</span>
 												</div>
-												<div className="flex-shrink-0 text-xs text-secondary-400">
+												<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
 													{host.os_type}
 												</div>
 											</button>
@@ -288,7 +291,7 @@ const GlobalSearch = () => {
 							{/* Packages */}
 							{results.packages?.length > 0 && (
 								<div>
-									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
+									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
 										Packages
 									</div>
 									{results.packages.map((pkg, _idx) => {
@@ -301,7 +304,7 @@ const GlobalSearch = () => {
 												type="button"
 												key={pkg.id}
 												onClick={() => handleResultClick(pkg)}
-												className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
+												className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
 													globalIdx === selectedIndex
 														? "bg-primary-50 dark:bg-primary-900/20"
 														: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -317,13 +320,13 @@ const GlobalSearch = () => {
 															<span className="text-xs text-secondary-400">
 																•
 															</span>
-															<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
+															<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
 																{display.secondary}
 															</span>
 														</>
 													)}
 												</div>
-												<div className="flex-shrink-0 text-xs text-secondary-400">
+												<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
 													{pkg.host_count} hosts
 												</div>
 											</button>
@@ -335,7 +338,7 @@ const GlobalSearch = () => {
 							{/* Repositories */}
 							{results.repositories?.length > 0 && (
 								<div>
-									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
+									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
 										Repositories
 									</div>
 									{results.repositories.map((repo, _idx) => {
@@ -348,7 +351,7 @@ const GlobalSearch = () => {
 												type="button"
 												key={repo.id}
 												onClick={() => handleResultClick(repo)}
-												className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
+												className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
 													globalIdx === selectedIndex
 														? "bg-primary-50 dark:bg-primary-900/20"
 														: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -359,12 +362,14 @@ const GlobalSearch = () => {
 													<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
 														{display.primary}
 													</span>
-													<span className="text-xs text-secondary-400">•</span>
-													<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
+													<span className="text-xs text-secondary-400 dark:text-white/50">
+														•
+													</span>
+													<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
 														{display.secondary}
 													</span>
 												</div>
-												<div className="flex-shrink-0 text-xs text-secondary-400">
+												<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
 													{repo.host_count} hosts
 												</div>
 											</button>
@@ -376,7 +381,7 @@ const GlobalSearch = () => {
 							{/* Users */}
 							{results.users?.length > 0 && (
 								<div>
-									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
+									<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
 										Users
 									</div>
 									{results.users.map((user, _idx) => {
@@ -389,7 +394,7 @@ const GlobalSearch = () => {
 												type="button"
 												key={user.id}
 												onClick={() => handleResultClick(user)}
-												className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
+												className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
 													globalIdx === selectedIndex
 														? "bg-primary-50 dark:bg-primary-900/20"
 														: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -400,12 +405,14 @@ const GlobalSearch = () => {
 													<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
 														{display.primary}
 													</span>
-													<span className="text-xs text-secondary-400">•</span>
-													<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
+													<span className="text-xs text-secondary-400 dark:text-white/50">
+														•
+													</span>
+													<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
 														{display.secondary}
 													</span>
 												</div>
-												<div className="flex-shrink-0 text-xs text-secondary-400">
+												<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
 													{user.role}
 												</div>
 											</button>
@@ -415,7 +422,7 @@ const GlobalSearch = () => {
 							)}
 						</div>
 					) : query.trim() ? (
-						<div className="px-4 py-2 text-center text-sm text-secondary-500">
+						<div className="px-4 py-2 text-center text-sm text-secondary-500 dark:text-white/70">
 							No results found for "{query}"
 						</div>
 					) : null}
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 1d72ca0..152d5d5 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -46,6 +46,7 @@ const Layout = ({ children }) => {
 	});
 	const [_userMenuOpen, setUserMenuOpen] = useState(false);
 	const [githubStars, setGithubStars] = useState(null);
+	const [mobileLinksOpen, setMobileLinksOpen] = useState(false);
 	const location = useLocation();
 	const navigate = useNavigate();
 	const {
@@ -531,8 +532,9 @@ const Layout = ({ children }) => {
 					<div className="absolute right-0 top-0 -mr-12 pt-2">
 						<button
 							type="button"
-							className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+							className="ml-1 flex h-11 w-11 min-w-[44px] min-h-[44px] items-center justify-center rounded-full bg-secondary-600/90 hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white transition-colors"
 							onClick={() => setSidebarOpen(false)}
+							aria-label="Close sidebar"
 						>
 							<X className="h-6 w-6 text-white" />
 						</button>
@@ -546,7 +548,7 @@ const Layout = ({ children }) => {
 						{/* Show message for users with very limited permissions */}
 						{navigation.length === 0 && settingsNavigation.length === 0 && (
 							<div className="px-2 py-4 text-center">
-								<div className="text-sm text-secondary-500 dark:text-secondary-400">
+								<div className="text-sm text-secondary-500 dark:text-white/70">
 									<p className="mb-2">Limited access</p>
 									<p className="text-xs">
 										Contact your administrator for additional permissions
@@ -561,7 +563,7 @@ const Layout = ({ children }) => {
 									<Link
 										key={item.name}
 										to={item.href}
-										className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md ${
+										className={`group flex items-center px-2 py-3 text-sm font-medium rounded-md min-h-[44px] ${
 											isActive(item.href)
 												? "bg-primary-100 dark:bg-primary-600 text-primary-900 dark:text-white"
 												: "text-secondary-600 dark:text-secondary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700 hover:text-secondary-900 dark:hover:text-white"
@@ -588,7 +590,7 @@ const Layout = ({ children }) => {
 															// Special handling for Hosts item with integrated + button (mobile)
 															<Link
 																to={subItem.href}
-																className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md ${
+																className={`group flex items-center px-2 py-3 text-sm font-medium rounded-md min-h-[44px] ${
 																	isActive(subItem.href)
 																		? "bg-primary-100 dark:bg-primary-600 text-primary-900 dark:text-white"
 																		: "text-secondary-600 dark:text-secondary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700 hover:text-secondary-900 dark:hover:text-white"
@@ -733,7 +735,7 @@ const Layout = ({ children }) => {
 										handleLogout();
 										setSidebarOpen(false);
 									}}
-									className="w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md text-secondary-600 dark:text-secondary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700 hover:text-secondary-900 dark:hover:text-white"
+									className="w-full group flex items-center px-2 py-3 text-sm font-medium rounded-md text-secondary-600 dark:text-secondary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700 hover:text-secondary-900 dark:hover:text-white min-h-[44px]"
 								>
 									<LogOut className="mr-3 h-5 w-5" />
 									Sign out
@@ -805,7 +807,7 @@ const Layout = ({ children }) => {
 							{/* Show message for users with very limited permissions */}
 							{navigation.length === 0 && settingsNavigation.length === 0 && (
 								<li className="px-2 py-4 text-center">
-									<div className="text-sm text-secondary-500 dark:text-secondary-400">
+									<div className="text-sm text-secondary-500 dark:text-white/70">
 										<p className="mb-2">Limited access</p>
 										<p className="text-xs">
 											Contact your administrator for additional permissions
@@ -1080,7 +1082,7 @@ const Layout = ({ children }) => {
 								{/* Updated info */}
 								{stats && (
 									<div className="px-2 py-1 border-t border-secondary-200 dark:border-secondary-700">
-										<div className="flex items-center gap-x-1 text-xs text-secondary-500 dark:text-secondary-400">
+										<div className="flex items-center gap-x-1 text-xs text-secondary-500 dark:text-white/70">
 											<Clock className="h-3 w-3 flex-shrink-0" />
 											<span className="truncate">
 												Updated: {formatRelativeTimeShort(stats.lastUpdated)}
@@ -1097,7 +1099,7 @@ const Layout = ({ children }) => {
 												/>
 											</button>
 											{versionInfo && (
-												<span className="text-xs text-secondary-400 dark:text-secondary-500 flex-shrink-0">
+												<span className="text-xs text-secondary-400 dark:text-white/60 flex-shrink-0">
 													v{versionInfo.version}
 												</span>
 											)}
@@ -1141,7 +1143,7 @@ const Layout = ({ children }) => {
 											/>
 										</button>
 										{versionInfo && (
-											<span className="text-xs text-secondary-400 dark:text-secondary-500 mt-1">
+											<span className="text-xs text-secondary-400 dark:text-white/60 mt-1">
 												v{versionInfo.version}
 											</span>
 										)}
@@ -1161,7 +1163,7 @@ const Layout = ({ children }) => {
 			>
 				{/* Top bar */}
 				<div
-					className="sticky top-0 z-[90] flex h-16 shrink-0 items-center gap-x-4 border-b border-secondary-200 dark:border-white/10 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
+					className="sticky top-0 z-[90] flex h-16 shrink-0 items-center gap-x-2 sm:gap-x-4 border-b border-secondary-200 dark:border-white/10 bg-white px-3 sm:px-4 sm:px-6 lg:px-8 shadow-sm"
 					style={{
 						backgroundColor: "var(--topbar-bg, white)",
 						backdropFilter: "var(--topbar-blur, none)",
@@ -1170,8 +1172,9 @@ const Layout = ({ children }) => {
 				>
 					<button
 						type="button"
-						className="-m-2.5 p-2.5 text-secondary-700 dark:text-white lg:hidden"
+						className="-m-2.5 p-2.5 text-secondary-700 dark:text-white lg:hidden min-w-[44px] min-h-[44px] flex items-center justify-center"
 						onClick={() => setSidebarOpen(true)}
+						aria-label="Open menu"
 					>
 						<Menu className="h-6 w-6" />
 					</button>
@@ -1179,7 +1182,7 @@ const Layout = ({ children }) => {
 					{/* Separator */}
 					<div className="h-6 w-px bg-secondary-200 dark:bg-secondary-600 lg:hidden" />
 
-					<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+					<div className="flex flex-1 gap-x-2 sm:gap-x-4 self-stretch lg:gap-x-6 min-w-0">
 						{/* Page title - hidden on dashboard, hosts, repositories, packages, automation, docker, and host details to give more space to search */}
 						{![
 							"/",
@@ -1191,8 +1194,8 @@ const Layout = ({ children }) => {
 						].includes(location.pathname) &&
 							!location.pathname.startsWith("/hosts/") &&
 							!location.pathname.startsWith("/docker/") && (
-								<div className="relative flex items-center">
-									<h2 className="text-lg font-semibold text-secondary-900 dark:text-secondary-100 whitespace-nowrap">
+								<div className="relative flex items-center flex-shrink-0">
+									<h2 className="text-base sm:text-lg font-semibold text-secondary-900 dark:text-secondary-100 whitespace-nowrap">
 										{getPageTitle()}
 									</h2>
 								</div>
@@ -1200,20 +1203,191 @@ const Layout = ({ children }) => {
 
 						{/* Global Search Bar */}
 						<div
-							className={`flex items-center ${["/", "/hosts", "/repositories", "/packages", "/automation", "/docker"].includes(location.pathname) || location.pathname.startsWith("/hosts/") || location.pathname.startsWith("/docker/") ? "flex-1 max-w-none" : "max-w-sm"}`}
+							className={`flex items-center min-w-0 ${["/", "/hosts", "/repositories", "/packages", "/automation", "/docker"].includes(location.pathname) || location.pathname.startsWith("/hosts/") || location.pathname.startsWith("/docker/") ? "flex-1 max-w-none" : "flex-1 md:flex-none md:max-w-sm"}`}
 						>
 							<GlobalSearch />
 						</div>
 
-						<div className="flex flex-1 items-center gap-x-4 lg:gap-x-6 justify-end">
-							{/* External Links */}
+						<div className="flex items-center gap-x-2 sm:gap-x-4 lg:gap-x-6 justify-end flex-shrink-0">
+							{/* Mobile External Links Menu */}
+							<div className="relative md:hidden">
+								<button
+									type="button"
+									onClick={() => setMobileLinksOpen(!mobileLinksOpen)}
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm min-w-[44px] min-h-[44px]"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
+									aria-label="External links"
+									aria-expanded={mobileLinksOpen}
+								>
+									<Globe className="h-5 w-5" />
+								</button>
+								{mobileLinksOpen && (
+									<>
+										<button
+											type="button"
+											className="fixed inset-0 z-40 bg-transparent border-0 p-0 cursor-default"
+											onClick={() => setMobileLinksOpen(false)}
+											onKeyDown={(e) => {
+												if (e.key === "Enter" || e.key === " ") {
+													e.preventDefault();
+													setMobileLinksOpen(false);
+												}
+											}}
+											aria-label="Close mobile menu"
+										/>
+										<div className="absolute right-0 mt-2 w-64 rounded-lg border border-secondary-200 dark:border-secondary-600 bg-white dark:bg-secondary-800 shadow-lg z-50 max-h-[80vh] overflow-y-auto">
+											<div className="p-2 space-y-1">
+												{/* GitHub */}
+												<a
+													href="https://github.com/PatchMon/PatchMon"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<Github className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														GitHub
+													</span>
+													{githubStars !== null && (
+														<div className="flex items-center gap-1">
+															<Star className="h-4 w-4 fill-current text-yellow-500" />
+															<span className="text-sm">{githubStars}</span>
+														</div>
+													)}
+												</a>
+												{/* Buy Me a Coffee */}
+												<a
+													href="https://buymeacoffee.com/iby___"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<svg
+														className="h-5 w-5 text-yellow-500 flex-shrink-0"
+														viewBox="0 0 900 1300"
+														fill="currentColor"
+													>
+														<title>Buy Me a Coffee</title>
+														<path d="M879.567 341.849L872.53 306.352C866.215 274.503 851.882 244.409 819.19 232.898C808.711 229.215 796.821 227.633 788.786 220.01C780.751 212.388 778.376 200.55 776.518 189.572C773.076 169.423 769.842 149.257 766.314 129.143C763.269 111.85 760.86 92.4243 752.928 76.56C742.604 55.2584 721.182 42.8009 699.88 34.559C688.965 30.4844 677.826 27.0375 666.517 24.2352C613.297 10.1947 557.342 5.03277 502.591 2.09047C436.875 -1.53577 370.983 -0.443234 305.422 5.35968C256.625 9.79894 205.229 15.1674 158.858 32.0469C141.91 38.224 124.445 45.6399 111.558 58.7341C95.7448 74.8221 90.5829 99.7026 102.128 119.765C110.336 134.012 124.239 144.078 138.985 150.737C158.192 159.317 178.251 165.846 198.829 170.215C256.126 182.879 315.471 187.851 374.007 189.968C438.887 192.586 503.87 190.464 568.44 183.618C584.408 181.863 600.347 179.758 616.257 177.304C634.995 174.43 647.022 149.928 641.499 132.859C634.891 112.453 617.134 104.538 597.055 107.618C594.095 108.082 591.153 108.512 588.193 108.942L586.06 109.252C579.257 110.113 572.455 110.915 565.653 111.661C551.601 113.175 537.515 114.414 523.394 115.378C491.768 117.58 460.057 118.595 428.363 118.647C397.219 118.647 366.058 117.769 334.983 115.722C320.805 114.793 306.661 113.611 292.552 112.177C286.134 111.506 279.733 110.801 273.333 110.009L267.241 109.235L265.917 109.046L259.602 108.134C246.697 106.189 233.792 103.953 221.025 101.251C219.737 100.965 218.584 100.249 217.758 99.2193C216.932 98.1901 216.482 96.9099 216.482 95.5903C216.482 94.2706 216.932 92.9904 217.758 91.9612C218.584 90.9319 219.737 90.2152 221.025 89.9293H221.266C232.33 87.5721 243.479 85.5589 254.663 83.8038C258.392 83.2188 262.131 82.6453 265.882 82.0832H265.985C272.988 81.6186 280.026 80.3625 286.994 79.5366C347.624 73.2301 408.614 71.0801 469.538 73.1014C499.115 73.9618 528.676 75.6996 558.116 78.6935C564.448 79.3474 570.746 80.0357 577.043 80.8099C579.452 81.1025 581.878 81.4465 584.305 81.7391L589.191 82.4445C603.438 84.5667 617.61 87.1419 631.708 90.1703C652.597 94.7128 679.422 96.1925 688.713 119.077C691.673 126.338 693.015 134.408 694.649 142.03L696.732 151.752C696.786 151.926 696.826 152.105 696.852 152.285C701.773 175.227 706.7 198.169 711.632 221.111C711.994 222.806 712.002 224.557 711.657 226.255C711.312 227.954 710.621 229.562 709.626 230.982C708.632 232.401 707.355 233.6 705.877 234.504C704.398 235.408 702.75 235.997 701.033 236.236H700.895L697.884 236.649L694.908 237.044C685.478 238.272 676.038 239.419 666.586 240.486C647.968 242.608 629.322 244.443 610.648 245.992C573.539 249.077 536.356 251.102 499.098 252.066C480.114 252.57 461.135 252.806 442.162 252.771C366.643 252.712 291.189 248.322 216.173 239.625C208.051 238.662 199.93 237.629 191.808 236.58C198.106 237.389 187.231 235.96 185.029 235.651C179.867 234.928 174.705 234.177 169.543 233.397C152.216 230.798 134.993 227.598 117.7 224.793C96.7944 221.352 76.8005 223.073 57.8906 233.397C42.3685 241.891 29.8055 254.916 21.8776 270.735C13.7217 287.597 11.2956 305.956 7.64786 324.075C4.00009 342.193 -1.67805 361.688 0.472751 380.288C5.10128 420.431 33.165 453.054 73.5313 460.35C111.506 467.232 149.687 472.807 187.971 477.556C338.361 495.975 490.294 498.178 641.155 484.129C653.44 482.982 665.708 481.732 677.959 480.378C681.786 479.958 685.658 480.398 689.292 481.668C692.926 482.938 696.23 485.005 698.962 487.717C701.694 490.429 703.784 493.718 705.08 497.342C706.377 500.967 706.846 504.836 706.453 508.665L702.633 545.797C694.936 620.828 687.239 695.854 679.542 770.874C671.513 849.657 663.431 928.434 655.298 1007.2C653.004 1029.39 650.71 1051.57 648.416 1073.74C646.213 1095.58 645.904 1118.1 641.757 1139.68C635.218 1173.61 612.248 1194.45 578.73 1202.07C548.022 1209.06 516.652 1212.73 485.161 1213.01C450.249 1213.2 415.355 1211.65 380.443 1211.84C343.173 1212.05 297.525 1208.61 268.756 1180.87C243.479 1156.51 239.986 1118.36 236.545 1085.37C231.957 1041.7 227.409 998.039 222.9 954.381L197.607 711.615L181.244 554.538C180.968 551.94 180.693 549.376 180.435 546.76C178.473 528.023 165.207 509.681 144.301 510.627C126.407 511.418 106.069 526.629 108.168 546.76L120.298 663.214L145.385 904.104C152.532 972.528 159.661 1040.96 166.773 1109.41C168.15 1122.52 169.44 1135.67 170.885 1148.78C178.749 1220.43 233.465 1259.04 301.224 1269.91C340.799 1276.28 381.337 1277.59 421.497 1278.24C472.979 1279.07 524.977 1281.05 575.615 1271.72C650.653 1257.95 706.952 1207.85 714.987 1130.13C717.282 1107.69 719.576 1085.25 721.87 1062.8C729.498 988.559 737.115 914.313 744.72 840.061L769.601 597.451L781.009 486.263C781.577 480.749 783.905 475.565 787.649 471.478C791.392 467.391 796.352 464.617 801.794 463.567C823.25 459.386 843.761 452.245 859.023 435.916C883.318 409.918 888.153 376.021 879.567 341.849ZM72.4301 365.835C72.757 365.68 72.1548 368.484 71.8967 369.792C71.8451 367.813 71.9483 366.058 72.4301 365.835ZM74.5121 381.94C74.6842 381.819 75.2003 382.508 75.7337 383.334C74.925 382.576 74.4089 382.009 74.4949 381.94H74.5121ZM76.5597 384.641C77.2996 385.897 77.6953 386.689 76.5597 384.641V384.641ZM80.672 387.979H80.7752C80.7752 388.1 80.9645 388.22 81.0333 388.341C80.9192 388.208 80.7925 388.087 80.6548 387.979H80.672ZM800.796 382.989C793.088 390.319 781.473 393.726 769.996 395.43C641.292 414.529 510.713 424.199 380.597 419.932C287.476 416.749 195.336 406.407 103.144 393.382C94.1102 392.109 84.3197 390.457 78.1082 383.798C66.4078 371.237 72.1548 345.944 75.2003 330.768C77.9878 316.865 83.3218 298.334 99.8572 296.355C125.667 293.327 155.64 304.218 181.175 308.09C211.917 312.781 242.774 316.538 273.745 319.36C405.925 331.405 540.325 329.529 671.92 311.91C695.906 308.686 719.805 304.941 743.619 300.674C764.835 296.871 788.356 289.731 801.175 311.703C809.967 326.673 811.137 346.701 809.778 363.615C809.359 370.984 806.139 377.915 800.779 382.989H800.796Z" />
+													</svg>
+													<span className="text-sm font-medium flex-1">
+														Buy Me a Coffee
+													</span>
+												</a>
+												{/* Roadmap */}
+												<a
+													href="https://github.com/orgs/PatchMon/projects/2/views/1"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<Route className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Roadmap
+													</span>
+												</a>
+												{/* Docs */}
+												<a
+													href="https://docs.patchmon.net"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<BookOpen className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Documentation
+													</span>
+												</a>
+												{/* Discord */}
+												<a
+													href="https://patchmon.net/discord"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<DiscordIcon className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Discord
+													</span>
+												</a>
+												{/* Email */}
+												<a
+													href="mailto:support@patchmon.net"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<Mail className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Email Support
+													</span>
+												</a>
+												{/* YouTube */}
+												<a
+													href="https://youtube.com/@patchmonTV"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<FaYoutube className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														YouTube
+													</span>
+												</a>
+												{/* Reddit */}
+												<a
+													href="https://www.reddit.com/r/patchmon"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<FaReddit className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Reddit
+													</span>
+												</a>
+												{/* Web */}
+												<a
+													href="https://patchmon.net"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-3 px-3 py-3 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors min-h-[44px]"
+													onClick={() => setMobileLinksOpen(false)}
+												>
+													<Globe className="h-5 w-5 flex-shrink-0" />
+													<span className="text-sm font-medium flex-1">
+														Website
+													</span>
+												</a>
+											</div>
+										</div>
+									</>
+								)}
+							</div>
+
+							{/* Desktop External Links */}
 							<div className="hidden md:flex items-center gap-1">
 								{/* 1) GitHub */}
 								<a
 									href="https://github.com/PatchMon/PatchMon"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm group relative"
+									className="flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm group relative"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="GitHub"
 									aria-label="GitHub"
 								>
@@ -1230,7 +1404,12 @@ const Layout = ({ children }) => {
 									href="https://buymeacoffee.com/iby___"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Buy Me a Coffee"
 									aria-label="Buy Me a Coffee"
 								>
@@ -1248,7 +1427,12 @@ const Layout = ({ children }) => {
 									href="https://github.com/orgs/PatchMon/projects/2/views/1"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Roadmap"
 								>
 									<Route className="h-5 w-5" />
@@ -1258,7 +1442,12 @@ const Layout = ({ children }) => {
 									href="https://docs.patchmon.net"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Documentation"
 								>
 									<BookOpen className="h-5 w-5" />
@@ -1268,7 +1457,12 @@ const Layout = ({ children }) => {
 									href="https://patchmon.net/discord"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Discord"
 								>
 									<DiscordIcon className="h-5 w-5" />
@@ -1276,7 +1470,12 @@ const Layout = ({ children }) => {
 								{/* 6) Email */}
 								<a
 									href="mailto:support@patchmon.net"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Email support@patchmon.net"
 								>
 									<Mail className="h-5 w-5" />
@@ -1286,7 +1485,12 @@ const Layout = ({ children }) => {
 									href="https://youtube.com/@patchmonTV"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="YouTube Channel"
 								>
 									<FaYoutube className="h-5 w-5" />
@@ -1296,7 +1500,12 @@ const Layout = ({ children }) => {
 									href="https://www.reddit.com/r/patchmon"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Reddit Community"
 								>
 									<FaReddit className="h-5 w-5" />
@@ -1306,7 +1515,12 @@ const Layout = ({ children }) => {
 									href="https://patchmon.net"
 									target="_blank"
 									rel="noopener noreferrer"
-									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-gray-800 text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm"
+									className="flex items-center justify-center w-10 h-10 bg-gray-50 dark:bg-transparent text-secondary-600 dark:text-secondary-300 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors shadow-sm"
+									style={{
+										backgroundColor: "var(--button-bg, rgb(249, 250, 251))",
+										backdropFilter: "var(--button-blur, none)",
+										WebkitBackdropFilter: "var(--button-blur, none)",
+									}}
 									title="Visit patchmon.net"
 								>
 									<Globe className="h-5 w-5" />
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index d18c83c..eb5a703 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -22,7 +22,6 @@ import {
 	Server,
 	Settings,
 	Shield,
-	TrendingUp,
 	Users,
 	WifiOff,
 } from "lucide-react";
@@ -59,6 +58,7 @@ const Dashboard = () => {
 	const [packageTrendsHost, setPackageTrendsHost] = useState("all"); // host filter
 	const [systemStatsJobId, setSystemStatsJobId] = useState(null); // Track job ID for system statistics
 	const [isTriggeringJob, setIsTriggeringJob] = useState(false);
+	const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
 	const navigate = useNavigate();
 	const { isDark } = useTheme();
 	const { user } = useAuth();
@@ -312,6 +312,15 @@ const Dashboard = () => {
 		};
 	}, []);
 
+	// Track window size for responsive chart options
+	useEffect(() => {
+		const handleResize = () => {
+			setIsMobile(window.innerWidth < 640);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+
 	// Helper function to check if a card should be displayed
 	const isCardEnabled = (cardId) => {
 		const card = cardPreferences.find((c) => c.cardId === cardId);
@@ -358,11 +367,11 @@ const Dashboard = () => {
 	const getGroupClassName = (cardType) => {
 		switch (cardType) {
 			case "stats":
-				return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4";
+				return "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4";
 			case "charts":
-				return "grid grid-cols-1 lg:grid-cols-3 gap-6";
+				return "grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6";
 			case "widecharts":
-				return "grid grid-cols-1 lg:grid-cols-3 gap-6";
+				return "grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6";
 			case "fullwidth":
 				return "space-y-6";
 			default:
@@ -377,7 +386,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleNeedsRebootClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -405,7 +414,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleTotalHostsClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -434,7 +443,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleHostsNeedingUpdatesClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -463,7 +472,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleUpToDateClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -492,7 +501,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleOutdatedPackagesClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -521,7 +530,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleSecurityUpdatesClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -550,7 +559,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleHostGroupsClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -579,7 +588,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleUsersClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -608,7 +617,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
 						onClick={handleRepositoriesClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -741,7 +750,7 @@ const Dashboard = () => {
 
 			case "osDistribution":
 				return (
-					<div className="card p-6 w-full">
+					<div className="card p-4 sm:p-6 w-full">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							OS Distribution
 						</h3>
@@ -755,7 +764,7 @@ const Dashboard = () => {
 
 			case "osDistributionDoughnut":
 				return (
-					<div className="card p-6 w-full">
+					<div className="card p-4 sm:p-6 w-full">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							OS Distribution
 						</h3>
@@ -769,7 +778,7 @@ const Dashboard = () => {
 
 			case "osDistributionBar":
 				return (
-					<div className="card p-6 w-full">
+					<div className="card p-4 sm:p-6 w-full">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							OS Distribution
 						</h3>
@@ -783,7 +792,7 @@ const Dashboard = () => {
 				return (
 					<button
 						type="button"
-						className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
+						className="card p-4 sm:p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
 						onClick={handleUpdateStatusClick}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -808,7 +817,7 @@ const Dashboard = () => {
 
 			case "packagePriority":
 				return (
-					<div className="card p-6 w-full">
+					<div className="card p-4 sm:p-6 w-full">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							Outdated Packages by Priority
 						</h3>
@@ -825,13 +834,13 @@ const Dashboard = () => {
 
 			case "packageTrends":
 				return (
-					<div className="card p-6 w-full">
-						<div className="flex items-center justify-between mb-4">
+					<div className="card p-4 sm:p-6 w-full">
+						<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
 							<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
 								Package Trends Over Time
 							</h3>
 							<div className="flex flex-col gap-2">
-								<div className="flex items-center gap-3">
+								<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
 									{/* Refresh Button */}
 									<button
 										type="button"
@@ -869,7 +878,7 @@ const Dashboard = () => {
 											}
 										}}
 										disabled={packageTrendsFetching || isTriggeringJob}
-										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+										className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 min-h-[44px]"
 										title={
 											packageTrendsHost === "all"
 												? "Trigger system statistics collection"
@@ -890,7 +899,7 @@ const Dashboard = () => {
 									<select
 										value={packageTrendsPeriod}
 										onChange={(e) => setPackageTrendsPeriod(e.target.value)}
-										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+										className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 min-h-[44px]"
 									>
 										<option value="1">Last 24 hours</option>
 										<option value="7">Last 7 days</option>
@@ -908,7 +917,7 @@ const Dashboard = () => {
 											// Clear job ID message when host selection changes
 											setSystemStatsJobId(null);
 										}}
-										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+										className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 min-h-[44px]"
 									>
 										<option value="all">All Hosts</option>
 										{packageTrendsData?.hosts?.length > 0 ? (
@@ -928,7 +937,7 @@ const Dashboard = () => {
 								</div>
 								{/* Job ID Message */}
 								{systemStatsJobId && packageTrendsHost === "all" && (
-									<p className="text-xs text-secondary-600 dark:text-secondary-400 ml-1">
+									<p className="text-xs text-secondary-600 dark:text-white/70 ml-1">
 										Ran collection job #{systemStatsJobId}
 									</p>
 								)}
@@ -946,7 +955,7 @@ const Dashboard = () => {
 									options={packageTrendsChartOptions}
 								/>
 							) : (
-								<div className="flex items-center justify-center h-full text-secondary-500 dark:text-secondary-400">
+								<div className="flex items-center justify-center h-full text-secondary-500 dark:text-white/70">
 									No data available
 								</div>
 							)}
@@ -984,7 +993,7 @@ const Dashboard = () => {
 						: 0;
 
 				return (
-					<div className="card p-6">
+					<div className="card p-4 sm:p-6">
 						<div className="flex items-center justify-between mb-4">
 							<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
 								System Overview
@@ -995,10 +1004,10 @@ const Dashboard = () => {
 								<div className="text-2xl font-bold text-primary-600">
 									{updatePercentage}%
 								</div>
-								<div className="text-sm text-secondary-500 dark:text-secondary-300">
+								<div className="text-sm text-secondary-500 dark:text-white/70">
 									Need Updates
 								</div>
-								<div className="text-xs text-secondary-400 dark:text-secondary-500">
+								<div className="text-xs text-secondary-400 dark:text-white/60">
 									{stats.cards.hostsNeedingUpdates}/{stats.cards.totalHosts}{" "}
 									hosts
 								</div>
@@ -1007,10 +1016,10 @@ const Dashboard = () => {
 								<div className="text-2xl font-bold text-danger-600">
 									{stats.cards.securityUpdates}
 								</div>
-								<div className="text-sm text-secondary-500 dark:text-secondary-300">
+								<div className="text-sm text-secondary-500 dark:text-white/70">
 									Security Issues
 								</div>
-								<div className="text-xs text-secondary-400 dark:text-secondary-500">
+								<div className="text-xs text-secondary-400 dark:text-white/60">
 									{securityPercentage}% of updates
 								</div>
 							</div>
@@ -1018,10 +1027,10 @@ const Dashboard = () => {
 								<div className="text-2xl font-bold text-success-600">
 									{onlinePercentage}%
 								</div>
-								<div className="text-sm text-secondary-500 dark:text-secondary-300">
+								<div className="text-sm text-secondary-500 dark:text-white/70">
 									Online
 								</div>
-								<div className="text-xs text-secondary-400 dark:text-secondary-500">
+								<div className="text-xs text-secondary-400 dark:text-white/60">
 									{onlineHosts}/{stats.cards.totalHosts} hosts
 								</div>
 							</div>
@@ -1029,10 +1038,10 @@ const Dashboard = () => {
 								<div className="text-2xl font-bold text-secondary-600">
 									{avgPackagesPerHost}
 								</div>
-								<div className="text-sm text-secondary-500 dark:text-secondary-300">
+								<div className="text-sm text-secondary-500 dark:text-white/70">
 									Avg per Host
 								</div>
-								<div className="text-xs text-secondary-400 dark:text-secondary-500">
+								<div className="text-xs text-secondary-400 dark:text-white/60">
 									outdated packages
 								</div>
 							</div>
@@ -1043,7 +1052,7 @@ const Dashboard = () => {
 
 			case "recentUsers":
 				return (
-					<div className="card p-6">
+					<div className="card p-4 sm:p-6">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							Recent Users Logged in
 						</h3>
@@ -1057,7 +1066,7 @@ const Dashboard = () => {
 										<div className="text-sm font-medium text-secondary-900 dark:text-white">
 											{u.username}
 										</div>
-										<div className="text-sm text-secondary-500 dark:text-secondary-400">
+										<div className="text-sm text-secondary-500 dark:text-white/70">
 											{u.last_login
 												? formatRelativeTime(u.last_login)
 												: "Never"}
@@ -1065,7 +1074,7 @@ const Dashboard = () => {
 									</div>
 								))}
 								{(!recentUsers || recentUsers.length === 0) && (
-									<div className="text-center text-secondary-500 dark:text-secondary-400 py-4">
+									<div className="text-center text-secondary-500 dark:text-white/70 py-4">
 										No users found
 									</div>
 								)}
@@ -1076,7 +1085,7 @@ const Dashboard = () => {
 
 			case "recentCollection":
 				return (
-					<div className="card p-6">
+					<div className="card p-4 sm:p-6">
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							Recent Collection
 						</h3>
@@ -1094,7 +1103,7 @@ const Dashboard = () => {
 										>
 											{host.friendly_name || host.hostname}
 										</button>
-										<div className="text-sm text-secondary-500 dark:text-secondary-400">
+										<div className="text-sm text-secondary-500 dark:text-white/70">
 											{host.last_update
 												? formatRelativeTime(host.last_update)
 												: "Never"}
@@ -1102,7 +1111,7 @@ const Dashboard = () => {
 									</div>
 								))}
 								{(!recentCollection || recentCollection.length === 0) && (
-									<div className="text-center text-secondary-500 dark:text-secondary-400 py-4">
+									<div className="text-center text-secondary-500 dark:text-white/70 py-4">
 										No hosts found
 									</div>
 								)}
@@ -1154,13 +1163,13 @@ const Dashboard = () => {
 		maintainAspectRatio: false,
 		plugins: {
 			legend: {
-				position: "right",
+				position: isMobile ? "bottom" : "right",
 				labels: {
 					color: isDark ? "#ffffff" : "#374151",
 					font: {
-						size: 12,
+						size: isMobile ? 10 : 12,
 					},
-					padding: 15,
+					padding: isMobile ? 10 : 15,
 					usePointStyle: true,
 					pointStyle: "circle",
 				},
@@ -1168,7 +1177,7 @@ const Dashboard = () => {
 		},
 		layout: {
 			padding: {
-				right: 20,
+				right: isMobile ? 10 : 20,
 			},
 		},
 		onClick: handleOSChartClick,
@@ -1179,13 +1188,13 @@ const Dashboard = () => {
 		maintainAspectRatio: false,
 		plugins: {
 			legend: {
-				position: "right",
+				position: isMobile ? "bottom" : "right",
 				labels: {
 					color: isDark ? "#ffffff" : "#374151",
 					font: {
-						size: 12,
+						size: isMobile ? 10 : 12,
 					},
-					padding: 15,
+					padding: isMobile ? 10 : 15,
 					usePointStyle: true,
 					pointStyle: "circle",
 				},
@@ -1193,7 +1202,7 @@ const Dashboard = () => {
 		},
 		layout: {
 			padding: {
-				right: 20,
+				right: isMobile ? 10 : 20,
 			},
 		},
 		onClick: handleOSChartClick,
@@ -1584,10 +1593,10 @@ const Dashboard = () => {
 			{/* Page Header */}
 			<div className="flex items-center justify-between">
 				<div>
-					<h1 className="text-2xl font-semibold text-secondary-900 dark:text-white">
+					<h1 className="text-xl sm:text-2xl font-semibold text-secondary-900 dark:text-white">
 						Welcome back, {user?.first_name || user?.username || "User"} 👋
 					</h1>
-					<p className="text-sm text-secondary-600 dark:text-secondary-400 mt-1">
+					<p className="text-sm text-secondary-600 dark:text-white/80 mt-1">
 						Overview of your PatchMon infrastructure
 					</p>
 				</div>
@@ -1595,7 +1604,7 @@ const Dashboard = () => {
 					<button
 						type="button"
 						onClick={() => setShowSettingsModal(true)}
-						className="btn-outline flex items-center gap-2"
+						className="hidden md:flex btn-outline items-center gap-2"
 						title="Customize dashboard layout"
 					>
 						<Settings className="h-4 w-4" />
@@ -1604,7 +1613,7 @@ const Dashboard = () => {
 						type="button"
 						onClick={() => refetch()}
 						disabled={isFetching}
-						className="btn-outline flex items-center gap-2"
+						className="btn-outline flex items-center gap-2 min-h-[44px] min-w-[44px] justify-center"
 						title="Refresh dashboard data"
 					>
 						<RefreshCw
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
index 54f8fd4..841dcc5 100644
--- a/frontend/src/pages/Hosts.jsx
+++ b/frontend/src/pages/Hosts.jsx
@@ -13,6 +13,7 @@ import {
 	Eye as EyeIcon,
 	EyeOff as EyeOffIcon,
 	Filter,
+	FolderPlus,
 	GripVertical,
 	Plus,
 	RefreshCw,
@@ -21,7 +22,6 @@ import {
 	Server,
 	Square,
 	Trash2,
-	Users,
 	Wifi,
 	X,
 } from "lucide-react";
@@ -94,8 +94,8 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-			<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+		<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+			<div className="bg-white dark:bg-secondary-800 rounded-lg p-4 sm:p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
 				<div className="flex justify-between items-center mb-4">
 					<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
 						Add New Host
@@ -125,7 +125,7 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
 							onChange={(e) =>
 								setFormData({ ...formData, friendly_name: e.target.value })
 							}
-							className="block w-full px-3 py-2.5 text-base border-2 border-secondary-300 dark:border-secondary-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white transition-all duration-200"
+							className="block w-full px-3 py-3 sm:py-2.5 text-base border-2 border-secondary-300 dark:border-secondary-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white transition-all duration-200 min-h-[44px]"
 							placeholder="server.example.com"
 						/>
 						<p className="mt-2 text-sm text-secondary-500 dark:text-secondary-400">
@@ -197,18 +197,18 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
 						</div>
 					)}
 
-					<div className="flex justify-end space-x-3 pt-2">
+					<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
 						<button
 							type="button"
 							onClick={onClose}
-							className="px-6 py-3 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-all duration-200"
+							className="px-6 py-3 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-all duration-200 min-h-[44px] w-full sm:w-auto"
 						>
 							Cancel
 						</button>
 						<button
 							type="submit"
 							disabled={isSubmitting}
-							className="px-6 py-3 text-sm font-medium text-white bg-primary-600 border-2 border-transparent rounded-lg hover:bg-primary-700 disabled:opacity-50 transition-all duration-200"
+							className="px-6 py-3 text-sm font-medium text-white bg-primary-600 border-2 border-transparent rounded-lg hover:bg-primary-700 disabled:opacity-50 transition-all duration-200 min-h-[44px] w-full sm:w-auto"
 						>
 							{isSubmitting ? "Creating..." : "Create Host"}
 						</button>
@@ -1122,11 +1122,17 @@ const Hosts = () => {
 						}
 					>
 						<div
-							className={`w-2 h-2 rounded-full mr-1.5 ${
+							className={`w-2 h-2 rounded-full ${wsStatus.connected ? "mr-1.5" : "mr-1.5 md:mr-0"} ${
 								wsStatus.connected ? "bg-green-500 animate-pulse" : "bg-red-500"
 							}`}
 						></div>
-						{wsStatus.connected ? (wsStatus.secure ? "WSS" : "WS") : "Offline"}
+						<span className="hidden md:inline">
+							{wsStatus.connected
+								? wsStatus.secure
+									? "WSS"
+									: "WS"
+								: "Offline"}
+						</span>
 					</span>
 				);
 			}
@@ -1301,14 +1307,14 @@ const Hosts = () => {
 	}
 
 	return (
-		<div className="h-[calc(100vh-7rem)] flex flex-col overflow-hidden">
+		<div className="min-h-0 flex flex-col md:h-[calc(100vh-7rem)] md:overflow-hidden">
 			{/* Page Header */}
 			<div className="flex items-center justify-between mb-6">
 				<div>
 					<h1 className="text-2xl font-semibold text-secondary-900 dark:text-white">
 						Hosts
 					</h1>
-					<p className="text-sm text-secondary-600 dark:text-secondary-400 mt-1">
+					<p className="text-sm text-secondary-600 dark:text-white/80 mt-1">
 						Manage and monitor your connected hosts
 					</p>
 				</div>
@@ -1336,7 +1342,7 @@ const Hosts = () => {
 			</div>
 
 			{/* Stats Summary */}
-			<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
+			<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6">
 				<button
 					type="button"
 					className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
@@ -1420,7 +1426,7 @@ const Hosts = () => {
 											<span className="text-sm font-medium text-secondary-900 dark:text-white">
 												{connectedCount}
 											</span>
-											<span className="text-xs text-secondary-500 dark:text-secondary-400">
+											<span className="text-xs text-secondary-500 dark:text-secondary-400 hidden sm:inline">
 												Connected
 											</span>
 										</div>
@@ -1429,7 +1435,7 @@ const Hosts = () => {
 											<span className="text-sm font-medium text-secondary-900 dark:text-white">
 												{offlineCount}
 											</span>
-											<span className="text-xs text-secondary-500 dark:text-secondary-400">
+											<span className="text-xs text-secondary-500 dark:text-secondary-400 hidden sm:inline">
 												Offline
 											</span>
 										</div>
@@ -1442,37 +1448,39 @@ const Hosts = () => {
 			</div>
 
 			{/* Hosts List */}
-			<div className="card flex-1 flex flex-col overflow-hidden min-h-0">
-				<div className="px-4 py-4 sm:p-4 flex-1 flex flex-col overflow-hidden min-h-0">
-					<div className="flex items-center justify-end mb-4">
+			<div className="card flex-1 flex flex-col md:overflow-hidden min-h-0">
+				<div className="px-4 py-4 sm:p-4 flex-1 flex flex-col md:overflow-hidden min-h-0">
+					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-3 mb-4">
 						{selectedHosts.length > 0 && (
-							<div className="flex items-center gap-3">
-								<span className="text-sm text-secondary-600">
+							<div className="flex flex-wrap items-center gap-2 sm:gap-3">
+								<span className="text-sm text-secondary-600 dark:text-white/80 flex-shrink-0">
 									{selectedHosts.length} host
 									{selectedHosts.length !== 1 ? "s" : ""} selected
 								</span>
 								<button
 									type="button"
 									onClick={() => setShowBulkAssignModal(true)}
-									className="btn-outline flex items-center gap-2"
+									className="btn-outline flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
 								>
-									<Users className="h-4 w-4" />
-									Assign to Group
+									<FolderPlus className="h-4 w-4 flex-shrink-0" />
+									<span className="hidden sm:inline">Assign to Group</span>
+									<span className="sm:hidden">Assign</span>
 								</button>
 								<button
 									type="button"
 									onClick={() => setShowBulkDeleteModal(true)}
-									className="btn-danger flex items-center gap-2"
+									className="btn-danger flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
 								>
-									<Trash2 className="h-4 w-4" />
-									Delete
+									<Trash2 className="h-4 w-4 flex-shrink-0" />
+									<span>Delete</span>
 								</button>
 								<button
 									type="button"
 									onClick={() => setSelectedHosts([])}
-									className="text-sm text-secondary-500 hover:text-secondary-700"
+									className="text-xs sm:text-sm text-secondary-500 dark:text-white/70 hover:text-secondary-700 dark:hover:text-white/90 min-h-[44px] px-2"
 								>
-									Clear Selection
+									<span className="hidden sm:inline">Clear Selection</span>
+									<span className="sm:hidden">Clear</span>
 								</button>
 							</div>
 						)}
@@ -1494,28 +1502,28 @@ const Hosts = () => {
 									/>
 								</div>
 							</div>
-							<div className="flex gap-2">
+							<div className="flex flex-wrap gap-2">
 								<button
 									type="button"
 									onClick={() => setShowFilters(!showFilters)}
-									className={`btn-outline flex items-center gap-2 ${showFilters ? "bg-primary-50 border-primary-300" : ""}`}
+									className={`btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm ${showFilters ? "bg-primary-50 border-primary-300" : ""}`}
 								>
-									<Filter className="h-4 w-4" />
-									Filters
+									<Filter className="h-4 w-4 flex-shrink-0" />
+									<span className="hidden sm:inline">Filters</span>
 								</button>
 								<button
 									type="button"
 									onClick={() => setShowColumnSettings(true)}
-									className="btn-outline flex items-center gap-2"
+									className="btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
 								>
-									<Columns className="h-4 w-4" />
-									Columns
+									<Columns className="h-4 w-4 flex-shrink-0" />
+									<span className="hidden sm:inline">Columns</span>
 								</button>
 								<div className="relative">
 									<select
 										value={groupBy}
 										onChange={(e) => setGroupBy(e.target.value)}
-										className="appearance-none bg-white dark:bg-secondary-800 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg px-2 py-2 pr-6 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-secondary-900 dark:text-white hover:border-secondary-400 dark:hover:border-secondary-500 transition-colors min-w-[120px]"
+										className="appearance-none bg-white dark:bg-secondary-800 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg px-2 py-2 pr-6 text-xs sm:text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-secondary-900 dark:text-white hover:border-secondary-400 dark:hover:border-secondary-500 transition-colors min-w-[100px] sm:min-w-[120px] min-h-[44px]"
 									>
 										<option value="none">No Grouping</option>
 										<option value="group">By Group</option>
@@ -1527,18 +1535,18 @@ const Hosts = () => {
 								<button
 									type="button"
 									onClick={() => setHideStale(!hideStale)}
-									className={`btn-outline flex items-center gap-2 ${hideStale ? "bg-primary-50 border-primary-300" : ""}`}
+									className={`btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm ${hideStale ? "bg-primary-50 border-primary-300" : ""}`}
 								>
-									<AlertTriangle className="h-4 w-4" />
-									Hide Stale
+									<AlertTriangle className="h-4 w-4 flex-shrink-0" />
+									<span className="hidden sm:inline">Hide Stale</span>
 								</button>
 							</div>
 						</div>
 
 						{/* Advanced Filters */}
 						{showFilters && (
-							<div className="bg-secondary-50 dark:bg-secondary-700 p-4 rounded-lg border dark:border-secondary-600">
-								<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+							<div className="bg-secondary-50 dark:bg-secondary-700 p-3 sm:p-4 rounded-lg border dark:border-secondary-600">
+								<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
 									<div>
 										<label
 											htmlFor={hostGroupFilterId}
@@ -1550,7 +1558,7 @@ const Hosts = () => {
 											id={hostGroupFilterId}
 											value={groupFilter}
 											onChange={(e) => setGroupFilter(e.target.value)}
-											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
 										>
 											<option value="all">All Groups</option>
 											<option value="ungrouped">Ungrouped</option>
@@ -1572,7 +1580,7 @@ const Hosts = () => {
 											id={statusFilterId}
 											value={statusFilter}
 											onChange={(e) => setStatusFilter(e.target.value)}
-											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
 										>
 											<option value="all">All Status</option>
 											<option value="active">Active</option>
@@ -1592,7 +1600,7 @@ const Hosts = () => {
 											id={osFilterId}
 											value={osFilter}
 											onChange={(e) => setOsFilter(e.target.value)}
-											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+											className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
 										>
 											<option value="all">All OS</option>
 											{uniqueOsTypes.map((osType) => (
@@ -1613,7 +1621,7 @@ const Hosts = () => {
 												setGroupBy("none");
 												setHideStale(false);
 											}}
-											className="btn-outline w-full"
+											className="btn-outline w-full min-h-[44px]"
 										>
 											Clear Filters
 										</button>
@@ -1623,7 +1631,7 @@ const Hosts = () => {
 						)}
 					</div>
 
-					<div className="flex-1 overflow-hidden">
+					<div className="flex-1 md:overflow-hidden">
 						{!hosts || hosts.length === 0 ? (
 							<div className="text-center py-8">
 								<Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
@@ -1644,7 +1652,7 @@ const Hosts = () => {
 								</p>
 							</div>
 						) : (
-							<div className="h-full overflow-auto">
+							<div className="md:h-full overflow-auto">
 								<div className="space-y-6">
 									{Object.entries(groupedHosts).map(
 										([groupName, groupHosts]) => (
@@ -1658,15 +1666,234 @@ const Hosts = () => {
 													</div>
 												)}
 
-												{/* Table for this group */}
-												<div className="overflow-x-auto">
-													<table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
+												{/* Mobile Card Layout */}
+												<div className="md:hidden space-y-3">
+													{groupHosts.map((host) => {
+														const isInactive =
+															(host.effectiveStatus || host.status) ===
+															"inactive";
+														const isSelected = selectedHosts.includes(host.id);
+														const wsStatus = wsStatusMap[host.api_id];
+														const groupIds =
+															host.host_group_memberships?.map(
+																(membership) => membership.host_groups.id,
+															) || [];
+														const groups =
+															hostGroups?.filter((g) =>
+																groupIds.includes(g.id),
+															) || [];
+
+														return (
+															<div
+																key={host.id}
+																className={`card p-4 space-y-3 ${
+																	isSelected
+																		? "ring-2 ring-primary-500 bg-primary-50 dark:bg-primary-900/20"
+																		: isInactive
+																			? "bg-red-50 dark:bg-red-900/20"
+																			: ""
+																}`}
+															>
+																{/* Header with select and main info */}
+																<div className="flex items-start justify-between gap-3">
+																	<div className="flex items-center gap-2 flex-1 min-w-0">
+																		{visibleColumns.some(
+																			(col) => col.id === "select",
+																		) && (
+																			<button
+																				type="button"
+																				onClick={() =>
+																					handleSelectHost(host.id)
+																				}
+																				className="flex-shrink-0 min-w-[44px] min-h-[44px] flex items-center justify-center"
+																			>
+																				{isSelected ? (
+																					<CheckSquare className="h-5 w-5 text-primary-600" />
+																				) : (
+																					<Square className="h-5 w-5 text-secondary-400" />
+																				)}
+																			</button>
+																		)}
+																		<div className="flex-1 min-w-0">
+																			{visibleColumns.some(
+																				(col) => col.id === "host",
+																			) && (
+																				<Link
+																					to={`/hosts/${host.id}`}
+																					className="text-base font-semibold text-secondary-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 block truncate"
+																				>
+																					{host.friendly_name || "Unnamed Host"}
+																				</Link>
+																			)}
+																			{visibleColumns.some(
+																				(col) => col.id === "hostname",
+																			) &&
+																				host.hostname && (
+																					<div className="text-sm text-secondary-500 dark:text-secondary-400 font-mono truncate">
+																						{host.hostname}
+																					</div>
+																				)}
+																		</div>
+																	</div>
+																	{visibleColumns.some(
+																		(col) => col.id === "actions",
+																	) && (
+																		<Link
+																			to={`/hosts/${host.id}`}
+																			className="btn-primary text-sm px-3 py-2 min-h-[44px] flex items-center gap-1 flex-shrink-0"
+																		>
+																			View
+																			<ExternalLink className="h-4 w-4" />
+																		</Link>
+																	)}
+																</div>
+
+																{/* Status and connection info */}
+																<div className="flex flex-wrap items-center gap-2">
+																	{visibleColumns.some(
+																		(col) => col.id === "status",
+																	) && (
+																		<span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-secondary-100 text-secondary-700 dark:bg-secondary-700 dark:text-secondary-300">
+																			{(host.effectiveStatus || host.status)
+																				.charAt(0)
+																				.toUpperCase() +
+																				(
+																					host.effectiveStatus || host.status
+																				).slice(1)}
+																		</span>
+																	)}
+																	{visibleColumns.some(
+																		(col) => col.id === "ws_status",
+																	) &&
+																		wsStatus && (
+																			<span
+																				className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
+																					wsStatus.connected
+																						? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+																						: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+																				}`}
+																			>
+																				<div
+																					className={`w-2 h-2 rounded-full ${wsStatus.connected ? "mr-1.5" : "mr-1.5 md:mr-0"} ${
+																						wsStatus.connected
+																							? "bg-green-500 animate-pulse"
+																							: "bg-red-500"
+																					}`}
+																				></div>
+																				<span className="hidden md:inline">
+																					{wsStatus.connected
+																						? wsStatus.secure
+																							? "WSS"
+																							: "WS"
+																						: "Offline"}
+																				</span>
+																			</span>
+																		)}
+																	{visibleColumns.some(
+																		(col) => col.id === "needs_reboot",
+																	) &&
+																		(host.needs_reboot ? (
+																			<span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
+																				<RotateCcw className="h-3 w-3" />
+																				Reboot Required
+																			</span>
+																		) : null)}
+																</div>
+
+																{/* OS and Group info */}
+																<div className="flex flex-wrap items-center gap-3 text-sm">
+																	{visibleColumns.some(
+																		(col) => col.id === "os",
+																	) && (
+																		<div className="flex items-center gap-2">
+																			<OSIcon
+																				osType={host.os_type}
+																				className="h-4 w-4"
+																			/>
+																			<span className="text-secondary-700 dark:text-secondary-300">
+																				{getOSDisplayName(host.os_type)}
+																			</span>
+																		</div>
+																	)}
+																	{visibleColumns.some(
+																		(col) => col.id === "group",
+																	) &&
+																		groups.length > 0 && (
+																			<div className="flex items-center gap-1 flex-wrap">
+																				<span className="text-secondary-500 dark:text-secondary-400">
+																					Groups:
+																				</span>
+																				{groups.map((g, idx) => (
+																					<span
+																						key={g.id}
+																						className="text-secondary-700 dark:text-secondary-300"
+																					>
+																						{g.name}
+																						{idx < groups.length - 1 ? "," : ""}
+																					</span>
+																				))}
+																			</div>
+																		)}
+																</div>
+
+																{/* Updates info */}
+																<div className="flex items-center gap-4 pt-2 border-t border-secondary-200 dark:border-secondary-600">
+																	{visibleColumns.some(
+																		(col) => col.id === "updates",
+																	) && (
+																		<button
+																			type="button"
+																			onClick={() =>
+																				navigate(
+																					`/packages?host=${host.id}&filter=outdated`,
+																				)
+																			}
+																			className="text-sm text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300 font-medium min-h-[44px] flex items-center"
+																		>
+																			{host.updatesCount || 0} Updates
+																		</button>
+																	)}
+																	{visibleColumns.some(
+																		(col) => col.id === "security_updates",
+																	) && (
+																		<button
+																			type="button"
+																			onClick={() =>
+																				navigate(
+																					`/packages?host=${host.id}&filter=security-updates`,
+																				)
+																			}
+																			className="text-sm text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium min-h-[44px] flex items-center"
+																		>
+																			{host.securityUpdatesCount || 0} Security
+																		</button>
+																	)}
+																	{visibleColumns.some(
+																		(col) => col.id === "last_update",
+																	) && (
+																		<div className="text-xs text-secondary-500 dark:text-secondary-400 ml-auto">
+																			Updated{" "}
+																			{formatRelativeTime(host.last_update)}
+																		</div>
+																	)}
+																</div>
+															</div>
+														);
+													})}
+												</div>
+
+												{/* Desktop Table Layout */}
+												<div className="hidden md:block overflow-x-auto">
+													<table
+														className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600"
+														style={{ minWidth: "max-content" }}
+													>
 														<thead className="bg-secondary-50 dark:bg-secondary-700">
 															<tr>
 																{visibleColumns.map((column) => (
 																	<th
 																		key={column.id}
-																		className="px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider"
+																		className="px-3 sm:px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider whitespace-nowrap"
 																	>
 																		{column.id === "select" ? (
 																			<button
@@ -1842,7 +2069,7 @@ const Hosts = () => {
 																		{visibleColumns.map((column) => (
 																			<td
 																				key={column.id}
-																				className="px-4 py-2 whitespace-nowrap text-center"
+																				className="px-3 sm:px-4 py-2 whitespace-nowrap text-center"
 																			>
 																				{renderCellContent(column, host)}
 																			</td>
@@ -2184,7 +2411,6 @@ const ColumnSettingsModal = ({
 								key={column.id}
 								type="button"
 								draggable
-								tabIndex={0}
 								aria-label={`Drag to reorder ${column.label} column`}
 								onDragStart={(e) => handleDragStart(e, index)}
 								onDragOver={handleDragOver}
@@ -2195,7 +2421,7 @@ const ColumnSettingsModal = ({
 										// Focus handling for keyboard users
 									}
 								}}
-								className={`flex items-center justify-between p-2.5 border rounded-lg cursor-move w-full text-left transition-colors ${
+								className={`flex items-center justify-between p-2.5 border rounded-lg cursor-move w-full transition-colors ${
 									draggedIndex === index
 										? "opacity-50"
 										: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -2209,12 +2435,20 @@ const ColumnSettingsModal = ({
 								</div>
 								<button
 									type="button"
-									onClick={() => onToggleVisibility(column.id)}
-									className={`p-1 rounded transition-colors flex-shrink-0 ${
+									onClick={(e) => {
+										e.stopPropagation();
+										onToggleVisibility(column.id);
+									}}
+									className={`p-1 rounded transition-colors flex-shrink-0 min-w-[44px] min-h-[44px] flex items-center justify-center ${
 										column.visible
 											? "text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
 											: "text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
 									}`}
+									aria-label={
+										column.visible
+											? `Hide ${column.label} column`
+											: `Show ${column.label} column`
+									}
 								>
 									{column.visible ? (
 										<EyeIcon className="h-4 w-4" />