diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 00000000..03d9549e
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/learn-react.iml b/.idea/learn-react.iml
new file mode 100644
index 00000000..d6ebd480
--- /dev/null
+++ b/.idea/learn-react.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 00000000..639900d1
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..084c1429
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/learn-react.iml" filepath="$PROJECT_DIR$/.idea/learn-react.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 00000000..644064e9
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="7058cce4-2b7f-4a07-8467-dd53cc6d8ebc" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="2cGwPgusAMFgHFupJ3owbn0SrZc" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "node.js.detected.package.eslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="7058cce4-2b7f-4a07-8467-dd53cc6d8ebc" name="Changes" comment="" />
+      <created>1707751200869</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1707751200869</updated>
+      <workItem from="1707751206192" duration="16000" />
+    </task>
+    <servers />
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 891dcb4d..bd6e212a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Kausha Himanshu Trivedi
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
@@ -43,4 +43,4 @@ To learn more about React.js, take a look at the [React Documentation](https://l
 
 ## What to Submit?
 
-Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
\ No newline at end of file
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
diff --git a/src/pages/index.js b/src/pages/index.js
index 69abbb64..8a963ffb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,11 +3,19 @@
 // import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
 import Profile from './components/profile'
+import ProfileMistake from './qcomps/profile_mistake'
+import FirstComp from './qcomps/firstcomp';
+import Bio from './qcomps/bios';
+import TodoList from './qcomps/todos';
 
 export default function Home() {
   return (
     <div className={styles.main}>
+      <ProfileMistake />
         <Profile />
+        <FirstComp />
+        <Bio />
+        <TodoList />
     </div>
   )
 }
diff --git a/src/pages/qcomps/bios.js b/src/pages/qcomps/bios.js
index cc9350fd..f5a01a6a 100644
--- a/src/pages/qcomps/bios.js
+++ b/src/pages/qcomps/bios.js
@@ -1,5 +1,6 @@
 export default function Bio() {
   return (
+    <>
     <div class="intro">
       <h1>Welcome to my website!</h1>
     </div>
@@ -8,5 +9,6 @@ export default function Bio() {
       <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..ed753dcd 100644
--- a/src/pages/qcomps/firstcomp.js
+++ b/src/pages/qcomps/firstcomp.js
@@ -1 +1,16 @@
-function MyComp() {}
\ No newline at end of file
+import React from 'react';
+
+const FirstComp = () => {
+  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>
+  );
+};
+
+export default FirstComp;
\ No newline at end of file
diff --git a/src/pages/qcomps/list_keys_id.js b/src/pages/qcomps/list_keys_id.js
index f10c9b88..bd6f95fc 100644
--- a/src/pages/qcomps/list_keys_id.js
+++ b/src/pages/qcomps/list_keys_id.js
@@ -1,24 +1,33 @@
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'szV5sdG'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'YfeOqp2'
-}];
+export const people = [
+  {
+    id: 0,
+    name: 'Creola Katherine Johnson',
+    profession: 'mathematician',
+    accomplishment: 'spaceflight calculations',
+    imageId: 'szV5sdG'
+  },
+  {
+    id: 1,
+    name: 'Mario José Molina-Pasquel Henríquez',
+    profession: 'chemist',
+    accomplishment: 'discovery of Arctic ozone hole',
+    imageId: 'YfeOqp2'
+  }
+];
 
 function getImageUrl(imageId) {
-    return "https://i.imgur.com/" + imageId + "s.jpg"
+  return "https://i.imgur.com/" + imageId + "s.jpg";
 }
+
 export default function List() {
   const listItems = people.map(person =>
-    <li>
+    <li key={person.id}>
+      <img src={getImageUrl(person.imageId)} alt={person.name} />
+      <div>Name: {person.name}</div>
+      <div>Profession: {person.profession}</div>
+      <div>Accomplishment: {person.accomplishment}</div>
     </li>
   );
+
   return <ul>{listItems}</ul>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/profile_mistake.js b/src/pages/qcomps/profile_mistake.js
index ac318d70..28ab5211 100644
--- a/src/pages/qcomps/profile_mistake.js
+++ b/src/pages/qcomps/profile_mistake.js
@@ -1,4 +1,5 @@
 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..d63c426d 100644
--- a/src/pages/qcomps/props_item.js
+++ b/src/pages/qcomps/props_item.js
@@ -1,8 +1,9 @@
 function Item({ name, isPacked }) {
-  if (isPacked) {
-    return <li className="item">{name} ✔</li>;
-  }
-  return <li className="item"> {name} </li>
+  return (
+    <li className="item">
+      {isPacked ? <del>{name} ✔</del> : name}
+    </li>
+  );
 }
 
 export default function PackingList() {
@@ -10,18 +11,9 @@ export default function PackingList() {
     <section>
       <h1>My Packing List</h1>
       <ul>
-        <Item
-          isPacked={false}
-          name="Laptop"
-        />
-        <Item
-          isPacked={true}
-          name="Chargers"
-        />
-        <Item
-          isPacked={true}
-          name="Socks"
-        />
+        <Item isPacked={false} name="Laptop" />
+        <Item isPacked={true} name="Chargers" />
+        <Item isPacked={true} name="Socks" />
       </ul>
     </section>
   );
diff --git a/src/pages/qcomps/recipes.js b/src/pages/qcomps/recipes.js
index 37803925..12ba43dd 100644
--- a/src/pages/qcomps/recipes.js
+++ b/src/pages/qcomps/recipes.js
@@ -1,22 +1,35 @@
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: new Set(['tomatoes', 'cucumber', 'onion', 'olives', 'feta'])
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: new Set(['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'])
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: new Set(['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'])
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: 'Greek Salad',
+    ingredients: new Set(['tomatoes', 'cucumber', 'onion', 'olives', 'feta'])
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: 'Hawaiian Pizza',
+    ingredients: new Set(['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'])
+  },
+  {
+    id: 'hummus',
+    name: 'Hummus',
+    ingredients: new Set(['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'])
+  }
+];
 
 export default function RecipeList() {
   return (
     <div>
       <h1>Recipes</h1>
-      {}
+      {recipes.map(recipe => (
+        <div key={recipe.id}>
+          <h2>{recipe.name}</h2>
+          <ul>
+            {[...recipe.ingredients].map((ingredient, index) => (
+              <li key={index}>{ingredient}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/qcomps/todos.js b/src/pages/qcomps/todos.js
index 99713488..15ebad47 100644
--- a/src/pages/qcomps/todos.js
+++ b/src/pages/qcomps/todos.js
@@ -14,9 +14,13 @@ 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>
   );
 }
+
+
+
+