diff --git a/exercises/01.use-state/01.problem.initial-state/index.css b/exercises/01.use-state/01.problem.initial-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/01.problem.initial-state/index.css
+++ b/exercises/01.use-state/01.problem.initial-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/01.solution.initial-state/index.css b/exercises/01.use-state/01.solution.initial-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/01.solution.initial-state/index.css
+++ b/exercises/01.use-state/01.solution.initial-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/02.problem.update-state/index.css b/exercises/01.use-state/02.problem.update-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/02.problem.update-state/index.css
+++ b/exercises/01.use-state/02.problem.update-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/02.solution.update-state/index.css b/exercises/01.use-state/02.solution.update-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/02.solution.update-state/index.css
+++ b/exercises/01.use-state/02.solution.update-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/03.problem.re-render/index.css b/exercises/01.use-state/03.problem.re-render/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/03.problem.re-render/index.css
+++ b/exercises/01.use-state/03.problem.re-render/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/03.solution.re-render/index.css b/exercises/01.use-state/03.solution.re-render/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/03.solution.re-render/index.css
+++ b/exercises/01.use-state/03.solution.re-render/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/04.problem.preserve-state/index.css b/exercises/01.use-state/04.problem.preserve-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/04.problem.preserve-state/index.css
+++ b/exercises/01.use-state/04.problem.preserve-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/01.use-state/04.solution.preserve-state/index.css b/exercises/01.use-state/04.solution.preserve-state/index.css
index fe2f648..977a550 100644
--- a/exercises/01.use-state/04.solution.preserve-state/index.css
+++ b/exercises/01.use-state/04.solution.preserve-state/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/01.problem.phase/index.css b/exercises/02.multiple-hooks/01.problem.phase/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/01.problem.phase/index.css
+++ b/exercises/02.multiple-hooks/01.problem.phase/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/01.solution.phase/index.css b/exercises/02.multiple-hooks/01.solution.phase/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/01.solution.phase/index.css
+++ b/exercises/02.multiple-hooks/01.solution.phase/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/02.problem.hook-id/index.css b/exercises/02.multiple-hooks/02.problem.hook-id/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/02.problem.hook-id/index.css
+++ b/exercises/02.multiple-hooks/02.problem.hook-id/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/02.multiple-hooks/02.solution.hook-id/index.css b/exercises/02.multiple-hooks/02.solution.hook-id/index.css
index fe2f648..977a550 100644
--- a/exercises/02.multiple-hooks/02.solution.hook-id/index.css
+++ b/exercises/02.multiple-hooks/02.solution.hook-id/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/01.problem.callback/index.css b/exercises/03.use-effect/01.problem.callback/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/01.problem.callback/index.css
+++ b/exercises/03.use-effect/01.problem.callback/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/01.solution.callback/index.css b/exercises/03.use-effect/01.solution.callback/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/01.solution.callback/index.css
+++ b/exercises/03.use-effect/01.solution.callback/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/02.problem.dependencies/index.css b/exercises/03.use-effect/02.problem.dependencies/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/02.problem.dependencies/index.css
+++ b/exercises/03.use-effect/02.problem.dependencies/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }
diff --git a/exercises/03.use-effect/02.solution.dependencies/index.css b/exercises/03.use-effect/02.solution.dependencies/index.css
index fe2f648..977a550 100644
--- a/exercises/03.use-effect/02.solution.dependencies/index.css
+++ b/exercises/03.use-effect/02.solution.dependencies/index.css
@@ -16,6 +16,8 @@ div:has(.counter) {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	gap: 8px;
+	min-width: 100%;
 	padding: 20px;
 	height: 100%;
 
@@ -29,6 +31,18 @@ div:has(.counter) {
 		border-radius: 3px;
 		cursor: pointer;
 
+		/* matches the enable/disable button when that one shows up in the exercises */
+		&:first-of-type {
+			flex: 1;
+			max-width: 100px;
+		}
+
+		/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
+		&:last-of-type {
+			flex: unset;
+			max-width: unset;
+		}
+
 		&:hover,
 		&:focus {
 			background-color: lch(40% 100 220);
@@ -38,5 +52,9 @@ div:has(.counter) {
 			background-color: lch(50% 100 220);
 			border-color: lch(30% 100 220);
 		}
+		&:disabled {
+			background-color: lch(30% 20 220);
+			border-color: lch(10% 20 200);
+		}
 	}
 }