diff --git a/CHANGES.md b/CHANGES.md
index c713129b5..04cbee7f2 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -24,6 +24,7 @@
 
 ### :sparkles: New features
 
+- Add some cosmetic changes in viewer mode [Taiga #3688](https://tree.taiga.io/project/penpot/us/3688)
 - Allow for nested and rotated boards inside other boards and groups [Taiga #2874](https://tree.taiga.io/project/penpot/us/2874?milestone=319982)
 - View mode improvements to enable access and use in different conditions [Taiga #3023](https://tree.taiga.io/project/penpot/us/3023)
 - Improved share link options. Now you can allow non-team members to comment and/or inspect [Taiga #3056] (https://tree.taiga.io/project/penpot/us/3056)
diff --git a/frontend/resources/styles/main/layouts/handoff.scss b/frontend/resources/styles/main/layouts/handoff.scss
index 3f8b6f151..ce61123d2 100644
--- a/frontend/resources/styles/main/layouts/handoff.scss
+++ b/frontend/resources/styles/main/layouts/handoff.scss
@@ -19,14 +19,35 @@ $width-settings-bar: 256px;
   }
 }
 
+.fullscreen.handoff-layout.force-visible {
+  display: grid;
+  grid-template-rows: 1fr;
+
+  & .viewer-header {
+    position: fixed;
+    top: 0;
+    transition: top 400ms ease 300ms;
+    margin-bottom: 0;
+    z-index: 2;
+  }
+
+  & .viewer-bottom {
+    position: fixed;
+    bottom: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+  }
+}
+
 .fullscreen.handoff-layout:not(.force-visible) {
-  .viewer-header {
+  & .viewer-header {
     width: 100%;
     position: fixed;
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
-    z-index: 25;
+    z-index: 2;
+    margin-bottom: 48px;
 
     &::after {
       content: " ";
@@ -43,7 +64,29 @@ $width-settings-bar: 256px;
     transition: top 200ms;
   }
 
-  .viewer-content {
+  & .viewer-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: -48px;
+    left: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+    &::after {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 1rem;
+      left: 0;
+      bottom: 0px;
+    }
+  }
+
+  & .viewer-bottom:hover {
+    bottom: 0px;
+    transition: bottom 200ms;
+  }
+
+  & .viewer-content {
     grid-row: 1 / span 2;
   }
 }
@@ -51,6 +94,7 @@ $width-settings-bar: 256px;
 .handoff-layout {
   .viewer-section {
     flex-wrap: nowrap;
+    margin-top: 0;
     &.fullscreen {
       .settings-bar,
       .settings-bar {
diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss
index 28a817ad7..840c2b559 100644
--- a/frontend/resources/styles/main/layouts/viewer.scss
+++ b/frontend/resources/styles/main/layouts/viewer.scss
@@ -1,4 +1,5 @@
 .viewer-layout {
+  height: 100vh;
   display: grid;
   grid-template-rows: 48px auto;
   grid-template-columns: 1fr;
@@ -15,14 +16,34 @@
   }
 }
 
+.fullscreen.viewer-layout.force-visible {
+  grid-template-rows: 1fr;
+  & .viewer-header {
+    position: fixed;
+    top: 0;
+    transition: top 400ms ease 300ms;
+    margin-bottom: 0;
+    z-index: 2;
+  }
+
+  & .viewer-bottom {
+    position: fixed;
+    bottom: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+  }
+}
+
 .fullscreen.viewer-layout:not(.force-visible) {
+  grid-template-rows: 1fr;
   & .viewer-header {
     width: 100%;
     position: fixed;
     top: -48px;
     left: 0;
     transition: top 400ms ease 300ms;
-    z-index: 1;
+    z-index: 2;
+    margin-bottom: 48px;
     &::after {
       content: " ";
       position: absolute;
@@ -38,6 +59,28 @@
     transition: top 200ms;
   }
 
+  & .viewer-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: -48px;
+    left: 0;
+    transition: bottom 400ms ease 300ms;
+    z-index: 2;
+    &::after {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 1rem;
+      left: 0;
+      bottom: 0px;
+    }
+  }
+
+  & .viewer-bottom:hover {
+    bottom: 0px;
+    transition: bottom 200ms;
+  }
+
   & .viewer-content {
     grid-row: 1 / span 2;
   }
diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss
index 11871eee2..b8b3a5ccc 100644
--- a/frontend/resources/styles/main/partials/viewer-header.scss
+++ b/frontend/resources/styles/main/partials/viewer-header.scss
@@ -6,7 +6,8 @@
   grid-template-columns: 45% 10% 45%;
   height: 48px;
   padding: 0 $size-4 0 55px;
-  position: relative;
+  top: 0;
+  position: absolute;
   justify-content: space-between;
   width: 100vw;
 
diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
index 00a0c14bc..30845460a 100644
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ b/frontend/resources/styles/main/partials/viewer.scss
@@ -1,6 +1,5 @@
 .viewer-content {
   background-color: black;
-
   display: grid;
   grid-template-rows: 232px auto;
   grid-template-columns: 1fr;
@@ -8,19 +7,19 @@
 
 .viewer-section {
   height: calc(100vh - 48px);
-  &.fullscreen {
-    height: 100vh;
-  }
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
-
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: wrap;
-
   overflow: auto;
 
+  &.fullscreen {
+    height: 100vh;
+    margin-top: 0px;
+  }
+
   & .viewer-go-prev,
   & .viewer-go-next {
     position: absolute;
@@ -28,7 +27,7 @@
     display: flex;
     align-items: center;
     width: 53px;
-
+    z-index: 2;
     .arrow {
       display: none;
       align-items: center;
@@ -87,6 +86,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     &.left-bar {
       width: calc(100% - 512px);
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index ced7b3c6a..0ccf2d9bb 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -275,6 +275,19 @@
         interactions-mode
         (:interactions-mode local)
 
+        click-on-screen
+        (mf/use-callback
+         (fn [event]
+           (let [origin (dom/get-target event)
+                 over-section? (dom/class? origin "viewer-section")
+                 layout (dom/get-element "viewer-layout")
+                 has-force? (dom/class? layout "force-visible")]
+
+             (when over-section?
+               (if has-force?
+                 (dom/remove-class! layout "force-visible")
+                 (dom/add-class! layout "force-visible"))))))
+
         on-click
         (mf/use-fn
          (mf/deps section)
@@ -414,17 +427,15 @@
               :handoff-layout (= section :handoff)
               :fullscreen fullscreen?)}
 
-     [:& header/header
-      {:project project
-       :index index
-       :file file
-       :page page
-       :frame frame
-       :permissions permissions
-       :zoom zoom
-       :section section}]
-
      [:div.viewer-content
+      [:& header/header {:project project
+                  :index index
+                  :file file
+                  :page page
+                  :frame frame
+                  :permissions permissions
+                  :zoom zoom
+                  :section section}]
       [:div.thumbnail-close {:on-click #(st/emit! dv/close-thumbnails-panel)
                              :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
       [:& thumbnails-panel {:frames frames
@@ -434,7 +445,8 @@
                             :thumbnail-data (:thumbnails file)}]
       [:section.viewer-section {:id "viewer-section"
                                 :ref viewer-section-ref
-                                :class (if fullscreen? "fullscreen" "")}
+                                :class (if fullscreen? "fullscreen" "")
+                                :on-click click-on-screen}
        (cond
          (empty? frames)
          [:section.empty-state
diff --git a/frontend/src/app/main/ui/viewer/handoff.cljs b/frontend/src/app/main/ui/viewer/handoff.cljs
index 2eb108de6..bb488fdba 100644
--- a/frontend/src/app/main/ui/viewer/handoff.cljs
+++ b/frontend/src/app/main/ui/viewer/handoff.cljs
@@ -22,7 +22,17 @@
   (fn [event]
     (dom/prevent-default event)
     (dom/stop-propagation event)
-    (st/emit! (dv/select-shape (:id frame)))))
+    (st/emit! (dv/select-shape (:id frame)))
+
+    (let [origin (dom/get-target event)
+          over-section? (dom/class? origin "handoff-svg-container")
+          layout (dom/get-element "viewer-layout")
+          has-force? (dom/class? layout "force-visible")]
+
+      (when over-section?
+        (if has-force?
+          (dom/remove-class! layout "force-visible")
+          (dom/add-class! layout "force-visible"))))))
 
 (mf/defc viewport
   [{:keys [local file page frame index viewer-pagination size]}]