diff --git a/src/app/dish/[dishId]/loading.js b/src/app/dish/[dishId]/loading.js
new file mode 100644
index 0000000..52e2907
--- /dev/null
+++ b/src/app/dish/[dishId]/loading.js
@@ -0,0 +1,6 @@
+import { Loader } from "@/components/loader/component";
+
+
+export default function Loading() {
+  return <Loader />;
+  }
\ No newline at end of file
diff --git a/src/app/dish/[dishId]/page.js b/src/app/dish/[dishId]/page.js
new file mode 100644
index 0000000..82be48e
--- /dev/null
+++ b/src/app/dish/[dishId]/page.js
@@ -0,0 +1,16 @@
+
+import { DishContainer } from "@/components/dish/container";
+import styles from "./styles.module.scss";
+import { Ingredients } from "@/components/ingredients/component";
+import { getDishById } from "@/services/api";
+
+export default async function DishPage({params}) {
+  const dish = await getDishById(params.dishId);
+
+  return (
+    <div className={styles.root}>
+        <DishContainer dish={dish} className={styles.dish} />
+        <Ingredients ingredients={dish.ingredients} />
+    </div>
+);
+}
diff --git a/src/app/dish/[dishId]/styles.module.scss b/src/app/dish/[dishId]/styles.module.scss
new file mode 100644
index 0000000..e1f8f08
--- /dev/null
+++ b/src/app/dish/[dishId]/styles.module.scss
@@ -0,0 +1,10 @@
+// .root {
+//   background-color: rgb(209, 253, 253);
+//   height: 100%;
+//   display: grid;
+//   grid-template-rows: auto 1fr auto;
+//   min-height: 100vh;
+// }
+.root {
+  margin: 10px 20px;
+ }
\ No newline at end of file
diff --git a/src/app/page.js b/src/app/page.js
index 82551a7..e9804da 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,11 +1,7 @@
-import styles from "./styles.module.scss";
+export default function HomePage() {
+    return (
+        <div>HomePage</div>
+    )
+}
 
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        Home page
-      </div>
-    </main>
-  )
-}
\ No newline at end of file
+    
\ No newline at end of file
diff --git a/src/app/restaurants/[restaurantId]/layout.js b/src/app/restaurants/[restaurantId]/layout.js
index 93ddd72..06c4c9c 100644
--- a/src/app/restaurants/[restaurantId]/layout.js
+++ b/src/app/restaurants/[restaurantId]/layout.js
@@ -4,7 +4,6 @@ import { Restaurant } from '@/components/restaurant/component';
 
 const Layout = async ({ children, params }) => {
     const restaurant = await getRestaurantById(params.restaurantId);
-
     return (
         <div>
           <Restaurant restaurant={restaurant}/>
diff --git a/src/app/restaurants/[restaurantId]/loading.js b/src/app/restaurants/[restaurantId]/loading.js
index 8cf4cb8..52e2907 100644
--- a/src/app/restaurants/[restaurantId]/loading.js
+++ b/src/app/restaurants/[restaurantId]/loading.js
@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }
\ No newline at end of file
diff --git a/src/app/restaurants/[restaurantId]/menu/layout.js b/src/app/restaurants/[restaurantId]/menu/layout.js
deleted file mode 100644
index 93ddd72..0000000
--- a/src/app/restaurants/[restaurantId]/menu/layout.js
+++ /dev/null
@@ -1,16 +0,0 @@
-
-import { getRestaurantById } from "@/services/api";
-import { Restaurant } from '@/components/restaurant/component';
-
-const Layout = async ({ children, params }) => {
-    const restaurant = await getRestaurantById(params.restaurantId);
-
-    return (
-        <div>
-          <Restaurant restaurant={restaurant}/>
-          {children}
-        </div>
-    );
-};
-
-export default Layout;
diff --git a/src/app/restaurants/[restaurantId]/menu/loading.js b/src/app/restaurants/[restaurantId]/menu/loading.js
index 8cf4cb8..20098cc 100644
--- a/src/app/restaurants/[restaurantId]/menu/loading.js
+++ b/src/app/restaurants/[restaurantId]/menu/loading.js
@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+    return <Loader />;
   }
\ No newline at end of file
diff --git a/src/app/restaurants/[restaurantId]/page.js b/src/app/restaurants/[restaurantId]/page.js
index 1c393d7..3fabc20 100644
--- a/src/app/restaurants/[restaurantId]/page.js
+++ b/src/app/restaurants/[restaurantId]/page.js
@@ -1,6 +1,8 @@
+import { redirect } from 'next/navigation';
 
-export default function RestaurantPage({ params }) {
-    return (
-      null
-    )
-  }
\ No newline at end of file
+const RestaurantPage = ({params}) => {
+  redirect(params.restaurantId+'/menu');
+
+};
+
+export default RestaurantPage;
\ No newline at end of file
diff --git a/src/app/restaurants/[restaurantId]/reviews/loading.js b/src/app/restaurants/[restaurantId]/reviews/loading.js
index 8cf4cb8..52e2907 100644
--- a/src/app/restaurants/[restaurantId]/reviews/loading.js
+++ b/src/app/restaurants/[restaurantId]/reviews/loading.js
@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }
\ No newline at end of file
diff --git a/src/app/restaurants/[restaurantId]/reviews/page.js b/src/app/restaurants/[restaurantId]/reviews/page.js
index fe62dca..648f2bf 100644
--- a/src/app/restaurants/[restaurantId]/reviews/page.js
+++ b/src/app/restaurants/[restaurantId]/reviews/page.js
@@ -1,10 +1,7 @@
-import { getReviewsByRestaurantId } from "@/services/api";
-import { Reviews } from '@/components/reviews/component';
+import { ReviewsContainer } from '@/components/reviews/container';
 
-export default async function ReviewPage({params}) {
-    const restaurantId = params.restaurantId;
-    const reviews = await getReviewsByRestaurantId(restaurantId);
-    return (
-      <Reviews reviews={reviews}/>
-    )
-  }
+export default async function ReviewPage({ params }) {
+  const restaurantId = params.restaurantId;
+
+  return <ReviewsContainer restaurantId={restaurantId}/>;
+}
\ No newline at end of file
diff --git a/src/app/restaurants/loading.js b/src/app/restaurants/loading.js
index 9137f54..faad2d5 100644
--- a/src/app/restaurants/loading.js
+++ b/src/app/restaurants/loading.js
@@ -1,5 +1,5 @@
 import { Loader } from "@/components/loader/component";
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }
\ No newline at end of file
diff --git a/src/app/styles.module.scss b/src/app/styles.module.scss
index 69b24f9..bbd49fe 100644
--- a/src/app/styles.module.scss
+++ b/src/app/styles.module.scss
@@ -4,4 +4,5 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
+  
 }
\ No newline at end of file
diff --git a/src/components/button/component.jsx b/src/components/button/component.jsx
index 667db48..4fdf585 100644
--- a/src/components/button/component.jsx
+++ b/src/components/button/component.jsx
@@ -1,4 +1,4 @@
-"use client";
+import { memo } from 'react';
 import styles from './styles.module.scss';
 import classNames from "classnames";
 
@@ -8,4 +8,6 @@ export const Button = ({ onClick, children, className, disabled, rootRef }) => {
             {children}
         </button>
     );
-};
\ No newline at end of file
+};
+
+export const ButtonMemoized = memo(Button);
diff --git a/src/components/button/styles.module.scss b/src/components/button/styles.module.scss
index 9dd5282..3bf2e97 100644
--- a/src/components/button/styles.module.scss
+++ b/src/components/button/styles.module.scss
@@ -1,5 +1,6 @@
 .root {
-    min-width: 30px;
+    min-width: fit-content;
+    width: 30px;
     cursor: pointer;
     border: none;
     border-radius: 10px;
diff --git a/src/components/cart/container.jsx b/src/components/cart/container.jsx
index bd3f944..ea9c119 100644
--- a/src/components/cart/container.jsx
+++ b/src/components/cart/container.jsx
@@ -4,6 +4,5 @@ import { selectCartProductIds } from "@/redux/ui/cart";
 
 export const CartContainer = () => {
     const dishIds = useSelector(selectCartProductIds);
-    console.log(dishIds);
     return <Cart productIds={dishIds} />
 }
\ No newline at end of file
diff --git a/src/components/control-tabs/component.jsx b/src/components/control-tabs/component.jsx
index 3f736c3..91a035e 100644
--- a/src/components/control-tabs/component.jsx
+++ b/src/components/control-tabs/component.jsx
@@ -1,19 +1,22 @@
-
+"use client" ;
 import Link from 'next/link';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import styles from './styles.module.scss';
+import { usePathname } from 'next/navigation';
 
 export const ControlTabs = ({ restaurantId }) => {
-    return (
-        <div >
+    const pathname = usePathname();
+    const isActiveMenu = pathname.endsWith("/menu");
+    const isActiveReview = pathname.endsWith("/reviews");
 
+    return (
+        <div>
             <Link href={`/restaurants/${restaurantId}/menu`} className={styles.pageLink}>
-                <Button>Menu</Button>
+                <ButtonMemoized disabled={isActiveMenu}>Menu</ButtonMemoized>
             </Link>
 
-
             <Link href={`/restaurants/${restaurantId}/reviews`} className={styles.pageLink}>
-                <Button>Review</Button>
+                <ButtonMemoized disabled={isActiveReview}>Review</ButtonMemoized>
             </Link>
         </div>
     );
diff --git a/src/components/create-review-form/container.jsx b/src/components/create-review-form/container.jsx
new file mode 100644
index 0000000..81d0d0e
--- /dev/null
+++ b/src/components/create-review-form/container.jsx
@@ -0,0 +1,15 @@
+"use client";
+import { useContext } from 'react';
+import { UserContext } from "@/context/user-provider";
+import { ReviewForm } from "../review-form/component";
+
+export const CreateReviewFormContainer = ({onSave }) => {
+
+    const { name, id } = useContext(UserContext);
+
+    if (!name) {
+        return null;
+    }
+
+    return <ReviewForm  userName={name} userId={id} onSave={onSave}/>;
+}
diff --git a/src/components/dish/cart-container.jsx b/src/components/dish/cart-container.jsx
index 5dfc3ac..810e86e 100644
--- a/src/components/dish/cart-container.jsx
+++ b/src/components/dish/cart-container.jsx
@@ -1,29 +1,30 @@
 import style from './styles.module.scss';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import { useDispatch, useSelector } from 'react-redux';
 import { decrement, increment, selectProductAmountById } from '../../redux/ui/cart';
+import { useCallback } from 'react';
 
 export const DishCartContainer = ({ dishId }) => {
     const amount = useSelector((state) =>
         selectProductAmountById(state, dishId)
     );
     const dispatch = useDispatch();
-    const handleDecrement = () => {
+    
+    const handleDecrement = useCallback(() => {
         dispatch(decrement(dishId));
-    };
+    }, [dispatch, dishId]);
 
-    const handleIncrement = () => {
+    const handleIncrement = useCallback(() => {
         dispatch(increment(dishId));
-    };
-
+    }, [dispatch, dishId]);
     return (
 
         <div className={style.root}>
             <div>{dishId}</div>
             <div className={style.buttonContainer}>
-                <Button className={style.button} onClick={handleDecrement} disabled={amount === 0}>-</Button>
+                <ButtonMemoized className={style.button} onClick={handleDecrement} disabled={amount === 0}>-</ButtonMemoized>
                 <p>{amount}</p>
-                <Button className={style.button} onClick={handleIncrement} disabled={amount === 5}>+</Button>
+                <ButtonMemoized className={style.button} onClick={handleIncrement} disabled={amount === 5}>+</ButtonMemoized>
             </div>
         </div>
     );
diff --git a/src/components/dish/component.jsx b/src/components/dish/component.jsx
index 857298c..ff3d52d 100644
--- a/src/components/dish/component.jsx
+++ b/src/components/dish/component.jsx
@@ -1,9 +1,13 @@
+import Link from "next/link";
+
 export const Dish = ({ dish, className }) => {
 
   return (
     <div >
-      <div className={className}>{dish.name}</div>
-      <div className={className}>{dish.price}</div>
+      <Link href={`/dish/${dish.id}`}>
+        <div className={className}>{dish.name}</div>
+        <div className={className}>{dish.price}</div>
+      </Link>
     </div>
   );
 };
diff --git a/src/components/dish/container.jsx b/src/components/dish/container.jsx
index 9ad0b4e..d8eac28 100644
--- a/src/components/dish/container.jsx
+++ b/src/components/dish/container.jsx
@@ -1,10 +1,11 @@
 
 "use client"; 
 import { decrement, increment, selectProductAmountById } from '@/redux/ui/cart';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import { Dish } from './component';
 import styles from './styles.module.scss';
 import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
 
 export const DishContainer = ({ dish, className }) => {
     const amount = useSelector((state) =>
@@ -12,24 +13,22 @@ export const DishContainer = ({ dish, className }) => {
     );
     const dispatch = useDispatch();
 
-    const handleDecrement = () => {
+    const handleDecrement = useCallback(() => {
         dispatch(decrement(dish.id));
-    };
+    }, [dispatch, dish.id]);
 
-    const handleIncrement = () => {
+    const handleIncrement = useCallback(() => {
         dispatch(increment(dish.id));
-    };
+    }, [dispatch, dish.id]);
 
     return (
 
         <div className={styles.root}>
-            {/* <NavLink className={styles.link} to={`/dish/${dish.id}`}> */}
                 <Dish dish={dish} className={className} />
-            {/* </NavLink> */}
             <div className={styles.buttonContainer}>
-                <Button className={styles.button} onClick={handleDecrement} disabled={amount === 0}>-</Button>
+                <ButtonMemoized className={styles.button} onClick={handleDecrement} disabled={amount === 0}>-</ButtonMemoized>
                 <p>{amount}</p>
-                <Button className={styles.button} onClick={handleIncrement} disabled={amount === 5}>+</Button>
+                <ButtonMemoized className={styles.button} onClick={handleIncrement} disabled={amount === 5}>+</ButtonMemoized>
             </div>
         </div>
     );
diff --git a/src/components/header/component.jsx b/src/components/header/component.jsx
index 51c52f9..f49bf5a 100644
--- a/src/components/header/component.jsx
+++ b/src/components/header/component.jsx
@@ -1,11 +1,7 @@
 import styles from './styles.module.scss';
 import Link from 'next/link';
-import classNames from 'classnames';
 import { User } from '../user/component';
 import { CartButtonContainer } from '../cart-button/container';
-import { useSelector } from 'react-redux';
-import { selectProductAmount } from '@/redux/ui/cart';
-
 
 export const Header = () => {
     return (
@@ -14,10 +10,8 @@ export const Header = () => {
             <Link href="/restaurants" className={styles.link}>Restaurants</Link>
             <Link href="/contacts" className={styles.link}>Contacts</Link>
             <Link href="/about-us" className={styles.link}>About us</Link>
-            <div className={styles.user}>
-                <User />
-                <CartButtonContainer />
-            </div>
+            <User />
+            <CartButtonContainer />
         </header>
     );
 };
\ No newline at end of file
diff --git a/src/components/header/styles.module.scss b/src/components/header/styles.module.scss
index 84b4228..7f0ca87 100644
--- a/src/components/header/styles.module.scss
+++ b/src/components/header/styles.module.scss
@@ -7,11 +7,6 @@
   padding: 10px 20px;
 }
 
-.user {
-  display: flex;
-
-}
-
 .button {
   margin-right: 5px;
 }
diff --git a/src/components/ingredients/component.jsx b/src/components/ingredients/component.jsx
new file mode 100644
index 0000000..f5115fc
--- /dev/null
+++ b/src/components/ingredients/component.jsx
@@ -0,0 +1,10 @@
+
+export const Ingredients = ({ ingredients }) => {
+    return (
+    <>
+        <h2>Ingredients:</h2>
+        {ingredients.map((ingredient, index) => (
+            <div key={index}>{ingredient}</div>
+        ))}
+    </>
+)};
diff --git a/src/components/loader/component.jsx b/src/components/loader/component.jsx
index f4401ee..c7656a1 100644
--- a/src/components/loader/component.jsx
+++ b/src/components/loader/component.jsx
@@ -1,6 +1,6 @@
-import classNames from "classnames";
+
 import styles from "./styles.module.scss";
 
-export const Loader = ({className}) => {
-   return <div className={classNames(styles.root, className)}></div>;
+export const Loader = () => {
+   return <div className={styles.root}></div>;
 };
\ No newline at end of file
diff --git a/src/components/loader/styles.module.scss b/src/components/loader/styles.module.scss
index 41c7b43..3e35dcd 100644
--- a/src/components/loader/styles.module.scss
+++ b/src/components/loader/styles.module.scss
@@ -1,4 +1,3 @@
-
 .root {
   display: flex;
   width: 100%;
diff --git a/src/components/modal-login-form/component.jsx b/src/components/modal-login-form/component.jsx
index fe38eea..6164d21 100644
--- a/src/components/modal-login-form/component.jsx
+++ b/src/components/modal-login-form/component.jsx
@@ -1,8 +1,9 @@
-import { useContext, useEffect, useReducer, useRef } from 'react';
+import { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
 import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import { UserContext } from '@/context/user-provider';
+import classNames from 'classnames';
 
 
 const reducer = (state, action) => {
@@ -32,22 +33,22 @@ export const Modal = ({ isOpen, onClose }) => {
 
   const { name, email } = state;
 
-  const handleOkClick = () => {
-    updateUser({ name, email });
+  const handleCancelClick = useCallback(() => {
     onClose();
-  };
+  }, [onClose]);
 
-  const handleCancelClick = () => {
+  const handleOkClick = () => {
+    updateUser({ name, email, id: "a304959a-76c0-4b34-954a-b38dbf310360" });
     onClose();
   };
 
-  const handleNameChange = (event) => {
+  const handleNameChange = useCallback((event) => {
     dispatch({ type: 'change_name', payload: event.target.value });
-  };
+  }, [dispatch]);
 
-  const handleEmailChange = (event) => {
+  const handleEmailChange = useCallback((event) => {
     dispatch({ type: 'change_email', payload: event.target.value });
-  };
+  }, [dispatch]);
 
   if (!isOpen) {
     return null;
@@ -58,7 +59,6 @@ export const Modal = ({ isOpen, onClose }) => {
       <>
         <div onClick={onClose} className={styles.overlay} />
         <div className={styles.root}>
-          <form className={styles.modal}>
             <div className={styles.field}>
               <label htmlFor="name" >
                 Имя:
@@ -88,10 +88,9 @@ export const Modal = ({ isOpen, onClose }) => {
               </label>
             </div>
             <div className={styles.buttons}>
-              <Button className={styles.button} onClick={handleCancelClick}>Отмена</Button>
-              <Button className={styles.button} onClick={handleOkClick}>Ок</Button>
+              <ButtonMemoized className={styles.button} onClick={handleCancelClick}>Cansel</ButtonMemoized>
+              <ButtonMemoized className={styles.button} onClick={handleOkClick}>Ok</ButtonMemoized>
             </div>
-          </form>
         </div>
       </>,
       modalContainer.current)
diff --git a/src/components/modal-login-form/styles.module.scss b/src/components/modal-login-form/styles.module.scss
index 846d82a..bb2bd8a 100644
--- a/src/components/modal-login-form/styles.module.scss
+++ b/src/components/modal-login-form/styles.module.scss
@@ -3,6 +3,10 @@
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%);
+  color: white;
+  background: rgb(46, 50, 94);
+  padding: 15px;
+  border-radius: 8px;
 }
 
 .overlay {
@@ -14,13 +18,6 @@
   background-color: rgba(0, 0, 0, 0.395);
 }
 
-.modal {
-  color: white;
-  background: rgb(46, 50, 94);
-  padding: 15px;
-  border-radius: 8px;
-}
-
 .field {
   display: flex;
   justify-content: flex-end;
diff --git a/src/components/review-form/component.jsx b/src/components/review-form/component.jsx
index d52419f..e7c02e2 100644
--- a/src/components/review-form/component.jsx
+++ b/src/components/review-form/component.jsx
@@ -1,45 +1,61 @@
+'use client';
+import { useState } from "react";
 import { Button } from "../button/component";
 import styles from './styles.module.scss';
 import { useReviewForm } from "./use-review-form";
+import { Loader } from "../loader/component";
 
-export const ReviewForm = ({ initialState, onSave, onClose, userName }) => {
-    const { form, setText, setRating } = useReviewForm(initialState);
+export const ReviewForm = ({ initialState, onClose, onSave, userName, userId }) => {
+    const { form, setText, setRating } = useReviewForm(initialState, userId);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSave = () => {
+        setIsLoading(true);
+        onSave(form).then(() => {
+            setIsLoading(false);
+        }).catch((error) => {
+            setIsLoading(false);
+            console.error("Error:", error);
+        });
+        onClose(form);
+    };
 
     return (
-        <div className={styles.root} >
-            <div className={styles.field}>
-                <span id="name">
-                    Имя: {userName}
-                </span>
-            </div>
-            <div className={styles.field}>
-                <label htmlFor="text">Текст</label>
-                <textarea
-                    id="text"
-                    name="text"
-                    placeholder="Напишите ваш отзыв"
-                    value={form.text}
-                    onChange={setText}
-                />
-            </div>
-            <div className={styles.field}>
-                <label htmlFor="rating">Рейтинг</label>
-                <input
-                    id="rating"
-                    name="rating"
-                    type="number"
-                    min="1"
-                    max="5"
-                    placeholder="Оцените от 1 до 5"
-                    value={form.rating}
-                    onChange={setRating}
-                />
+        isLoading ? <Loader /> : (
+            <div className={styles.root}>
+                <div className={styles.field}>
+                    <span id="name">
+                        Имя: {userName}
+                    </span>
+                </div>
+                <div className={styles.field}>
+                    <label htmlFor="text">Текст</label>
+                    <textarea
+                        id="text"
+                        name="text"
+                        placeholder="Напишите ваш отзыв"
+                        value={form.text}
+                        onChange={setText}
+                    />
+                </div>
+                <div className={styles.field}>
+                    <label htmlFor="rating">Рейтинг</label>
+                    <input
+                        id="rating"
+                        name="rating"
+                        type="number"
+                        min="1"
+                        max="5"
+                        placeholder="Оцените от 1 до 5"
+                        value={form.rating}
+                        onChange={setRating}
+                    />
+                </div>
+                <div className={styles.buttons}>
+                    {onClose && <Button className={styles.submitButton} onClick={() => onClose(form)}>Cancel</Button>}
+                    <Button className={styles.submitButton} onClick={handleSave}>Submit</Button>
+                </div>
             </div>
-            <div className={styles.buttons}>
-                {onClose && <Button className={styles.submitButton} onClick={() => onClose(form)}>Cansel</Button>}
-                <Button className={styles.submitButton} onClick={() => onSave(form)}>Submit</Button>
-            </div>
-
-        </div>
+        )
     );
 }
\ No newline at end of file
diff --git a/src/components/review-form/use-review-form.jsx b/src/components/review-form/use-review-form.jsx
index 016a8b8..60a5616 100644
--- a/src/components/review-form/use-review-form.jsx
+++ b/src/components/review-form/use-review-form.jsx
@@ -1,19 +1,14 @@
+"use client"
 import { useCallback } from "react";
 import { useReducer } from "react";
 
 const INITIAL_VALUE = {
-  // name: "",
   text: "",
   rating: 1,
 };
 
 const reducer = (state, { type, payload }) => {
   switch (type) {
-    // case "setName":
-    //   return {
-    //     ...INITIAL_VALUE,
-    //     name: payload,
-    //   };
     case "setText":
       return {
         ...state,
@@ -30,14 +25,9 @@ const reducer = (state, { type, payload }) => {
   }
 };
 
-export const useReviewForm = (initialValue = INITIAL_VALUE) => {
+export const useReviewForm = (initialValue = INITIAL_VALUE, userId) => {
   const [form, dispatch] = useReducer(reducer, initialValue);
 
-  // const setName = useCallback(
-  //   (event) => dispatch({ type: "setName", payload: event.target.value }),
-  //   []
-  // );
-
   const setText = useCallback((event) => {
     dispatch({ type: "setText", payload: event.target.value });
   }, []);
@@ -47,9 +37,13 @@ export const useReviewForm = (initialValue = INITIAL_VALUE) => {
     []
   );
 
+  const formWithUserId = {
+    ...form,
+    userId,
+  };
+
   return {
-    form,
-   //setName,
+    form: formWithUserId,
     setText,
     setRating,
   };
diff --git a/src/components/review/component.jsx b/src/components/review/component.jsx
index 05bd4a8..4166e6a 100644
--- a/src/components/review/component.jsx
+++ b/src/components/review/component.jsx
@@ -4,9 +4,8 @@ import { Button } from '../button/component';
 import { useState } from 'react';
 import { UpdateReviewFormContainer } from '../update-review-form/container';
 
-export const Review = ({ review, user }) => {
+export const Review = ({ review, user, onUpdate }) => {
     const [isEditMode, setIsEditMode] = useState(false);
-
     const setEditMode = () => {
         setIsEditMode(true);
     };
@@ -18,14 +17,15 @@ export const Review = ({ review, user }) => {
     return (
 
         <div className={style.root}>
-            {user && <span>{user.name + ': '}</span>}
+            <span>{user.name + ': '}</span>
             <span>{review.text + ' '}</span>
             <Button onClick={setEditMode}>Edit</Button>
-            {isEditMode && <UpdateReviewFormContainer
-                    user={user}
-                    review={review}
-                     onUpdatedFinishet={() => setIsEditMode(false)} onClose={handleCancelClick}
-                    />}
+            {isEditMode && <UpdateReviewFormContainer onUpdate={onUpdate}
+                user={user}
+                review={review}
+                onClose={handleCancelClick}
+            />}
+
         </div>
     )
 }
diff --git a/src/components/review/container.jsx b/src/components/review/container.jsx
index b862f9c..f353ecd 100644
--- a/src/components/review/container.jsx
+++ b/src/components/review/container.jsx
@@ -1,8 +1,11 @@
 import { getUserById } from '@/services/api';
 import { Review } from './component';
 
-export const ReviewContainer = async ({ review })  => {
+export const ReviewContainer = async ({ review, onUpdate }) => {
     const user = await getUserById(review.userId);
 
-    return <Review review={review} user={user}/>
+    return (
+            <Review review={review} user={user} onUpdate={onUpdate} />
+    )
+
 }
diff --git a/src/components/reviews/component.jsx b/src/components/reviews/component.jsx
index d3e81ea..1614dad 100644
--- a/src/components/reviews/component.jsx
+++ b/src/components/reviews/component.jsx
@@ -1,6 +1,7 @@
+import { CreateReviewFormContainer } from "../create-review-form/container";
 import { ReviewContainer } from "../review/container";
 
-export const Reviews = ({ reviews }) => {
+export const Reviews =  ({ reviews, onSave, onUpdate }) => {
 
     return (
         <>
@@ -9,11 +10,12 @@ export const Reviews = ({ reviews }) => {
                 {reviews?.map((review) => {
                     return (
                         <li key={review.id}>
-                            <ReviewContainer review={review} />
+                            <ReviewContainer review={review} onUpdate={onUpdate} />
                         </li>
                     );
                 })}
             </ul>
+            <CreateReviewFormContainer onSave={onSave} />
         </>
     );
 };
diff --git a/src/components/reviews/container.jsx b/src/components/reviews/container.jsx
new file mode 100644
index 0000000..aa7c22e
--- /dev/null
+++ b/src/components/reviews/container.jsx
@@ -0,0 +1,19 @@
+import { Reviews } from "./component";
+import { createReview, updateReview, getReviewsByRestaurantId } from "@/services/api";
+
+export const ReviewsContainer = async ({ restaurantId }) => {
+    const reviews = await getReviewsByRestaurantId(restaurantId);
+    const onSave = async (newReview) => {
+        "use server";
+        await createReview(restaurantId, newReview);
+    };
+    const onUpdate = async (updatedReview) => {
+        "use server";
+        await updateReview(updatedReview);
+    };
+
+
+    return (
+        <Reviews reviews={reviews} onSave={onSave} onUpdate={onUpdate} />
+    );
+};
diff --git a/src/components/reviews/styles.module.scss b/src/components/reviews/styles.module.scss
deleted file mode 100644
index e271e71..0000000
--- a/src/components/reviews/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-
-  
-
-
-  
-
-  
diff --git a/src/components/tabs/components.jsx b/src/components/tabs/components.jsx
index 3c88da0..70a1112 100644
--- a/src/components/tabs/components.jsx
+++ b/src/components/tabs/components.jsx
@@ -1,15 +1,25 @@
+
+'use client'
 import Link from 'next/link';
 import styles from './styles.module.scss';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
+import { usePathname } from 'next/navigation'
 
 export const Tabs = ({ restaurants }) => {
+    const pathname = usePathname();
     return (
         <div>
-            {restaurants.map((restaurant) => (
-                <Link href={`/restaurants/${restaurant.id}`} key={restaurant.id} className={styles.pageLink}>
-                    <Button>{restaurant.name}</Button>
-                </Link>
-            ))}
+             {restaurants.map((restaurant) => {
+                const id = restaurant.id.toString();
+                const isActive = pathname.endsWith(id);
+
+                return (
+                    <Link href={`/restaurants/${restaurant.id}`} key={restaurant.id} passHref
+                        className={styles.pageLink}>
+                            <ButtonMemoized disabled={isActive}>{restaurant.name}</ButtonMemoized>
+                    </Link>
+                );
+            })}
         </div>
     );
 };
\ No newline at end of file
diff --git a/src/components/update-review-form/container.jsx b/src/components/update-review-form/container.jsx
index 6291857..7c53557 100644
--- a/src/components/update-review-form/container.jsx
+++ b/src/components/update-review-form/container.jsx
@@ -1,38 +1,15 @@
 
-import { Loader } from "../loader/component";
 import { ReviewForm } from "../review-form/component"
 
-export const UpdateReviewFormContainer = ({ review, user, onUpdatedFinishet, onClose }) => {
-    // const [updateReview, { isLoading, isSuccess }] = useUpdateReviewMutation();
-    // useEffect(() => {
-    //     if (isSuccess) {
-    //         onUpdatedFinishet();
-    //     }
-    // }, [isSuccess, onUpdatedFinishet]);
-
-    // if (!user || !review) {
-    //     return null;
-    // }
-
-    // if (isLoading) {
-    //     return <Loader />;
-    // }
+export const UpdateReviewFormContainer = ({ review, user, onClose, onUpdate }) => {
     const { id, text, rating } = review;
-
     return (
         <ReviewForm
-            initialState={{ text, rating }}
+            initialState={{ id, text, rating }}
             userName={user?.name}
-            // onSave={updatedReview => updateReview({
-            //     reviewId: id,
-            //     review: {
-            //         ...updatedReview,
-            //         userId: user.id,
-            //         id,
-            //     }
-            // })} 
-
-            onClose={onClose}    
-            />
+            userId={user?.id}
+            onSave={onUpdate}
+            onClose={onClose}
+        />
     );
 }
diff --git a/src/components/user/component.jsx b/src/components/user/component.jsx
index c88ed3b..1448f87 100644
--- a/src/components/user/component.jsx
+++ b/src/components/user/component.jsx
@@ -26,11 +26,12 @@ export const User = () => {
 
         <>
             {isAuthenticated ? (
-                <div>
+                <>
                     <span style={{ marginRight: "10px" }}>name: {name}</span>
                     <span style={{ marginRight: "10px" }}>e-mail: {email}</span>
+                    <span style={{ marginRight: "10px" }}>id: {id}</span>
                     <Button className={styles.button} onClick={handleLogoutClick} >Logout</Button>
-                </div>
+                </>
             ) : (
                 <>
                     <Button className={styles.button} onClick={handleLoginClick} >Login</Button>
diff --git a/src/context/store-provider.js b/src/context/store-provider.js
deleted file mode 100644
index e66abc4..0000000
--- a/src/context/store-provider.js
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-
-export const UserContext = React.createContext(); 
-
-export const UserProvider = ({ children }) => {
-
-    const [user, setUser] = useState({ name: "", email: "" });
-
-    const updateUser = (newUser) => {
-        setUser(newUser); 
-    };
-
-    return (
-        <UserContext.Provider value={{ ...user, updateUser }}>
-            {children}
-        </UserContext.Provider>
-    );
-};
-
-
diff --git a/src/context/user-provider.js b/src/context/user-provider.js
index 649d4ba..0a19205 100644
--- a/src/context/user-provider.js
+++ b/src/context/user-provider.js
@@ -6,7 +6,7 @@ export const UserContext = React.createContext();
 
 export const UserProvider = ({ children }) => {
 
-    const [user, setUser] = useState({ name: "", email: "" });
+    const [user, setUser] = useState({ name: "", email: "", id:"" });
 
     const updateUser = (newUser) => {
         setUser(newUser); 
diff --git a/src/services/api.js b/src/services/api.js
index bf34d49..40d8329 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,3 +1,4 @@
+import { revalidateTag } from "next/cache";
 export async function getRestaurants() {
   const response = await fetch('http://localhost:3001/api/restaurants');
   return await response.json();
@@ -13,11 +14,6 @@ export async function getDishesByRestaurantId(restaurantId) {
   return await response.json();
 }
 
-export async function getReviewsByRestaurantId(restaurantId) {
-  const response = await fetch(`http://localhost:3001/api/reviews?restaurantId=${restaurantId}`);
-  return await response.json();
-}
-
 export async function getUser() {
   const response = await fetch(`http://localhost:3001/api/users`);
   return await response.json();
@@ -30,3 +26,42 @@ export async function getUserById(userId) {
   return user;
 }
 
+export async function getReviewsByRestaurantId(restaurantId) {
+  const response = await fetch(`http://localhost:3001/api/reviews?restaurantId=${restaurantId}`,
+    { next: { tags: ['reviews'] } }
+  )
+  return await response.json();
+}
+export async function createReview(restaurantId, newReview) {
+  console.log("createReview : ", newReview.text);
+  const requestOptions = {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(newReview),
+  };
+
+  await fetch(`http://localhost:3001/api/review/${restaurantId}`,
+    requestOptions);
+  revalidateTag('reviews');
+};
+
+export async function updateReview(review) {
+  const requestOptions = {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(review),
+  };
+
+  await fetch(`http://localhost:3001/api/review/${review.id}`, requestOptions);
+  revalidateTag('reviews');
+};
+
+export async function getDishById(dishId) {
+  const response = await fetch(`http://localhost:3001/api/dish/${dishId}`);
+  return await response.json();;
+};
+
+
+
+
+