diff --git a/website/src/components/HeroFlow/ColorPickerNode.js b/website/src/components/HeroFlow/ColorPickerNode.js
index a92c6cae..ea28b6ac 100644
--- a/website/src/components/HeroFlow/ColorPickerNode.js
+++ b/website/src/components/HeroFlow/ColorPickerNode.js
@@ -8,7 +8,6 @@ const ColorPickerNodeWrapper = styled.div`
   padding: 10px;
   background: white;
   border: 1px solid ${getThemeColor('violet')};
-  font-size: 12px;
   border-radius: 4px;
   box-shadow: ${(p) =>
     p.selected ? `0 0 0 0.25px ${p.theme.colors.violet}` : 'none'};
diff --git a/website/src/components/HeroFlow/index.js b/website/src/components/HeroFlow/index.js
index b86109ad..685ab5cd 100644
--- a/website/src/components/HeroFlow/index.js
+++ b/website/src/components/HeroFlow/index.js
@@ -14,9 +14,9 @@ const getOffset = () => {
   if (isSmallScreen) {
     return 0;
   } else if (windowWidth < 1200) {
-    return 405;
+    return 425;
   } else {
-    return (windowWidth - 1200) / 2 + 450;
+    return (windowWidth - 1200) / 2 + 500;
   }
 };
 
@@ -115,6 +115,7 @@ export default () => {
         sourcePosition: 'right',
         position: { x: getColorNodeX(), y: isSmallScreen ? 350 : 180 },
         style: {
+          width: 200,
           background: 'rgb(105, 100, 165)',
           color: 'white',
           textShadow:
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 55a34d23..60a1d1f4 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -44,7 +44,10 @@
 .react-flow {
   font-family: 'jetbrains-mono';
   text-transform: uppercase;
-  font-size: 24px;
+}
+
+.react-flow .react-flow__node {
+  font-size: 14px;
 }
 
 .react-flow__controls-button {