diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 78b5428..6536a58 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -19,7 +19,7 @@ jobs:
         steps:
             - uses: actions/checkout@v2
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: "npm"
diff --git a/src/App.css b/src/App.css
index 2d28aba..3e6653f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
 
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  overflow-y: auto; /* allows vertical scrolling */
+}
+
 .App {
   text-align: center;
+  overflow: auto;
 }
 
 
@@ -24,7 +32,7 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: black;
 }
 
 .App-link {
@@ -45,10 +53,10 @@
   transform: translateY(-82%);
 }
 
-.take-quiz-button {
+.take-quiz-block {
   border-radius: 30px;
   position: fixed;
-  width: 900px;
+  width: 75%;
   padding: 40px;
   background-color: darkblue;
   color: white;
@@ -60,13 +68,14 @@
   font-size: 45px;
   text-align: center;
   align-items: center;
+  margin: 40px auto;
 }
 
 .fade-strip {
   z-index: 9998;
   position: fixed;
   width: 100%;
-  height: 200px;
+  height: 15%;
   top: 5%;
   display: flex;
   align-items: center;
@@ -94,7 +103,7 @@
   color: white;
 } 
 
-.basic{
+.basic, .detailed{
   background-color: #d3dced;
   width: 1000px;
   padding: 15px;
@@ -103,14 +112,16 @@
   display: grid;
   place-items: center;
   text-wrap:balance;
-  top: 46%;
+  top: unset;
   border-style: solid;
-  position: fixed;
-  left: 50%;
+  position: relative;
+  left: unset;
   z-index: 1000;
-  transform: translateX(-50%);
+  transform: none;
+  margin: 40px auto;
 }
 
+/*
 .detailed{
   background-color: #d3dced;
   width: 1000px;
@@ -125,19 +136,20 @@
   top: 58%;
   left: 50%;
   transform: translateX(-50%);
-}
+}*/
 
 .Detailed-Questions{
   text-wrap:balance;
   padding:25px;
   border-style: solid;
+  width: 75%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.Detailed-Questions header {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+
+.Detailed-Questions small {
+  font-size: 50%;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 5a638a5..ebef9fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,16 +61,15 @@ function App() {
             >
               Home Page
             </Button>
-      <div className="take-quiz-button" hidden = {isHome}>Take our free career quiz now!</div>
+      <div className="take-quiz-block" hidden = {isHome}>Take our free career quiz now!</div>
       <div hidden={isHome} className="fade-strip">Career Helpi Quiz</div>
       <header className="App-header">
         <div className="Basic-Questions" hidden={notBasic}>
         <BasicQuestions />
+        </div>
         <div className="Detailed-Questions" hidden={notDetailed}>
         <DetailedQuestions />
       </div>
-        </div>
-        </header>
         <p className ="basic" style= {{zIndex: 5}} hidden = {isHome}>Not sure where to start? Answer a few small questions to get some starting points on a career path.
         <Button style={{backgroundColor: 'darkblue'}}//Flips the visibility of the Basic and Home pages
               onClick={() => {
@@ -95,7 +94,7 @@ function App() {
               Detailed Quiz
             </Button> </p>
           
-            
+            </header>
         <a
           className="App-link"
           href="https://reactjs.org"
diff --git a/src/Pages/BasicQuestions.tsx b/src/Pages/BasicQuestions.tsx
index e58f6ab..f19a098 100644
--- a/src/Pages/BasicQuestions.tsx
+++ b/src/Pages/BasicQuestions.tsx
@@ -17,12 +17,16 @@ export function BasicQuestions(): React.JSX.Element{
         const [answer3, setAnswer3] = useState<string>(QTYPEAANSWER[0]);
         const [answer4, setAnswer4] = useState<string>(QTYPEAANSWER[0]);
         const [answer5, setAnswer5] = useState<string>(QTYPEAANSWER[0]);
-    
+        const [progress,setProgress]=useState<number>(0)
+        function UpdateProgress(){
+            setProgress(progress+1);
+            console.log(progress);
+          }
     return(
         <span>  
             <div className="page-wrapper">
                 <div className = "Basic-Questions">
-                    <header style={{fontSize:40}}> Basic Quiz</header>
+                    <header className="Basic-Title" style={{fontSize:40}}> Basic Quiz</header>
                     <h3 style={{color: 'white'}}>1. I would like to develop new medicine</h3>
                     <Form.Group controlId={"Question 1"}>
                             {QTYPEAANSWER.map((ananswer) => (
@@ -31,12 +35,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response1"}
                                 key={ananswer}
-                                value={ananswer}
+                                value={answer1}
                                 label={ananswer}
                                 onChange={(e) => {
                                     setAnswer1(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer1 === ananswer}
+                               //checked={answer1 !== ananswer}
                             />
                         ))}
                     </Form.Group>
@@ -48,12 +53,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response2"}
                                 key={ananswer2}
-                                value={ananswer2}
+                                value={answer2}
                                 label={ananswer2}
                                 onChange={(e) => {
                                     setAnswer2(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer2 === ananswer2}
+                                //checked={answer2 !== ananswer2}
                             />
                         ))}
                     </Form.Group>
@@ -65,12 +71,14 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response3"}
                                 key={ananswer3}
-                                value={ananswer3}
+                                value={answer3}
                                 label={ananswer3}
                                 onChange={(e) => {
-                                    setAnswer3(e.target.value);
+                                    setAnswer3(e.target.value
+                                     );
+                                     UpdateProgress();
                                 }}
-                                checked={answer3 === ananswer3}
+                                //checked={answer3 !== ananswer3}
                             />
                         ))}
                 </Form.Group>
@@ -82,12 +90,13 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response4"}
                                 key={ananswer4}
-                                value={ananswer4}
+                                value={answer4}
                                 label={ananswer4}
                                 onChange={(e) => {
                                     setAnswer4(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer4 === ananswer4}
+                                //checked={answer4 !== ananswer4}
                             />
                         ))}
                 </Form.Group>
@@ -99,17 +108,21 @@ export function BasicQuestions(): React.JSX.Element{
                                 type={"radio"}
                                 name={"response5"}
                                 key={ananswer5}
-                                value={ananswer5}
+                                value={answer5}
                                 label={ananswer5}
                                 onChange={(e) => {
                                     setAnswer5(e.target.value);
+                                    UpdateProgress();
                                 }}
-                                checked={answer5 === ananswer5}
+                                //checked={answer5 !== ananswer5}
                             />
                         ))}
                 </Form.Group>
+                <progress value={progress} max={7} ></progress>
+                <div className='Ready' hidden={progress<=7}>Ready to Submit?</div>
                 </div>
             </div>    
         </span>
     )
-}
\ No newline at end of file
+}
+
diff --git a/src/Pages/DetailedQuestions.tsx b/src/Pages/DetailedQuestions.tsx
index fcc4277..54e6336 100644
--- a/src/Pages/DetailedQuestions.tsx
+++ b/src/Pages/DetailedQuestions.tsx
@@ -2,76 +2,102 @@ import React, { useState } from 'react';
 import './Pages.css';
 import {Form } from 'react-bootstrap';
 
-const QTYPEAANSWER = [
-    "Strongly disagree",
-    "Disagree",
-    "Unsure",
-    "Agree",
-    "Strongly agree"
-]
 
 
 export function DetailedQuestions(): React.JSX.Element{
-    const [answer1, setAnswer1] = useState<string>(QTYPEAANSWER[0]);
-    const [answer2, setAnswer2] = useState<string>(QTYPEAANSWER[0]);
-    const [answer3, setAnswer3] = useState<string>(QTYPEAANSWER[0]);
+    const [response, setResponse] = useState(
+        { q1: "Type your answer here!", q2: "Type your answer here!", q3: "Type your answer here!",
+            q4: "Type your answer here!", q5: "Type your answer here!", q6: "Type your answer here!",
+            q7: "Type your answer here!"
+        }
+    );
+    const [progress,setProgress]=useState<number>(0)
+    function updateAnswer(event: React.ChangeEvent<HTMLTextAreaElement>){
+        const {name, value} = event.target
+        setResponse(prev => ({...prev, [name]: value}));
+        setProgress(progress+1);
+    }
     
-    return( 
-        <span>  
-                <div className = "Detailed-Question">
-                    <header> Detailed Quiz</header>
-                    <h3>1. I would like to develop new medicine</h3>
-                    <Form.Group controlId={"Question 1"}>
-                            {QTYPEAANSWER.map((ananswer) => (
-                                <Form.Check
-                                inline
-                                type={"radio"}
-                                name={"response1"}
-                                key={ananswer}
-                                value={ananswer}
-                                label={ananswer}
-                                onChange={(e) => {
-                                    setAnswer1(e.target.value);
-                                }}
-                                checked={answer1 === ananswer}
-                            />
-                        ))}
-                    </Form.Group>
-                    <h3>2. I would like to write books or plays</h3>
-                    <Form.Group controlId={"Question 2"}>
-                            {QTYPEAANSWER.map((ananswer2) => (
-                                <Form.Check
-                                inline
-                                type={"radio"}
-                                name={"response2"}
-                                key={ananswer2}
-                                value={ananswer2}
-                                label={ananswer2}
-                                onChange={(e) => {
-                                    setAnswer2(e.target.value);
-                                }}
-                                checked={answer2 === ananswer2}
-                            />
-                        ))}
-                    </Form.Group>
-                    <h3>3. I would like to install software across computers on a large network</h3>
-                    <Form.Group controlId={"Question 3"}>
-                            {QTYPEAANSWER.map((ananswer3) => (
-                                <Form.Check
-                                inline
-                                type={"radio"}
-                                name={"response3"}
-                                key={ananswer3}
-                                value={ananswer3}
-                                label={ananswer3}
-                                onChange={(e) => {
-                                    setAnswer3(e.target.value);
-                                }}
-                                checked={answer3 === ananswer3}
-                            />
-                        ))}
+    return(
+        
+        <span> 
+            <header> Detailed Quiz</header> 
+            <div className = "Detailed-Question">
+                <Form.Group controlId="formQuestion1">
+                <Form.Label>Question 1:</Form.Label>
+                <Form.Control
+                    as="textarea"
+                    rows={3}
+                    name="q1"
+                    value={response.q1}
+                    onChange={updateAnswer} />
                 </Form.Group>
-                </div>
+            </div>
+            <small>
+                {response.q1.length} Characters
+            </small>
+
+            <div className = "Detailed-Question">
+                <Form.Group controlId="formQuestion2">
+                <Form.Label>Question 2:</Form.Label>
+                <Form.Control
+                    as="textarea"
+                    rows={3}
+                    name="q2"
+                    value={response.q2}
+                    onChange={updateAnswer} />
+                </Form.Group>
+            </div>
+            <small>
+                {response.q2.length} Characters
+            </small>
+
+            <div className = "Detailed-Question">
+                <Form.Group controlId="formQuestion3">
+                <Form.Label>Question 3:</Form.Label>
+                <Form.Control
+                    as="textarea"
+                    rows={3}
+                    name="q3"
+                    value={response.q3}
+                    onChange={updateAnswer} />
+                </Form.Group>
+            </div>
+            <small>
+                {response.q3.length} Characters
+            </small>
+
+            <div className = "Detailed-Question">
+                <Form.Group controlId="formQuestion4">
+                <Form.Label>Question 4:</Form.Label>
+                <Form.Control
+                    as="textarea"
+                    rows={3}
+                    name="q4"
+                    value={response.q4}
+                    onChange={updateAnswer} />
+                </Form.Group>
+            </div>
+            <small>
+                {response.q4.length} Characters
+            </small>
+
+            <div className = "Detailed-Question">
+                <Form.Group controlId="formQuestion5">
+                <Form.Label>Question 5:</Form.Label>
+                <Form.Control
+                    as="textarea"
+                    rows={3}
+                    name="q5"
+                    value={response.q5}
+                    onChange={updateAnswer} />
+                </Form.Group>
+            </div>
+            <progress value={progress} max={7} ></progress>
+                <div hidden={progress<=7}>Ready to Submit?</div>
+            <small>
+                {response.q5.length} Characters
+            </small>
         </span>
     )
 }
\ No newline at end of file
diff --git a/src/Pages/Pages.css b/src/Pages/Pages.css
index 2efaa95..ebce20f 100644
--- a/src/Pages/Pages.css
+++ b/src/Pages/Pages.css
@@ -5,8 +5,13 @@
     padding: 15px;
     top: 67%;
 }
-
-.Detailed-Question {
+.Basic-Title{
+    color:white
+}
+.Ready{
+    color: white;
+}
+.Detailed-Question{
     text-align: center;
 }
 
@@ -18,7 +23,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
     min-height: 10vh;
     top: 40%;
 }