diff --git a/src/app/(app)/guide/Info.tsx b/src/app/(app)/guide/Info.tsx
index 1a7f818..7241c2e 100644
--- a/src/app/(app)/guide/Info.tsx
+++ b/src/app/(app)/guide/Info.tsx
@@ -6,15 +6,17 @@ const InfoContent = () => {
 
     return (
         <div>
-            <h1 className="text-3xl dark:text-3xl font-bold mb-4">
-                Beverage Consumption Info!
-            </h1>
-            <p className="mb-6 ">
-                Learn what's best for your body and how to earn points and win! Making
-                informed drink choices supports hydration, energy regulation, and
-                overall health. Below are basic guidelines based on established public
-                health recommendations.
-            </p>
+            <div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
+                <h1 className="text-3xl dark:text-3xl font-bold mb-4">
+                    Beverage Consumption Info!
+                </h1>
+                <p className="mb-6 ">
+                    Learn what's best for your body and how to earn points and win! Making
+                    informed drink choices supports hydration, energy regulation, and
+                    overall health. Below are basic guidelines based on established public
+                    health recommendations.
+                </p>
+            </div>
 
             <div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
                 <h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
diff --git a/src/app/(app)/guide/PointGuide.tsx b/src/app/(app)/guide/PointGuide.tsx
index 00a722c..7d74b75 100644
--- a/src/app/(app)/guide/PointGuide.tsx
+++ b/src/app/(app)/guide/PointGuide.tsx
@@ -57,25 +57,27 @@ const PointGuide = () => {
 
     return (
 		<div>
-			<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
-  				Points Guide
-			</h1>
-			<p className="mb-6 text-sm sm:text-base text-white">
-  					Learn how many points you receive for each drink!
-			</p>
+			<div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
+				<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
+					Points Guide
+				</h1>
+				<p className="mb-6 text-sm sm:text-base text-white">
+					Learn how many points you receive for each drink!
+				</p>
 
-			<ul>
-				<span className="text-base sm:text-lg">Game Points System:</span>
-				<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base">
-					<li> +150 points for drinking ≥100 oz of water </li>
-					<li> +100 points for keeping caffeine &lt; 200 mg </li>
-					<li> +150 points for staying under the sugar cap all day </li>
+				<div>
+					<span className="text-base sm:text-lg text-white">Game Points System:</span>
+					<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base text-white">
+					<li>+150 points for drinking ≥100 oz of water</li>
+					<li>+100 points for keeping caffeine &lt; 200 mg</li>
+					<li>+150 points for staying under the sugar cap all day</li>
 					<li>
 						Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged for
 						those drinks
 					</li>
-				</ul>
-			</ul>
+					</ul>
+				</div>
+			</div>
 
 			<div className="bg-surface-700 rounded-xl px-4 py-4 my-6 shadow-sm">
 				<div className="overflow-x-auto rounded-xl scroll-auto">
diff --git a/src/app/(app)/guide/page.tsx b/src/app/(app)/guide/page.tsx
index 74d925d..0bd5963 100644
--- a/src/app/(app)/guide/page.tsx
+++ b/src/app/(app)/guide/page.tsx
@@ -14,8 +14,8 @@ export default function InfoPage() {
                 <button
                     className={`px-4 py-2 rounded ${
                         activeComponent === "info"
-                            ? "bg-primary-500 text-white"
-                            : "bg-secondary-700 text-gray-300"
+                            ? "bg-success-500 text-white"
+                            : "bg-surface-700 text-gray-300"
                     }`}
                     onClick={() => setActiveComponent("info")}
                 >
@@ -24,8 +24,8 @@ export default function InfoPage() {
                 <button
                     className={`px-4 py-2 rounded ${
                         activeComponent === "points"
-                            ? "bg-primary-500 text-white"
-                            : "bg-secondary-700 text-gray-300"
+                            ? "bg-success-500 text-white"
+                            : "bg-surface-700 text-gray-300"
                     }`}
                     onClick={() => setActiveComponent("points")}
                 >