diff --git a/TODO.md b/TODO.md
index b8dc2ae..d379a06 100644
--- a/TODO.md
+++ b/TODO.md
@@ -66,9 +66,9 @@
 - [X] Добавление \ Удаление аниме в\из списков закладок и избранных
 - [X] Связанные релизы
 - [X] Просмотр страницы всех связанных релизов
-- [ ] Оценка тайтла
+- [X] Оценка тайтла
   - [X] Просмотр оценки
-  - [ ] Оценивание и изменение своей оценки (как Modal)
+  - [X] Оценивание и изменение своей оценки (как Modal)
 
 ## Стиль
 
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
index dbe1be0..6f78499 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
@@ -4,8 +4,11 @@ import {
   Flowbite,
   Button,
   CustomFlowbiteTheme,
+  Modal,
 } from "flowbite-react";
 import { numberDeclension } from "#/api/utils";
+import { useState } from "react";
+import { ENDPOINTS } from "#/api/config";
 
 const RatingTheme: CustomFlowbiteTheme = {
   ratingAdvanced: {
@@ -15,6 +18,7 @@ const RatingTheme: CustomFlowbiteTheme = {
   },
 };
 export const ReleaseInfoRating = (props: {
+  release_id: number;
   grade: number;
   token: string | null;
   votes: {
@@ -27,88 +31,217 @@ export const ReleaseInfoRating = (props: {
     user: number | null;
   };
 }) => {
+  const [isRatingModalOpen, setIsRatingModalOpen] = useState(false);
+  const [vote, setVote] = useState(props.votes.user);
+
   return (
-    <Card>
-      <div className="flex flex-col gap-2 lg:items-center lg:flex-row">
-        <Rating>
-          <Rating.Star />
-          <p className="ml-2 text-sm font-bold dark:text-white">
-            {props.grade.toFixed(2)} из 5
-          </p>
-        </Rating>
-        {props.token && (
-          <>
-            <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
-            {props.votes.user ? (
+    <>
+      <Card>
+        <div className="flex flex-col gap-2 sm:items-center sm:flex-row">
+          <Rating>
+            <Rating.Star />
+            <p className="ml-2 text-sm font-bold dark:text-white">
+              {props.grade.toFixed(2)} из 5
+            </p>
+          </Rating>
+          {props.token && (
+            <>
+              <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
               <div className="flex items-center gap-2">
-                <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                  ваша оценка: {props.votes.user}
-                </p>
-                <Button
-                  size={"xs"}
-                  className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
-                  color="inline"
-                >
-                  изменить
-                </Button>
+                {vote ? (
+                  <>
+                    <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                      ваша оценка: {vote}
+                    </p>
+                    <Button
+                      size={"xs"}
+                      className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
+                      color="inline"
+                      onClick={() => setIsRatingModalOpen(true)}
+                    >
+                      изменить
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    size={"xs"}
+                    className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
+                    color="inline"
+                    onClick={() => setIsRatingModalOpen(true)}
+                  >
+                    оценить
+                  </Button>
+                )}
               </div>
-            ) : (
-              <Button
-                size={"xs"}
-                className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
-                color="inline"
-              >
-                оценить
-              </Button>
+            </>
+          )}
+        </div>
+        <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          {props.votes.total}{" "}
+          {numberDeclension(props.votes.total, "голос", "голоса", "голосов")}
+        </p>
+        <Flowbite theme={{ theme: RatingTheme }}>
+          <Rating.Advanced
+            percentFilled={Math.floor(
+              (props.votes["5"] / props.votes.total) * 100
             )}
-          </>
-        )}
-      </div>
-      <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-        {props.votes.total}{" "}
-        {numberDeclension(props.votes.total, "голос", "голоса", "голосов")}
-      </p>
-      <Flowbite theme={{ theme: RatingTheme }}>
-        <Rating.Advanced
-          percentFilled={Math.floor(
-            (props.votes["5"] / props.votes.total) * 100
-          )}
-          className="mb-2"
-        >
-          5
-        </Rating.Advanced>
-        <Rating.Advanced
-          percentFilled={Math.floor(
-            (props.votes["4"] / props.votes.total) * 100
-          )}
-          className="mb-2"
-        >
-          4
-        </Rating.Advanced>
-        <Rating.Advanced
-          percentFilled={Math.floor(
-            (props.votes["3"] / props.votes.total) * 100
-          )}
-          className="mb-2"
-        >
-          3
-        </Rating.Advanced>
-        <Rating.Advanced
-          percentFilled={Math.floor(
-            (props.votes["2"] / props.votes.total) * 100
-          )}
-          className="mb-2"
-        >
-          2
-        </Rating.Advanced>
-        <Rating.Advanced
-          percentFilled={Math.floor(
-            (props.votes["1"] / props.votes.total) * 100
-          )}
-        >
-          1
-        </Rating.Advanced>
-      </Flowbite>
-    </Card>
+            className="mb-2"
+          >
+            5
+          </Rating.Advanced>
+          <Rating.Advanced
+            percentFilled={Math.floor(
+              (props.votes["4"] / props.votes.total) * 100
+            )}
+            className="mb-2"
+          >
+            4
+          </Rating.Advanced>
+          <Rating.Advanced
+            percentFilled={Math.floor(
+              (props.votes["3"] / props.votes.total) * 100
+            )}
+            className="mb-2"
+          >
+            3
+          </Rating.Advanced>
+          <Rating.Advanced
+            percentFilled={Math.floor(
+              (props.votes["2"] / props.votes.total) * 100
+            )}
+            className="mb-2"
+          >
+            2
+          </Rating.Advanced>
+          <Rating.Advanced
+            percentFilled={Math.floor(
+              (props.votes["1"] / props.votes.total) * 100
+            )}
+          >
+            1
+          </Rating.Advanced>
+        </Flowbite>
+      </Card>
+      <ReleaseInfoRatingModal
+        isOpen={isRatingModalOpen}
+        setIsOpen={setIsRatingModalOpen}
+        token={props.token}
+        vote={vote}
+        release_id={props.release_id}
+        setUserVote={setVote}
+      />
+    </>
+  );
+};
+
+const ReleaseInfoRatingModal = (props: {
+  isOpen: boolean;
+  setIsOpen: any;
+  setUserVote: any;
+  token: string | null;
+  vote: number;
+  release_id: number;
+}) => {
+  const [curElement, setCurElement] = useState(props.vote);
+  const [vote, setVote] = useState(props.vote);
+  const [isSending, setIsSending] = useState(false);
+
+  async function _sendVote(
+    action: "delete" | "add" = "add",
+    vote: number | null = null
+  ) {
+    let url = `${ENDPOINTS.release.info}/vote/${action}/${props.release_id}`;
+    if (action === "add") {
+      url += `/${vote}`;
+    }
+    url += `?token=${props.token}`;
+
+    fetch(url);
+  }
+
+  function _setVote(
+    action: "delete" | "add" = "add",
+    vote: number | null = null
+  ) {
+    if (props.token) {
+      _sendVote(action, vote);
+      setVote(vote);
+      props.setUserVote(vote);
+      props.setIsOpen(false);
+      setIsSending(false);
+    }
+  }
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+    >
+      <Modal.Header>Оценка</Modal.Header>
+      <Modal.Body>
+        <div>
+          <div className="block sm:hidden">
+            <Rating size="md" className="justify-center">
+              {[1, 2, 3, 4, 5].map((element, index) => (
+                <Button
+                  key={`rating-md-${element}`}
+                  color={"inline"}
+                  onMouseOver={() => setCurElement(element)}
+                  onMouseOut={() => setCurElement(0)}
+                  onClick={() => setVote(element)}
+                >
+                  <Rating.Star
+                    filled={index + 1 <= curElement || index + 1 <= vote}
+                  />
+                </Button>
+              ))}
+            </Rating>
+          </div>
+          <div className="hidden sm:block">
+            <Rating size="lg" className="justify-center">
+              {[1, 2, 3, 4, 5].map((element, index) => (
+                <Button
+                  key={`rating-lg-${element}`}
+                  color={"inline"}
+                  onMouseOver={() => setCurElement(element)}
+                  onMouseOut={() => setCurElement(0)}
+                  onClick={() => setVote(element)}
+                >
+                  <Rating.Star
+                    filled={index + 1 <= curElement || index + 1 <= vote}
+                  />
+                </Button>
+              ))}
+            </Rating>
+          </div>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex gap-1 ml-auto">
+          <Button
+            disabled={isSending}
+            color={"red"}
+            onClick={() => {
+              setIsSending(true);
+              _setVote("delete", null);
+            }}
+          >
+            Убрать оценку
+          </Button>
+          <Button
+            disabled={isSending || vote === null}
+            color={"blue"}
+            onClick={() => {
+              setIsSending(true);
+              _sendVote("delete", null);
+              setTimeout(() => _setVote("add", vote), 500);
+            }}
+          >
+            Оценить
+          </Button>
+        </div>
+      </Modal.Footer>
+    </Modal>
   );
 };
diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx
index 41e9fd1..6399463 100644
--- a/app/pages/Release.tsx
+++ b/app/pages/Release.tsx
@@ -96,6 +96,7 @@ export const ReleasePage = (props: any) => {
         {data.release.status.name.toLowerCase() != "анонс" && (
           <div className="[grid-column:2]">
             <ReleaseInfoRating
+              release_id={props.id}
               grade={data.release.grade}
               token={token}
               votes={{