diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index bd5352760..ea9ae9234 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -25,6 +25,8 @@
   --color-base-20: #{colors.$grey-300};
   --color-black-10: #{colors.$white-200};
   --color-border-line: #{colors.$white-500};
+  --color-arrow-primary: #{colors.$black-900};
+  --color-arrow-secondary: #{colors.$black-0};
 
   // Experiment tracking colors below
   --color-exp-tracking-bg: #{colors.$white-0};
@@ -67,6 +69,8 @@
   --color-run-list-hover: #{colors.$slate-0};
   --color-base-20: #{colors.$grey-800};
   --color-black-10: #{colors.$slate-700};
+  --color-arrow-primary: #{colors.$white-0};
+  --color-arrow-secondary: #{colors.$black-300};
 
   // Experiment tracking colors below
   --color-exp-tracking-bg: #{colors.$slate-900};
diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js
index 925fb6013..61475e010 100644
--- a/src/components/flowchart/flowchart.js
+++ b/src/components/flowchart/flowchart.js
@@ -479,7 +479,8 @@ export class FlowChart extends Component {
    * Zoom and scale to fit graph and any selected node in view
    */
   resetView(preventZoom) {
-    const { chartSize, graphSize, clickedNode, nodes } = this.props;
+    const { chartSize, graphSize, clickedNode, nodes, orientation } =
+      this.props;
     const { width: chartWidth, height: chartHeight } = chartSize;
     const { width: graphWidth, height: graphHeight } = graphSize;
 
@@ -497,6 +498,7 @@ export class FlowChart extends Component {
       : null;
 
     // Find a transform that fits everything in view
+
     const transform = viewTransformToFit({
       offset,
       focus,
@@ -504,15 +506,17 @@ export class FlowChart extends Component {
       viewHeight: chartHeight,
       objectWidth: graphWidth,
       objectHeight: graphHeight,
+      sidebarWidth: chartSize.sidebarWidth,
       minScaleX: 0.05,
       minScaleFocus: this.props.visibleMetaSidebar
         ? this.props.chartZoom.scale
         : 0.1,
       focusOffset: 0,
       preventZoom,
+      orientation,
     });
 
-    if (this.props.orientation === 'horizontal') {
+    if (orientation === 'horizontal') {
       transform.x = -offset.x; // Ensure the graph starts after sidebar
     }
 
diff --git a/src/components/icons/left-right.js b/src/components/icons/left-right.js
index 15bb053f2..2c84ab536 100644
--- a/src/components/icons/left-right.js
+++ b/src/components/icons/left-right.js
@@ -1,14 +1,15 @@
 import React from 'react';
+import './orientation.scss';
 
 const LeftRightIcon = ({ className }) => (
-  <svg className={className} viewBox="0 0 24 24">
+  <svg className="icon-orientation horizontal" viewBox="0 0 24 24">
     <path
+      className="icon-orientation-arrow__vertical"
       d="M7.84676 17.4288L7.84837 7.84841V4.93823L4.93857 4.93861L4.93696 17.4288L3.05754 15.549L1 17.6066L6.39347 23L11.7869 17.6066L9.7294 15.549L7.84676 17.4288Z"
-      fill="#636363"
     />
     <path
+      className="icon-orientation-arrow__horizontal"
       d="M23 6.39347L17.6066 1L15.549 3.05754L17.4288 4.93696L4.93857 4.93861L4.93823 7.84837L7.84837 7.84841L17.4288 7.84676L15.549 9.7294L17.6066 11.7869L23 6.39347Z"
-      fill="white"
     />
   </svg>
 );
diff --git a/src/components/icons/orientation.scss b/src/components/icons/orientation.scss
new file mode 100644
index 000000000..23770f749
--- /dev/null
+++ b/src/components/icons/orientation.scss
@@ -0,0 +1,40 @@
+@use '../../styles/variables' as variables;
+
+.icon-orientation {
+  transition: fill 300ms ease, opacity 300ms ease;
+  opacity: 0.7; /* Default opacity */
+}
+
+/* Vertical orientation */
+.icon-orientation.vertical .icon-orientation-arrow__vertical {
+  fill: var(--color-arrow-primary);
+}
+
+.icon-orientation.vertical .icon-orientation-arrow__horizontal {
+  fill: var(--color-arrow-secondary);
+}
+
+/* Horizontal orientation */
+.icon-orientation.horizontal .icon-orientation-arrow__vertical {
+  fill: var(--color-arrow-secondary);
+}
+
+.icon-orientation.horizontal .icon-orientation-arrow__horizontal {
+  fill: var(--color-arrow-primary);
+}
+
+/* Hover state */
+.icon-orientation:hover {
+  opacity: 1; /* Full visibility */
+}
+
+/* Click (active) state */
+.icon-orientation:active {
+  opacity: 0.85; /* Slight dimming to show click feedback */
+}
+
+/* Disabled state */
+.icon-orientation[disabled] {
+  opacity: 0.2;
+  pointer-events: none; /* Prevent interaction */
+}
diff --git a/src/components/icons/top-bottom.js b/src/components/icons/top-bottom.js
index c8fd85224..bc857757d 100644
--- a/src/components/icons/top-bottom.js
+++ b/src/components/icons/top-bottom.js
@@ -1,14 +1,15 @@
 import React from 'react';
+import './orientation.scss';
 
 const TopBottomIcon = ({ className }) => (
-  <svg className={className} viewBox="0 0 24 24">
+  <svg className="icon-orientation vertical" viewBox="0 0 24 24">
     <path
+      className="icon-orientation-arrow__horizontal"
       d="M23 6.39347L17.6066 1L15.549 3.05754L17.4288 4.93696L4.93861 4.93857L4.93823 7.84837H7.84841L17.4288 7.84676L15.549 9.7294L17.6066 11.7869L23 6.39347Z"
-      fill="#636363"
     />
     <path
+      className="icon-orientation-arrow__vertical"
       d="M7.84676 17.4288L7.84841 7.84837L7.84837 4.93823L4.93861 4.93857L4.93696 17.4288L3.05754 15.549L1 17.6066L6.39347 23L11.7869 17.6066L9.7294 15.549L7.84676 17.4288Z"
-      fill="white"
     />
   </svg>
 );