diff --git a/lib/bootstrap.dart b/lib/bootstrap.dart
index 17869ee..62209b9 100644
--- a/lib/bootstrap.dart
+++ b/lib/bootstrap.dart
@@ -19,7 +19,7 @@ import 'package:ht_main/shared/localization/en_timeago_messages.dart';
 import 'package:ht_shared/ht_shared.dart';
 import 'package:timeago/timeago.dart' as timeago;
 
-Future<void> bootstrap(app_config.AppConfig appConfig) async {
+Future<Widget> bootstrap(app_config.AppConfig appConfig) async {
   WidgetsFlutterBinding.ensureInitialized();
   Bloc.observer = const AppBlocObserver();
 
@@ -205,17 +205,15 @@ Future<void> bootstrap(app_config.AppConfig appConfig) async {
     dataClient: appConfigClient,
   );
 
-  runApp(
-    App(
-      htAuthenticationRepository: authenticationRepository,
-      htHeadlinesRepository: headlinesRepository,
-      htCategoriesRepository: categoriesRepository,
-      htCountriesRepository: countriesRepository,
-      htSourcesRepository: sourcesRepository,
-      htUserAppSettingsRepository: userAppSettingsRepository,
-      htUserContentPreferencesRepository: userContentPreferencesRepository,
-      htAppConfigRepository: appConfigRepository,
-      kvStorageService: kvStorage,
-    ),
+  return App(
+    htAuthenticationRepository: authenticationRepository,
+    htHeadlinesRepository: headlinesRepository,
+    htCategoriesRepository: categoriesRepository,
+    htCountriesRepository: countriesRepository,
+    htSourcesRepository: sourcesRepository,
+    htUserAppSettingsRepository: userAppSettingsRepository,
+    htUserContentPreferencesRepository: userContentPreferencesRepository,
+    htAppConfigRepository: appConfigRepository,
+    kvStorageService: kvStorage,
   );
 }
diff --git a/lib/main.dart b/lib/main.dart
index 6e46a76..86d2b7e 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,3 +1,6 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:device_preview/device_preview.dart';
 import 'package:ht_main/app/config/config.dart';
 import 'package:ht_main/bootstrap.dart';
 
@@ -12,5 +15,19 @@ void main() async {
     AppEnvironment.development => AppConfig.development(),
     AppEnvironment.demo => AppConfig.demo(),
   };
-  await bootstrap(appConfig);
+
+  final appWidget = await bootstrap(appConfig);
+
+  if (appConfig.environment == AppEnvironment.demo) {
+    runApp(
+      DevicePreview(
+        enabled: !kReleaseMode,
+        builder: (context) => appWidget,
+        tools: const [DeviceSection()],
+        
+      ),
+    );
+  } else {
+    runApp(appWidget);
+  }
 }
diff --git a/pubspec.lock b/pubspec.lock
index ecd107c..5227bc8 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -153,6 +153,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
+  device_frame:
+    dependency: transitive
+    description:
+      name: device_frame
+      sha256: d031a06f5d6f4750009672db98a5aa1536aa4a231713852469ce394779a23d75
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
+  device_preview:
+    dependency: "direct main"
+    description:
+      name: device_preview
+      sha256: a694acdd3894b4c7d600f4ee413afc4ff917f76026b97ab06575fe886429ef19
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
   diff_match_patch:
     dependency: transitive
     description:
@@ -277,6 +293,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  freezed_annotation:
+    dependency: transitive
+    description:
+      name: freezed_annotation
+      sha256: c2e2d632dd9b8a2b7751117abcfc2b4888ecfe181bd9fca7170d9ef02e595fe2
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.4"
   frontend_server_client:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 1a28f88..d418951 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -8,6 +8,7 @@ environment:
 dependencies:
   bloc: ^9.0.0
   bloc_concurrency: ^0.3.0
+  device_preview: ^1.2.0
   equatable: ^2.0.7
   flex_color_scheme: ^8.1.1
   flutter: