diff --git a/frontend/web/app/dashboard/services/page.tsx b/frontend/web/app/dashboard/services/page.tsx
index f2654b16..eaae2ea3 100644
--- a/frontend/web/app/dashboard/services/page.tsx
+++ b/frontend/web/app/dashboard/services/page.tsx
@@ -40,7 +40,7 @@ const ServiceLine = ({
 				onChange={() => setSelectedServiceId(service.id)}
 			/>
 
-			<div className="collapse-title text-2xl font-medium flex">
+			<div className="m-2 collapse-title text-2xl font-medium flex bg-neutral rounded-lg w-full">
 				<div className="avatar">
 					<div className="mask mask-squircle w-8 h-8">
 						<Image src={service.imageUrl} alt="Service logo" width={500} height={500} />
diff --git a/frontend/web/app/editor/page.tsx b/frontend/web/app/editor/page.tsx
index 9f9f934e..cac18a49 100644
--- a/frontend/web/app/editor/page.tsx
+++ b/frontend/web/app/editor/page.tsx
@@ -20,7 +20,7 @@ const EditorPage = () => {
 	}, []);
 
 	return (
-		<div className="bg-neutral text-neutral-content min-h-screen  w-screen justify-center items-center">
+		<div className="bg-primary text-neutral-content min-h-screen  w-screen justify-center items-center">
 			<div className="pt-7">
 				<EditorCards />
 			</div>
diff --git a/frontend/web/components/Footer.tsx b/frontend/web/components/Footer.tsx
index 7f9cc91c..0f5600d9 100644
--- a/frontend/web/components/Footer.tsx
+++ b/frontend/web/components/Footer.tsx
@@ -3,7 +3,7 @@ import FontAwesomeIcon from "@/components/FontAwesomeIcon";
 import ApkDownloadButton from "@/components/ApkDownloadButton";
 
 const Footer = () => (
-	<footer className="footer p-10 bg-primary text-primary-content">
+	<footer className="footer p-10 bg-neutral text-primary-content">
 		<aside>
 			<Image src="/logo.png" alt="Area logo" width={50} height={50} />
 			<p>
diff --git a/frontend/web/components/Navbar.tsx b/frontend/web/components/Navbar.tsx
index ce85b380..b7ef12d1 100644
--- a/frontend/web/components/Navbar.tsx
+++ b/frontend/web/components/Navbar.tsx
@@ -25,7 +25,7 @@ const Navbar = ({ beforeLogoContent, hasLogo = true, centerContent, endContent }
 	}, [interfaceLanguage]);
 
 	return (
-		<div className="navbar bg-primary">
+		<div className="navbar bg-neutral">
 			<div className="navbar-start">
 				{beforeLogoContent}
 				{hasLogo ? (
diff --git a/frontend/web/components/dashboard/menu/DashboardMenuElements.tsx b/frontend/web/components/dashboard/menu/DashboardMenuElements.tsx
index de9dda08..87b538ac 100644
--- a/frontend/web/components/dashboard/menu/DashboardMenuElements.tsx
+++ b/frontend/web/components/dashboard/menu/DashboardMenuElements.tsx
@@ -13,7 +13,7 @@ type DashboardMenuElementProps = {
 
 const DashboardMenuLink = ({ icon, title, href, isFull }: DashboardMenuElementProps) => (
 	<li>
-		<Link className={isFull ? "" : "justify-center"} href={href}>
+		<Link className={isFull ? "" : "justify-center text-base-100"} href={href}>
 			<FontAwesomeIcon icon={icon} svgProps={isFull ? undefined : { className: "h-6 w-6" }} />
 			{isFull ? title : ""}
 		</Link>
@@ -22,7 +22,7 @@ const DashboardMenuLink = ({ icon, title, href, isFull }: DashboardMenuElementPr
 
 const DashboardMenuButton = ({ icon, title, href, isFull, onClick }: DashboardMenuElementProps) => (
 	<Link className="justify-center" href={href} onClick={onClick}>
-		<button className={`btn btn-secondary ${isFull ? "btn-wide" : ""}`}>
+		<button className={`btn btn-secondary text-base-100 ${isFull ? "btn-wide" : ""}`}>
 			<FontAwesomeIcon icon={icon} /> {isFull ? title : ""}
 		</button>
 	</Link>
diff --git a/frontend/web/components/editor/EditorNavbar.tsx b/frontend/web/components/editor/EditorNavbar.tsx
index 155e618b..72e293ae 100644
--- a/frontend/web/components/editor/EditorNavbar.tsx
+++ b/frontend/web/components/editor/EditorNavbar.tsx
@@ -45,7 +45,7 @@ const EditorNavbar = ({ isAuthenticated }: EditorNavbarProps) => {
 						<FontAwesomeIcon icon="chevron-left" />
 					</button>
 					<input
-						className="input w-full max-w-xs"
+						className="input w-full max-w-xs bg-primary"
 						type="text"
 						value={workflow.name}
 						onChange={(e) => setWorkflow((prev) => ({ ...prev, name: e.target.value }))}
@@ -63,11 +63,11 @@ const EditorNavbar = ({ isAuthenticated }: EditorNavbarProps) => {
 						<input
 							type="checkbox"
 							name="workflow-running"
-							className="toggle toggle-success mr-6"
+							className="toggle toggle-success mr-6 bg-primary"
 							checked={workflow.active}
 							onChange={onToggleWorkflow}
 						/>
-						<button className="btn btn-secondary" onClick={onSaveWorkflow}>
+						<button className="btn btn-secondary text-base-100" onClick={onSaveWorkflow}>
 							{t("actions.save")}
 						</button>
 					</>
diff --git a/frontend/web/components/editor/EditorSeparator.tsx b/frontend/web/components/editor/EditorSeparator.tsx
index 2771de31..e5445aa1 100644
--- a/frontend/web/components/editor/EditorSeparator.tsx
+++ b/frontend/web/components/editor/EditorSeparator.tsx
@@ -29,7 +29,7 @@ const EditorSeparator = ({ previousId }: { previousId: string }) => {
 			</div>
 
 			<div className="flex w-full justify-center">
-				<button className="btn btn-circle btn-sm" onClick={onClick}>
+				<button className="btn btn-circle btn-sm bg-accent border-accent" onClick={onClick}>
 					<FontAwesomeIcon icon="plus" svgProps={{ className: "h-6 w-6" }} />
 				</button>
 			</div>
diff --git a/frontend/web/components/editor/EditorStepCardWrapper.tsx b/frontend/web/components/editor/EditorStepCardWrapper.tsx
index 821ba359..630cb2f8 100644
--- a/frontend/web/components/editor/EditorStepCardWrapper.tsx
+++ b/frontend/web/components/editor/EditorStepCardWrapper.tsx
@@ -13,7 +13,7 @@ const EditorStepCardWrapper = ({ title, children, actions }: EditorStepCardWrapp
 	const { t } = useTranslation();
 
 	return (
-		<div className="card mx-auto w-2/3 shadow-2xl">
+		<div className="card mx-auto w-2/3 shadow-2xl bg-neutral">
 			<div className="card-body items-center pt-3">
 				<div className="flex w-full mb-5">
 					<p className="card-title justify-center text-2xl ml-2">
diff --git a/frontend/web/components/editor/EditorSummaryCard.tsx b/frontend/web/components/editor/EditorSummaryCard.tsx
index 994cdef3..2dd66b3d 100644
--- a/frontend/web/components/editor/EditorSummaryCard.tsx
+++ b/frontend/web/components/editor/EditorSummaryCard.tsx
@@ -12,14 +12,14 @@ type EditorSummaryCardProps = {
 	service?: EditorWorkflowElementService;
 };
 const EditorSummaryCard = ({ title, description, onClick, icon, service }: EditorSummaryCardProps) => (
-	<div className="card mx-auto w-96 shadow-2xl cursor-pointer" onClick={onClick}>
+	<div className="card mx-auto w-96 shadow-2xl cursor-pointer bg-neutral" onClick={onClick}>
 		<div className="card-body bg-pimary">
 			<div className="flex bg-pimary">
-				<div className="card shadow-xl">
+				<div className="card shadow-xl bg-primary">
 					{service ? (
-						<div className="card-body p-3">
+						<div className="card-body p-3 bg-primary rounded-xl">
 							<div className="avatar m-auto">
-								<div className="mask mask-squircle w-16 h-16">
+								<div className="mask mask-squircle w-16 h-16 bg-primary">
 									<Image src={service.imageUrl} alt="Service logo" width={300} height={300} />
 								</div>
 							</div>
diff --git a/frontend/web/components/landing/GeneralHero.tsx b/frontend/web/components/landing/GeneralHero.tsx
index cb9ed83d..aca21612 100644
--- a/frontend/web/components/landing/GeneralHero.tsx
+++ b/frontend/web/components/landing/GeneralHero.tsx
@@ -2,17 +2,17 @@ import Image from "next/image";
 import Link from "next/link";
 
 const LandingGeneralHero = () => (
-	<div className="hero min-h-screen bg-accent">
+	<div className="hero min-h-screen bg-primary">
 		<div className="hero-content text-center">
 			<div className="max-w-lg">
-				<h1 className="text-5xl font-extrabold">CREATE, AUTOMATE,</h1>
-				<h1 className="text-7xl font-extrabold leading-relaxed">SUCCEED</h1>
-				<p className="py-6">
+				<h1 className="text-5xl font-extrabold text-base-100">CREATE, AUTOMATE,</h1>
+				<h1 className="text-7xl font-extrabold leading-relaxed text-base-100">SUCCEED</h1>
+				<p className="py-6 text-base-100">
 					Unlock boundless innovation and creativity with AREA. Our revolutionary software empowers you to turn ideas
 					into reality, automate tasks, and achieve excellence effortlessly. Join us on a journey where the
 					extraordinary becomes routine.
 				</p>
-				<Link href="/dashboard" className="btn btn-secondary">
+				<Link href="/dashboard" className="btn btn-secondary text-base-100">
 					Get Started
 				</Link>
 				<Image src="/landing/main.webp" width="1168" height="657" alt="landing-image" className="w-lg" />
diff --git a/frontend/web/components/library/LibraryWorkflowLine.tsx b/frontend/web/components/library/LibraryWorkflowLine.tsx
index 737c2805..9f3e2c5d 100644
--- a/frontend/web/components/library/LibraryWorkflowLine.tsx
+++ b/frontend/web/components/library/LibraryWorkflowLine.tsx
@@ -107,7 +107,7 @@ const LibraryWorkflowLine = ({ workflow, selected, onSelect, onWorkflowChange }:
 					<input
 						type="checkbox"
 						name="workflow-selector"
-						className="checkbox border-primary"
+						className="checkbox border-accent"
 						checked={selected}
 						onChange={(e) => onSelect(workflow.id, e.target.checked)}
 					/>
@@ -138,7 +138,7 @@ const LibraryWorkflowLine = ({ workflow, selected, onSelect, onWorkflowChange }:
 					<summary className="btn btn-ghost btn-xs">
 						<FontAwesomeIcon icon="ellipsis" />
 					</summary>
-					<ul className="dropdown-content z-[1] menu p-2 shadow-xl bg-base-content rounded-box w-52">
+					<ul className="dropdown-content z-[1] menu p-2 shadow-xl bg-neutral rounded-box w-52">
 						<li>
 							<a className="hover:text-neutral-content" onClick={onClickRename}>
 								<FontAwesomeIcon icon="input-text" />
diff --git a/frontend/web/layouts/auth/AuthLayout.tsx b/frontend/web/layouts/auth/AuthLayout.tsx
index 9762be61..628699e6 100644
--- a/frontend/web/layouts/auth/AuthLayout.tsx
+++ b/frontend/web/layouts/auth/AuthLayout.tsx
@@ -51,7 +51,7 @@ const AuthLayout = () => {
 							<Image alt="Profile picture" width="100" height="100" src="/user/default-profile-picture.webp" />
 						</div>
 					</label>
-					<ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+					<ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52 bg-neutral">
 						<li>
 							<Link href="/dashboard/user">
 								<FontAwesomeIcon icon="gear" />
diff --git a/frontend/web/layouts/dashboard/DashboardPageWrapper.tsx b/frontend/web/layouts/dashboard/DashboardPageWrapper.tsx
index 995231d4..81228a4a 100644
--- a/frontend/web/layouts/dashboard/DashboardPageWrapper.tsx
+++ b/frontend/web/layouts/dashboard/DashboardPageWrapper.tsx
@@ -5,8 +5,8 @@ type AppPageWrapperProps = {
 	children?: ReactNode;
 };
 const DashboardPageWrapper = ({ title, children }: AppPageWrapperProps) => (
-	<div className="bg-neutral text-neutral-content w-screen justify-center items-center">
-		<h1 className="text-3xl font-bold m-5">{title}</h1>
+	<div className="bg-primary text-neutral-content w-screen justify-center items-center">
+		<h1 className="text-3xl font-bold m-5 text-center text-base-100">{title}</h1>
 		{children}
 	</div>
 );
diff --git a/frontend/web/layouts/editor/EditorCards.tsx b/frontend/web/layouts/editor/EditorCards.tsx
index 325ed43f..b5eff2fc 100644
--- a/frontend/web/layouts/editor/EditorCards.tsx
+++ b/frontend/web/layouts/editor/EditorCards.tsx
@@ -12,7 +12,7 @@ const EditorCards = () => {
 	const [workflow] = useAtom(editorWorkflowAtom);
 
 	return (
-		<div className="bg-neutral">
+		<div>
 			<ActionCard />
 			<EditorSeparator previousId={workflow.action.id} />
 			{getSortedReactions(workflow.reactions, workflow.action.id).map((reaction) => (
diff --git a/frontend/web/layouts/editor/EditorSelectEventAndAccount.tsx b/frontend/web/layouts/editor/EditorSelectEventAndAccount.tsx
index 56a35187..846d0a20 100644
--- a/frontend/web/layouts/editor/EditorSelectEventAndAccount.tsx
+++ b/frontend/web/layouts/editor/EditorSelectEventAndAccount.tsx
@@ -157,13 +157,13 @@ const EditorSelectEventAndAccount = ({
 
 				<div className="card-actions">
 					<button
-						className="btn btn-outline btn-neutral text-neutral-content hover:text-neutral-content"
+						className="btn btn-outline btn-base-100 bg-primary text-neutral-content hover:text-neutral-content"
 						onClick={() => onEvent("back")}
 					>
 						{t("editor.back")}
 					</button>
 					<button
-						className="btn btn-primary btn-wide disabled:bg-accent"
+						className="btn btn-primary btn-wide disabled:bg-primary"
 						disabled={!selectedEventId}
 						onClick={() => onEvent("next", { id: selectedEventId!, parameters: selectedParameters })}
 					>
diff --git a/frontend/web/layouts/editor/EditorSelectServiceCard.tsx b/frontend/web/layouts/editor/EditorSelectServiceCard.tsx
index 6f401ba5..115aeb93 100644
--- a/frontend/web/layouts/editor/EditorSelectServiceCard.tsx
+++ b/frontend/web/layouts/editor/EditorSelectServiceCard.tsx
@@ -32,7 +32,7 @@ const EditorSelectServiceCard = ({
 
 			<div className="card-actions">
 				<button
-					className="btn btn-primary btn-wide disabled:bg-accent"
+					className="btn btn-primary btn-wide disabled:bg-primary"
 					disabled={!selectedServiceId}
 					onClick={() => onNextStep(serviceChoices.find((s) => s.id === selectedServiceId)!)}
 				>
diff --git a/frontend/web/layouts/user/UserSettings.tsx b/frontend/web/layouts/user/UserSettings.tsx
index 7e4a3433..89ade388 100644
--- a/frontend/web/layouts/user/UserSettings.tsx
+++ b/frontend/web/layouts/user/UserSettings.tsx
@@ -32,7 +32,7 @@ const UserSettings = ({ user }: UserSettingsProps) => {
 		<div className="w-fit ml-4">
 			<div className="mb-4">
 				<label className="label">
-					<span className="text-primary label-text">{t("user.settings.email")}</span>
+					<span className="text-base-100 label-text">{t("user.settings.email")}</span>
 				</label>
 				<input
 					type="text"
@@ -44,7 +44,7 @@ const UserSettings = ({ user }: UserSettingsProps) => {
 
 			<div className="mb-4">
 				<label className="label">
-					<span className="text-primary label-text">{t("user.settings.theme")}</span>
+					<span className="text-base-100 label-text">{t("user.settings.theme")}</span>
 				</label>
 				<select
 					className="select select-bordered select-primary bg-neutral"
@@ -63,7 +63,7 @@ const UserSettings = ({ user }: UserSettingsProps) => {
 
 			<div className="mb-6">
 				<label className="label">
-					<span className="text-primary label-text">{t("user.settings.language")}</span>
+					<span className="text-base-100 label-text">{t("user.settings.language")}</span>
 				</label>
 				<select
 					className="select select-bordered select-primary bg-neutral"
@@ -81,7 +81,7 @@ const UserSettings = ({ user }: UserSettingsProps) => {
 			</div>
 
 			<button
-				className="btn"
+				className="btn btn-secondary text-base-100"
 				onClick={async () => {
 					const settings = {
 						...userSettings,
diff --git a/frontend/web/tailwind.config.ts b/frontend/web/tailwind.config.ts
index a6e4a15d..ae6d2bd6 100644
--- a/frontend/web/tailwind.config.ts
+++ b/frontend/web/tailwind.config.ts
@@ -13,23 +13,23 @@ const config: Config = {
 			{
 				light: {
 					"color-scheme": "light",
-					primary: "#2E3244",
+					primary: "#FFFFFF",
 					secondary: "#F1895C",
-					accent: "#516079",
-					neutral: "#C5C6C6",
+					accent: "#91A0B9",
+					neutral: "#E5E6E6",
 
 					"base-100": "#2E3244",
-					"base-content": "#FFFFFF",
+					"base-content": "#2E3244",
 				},
 				dark: {
 					"color-scheme": "dark",
-					primary: "#516079",
+					primary: "#2E3244",
 					secondary: "#F1895C",
-					accent: "#2E3244",
-					neutral: "#718099",
+					accent: "#516079",
+					neutral: "#3E4254",
 
-					"base-100": "#2E3244",
-					"base-content": "#FFFFFF",
+					"base-100": "#FFFFFF",
+					"base-content": "#E5E6E6",
 				},
 			},
 		],