diff --git a/app/docker/components/log-viewer/logViewer.html b/app/docker/components/log-viewer/logViewer.html
index 1e70f54f4..db4cce445 100644
--- a/app/docker/components/log-viewer/logViewer.html
+++ b/app/docker/components/log-viewer/logViewer.html
@@ -6,29 +6,28 @@
         <form class="form-horizontal">
           <div class="form-group">
             <div class="col-sm-12">
-              <label for="tls" class="control-label text-left">
-                Auto-refresh logs
-                <portainer-tooltip message="'Disabling this option allows you to pause the log collection process and the auto-scrolling.'"></portainer-tooltip>
-              </label>
-              <label class="switch" style="margin-left: 20px">
-                <input
-                  type="checkbox"
-                  ng-model="$ctrl.state.logCollection"
-                  ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"
-                /><i></i>
-              </label>
+              <por-switch-field
+                label-class="'col-sm-2'"
+                checked="$ctrl.state.logCollection"
+                label="'Auto-refresh logs'"
+                tooltip="'Disabling this option allows you to pause the log collection process and the auto-scrolling.'"
+                on-change="($ctrl.handleLogsCollectionChange)"
+              ></por-switch-field>
             </div>
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <label for="tls" class="control-label text-left"> Wrap lines </label>
-              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.state.wrapLines" /><i></i> </label>
+              <por-switch-field label-class="'col-sm-2'" checked="$ctrl.state.wrapLines" label="'Wrap lines'" on-change="($ctrl.handleLogsWrapLinesChange)"></por-switch-field>
             </div>
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <label for="tls" class="control-label text-left"> Display timestamps </label>
-              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.displayTimestamps" /><i></i> </label>
+              <por-switch-field
+                label-class="'col-sm-2'"
+                checked="$ctrl.displayTimestamps"
+                label="'Display timestamps'"
+                on-change="($ctrl.handleDisplayTimestampsChange)"
+              ></por-switch-field>
             </div>
           </div>
           <div class="form-group">
diff --git a/app/docker/components/log-viewer/logViewerController.js b/app/docker/components/log-viewer/logViewerController.js
index 22cc69911..4cee6ec92 100644
--- a/app/docker/components/log-viewer/logViewerController.js
+++ b/app/docker/components/log-viewer/logViewerController.js
@@ -3,10 +3,11 @@ import _ from 'lodash-es';
 import { NEW_LINE_BREAKER } from '@/constants';
 
 angular.module('portainer.docker').controller('LogViewerController', [
+  '$scope',
   'clipboard',
   'Blob',
   'FileSaver',
-  function (clipboard, Blob, FileSaver) {
+  function ($scope, clipboard, Blob, FileSaver) {
     this.state = {
       availableSinceDatetime: [
         { desc: 'Last day', value: moment().subtract(1, 'days').format() },
@@ -23,6 +24,30 @@ angular.module('portainer.docker').controller('LogViewerController', [
       selectedLines: [],
     };
 
+    this.handleLogsCollectionChange = handleLogsCollectionChange.bind(this);
+    this.handleLogsWrapLinesChange = handleLogsWrapLinesChange.bind(this);
+    this.handleDisplayTimestampsChange = handleDisplayTimestampsChange.bind(this);
+
+    function handleLogsCollectionChange(enabled) {
+      $scope.$evalAsync(() => {
+        this.state.logCollection = enabled;
+        this.state.autoScroll = enabled;
+        this.logCollectionChange(enabled);
+      });
+    }
+
+    function handleLogsWrapLinesChange(enabled) {
+      $scope.$evalAsync(() => {
+        this.state.wrapLines = enabled;
+      });
+    }
+
+    function handleDisplayTimestampsChange(enabled) {
+      $scope.$evalAsync(() => {
+        this.displayTimestamps = enabled;
+      });
+    }
+
     this.copy = function () {
       clipboard.copyText(this.state.filteredLogs.map((log) => log.line).join(NEW_LINE_BREAKER));
       $('#refreshRateChange').show();