diff --git a/01-frontend/src/helper/RatingCard.tsx b/01-frontend/src/helper/RatingCard.tsx
new file mode 100644
index 0000000..cd0f8db
--- /dev/null
+++ b/01-frontend/src/helper/RatingCard.tsx
@@ -0,0 +1,9 @@
+import { Typography } from "@mui/material";
+
+export default function RatingCard() {
+    return (
+        <Typography variant="h5">
+            Hier steht ein Rating
+        </Typography>
+    );
+}
\ No newline at end of file
diff --git a/01-frontend/src/helper/Ratings.tsx b/01-frontend/src/helper/Ratings.tsx
new file mode 100644
index 0000000..82eb556
--- /dev/null
+++ b/01-frontend/src/helper/Ratings.tsx
@@ -0,0 +1,32 @@
+import { Button, Divider, Rating, TextField, Typography } from "@mui/material";
+import RatingCard from "./RatingCard";
+
+export default function Ratings() {
+    return (
+        <>
+            <div className='contact-divider-box'>
+                <Divider className='contact-divider' />
+            </div>
+                <div className="rating-card-body">
+                    <Typography variant="h5">
+                    Rate this product:</Typography>
+                    <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+                    <TextField
+                        label="Rating text"
+                        multiline
+                        minRows={4}
+                        maxRows={16}
+                    />
+                    <Button variant="contained" color="primary" className="rating-button">
+                        Submit
+                    </Button>
+                </div>
+            <div className='contact-divider-box'>
+                <Divider className='contact-divider' />
+            </div>
+            <Typography variant="h5">
+                Ratings:
+            </Typography>
+            <RatingCard /></>
+    );
+}
\ No newline at end of file
diff --git a/01-frontend/src/helper/helper.css b/01-frontend/src/helper/helper.css
index eb5f0c5..85a44f6 100644
--- a/01-frontend/src/helper/helper.css
+++ b/01-frontend/src/helper/helper.css
@@ -7,4 +7,15 @@
 
 .item-card-button{
     color: green;
+}
+
+.rating-card-body{
+    display: grid;
+    align-items: center; /* Vertikale Zentrierung */
+    width: 100%;
+    gap: 30px;
+}
+
+.rating-button{
+    max-width: 200px;
 }
\ No newline at end of file
diff --git a/01-frontend/src/pages/Product.tsx b/01-frontend/src/pages/Product.tsx
index 2021e8a..10d89d4 100644
--- a/01-frontend/src/pages/Product.tsx
+++ b/01-frontend/src/pages/Product.tsx
@@ -14,9 +14,10 @@ import {
     Typography,
 } from '@mui/material';
 import { useState } from 'react';
-import Item from '../components/Item';
 import { useLocation, useNavigate } from 'react-router-dom';
+import Item from '../components/Item';
 import { useBasket } from '../helper/BasketProvider';
+import Ratings from '../helper/Ratings';
 
 
 export default function Product() {
@@ -68,7 +69,7 @@ export default function Product() {
     };
 
     return (
-        <div className='page-background'>
+        <div className='product-page-background'>
             <Container maxWidth="lg" sx={{ py: 4 }} >
                 <Grid container spacing={4}>
                     {/* Left Column - Image */}
@@ -138,7 +139,7 @@ export default function Product() {
                             ) : item.stock > 0 ? (
                                 <Alert severity="warning" variant='outlined'>Almost sold out ({item.stock} available)</Alert>
                             ) : (
-                                <Alert severity="error" variant='filled'>Out of Stock</Alert> 
+                                <Alert severity="error" variant='filled'>Out of Stock</Alert>
                             )}
                         </Box>
 
@@ -169,16 +170,18 @@ export default function Product() {
                                 Free shipping on orders over €50
                             </Typography>
                         </Box>
-                        
+
                     </Stack>
 
                 </Grid>
                 <div className='contact-divider-box'>
-                <Divider className='contact-divider'/>
-</div>
-                        <Typography variant="body1">
-                            {item.description}
-                        </Typography>
+                    <Divider className='contact-divider' />
+                </div>
+                <Typography variant="body1">
+                    {item.description}
+                </Typography>
+
+                <Ratings />
             </Container>
         </div>
     );
diff --git a/01-frontend/src/pages/pages.css b/01-frontend/src/pages/pages.css
index c540eb2..36ce974 100644
--- a/01-frontend/src/pages/pages.css
+++ b/01-frontend/src/pages/pages.css
@@ -109,4 +109,16 @@
 .contact-divider-box {
   width: 100%;
   margin: 25px 0; /* Abstand hinzufügen */
+}
+
+.product-page-background {
+    background: linear-gradient(135deg, #ece9e6, #ffffff);
+    height: 100%;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0; /* Abstand oben und unten */
+    box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
 }
\ No newline at end of file