diff --git a/README.md b/README.md
index 9ea4e26b3..66c555f2d 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,33 @@
-# Happy Thoughts
+Project Happy Thoughts - https://project-happy-thoughts-hannah-ek.netlify.app
 
-Replace this readme with your own information about your project.
+🏁 Goals:
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+I was tasked with building a Twitter like app using an API to collect 'Happy Thoughts' in React and I have successfully completed what I set out to do.
 
-## The problem
+The app has three main functionalities - adding thoughts, listing thoughts, and toggling a 'like' status. I decided to keep the design quite simple as I did not wan't it to be overly complex.
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Overall, I found this project to be a great opportunity to flex my React muscles and bring together different parts of React and working with fetching and posting to an API. I am very pleased with the outcome and I'm looking forward to using the skills and knowledge I gained from this project in future endeavors.
 
-## View it live
+Must-have requirements:
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+✅ Follow a given design as close as possible.
+
+✅ List the most recent thoughts at the top and older thoughts at the bottom (sorted).
+
+✅ Show the content of the message and how many likes the thoughts have received.
+
+✅ Have a form to post new thoughts.
+
+✅ Implement a heart button to send likes on a thought.
+
+🚧 The problem:
+
+I started by going through the design and sketching the different components out, deciding on how to structure my app. Then I started building also decided on adding a loading component for when the page re-renders. 
+
+If I had more time, I would add more functionality.
+
+💻 Tech stack:
+
+JavaScript React CSS HTML Figma
+
+View it live https://project-happy-thoughts-hannah-ek.netlify.app
diff --git a/code/package-lock.json b/code/package-lock.json
index f7e97e1e9..fab8e56d2 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "babel-eslint": "^10.1.0",
+        "date-fns": "^2.29.3",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.26.0",
@@ -6205,6 +6206,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -21996,6 +22009,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/code/package.json b/code/package.json
index 68869f589..4cbbdb2d2 100644
--- a/code/package.json
+++ b/code/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "babel-eslint": "^10.1.0",
+    "date-fns": "^2.29.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..16b949fd5 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -4,6 +4,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:title" content="Project Happy Thoughts - Hannah Ek">       <!-- OG (open graph) tags are snippets of code that provide meta data about a web page, mainly to social media platforms (ex facebook, linkedin, instagram)-->
+    <meta property="og:description" content="Project Happy Thoughts, a project by Hannah Ek, a student @Technigo Web Development Bootcamp spring 2023">
+    <meta property="og:image" content="https://i.postimg.cc/kMzq5ttr/Screenshot-2023-03-26-at-09-19-59.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +16,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Project Happy Thoughts</title>
   </head>
 
   <body>
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..b44a2edf7 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,16 @@
 import React from 'react';
+import { ThoughtFeed } from 'components/ThoughtFeed';
+import { NewThought } from 'components/NewThought';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+    <>
+      <section>
+        <NewThought />
+      </section>
+      <section>
+        <ThoughtFeed />
+      </section>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/NewThought.js b/code/src/components/NewThought.js
new file mode 100644
index 000000000..c09514cb2
--- /dev/null
+++ b/code/src/components/NewThought.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+export const NewThought = () => {
+  const [newThought, setNewThought] = useState('');
+
+  const HandleFormSubmit = (event) => {
+    event.preventDefault();
+    if (newThought.length < 5) {
+      return alert('Get on that keyboard, more than 5 characters, please!')
+    } else if (newThought.length > 140) {
+      return alert('Are you some sort of hacker?! No more than 140 characters, please!')
+    } else {
+      const Submit = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: newThought })
+      };
+      fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', Submit)
+        .then((response) => response.json())
+        .then(() => {
+          setNewThought('');
+          setTimeout(() => window.location.reload(), 3000)
+        })
+    }
+  };
+
+  return (
+    <section className="main-container">
+      <form onSubmit={HandleFormSubmit} className="form-card">
+        <label htmlFor="newThought" className="head-thought">What is making you happy right now?
+          <textarea
+            id="newThought"
+            type="text"
+            placeholder="Type your happy thoughts here..."
+            rows="4"
+            cols="40"
+            value={newThought}
+            onChange={(event) => setNewThought(event.target.value)} />
+        </label>
+        <p className={newThought.length > 140 ? 'counter' : 'counter'}>{newThought.length} / 140</p>
+        <button className="submitBtn" type="submit">
+          <span>
+            <span className="heart" role="img" aria-label="heart"> 💗 </span>
+            Send happy thought
+            <span className="heart" role="img" aria-label="heart"> 💗 </span>
+          </span>
+        </button>
+      </form>
+    </section>
+  )
+};
\ No newline at end of file
diff --git a/code/src/components/Spinning.js b/code/src/components/Spinning.js
new file mode 100644
index 000000000..2859b8b12
--- /dev/null
+++ b/code/src/components/Spinning.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Spinning = () => (
+  <div className="loading-thoughts">
+    <div className="loading-spinner">
+    💖
+    </div>
+  </div>
+)
+
+export default Spinning;
\ No newline at end of file
diff --git a/code/src/components/ThoughtFeed.js b/code/src/components/ThoughtFeed.js
new file mode 100644
index 000000000..65b7a29a3
--- /dev/null
+++ b/code/src/components/ThoughtFeed.js
@@ -0,0 +1,55 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useState, useEffect } from 'react';
+import { formatDistance } from 'date-fns';
+import Spinning from './Spinning';
+// import { Loading } from './Loading'
+
+const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'
+
+export const ThoughtFeed = () => {
+  const [thoughtsList, setThoughtsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`${API}`)
+      .then((res) => res.json())
+      .then((data) => setThoughtsList(data))
+      .catch((error) => console.log(error))
+      .finally(() => { setLoading(false) })
+  }, []);
+
+  const HandleLike = (thoughtId) => {
+    fetch(`${API}/${thoughtId}/like`, { method: 'POST' })
+      .then((res) => res.json())
+      .then((data) => {
+        const UpdateHearts = thoughtsList.map((like) => {
+          if (like._id === data._id) {
+            like.hearts += 1
+            return like
+          } else { return like }
+        })
+        setThoughtsList(UpdateHearts)
+      })
+  };
+
+  return (
+    <>
+      <section className="main-container">
+        {!loading && thoughtsList.map((thought) => {
+          return (
+            <div key={thought._id} className="card">
+              <p className="post-text">{thought.message}</p>
+              <button type="button" className={thought.hearts === 0 ? 'noLikesBtn' : 'likesBtn'} onClick={() => HandleLike(thought._id)}>
+                <span role="img" aria-label="Like this post">💗</span>
+              </button>
+              <span className="sum-hearts">x {thought.hearts}</span>
+              <p className="date"> {formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p>
+            </div>
+          )
+        })}
+      </section>
+      {loading && (<Spinning />)}
+    </>
+  )
+};
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..2c4fff1a0 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -5,9 +5,178 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.main-container {
+  padding: 0 18px;
+  box-sizing: border-box;
+  width: 400px;
+  margin: 0 auto;
+}
+
+.form-card {
+  box-sizing: border-box;
+  background-color: #f0f0f0f3;
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #000000;
+  box-shadow: 4px 4px #000000;
+}
+
+.head-thought {
+  font-family: "Courier New";
+  font-weight: bold;
+  font-size: 15px;
+}
+
+textarea {
+    border: none;
+    color: #000;
+    padding: 8px;
+    margin: 15px 0 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.submitBtn {
+  font-family: "Courier New";
+  font-size: 12px;
+  font-weight: bold;
+  border: none;
+  border-radius: 50px;
+  color: #380118;
+  background-color: #ffadad;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-left: 45px;
+}
+
+.heart {
+  margin: 8px;
+}
+
+.img {
+  margin: 0px 2px;
+}
+
+.card {
+  box-sizing: border-box;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid #000000; 
+  margin: 18px 0;
+  padding: 10px 20px;
+  box-shadow: 4.5px 5px #000000;
+  overflow-wrap: break-word;
+  font-weight: bold;
+}
+
+.post-text {
+  font-family: "Courier New";
+  font-size: 13px;
+  color: black;
+  margin: 0;
+  padding: 18px 0;
+  min-height: 20px;
+}
+
+.heartEmo {
+  font-size: 12px;
+  transition: font-size 0.1s ease-in-out;
+}
+
+.heartEmo:hover {
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.hearts {
+  margin-right: 10px;
+  border: none;
+  border-radius: 50%;
+  height: 38px;
+  width: 38px;
+  cursor: pointer;
+  background-color: #e2016a51;
+}
+
+.likesBtn,
+.noLikesBtn {
+  background-color: #ffacac;
+  margin-right: 8px;
+  border: none;
+  border-radius: 55%;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.noLikesBtn {
+  background-color: #f3f3f3a4;
+}
+
+.sum-hearts,
+.counter {
+  font-size: 12px;
+  color: #7d7a7af3;
+  text-align: right;
+  margin: 0;
+  position: absolute;
+  margin-top: 10px;
+}
+
+.date {
+    float: right;
+    position: relative;
+    font-size: 12px;
+    color: #7d7a7af3;
+    text-align: right;
+}
+
+.loading-spinner {
+  animation-name: loadspinner;
+  display: block;
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+  margin-top: 30px;
+  margin: 30px auto;
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes loadspinner {
+from {
+    transform: rotate(0deg)
+
+  } 
+to {
+    transform: rotate(360deg)
+  }
+}
+
+  
+
+/*--MEDIA QUERIES--*/
+
+@media (min-width: 768px) {
+  .mainContainer {
+    width: 450px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mainContainer {
+    width: 500px;
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..e10f97c29
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,24 @@
+{
+  "name": "project-happy-thoughts",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "date-fns": "^2.29.3"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..e297aa88b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "date-fns": "^2.29.3"
+  }
+}