diff --git a/pages/index.tsx b/pages/index.tsx
index 8bf0d461b743c944b5ee77631fd925cd2ecac241..82596894581565906cee621e818e4d016e02dd39 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+// import * as React from 'react'
 import { experimentalStyled as styled, alpha } from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
@@ -9,7 +9,17 @@ import SearchIcon from '@mui/icons-material/Search'
 import Paper from '@mui/material/Paper'
 import Grid from '@mui/material/Grid'
 import Avatar from '@mui/material/Avatar'
-import logo from 'src/components/img/logo-fdo-scal.svg'
+import IconButton from '@mui/material/IconButton'
+import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
+import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
+import { ColorModeContext } from '@contexts'
+import React, { useContext } from 'react'
+import { useRouter } from 'next/router'
+import FormControl from '@mui/material/FormControl'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import Stack from '@mui/material/Stack'
+import Link from 'next/link'
 
 const info = ('This is the FDO Manager. The hardware and infrastructure for this test instance are provided by GWDG. IndiScale is responsible for the architecture and implementation.')
 
@@ -32,7 +42,7 @@ const Search = styled('div')(({ theme }) => ({
   width: '100%',
   [theme.breakpoints.up('sm')]: {
     marginLeft: theme.spacing(1),
-    width: 'auto'
+    width: '250px'
   }
 }))
 
@@ -64,20 +74,24 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }))
 
 export default function Index () {
-  
+  const { mode, setMode } = useContext(ColorModeContext)
+  const { locale: currentLocale, locales, pathname, query } = useRouter()
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
         <Toolbar>
-         <Avatar alt="FDO Logo" src="img/" />
+         <Avatar src="images/logo-fdo-img.png"></Avatar>
           <Typography
             variant="h6"
             noWrap
             component="div"
+            marginLeft={2}
             sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
           >
             FDO MANAGER
           </Typography>
+
           <Search>
             <SearchIconWrapper>
               <SearchIcon />
@@ -87,18 +101,85 @@ export default function Index () {
               inputProps={{ 'aria-label': 'search' }}
             />
           </Search>
+          <Stack marginLeft={3}>
+          <FormControl sx={{ minWidth: 64 }}>
+              <Select
+                disableUnderline
+                defaultValue={currentLocale}
+                inputProps={{ 'aria-label': 'Without label' }}
+                variant="standard"
+                sx={{
+                  color: 'inherit',
+                  '& .MuiSvgIcon-root': {
+                    color: 'inherit'
+                  },
+                  '& .MuiStack-root > .MuiTypography-root': {
+                    display: {
+                      xs: 'none',
+                      sm: 'block'
+                    }
+                  }
+                }}
+              >
+                {[...(locales ?? [])].sort().map((lang: string) => (
+                  // @ts-expect-error
+                  <MenuItem
+                    component={Link}
+                    href={{ pathname, query }}
+                    locale={lang}
+                    selected={currentLocale === lang}
+                    key={lang}
+                    defaultValue={lang}
+                    value={lang}
+                  >
+                    <Stack
+                      direction="row"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      <Avatar
+                        sx={{
+                          width: '24px',
+                          height: '24px',
+                          marginRight: '5px'
+                        }}
+                        src={`/images/flags/${lang}.svg`}
+                      />
+                      <Typography>
+                        {lang === 'en' ? 'English' : 'German'}
+                      </Typography>
+                    </Stack>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            </Stack>
+          <Stack marginLeft={2}>
+          <IconButton
+              color="inherit"
+              onClick={() => {
+                setMode()
+              }}
+
+            >
+              {mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
+            </IconButton>
+            </Stack>
         </Toolbar>
       </AppBar>
 
-      <Grid container spacing={2} columns={16} justifyContent="center" alignItems="center" marginTop={2}>
+      <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
         <Grid item xs={6}>
-          <Item><h2>Projektinfo mit Atomgrafik</h2>{info}<br/>{info}<br/></Item>
+          <Item><h1>Projektinfo mit Atomgrafik</h1>{info}<br/>{info}<br/>{info}<br/>{info}<br/></Item>
         </Grid>
+      </Grid>
+
+      <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
         <Grid item xs={6}>
-          <Item>{info}</Item>
+          <Item><h2>Beispiel Use Case 1</h2>{info}<br/>{info}<br/></Item>
         </Grid>
         <Grid item xs={6}>
-          <Item>{info}</Item>
+          <Item><h2>Beispiel Use Case 2</h2>{info}<br/>{info}<br/></Item>
         </Grid>
       </Grid>
     </Box>
diff --git a/src/components/img/logo-fdo-img b/public/images/logo-fdo-img.png
similarity index 100%
rename from src/components/img/logo-fdo-img
rename to public/images/logo-fdo-img.png
diff --git a/src/components/img/logo-fdo-scal b/public/images/logo-fdo-scal.svg
similarity index 100%
rename from src/components/img/logo-fdo-scal
rename to public/images/logo-fdo-scal.svg