diff --git a/README.md b/README.md
index 9e0553b..fb81550 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,37 @@
+# Solution to Vinted FE Code Challenge
 
-[Assignment Instructions](https://gist.github.com/vintedEngineering/c838e906ecc25a52fe91c4a8a11e2916)
+### Requirements
+
+- [x] Leverage [Flickr API](https://www.flickr.com/services/api/flickr.photos.getRecent.html)
+- [x] Design should be recreated as closely as possible.
+- [x] Responsive design with three breakpoints for Desktop, Tablet, Phone.
+- [x] Infinite scroll.
+- [x] Keep liked photo data persistent with page reload.
+- [x] Use React
+- [x] No External libraries beside React
+  
+[Full Assignment Instructions](https://gist.github.com/vintedEngineering/c838e906ecc25a52fe91c4a8a11e2916)
+
+[Demo](https://maxie-max.github.io/vinted-fe-code-challenge/)
+
+### 🛠 To install dependencies run
+
+```
+npm install
+```
+
+### 🏗 To run app in the development mode
+
+```
+npm start
+```
+
+### 👩‍🔬 Testing
+
+Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library).
+
+To run all tests:
+
+```bash
+npm test
+```
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5c7c865..3eee83b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1862,6 +1862,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.12.0.tgz",
+      "integrity": "sha512-N9Y82b2Z3j6wzIoAqajlKVF1Zt7sOH0pPee0sUHXHc5cv2Fdn23r+vpWm0MBBoGJtPOly5+Bdx1lnc3CD+A+ow==",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -1894,6 +1896,8 @@
     },
     "@testing-library/react": {
       "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
+      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.28.1"
@@ -1911,6 +1915,8 @@
     },
     "@testing-library/user-event": {
       "version": "12.8.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
+      "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
       "requires": {
         "@babel/runtime": "^7.12.5"
       },
@@ -11211,6 +11217,8 @@
     },
     "react": {
       "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -11370,6 +11378,8 @@
     },
     "react-dom": {
       "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -11393,6 +11403,8 @@
     },
     "react-scripts": {
       "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
+      "integrity": "sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==",
       "requires": {
         "@babel/core": "7.12.3",
         "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
@@ -14172,7 +14184,9 @@
       }
     },
     "web-vitals": {
-      "version": "1.1.2"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz",
+      "integrity": "sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig=="
     },
     "webidl-conversions": {
       "version": "6.1.0",
diff --git a/package.json b/package.json
index 15b8578..ba0bd1b 100644
--- a/package.json
+++ b/package.json
@@ -41,4 +41,4 @@
   "devDependencies": {
     "gh-pages": "^3.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js
index ad0748f..710b292 100644
--- a/src/components/ErrorMessage.js
+++ b/src/components/ErrorMessage.js
@@ -1,11 +1,20 @@
 import React from 'react'
 import style from './ErrorMessage.module.css'
 
-function ErrorMessage({ errorMessage, type = 'error' }) {
-	// errorMessage consists of 4 types: error | warning | info | success
+const Styles = {
+	error: 'error',
+	warning: 'warning',
+	info: 'info',
+	success: 'success',
+}
+
+function ErrorMessage({ errorMessage, type }) {
+	const getStyleClass = (type) => Styles[type] || Styles.error //defaulted to 'error'
 	return (
 		!!errorMessage && (
-			<div className={`${style.alert} ${style[type]}`}>{errorMessage}</div>
+			<div className={`${style.alert} ${style[getStyleClass(type)]}`}>
+				{errorMessage}
+			</div>
 		)
 	)
 }
diff --git a/src/components/List.js b/src/components/List.js
index e0c6e9f..b0310ce 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -56,9 +56,12 @@ function List() {
 
 	return (
 		<>
-			<ErrorMessage {...{ errorMessage, type: 'error' }} />
-			{!!photosData && (
-				<ul className={style.list}>
+			<ErrorMessage
+				data-testid='fetch-error'
+				{...{ errorMessage, type: 'error' }}
+			/>
+			{photosData.length > 0 && (
+				<ul className={style.list} data-testid='fetch-list'>
 					{photosData.map((data, i) => (
 						<Card
 							key={`${i}-${data?.id}`}
diff --git a/src/components/Loader.js b/src/components/Loader.js
index b07e9b4..4f914d3 100644
--- a/src/components/Loader.js
+++ b/src/components/Loader.js
@@ -2,7 +2,13 @@ import React from 'react'
 import style from './Loader.module.css'
 
 function Loader({ loadingText, isFetching }) {
-	return !isFetching && <div className={style.loader}>{loadingText}</div>
+	return (
+		!isFetching && (
+			<div data-testid='loader' className={style.loader}>
+				{loadingText}
+			</div>
+		)
+	)
 }
 
 export default Loader
diff --git a/src/components/__test__/Button.test.js b/src/components/__test__/Button.test.js
new file mode 100644
index 0000000..7e111d2
--- /dev/null
+++ b/src/components/__test__/Button.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { render, fireEvent, cleanup } from '@testing-library/react'
+import Button from '../Button'
+
+const defaultProps = {
+	label: 'Like',
+	handleLike: jest.fn(),
+}
+
+test('button renders with correct label', () => {
+	const { queryByText, rerender } = render(<Button {...defaultProps} />)
+	expect(queryByText('Like')).toBeTruthy()
+
+	// Change props
+	rerender(<Button {...defaultProps} label='Dislike' />)
+	expect(queryByText('Dislike')).toBeTruthy()
+})
+
+test('calls correct function on click', () => {
+	const { handleLike, label } = defaultProps
+	const { getByText } = render(
+		<Button {...defaultProps} onClick={handleLike} />
+	)
+	fireEvent.click(getByText(label))
+	expect(handleLike).toHaveBeenCalled()
+})
diff --git a/src/components/__test__/List.test.js b/src/components/__test__/List.test.js
new file mode 100644
index 0000000..586634f
--- /dev/null
+++ b/src/components/__test__/List.test.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/react'
+import List from '../List'
+
+afterEach(cleanup)
+
+test('should not render List on start', () => {
+	const { queryByTestId } = render(<List />)
+	expect(queryByTestId('fetch-list')).toBeNull()
+})
+test('should show Loader on start', () => {
+	const { queryByTestId } = render(<List />)
+	expect(queryByTestId('loader').textContent).toBe('Fetching photos ...')
+})
diff --git a/src/hooks/useInfiniteScroll.js b/src/hooks/useInfiniteScroll.js
index c165561..af7de55 100644
--- a/src/hooks/useInfiniteScroll.js
+++ b/src/hooks/useInfiniteScroll.js
@@ -5,7 +5,7 @@ const useInfiniteScroll = (callback) => {
 	const [isFetching, setIsFetching] = useState(false)
 
 	useEffect(() => {
-		const debounceHandleScroll = debounce(handleScroll, 1500)
+		const debounceHandleScroll = debounce(handleScroll, 1000)
 		window?.addEventListener('scroll', debounceHandleScroll)
 		return () => {
 			window?.removeEventListener('scroll', debounceHandleScroll)
diff --git a/src/utils/debounce.js b/src/utils/debounce.js
index 1626da6..3eabd91 100644
--- a/src/utils/debounce.js
+++ b/src/utils/debounce.js
@@ -6,23 +6,3 @@ const debounce = (callback, wait = 250) => {
 	}
 }
 export default debounce
-
-/* 
-// Testing it:
-
-var d = debounce(() => console.log("CALLED"), 1000);
-
-for (let i = 0; i < 10; i++) {
-    // call every 100 ms (change to 1500 to see that debouncing will not happen)
-    let timeOut = 100 * i;
-
-    const cb = () => {
-        const date = new Date();
-        console.log(`calling at ${date.getSeconds()}.${date.getMilliseconds()}`);
-        d()
-    }
-    
-    setTimeout(cb, timeOut)
-}
-
-*/