diff --git a/src/main/components/TaskCell.tsx b/src/main/components/TaskCell.tsx
index e63db7e..d9d187f 100644
--- a/src/main/components/TaskCell.tsx
+++ b/src/main/components/TaskCell.tsx
@@ -32,38 +32,27 @@ interface TaskCellProps {
 
 const TaskCell: React.FC<TaskCellProps> = ({task, removeTask, inputRef, handleTaskNameChange, projectName, status, taskStatuses, editTaskStatus}) => {
 
-	document.documentElement.style.setProperty("--task-color", status.color);
-	document.documentElement.style.setProperty(
-		"--task-background",
-		`${status.color}33`
-	);
-	document.documentElement.style.setProperty(
-		"--dark-task-text-color",
-		transColor(status.color, -40)
-	);
-	document.documentElement.style.setProperty(
-		"--light-task-text-color",
-		transColor(status.color, 25)
-	);
-	document.documentElement.style.setProperty(
-		"--light-task-background-color",
-		`${transColor(status.color, 25)}33`
-	);
+	const taskColor = status.color;
+    const taskBackground = `${status.color}33`;
+    const darkTaskTextColor = transColor(status.color, -40);
+    const lightTaskTextColor = transColor(status.color, 25);
+    const lightTaskBackgroundColor = `${transColor(status.color, 25)}33`;
 
 	return (
-		<div className="task-cell">
-			<div className="task-cell-header">
+		<div className="task-cell" style={{backgroundColor: taskBackground}}>
+			<div className="task-cell-header" style={{backgroundColor: taskBackground, color: lightTaskTextColor}}>
 				{projectName}
-				<select className="task-cell-status-indicator" onChange={(e) => editTaskStatus(task.id, e.target.value)}>
+				<select className="task-cell-status-indicator" style={{ border: `1px solid ${lightTaskTextColor}`, color: lightTaskTextColor }} onChange={(e) => editTaskStatus(task.id, e.target.value)} defaultValue={status.id}>
 					{taskStatuses.map((status) => (
-						<option key={status.id} value={status.id} selected={status.id === task.status.id}>
+						<option key={status.id} value={status.id}>
 							{status.name}
 						</option>
 					))}
 				</select>
 				</div>
-			<div className="task-cell-content">
+			<div className="task-cell-content" >
 				<input
+					style={{color: lightTaskTextColor}}
 					placeholder="Task Name"
 					onBlur={(e) => {
 						if (e.target.value === "") removeTask(task.id);
diff --git a/styles.css b/styles.css
index 3506895..cf51acd 100644
--- a/styles.css
+++ b/styles.css
@@ -67,7 +67,6 @@
 /* Task Cell */
 
 .task-cell {
-	background: var(--task-background);
 	opacity: 0.8;
   border-radius: 8px;
   padding: 4px;
@@ -77,10 +76,8 @@
 }
 
 .task-cell-header {
-  background: var(--task-background);
   border-radius: 6px;
   margin-bottom: 4px;
-  color: var(--light-task-text-color);
   padding-left: 4px;
   display: flex;
   justify-content: space-between;
@@ -89,36 +86,28 @@
 .task-cell-content input {
   background: transparent;
   border: none;
-  color: var(--light-task-text-color);
   margin-bottom: 4px;
   font-size: 14px;
   width: 100%;
 }
 
-.task-cell-content input::placeholder {
-  color: var(--light-task-text-color);
-  opacity: 0.5;
+.task-cell-status-indicator:hover {
+  background: rgba(255, 255, 255, .1)
 }
 
 .task-cell-status-indicator {
   padding-right: 4px;
   padding-left: 4px;
-  border: var(--light-task-text-color) solid 1px;
   border-radius: 6px;
   height: min-content;
-  color: var(--light-task-text-color);
   background-color: transparent;
+  text-align: center;
 }
 
 .task-cell-status-indicator:hover {
-  background-color: var(--light-task-background-color);
   cursor: pointer;
 }
 
-.task-cell-status-indicator:focus {
-  background-color: var(--light-task-background-color);
-}
-
 /* Table */
 .table-container {
 	border: var(--border-width) solid var(--background-modifier-border);