diff --git a/.dart_tool/package_config.json b/.dart_tool/package_config.json
index 56f2a12..20ba0ac 100644
--- a/.dart_tool/package_config.json
+++ b/.dart_tool/package_config.json
@@ -183,7 +183,7 @@
     },
     {
       "name": "flutter",
-      "rootUri": "file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter",
+      "rootUri": "file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter",
       "packageUri": "lib/",
       "languageVersion": "2.17"
     },
@@ -201,7 +201,7 @@
     },
     {
       "name": "flutter_test",
-      "rootUri": "file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter_test",
+      "rootUri": "file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter_test",
       "packageUri": "lib/",
       "languageVersion": "2.17"
     },
@@ -403,6 +403,12 @@
       "packageUri": "lib/",
       "languageVersion": "2.18"
     },
+    {
+      "name": "responsive_framework",
+      "rootUri": "file:///Users/bogdan/.pub-cache/hosted/pub.dev/responsive_framework-1.0.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.17"
+    },
     {
       "name": "searchable_listview",
       "rootUri": "file:///Users/bogdan/.pub-cache/hosted/pub.dev/searchable_listview-2.4.0",
@@ -421,9 +427,15 @@
       "packageUri": "lib/",
       "languageVersion": "2.17"
     },
+    {
+      "name": "sizer",
+      "rootUri": "file:///Users/bogdan/.pub-cache/hosted/pub.dev/sizer-2.0.15",
+      "packageUri": "lib/",
+      "languageVersion": "2.12"
+    },
     {
       "name": "sky_engine",
-      "rootUri": "file:///Users/bogdan/fvm/versions/3.7.9/bin/cache/pkg/sky_engine",
+      "rootUri": "file:///usr/local/Caskroom/flutter/3.7.7/flutter/bin/cache/pkg/sky_engine",
       "packageUri": "lib/",
       "languageVersion": "2.12"
     },
@@ -493,6 +505,12 @@
       "packageUri": "lib/",
       "languageVersion": "2.12"
     },
+    {
+      "name": "universal_io",
+      "rootUri": "file:///Users/bogdan/.pub-cache/hosted/pub.dev/universal_io-2.2.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.15"
+    },
     {
       "name": "vector_math",
       "rootUri": "file:///Users/bogdan/.pub-cache/hosted/pub.dev/vector_math-2.1.4",
@@ -536,7 +554,7 @@
       "languageVersion": "2.19"
     }
   ],
-  "generated": "2023-05-08T10:23:27.972647Z",
+  "generated": "2023-05-10T21:58:20.353562Z",
   "generator": "pub",
   "generatorVersion": "2.19.6"
 }
diff --git a/.dart_tool/package_config_subset b/.dart_tool/package_config_subset
index a6d5b51..6de2710 100644
--- a/.dart_tool/package_config_subset
+++ b/.dart_tool/package_config_subset
@@ -258,6 +258,10 @@ pubspec_parse
 2.18
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/pubspec_parse-1.2.3/
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/pubspec_parse-1.2.3/lib/
+responsive_framework
+2.17
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/responsive_framework-1.0.0/
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/responsive_framework-1.0.0/lib/
 searchable_listview
 2.12
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/searchable_listview-2.4.0/
@@ -270,6 +274,10 @@ shelf_web_socket
 2.17
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/shelf_web_socket-1.0.4/
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/shelf_web_socket-1.0.4/lib/
+sizer
+2.12
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/sizer-2.0.15/
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/sizer-2.0.15/lib/
 source_gen
 2.18
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/source_gen-1.3.0/
@@ -314,6 +322,10 @@ typed_data
 2.12
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/typed_data-1.3.1/
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/typed_data-1.3.1/lib/
+universal_io
+2.15
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/universal_io-2.2.0/
+file:///Users/bogdan/.pub-cache/hosted/pub.dev/universal_io-2.2.0/lib/
 vector_math
 2.14
 file:///Users/bogdan/.pub-cache/hosted/pub.dev/vector_math-2.1.4/
@@ -344,14 +356,14 @@ file:///Users/bogdan/IdeaProjects/ernaehrung/
 file:///Users/bogdan/IdeaProjects/ernaehrung/lib/
 sky_engine
 2.12
-file:///Users/bogdan/fvm/versions/3.7.9/bin/cache/pkg/sky_engine/
-file:///Users/bogdan/fvm/versions/3.7.9/bin/cache/pkg/sky_engine/lib/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/bin/cache/pkg/sky_engine/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/bin/cache/pkg/sky_engine/lib/
 flutter
 2.17
-file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter/
-file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter/lib/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter/lib/
 flutter_test
 2.17
-file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter_test/
-file:///Users/bogdan/fvm/versions/3.7.9/packages/flutter_test/lib/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter_test/
+file:///usr/local/Caskroom/flutter/3.7.7/flutter/packages/flutter_test/lib/
 2
diff --git a/.flutter-plugins-dependencies b/.flutter-plugins-dependencies
index 8747533..717bf0c 100644
--- a/.flutter-plugins-dependencies
+++ b/.flutter-plugins-dependencies
@@ -1 +1 @@
-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.2/","native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.2/","native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.10/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-09 19:37:33.881935","version":"3.7.9"}
\ No newline at end of file
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.2/","native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.2/","native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.10/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/Users/bogdan/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-12 18:02:09.137836","version":"3.7.9"}
\ No newline at end of file
diff --git a/lib/android/andoird_app.dart b/lib/android/andoird_app.dart
new file mode 100644
index 0000000..cc12e3d
--- /dev/null
+++ b/lib/android/andoird_app.dart
@@ -0,0 +1,21 @@
+import 'package:ernaehrung/android/pages/nav_pages/main_page.dart';
+import 'package:ernaehrung/android/views/navigation/navigation_screen.dart';
+import 'package:flutter/material.dart';
+
+class AndroidApp extends StatelessWidget {
+  const AndroidApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const MainPage(),
+      routes: {
+        '/navigation': (context) => const  NavigationScreen(),
+      },
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/components/card_component.dart b/lib/android/components/card_component.dart
similarity index 100%
rename from lib/components/card_component.dart
rename to lib/android/components/card_component.dart
diff --git a/lib/components/card_item_component.dart b/lib/android/components/card_item_component.dart
similarity index 100%
rename from lib/components/card_item_component.dart
rename to lib/android/components/card_item_component.dart
diff --git a/lib/components/diet_chart_component.dart b/lib/android/components/diet_chart_component.dart
similarity index 90%
rename from lib/components/diet_chart_component.dart
rename to lib/android/components/diet_chart_component.dart
index 8363b33..f63bf46 100644
--- a/lib/components/diet_chart_component.dart
+++ b/lib/android/components/diet_chart_component.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:percent_indicator/linear_percent_indicator.dart';
 
 class DietChatComponent extends StatefulWidget {
-  late int calorienSummary;
   final double fatPercentPerThousandCalorie = 3.7;
   final double proteinPercentPerThousandCalorie = 4.5;
   final double carbsPercentPerThousandCalorie = 12.8;
@@ -11,10 +10,10 @@ class DietChatComponent extends StatefulWidget {
   final String protein = "Protein";
   final String fat = "Fett";
 
-  late String fatGramm, carbGramm, proteinGramm;
-  late double fatSummary, carbSummary, proteinSummary;
+  late String fatGramm, carbGramm, proteinGramm = "";
+  late double fatSummary, carbSummary, proteinSummary = 0.0;
 
-  DietChatComponent(this.calorienSummary, {super.key, int calorienLeft = 0}){
+  DietChatComponent(int calorienSummary, {super.key, int calorienLeft = 0}){
     fatSummary = (calorienSummary / 100) * fatPercentPerThousandCalorie;
     carbSummary = (calorienSummary / 100) * carbsPercentPerThousandCalorie;
     proteinSummary = (calorienSummary / 100) * proteinPercentPerThousandCalorie;
diff --git a/lib/components/empty_search_component.dart b/lib/android/components/empty_search_component.dart
similarity index 100%
rename from lib/components/empty_search_component.dart
rename to lib/android/components/empty_search_component.dart
diff --git a/lib/components/founded_search_component.dart b/lib/android/components/founded_search_component.dart
similarity index 98%
rename from lib/components/founded_search_component.dart
rename to lib/android/components/founded_search_component.dart
index 261a1eb..c0d32e0 100644
--- a/lib/components/founded_search_component.dart
+++ b/lib/android/components/founded_search_component.dart
@@ -1,8 +1,8 @@
 import 'package:assorted_layout_widgets/assorted_layout_widgets.dart';
-import 'package:ernaehrung/config/setup_todaybox_config.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:hive/hive.dart';
+import '../config/setup_todaybox_config.dart';
 import '../models/food.dart';
 
 class SearchedFoodComponent extends StatefulWidget {
diff --git a/lib/components/not_found_component.dart b/lib/android/components/not_found_component.dart
similarity index 100%
rename from lib/components/not_found_component.dart
rename to lib/android/components/not_found_component.dart
diff --git a/lib/components/search_component.dart b/lib/android/components/search_component.dart
similarity index 96%
rename from lib/components/search_component.dart
rename to lib/android/components/search_component.dart
index cd28705..f8c41b7 100644
--- a/lib/components/search_component.dart
+++ b/lib/android/components/search_component.dart
@@ -1,7 +1,7 @@
 import 'package:empty_widget/empty_widget.dart';
-import 'package:ernaehrung/components/founded_search_component.dart';
 import 'package:flutter/material.dart';
 import '../models/food.dart';
+import 'founded_search_component.dart';
 
 class SearchComponent extends StatefulWidget {
   final List<Food> foods;
diff --git a/lib/components/statistics_circular_indicator_component.dart b/lib/android/components/statistics_circular_indicator_component.dart
similarity index 100%
rename from lib/components/statistics_circular_indicator_component.dart
rename to lib/android/components/statistics_circular_indicator_component.dart
diff --git a/lib/components/welcome_text_field.dart b/lib/android/components/welcome_text_field.dart
similarity index 98%
rename from lib/components/welcome_text_field.dart
rename to lib/android/components/welcome_text_field.dart
index e7c1023..310ae2b 100644
--- a/lib/components/welcome_text_field.dart
+++ b/lib/android/components/welcome_text_field.dart
@@ -1,6 +1,7 @@
-import 'package:ernaehrung/views/navigation/navigation_screen.dart';
 import 'package:flutter/material.dart';
 
+import '../views/navigation/navigation_screen.dart';
+
 class WelcomePageStateTextFieldState extends StatefulWidget {
   const WelcomePageStateTextFieldState({super.key});
 
diff --git a/lib/config/setup_todaybox_config.dart b/lib/android/config/setup_todaybox_config.dart
similarity index 100%
rename from lib/config/setup_todaybox_config.dart
rename to lib/android/config/setup_todaybox_config.dart
diff --git a/lib/models/card.dart b/lib/android/models/card.dart
similarity index 100%
rename from lib/models/card.dart
rename to lib/android/models/card.dart
diff --git a/lib/models/card_item.dart b/lib/android/models/card_item.dart
similarity index 100%
rename from lib/models/card_item.dart
rename to lib/android/models/card_item.dart
diff --git a/lib/models/food.dart b/lib/android/models/food.dart
similarity index 98%
rename from lib/models/food.dart
rename to lib/android/models/food.dart
index 05d1911..5bc8911 100644
--- a/lib/models/food.dart
+++ b/lib/android/models/food.dart
@@ -1,5 +1,5 @@
 import 'package:hive/hive.dart';
-part 'adapter/food.g.dart';
+part 'food.g.dart';
 
 @HiveType(typeId: 1)
 class Food {
diff --git a/lib/models/adapter/food.g.dart b/lib/android/models/food.g.dart
similarity index 98%
rename from lib/models/adapter/food.g.dart
rename to lib/android/models/food.g.dart
index 2b58428..ada01fc 100644
--- a/lib/models/adapter/food.g.dart
+++ b/lib/android/models/food.g.dart
@@ -1,6 +1,6 @@
 // GENERATED CODE - DO NOT MODIFY BY HAND
 
-part of '../food.dart';
+part of 'food.dart';
 
 // **************************************************************************
 // TypeAdapterGenerator
diff --git a/lib/models/food_dto.dart b/lib/android/models/food_dto.dart
similarity index 100%
rename from lib/models/food_dto.dart
rename to lib/android/models/food_dto.dart
diff --git a/lib/pages/nav_pages/main_page.dart b/lib/android/pages/nav_pages/main_page.dart
similarity index 92%
rename from lib/pages/nav_pages/main_page.dart
rename to lib/android/pages/nav_pages/main_page.dart
index ca76d35..e98d9df 100644
--- a/lib/pages/nav_pages/main_page.dart
+++ b/lib/android/pages/nav_pages/main_page.dart
@@ -1,7 +1,6 @@
-import 'package:ernaehrung/pages/nav_pages/progress_page.dart';
-import 'package:ernaehrung/pages/nav_pages/today_page.dart';
+import 'package:ernaehrung/android/pages/nav_pages/progress_page.dart';
+import 'package:ernaehrung/android/pages/nav_pages/today_page.dart';
 import 'package:flutter/material.dart';
-
 import 'meal_plan_page.dart';
 
 class MainPage extends StatefulWidget {
diff --git a/lib/pages/nav_pages/meal_plan_page.dart b/lib/android/pages/nav_pages/meal_plan_page.dart
similarity index 100%
rename from lib/pages/nav_pages/meal_plan_page.dart
rename to lib/android/pages/nav_pages/meal_plan_page.dart
diff --git a/lib/pages/nav_pages/progress_page.dart b/lib/android/pages/nav_pages/progress_page.dart
similarity index 100%
rename from lib/pages/nav_pages/progress_page.dart
rename to lib/android/pages/nav_pages/progress_page.dart
diff --git a/lib/pages/nav_pages/search_food.dart b/lib/android/pages/nav_pages/search_food.dart
similarity index 83%
rename from lib/pages/nav_pages/search_food.dart
rename to lib/android/pages/nav_pages/search_food.dart
index 9437809..d29caa5 100644
--- a/lib/pages/nav_pages/search_food.dart
+++ b/lib/android/pages/nav_pages/search_food.dart
@@ -1,8 +1,9 @@
-import 'package:ernaehrung/components/search_component.dart';
-import 'package:ernaehrung/models/food.dart';
-import 'package:ernaehrung/models/food_dto.dart';
 import 'package:flutter/material.dart';
 
+import '../../components/search_component.dart';
+import '../../models/food.dart';
+import '../../models/food_dto.dart';
+
 class SearchFoodPage extends StatefulWidget {
   final String cardName;
   const SearchFoodPage(this.cardName, {Key? key}) : super(key: key);
@@ -15,7 +16,6 @@ class _SearchFoodPageState extends State<SearchFoodPage> {
 
   @override
   Widget build(BuildContext context) {
-    print(widget.cardName);
     return SafeArea(
         top: true,
         child: Scaffold(
diff --git a/lib/pages/nav_pages/today_page.dart b/lib/android/pages/nav_pages/today_page.dart
similarity index 85%
rename from lib/pages/nav_pages/today_page.dart
rename to lib/android/pages/nav_pages/today_page.dart
index 7329d21..c4cf29b 100644
--- a/lib/pages/nav_pages/today_page.dart
+++ b/lib/android/pages/nav_pages/today_page.dart
@@ -1,10 +1,9 @@
-import 'package:ernaehrung/components/card_component.dart';
-import 'package:ernaehrung/components/diet_chart_component.dart';
-import 'package:ernaehrung/components/statistics_circular_indicator_component.dart';
-import 'package:ernaehrung/models/food.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:hive_flutter/hive_flutter.dart';
+import '../../components/card_component.dart';
+import '../../components/diet_chart_component.dart';
+import '../../components/statistics_circular_indicator_component.dart';
+import '../../models/food.dart';
 
 class TodayPage extends StatefulWidget {
   final String title;
@@ -53,7 +52,6 @@ class _TodayPageState extends State<TodayPage> {
                               shrinkWrap: true,
                               itemCount: box.keys.length,
                               itemBuilder: (context, i) {
-                                print("all list items of card  ${box.values.length}");
                                 if(box.keyAt(i).toString() == "DATE"){
                                   return const SizedBox.shrink();
                                 }else{
diff --git a/lib/views/navigation/navigation_screen.dart b/lib/android/views/navigation/navigation_screen.dart
similarity index 100%
rename from lib/views/navigation/navigation_screen.dart
rename to lib/android/views/navigation/navigation_screen.dart
diff --git a/lib/views/welcome/welcome_screen.dart b/lib/android/views/welcome/welcome_screen.dart
similarity index 93%
rename from lib/views/welcome/welcome_screen.dart
rename to lib/android/views/welcome/welcome_screen.dart
index 1c4babc..ed1edb2 100644
--- a/lib/views/welcome/welcome_screen.dart
+++ b/lib/android/views/welcome/welcome_screen.dart
@@ -1,6 +1,7 @@
-import 'package:ernaehrung/components/welcome_text_field.dart';
 import 'package:flutter/material.dart';
 
+import '../../components/welcome_text_field.dart';
+
 class WelcomeScreen extends StatelessWidget {
   const WelcomeScreen({super.key});
 
diff --git a/lib/main.dart b/lib/main.dart
index 408f01e..db5fe4e 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,12 +1,12 @@
-import 'package:ernaehrung/models/food.dart';
-import 'package:ernaehrung/pages/nav_pages/main_page.dart';
-import 'package:ernaehrung/views/navigation/navigation_screen.dart';
+
+import 'package:ernaehrung/web/web_app.dart';
 import 'package:flutter/material.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-
-import 'config/setup_todaybox_config.dart';
-
+import 'android/andoird_app.dart';
+import 'android/config/setup_todaybox_config.dart';
+import 'android/models/food.dart';
+import 'package:flutter/foundation.dart' show defaultTargetPlatform, kIsWeb;
 
 void main() async {
   await dotenv.load(fileName: ".env");
@@ -19,23 +19,9 @@ void main() async {
   await Hive.openBox(dotenv.env['TODAY_BOX']!);
   await setupTodayBox();
 
-  runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: const MainPage(),
-      routes: {
-        '/navigation': (context) => const  NavigationScreen(),
-      },
-    );
+  if(defaultTargetPlatform == TargetPlatform.android){
+    runApp(const AndroidApp());
+  }else if(kIsWeb){
+    runApp(const WebApp());
   }
-}
+}
\ No newline at end of file
diff --git a/lib/mockdata.dart b/lib/mockdata.dart
index cf65ed6..6c11fb1 100644
--- a/lib/mockdata.dart
+++ b/lib/mockdata.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/cupertino.dart';
-import 'models/card.dart';
+import 'android/models/card.dart';
 
 List<CardModel> essen = [
   CardModel('Haferflocken', 10, 1.1, 1.2),
diff --git a/lib/web/component/header_button_component.dart b/lib/web/component/header_button_component.dart
new file mode 100644
index 0000000..9dbb8ae
--- /dev/null
+++ b/lib/web/component/header_button_component.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class HeaderButton extends StatelessWidget {
+  final String buttonText;
+  final Widget page;
+
+  const HeaderButton(this.buttonText, this.page, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(onPressed: (){
+      Navigator.push(
+        context,
+        MaterialPageRoute(builder: (context) => page),
+      );
+    }, child: Text(buttonText));
+  }
+}
diff --git a/lib/web/component/header_component.dart b/lib/web/component/header_component.dart
new file mode 100644
index 0000000..784d3e7
--- /dev/null
+++ b/lib/web/component/header_component.dart
@@ -0,0 +1,35 @@
+import 'package:ernaehrung/web/component/header_button_component.dart';
+import 'package:flutter/cupertino.dart';
+
+class HeaderComponentWeb extends StatelessWidget {
+  HeaderComponentWeb({Key? key}) : super(key: key);
+
+  final List<HeaderData> headerButtons = [
+    HeaderData("Heute", const Placeholder()),
+    HeaderData("Fortschritt", const Placeholder()),
+    HeaderData("Mahlzeitplan", const Placeholder())
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: List.generate(headerButtons.length, (index) =>
+          HeaderButton(headerButtons[index].buttonText, headerButtons[index].page))
+    );
+  }
+}
+
+class HeaderData{
+  final String buttonText;
+  final Widget page;
+
+  HeaderData(this.buttonText, this.page);
+
+  @override
+  String toString() {
+    return 'HeaderData{route: $page, buttonText: $buttonText}';
+  }
+
+
+}
diff --git a/lib/web/component/section_component.dart b/lib/web/component/section_component.dart
new file mode 100644
index 0000000..2ba68cd
--- /dev/null
+++ b/lib/web/component/section_component.dart
@@ -0,0 +1,51 @@
+import 'package:ernaehrung/android/components/statistics_circular_indicator_component.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:hive_flutter/adapters.dart';
+
+import '../../android/components/card_component.dart';
+import '../../android/components/diet_chart_component.dart';
+import '../../android/models/food.dart';
+
+class SectionComponent extends StatelessWidget {
+  const SectionComponent({Key? key}) : super(key: key);
+
+  List<Food> castDynamicToListFood(List<dynamic> dynamicList) {
+    List<Food> foodList = [];
+    for (Food element in dynamicList) {
+      foodList.add(element);
+    }
+
+    return foodList;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          StatisticsPercentComponent(300, 100, 400),
+          DietChatComponent(1500),
+          ValueListenableBuilder(
+              valueListenable: Hive.box("TODAY").listenable(),
+              builder: (context, box, widget) {
+                return ListView.builder(
+                    primary: false,
+                    shrinkWrap: true,
+                    itemCount: box.keys.length,
+                    itemBuilder: (context, i) {
+                      if(box.keyAt(i).toString() == "DATE"){
+                        return const SizedBox.shrink();
+                      }else{
+                        return CardComponent(
+                            eatingMealName: box.keyAt(i).toString(),
+                            selectedMeal: castDynamicToListFood(
+                                box.getAt(i)));
+                      }
+                    }
+                );
+              }),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/web/mobile.dart b/lib/web/mobile.dart
new file mode 100644
index 0000000..d522d38
--- /dev/null
+++ b/lib/web/mobile.dart
@@ -0,0 +1,31 @@
+import 'package:ernaehrung/web/component/header_component.dart';
+import 'package:ernaehrung/web/component/section_component.dart';
+import 'package:flutter/material.dart';
+
+class MobileScreen extends StatelessWidget {
+  const MobileScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    return SizedBox(
+        width: screenWidth,
+        height: screenWidth,
+        child: SingleChildScrollView(
+          child: Padding(
+            padding: const EdgeInsets.all(8),
+            child: Column(
+              children: [
+                HeaderComponentWeb(),
+                Container(
+                  margin: const EdgeInsets.fromLTRB(0, 24, 0, 0),
+                  child: const Center(
+                    child: SectionComponent()
+                  ),
+                )
+              ],
+            ),
+          ),
+        ));
+  }
+}
diff --git a/lib/web/web_app.dart b/lib/web/web_app.dart
new file mode 100644
index 0000000..fc02f0c
--- /dev/null
+++ b/lib/web/web_app.dart
@@ -0,0 +1,61 @@
+import 'package:ernaehrung/web/mobile.dart';
+import 'package:flutter/material.dart';
+import 'package:sizer/sizer.dart';
+
+class WebApp extends StatelessWidget {
+  const WebApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Sizer(
+      builder: (context, orientation, deviceType) {
+        return MaterialApp(
+          debugShowCheckedModeBanner: false,
+          title: 'Sizer',
+          theme: ThemeData.light(),
+          home: const HomeScreen() ,
+        );
+      },
+    );
+  }
+}
+
+class HomeScreen extends StatefulWidget {
+  const HomeScreen({Key? key}) : super(key: key);
+
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> {
+
+  bool isDesktop(BuildContext context) => MediaQuery.of(context).size.width >= 1028;
+  bool isTablet(BuildContext context) =>
+      MediaQuery.of(context).size.width >= 768 && MediaQuery.of(context).size.width <= 1027;
+  bool isMobile(BuildContext context) => MediaQuery.of(context).size.width <= 767;
+
+  Widget getDeviceType(context){
+    if(isDesktop(context)){
+      return const Text("Desktop");
+    }else if(isTablet(context)){
+      return const Text("Tablet");
+    }else if(isMobile(context)){
+      return const MobileScreen();
+    }
+
+    return const SizedBox.shrink();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return  Scaffold(
+        body: Row(
+          children: [
+            getDeviceType(context),
+          ],
+        )
+    );
+  }
+}
+
+
diff --git a/pubspec.lock b/pubspec.lock
index 153f845..4dc7353 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -531,6 +531,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.3"
+  responsive_framework:
+    dependency: "direct main"
+    description:
+      name: responsive_framework
+      sha256: "07bbe163bd67708160f3d11abaf6b34ae5b718e4250d83aa9a8a9496325f6b8a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   searchable_listview:
     dependency: "direct main"
     description:
@@ -555,6 +563,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  sizer:
+    dependency: "direct main"
+    description:
+      name: sizer
+      sha256: d2b3cb6cbc4a637f508dacd786bae55df31e5fc088044248a43e4fd1e050c117
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.15"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -648,6 +664,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.1"
+  universal_io:
+    dependency: transitive
+    description:
+      name: universal_io
+      sha256: "06866290206d196064fd61df4c7aea1ffe9a4e7c4ccaa8fcded42dd41948005d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
   vector_math:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 1301a63..5b8f55b 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -43,6 +43,8 @@ dependencies:
   hive: ^2.2.3
   hive_flutter: ^1.1.0
   flutter_dotenv: ^5.0.2
+  responsive_framework: ^1.0.0
+  sizer: ^2.0.15
 
 
 dev_dependencies:
diff --git a/test/widget_test.dart b/test/widget_test.dart
deleted file mode 100644
index 0d5d549..0000000
--- a/test/widget_test.dart
+++ /dev/null
@@ -1,30 +0,0 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:ernaehrung/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}