diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 8a9063087a036ef92232a8173dd8c7bd7af5b026..48fa3634333221e1af42c0b72dfeb7923a7f3520 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -250,7 +250,7 @@ export function Component(props: Props) {
                         </Button>
                     </Tooltip>
                     <div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
-                        <Tooltip content={<Text id="app.special.copy" />}>
+                        <Tooltip content={<Text id="app.special.copy" />}> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
                             {JSON.stringify(theme)}
                         </Tooltip>
                     </div>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index f8e9689c1d185a652c96083df77ac2f985abbdfc..8089c6bdd10408a110dc9e61486350013ba9ea54 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -252,11 +252,13 @@
     .actions {
         gap: 8px;
         display: flex;
-        margin: 8px 0;
+        margin: 18px 0 8px 0;
 
         .code {
             cursor: pointer;
-
+            display: flex;
+            align-items: center;
+            font-size: .875rem;
             min-width: 0;
             flex-grow: 1;
             padding: 8px;
@@ -278,6 +280,7 @@
         display: grid;
         column-gap: 16px;
         grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+        margin-bottom: 20px;
 
         .entry {
             padding: 12px;