diff --git a/frontend/src/components/InlineMultiGroupEdit.jsx b/frontend/src/components/InlineMultiGroupEdit.jsx
index f1ba3d2..868570c 100644
--- a/frontend/src/components/InlineMultiGroupEdit.jsx
+++ b/frontend/src/components/InlineMultiGroupEdit.jsx
@@ -203,7 +203,7 @@ const InlineMultiGroupEdit = ({
 												className="mr-2 h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
 											/>
 											<span
-												className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+												className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium text-white"
 												style={{ backgroundColor: option.color }}
 											>
 												{option.name}
@@ -250,7 +250,7 @@ const InlineMultiGroupEdit = ({
 	return (
 		<div className={`flex items-center gap-1 group ${className}`}>
 			{displayGroups.length === 0 ? (
-				<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800">
+				<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-secondary-100 text-secondary-800">
 					Ungrouped
 				</span>
 			) : (
@@ -258,7 +258,7 @@ const InlineMultiGroupEdit = ({
 					{displayGroups.map((group) => (
 						<span
 							key={group.id}
-							className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+							className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium text-white"
 							style={{ backgroundColor: group.color }}
 						>
 							{group.name}
diff --git a/frontend/src/components/InlineToggle.jsx b/frontend/src/components/InlineToggle.jsx
index da160ab..d69c894 100644
--- a/frontend/src/components/InlineToggle.jsx
+++ b/frontend/src/components/InlineToggle.jsx
@@ -56,7 +56,7 @@ const InlineToggle = ({
 					type="button"
 					onClick={handleToggle}
 					disabled={isLoading}
-					className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
+					className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
 						value
 							? "bg-primary-600 dark:bg-primary-500"
 							: "bg-secondary-200 dark:bg-secondary-600"
diff --git a/frontend/src/components/settings/AgentUpdatesTab.jsx b/frontend/src/components/settings/AgentUpdatesTab.jsx
index 05af1c3..5a3e2a3 100644
--- a/frontend/src/components/settings/AgentUpdatesTab.jsx
+++ b/frontend/src/components/settings/AgentUpdatesTab.jsx
@@ -324,7 +324,7 @@ const AgentUpdatesTab = () => {
 								key={m}
 								type="button"
 								onClick={() => handleInputChange("updateInterval", m)}
-								className={`px-3 py-1.5 rounded-full text-xs font-medium border ${
+								className={`px-3 py-1.5 rounded-md text-xs font-medium border ${
 									formData.updateInterval === m
 										? "bg-primary-600 text-white border-primary-600"
 										: "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600"
diff --git a/frontend/src/components/settings/RolesTab.jsx b/frontend/src/components/settings/RolesTab.jsx
index 735aa71..b6d8b24 100644
--- a/frontend/src/components/settings/RolesTab.jsx
+++ b/frontend/src/components/settings/RolesTab.jsx
@@ -318,7 +318,7 @@ const RolePermissionsCard = ({
 							{role.role}
 						</h3>
 						{isBuiltInRole && (
-							<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
+							<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800">
 								Built-in Role
 							</span>
 						)}
diff --git a/frontend/src/components/settings/UsersTab.jsx b/frontend/src/components/settings/UsersTab.jsx
index 39f7289..8e30b85 100644
--- a/frontend/src/components/settings/UsersTab.jsx
+++ b/frontend/src/components/settings/UsersTab.jsx
@@ -179,7 +179,7 @@ const UsersTab = () => {
 															{user.username}
 														</div>
 														{user.id === currentUser?.id && (
-															<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+															<span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
 																You
 															</span>
 														)}
@@ -195,7 +195,7 @@ const UsersTab = () => {
 										</td>
 										<td className="px-6 py-4 whitespace-nowrap">
 											<span
-												className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+												className={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium ${
 													user.role === "admin"
 														? "bg-primary-100 text-primary-800"
 														: user.role === "host_manager"
diff --git a/frontend/src/pages/HostDetail.jsx b/frontend/src/pages/HostDetail.jsx
index f880acc..f5976ed 100644
--- a/frontend/src/pages/HostDetail.jsx
+++ b/frontend/src/pages/HostDetail.jsx
@@ -495,7 +495,7 @@ const HostDetail = () => {
 								{getStatusText(isStale, host.stats.outdated_packages > 0)}
 							</div>
 							{host.needs_reboot && (
-								<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
+								<span className="inline-flex items-center gap-1 px-2 py-0.5 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>
@@ -856,7 +856,7 @@ const HostDetail = () => {
 												toggleAutoUpdateMutation.mutate(!host.auto_update)
 											}
 											disabled={toggleAutoUpdateMutation.isPending}
-											className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+											className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
 												host.auto_update
 													? "bg-primary-600 dark:bg-primary-500"
 													: "bg-secondary-200 dark:bg-secondary-600"
@@ -1593,7 +1593,7 @@ const HostDetail = () => {
 																	? "Disable Docker integration"
 																	: "Enable Docker integration"
 														}
-														className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+														className={`relative inline-flex h-5 w-9 items-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
 															integrationsData?.data?.integrations?.docker
 																? "bg-primary-600 dark:bg-primary-500"
 																: "bg-secondary-200 dark:bg-secondary-600"
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
index 455acd7..6c02d97 100644
--- a/frontend/src/pages/Hosts.jsx
+++ b/frontend/src/pages/Hosts.jsx
@@ -1071,7 +1071,7 @@ const Hosts = () => {
 				const wsStatus = wsStatusMap[host.api_id];
 				if (!wsStatus) {
 					return (
-						<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
+						<span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
 							<div className="w-2 h-2 bg-gray-400 rounded-full mr-1.5"></div>
 							Unknown
 						</span>
@@ -1079,7 +1079,7 @@ const Hosts = () => {
 				}
 				return (
 					<span
-						className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+						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"
@@ -1110,12 +1110,12 @@ const Hosts = () => {
 				return (
 					<div className="flex justify-center">
 						{host.needs_reboot ? (
-							<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
+							<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" />
 								Required
 							</span>
 						) : (
-							<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+							<span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
 								<CheckCircle className="h-3 w-3" />
 								No
 							</span>
diff --git a/frontend/src/pages/PackageDetail.jsx b/frontend/src/pages/PackageDetail.jsx
index 031a06a..49778b2 100644
--- a/frontend/src/pages/PackageDetail.jsx
+++ b/frontend/src/pages/PackageDetail.jsx
@@ -426,7 +426,7 @@ const PackageDetail = () => {
 											</td>
 											<td className="px-6 py-4 whitespace-nowrap">
 												{host.needsReboot ? (
-													<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
+													<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" />
 														Required
 													</span>
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index e9f1079..ad36c93 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -206,7 +206,7 @@ const Profile = () => {
 						</p>
 						<div className="mt-2">
 							<span
-								className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+								className={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium ${
 									user?.role === "admin"
 										? "bg-primary-100 text-primary-800"
 										: user?.role === "host_manager"
@@ -400,7 +400,7 @@ const Profile = () => {
 										<button
 											type="button"
 											onClick={toggleTheme}
-											className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+											className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
 												isDark ? "bg-primary-600" : "bg-secondary-200"
 											}`}
 											role="switch"
@@ -1345,12 +1345,12 @@ const SessionsTab = () => {
 													{session.device_info?.os}
 												</h4>
 												{session.is_current_session && (
-													<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+													<span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
 														Current Session
 													</span>
 												)}
 												{session.tfa_remember_me && (
-													<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200">
+													<span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200">
 														Remembered
 													</span>
 												)}
diff --git a/frontend/src/pages/RepositoryDetail.jsx b/frontend/src/pages/RepositoryDetail.jsx
index 9f92802..fb525af 100644
--- a/frontend/src/pages/RepositoryDetail.jsx
+++ b/frontend/src/pages/RepositoryDetail.jsx
@@ -610,7 +610,7 @@ const RepositoryDetail = () => {
 											</td>
 											<td className="px-6 py-4 whitespace-nowrap">
 												{hostRepo.hosts.needs_reboot ? (
-													<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
+													<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" />
 														Required
 													</span>
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 221a7a1..fe77aa2 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -917,7 +917,7 @@ const Settings = () => {
 												key={m}
 												type="button"
 												onClick={() => handleInputChange("updateInterval", m)}
-												className={`px-3 py-1.5 rounded-full text-xs font-medium border ${
+												className={`px-3 py-1.5 rounded-md text-xs font-medium border ${
 													formData.updateInterval === m
 														? "bg-primary-600 text-white border-primary-600"
 														: "bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 border-secondary-300 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-600"
diff --git a/frontend/src/pages/settings/AlertChannels.jsx b/frontend/src/pages/settings/AlertChannels.jsx
index 05af5d1..b285523 100644
--- a/frontend/src/pages/settings/AlertChannels.jsx
+++ b/frontend/src/pages/settings/AlertChannels.jsx
@@ -32,7 +32,7 @@ const AlertChannels = () => {
 							including email, Slack, Discord, and webhooks.
 						</p>
 						<div className="mt-3">
-							<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+							<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
 								In Development
 							</span>
 						</div>
diff --git a/frontend/src/pages/settings/Notifications.jsx b/frontend/src/pages/settings/Notifications.jsx
index c3d761a..b59f0ee 100644
--- a/frontend/src/pages/settings/Notifications.jsx
+++ b/frontend/src/pages/settings/Notifications.jsx
@@ -33,7 +33,7 @@ const Notifications = () => {
 							triggers.
 						</p>
 						<div className="mt-3">
-							<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+							<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
 								In Development
 							</span>
 						</div>
diff --git a/frontend/src/pages/settings/PatchManagement.jsx b/frontend/src/pages/settings/PatchManagement.jsx
index 582a23a..11eecd7 100644
--- a/frontend/src/pages/settings/PatchManagement.jsx
+++ b/frontend/src/pages/settings/PatchManagement.jsx
@@ -34,7 +34,7 @@ const PatchManagement = () => {
 								patch policies to give you granular control over updates.
 							</p>
 							<div className="mt-3">
-								<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+								<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
 									In Development
 								</span>
 							</div>
diff --git a/frontend/src/pages/settings/SettingsMetrics.jsx b/frontend/src/pages/settings/SettingsMetrics.jsx
index 98ccde7..bd215a6 100644
--- a/frontend/src/pages/settings/SettingsMetrics.jsx
+++ b/frontend/src/pages/settings/SettingsMetrics.jsx
@@ -212,7 +212,7 @@ const SettingsMetrics = () => {
 								toggleMetricsMutation.mutate(!metricsSettings?.metrics_enabled)
 							}
 							disabled={toggleMetricsMutation.isPending}
-							className={`ml-4 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+							className={`ml-4 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
 								metricsSettings?.metrics_enabled
 									? "bg-primary-600"
 									: "bg-secondary-200 dark:bg-secondary-700"