diff --git a/app/_components/(workshop)/link-preview/link-preview.jsx b/app/_components/(workshop)/link-preview/link-preview.jsx
index 36d286f..143b5dd 100644
--- a/app/_components/(workshop)/link-preview/link-preview.jsx
+++ b/app/_components/(workshop)/link-preview/link-preview.jsx
@@ -26,7 +26,7 @@ export default function LinkPreview({ title, description, link, theme }){
             } catch (error) {
                 console.error("Error fetching link preview:", error)
                 
-                setPreviewImglink("/images/filler.jpeg")
+                setPreviewImglink("/images/filler.png")
                 setLoading(false)
             }
         }
@@ -35,7 +35,7 @@ export default function LinkPreview({ title, description, link, theme }){
     }, [link])
 
     return(
-        <a href={link}>
+        <a href={link} target="_blank">
             <div className={`${theme=="light" ? styles.container_light : styles.container_dark}`}>
                 <p className={`${theme=="light" ? styles.title_light : styles.title_dark}`}>{title}</p>
                 {theme=="dark" &&
diff --git a/app/_components/(workshop)/link-preview/link-preview.module.scss b/app/_components/(workshop)/link-preview/link-preview.module.scss
index 64bf5dc..f58c6d0 100644
--- a/app/_components/(workshop)/link-preview/link-preview.module.scss
+++ b/app/_components/(workshop)/link-preview/link-preview.module.scss
@@ -40,7 +40,7 @@
     
     img {
         border-radius: 16px;
-        background-color: rgba(0, 0, 0, 0.5);
+        //background-color: rgba(0, 0, 0, 0.5);
     }
 }
 
diff --git a/app/_components/(workshop)/materials-lessons/materialsLessons.jsx b/app/_components/(workshop)/materials-lessons/materialsLessons.jsx
index 4ad1ff6..1f8c21d 100644
--- a/app/_components/(workshop)/materials-lessons/materialsLessons.jsx
+++ b/app/_components/(workshop)/materials-lessons/materialsLessons.jsx
@@ -4,12 +4,16 @@ import Image from 'next/image'
 import styles from './materialsLessons.module.scss'
 
 import Lesson from './lessonCard'
-import Demo1 from '@/_demos/demo1'
-import Inspect from '@/_demos/inspect'
+import FlexDemo from '@/_demos/flex'
+import InspectDemo from '@/_demos/inspect'
+import MapDemo from '@/_demos/map'
+import StateDemo from '@/_demos/state'
 
 const componentMap = {
-    Demo1: <Demo1 />,
-    Inspect: <Inspect />
+    FlexDemo: <FlexDemo />,
+    InspectDemo: <InspectDemo />,
+    MapDemo: <MapDemo />,
+    StateDemo: <StateDemo />,
 }
 
 export default function Materials({ slideDeckLink, recordingLink, lessons }) {
@@ -24,9 +28,9 @@ export default function Materials({ slideDeckLink, recordingLink, lessons }) {
                 <div className={styles.link}>
                     <LinkPreview title="Workshop Slides" link={slideDeckLink} theme="light" />
                 </div>
-                <div className={styles.link}>
+                {recordingLink != "" && <div className={styles.link}>
                     <LinkPreview title="Workshop Recording" link={recordingLink} theme="light" />
-                </div>
+                </div>}
             </div>
 
             <h1>Lessons</h1>
diff --git a/app/_data/workshops.json b/app/_data/workshops.json
index 25250af..a91e003 100644
--- a/app/_data/workshops.json
+++ b/app/_data/workshops.json
@@ -9,9 +9,9 @@
             "Intro to Git"
         ],
         "assignment": {
-            "brief": "For your assignment you will need to practice HTML and CSS.\n\nAccess your personal page and create a profile. Introduce yourself by briefly telling us about you. Practice correct HTML semantics. Then, add additional elements, such as an image or a “Skills” section with a list of your skills.\n\nOnce you complete the HTML, starting designing your CSS. Make sure to use the techniques taught in the workshop.",
-            "tags": ["flexbox", "html"],
-            "deadline": "2.24.2025"
+            "brief": "For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure.\n\nIn your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation!\n\nThen, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.",
+            "tags": ["useState", "map", "ReactJS"],
+            "deadline": "4.4.2025"
         },
         "timeline": [
             {
@@ -48,9 +48,22 @@
         "lessons": [
             {
                 "title": "Chrome Developer Tools",
-                "description": "Try using the inspect tool to check out the component to the right- How are elements nested? What tags are used? Check out the css styles!",
-                "resources": [],
-                "demoComponentName": "Inspect"
+                "description": "Try using the inspect tool on the component to the right!",
+                "resources": [
+                    {
+                        "name": "How are elements nested?",
+                        "link": ""
+                    },
+                    {
+                        "name": "What tags are used?",
+                        "link": ""
+                    },
+                    {
+                        "name": "Check out the css styles!",
+                        "link": ""
+                    }
+                ],
+                "demoComponentName": "InspectDemo"
             } 
         ],
         "defaultCode": {
@@ -105,9 +118,9 @@
             "Positioning"
         ],
         "assignment": {
-            "brief": "For your assignment you will need to practice HTML and CSS.\n\nAccess your personal page and create a profile. Introduce yourself by briefly telling us about you. Practice correct HTML semantics. Then, add additional elements, such as an image or a “Skills” section with a list of your skills.\n\nOnce you complete the HTML, starting designing your CSS. Make sure to use the techniques taught in the workshop.",
-            "tags": ["flexbox", "html"],
-            "deadline": "2.24.2025"
+            "brief": "For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure.\n\nIn your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation!\n\nThen, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.",
+            "tags": ["useState", "map", "ReactJS"],
+            "deadline": "4.4.2025"
         },
         "timeline": [
             {
@@ -152,7 +165,7 @@
                         "link": "https://flexboxlabs.netlify.app/"
                     }
                 ],
-                "demoComponentName": "Demo1"
+                "demoComponentName": "FlexDemo"
             },
             {
                 "title": "Position",
@@ -167,7 +180,7 @@
                         "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/position"
                     }
                 ],
-                "demoComponentName": "Demo1"
+                "demoComponentName": "FlexDemo"
             }    
         ],
         "defaultCode": {
@@ -206,7 +219,7 @@
             {
                 "title": "Box Model Cheat Sheet",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://www.codecademy.com/learn/learn-css/modules/learn-css-box-model/cheatsheet"
             },
             {
@@ -218,49 +231,49 @@
             {
                 "title": "Overflow Property",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://blog.hubspot.com/website/css-overflow"
             },
             {
                 "title": "PsuedoClasses",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://css-tricks.com/pseudo-class-selectors/"
             },
             {
                 "title": "Flexbox Cheat Sheet",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
             },
             {
                 "title": "Practical Guide to CSS Positioning",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://www.digitalocean.com/community/tutorials/css-practical-guide-position-relative-absolute"
             },
             {
                 "title": "Positioning Real World Example",
                 "type": "Video", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://www.youtube.com/watch?v=MxEtxo_AaZ4"
             },
             {
                 "title": "Media Query Tutorial",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries"
             },
             {
                 "title": "Media Query Explained + Cheat Sheet",
                 "type": "Website", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://medium.com/@sawanrathod/css3-media-query-cheat-sheet-1fab77ea3cb8"
             },
             {
                 "title": "Mastering Responsive Design",
                 "type": "Video", 
-                "image": "",
+                "image": "/images/filler.jpeg",
                 "link": "https://youtu.be/K24lUqcT0Ms?si=WZDUyaX_YNQyY-zr"
             }
         ]
@@ -275,18 +288,11 @@
             "JSON"
         ],
         "assignment": {
-            "brief": "For your assignment you will need to practice HTML and CSS.\n\nAccess your personal page and create a profile. Introduce yourself by briefly telling us about you. Practice correct HTML semantics. Then, add additional elements, such as an image or a “Skills” section with a list of your skills.\n\nOnce you complete the HTML, starting designing your CSS. Make sure to use the techniques taught in the workshop.",
-            "tags": ["flexbox", "html"],
-            "deadline": "2.24.2025"
+            "brief": "For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure.\n\nIn your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation!\n\nThen, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.",
+            "tags": ["useState", "map", "ReactJS"],
+            "deadline": "4.4.2025"
         },
         "timeline": [
-            {
-                "item": "Front-End Video",
-                "startDay": 1, 
-                "startInHalf": 1, 
-                "endDay": 3, 
-                "endBeforeHalf": 1
-            },
             {
                 "item": "Workshop Slide Deck",
                 "startDay": 2, 
@@ -295,53 +301,27 @@
                 "endBeforeHalf": 2
             },
             {
-                "item": "Figma",
+                "item": "Additional Resources",
                 "startDay": 4, 
                 "startInHalf": 1, 
                 "endDay": 7, 
                 "endBeforeHalf": 1
-            },
-            {
-                "item": "Something Else",
-                "startDay": 5, 
-                "startInHalf": 1, 
-                "endDay": 7, 
-                "endBeforeHalf": 3
             }
         ],
-        "slideDeckLink": "https://docs.google.com/presentation/d/1jSSyIqFIDO1FMGBPZh7PpAjNFlz6BXAf/edit?usp=drive_link&ouid=111649398785307597923&rtpof=true&sd=true",
-        "recordingLink": "",
+        "slideDeckLink": "https://docs.google.com/presentation/d/1rGxvFJ2WuiKKfkOdi55kdfGbG67BXtpy/edit?usp=sharing&ouid=104829516095066094781&rtpof=true&sd=true",
+        "recordingLink": "https://ucdavis.zoom.us/rec/share/D1izCyD6Mld6Q0WPZUl8SN52tJyS-qLmnvxxfnu96Mibzi9yDRj1Qu6JZn27D6VV.aUAu2itacnPxkI7Z",
         "lessons": [
             {
-                "title": "Flexbox",
-                "description": "Learn how to use flexbox!",
+                "title": "Array Map Method",
+                "description": "See demo to the right and visit helpful links below!",
                 "resources": [
                     {
-                        "name": "cheat sheet",
-                        "link": "https://www.google.com"
-                    },
-                    {
-                        "name": "interactive guide",
-                        "link": "https://www.google.com"
+                        "name": "hiking explanation",
+                        "link": "https://blog.codeanalogies.com/2018/02/20/javascript-map-method-explained-by-going-on-a-hike/"
                     }
                 ],
-                "demoComponentName": "Demo1"
-            },
-            {
-                "title": "Position",
-                "description": "Learn how to use positioning!",
-                "resources": [
-                    {
-                        "name": "cheat sheet",
-                        "link": "https://www.google.com"
-                    },
-                    {
-                        "name": "interactive guide",
-                        "link": "https://www.google.com"
-                    }
-                ],
-                "demoComponentName": "Demo1"
-            }    
+                "demoComponentName": "MapDemo"
+            } 
         ],
         "defaultCode": {
             "/App.js": {
@@ -353,40 +333,34 @@
         },
         "additionalResources": [
             {
-                "title": "Figma",
+                "title": "Javascript Crash Course",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.w3resource.com/course/javascript-course.html#/"
             },
             {
-                "title": "CSS Selector Game",
+                "title": "Anonymous Functions",
                 "type": "Website", 
                 "image": "/images/filler.jpeg", 
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.geeksforgeeks.org/javascript-anonymous-functions/"
             },
             {
-                "title": "Installing Git",
+                "title": "Arrow Functions Breakdown",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://ui.dev/arrow-functions"
             },
             {
-                "title": "CSS Cheat Sheet",
+                "title": "Event Handling",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
-            },
-            {
-                "title": "HTML Semantics",
-                "type": "Website", 
-                "image": "",
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.sencha.com/blog/event-handling-in-javascript-a-practical-guide-with-examples/"
             },
             {
-                "title": "HTML File Setup",
+                "title": "Map Method",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.w3schools.com/jsref/jsref_map.asp"
             }
         ]
     },
@@ -400,18 +374,11 @@
             "Props"
         ],
         "assignment": {
-            "brief": "For your assignment you will need to practice HTML and CSS.\n\nAccess your personal page and create a profile. Introduce yourself by briefly telling us about you. Practice correct HTML semantics. Then, add additional elements, such as an image or a “Skills” section with a list of your skills.\n\nOnce you complete the HTML, starting designing your CSS. Make sure to use the techniques taught in the workshop.",
-            "tags": ["flexbox", "html"],
-            "deadline": "2.24.2025"
+            "brief": "For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure.\n\nIn your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation!\n\nThen, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.",
+            "tags": ["useState", "map", "ReactJS"],
+            "deadline": "4.4.2025"
         },
         "timeline": [
-            {
-                "item": "Front-End Video",
-                "startDay": 1, 
-                "startInHalf": 1, 
-                "endDay": 3, 
-                "endBeforeHalf": 1
-            },
             {
                 "item": "Workshop Slide Deck",
                 "startDay": 2, 
@@ -420,53 +387,34 @@
                 "endBeforeHalf": 2
             },
             {
-                "item": "Figma",
+                "item": "Additional Resources",
                 "startDay": 4, 
                 "startInHalf": 1, 
                 "endDay": 7, 
                 "endBeforeHalf": 1
             },
             {
-                "item": "Something Else",
+                "item": "Assignment 2",
                 "startDay": 5, 
                 "startInHalf": 1, 
                 "endDay": 7, 
                 "endBeforeHalf": 3
             }
         ],
-        "slideDeckLink": "https://docs.google.com/presentation/d/1XGLVLjPviWl0_coQd-nwUSJVXMViUiii/edit?usp=drive_link&ouid=111649398785307597923&rtpof=true&sd=true",
-        "recordingLink": "",
+        "slideDeckLink": "https://docs.google.com/presentation/d/1vEnZTdNc8V1HRZR3Isd62x4C481-Dg-Z/edit?usp=sharing&ouid=104829516095066094781&rtpof=true&sd=true",
+        "recordingLink": "https://ucdavis.zoom.us/rec/share/0JRpH7B5JPkH6JFoN6st6wKxPIca96Er-jqgMvxqHds6m9MoKNI8-av2CsVm_9Xb.lO2gjgZ0T1K8wSBr",
         "lessons": [
             {
-                "title": "Flexbox",
-                "description": "Learn how to use flexbox!",
-                "resources": [
-                    {
-                        "name": "cheat sheet",
-                        "link": "https://www.google.com"
-                    },
-                    {
-                        "name": "interactive guide",
-                        "link": "https://www.google.com"
-                    }
-                ],
-                "demoComponentName": "Demo1"
-            },
-            {
-                "title": "Position",
-                "description": "Learn how to use positioning!",
+                "title": "State Variables",
+                "description": "Learn about state variables, created w/ useState!",
                 "resources": [
                     {
-                        "name": "cheat sheet",
-                        "link": "https://www.google.com"
-                    },
-                    {
-                        "name": "interactive guide",
-                        "link": "https://www.google.com"
+                        "name": "full guide",
+                        "link": "https://handsonreact.com/docs/state"
                     }
                 ],
-                "demoComponentName": "Demo1"
-            }    
+                "demoComponentName": "StateDemo"
+            }
         ],
         "defaultCode": {
             "/App.js": {
@@ -478,40 +426,40 @@
         },
         "additionalResources": [
             {
-                "title": "Figma",
+                "title": "What is React JS?",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started"
             },
             {
-                "title": "CSS Selector Game",
+                "title": "Imports & Exports",
                 "type": "Website", 
                 "image": "/images/filler.jpeg", 
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.w3schools.com/react/react_es6_modules.asp"
             },
             {
-                "title": "Installing Git",
-                "type": "Website", 
+                "title": "10 React Hooks Explained",
+                "type": "Video", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.youtube.com/watch?v=TNhaISOUy6Q"
             },
             {
-                "title": "CSS Cheat Sheet",
+                "title": "UseState Breakdown",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://www.w3schools.com/react/react_usestate.asp"
             },
             {
-                "title": "HTML Semantics",
+                "title": "React Rerender Guide",
                 "type": "Website", 
-                "image": "",
-                "link": "https://flukeout.github.io/"
+                "image": "/images/filler.jpeg",
+                "link": "https://www.developerway.com/posts/react-re-renders-guide"
             },
             {
-                "title": "HTML File Setup",
+                "title": "What Are Props?",
                 "type": "Website", 
                 "image": "/images/filler.jpeg",
-                "link": "https://flukeout.github.io/"
+                "link": "https://react.dev/learn/passing-props-to-a-component"
             }
         ]
     },
@@ -525,9 +473,9 @@
             "Error Handling"
         ],
         "assignment": {
-            "brief": "For your assignment you will need to practice HTML and CSS.\n\nAccess your personal page and create a profile. Introduce yourself by briefly telling us about you. Practice correct HTML semantics. Then create a “Skills” section. Create a list of your skills.\n\nOnce you complete the HTML, starting designing your CSS. Make sure to use the techniques taught in the workshop.",
-            "tags": ["flexbox", "html", "media queries"],
-            "deadline": "10.18.2024"
+            "brief": "For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure.\n\nIn your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation!\n\nThen, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.",
+            "tags": ["useState", "map", "ReactJS"],
+            "deadline": "4.4.2025"
         },
         "timeline": [
             {
diff --git a/app/_demos/demo1.jsx b/app/_demos/flex.jsx
similarity index 86%
rename from app/_demos/demo1.jsx
rename to app/_demos/flex.jsx
index edbe889..7a26e1f 100644
--- a/app/_demos/demo1.jsx
+++ b/app/_demos/flex.jsx
@@ -1,4 +1,4 @@
-import styles from './demo1.module.scss'
+import styles from './flex.module.scss'
 
 export default function Demo1(){
     return (
diff --git a/app/_demos/demo1.module.scss b/app/_demos/flex.module.scss
similarity index 100%
rename from app/_demos/demo1.module.scss
rename to app/_demos/flex.module.scss
diff --git a/app/_demos/inspect.jsx b/app/_demos/inspect.jsx
index 221f0a5..a78a716 100644
--- a/app/_demos/inspect.jsx
+++ b/app/_demos/inspect.jsx
@@ -3,7 +3,7 @@ import { IoMdStar } from "react-icons/io";
 import { IoMdStarHalf } from "react-icons/io";
 
 
-export default function Inspect(){
+export default function InspectDemo(){
     return (
         <div className={styles.big_box}>
             <img src="/images/salad.jpg" alt="Caesar salad" className={styles.salad} width="300" height="200" />
diff --git a/app/_demos/inspect.module.scss b/app/_demos/inspect.module.scss
index 9f53af3..f167a82 100644
--- a/app/_demos/inspect.module.scss
+++ b/app/_demos/inspect.module.scss
@@ -1,5 +1,5 @@
 .big_box {
-    width: 100%;
+    width: 80%;
     aspect-ratio: 1.5;
 
     display: flex;
@@ -7,7 +7,9 @@
     justify-content: center;
     align-items: center;
     gap: 10px;
-    padding: 20px;
+    padding: 10px;
+    margin-left: 50px;
+    margin-right: 20px;
 
     background-color: lightgoldenrodyellow;
 }
diff --git a/app/_demos/map.jsx b/app/_demos/map.jsx
new file mode 100644
index 0000000..959fd70
--- /dev/null
+++ b/app/_demos/map.jsx
@@ -0,0 +1,21 @@
+import styles from './map.module.scss'
+
+const apples = ["Granny Smith", "Fuji", "Gala"]
+
+export default function MapDemo(){
+    return (
+        <div className={styles.big_box}>
+            <p className={styles.description}>{"Given an array, apples=[\'Granny Smith\', \'Fuji\', \'Gala\'], you can use map to generate an array of UIs for each apple in the array"}</p>
+            <div className={styles.apples}>
+                {apples.map((apple)=>{
+                    return (
+                    <div key={apple} className={styles.apple}>
+                        <div className={styles.stem} />
+                        <div className={styles.leaf} />
+                    </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/_demos/map.module.scss b/app/_demos/map.module.scss
new file mode 100644
index 0000000..594a5f1
--- /dev/null
+++ b/app/_demos/map.module.scss
@@ -0,0 +1,56 @@
+.big_box {
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+
+    background-color: rgb(207, 206, 206);
+}
+
+.description {
+    font-size: large;
+    color: black;
+    text-align: left;
+    margin-bottom: 50px;
+}
+
+.apples {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    column-gap: 20px;
+}
+
+.apple {
+    width: 80px;
+    height: 85px;
+    background-color: red;
+    position: relative;
+    border-radius: 50% / 55%;
+}
+
+.leaf {
+    position: absolute;
+    top: -12px;
+    left: 60%;
+    transform: rotate(-20deg);
+    width: 15px;
+    height: 10px;
+    background-color: green;
+    border-radius: 50%;
+}
+
+.stem {
+    position: absolute;
+    top: -18px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6px;
+    height: 15px;
+    background-color: brown;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/app/_demos/state.jsx b/app/_demos/state.jsx
new file mode 100644
index 0000000..c53d861
--- /dev/null
+++ b/app/_demos/state.jsx
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import styles from './state.module.scss'
+
+export default function StateDemo(){
+    const [count, setCount] = useState(0);
+
+    return (
+        <div className={styles.big_box}>
+            <h5>Cookie clicker</h5>
+            <p>{count}</p>
+            <img onClick={()=>{setCount(count+1)}} src="/images/cookie.jpg" alt="Cookie" className={styles.cookie} width="300" height="200" />
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/_demos/state.module.scss b/app/_demos/state.module.scss
new file mode 100644
index 0000000..dd54c7c
--- /dev/null
+++ b/app/_demos/state.module.scss
@@ -0,0 +1,12 @@
+.big_box {
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+
+    background-color: white;
+}
\ No newline at end of file
diff --git a/public/contacts/Sreya.jpg b/public/contacts/Sreya.jpg
index 14d8887..2785cb5 100644
Binary files a/public/contacts/Sreya.jpg and b/public/contacts/Sreya.jpg differ
diff --git a/public/images/filler.jpeg b/public/images/_discarded_filler.jpeg
similarity index 100%
rename from public/images/filler.jpeg
rename to public/images/_discarded_filler.jpeg
diff --git a/public/images/cookie.jpg b/public/images/cookie.jpg
new file mode 100644
index 0000000..8aa74be
Binary files /dev/null and b/public/images/cookie.jpg differ
diff --git a/public/images/filler.png b/public/images/filler.png
new file mode 100644
index 0000000..3e99322
Binary files /dev/null and b/public/images/filler.png differ