diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 6c3627842..09c91c7ca 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,11 +24,11 @@ export default function AlertDropdown({}: AlertDropdownType) {
 	return (
 		<div
 			ref={componentRef}
-			className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+			className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
 		>
 			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
 				Notifications
-				<div className="flex gap-2 pr-3 ">
+				<div className="flex gap-3 pr-3 ">
 					<button
 						className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
 						onClick={() => {
@@ -46,7 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
 					</button>
 				</div>
 			</div>
-			<div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+			<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
 				{notificationList.length !== 0 ? (
 					notificationList.map((alertItem, index) => (
 						<SingleAlert
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 94e71a98e..6c5136238 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,16 +39,16 @@ export default function ErrorAlert({
 						removeAlert(id);
 					}, 500);
 				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4 cursor-pointer"
+				className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-600/50 p-4 cursor-pointer"
 			>
 				<div className="flex">
 					<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">{title}</h3>
+						<h3 className="text-sm font-medium text-red-800 dark:text-white/80">{title}</h3>
 						{list.length !== 0 ? (
-							<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">
 									{list.map((item, index) => (
 										<li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 3c5095339..c0ce260de 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
 					setShow(false);
 					removeAlert(id);
 				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"
+				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-600/50 p-4"
 			>
 				<div className="flex">
 					<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">{title}</p>
+						<p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
 						<p className="mt-3 text-sm md:mt-0 md:ml-6">
 							{link !== "" ? (
 								<Link
 									to={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 hover:dark:text-blue-10 hover:text-blue-600"
 								>
 									Details
 								</Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 80b98b05d..d5b5ec60e 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
 					setShow(false);
 					removeAlert(id);
 				}}
-				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"
+				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-600/50 p-4"
 			>
 				<div className="flex">
 					<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">{title}</p>
+						<p className="text-sm font-medium text-green-800 dark:text-white/80">{title}</p>
 					</div>
 				</div>
 			</div>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index f904e08c5..a657a1211 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -11,10 +11,10 @@ export default function DisclosureComponent({
 			{({ open }) => (
 				<>
 					<div>
-						<Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+						<Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
 							<div className="flex gap-4">
-								<Icon className="w-6 text-gray-800 dark:text-white" />
-								<span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
+								<Icon className="w-6 text-gray-800 dark:text-white/80" />
+								<span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
 									{title}
 								</span>
 							</div>
diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index 964ab440c..e60768baf 100644
--- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -37,7 +37,7 @@ export default function TabComponent({
 						</button>
 					</div>
 				) : (
-					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
+					<div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
 								autoFocus