diff --git a/client/src/assets/components/_button.scss b/client/src/assets/components/_button.scss
index edcf478..eee256d 100644
--- a/client/src/assets/components/_button.scss
+++ b/client/src/assets/components/_button.scss
@@ -8,24 +8,29 @@ button {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-}
 
-button > .svg-icon {
-	display: flex;
-	align-items: center;
-	margin-top: 1px;
-	margin-right: 0.2rem;
-}
+	&:hover {
+		background-color: var(--button-hover-bg-color);
+		color: var(--button-hover-fg-color);
+	}
 
-button:hover {
-	background-color: var(--button-hover-bg-color);
-	color: var(--button-hover-fg-color);
-}
+	&.icon {
+		padding: 0.25rem;
 
-button.icon {
-    padding: 0.25rem;
-}
+		> .svg-icon {
+			margin-right: 0;
+		}
+	}
 
-button.icon > .svg-icon {
-    margin-right: 0;
-}
\ No newline at end of file
+	&.cancel {
+		background-color: var(--button-cancel-bg-color);
+		color: var(--button-cancel-fg-color);
+	}
+
+	> .svg-icon {
+		display: flex;
+		align-items: center;
+		margin-top: 1px;
+		margin-right: 0.2rem;
+	}
+}
diff --git a/client/src/assets/components/_modal.scss b/client/src/assets/components/_modal.scss
index 2824126..1859583 100644
--- a/client/src/assets/components/_modal.scss
+++ b/client/src/assets/components/_modal.scss
@@ -17,11 +17,23 @@
 
 	&.confirm {
 		background-color: var(--confirm-overlay-bg-color);
+
+		.inner {
+			width: 25rem;
+		}
+
+		.actions {
+			margin-top: 1rem;
+
+			> button {
+				margin-left: 0.5rem;
+			}
+		}
 	}
 
 	.inner {
-		background-color: var(--box-bg-color);
-		color: var(--box-fg-color);
+		background-color: var(--modal-bg-color);
+		color: var(--modal-fg-color);
 		margin-top: 5vh;
 		box-shadow: var(--box-shadow);
 		border-radius: 0.5rem;
@@ -40,6 +52,10 @@
 		align-items: center;
 		justify-content: flex-end;
 
+		button {
+			padding: 0.5rem 1rem;
+		}
+
 		.remove {
 			margin-right: auto;
 			background-color: var(--button-remove-bg-color);
diff --git a/client/src/assets/style.scss b/client/src/assets/style.scss
index e9955d3..0f1009c 100644
--- a/client/src/assets/style.scss
+++ b/client/src/assets/style.scss
@@ -20,8 +20,10 @@
 	--box-action-fg-color: #666;
 	--box-preview-bg-color: #3988ff;
 	--box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
-	--modal-overlay-bg-color: rgba(0, 0, 0, 0.5);
-	--confirm-overlay-bg-color: rgba(0, 0, 0, 0.8);
+	--modal-overlay-bg-color: rgba(0, 0, 0, 0.3);
+	--modal-bg-color: #222;
+	--modal-fg-color: #eee;
+	--confirm-overlay-bg-color: rgba(0, 0, 0, 0.5);
 	--graph-axis-fg-color: #777;
 	--graph-grid-color: rgb(238, 238, 238);
 	--link-fg-color: #3988ff;
@@ -37,13 +39,16 @@
 		--header-spacer-color: #333;
 		--header-shadow: none;
 		--box-bg-color: #111;
+		--modal-bg-color: #222;
 		--box-fg-color: #eee;
-		--box-shadow: none;
+		--box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3);
 		--graph-axis-fg-color: #666;
 		--graph-grid-color: rgb(25, 25, 25);
 		--button-bg-color: #0b3c9f;
 		--button-fg-color: #eee;
 		--button-cancel-fg-color: #ccc;
+		--modal-overlay-bg-color: rgba(128, 128, 128, 0.3);
+		--confirm-overlay-bg-color: rgba(128, 128, 128, 0.5);
 	}
 
 	select,