diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx
index 60c39359..20a8ebe3 100644
--- a/packages/nextjs/app/challenge/[id]/page.tsx
+++ b/packages/nextjs/app/challenge/[id]/page.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useParams } from "next/navigation";
 
+// eslint-disable-next-line react/display-name
+
 const PageView: React.FC = () => {
   const { id } = useParams();
 
@@ -13,6 +15,7 @@ const PageView: React.FC = () => {
     const getMarkdown = async () => {
       const response = await fetch(
         `https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/${id}/README.md`,
+        // `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/challenge-0-simple-nft/README.md`,
       );
       const markdownData = await response.text();
       setMarkdown(markdownData);
@@ -22,8 +25,61 @@ const PageView: React.FC = () => {
   }, [id]);
   return (
     <div className=" flex items-center w-full justify-center sm:text-[12px] ">
-      <div className="max-w-[800px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 ">
-        <ReactMarkdown>{markdown}</ReactMarkdown>
+      <div className="max-w-[860px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 leading-7">
+        <ReactMarkdown
+          components={{
+            h1: ({ children }) => {
+              return (
+                <h1 className="text-primary text-4xl font-bold py-4 border-b border-[#1c2d49] leading-7 mb-2 sm:text-lg ">
+                  {children}
+                </h1>
+              );
+            },
+            h2: ({ children }) => (
+              <h2 className="text-primary text-3xl font-bold leading-7 py-3 sm:text-sm sm:m-0">
+                {children}
+              </h2>
+            ),
+            p: ({ children }) => (
+              <p className="text-primary text-base sm:text-xs leading-7 text-justify max-w-[860px] sm:max-w-[400px]">
+                {children}
+              </p>
+            ),
+            div: ({ children }) => (
+              <div className="text-primary py-3">{children}</div>
+            ),
+            a: ({ children, href }) => (
+              <a
+                className="text-accent cursor-pointer sm:text-xs leading-7"
+                href={href}
+              >
+                {children}
+              </a>
+            ),
+            pre: ({ children }) => (
+              <pre className="bg-secondary-content text-secondary rounded p-5 sm:text-xs leading-7">
+                {children}
+              </pre>
+            ),
+            code: ({ children }) => (
+              <div className="max-w-[500px] sm:w-[300px] ">
+                <code className="text-sm rounded bg-secondary-content text-secondary max-w-[500px] px-[4px] sm:text-xs leading-7">
+                  {children}
+                </code>
+              </div>
+            ),
+            blockquote: ({ children }) => (
+              <blockquote className="text-justify sm:text-xs leading-7">
+                {children}
+              </blockquote>
+            ),
+            li: ({ children }) => (
+              <li className="list-disc sm:text-xs leading-7">{children}</li>
+            ),
+          }}
+        >
+          {markdown}
+        </ReactMarkdown>
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index ff35484f..04f39608 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -50,7 +50,7 @@ const Home: NextPage = () => {
         </div>
         <div className="footer-header-landing"></div>
       </div>
-      <div className="w-full flex justify-center text-lg flex-col items-center text-primary ">
+      <div className="w-full flex justify-center text-lg flex-col items-center text-primary bg-">
         <div className="w-full px-[20px] flex justify-center flex-col items-center sm:pr-[35px]">
           {firstChallenges.slice(0, 3).map((challenge) => (
             <ChallengeCard
@@ -77,7 +77,7 @@ const Home: NextPage = () => {
               </div>
               <div className="flex lg:justify-center">
                 <div className="max-w-[430px] w-full py-20 pl-20 sm:py-0 sm:pl-3 sm:flex lg:pl-0  lg:pt-0">
-                  <span className="sm:text-[12px] sm:text-center ">
+                  <span className="sm:text-[12px] sm:text-center leading-7 sm:text-xs">
                     The BuidlGuidl is a curated group of Ethereum builders
                     creating products, prototypes, and tutorials to enrich the
                     web3 ecosystem. A place to show off your builds and meet
@@ -97,7 +97,7 @@ const Home: NextPage = () => {
               title={challenge.title}
               description={challenge.description}
               imageUrl={challenge.imageUrl}
-              buttonText="LOCK"
+              buttonText="QUEST"
               onButtonClick={() => router.push(`/challenge/${challenge.id}`)}
               end={challenge.end || false}
               border={challenge.border !== undefined ? challenge.border : true}
diff --git a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
index 322eaa4e..2d9d9ed8 100644
--- a/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
+++ b/packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
@@ -38,7 +38,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
         <div className="max-w-[500px] flex flex-col gap-4 ">
           <span>{challenge}</span>
           <h2 className="text-2xl sm:text-[16px] sm:m-0">{title}</h2>
-          <p className="sm:m-0">{description}</p>
+          <p className="sm:m-0 leading-7 sm:text-xs">{description}</p>
           <div className="sm:pt-[10px]">
             <Button onClick={onButtonClick}>{buttonText}</Button>
           </div>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index aa415137..714e5cf3 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -41,20 +41,22 @@ export const Header = () => {
 
   return (
     <div
-      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49]" : ""}`}
+      className={`lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 bg-base-100 ${pathname !== "/" ? "border-b border-[#1c2d49] bg-base-400" : ""}`}
     >
-      <div className="pl-8">
+      <div className="pl-8 sm:pl-0">
         {pathname !== "/" && (
-          <Image
-            src={"/logo-header.svg"}
-            alt={"logo header"}
-            width={200}
-            height={65}
-            className="sm:w-[100px]"
-          />
+          <button onClick={() => (window.location.href = "/")}>
+            <Image
+              src={"/logo-header.svg"}
+              alt={"logo header"}
+              width={200}
+              height={65}
+              className="sm:w-[130px] "
+            />
+          </button>
         )}
       </div>
-      <div className="navbar-end flex-grow pr-8 py-[8px]">
+      <div className="navbar-end flex-grow pr-8 py-[8px] sm:pr-0 leading-7">
         <CustomConnectButton />
         <FaucetButton />
       </div>
diff --git a/packages/nextjs/components/StepInstruction/StepInstruction.tsx b/packages/nextjs/components/StepInstruction/StepInstruction.tsx
index 6323192d..ac375453 100644
--- a/packages/nextjs/components/StepInstruction/StepInstruction.tsx
+++ b/packages/nextjs/components/StepInstruction/StepInstruction.tsx
@@ -11,7 +11,7 @@ const StepInstruction: React.FC<StepInstructionProps> = ({ number, text }) => {
       <div className="w-6 h-6 rounded-full bg-gradient-linear text-white text-center sm:w-5 sm:h-5">
         {number}
       </div>
-      <span className="text-center text-[16px] sm:text-[12px]">{text}</span>
+      <span className="text-center text-[16px] sm:text-xs ">{text}</span>
     </div>
   );
 };
diff --git a/packages/nextjs/data-challenges/challenges.ts b/packages/nextjs/data-challenges/challenges.ts
index 9c5803a6..d58b9376 100644
--- a/packages/nextjs/data-challenges/challenges.ts
+++ b/packages/nextjs/data-challenges/challenges.ts
@@ -6,7 +6,7 @@ const allChallenges = [
       "🎫 Create a simple NFT to learn basics of scaffold-Stark. You'll use 👷‍♀️ HardHat to compile and deploy smart contracts. Then, you'll use a template React app full of important Ethereum components and hooks. Finally, you'll deploy an NFT to a public network to share with friends! 🚀",
     imageUrl: "/simpleNFT.png",
     end: true,
-    id: "challenge0",
+    id: "simple-nft-example",
   },
   {
     challenge: "Challenge #1",
@@ -14,7 +14,7 @@ const allChallenges = [
     description:
       "🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an adversarial group of players can use to work together. In this challenge, you create a decentralized application where users can coordinate a group funding effort. The users only have to trust the code.",
     imageUrl: "/stakingToken.png",
-    id: "challenge-0-simple-nft",
+    id: "decentralized-staking",
   },
   {
     challenge: "Challenge #2",
@@ -23,7 +23,7 @@ const allChallenges = [
       "🤖 Smart contracts are kind of like always on vending machines that anyone can access. Let's make a decentralized, digital currency (an ERC20 token). Then, let's build an unstoppable vending machine that will buy and sell the currency. We'll learn about the approve pattern for ERC20s and how contract to contract interactions work.",
     imageUrl: "/tokenVendor.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "token-vendor",
   },
   {
     challenge: "Challenge #3",
@@ -31,7 +31,7 @@ const allChallenges = [
     description:
       "🎰 Randomness is tricky on a public deterministic blockchain. The block hash is the result proof-of-work (for now) and some builders use this as a weak form of randomness. In this challenge you will take advantage of a Dice Game contract by predicting the randomness in order to only roll winning dice!",
     imageUrl: "/diceGame.png",
-    id: "challenge-0-simple-nft",
+    id: "dice-game",
   },
   {
     challenge: "Challenge #4",
@@ -39,7 +39,7 @@ const allChallenges = [
     description:
       "💵 Build an exchange that swaps ETH to tokens and tokens to ETH. 💰 This is possible because the smart contract holds reserves of both assets and has a price function based on the ratio of the reserves. Liquidity providers are issued a token that represents their share of the reserves and fees...",
     imageUrl: "/dex.png",
-    id: "challenge-0-simple-nft",
+    id: "build-a-dex",
   },
   {
     challenge: "Challenge #5",
@@ -47,7 +47,7 @@ const allChallenges = [
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/state.png",
-    id: "challenge-0-simple-nft",
+    id: "state-channel-application",
   },
   {
     challenge: "Challenge #6",
@@ -55,7 +55,7 @@ const allChallenges = [
     description:
       "🛣️ The Ethereum blockchain has great decentralization & security properties but these properties come at a price: transaction throughput is low, and transactions can be expensive. This makes many traditional web applications infeasible on a blockchain... or does it? State channels look to solve these problems by allowing participants to securely transact off-chain while keeping interaction with Ethereum Mainnet at a minimum.",
     imageUrl: "/multiSig.png",
-    id: "challenge-0-simple-nft",
+    id: "multisig-wallet-challenge",
   },
   {
     challenge: "Challenge #7",
@@ -64,7 +64,7 @@ const allChallenges = [
       "🧙 Tinker around with cutting edge smart contracts that render SVGs in Solidity. 🧫 We quickly discovered that the render function needs to be public... 🤔 This allows NFTs that own other NFTs to render their stash. Just wait until you see an Optimistic Loogie and a Fancy Loogie swimming around in the same Loogie Tank!",
     imageUrl: "/dynamicSvgNFT.png",
     border: false,
-    id: "challenge-0-simple-nft",
+    id: "svg-nft",
   },
 ];
 
diff --git a/packages/nextjs/tailwind.config.ts b/packages/nextjs/tailwind.config.ts
index 2de3551f..dc946253 100644
--- a/packages/nextjs/tailwind.config.ts
+++ b/packages/nextjs/tailwind.config.ts
@@ -60,7 +60,7 @@ module.exports = {
           primary: "#0C0C4F",
           "primary-content": "#212638",
           secondary: "#0C0C4F",
-          "secondary-content": "#E7F0FE",
+          "secondary-content": "#abc6f1",
           accent: "#93BBFB",
           "accent-content": "#212638",
           neutral: "#212638",
@@ -68,6 +68,7 @@ module.exports = {
           "base-100": "#E7F0FE",
           "base-200": "#f4f8ff",
           "base-300": "#0C0C4F",
+          "base-400": "#E7F0FE",
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",
@@ -98,8 +99,9 @@ module.exports = {
           neutral: "#F9FBFF",
           "neutral-content": "#385183",
           "base-100": "#1b2841",
-          "base-200": "#1c2d49",
+          "base-200": "#29385d",
           "base-300": "#E7F0FE",
+          "base-400": "#364a70",
           "base-content": "#F9FBFF",
           info: "#385183",
           success: "#34EEB6",