diff --git a/packages/nextjs/components/particleOptionsTSX.tsx b/packages/nextjs/components/particleOptionsTSX.tsx
index 73c553d..cab4205 100644
--- a/packages/nextjs/components/particleOptionsTSX.tsx
+++ b/packages/nextjs/components/particleOptionsTSX.tsx
@@ -6,7 +6,7 @@ export const options: ISourceOptions = {
     zIndex: 0,
   },
   background: {
-    image: "linear-gradient(19deg, #FFFFFF 0%, #93BBFB 100%)",
+    image: "linear-gradient(19deg, #34EEB6 0%, #7F5AF0 100%)",
   },
   particles: {
     number: {
@@ -37,7 +37,7 @@ export const options: ISourceOptions = {
       },
     },
     opacity: {
-      value: 0.25,
+      value: 0.5,
       random: true,
       anim: {
         enable: false,
diff --git a/packages/nextjs/pages/builders/index.tsx b/packages/nextjs/pages/builders/index.tsx
index 001b0c6..aaa389c 100644
--- a/packages/nextjs/pages/builders/index.tsx
+++ b/packages/nextjs/pages/builders/index.tsx
@@ -18,7 +18,7 @@ const BuilderPage: NextPage = () => {
   const builders = firstTimeCheckInEvents?.map(({ args: { builder } }) => builder);
 
   return (
-    <div className="w-full flex justify-center items-center">
+    <div className="w-full flex justify-center items-center bg-gradient-to-r from-blue-500 to-purple-500">
       <div className="flex-col m-10 col-span-1 lg:col-span-2 flex flex-col gap-6">
         {error && <h3>Had a problem fetching builder data</h3>}
         <div className="z-10">
diff --git a/packages/nextjs/pages/debug.tsx b/packages/nextjs/pages/debug.tsx
index 824c8ce..4a29ac1 100644
--- a/packages/nextjs/pages/debug.tsx
+++ b/packages/nextjs/pages/debug.tsx
@@ -29,7 +29,7 @@ const Debug: NextPage = () => {
         title="Debug Contracts | Scaffold-ETH 2"
         description="Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way"
       />
-      <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
+      <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center bg-gradient-to-r from-blue-500 to-purple-500">
         {contractNames.length === 0 ? (
           <p className="text-3xl mt-14">No contracts found!</p>
         ) : (
@@ -66,7 +66,7 @@ const Debug: NextPage = () => {
           </>
         )}
       </div>
-      <div className="text-center mt-8 bg-secondary p-10">
+      <div className="text-center mt-8 p-10">
         <h1 className="text-4xl my-0">Debug Contracts</h1>
         <p className="text-neutral">
           You can debug & interact with your deployed contracts here.
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index daa9587..a1feffe 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -29,7 +29,7 @@ const Home: NextPage = () => {
         <div className="px-5">
           <h1 className="text-center mb-8">
             <span className="block text-2xl mb-2">Welcome to the</span>
-            <span className="block text-4xl font-bold">Buidl Guidl Batch 1</span>
+            <span className="block text-4xl font-bold">Buidl Guidl Batch 1 🏗️</span>
             <div className="flex items-center flex-col">
               <br></br>
               <Image
@@ -50,23 +50,23 @@ const Home: NextPage = () => {
           </p>
         </div>
 
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+        <div className="flex-grow w-full mt-16 px-8 py-12">
           <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-white bg-opacity-75 px-10 py-10 text-center items-center max-w-xs rounded-3xl shadow-lg">
+              <BugAntIcon className="h-8 w-8 fill-secondary text-blue-500" />
               <p>
                 Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
+                <Link href="/debug" passHref className="link text-blue-500">
                   Debug Contract
                 </Link>{" "}
                 tab.
               </p>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-white bg-opacity-75 px-10 py-10 text-center items-center max-w-xs rounded-3xl shadow-lg">
+              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary text-purple-500" />
               <p>
                 Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
+                <Link href="/blockexplorer" passHref className="link text-purple-500">
                   Block Explorer
                 </Link>{" "}
                 tab.
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index 99ddf87..262f68d 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -8,11 +8,11 @@ module.exports = {
     themes: [
       {
         scaffoldEth: {
-          primary: "#93BBFB",
-          "primary-content": "#212638",
-          secondary: "#DAE8FF",
+          primary: "#7F5AF0", // Acidic purple
+          "primary-content": "#F9FBFF",
+          secondary: "#34EEB6", // Acidic blue
           "secondary-content": "#212638",
-          accent: "#93BBFB",
+          accent: "#FDD835", // Yellow
           "accent-content": "#212638",
           neutral: "#212638",
           "neutral-content": "#ffffff",
@@ -21,9 +21,9 @@ module.exports = {
           "base-300": "#DAE8FF",
           "base-content": "#212638",
           info: "#93BBFB",
-          success: "#177E5F",
+          success: "#34EEB6",
           warning: "#FFCF72",
-          error: "#E00000",
+          error: "#FF8863",
 
           "--rounded-btn": "9999rem",
 
@@ -40,16 +40,16 @@ module.exports = {
       },
       {
         scaffoldEthDark: {
-          primary: "#212638",
+          primary: "#3a10bb",
           "primary-content": "#F9FBFF",
-          secondary: "#323f61",
+          secondary: "#FDD835",
           "secondary-content": "#F9FBFF",
-          accent: "#4969A6",
+          accent: "#FDD835", // Brighter yellow
           "accent-content": "#F9FBFF",
           neutral: "#F9FBFF",
           "neutral-content": "#385183",
-          "base-100": "#385183",
-          "base-200": "#2A3655",
+          "base-100": "#3a10bb",
+          "base-200": "#212638",
           "base-300": "#212638",
           "base-content": "#F9FBFF",
           info: "#385183",
@@ -84,3 +84,4 @@ module.exports = {
     },
   },
 };
+