diff --git a/Pages/Index.razor b/Pages/Index.razor
index 6085c4a..023bd2d 100644
--- a/Pages/Index.razor
+++ b/Pages/Index.razor
@@ -1,9 +1,16 @@
 ﻿@page "/"
+@layout Startseite
 
-<PageTitle>Index</PageTitle>
+<PageTitle>Yummy4Friends</PageTitle>
 
-<h1>Hello, world!</h1>
 
-Welcome to your new app.
+<body style='--blazor-load-percentage: 100%; --blazor-load-percentage-text: "100%";'>
+    <div class="container col-lg-6 col-md-9 col-sm-12 d-flex flex-column " id="content">
+        <center><h1>Herzlich Willkommen!</h1></center>
+
+        <img src="assets/Logo_new.png" class="img" title="logo image">
+            
+        <button href="Speisekarte.razor" type="button" class=" btn btn-light justify-content-center">Zur Speisekarte</button>
+    </div>
+</body>
 
-<SurveyPrompt Title="How is Blazor working for you?" />
diff --git a/Shared/NavMenu.razor b/Shared/NavMenu.razor
index 8e4f374..ff41750 100644
--- a/Shared/NavMenu.razor
+++ b/Shared/NavMenu.razor
@@ -2,7 +2,7 @@
     <div class="container-fluid">
         @*<a class="navbar-brand" href="">Yummy4Friends</a>*@
        <a class="navbar-brand" href="">
-            <img src="assets/Logo_new.png" alt="Yummy4Friends" width="100" height="100">
+            <img src="assets/Logo_new.png" alt="Yummy4Friends" width="8%" height="auto">
        </a>
 
         <button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
diff --git a/Shared/Startseite.razor b/Shared/Startseite.razor
new file mode 100644
index 0000000..107ac23
--- /dev/null
+++ b/Shared/Startseite.razor
@@ -0,0 +1,11 @@
+﻿@inherits LayoutComponentBase
+
+<div>
+
+    <main class="container">
+
+
+            @Body
+        
+    </main>
+</div>
\ No newline at end of file
diff --git a/wwwroot/css/Site.css b/wwwroot/css/Site.css
new file mode 100644
index 0000000..e5e57d3
--- /dev/null
+++ b/wwwroot/css/Site.css
@@ -0,0 +1,25 @@
+﻿@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+
+html, body {
+    margin: 0px;
+    padding: 0px;
+    background-color: #C7FFD1;
+}
+
+#content {
+    background-color: #C7FFD1;
+    padding: 5%;
+    margin-top: 1%;
+    border-radius: 10px;
+    
+}
+
+.img {
+    height: auto;
+    max-width: 100%;
+    margin: 10%;
+}
+
+button {
+    box-shadow: 5px 5px #d3d3d3;
+}
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 238c777..ad1f5f8 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -7,6 +7,7 @@
     <title>y4f</title>
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <link href="css/Site.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="y4f.styles.css" rel="stylesheet" />
diff --git a/y4f.csproj b/y4f.csproj
index f5e9a37..9bb7029 100644
--- a/y4f.csproj
+++ b/y4f.csproj
@@ -7,6 +7,10 @@
     <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
   </PropertyGroup>
 
+  <ItemGroup>
+    <None Include="wwwroot\css\Site.css" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.1" PrivateAssets="all" />
diff --git a/y4f.sln b/y4f.sln
index cd5de42..7814467 100644
--- a/y4f.sln
+++ b/y4f.sln
@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.4.33205.214
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "y4f", "y4f.csproj", "{1B083D74-9507-4510-A532-8AAAD1FB6035}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "y4f", "y4f.csproj", "{1B083D74-9507-4510-A532-8AAAD1FB6035}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
