diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss
index 914b29108..7a5353c32 100644
--- a/frontend/src/app/main/ui/ds/colors.scss
+++ b/frontend/src/app/main/ui/ds/colors.scss
@@ -84,6 +84,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-secondary: #{$blue-teal-700};
 
   --color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)};
+  --color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)};
   --color-overlay-default: #{$white-60};
   --color-overlay-onboarding: #{$white-90};
   --color-canvas: #{$grayish-red};
@@ -116,6 +117,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-secondary: #{$grayish-blue-500};
 
   --color-shadow: #{color.change($black, $alpha: 0.6)};
+  --color-shadow-dark: #{color.change($black, $alpha: 0.6)};
   --color-overlay-default: #{$gray-950-60};
   --color-overlay-onboarding: #{$gray-950-90};
   --color-canvas: #{$grayish-red};
diff --git a/frontend/src/app/main/ui/ds/elevations.scss b/frontend/src/app/main/ui/ds/elevations.scss
index 477b0ca2f..dfc28f880 100644
--- a/frontend/src/app/main/ui/ds/elevations.scss
+++ b/frontend/src/app/main/ui/ds/elevations.scss
@@ -5,8 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 $elevation-shadow: 0 0 10px 0 var(--color-shadow);
+$elevation-shadow-dark: 0 0 10px 0 var(--color-shadow-dark);
 
 :global(.light),
 :global(.default) {
   --elevation-shadow: #{$elevation-shadow};
+  --elevation-shadow-dark: #{$elevation-shadow-dark};
 }
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c04c2de8c..74986a16c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -356,5 +356,5 @@
              :on-pointer-down on-pointer-down-pages
              :on-lost-pointer-capture on-lost-pointer-capture-pages
              :on-pointer-move on-pointer-move-pages}]
-      [:& tokens-tab]
-      [:& import-export-button]]]))
+      [:& tokens-tab]]
+      [:& import-export-button]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index d3b0c6c23..9d9543815 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -10,10 +10,10 @@
 
 .sidebar-wrapper {
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto 1fr auto;
   // Overflow on the bottom section can't be done without hardcoded values for the height
   // This has to be changed from the wrapping sidebar styles
-  height: calc(100vh - #{$s-84});
+  height: calc(100vh - #{$s-92});
   overflow: hidden;
 }
 
@@ -114,9 +114,14 @@
 }
 
 .import-export-button-wrapper {
-  position: absolute;
-  bottom: $s-12;
-  right: $s-12;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  justify-content: end;
+  padding: $s-16;
+  margin-top: $s-8;
+  background-color: var(--color-background-primary);
+  box-shadow: var(--elevation-shadow-dark);
 }
 
 .import-export-button {