diff --git a/src/components/CodeMirror.jsx b/src/components/CodeMirror.jsx
index 1dcb07a..6167aa6 100644
--- a/src/components/CodeMirror.jsx
+++ b/src/components/CodeMirror.jsx
@@ -9,12 +9,11 @@ import { customHighlighter } from "../extensions/customHighlights";
 import { AddSuggestionBtn, suggestionCompartment } from "../extensions/suggestions";
 import editIcon from "../icons/edit.svg";
 import { MystState } from "../mystState";
-
 const CodeEditor = styled.div`
   border-radius: var(--border-radius);
   background: var(--gray-200);
   font-family: monospace;
-  font-size: 0.875rem;
+  font-size: 14px;
   resize: none;
   border: 0;
   padding: 20px;
@@ -65,8 +64,8 @@ const CodeEditor = styled.div`
   }
 
   .cm-ySelectionInfo {
-    font-size: 0.6rem;
-    padding: 0.25rem 0.5rem !important;
+    font-size: 10px;
+    padding: 4px 8px !important;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 96e30ff..e3245d6 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -118,10 +118,10 @@ const Preview = styled.div`
 
     &.admonition {
       border: var(--border-2) solid var(--green-500);
-      margin-bottom: 1rem;
+      margin-bottom: 16px;
 
       .admonition {
-        margin: 0rem 1.4rem 0.9rem 1.4rem;
+        margin: 0 22px 14px 22px;
       }
 
       & > header,
@@ -140,7 +140,7 @@ const Preview = styled.div`
 
     &[class="admonition"] {
       .admonition {
-        margin-top: 0.9rem;
+        margin-top: 14px;
       }
     }
 
@@ -278,7 +278,7 @@ const Preview = styled.div`
     border-left: 5px solid var(--green-500);
     margin-left: 0;
     margin-top: 0;
-    padding-left: 0.75rem;
+    padding-left: 12px;
   }
 
   table {
diff --git a/src/myst-git/MystEditorGit.jsx b/src/myst-git/MystEditorGit.jsx
index 3971237..55e8575 100644
--- a/src/myst-git/MystEditorGit.jsx
+++ b/src/myst-git/MystEditorGit.jsx
@@ -30,8 +30,8 @@ const GitSidebar = styled.div`
   label {
     display: block;
     color: white;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: 24px;
+    margin-bottom: 12px;
     font-weight: 600;
     font-size: 14px;
   }
@@ -43,8 +43,8 @@ const ChangeHistory = styled.div`
   width: 100%;
 
   p:first-child {
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
+    margin-top: 24px;
+    margin-bottom: 12px;
     font-weight: 600;
     font-size: 14px;
   }
@@ -52,7 +52,7 @@ const ChangeHistory = styled.div`
   .history-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 24px;
     overflow-y: auto;
     scrollbar-width: thin;
   }
@@ -65,10 +65,10 @@ const ChangeHistory = styled.div`
     font-weight: 600;
     display: flex;
     text-align: left;
-    padding: 0.25rem;
+    padding: 6px;
     border-radius: var(--border-radius);
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 12px;
 
     &:hover {
       background: var(--icon-selected);
diff --git a/src/myst-git/Select.jsx b/src/myst-git/Select.jsx
index 1bc6031..db63eeb 100644
--- a/src/myst-git/Select.jsx
+++ b/src/myst-git/Select.jsx
@@ -80,8 +80,8 @@ const OptionList = styled.ul`
   padding: 0;
   width: 100%;
   margin: 0;
-  margin-top: 0.5rem;
-  max-height: 10rem;
+  margin-top: 12px;
+  max-height: 240px;
   overflow-y: auto;
   scrollbar-width: thin;
   overscroll-behavior: contain;
@@ -91,7 +91,7 @@ const OptionList = styled.ul`
     width: 100%;
     cursor: pointer;
     border-radius: var(--border-radius);
-    height: 2rem;
+    height: 48px;
     padding: 0 5px;
     display: flex;
     align-items: center;