diff --git a/01-frontend/src/components/RatingSubmit.tsx b/01-frontend/src/components/RatingSubmit.tsx
new file mode 100644
index 0000000..9cd06da
--- /dev/null
+++ b/01-frontend/src/components/RatingSubmit.tsx
@@ -0,0 +1,7 @@
+type RatingSubmitType = {
+    articleId: string;
+    rating: number;
+    content: string;
+};
+
+export default RatingSubmitType;
\ No newline at end of file
diff --git a/01-frontend/src/helper/productpage/Ratings.tsx b/01-frontend/src/helper/productpage/Ratings.tsx
index 97a35b9..151bbe8 100644
--- a/01-frontend/src/helper/productpage/Ratings.tsx
+++ b/01-frontend/src/helper/productpage/Ratings.tsx
@@ -1,14 +1,19 @@
-import { Box, Button, Divider, IconButton, Rating, Snackbar, SnackbarCloseReason, TextField, Typography } from "@mui/material";
-import RatingCard from "./RatingCard";
-import RatingType from "../../components/Rating";
-import React, { useState } from "react";
 import { Close } from "@mui/icons-material";
-import {useTranslation} from 'react-i18next';
+import { Box, Button, Divider, IconButton, Rating, Snackbar, SnackbarCloseReason, TextField, Typography } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { useTranslation } from 'react-i18next';
+import RatingType from "../../components/Rating";
+import { submitRating } from "../query/Queries";
+import RatingCard from "./RatingCard";
+import RatingSubmitType from "../../components/RatingSubmit";
 
-export default function Ratings() {
+export default function Ratings({itemId}: {itemId: string}) {
 
     const { t } = useTranslation();
     const [open, setOpen] = useState<boolean>(false);
+    const [ratingText, setRatingText] = useState<string>("");
+    const [ratingValue, setRatingValue] = useState<number | null>(2.5);
 
     const handleClose = (
         event: React.SyntheticEvent | Event,
@@ -21,10 +26,23 @@ export default function Ratings() {
         setOpen(false);
     };
 
+    const ratingData: RatingSubmitType = {
+        rating: ratingValue || 0,
+        content: ratingText || "",
+        articleId: itemId, // Konvertiert itemId in einen String,
+    };
+
+    const { refetch } = useQuery({
+        queryKey: ["submitRating", ratingData], // Query-Key mit Daten
+        queryFn: () => submitRating(ratingData),
+        retry: 3, // Versucht es 3-mal erneut
+        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+        enabled: false, // Deaktiviert die automatische Ausführung
+    });
+
     const handleRatingSubmit = () => {
-        // Handle the rating submission logic here
         setOpen(true);
-        console.log("Rating submitted");
+        refetch(); // Manuelles Auslösen der Abfrage
     }
 
     const action = (
@@ -69,13 +87,15 @@ export default function Ratings() {
             <div className="rating-card-body">
                 <Typography variant="h5">
                     {t('rateThisProduct')}:</Typography>
-                <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+                <Rating name="half-rating" value={ratingValue} onChange={(e, value) => setRatingValue(value)} precision={0.5} />
                 <TextField
                     label={t('review')}
                     multiline
                     minRows={4}
                     maxRows={16}
                     className="rating-text-field"
+                    value={ratingText}
+                    onChange={(e) => setRatingText(e.target.value)}
                 />
                 <Button variant="contained" color="primary" className="rating-button" onClick={handleRatingSubmit}>
                     {t('submit')}
diff --git a/01-frontend/src/helper/query/Queries.tsx b/01-frontend/src/helper/query/Queries.tsx
index 4d6f9a1..1fc317d 100644
--- a/01-frontend/src/helper/query/Queries.tsx
+++ b/01-frontend/src/helper/query/Queries.tsx
@@ -1,5 +1,7 @@
 // api/queries.js
 
+import RatingSubmitType from "../../components/RatingSubmit";
+
 export const fetchItemList = async () => {
     const response = await fetch('http://localhost:8085/item/all');
     console.log("API Response:", response);
@@ -9,4 +11,22 @@ export const fetchItemList = async () => {
     const data = await response.json();
     console.log("Fetched Items:", data);
     return data;
-};
\ No newline at end of file
+};
+
+export const submitRating = async (ratingData: RatingSubmitType) => {
+    const response = await fetch('http://localhost:8085/rating', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(ratingData),
+    });
+
+    if (!response.ok) {
+        throw new Error('Fehler beim Senden der Bewertung');
+    }
+
+    const data = await response.json();
+    console.log("Rating Submitted:", data);
+    return data;
+}
\ No newline at end of file
diff --git a/01-frontend/src/pages/Product.tsx b/01-frontend/src/pages/Product.tsx
index 44ba1a1..bbfa6e8 100644
--- a/01-frontend/src/pages/Product.tsx
+++ b/01-frontend/src/pages/Product.tsx
@@ -60,7 +60,7 @@ export default function Product() {
                     {item.description}
                 </Typography>
 
-                <Ratings />
+                <Ratings itemId={item.uuid} />
             </Container>
         </div>
     );