diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json
index 94fc6cb..311536a 100644
--- a/01-frontend/public/locales/de/translation.json
+++ b/01-frontend/public/locales/de/translation.json
@@ -21,6 +21,8 @@
   "clearCart": "Warenkorb leeren",
   "close": "Schließen",
   "completeYourOrder": "Bestellung abschließen",
+  "components": "Komponenten",
+  "componentsFarmingStation": "Komponenten der Indoor-Farming-Station",
   "contact": "Kontakt",
   "country": "Land",
   "currentAccount": "Konto des aktuellen Benutzers",
diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json
index 037b067..802ebeb 100644
--- a/01-frontend/public/locales/en/translation.json
+++ b/01-frontend/public/locales/en/translation.json
@@ -21,6 +21,8 @@
   "clearCart": "Clear cart",
   "close": "Close",
   "completeYourOrder": "Complete your order",
+  "components": "Components",
+  "componentsFarmingStation": "Components of the indoor farming station",
   "contact": "Contact",
   "country": "Country",
   "currentAccount": "Account of current user",
diff --git a/01-frontend/src/App.tsx b/01-frontend/src/App.tsx
index 5a59a51..f559a90 100644
--- a/01-frontend/src/App.tsx
+++ b/01-frontend/src/App.tsx
@@ -12,7 +12,7 @@ import Orders from './pages/Orders';
 import Payment from './pages/Payment';
 import Product from './pages/Product';
 import { CustomThemeProvider } from './theme/ThemeContext';
-import FSModel from './pages/FSModel';
+import Components from './pages/Components.tsx';
 import AdminPanel from './pages/AdminPanel';
 
 export default function App() {
@@ -31,7 +31,7 @@ export default function App() {
                 <Route path="*" element={<NoPage />} />
                 <Route path="/product/:id" element={<Product />} />
                 <Route path="/checkout" element={<Payment />} />
-                <Route path="/fsmodel" element={<FSModel />} />
+                <Route path="/components" element={<Components />} />
                 <Route path="/contact" element={<Contact />} />
                 <Route path='/account' element={<Account />} />
                 <Route path='/orders' element={<Orders />} />
diff --git a/01-frontend/src/assets/fscomponents/fs_components_0.PNG b/01-frontend/src/assets/fscomponents/fs_components_0.PNG
new file mode 100644
index 0000000..0225d66
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_0.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_1.PNG b/01-frontend/src/assets/fscomponents/fs_components_1.PNG
new file mode 100644
index 0000000..04ef455
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_1.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_2.PNG b/01-frontend/src/assets/fscomponents/fs_components_2.PNG
new file mode 100644
index 0000000..da1d0db
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_2.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_3.PNG b/01-frontend/src/assets/fscomponents/fs_components_3.PNG
new file mode 100644
index 0000000..56ccc79
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_3.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_4.PNG b/01-frontend/src/assets/fscomponents/fs_components_4.PNG
new file mode 100644
index 0000000..da234d5
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_4.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_5.PNG b/01-frontend/src/assets/fscomponents/fs_components_5.PNG
new file mode 100644
index 0000000..3dd3f06
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_5.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_6.PNG b/01-frontend/src/assets/fscomponents/fs_components_6.PNG
new file mode 100644
index 0000000..c345c0f
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_6.PNG differ
diff --git a/01-frontend/src/assets/fscomponents/fs_components_7.PNG b/01-frontend/src/assets/fscomponents/fs_components_7.PNG
new file mode 100644
index 0000000..13bbe7c
Binary files /dev/null and b/01-frontend/src/assets/fscomponents/fs_components_7.PNG differ
diff --git a/01-frontend/src/helper/navbar/NavBar.tsx b/01-frontend/src/helper/navbar/NavBar.tsx
index fa42f96..75fe33a 100644
--- a/01-frontend/src/helper/navbar/NavBar.tsx
+++ b/01-frontend/src/helper/navbar/NavBar.tsx
@@ -29,7 +29,7 @@ export default function NavBar() {
 
     const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
 
-    const pageKeys = ['fsmodel', 'admin', 'checkout', 'contact'];
+    const pageKeys = ['components', 'checkout', 'contact', 'admin'];
     const settingKeys = ['account', 'orders', 'logout'];
 
     const pages = pageKeys.map(key => ({ key, label: t(key) }));
diff --git a/01-frontend/src/pages/Components.tsx b/01-frontend/src/pages/Components.tsx
new file mode 100644
index 0000000..d0664c0
--- /dev/null
+++ b/01-frontend/src/pages/Components.tsx
@@ -0,0 +1,95 @@
+import { Box, Typography, Grid, List, ListItem, ListItemText } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import "./pages.css";
+import farmingStation from '../assets/fscomponents/fs_components_0.png';
+import growrack from '../assets/fscomponents/fs_components_1.png';
+import tank from '../assets/fscomponents/fs_components_2.png';
+import control from '../assets/fscomponents/fs_components_3.png';
+import light from '../assets/fscomponents/fs_components_4.png';
+import pump from '../assets/fscomponents/fs_components_5.png';
+import flowerpots from '../assets/fscomponents/fs_components_6.png';
+import pipes from '../assets/fscomponents/fs_components_7.png';
+
+export default function Components() {
+
+    const { t } = useTranslation();
+    const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+
+    const components = [
+        "Regal",
+        "Tank",
+        "Steuerung",
+        "Beleuchtung",
+        "Pumpe",
+        "Pflanztöpfe",
+        "Schläuche"
+    ];
+
+    const componentImages = [
+        growrack,
+        tank,
+        control,
+        light,
+        pump,
+        flowerpots,
+        pipes
+    ];
+
+    return (
+        <Box sx={{ pt: 4, display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ maxWidth: 900, width: '100%' }}>
+                <Typography
+                    variant="h3"
+                    align="center"
+                    gutterBottom
+                    sx={{ color: 'text.primary' }}
+                >
+                    {t('componentsFarmingStation')}
+                </Typography>
+
+                <Grid container spacing={4} justifyContent="center">
+                    <Grid item xs={12} md={6} sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+                        <Box
+                            component="img"
+                            src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
+                            alt={t('componentsFarmingStation')}
+                            sx={{
+                                maxWidth: '100%',
+                                height: 'auto',
+                                maxHeight: '80vh',
+                                borderRadius: 2,
+                                border: '3px solid green',
+                                boxSizing: 'border-box',
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={12} md={6} sx={{ mb: 2 }}>
+                        <List>
+                            {components.map((item, index) => (
+                                <ListItem
+                                    key={index}
+                                    disablePadding
+                                    onMouseEnter={() => setHoverIndex(index)}
+                                    onMouseLeave={() => setHoverIndex(null)}
+                                >
+                                    <ListItemText
+                                        primaryTypographyProps={{
+                                            variant: 'h5',
+                                            sx: {
+                                                color: hoverIndex === index ? 'green' : 'text.primary',
+                                                transition: 'color 0.2s ease',
+                                            },
+                                        }}
+                                        primary={item}
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/01-frontend/src/pages/FSModel.tsx b/01-frontend/src/pages/FSModel.tsx
deleted file mode 100644
index ea0710c..0000000
--- a/01-frontend/src/pages/FSModel.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import "./pages.css";
-
-export default function FSModel() {
-
-    const { t } = useTranslation();
-
-    return (
-        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
-            <Typography
-                variant="h3"
-                align="center"
-                gutterBottom
-                sx={{ color: 'text.primary' }}
-            >
-                {t('categories')}
-            </Typography>
-            <Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
-                ...
-            </Typography>
-        </Box>
-    );
-}
\ No newline at end of file
diff --git a/01-frontend/src/pages/pages.css b/01-frontend/src/pages/pages.css
index a30a5dc..fb505d2 100644
--- a/01-frontend/src/pages/pages.css
+++ b/01-frontend/src/pages/pages.css
@@ -68,6 +68,10 @@
     color: var(--text-color);
 }
 
+.page-background.page-background--no-space-between {
+    justify-content: flex-start !important;
+}
+
 .impressum-container {
     display: flex;
     flex-direction: column;