diff --git a/app/gui2/src/assets/base.css b/app/gui2/src/assets/base.css
index dea5820e6a9d..d7e508f94834 100644
--- a/app/gui2/src/assets/base.css
+++ b/app/gui2/src/assets/base.css
@@ -1,3 +1,6 @@
+/* M PLUS 1 font import. */
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500;600&display=swap');
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;
@@ -62,7 +65,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
 }
 
 body {
@@ -73,22 +75,10 @@ body {
   transition:
     color 0.5s,
     background-color 0.5s;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: 'M PLUS 1', sans-serif;
   font-size: 11.5px;
   font-weight: 500;
-  line-height: 174.5%;
+  line-height: 20px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/app/gui2/src/assets/main.css b/app/gui2/src/assets/main.css
index c106dd0f2e45..e846f2cb0e8b 100644
--- a/app/gui2/src/assets/main.css
+++ b/app/gui2/src/assets/main.css
@@ -8,6 +8,6 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  font-weight: normal;
+  font-weight: 500;
   cursor: default;
 }
diff --git a/app/gui2/src/components/ExecutionModeSelector.vue b/app/gui2/src/components/ExecutionModeSelector.vue
index 5bc479d30cce..8df0bb05c1c2 100644
--- a/app/gui2/src/components/ExecutionModeSelector.vue
+++ b/app/gui2/src/components/ExecutionModeSelector.vue
@@ -43,25 +43,28 @@ useDocumentEvent('click', onDocumentClick)
         "
       />
     </div>
-    <div v-if="isDropdownOpen" class="execution-mode-dropdown">
-      <template v-for="otherMode in modes" :key="otherMode">
-        <span
-          v-if="modelValue !== otherMode"
-          class="button"
-          @click="emit('update:modelValue', otherMode)"
-          v-text="otherMode"
-        ></span>
-      </template>
-    </div>
+    <Transition name="dropdown">
+      <div v-if="isDropdownOpen" class="execution-mode-dropdown">
+        <template v-for="otherMode in modes" :key="otherMode">
+          <span
+            v-if="modelValue !== otherMode"
+            class="button"
+            @click="emit('update:modelValue', otherMode)"
+            v-text="otherMode"
+          ></span>
+        </template>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
 span {
   display: inline-block;
-  height: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  height: 24px;
+  padding: 1px 0px;
+  vertical-align: middle;
+  overflow: clip;
 }
 
 .ExecutionModeSelector {
@@ -72,10 +75,12 @@ span {
 .execution-mode-button {
   display: flex;
   align-items: center;
+  height: 24px;
   border-radius: var(--radius-full);
   background: #64b526;
 
   > .execution-mode {
+    font-weight: 600;
     padding: 0 8px;
   }
 
@@ -93,6 +98,8 @@ span {
 }
 
 .execution-mode-dropdown {
+  display: flex;
+  flex-flow: column;
   position: absolute;
   background: #64b526;
   border-radius: 10px;
@@ -112,4 +119,27 @@ span {
     background: var(--color-dim);
   }
 }
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.1s;
+
+  > span {
+    transition: all 0.1s;
+  }
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow: hidden;
+
+  > span {
+    padding-top: 0;
+    padding-bottom: 0;
+    max-height: 0;
+  }
+}
 </style>
diff --git a/app/gui2/src/components/GraphNode.vue b/app/gui2/src/components/GraphNode.vue
index d53db50041ee..4708d799c170 100644
--- a/app/gui2/src/components/GraphNode.vue
+++ b/app/gui2/src/components/GraphNode.vue
@@ -392,7 +392,7 @@ function updatePreprocessor(module: string, method: string, ...args: string[]) {
       @update:type="visualizationType = $event"
     />
     <div class="node" v-on="dragPointer.events" @click.stop="onExpressionClick">
-      <SvgIcon class="icon" name="number_input" @pointerdown="handleClick"></SvgIcon>
+      <SvgIcon class="icon grab-handle" name="number_input" @pointerdown="handleClick"></SvgIcon>
       <div
         ref="editableRootNode"
         class="editable"
@@ -458,7 +458,7 @@ function updatePreprocessor(module: string, method: string, ...args: string[]) {
   gap: 4px;
 }
 
-.icon {
+.grab-handle {
   color: white;
   cursor: grab;
   margin-right: 10px;
diff --git a/app/gui2/src/components/NavBreadcrumb.vue b/app/gui2/src/components/NavBreadcrumb.vue
index a3be3a29c169..089589d3a68b 100644
--- a/app/gui2/src/components/NavBreadcrumb.vue
+++ b/app/gui2/src/components/NavBreadcrumb.vue
@@ -10,9 +10,8 @@ const emit = defineEmits<{ click: [] }>()
 <style scoped>
 span {
   display: inline-block;
-  height: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  height: 24px;
+  padding: 1px 0px;
 }
 
 .NavBreadcrumb {
diff --git a/app/gui2/src/components/ProjectTitle.vue b/app/gui2/src/components/ProjectTitle.vue
index 996c614a5926..fd34e317e34a 100644
--- a/app/gui2/src/components/ProjectTitle.vue
+++ b/app/gui2/src/components/ProjectTitle.vue
@@ -32,9 +32,8 @@ const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
 
   > .title {
     display: inline-block;
-    height: 20px;
-    padding-top: 1px;
-    padding-bottom: 1px;
+    height: 24px;
+    padding: 1px 0px;
   }
 }
 </style>