diff --git a/frontend/src/components/DashboardSettingsModal.jsx b/frontend/src/components/DashboardSettingsModal.jsx
index 72acd8a..c80122f 100644
--- a/frontend/src/components/DashboardSettingsModal.jsx
+++ b/frontend/src/components/DashboardSettingsModal.jsx
@@ -257,9 +257,11 @@ const DashboardSettingsModal = ({ isOpen, onClose }) => {
 	return (
 		<div className="fixed inset-0 z-50 overflow-y-auto">
 			<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-				<div
-					className="fixed inset-0 bg-secondary-500 bg-opacity-75 transition-opacity"
+				<button
+					type="button"
+					className="fixed inset-0 bg-secondary-500 bg-opacity-75 transition-opacity cursor-default"
 					onClick={onClose}
+					aria-label="Close modal"
 				/>
 
 				<div className="inline-block align-bottom bg-white dark:bg-secondary-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 64733cc..182bd41 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -308,9 +308,11 @@ const Layout = ({ children }) => {
 			<div
 				className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? "block" : "hidden"}`}
 			>
-				<div
-					className="fixed inset-0 bg-secondary-600 bg-opacity-75"
+				<button
+					type="button"
+					className="fixed inset-0 bg-secondary-600 bg-opacity-75 cursor-default"
 					onClick={() => setSidebarOpen(false)}
+					aria-label="Close sidebar"
 				/>
 				<div className="relative flex w-full max-w-xs flex-col bg-white pb-4 pt-5 shadow-xl">
 					<div className="absolute right-0 top-0 -mr-12 pt-2">
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index a1439bc..ab0d3f1 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -342,9 +342,16 @@ const Dashboard = () => {
 				);
 			case "totalHosts":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleTotalHostsClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleTotalHostsClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -359,14 +366,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "hostsNeedingUpdates":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleHostsNeedingUpdatesClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleHostsNeedingUpdatesClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -381,14 +395,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "totalOutdatedPackages":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleOutdatedPackagesClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleOutdatedPackagesClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -403,14 +424,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "securityUpdates":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleSecurityUpdatesClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleSecurityUpdatesClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -425,14 +453,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "totalHostGroups":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleHostGroupsClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleHostGroupsClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -447,14 +482,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "totalUsers":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleUsersClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleUsersClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -469,14 +511,21 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "totalRepos":
 				return (
-					<div
-						className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleRepositoriesClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleRepositoriesClick();
+							}
+						}}
 					>
 						<div className="flex items-center">
 							<div className="flex-shrink-0">
@@ -491,18 +540,25 @@ const Dashboard = () => {
 								</p>
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "erroredHosts":
 				return (
-					<div
-						className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 ${
+					<button
+						type="button"
+						className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left ${
 							stats.cards.erroredHosts > 0
 								? "bg-danger-50 border-danger-200"
 								: "bg-success-50 border-success-200"
 						}`}
 						onClick={handleErroredHostsClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleErroredHostsClick();
+							}
+						}}
 					>
 						<div className="flex">
 							<AlertTriangle
@@ -538,18 +594,25 @@ const Dashboard = () => {
 								)}
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "offlineHosts":
 				return (
-					<div
-						className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 ${
+					<button
+						type="button"
+						className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left ${
 							stats.cards.offlineHosts > 0
 								? "bg-warning-50 border-warning-200"
 								: "bg-success-50 border-success-200"
 						}`}
 						onClick={handleOfflineHostsClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleOfflineHostsClick();
+							}
+						}}
 					>
 						<div className="flex">
 							<WifiOff
@@ -583,14 +646,21 @@ const Dashboard = () => {
 								)}
 							</div>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "osDistribution":
 				return (
-					<div
-						className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleOSDistributionClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleOSDistributionClick();
+							}
+						}}
 					>
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							OS Distribution
@@ -598,14 +668,21 @@ const Dashboard = () => {
 						<div className="h-64">
 							<Pie data={osChartData} options={chartOptions} />
 						</div>
-					</div>
+					</button>
 				);
 
 			case "osDistributionBar":
 				return (
-					<div
-						className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleOSDistributionClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleOSDistributionClick();
+							}
+						}}
 					>
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							OS Distribution
@@ -613,14 +690,21 @@ const Dashboard = () => {
 						<div className="h-64">
 							<Bar data={osBarChartData} options={barChartOptions} />
 						</div>
-					</div>
+					</button>
 				);
 
 			case "updateStatus":
 				return (
-					<div
-						className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handleUpdateStatusClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleUpdateStatusClick();
+							}
+						}}
 					>
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							Update Status
@@ -631,14 +715,21 @@ const Dashboard = () => {
 								options={updateStatusChartOptions}
 							/>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "packagePriority":
 				return (
-					<div
-						className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+					<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"
 						onClick={handlePackagePriorityClick}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handlePackagePriorityClick();
+							}
+						}}
 					>
 						<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
 							Package Priority
@@ -649,7 +740,7 @@ const Dashboard = () => {
 								options={packagePriorityChartOptions}
 							/>
 						</div>
-					</div>
+					</button>
 				);
 
 			case "quickStats": {
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
index 2c3a2bd..1bdc1fa 100644
--- a/frontend/src/pages/Hosts.jsx
+++ b/frontend/src/pages/Hosts.jsx
@@ -1559,8 +1559,9 @@ const Hosts = () => {
 
 			{/* Stats Summary */}
 			<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
-				<div
-					className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+				<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"
 					onClick={handleTotalHostsClick}
 				>
 					<div className="flex items-center">
@@ -1574,9 +1575,10 @@ const Hosts = () => {
 							</p>
 						</div>
 					</div>
-				</div>
-				<div
-					className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+				</button>
+				<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"
 					onClick={handleUpToDateClick}
 				>
 					<div className="flex items-center">
@@ -1591,9 +1593,10 @@ const Hosts = () => {
 							</p>
 						</div>
 					</div>
-				</div>
-				<div
-					className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+				</button>
+				<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"
 					onClick={handleNeedsUpdatesClick}
 				>
 					<div className="flex items-center">
@@ -1607,9 +1610,10 @@ const Hosts = () => {
 							</p>
 						</div>
 					</div>
-				</div>
-				<div
-					className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+				</button>
+				<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"
 					onClick={handleStaleClick}
 				>
 					<div className="flex items-center">
@@ -1623,7 +1627,7 @@ const Hosts = () => {
 							</p>
 						</div>
 					</div>
-				</div>
+				</button>
 			</div>
 
 			{/* Hosts List */}
@@ -2298,9 +2302,18 @@ const ColumnSettingsModal = ({
 							<div
 								key={column.id}
 								draggable
+								tabIndex={0}
+								role="button"
+								aria-label={`Drag to reorder ${column.label} column`}
 								onDragStart={(e) => handleDragStart(e, index)}
 								onDragOver={handleDragOver}
 								onDrop={(e) => handleDrop(e, index)}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										// Focus handling for keyboard users
+									}
+								}}
 								className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
 									draggedIndex === index
 										? "opacity-50"