diff --git a/app/quiz/page.tsx b/app/quiz/page.tsx
index 829bf0f..714a5b6 100644
--- a/app/quiz/page.tsx
+++ b/app/quiz/page.tsx
@@ -2,7 +2,7 @@
 import styles from "./page.module.scss";
 import { useState, useEffect, useRef } from "react";
 import { useSession } from "next-auth/react";
-import { signIn, signOut } from 'next-auth/react';
+import { signIn, signOut } from "next-auth/react";
 import Question from "@/components/Questioncomponent/Question";
 import Quizrules from "@/components/Rulesquiz/rulesquiz";
 
@@ -14,7 +14,7 @@ export default function Quiz() {
   const animationRef = useRef<CarAnimation | null>(null);
 
   useEffect(() => {
-    if (typeof window !== 'undefined' && containerRef.current) {
+    if (typeof window !== "undefined" && containerRef.current) {
       const animation = new CarAnimation(containerRef.current);
       animation.start();
       animationRef.current = animation;
@@ -32,13 +32,17 @@ export default function Quiz() {
   }, [isCorrect]);
 
   return (
-    <><div className={styles.main}>
- {/* <Quizrules/> */}
-      <div ref={containerRef} />
-      <Question isCorrect={isCorrect} setIsCorrect={setIsCorrect} />
-      <div className={`${styles.overlay} ${isCorrect ? styles.overlayActive : ""}`}></div>
-   
-    </div>
-      </>
+    <>
+      <div className={styles.main}>
+        {/* <Quizrules/> */}
+        <div ref={containerRef} />
+        <Question isCorrect={isCorrect} setIsCorrect={setIsCorrect} />
+        <div
+          className={`${styles.overlay} ${
+            isCorrect ? styles.overlayActive : ""
+          }`}
+        ></div>
+      </div>
+    </>
   );
 }
diff --git a/components/MainQuestion/MainQuestion.tsx b/components/MainQuestion/MainQuestion.tsx
index c5776dd..6841df9 100644
--- a/components/MainQuestion/MainQuestion.tsx
+++ b/components/MainQuestion/MainQuestion.tsx
@@ -57,7 +57,7 @@ function MainQuestion({ isCorrect , setIsCorrect , onCorrectAnswer}: MainQuestio
                     placeholder="Enter your answer"
                     className={style.input}
                 />
-                <Submit/> 
+                <Submit /> 
             </form>
         </>
     );
diff --git a/components/Map/map.jsx b/components/Map/map.jsx
index b3139f5..cbdbf1f 100644
--- a/components/Map/map.jsx
+++ b/components/Map/map.jsx
@@ -16,7 +16,7 @@ const Map = () => {
     mapRef.current = new mapboxgl.Map({
       container: mapContainerRef.current,
       center: [-74.5, 40], // starting position [lng, lat]
-      zoom: 9 // starting zoom
+      zoom: 3 // starting zoom
     });
   });
 
diff --git a/components/Questioncomponent/Question.module.scss b/components/Questioncomponent/Question.module.scss
index 4f576fb..ae50cb9 100644
--- a/components/Questioncomponent/Question.module.scss
+++ b/components/Questioncomponent/Question.module.scss
@@ -12,7 +12,7 @@
 
   .outerquestion {
     height: 70vh;
-    width: 36%;
+    width: 70%;
     background-color: rgba(9, 255, 0, 0.89);
     clip-path: polygon(0 0, 91% 0, 100% 13%, 100% 100%, 16% 100%, 0 90%);
     display: flex;
diff --git a/components/Questioncomponent/Question.tsx b/components/Questioncomponent/Question.tsx
index db12b4b..7038329 100644
--- a/components/Questioncomponent/Question.tsx
+++ b/components/Questioncomponent/Question.tsx
@@ -4,6 +4,7 @@ import styles from "./Question.module.scss";
 import { Tabs } from "../Tabs/tabs";
 import MainQuestion from "../MainQuestion/MainQuestion";
 import Map from "@/components/Map/map";
+import Rulescard from "../Rulescard/rulescard";
 
 interface QuestionProps {
   isCorrect: boolean;
@@ -12,6 +13,7 @@ interface QuestionProps {
 
 const Question: React.FC<QuestionProps> = ({ isCorrect, setIsCorrect }) => {
   const [tabs, setTabs] = useState([]);
+  const [rulesShow, setRulesShow] = useState(false);
 
   useEffect(() => {
     const fetchTabs = async () => {
@@ -49,38 +51,66 @@ const Question: React.FC<QuestionProps> = ({ isCorrect, setIsCorrect }) => {
 
   return (
     <>
-      <button
-        onClick={() => window.history.back()}
-        className="absolute top-4 left-4 ml-12 mt-8 text-white cursor-pointer flex items-center justify-center p-2 rounded-full bg-[rgba(44,255,5,0.1)] border-2  transition-transform transform hover:scale-105 border-[rgba(44,255,5,0.7)] hover:bg-white hover:border-transparent hover:text-black shadow-lg"
+      <div
         style={{
-          boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-around",
+          alignItems: "center",
         }}
       >
-        <span
-          className="text-lg font-bold"
+        <button
+          onClick={() => window.history.back()}
+          className="absolute top-4 left-4 ml-12 mt-8 text-white cursor-pointer flex items-center justify-center p-2 rounded-full bg-[rgba(44,255,5,0.1)] border-2  transition-transform transform hover:scale-105 border-[rgba(44,255,5,0.7)] hover:bg-white hover:border-transparent hover:text-black shadow-lg"
+          style={{
+            boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+          }}
+        >
+          <span
+            className="text-lg font-bold"
+            style={{
+              display: "inline-block",
+              transform: "rotate(180deg)",
+              marginRight: "5px",
+            }}
+          >
+            ←
+          </span>
+          Back
+        </button>
+        <button
+          onClick={() => setRulesShow(true)}
+          className="absolute top-4 left-4 ml-12 mt-8 text-white cursor-pointer flex items-center justify-center p-2 rounded-full bg-[rgba(44,255,5,0.1)] border-2  transition-transform transform hover:scale-105 border-[rgba(44,255,5,0.7)] hover:bg-white hover:border-transparent hover:text-black shadow-lg"
           style={{
-            display: "inline-block",
-            transform: "rotate(180deg)",
-            marginRight: "5px",
+            boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+            padding: "10px 18px",
+            marginLeft: "90vw",
           }}
         >
-          ←
-        </span>
-        Back
-      </button>
+          Rules
+        </button>
+      </div>
+      {rulesShow && (
+        <Rulescard rulesShow={rulesShow} setRulesShow={setRulesShow} />
+      )}
       <div className={styles.main}>
-        <div className={styles.outerquestion}>
-          <div className={styles.question}>
+        <div className={styles.cluemap} style={{ marginRight: "80px" }}>
+          <div className={styles.map} style={{ marginBottom: "40px" }}>
             <MainQuestion
               isCorrect={isCorrect}
               setIsCorrect={setIsCorrect}
               onCorrectAnswer={handleCorrectAnswer}
             />
           </div>
-        </div>
-        <div className={styles.cluemap}>
           <Tabs tabs={tabs} />
-          <div className={styles.map}>
+        </div>
+        <div className={styles.outerquestion}>
+          <div className={styles.question}>
+            {/* <MainQuestion
+              isCorrect={isCorrect}
+              setIsCorrect={setIsCorrect}
+              onCorrectAnswer={handleCorrectAnswer}
+            /> */}
             <Map />
           </div>
         </div>
diff --git a/components/Submitbutton/submitbutton.tsx b/components/Submitbutton/submitbutton.tsx
index ce7dda7..4e07f98 100644
--- a/components/Submitbutton/submitbutton.tsx
+++ b/components/Submitbutton/submitbutton.tsx
@@ -4,7 +4,7 @@ import styles from './submit.module.scss';
 
 export default function Submit() {
   return (
-    <button className={styles.DownloadButton}>
+    <button className={styles.DownloadButton} style={{marginBottom: "40px"}}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="32"
diff --git a/components/Tabs/style.module.scss b/components/Tabs/style.module.scss
index 03e0c49..e014ddb 100644
--- a/components/Tabs/style.module.scss
+++ b/components/Tabs/style.module.scss
@@ -7,7 +7,7 @@
 
 .outerFadeIn {
   position: absolute;
-  width: 90%;  /* Fixed width */
+  width: 100%;  /* Fixed width */
   height: 60%; /* Fixed height */
   background-color: rgba(9, 255, 0, 0.89);
   clip-path: polygon(0 0, 91% 0, 100% 13%, 100% 100%, 16% 100%, 0 90%);