diff --git a/README.md b/README.md
index 891dcb4d..064ecfe4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Andy Yu
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
diff --git a/src/pages/qcomps/bios.js b/src/pages/qcomps/bios.js
index cc9350fd..a48eef8f 100644
--- a/src/pages/qcomps/bios.js
+++ b/src/pages/qcomps/bios.js
@@ -1,12 +1,15 @@
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
+    <div>
+      <div class="intro">
+        <h1>Welcome to my website!</h1>
+      </div>
+        
+      <p class="summary">
+        <h2>You can find my thoughts here.</h2>
+        <br/><br/>
+        <b>And <i>pictures</i></b> of people!
+      </p>
     </div>
-    <p class="summary">
-      You can find my thoughts here.
-      <br/><br/>
-      <b>And <i>pictures</i></b> of people!
-    </p>
   );
 }
\ No newline at end of file
diff --git a/src/pages/qcomps/firstcomp.js b/src/pages/qcomps/firstcomp.js
index 9cce715e..dc46e992 100644
--- a/src/pages/qcomps/firstcomp.js
+++ b/src/pages/qcomps/firstcomp.js
@@ -1 +1,12 @@
-function MyComp() {}
\ No newline at end of file
+export default function MyComp() {
+    return (
+        <div>
+            <h1> My first component</h1>
+            <ol>
+                <li> Components: UI Building Block</li>
+                <li> Defining a Component </li>
+                <li> Using a component</li>
+            </ol>
+        </div>
+    )
+};
\ No newline at end of file
diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js
index fc118123..e9e9f9ab 100644
--- a/src/pages/qcomps/gallery_props.js
+++ b/src/pages/qcomps/gallery_props.js
@@ -1,16 +1,35 @@
+function Profile({scientist, size=100}) {
+  return (
+    <section className="profile">
+      <h2>{scientist.name}</h2>
+      <img
+        className="avatar"
+        src={'https://i.imgur.com/' + person.imageId + 's.jpg'}
+        alt={person.name}
+        width={size}
+        height={size}
+      />
+      <ul>
+        <li>
+          <b>Profession: </b>
+          
+        </li>
+      </ul>
+    </section>
+  )
+}
+
+// scientist object to store profession, awards, etc. 
+
 export default function Gallery() {
   return (
     <div>
       <h1>Notable Scientists</h1>
       <section className="profile">
         <h2>Maria Skłodowska-Curie</h2>
-        <img
-          className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
-          alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
-        />
+        <Avatar
+          person={{name: 'Maria Skłodowska-Curie', imageId: 'szV5sdG'}}
+          size={70} />
         <ul>
           <li>
             <b>Profession: </b>
diff --git a/src/pages/qcomps/list_keys_id.js b/src/pages/qcomps/list_keys_id.js
index f10c9b88..3ab10759 100644
--- a/src/pages/qcomps/list_keys_id.js
+++ b/src/pages/qcomps/list_keys_id.js
@@ -18,6 +18,7 @@ function getImageUrl(imageId) {
 export default function List() {
   const listItems = people.map(person =>
     <li>
+      <img src={getImageUrl(person.imageId)}></img>
     </li>
   );
   return <ul>{listItems}</ul>;
diff --git a/src/pages/qcomps/profile_mistake.js b/src/pages/qcomps/profile_mistake.js
index ac318d70..50d1b6a8 100644
--- a/src/pages/qcomps/profile_mistake.js
+++ b/src/pages/qcomps/profile_mistake.js
@@ -1,4 +1,7 @@
 export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+    return (
+        <img 
+            src="https://i.imgur.com/jA8hHMpm.jpg" 
+            alt="Katsuko Saruhashi" 
+        />);
 }
diff --git a/src/pages/qcomps/props_item.js b/src/pages/qcomps/props_item.js
index 79a9e151..eb80d9af 100644
--- a/src/pages/qcomps/props_item.js
+++ b/src/pages/qcomps/props_item.js
@@ -1,6 +1,6 @@
 function Item({ name, isPacked }) {
   if (isPacked) {
-    return <li className="item">{name} ✔</li>;
+    return <li className="item"><del>{name}</del> </li>;
   }
   return <li className="item"> {name} </li>
 }
diff --git a/src/pages/qcomps/recipes.js b/src/pages/qcomps/recipes.js
index 37803925..45d309c9 100644
--- a/src/pages/qcomps/recipes.js
+++ b/src/pages/qcomps/recipes.js
@@ -16,7 +16,15 @@ export default function RecipeList() {
   return (
     <div>
       <h1>Recipes</h1>
-      {}
+      {recipes.map((recipe) =>
+      <div key={recipe.id}>
+        <h2> {recipe.name}</h2>
+        {ul}
+          {Array.from{recipe.ingredients).map(ingredient) =>
+          <li key={ingredient}>
+            {ingredient}
+          </li>}}
+        )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/qcomps/state.js b/src/pages/qcomps/state.js
index 35953a6a..f44f14d5 100644
--- a/src/pages/qcomps/state.js
+++ b/src/pages/qcomps/state.js
@@ -6,7 +6,11 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (index < sculptureList.length - 1) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {
diff --git a/src/pages/qcomps/stuckForm.js b/src/pages/qcomps/stuckForm.js
index 7cc952e0..f250c530 100644
--- a/src/pages/qcomps/stuckForm.js
+++ b/src/pages/qcomps/stuckForm.js
@@ -1,20 +1,20 @@
 import { useState } from 'react';
 
 export default function Form() {
-  let firstName = '';
-  let lastName = '';
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
 
   function handleFirstNameChange(e) {
-    firstName = e.target.value;
+    setFirstName(e.target.value);
   }
 
   function handleLastNameChange(e) {
-    lastName = e.target.value;
+    setLastName(e.target.value);
   }
 
   function handleReset() {
-    firstName = '';
-    lastName = '';
+    setFirstName('');
+    setLastName('');
   }
 
   return (
diff --git a/src/pages/qcomps/thankYouCrash.js b/src/pages/qcomps/thankYouCrash.js
index 07e1ba52..f3534082 100644
--- a/src/pages/qcomps/thankYouCrash.js
+++ b/src/pages/qcomps/thankYouCrash.js
@@ -2,11 +2,13 @@ import { useState } from 'react';
 
 export default function FeedbackForm() {
   const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('');
+  
   if (isSent) {
     return <h1>Thank you!</h1>;
   } else {
     // eslint-disable-next-line
-    const [message, setMessage] = useState('');
+    // const [message, setMessage] = useState('');
     return (
       <form onSubmit={e => {
         e.preventDefault();
diff --git a/src/pages/qcomps/todos.js b/src/pages/qcomps/todos.js
index 99713488..6eb2f57d 100644
--- a/src/pages/qcomps/todos.js
+++ b/src/pages/qcomps/todos.js
@@ -14,8 +14,8 @@ export default function TodoList() {
     <div style={person.theme}>
       <h1>Person Name's Todos</h1>
       <img className="avatar"
-      src="baseURL + imageID + imageSize + .jpg"
-      alt="Person's Name"
+      src={baseUrl + person.imageId + person.imageSize + '.jpg'} 
+      alt={person.name}
       />
     </div>
   );