diff --git a/.changeset/serious-poems-burn.md b/.changeset/serious-poems-burn.md
new file mode 100644
index 00000000..cd9f8336
--- /dev/null
+++ b/.changeset/serious-poems-burn.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Fixed layout of handle names and live types
diff --git a/.github/workflows/pr-ci.yml b/.github/workflows/pr-ci.yml
index 876506b5..cb9b1ab4 100644
--- a/.github/workflows/pr-ci.yml
+++ b/.github/workflows/pr-ci.yml
@@ -138,7 +138,7 @@ jobs:
         run: yarn run test
 
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: cypress-artifacts
diff --git a/packages/graph-editor/src/components/flow/handles.module.css b/packages/graph-editor/src/components/flow/handles.module.css
index 588c9d61..5a401ceb 100644
--- a/packages/graph-editor/src/components/flow/handles.module.css
+++ b/packages/graph-editor/src/components/flow/handles.module.css
@@ -3,12 +3,18 @@
   display: flex;
   align-items: center;
   padding: var(--component-spacing-2xs) var(--component-spacing-md);
+  margin-bottom: var(--component-spacing-xs);
+
+  &:not(:has(.handleText, span)) {
+    margin-bottom: var(--component-spacing-lg);
+  }
 
   &.collapsed {
     height: 0;
     overflow: hidden;
     position: absolute;
     top: 0;
+    margin-bottom: 0;
   }
 
   &.isAnchor {
@@ -34,7 +40,7 @@
 
 .handleHolder .rawHandle {
   --handle-border-width: var(--component-border-width-lg);
-  --handle-core-size: var(--size-50);
+  --handle-core-size: var(--size-75);
 
   background-color: var(--colors-graphBg);
   position: absolute;
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css b/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css
index 7545abe0..33e70fcc 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.module.css
@@ -5,10 +5,10 @@
 
 .inlineTypeLabel {
   position: absolute;
-  background: var(--color-neutral-surface-default-idle-bg);
+  background: rgba(from var(--color-neutral-surface-default-idle-bg) r g b / 0.65);
   color: var(--color-neutral-surface-default-idle-fg-default);
-  padding: var(--component-spacing-2xs);
-  font: var(--font-code-xs);
+  padding: var(--component-spacing-xs) var(--component-spacing-sm) var(--component-spacing-2xs) var(--component-spacing-sm);
+  font: var(--font-code-sm);
   border-radius: var(--component-radii-sm);
   text-transform: uppercase;
 
@@ -21,7 +21,10 @@
   }
 }
 
-
+:global(.ts-theme-dark) .inlineTypeLabel {
+    background: rgba(from var(--color-neutral-surface-default-idle-bg) r g b / 0.8);
+    font-weight: 800;
+}
 
 .colorSwatch {
   width: 16px;
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
index 3cf7ee22..f392b6d4 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -395,7 +395,7 @@ const InputHandle = observer(
           >
             <span
               style={{
-                font: 'var(--font-code-sm)',
+                font: 'var(--font-code-lg)',
                 color: 'var(--color-neutral-1500)',
               }}
             >