diff --git a/src/lib/card-collections/cards/EmptyCard.svelte b/src/lib/card-collections/cards/EmptyCard.svelte
index a3bb25b..12a0ab6 100644
--- a/src/lib/card-collections/cards/EmptyCard.svelte
+++ b/src/lib/card-collections/cards/EmptyCard.svelte
@@ -4,7 +4,7 @@
 
 <style>
 	.card-container {
-		background-color: var(--second-txt-color);
+		background-color: var(--island-bg-color);
 		width: 90%;
 		height: auto;
 		margin: auto;
diff --git a/src/lib/global.css b/src/lib/global.css
index 5e0d195..ca4ed7a 100644
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -20,10 +20,14 @@
 	--second-heading-color: #fffffe;
 	--second-txt-color: #fff3ec;
 	--second-link-color: #9656a1;
-	--main-bg-color: #ffc0ad;
-	--main-heading-color: #271c19;
-	--main-txt-color: #271c19;
+	--main-bg-color: #fff3ec;
+	--main-heading-color: #271c19; /* NEEDS TO BE DARKER */
+	--main-txt-color: #271c19; /* NEEDS TO BE DARKER */
 	--main-link-color: #9656a1;
+	--island-bg-color: #ffc0ad;
+	--island-heading-color: #271c19;
+	--island-txt-color: #271c19;
+	--island-link-color: #9656a1;
 }
 
 @font-face {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 040515d..2d608e4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -54,8 +54,8 @@
 		flex-direction: column; /* Start with column layout for mobile */
 		align-items: center;
 		width: 100%;
-		background-color: var(--second-txt-color);
-		color: var(--second-bg-color);
+		background-color: var(--island-bg-color);
+		color: var(--island-txt-color);
 		margin: 0; /* Reset margin to ensure full width */
 		padding: 0; /* Reset padding to ensure full width */
 		box-sizing: border-box; /* Include padding and border in width calculation */