diff --git a/README.md b/README.md
index 9ea4e26b3..01c10d24c 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,23 @@
 # Happy Thoughts
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The project "Happy Thoughts" is about practicing React state skills by fetching and posting data to an API.
 
 ## The problem
 
-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?
+Basic requirements:
+Following the provided design.
+Publishing the most recent thoughts at the top and older thoughts at the bottom of the page.
+The thoughts show the content of the message and how many likes they've received.
+Having a form to post new thoughts.
+Implementing the heart button to send likes on a thought.
+
+Stretch goals:
+Show a count below the form input that updates as the user types and shows how many characters are remaining. Make it go red when the user has typed over 140 characters
+When POSTing a new thought, if the message was empty, too long, or too short, you get an error message back from the API.
+Handling loading states.
+Keep count of how many different posts the user have liked. 
+
 
 ## View it live
 
-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.
+noras-happy-thoughts-project.netlify.app
diff --git a/code/package-lock.json b/code/package-lock.json
index f7e97e1e9..65f609250 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",
@@ -16,7 +17,9 @@
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-animated-css": "^1.2.1",
+        "react-dom": "^18.2.0",
+        "react-spinners": "^0.13.8"
       },
       "devDependencies": {
         "react-scripts": "5.0.1"
@@ -4622,8 +4625,7 @@
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "node_modules/ast-types-flow": {
       "version": "0.0.7",
@@ -4955,6 +4957,28 @@
       "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
       "dev": true
     },
+    "node_modules/babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      }
+    },
+    "node_modules/babel-polyfill/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-polyfill/node_modules/regenerator-runtime": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+      "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -5018,6 +5042,27 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5166,6 +5211,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-or-node": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-or-node/-/browser-or-node-1.3.0.tgz",
+      "integrity": "sha512-0F2z/VSnLbmEeBcUrSuDH5l0HxTXdQQzLjkmBR4cYfvg1zJrKSlmIZFqyFR8oX0NrwPhy3c3HQ6i3OxMbew4Tg=="
+    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -5418,6 +5468,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -5742,6 +5797,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/create-react-class": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "dependencies": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6205,6 +6269,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",
@@ -6626,6 +6702,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -7890,6 +7974,34 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "dependencies": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      }
+    },
+    "node_modules/fbjs/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
+    "node_modules/fbjs/node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8896,7 +9008,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -9355,6 +9466,15 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "dependencies": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -11836,8 +11956,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -12221,6 +12340,23 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "dependencies": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
+    "node_modules/node-fetch/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -14376,6 +14512,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-animated-css": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-animated-css/-/react-animated-css-1.2.1.tgz",
+      "integrity": "sha512-/6jtyCdTRw658CQTcMPwxN0ueLBlkqno7eKOLIyeNwn+rpq/smei4AwJooXW0i+Db+9YiP8QbkJ6pEwZDRAxxQ==",
+      "dependencies": {
+        "babel-polyfill": "^6.23.0",
+        "browser-or-node": "^1.0.2",
+        "classnames": "^2.2.5",
+        "lodash": "^4.17.11",
+        "prop-types": "^15.5.10",
+        "react": "^15.6.1"
+      }
+    },
+    "node_modules/react-animated-css/node_modules/react": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
+      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+      "dependencies": {
+        "create-react-class": "^15.6.0",
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.0",
+        "prop-types": "^15.5.10"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -14639,6 +14803,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15104,8 +15277,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sanitize.css": {
       "version": "13.0.0",
@@ -15368,6 +15540,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -16369,6 +16546,24 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
+      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -16989,8 +17184,7 @@
     "node_modules/whatwg-fetch": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==",
-      "dev": true
+      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
     },
     "node_modules/whatwg-mimetype": {
       "version": "2.3.0",
@@ -20815,8 +21009,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "ast-types-flow": {
       "version": "0.0.7",
@@ -21058,6 +21251,28 @@
       "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
       "dev": true
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+        }
+      }
+    },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -21112,6 +21327,27 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -21240,6 +21476,11 @@
         "fill-range": "^7.0.1"
       }
     },
+    "browser-or-node": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-or-node/-/browser-or-node-1.3.0.tgz",
+      "integrity": "sha512-0F2z/VSnLbmEeBcUrSuDH5l0HxTXdQQzLjkmBR4cYfvg1zJrKSlmIZFqyFR8oX0NrwPhy3c3HQ6i3OxMbew4Tg=="
+    },
     "browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -21420,6 +21661,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -21678,6 +21924,15 @@
         "yaml": "^1.10.0"
       }
     },
+    "create-react-class": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -21996,6 +22251,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",
@@ -22317,6 +22577,14 @@
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -23254,6 +23522,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA=="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -23981,7 +24278,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -24290,6 +24586,15 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -26150,8 +26455,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -26457,6 +26761,22 @@
         }
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ=="
+        }
+      }
+    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -27859,6 +28179,33 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-animated-css": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-animated-css/-/react-animated-css-1.2.1.tgz",
+      "integrity": "sha512-/6jtyCdTRw658CQTcMPwxN0ueLBlkqno7eKOLIyeNwn+rpq/smei4AwJooXW0i+Db+9YiP8QbkJ6pEwZDRAxxQ==",
+      "requires": {
+        "babel-polyfill": "^6.23.0",
+        "browser-or-node": "^1.0.2",
+        "classnames": "^2.2.5",
+        "lodash": "^4.17.11",
+        "prop-types": "^15.5.10",
+        "react": "^15.6.1"
+      },
+      "dependencies": {
+        "react": {
+          "version": "15.7.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
+          "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
+          "requires": {
+            "create-react-class": "^15.6.0",
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        }
+      }
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -28061,6 +28408,12 @@
         }
       }
     },
+    "react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -28403,8 +28756,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sanitize.css": {
       "version": "13.0.0",
@@ -28611,6 +28963,11 @@
         "send": "0.18.0"
       }
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -29377,6 +29734,11 @@
       "dev": true,
       "peer": true
     },
+    "ua-parser-js": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
+      "integrity": "sha512-cJMeh/eOILyGu0ejgTKB95yKT3zOenSe9UGE3vj6WfiOwgGYnmATUsnDixMFvdU+rNMvWih83hrUP8VwhF9yXQ=="
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -29830,8 +30192,7 @@
     "whatwg-fetch": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==",
-      "dev": true
+      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
     },
     "whatwg-mimetype": {
       "version": "2.3.0",
diff --git a/code/package.json b/code/package.json
index 68869f589..cdd1dbd7b 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",
@@ -11,7 +12,9 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-animated-css": "^1.2.1",
+    "react-dom": "^18.2.0",
+    "react-spinners": "^0.13.8"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..b6ea1ef01 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -1,25 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="og:title" content="Nora Terbocs's happy thoughts" />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
-  </head>
+  <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the
+    URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML.
+    Unlike "/favicon.ico" or "favicon.ico" , "%PUBLIC_URL%/favicon.ico" will 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>Nora's happy thoughts</title>
+</head>
 
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -29,6 +27,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..a3ea1b213 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,97 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import Form from 'components/Form.js'
+import Thoughts from 'components/Thoughts.js'
+import Loading from 'components/Loading.js'
 
 export const App = () => {
+  const [newThought, setNewThought] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [thoughts, setThoughts] = useState([])
+  const [countLikes, setCountLikes] = useState(0)
+  const [characters, setCharacters] = useState(0)
+  const [errorMsg, setErrorMsg] = useState(false)
+  const url = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'
+
+  const fetchThoughts = () => {
+    setLoading(true);
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => setThoughts(data))
+      .catch((error) => console.log(error))
+      .finally(() => { setLoading(false) })
+  }
+  useEffect(() => {
+    fetchThoughts()
+  }, [])
+  console.log(errorMsg)
+  const handleFormSubmit = (event) => {
+    console.log(newThought)
+    event.preventDefault()
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: newThought
+      })
+    }
+    if (newThought.length > 4) {
+      fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options)
+        .then((response) => response.json())
+        .then(() => { fetchThoughts() })
+        .catch((error) => console.error(error))
+        .finally(() => {
+          setNewThought('')
+        })
+      setErrorMsg(false);
+    } else if (newThought.length < 5) {
+      setErrorMsg(true);
+    }
+
+    console.log(thoughts)
+  }
+
+  const handleLike = (
+    currentThoughtID,
+    currentThoughtHearts,
+    currentThought,
+    setCurrentThought
+  ) => {
+    setCurrentThought({ currentThought, hearts: currentThoughtHearts + 1 });
+    setCountLikes(countLikes + 1)
+    const options = { method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      } }
+
+    fetch(`${url}/${currentThoughtID}/like`, options)
+      .then((response) => response.json())
+      .catch((error) => console.error(error))
+      .finally(() => { setLoading(false) })
+  }
+
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="container">
+      <Form
+        newThought={newThought}
+        setNewThought={setNewThought}
+        thoughts={thoughts}
+        setThoughts={setThoughts}
+        url={url}
+        handleFormSubmit={handleFormSubmit}
+        countLikes={countLikes}
+        characters={characters}
+        setCharacters={setCharacters}
+        errorMsg={errorMsg} />
+      {loading && (<Loading />)}
+      {!loading && (
+        <Thoughts
+          thoughts={thoughts}
+          handleLike={handleLike}
+          url={url} />
+      )}
     </div>
+
   );
 }
diff --git a/code/src/background.jpg b/code/src/background.jpg
new file mode 100644
index 000000000..4fc7a68b0
Binary files /dev/null and b/code/src/background.jpg differ
diff --git a/code/src/components/Form.js b/code/src/components/Form.js
new file mode 100644
index 000000000..7111f50fe
--- /dev/null
+++ b/code/src/components/Form.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Form = ({ newThought, setNewThought, handleFormSubmit, countLikes, errorMsg }) => {
+  return (
+    <form className="form-section" onSubmit={handleFormSubmit}>
+      <h1 className="form-question">What&#39;s making you happy right now?</h1>
+      <textarea rows="5" type="text" value={newThought} minLength={5} maxLength={140} onChange={(e) => setNewThought(e.target.value)} />
+      <div className="textarea-footer">
+        {errorMsg && <p className="error-msg">Your message has to be between 5 and 140 characters!</p>}
+        <p className="character-counter">{newThought.length}/140</p>
+      </div>
+      <div className="form-counter">
+        <p className="total-likes">🤍 {countLikes}</p>
+      </div>
+      <button className="form-btn" type="submit">❤️ Send happy thoughts! ❤️</button>
+
+    </form>
+  )
+}
+
+export default Form;
\ No newline at end of file
diff --git a/code/src/components/LikeBtn.js b/code/src/components/LikeBtn.js
new file mode 100644
index 000000000..70bf8877a
--- /dev/null
+++ b/code/src/components/LikeBtn.js
@@ -0,0 +1,33 @@
+/* eslint-disable no-underscore-dangle */
+
+import React from 'react';
+
+const LikeBtn = ({
+  currentThought,
+  handleLike, setCurrentThought
+}) => {
+  return (
+    <div className="likes-container">
+      <button
+        key={currentThought._id}
+        className={`likes-btn ${currentThought.hearts > 0
+          ? 'more-likes' : ''}`}
+        type="button"
+        onClick={() => {
+          handleLike(
+            currentThought._id,
+            currentThought.hearts,
+            currentThought,
+            setCurrentThought
+          );
+        }}> <span>❤️</span>
+      </button><p className="single-thought-likes-counter"> x {currentThought.hearts} </p>
+    </div>
+  )
+}
+
+export default LikeBtn;
+
+// {
+//             "likes-btn" + (clickEffect ? "likes-btn-clickeffect" : "")
+//           }
diff --git a/code/src/components/Loading.js b/code/src/components/Loading.js
new file mode 100644
index 000000000..ca18dae46
--- /dev/null
+++ b/code/src/components/Loading.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import FadeLoader from 'react-spinners/FadeLoader'
+
+const Loading = () => {
+  return (
+    <section>
+      <FadeLoader />
+    </section>
+  )
+}
+
+export default Loading;
\ No newline at end of file
diff --git a/code/src/components/SingleThought.js b/code/src/components/SingleThought.js
new file mode 100644
index 000000000..d22777d61
--- /dev/null
+++ b/code/src/components/SingleThought.js
@@ -0,0 +1,24 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useState } from 'react';
+import { formatDistance } from 'date-fns'
+import LikeBtn from './LikeBtn.js'
+
+const SingleThought = ({ thought, handleLike }) => {
+  const [currentThought, setCurrentThought] = useState(thought);
+  return (
+    <section className="single-thought-section" key={thought._id}>
+      <p className="single-thought-message">{thought.message}</p>
+      <div className="single-thought-like">
+        <LikeBtn
+          handleLike={handleLike}
+          currentThought={currentThought}
+          setCurrentThought={setCurrentThought} />
+        <div className="single-thought-date">
+          {formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default SingleThought;
\ No newline at end of file
diff --git a/code/src/components/Thoughts.js b/code/src/components/Thoughts.js
new file mode 100644
index 000000000..3aaf372c3
--- /dev/null
+++ b/code/src/components/Thoughts.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import SingleThought from './SingleThought.js';
+
+const Thoughts = ({ thoughts, handleLike }) => {
+  return (
+    <section className="thoughts-section">
+      {thoughts.map((thought) => {
+        return (
+          <SingleThought
+            thought={thought}
+            handleLike={handleLike} />
+        )
+      })}
+    </section>
+  )
+}
+
+export default Thoughts;
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..de24ec017 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,187 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: Noto Sans Mono, monospace,
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  font-size: 15px;
+  /* <a href="http://www.freepik.com">Designed by rawpixel.com / Freepik</a> */
+  background-image: url(background.jpg);
+  background-size: cover;
+  background-attachment: fixed;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+.container {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
 }
+
+/* form */
+.form-section {
+  background-color: rgba(232, 232, 232, 0.95);
+  padding: 20px 15px;
+  width: 300px;
+  border: 1px solid #000;
+  box-shadow: 6px 6px 0 0 #000;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.form-question {
+  width: 100%;
+  padding: 10px 0;
+}
+
+.character-counter {
+  font-size: 0.8em;
+}
+
+.textarea-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  padding: 5px 0;
+}
+
+.form-textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.error-msg {
+  font-size: 0.8em;
+  color: rgb(245, 120, 120);
+}
+
+.form-counter {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-self: flex-end;
+  padding: 20px 0;
+}
+
+.total-likes {
+  background-color: #b7b5b5;
+  opacity: 90%;
+  padding: 10px;
+  border-radius: 10px;
+  color: #ffffff;
+}
+
+.form-btn {
+  border-radius: 20px;
+  padding: 10px;
+  background-color: rgb(248 188 188);
+  border: hidden;
+  inline-size: fit-content;
+  font-family: Noto Sans Mono, monospace,
+    sans-serif;
+  font-size: 1em;
+}
+
+/* feed */
+.thoughts-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  opacity: 100%;
+}
+
+.single-thought-section {
+  padding: 20px 15px;
+  width: 300px;
+  border: 1px solid #000;
+  box-shadow: 6px 6px 0 0 #000;
+  box-sizing: border-box;
+  background-color: rgba(250, 249, 249, 0.95);
+}
+
+.single-thought-message {
+  inline-size: 100%;
+  overflow-wrap: break-word;
+  padding: 15px 0;
+}
+
+.likes-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.likes-btn {
+  background-color: #e6e5e3;
+  border: none;
+  border-radius: 50%;
+  height: 35px;
+  width: 35px;
+}
+
+.likes-btn.more-likes {
+  background-color: rgb(248 188 188);
+}
+
+.single-thought-like {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.single-thought-likes-counter,
+.single-thought-date {
+  opacity: 50%;
+  font-size: 0.8em;
+}
+
+/* like button animation */
+.likes-btn:focus,
+.likes-btn:hover {
+  animation: wobble 1s 1;
+  cursor: pointer;
+}
+
+@keyframes wobble {
+  25% {
+    transform: rotate(15deg);
+  }
+
+  50% {
+    transform: rotate(-30deg);
+  }
+
+  75% {
+    transform: rotate(5deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@media only screen and (min-width: 600px) {
+
+  .form-section,
+  .single-thought-section {
+    width: 450px;
+  }
+
+}
+
+@media only screen and (min-width: 768px) {
+
+  .form-section,
+  .single-thought-section {
+    width: 550px;
+  }
+}
\ No newline at end of file
diff --git a/code/src/index.js b/code/src/index.js
index ec9ad93c9..ce10c7e21 100644
--- a/code/src/index.js
+++ b/code/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import './reset.css';
 import './index.css';
 import { App } from './App';
 
diff --git a/code/src/reset.css b/code/src/reset.css
new file mode 100644
index 000000000..299a6d164
--- /dev/null
+++ b/code/src/reset.css
@@ -0,0 +1,135 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
\ No newline at end of file