diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 6bf9bee57..592556013 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,21 +30,21 @@ export default function SingleAlert({
 		>
 			{type === "error" ? (
 				<div
-					className="flex bg-red-50 rounded-md p-3 mb-2 mx-2"
+					className="flex bg-red-50 dark:bg-red-600/50 rounded-md p-3 mb-2 mx-2"
 					key={dropItem.id}
 				>
 					<div className="flex-shrink-0">
-						<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+						<XCircleIcon className="h-5 w-5 text-red-400 dark:text-red-50" aria-hidden="true" />
 					</div>
 					<div className="ml-3">
-						<h3 className="text-sm font-medium text-red-800">
+						<h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
 							{dropItem.title}
 						</h3>
 						{dropItem.list ? (
-							<div className="mt-2 text-sm text-red-700">
+							<div className="mt-2 text-sm text-red-700 dark:text-red-50">
 								<ul className="list-disc space-y-1 pl-5">
 									{dropItem.list.map((item, idx) => (
-										<li key={idx}>{item}</li>
+										<li className="break-words" key={idx}>{item}</li>
 									))}
 								</ul>
 							</div>
@@ -62,7 +62,7 @@ export default function SingleAlert({
 										removeAlert(dropItem.id);
 									}, 500);
 								}}
-								className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+								className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
 							>
 								<span className="sr-only">Dismiss</span>
 								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -72,22 +72,22 @@ export default function SingleAlert({
 				</div>
 			) : type === "notice" ? (
 				<div
-					className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2"
+					className="flex rounded-md bg-blue-50 dark:bg-blue-600/50 p-3 mb-2 mx-2"
 					key={dropItem.id}
 				>
 					<div className="flex-shrink-0">
 						<InformationCircleIcon
-							className="h-5 w-5 text-blue-400"
+							className="h-5 w-5 text-blue-400 dark:text-blue-50"
 							aria-hidden="true"
 						/>
 					</div>
 					<div className="ml-3 flex-1 md:flex md:justify-between">
-						<p className="text-sm text-blue-700">{dropItem.title}</p>
+						<p className="text-sm text-blue-700 dark:text-white/80">{dropItem.title}</p>
 						<p className="mt-3 text-sm md:mt-0 md:ml-6">
 							{dropItem.link ? (
 								<Link
 									to={dropItem.link}
-									className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
+									className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
 								>
 									Details
 								</Link>
@@ -106,7 +106,7 @@ export default function SingleAlert({
 										removeAlert(dropItem.id);
 									}, 500);
 								}}
-								className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
+								className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
 							>
 								<span className="sr-only">Dismiss</span>
 								<XMarkIcon className="h-5 w-5" aria-hidden="true" />
@@ -116,17 +116,17 @@ export default function SingleAlert({
 				</div>
 			) : (
 				<div
-					className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md"
+					className="flex bg-green-50 dark:bg-green-600/50 p-3 mb-2 mx-2 rounded-md"
 					key={dropItem.id}
 				>
 					<div className="flex-shrink-0">
 						<CheckCircleIcon
-							className="h-5 w-5 text-green-400"
+							className="h-5 w-5 text-green-400 dark:text-green-50"
 							aria-hidden="true"
 						/>
 					</div>
 					<div className="ml-3">
-						<p className="text-sm font-medium text-green-800">
+						<p className="text-sm font-medium text-green-800 dark:bg-white/80">
 							{dropItem.title}
 						</p>
 					</div>
@@ -140,7 +140,7 @@ export default function SingleAlert({
 										removeAlert(dropItem.id);
 									}, 500);
 								}}
-								className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
+								className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
 							>
 								<span className="sr-only">Dismiss</span>
 								<XMarkIcon className="h-5 w-5" aria-hidden="true" />