diff --git a/site/src/components/ShapeBuilder/shapeBuilder.styles.js b/site/src/components/ShapeBuilder/shapeBuilder.styles.js
index 31e0cbe..fc83317 100644
--- a/site/src/components/ShapeBuilder/shapeBuilder.styles.js
+++ b/site/src/components/ShapeBuilder/shapeBuilder.styles.js
@@ -111,6 +111,12 @@ export const OutputBox = styled.div`
     resize: none;
     font-family: monospace;
     font-size: 0.95rem;
+    transition : border-color 0.3s ease;
+
+    &:focus {
+      outline:none;
+      border: 1px solid ${({ theme }) => theme.primary || "#009684"};
+    }
   }
 
   .error {