diff --git a/README.md b/README.md
index 0d6babe..acc4817 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,29 @@
-# React + TypeScript + Vite
+# 🌦️ Weather Forecast Web Application (FrontEnd)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Welcome to our Weather Forecast Web Application! This application allows users to get the current weather and a 6-day forecast for any location worldwide.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **Current Weather:** Get the current weather conditions for any location.
+- **6-Day Forecast:** View a detailed forecast for the next 6 days.
+- **Search by Location:** Search for weather information by city name or zip code.
+- **Responsive Design:** The application is optimized for various devices, including desktops, tablets, and mobile phones.
 
-## Expanding the ESLint configuration
+## Technologies Used
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- **Frontend:** React.js, Material-UI
+- **API:** Open-Meteo API, Openstreetmap API, ...
 
-- Configure the top-level `parserOptions` property like this:
+## Usage
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+1. Clone this and `BackEnd` repository to your local machine.
+2. Install dependencies using `npm install`.
+4. Start the development server using `npm run dev`.
+5. Open your web browser and navigate to `http://localhost:5173` to view the application.
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Authors
+
+[@Fabio Musitelli](https://github.com/FabioMusi04)
+
+[@Giacomo Cattani](https://github.com/Giacomo-Cattani)
diff --git a/src/components/LeftCard.tsx b/src/components/LeftCard.tsx
index 532c283..33348dc 100644
--- a/src/components/LeftCard.tsx
+++ b/src/components/LeftCard.tsx
@@ -8,10 +8,11 @@ import {
     useMediaQuery
 } from "@mui/material";
 import icons from '../assets/icons/index.ts';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Heart from "react-animated-heart";
 import { UserStore } from "../store/store.ts";
 import axiosInstance from "../axios/axiosConf.ts";
+import { CustomAlertProps, CustomAlert } from "./CustomAlert.tsx";
 import { WeatherIcon, getStringFromNumber, WeatherNames } from "../components/WeatherIcon";
 
 interface LeftCardProps {
@@ -27,6 +28,12 @@ const LeftCard: React.FC<LeftCardProps> = ({ city, WeatherInfo, countryCode, sta
     const [isClick, setClick] = React.useState(false);
     const isLogged = UserStore((state) => state.isLogged);
 
+    const [alert, setAlert] = useState<CustomAlertProps>({
+        message: null,
+        severity: null,
+        handleClose: () => { }
+    });
+
     useEffect(() => {
         setClick(checkFavourite({ city, stateCode, countryCode }));
     }, [checkFavourite, city, countryCode, stateCode])
@@ -43,8 +50,14 @@ const LeftCard: React.FC<LeftCardProps> = ({ city, WeatherInfo, countryCode, sta
     }, [favoriteCities])
 
     const handleFavourite = async (city2: object) => {
-        toggleFavouritesCities(city2);
-        setClick(!isClick);
+        if (favoriteCities.length < 8) {
+            toggleFavouritesCities(city2);
+            setClick(!isClick);
+        }
+        else {
+            setAlert({ message: "You already have 8 favourites, remove one for adding more", severity: "error", handleClose: () => setAlert({ message: null, severity: null, handleClose: () => { } }) });
+            return;
+        }
     };
 
     const theme = useTheme();
@@ -52,6 +65,11 @@ const LeftCard: React.FC<LeftCardProps> = ({ city, WeatherInfo, countryCode, sta
 
     return (
         <Grid item xs={12} sm={5} >
+            <CustomAlert
+                message={alert.message}
+                severity={alert.severity}
+                handleClose={alert.handleClose}
+            />
             <Card style={{ backgroundColor: '#1D2837', color: 'white', margin: '0 auto', boxShadow: '12px 10px 10px rgba(0,0,0, .5)', height: '100%' }} >
                 <CardContent style={{ display: 'flex', flexDirection: 'column' }}>
 
diff --git a/src/store/store.ts b/src/store/store.ts
index ec4b244..5bd6c2a 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -85,7 +85,7 @@ export const UserStore = create(
               updatedCities.push(city);
             } else {
               // If the limit is reached, do not add the city
-
+              
             }
           } else {
             // Remove city if it exists in the list