diff --git a/main/survey/app/Controllers/BodyController.php b/main/survey/app/Controllers/BodyController.php
index 38bb26142..ac6d321e9 100644
--- a/main/survey/app/Controllers/BodyController.php
+++ b/main/survey/app/Controllers/BodyController.php
@@ -2076,6 +2076,16 @@ class BodyController extends Controller
             echo '<div id="preview-window">';
 
 
+
+            echo '<div id="preview_switch">';
+
+            // Preklop na celostranski preview
+            echo '<div id="nacina">';
+            echo '<span class="bold">'.self::$lang['srv_mode'] . ':</span>';
+			echo '<span id="normalni" class="'.(get('displayAllPages') ? 'nonactive' : 'active').'"><a href="' . SurveyInfo::getSurveyLink() . Header::getSurveyParams(false, null, array('pages')) . '" title="' . self::$lang['srv_normal_x'] . '">' . self::$lang['srv_normal'] . '</a></span>';
+			echo '<span id="celostranski" class="'.(get('displayAllPages') ? 'active' : 'nonactive').'"><a href="' . SurveyInfo::getSurveyLink() . Header::getSurveyParams(false, array('pages' => 'all', 'mobile' => '0')) . '" title="' . self::$lang['srv_scrolling_x'] . '">' . self::$lang['srv_scrolling'] . '</a></span>';	
+            echo '</div>';
+            
             // Gump za odprtje/zaprtje okna
             echo '<div id="preview_open" '.($_GET['testdata'] == 'on' ? ' class="testdata"' : '').'>';
             
@@ -2083,14 +2093,6 @@ class BodyController extends Controller
             echo '<a href="#" onclick="preview_popup_close(); return false;" class="preview_icon_close"><span class="faicon dropup_blue"></span></a>';
 
             echo '</div>';
-
-
-            // Preklop na celostranski preview
-            echo '<div id="preview_switch">';
-
-            echo '<span class="bold">'.self::$lang['srv_mode'] . ':</span>';
-			echo '<span class="'.(get('displayAllPages') ? 'nonactive' : 'active').'"><a href="' . SurveyInfo::getSurveyLink() . Header::getSurveyParams(false, null, array('pages')) . '" title="' . self::$lang['srv_normal_x'] . '">' . self::$lang['srv_normal'] . '</a></span>';
-			echo '<span class="'.(get('displayAllPages') ? 'active' : 'nonactive').'"><a href="' . SurveyInfo::getSurveyLink() . Header::getSurveyParams(false, array('pages' => 'all', 'mobile' => '0')) . '" title="' . self::$lang['srv_scrolling_x'] . '">' . self::$lang['srv_scrolling'] . '</a></span>';	
             
             echo '</div>';            
 
diff --git a/main/survey/js/script.js b/main/survey/js/script.js
index db0ff2df0..ecb220203 100644
--- a/main/survey/js/script.js
+++ b/main/survey/js/script.js
@@ -1247,7 +1247,7 @@ function return_edit_send (site_url, lang_id) {
 
 function preview_popup_close () {
 	
-    $('#preview-holder, #preview_switch').fadeOut('medium');
+    $('#preview-holder, #nacina').fadeOut('medium');
 
     $('#preview-window').addClass('closed');
 
@@ -1259,7 +1259,7 @@ function preview_popup_close () {
 
 function preview_popup_open () {
 	
-    $('#preview-holder, #preview_switch').fadeIn('medium');
+    $('#preview-holder, #nacina').fadeIn('medium');
 
     $('#preview-window').removeClass('closed');
 
diff --git a/public/css/main.css b/public/css/main.css
index 666a8ddd1..a6741706d 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -7295,16 +7295,14 @@ button.ui-datepicker-trigger::before {
   position: fixed;
   top: 45px;
   right: 10px;
-  width: 270px;
+  width: 265px;
   min-height: 32px;
-  font-size: 11px;
+  font-size: 12px;
   background-color: white;
-  border: 2px #1e88e5 solid;
-  border-radius: 5px;
+  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
 }
 #preview-window.closed {
-  top: 47px;
-  right: 12px;
   background-color: transparent;
   border: 0;
 }
@@ -7358,30 +7356,54 @@ button.ui-datepicker-trigger::before {
   content: "\f013";
 }
 #preview-window #preview_open {
-  position: absolute;
   box-sizing: border-box;
-  width: 30px;
-  top: 6px;
-  right: 8px;
   text-align: right;
+  margin-left: auto;
 }
 #preview-window #preview_switch {
   font-family: Open Sans, Arial, Sans-Serif !important;
   box-sizing: border-box;
   width: 100%;
-  padding: 8px 15px;
+  padding: 21px 16px;
   font-size: 12px;
   border-bottom: 1px #1e88e5 solid;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
-#preview-window #preview_switch .active a {
-  padding-left: 15px;
-  font-weight: 600;
-  color: #ffa608;
+#preview-window #preview_switch #nacina span.bold {
+  margin-right: 8px;
 }
-#preview-window #preview_switch .nonactive a {
-  padding-left: 15px;
-  font-weight: 600;
-  color: #1e88e5;
+#preview-window #preview_switch #nacina #normalni,
+#preview-window #preview_switch #nacina #celostranski {
+  padding: 4px 8px;
+  border: 1px solid #E5E5E5;
+}
+#preview-window #preview_switch #nacina #normalni.active,
+#preview-window #preview_switch #nacina #celostranski.active {
+  background: #EEF7FF;
+  color: #1E88E5;
+  border-color: #1E88E5;
+}
+#preview-window #preview_switch #nacina #normalni a,
+#preview-window #preview_switch #nacina #celostranski a {
+  color: inherit;
+}
+#preview-window #preview_switch #nacina #normalni {
+  border-radius: 2px 0 0 2px;
+  border-right: none;
+}
+#preview-window #preview_switch #nacina #normalni.active {
+  border-right: 1px solid;
+}
+#preview-window #preview_switch #nacina #celostranski {
+  border-radius: 0 2px 2px 0;
+}
+#preview-window #preview_switch #nacina #celostranski.active {
+  border-color: #1E88E5;
+}
+#preview-window #preview_switch #nacina #celostranski.nonactive {
+  border-left: none;
 }
 #preview-window #preview-holder {
   font-family: Open Sans, Arial, Sans-Serif !important;
@@ -7618,6 +7640,9 @@ span.faicon.empty {
   border-color: #1E88E5;
   background-color: #EEF7FF;
 }
+#comments_bottom_line a {
+  margin-left: auto;
+}
 #comments_bottom_line a #comment_settings {
   display: flex;
   flex-direction: row;
diff --git a/resources/sass/main/main/admin.scss b/resources/sass/main/main/admin.scss
index 7ff48b1bf..4ad78eb29 100644
--- a/resources/sass/main/main/admin.scss
+++ b/resources/sass/main/main/admin.scss
@@ -122,19 +122,17 @@
     top: 45px;
     right: 10px;
 
-    width: 270px;
+    width: 265px;
     min-height: 32px;
 
-    font-size: 11px;
+    font-size: 12px;
 
     background-color: white;
 
-    border: 2px #1e88e5 solid;
-    border-radius: 5px;
+    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.12);
+    border-radius: 2px;
 
     &.closed{
-        top: 47px;
-        right: 12px;
 
         background-color: transparent;
         border: 0;
@@ -195,14 +193,11 @@
 
 
     #preview_open {
-        position: absolute;
         box-sizing: border-box;
 
-        width: 30px;
-        top: 6px;
-        right: 8px;
+        text-align: right;
         
-        text-align: right;   
+        margin-left: auto;
     }
     
     #preview_switch {
@@ -211,23 +206,59 @@
         box-sizing: border-box;
         width: 100%;
     
-        padding: 8px 15px;
+        padding: 21px 16px;
     
         font-size: 12px;
     
         border-bottom: 1px #1e88e5 solid;
+
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between;
     
-        .active a{
-            padding-left: 15px;
+        #nacina {
+
+            span.bold {
+                margin-right: 8px;
+            }
             
-            font-weight: 600;
-            color: #ffa608;
-        }
-        .nonactive a{
-            padding-left: 15px;
-            
-            font-weight: 600;
-            color: #1e88e5;
+            #normalni,
+            #celostranski {
+                padding: 4px 8px;
+                border: 1px solid #E5E5E5;
+                &.active{
+                    background: #EEF7FF;
+                    color: #1E88E5;
+                    border-color: #1E88E5;
+                }
+
+                a {
+                    color: inherit;
+                }
+            }
+
+
+            #normalni{
+                border-radius: 2px 0 0 2px;
+                border-right: none;
+
+                &.active{
+                    border-right: 1px solid;
+                }
+            }
+
+            #celostranski{
+                border-radius: 0 2px 2px 0;
+
+                &.active{
+                    border-color: #1E88E5;
+                }
+
+                &.nonactive {
+                    border-left: none;
+                }
+
+            }
         }
     }
 
diff --git a/resources/sass/main/main/test_survey_comments.scss b/resources/sass/main/main/test_survey_comments.scss
index 2d0756724..f6da9f8c4 100644
--- a/resources/sass/main/main/test_survey_comments.scss
+++ b/resources/sass/main/main/test_survey_comments.scss
@@ -102,6 +102,8 @@ $status-blue: #EAF9FE;
                 }
             }
         }
+
+        margin-left: auto;
     }
 }