diff --git a/README.md b/README.md
index 108c6d2..62337a0 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Visit live site:
This project follows [these instructions](https://rootdomain.notion.site/Candidate-Exam-Front-End-Engineer-ac3dd8a3474542899d49efb894672246) and is built according to [this Figma design]() to complete the assessment tasks.
-For a detailed side-by-side comparison of the design and implementation, [click here]().
+For a detailed side-by-side comparison of the design and implementation, [click here](). The differences between the design and implementation are explained in the comments.
## Tech Stack
@@ -18,9 +18,41 @@ For a detailed side-by-side comparison of the design and implementation, [click
- Utilize [TanStack Query](https://tanstack.com/query) for efficient data fetching, caching, and synchronization.
- Use [React Router](https://reactrouter.com/) for code-splitting and lazy-loaded routes.
- Style using the atomic approach with [Tailwind CSS](https://tailwindcss.com/), alongside [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge), to prevent style conflicts and enhance readability.
-- Leverate [Material UI](https://mui.com/material-ui/) for ready-to-use components.
+- Leverage [Material UI](https://mui.com/material-ui/) for ready-to-use components.
+- Implement grid layout using CSS Grid.
- Automate deployment to [Firebase Hosting](https://firebase.google.com/docs/hosting) through [GitHub Actions](https://docs.github.com/en/actions) for continuous integration.
- Adopt an atomic approach to state management with [Jotai](https://jotai.org/).
- Generate realistic images and avatars with [Faker](https://fakerjs.dev/).
- Use [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) to achieve infinite loading and lazy load images.
- Implement self-hosted fonts using [Fontsource](https://fontsource.org/).
+
+## Features
+
+### Skeleton
+
+![tags_skeleton](screenshots/tags_skeleton.gif)
+![results_skeleton](screenshots/results_skeleton.gif)
+
+### Infinite scrolling
+
+![infinite_scrolling](screenshots/infinite_scrolling.gif)
+
+### Lazy load images
+
+![lazy_load_images](screenshots/lazy_load_images.gif)
+
+### Responsive Web Design (RWD) across all pages
+
+![home_rwd](screenshots/home_rwd.gif)
+![results_rwd](screenshots/results_rwd.gif)
+![tags_rwd](screenshots/tags_rwd.gif)
+
+### Other features
+
+- Code-splitting and lazy-loaded routes
+- Dynamic document title
+
+## TODO
+
+- Error handling
+- Testing
diff --git a/screenshots/home_rwd.gif b/screenshots/home_rwd.gif
new file mode 100644
index 0000000..25130fb
Binary files /dev/null and b/screenshots/home_rwd.gif differ
diff --git a/screenshots/infinite_scrolling.gif b/screenshots/infinite_scrolling.gif
new file mode 100644
index 0000000..0da8099
Binary files /dev/null and b/screenshots/infinite_scrolling.gif differ
diff --git a/screenshots/lazy_load_images.gif b/screenshots/lazy_load_images.gif
new file mode 100644
index 0000000..ce58258
Binary files /dev/null and b/screenshots/lazy_load_images.gif differ
diff --git a/screenshots/results_rwd.gif b/screenshots/results_rwd.gif
new file mode 100644
index 0000000..504d606
Binary files /dev/null and b/screenshots/results_rwd.gif differ
diff --git a/screenshots/results_skeleton.gif b/screenshots/results_skeleton.gif
new file mode 100644
index 0000000..576a2a1
Binary files /dev/null and b/screenshots/results_skeleton.gif differ
diff --git a/screenshots/tags_rwd.gif b/screenshots/tags_rwd.gif
new file mode 100644
index 0000000..ea58e56
Binary files /dev/null and b/screenshots/tags_rwd.gif differ
diff --git a/screenshots/tags_skeleton.gif b/screenshots/tags_skeleton.gif
new file mode 100644
index 0000000..778f92b
Binary files /dev/null and b/screenshots/tags_skeleton.gif differ
diff --git a/src/components/common/Slider/Slider.tsx b/src/components/common/Slider/Slider.tsx
index a1cceb3..a389a6f 100644
--- a/src/components/common/Slider/Slider.tsx
+++ b/src/components/common/Slider/Slider.tsx
@@ -88,11 +88,3 @@ export default function Slider({
/>
)
}
-
-// font-weight: 500;
-// font-size: 16px;
-// letter-spacing: 0.15px;
-
-// font-weight: 400;
-// font-size: 14px;
-// letter-spacing: 0.25px;