diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
index dd7ba00c..8d923104 100644
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -348,6 +348,14 @@
 	"@downloadFailureNoPermissionNotification": {
 		"description": "Inform user that the file cannot be downloaded due to missing storage permission"
 	},
+	"nextTooltip": "Next",
+	"@nextTooltip": {
+		"description": "Tooltip of the next button"
+	},
+	"previousTooltip": "Previous",
+	"@previousTooltip": {
+		"description": "Tooltip of the previous button"
+	},
 	"changelogTitle": "Changelog",
 	"@changelogTitle": {
 		"description": "Title of the changelog dialog"
diff --git a/lib/widget/viewer.dart b/lib/widget/viewer.dart
index eaabe6d9..9f7b7eda 100644
--- a/lib/widget/viewer.dart
+++ b/lib/widget/viewer.dart
@@ -126,6 +126,7 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
                   ? null
                   : const NeverScrollableScrollPhysics(),
             ),
+            if (kIsWeb) ..._buildNavigationButtons(context),
             _buildBottomAppBar(context),
             _buildAppBar(context),
           ],
@@ -154,6 +155,77 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
     return content;
   }
 
+  List<Widget> _buildNavigationButtons(BuildContext context) {
+    return [
+      Align(
+        alignment: Alignment.centerRight,
+        child: Material(
+          type: MaterialType.transparency,
+          child: Visibility(
+            visible: _canSwitchPage(),
+            child: AnimatedOpacity(
+              opacity: _isShowNext ? 1.0 : 0.0,
+              duration: k.animationDurationShort,
+              child: MouseRegion(
+                onEnter: (details) {
+                  setState(() {
+                    _isShowNext = true;
+                  });
+                },
+                onExit: (details) {
+                  setState(() {
+                    _isShowNext = false;
+                  });
+                },
+                child: Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
+                  child: IconButton(
+                    icon: Icon(Icons.arrow_forward_ios_outlined),
+                    onPressed: _switchToRightImage,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+      Align(
+        alignment: Alignment.centerLeft,
+        child: Material(
+          type: MaterialType.transparency,
+          child: Visibility(
+            visible: _canSwitchPage(),
+            child: AnimatedOpacity(
+              opacity: _isShowPrevious ? 1.0 : 0.0,
+              duration: k.animationDurationShort,
+              child: MouseRegion(
+                onEnter: (details) {
+                  setState(() {
+                    _isShowPrevious = true;
+                  });
+                },
+                onExit: (details) {
+                  setState(() {
+                    _isShowPrevious = false;
+                  });
+                },
+                child: Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
+                  child: IconButton(
+                    icon: Icon(Icons.arrow_back_ios_outlined),
+                    onPressed: _switchToLeftImage,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    ];
+  }
+
   Widget _buildAppBar(BuildContext context) {
     return Wrap(
       children: [
@@ -722,6 +794,9 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
   var _isDetailPaneActive = false;
   var _isClosingDetailPane = false;
 
+  var _isShowNext = false;
+  var _isShowPrevious = false;
+
   var _isZooming = false;
   var _wasZoomed = false;
   final _transformationController = TransformationController();