diff --git a/client/web/src/components/widgets/buttons/PopoverButton.vue b/client/web/src/components/widgets/buttons/PopoverButton.vue
index bc07a3cd..85b9671b 100644
--- a/client/web/src/components/widgets/buttons/PopoverButton.vue
+++ b/client/web/src/components/widgets/buttons/PopoverButton.vue
@@ -37,7 +37,7 @@
 	}
 
 	// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
-	div[class*="-input"] + & {
+	div[class*="-input"]:not(.optional-input) + & {
 		margin-left: 1px;
 
 		.icon-button {
diff --git a/client/web/src/components/widgets/inputs/CheckboxInput.vue b/client/web/src/components/widgets/inputs/CheckboxInput.vue
index 4816cebd..dee0c6c8 100644
--- a/client/web/src/components/widgets/inputs/CheckboxInput.vue
+++ b/client/web/src/components/widgets/inputs/CheckboxInput.vue
@@ -26,25 +26,27 @@
 			padding: 2px;
 			border-radius: 2px;
 
-			&:hover {
-				background: var(--color-f-white);
-			}
-
 			.icon {
 				fill: var(--color-2-mildblack);
 			}
 		}
+
+		&:hover .checkbox-box {
+			background: var(--color-f-white);
+		}
 	}
 
-	input:checked + label .checkbox-box {
-		background: var(--color-accent);
+	input:checked + label {
+		.checkbox-box {
+			background: var(--color-accent);
 
-		&:hover {
-			background: var(--color-accent-hover);
+			.icon {
+				fill: var(--color-f-white);
+			}
 		}
 
-		.icon {
-			fill: var(--color-f-white);
+		&:hover .checkbox-box {
+			background: var(--color-accent-hover);
 		}
 	}
 }
diff --git a/client/web/src/components/widgets/inputs/OptionalInput.vue b/client/web/src/components/widgets/inputs/OptionalInput.vue
index f40d4007..945b01f7 100644
--- a/client/web/src/components/widgets/inputs/OptionalInput.vue
+++ b/client/web/src/components/widgets/inputs/OptionalInput.vue
@@ -11,56 +11,35 @@
 		align-items: center;
 		white-space: nowrap;
 		justify-content: center;
-		width: 24px;
+		margin-right: 1px;
+		width: 23px;
 		height: 24px;
+		border: 1px solid var(--color-7-middlegray);
 		border-radius: 2px 0 0 2px;
-		background: var(--color-5-dullgray);
-
-		.checkbox-box {
-			background: var(--color-e-nearwhite);
-
-			.icon {
-				fill: var(--color-5-dullgray);
-			}
-		}
+		box-sizing: border-box;
+		border-right: none;
 
 		&:hover {
 			background: var(--color-6-lowergray);
-
-			.checkbox-box {
-				background: var(--color-f-white);
-
-				.icon {
-					fill: var(--color-6-lowergray);
-				}
-			}
 		}
 	}
 
 	input:checked + label {
-		background: var(--color-accent);
-
-		.checkbox-box,
-		.checkbox-box:hover {
-			background: var(--color-f-white);
-
-			.icon {
-				fill: var(--color-accent);
-			}
-		}
+		border: 1px solid var(--color-accent);
+		border-right: none;
 
 		&:hover {
-			background: var(--color-accent-hover);
-
-			.checkbox-box,
-			.checkbox-box:hover {
-				.icon {
-					fill: var(--color-accent-hover);
-				}
-			}
+			border: 1px solid var(--color-accent-hover);
+			border-right: none;
+			background: none;
 		}
-	}
+		// 	border: none;
+		// 	background: var(--color-e-nearwhite);
 
+		// 	&:hover {
+		// 		background: var(--color-f-white);
+		// 	}
+	}
 }
 </style>