diff --git a/app/assets/images/tutorial/04_bottom_navigation_loopable.gif b/app/assets/images/tutorial/04_bottom_navigation_loopable.gif
new file mode 100644
index 00000000..d2dfb9b4
Binary files /dev/null and b/app/assets/images/tutorial/04_bottom_navigation_loopable.gif differ
diff --git a/app/assets/images/tutorial/04_report_and_cyp2c19_loopable.gif b/app/assets/images/tutorial/04_report_and_cyp2c19_loopable.gif
deleted file mode 100644
index 0c04bb8c..00000000
Binary files a/app/assets/images/tutorial/04_report_and_cyp2c19_loopable.gif and /dev/null differ
diff --git a/app/assets/images/tutorial/05_clopidogrel_loopable.gif b/app/assets/images/tutorial/05_clopidogrel_loopable.gif
deleted file mode 100644
index b1a7e187..00000000
Binary files a/app/assets/images/tutorial/05_clopidogrel_loopable.gif and /dev/null differ
diff --git a/app/assets/images/tutorial/05_report_and_cyp2c19_loopable.gif b/app/assets/images/tutorial/05_report_and_cyp2c19_loopable.gif
new file mode 100644
index 00000000..8ca71d3c
Binary files /dev/null and b/app/assets/images/tutorial/05_report_and_cyp2c19_loopable.gif differ
diff --git a/app/assets/images/tutorial/06_clopidogrel_loopable.gif b/app/assets/images/tutorial/06_clopidogrel_loopable.gif
new file mode 100644
index 00000000..db6c057b
Binary files /dev/null and b/app/assets/images/tutorial/06_clopidogrel_loopable.gif differ
diff --git a/app/assets/images/tutorial/06_drug_search_and_filter_loopable.gif b/app/assets/images/tutorial/06_drug_search_and_filter_loopable.gif
deleted file mode 100644
index ba4b238e..00000000
Binary files a/app/assets/images/tutorial/06_drug_search_and_filter_loopable.gif and /dev/null differ
diff --git a/app/assets/images/tutorial/07_drug_search_and_filter_loopable.gif b/app/assets/images/tutorial/07_drug_search_and_filter_loopable.gif
new file mode 100644
index 00000000..c4c1acaf
Binary files /dev/null and b/app/assets/images/tutorial/07_drug_search_and_filter_loopable.gif differ
diff --git a/app/assets/images/tutorial/08_faq_and_more_loopable.gif b/app/assets/images/tutorial/08_faq_and_more_loopable.gif
new file mode 100644
index 00000000..177a5069
Binary files /dev/null and b/app/assets/images/tutorial/08_faq_and_more_loopable.gif differ
diff --git a/app/lib/common/widgets/tutorial/container.dart b/app/lib/common/widgets/tutorial/container.dart
index e87a249d..6a67447e 100644
--- a/app/lib/common/widgets/tutorial/container.dart
+++ b/app/lib/common/widgets/tutorial/container.dart
@@ -50,20 +50,15 @@ class TutorialContainer extends HookWidget {
           fontSize: PharMeTheme.textTheme.headlineSmall!.fontSize,
         ),
       ),
-      if (content != null || asset != null) Padding(
+      if (content != null) Padding(
         padding: EdgeInsetsDirectional.only(top: PharMeTheme.mediumSpace),
-        child: Expanded(
-          child: Center(child: SingleChildScrollView(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              mainAxisSize: MainAxisSize.max,
-              children: [
-                if (content != null)
-                  Text.rich(content, style: PharMeTheme.textTheme.bodyLarge),
-                if (asset != null) asset,
-              ],
-            ),
-          )),
+        child: Text.rich(content, style: PharMeTheme.textTheme.bodyLarge),
+      ),
+      if (asset != null) Expanded(
+        child: Padding(
+          padding: EdgeInsetsDirectional.only(top: PharMeTheme.mediumSpace),
+          // child: Container(),
+          child: Center(child: asset),
         ),
       ),
       Padding(
diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
index 0fb41ebc..5053665b 100644
--- a/app/lib/l10n/app_en.arb
+++ b/app/lib/l10n/app_en.arb
@@ -349,7 +349,8 @@
   "tutorial_to_the_app": "Proceed to the app",
   "tutorial_initial_drug_selection_title": "Setup PharMe",
   "tutorial_initial_drug_selection_body": "As a first step, please update the list of your current medications.",
-
+  "tutorial_app_tour_1_title": "App Tour (1/5) · Navigation",
+  "tutorial_app_tour_1_body": "We would first like to guide you through the app's main functions.\n\nYou can switch between PharMe's main screens using the bottom navigation bar.\n\nIf you want to re-watch this app  tour later, you can always do so on the last screen under More.",
   "onboarding_get_started": "Get started",
   "onboarding_next": "Next",
   "onboarding_prev": "Back",
diff --git a/app/lib/main/pages/main.dart b/app/lib/main/pages/main.dart
index 98db0803..5b8fb15e 100644
--- a/app/lib/main/pages/main.dart
+++ b/app/lib/main/pages/main.dart
@@ -42,6 +42,31 @@ class MainPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final tutorialDone = MetaData.instance.tutorialDone ?? false;
+    if (!tutorialDone) {
+      WidgetsBinding.instance.addPostFrameCallback((_) async {
+        await TutorialController().showTutorial(
+          context: context,
+          pages: [
+            TutorialContent(
+              title: (context) =>
+                context.l10n.tutorial_app_tour_1_title,
+              content: (context) => TextSpan(
+                text: context.l10n.tutorial_app_tour_1_body,
+              ),
+              assetPath:
+                'assets/images/tutorial/04_bottom_navigation_loopable.gif',
+            ),
+          ],
+          onClose: () async {
+            // TODO: set true once finished testing
+            MetaData.instance.tutorialDone = false;
+            await MetaData.save();
+          },
+          lastNextButtonText: context.l10n.tutorial_to_the_app,
+        );
+      });
+    }
     return AutoTabsScaffold(
       routes: getTabRoutesDefinition(context).map(
         (routeDefinition) => routeDefinition.pageRouteInfo
diff --git a/app/pubspec.yaml b/app/pubspec.yaml
index 1488382c..1a9362f1 100644
--- a/app/pubspec.yaml
+++ b/app/pubspec.yaml
@@ -66,6 +66,7 @@ flutter:
   assets:
     - assets/images/
     - assets/images/onboarding/
+    - assets/images/tutorial/
 
 flutter_icons:
   android: 'launcher_icon'