diff --git a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
index 36ca9a968..7b64b1bf5 100644
--- a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
+++ b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
@@ -118,13 +118,36 @@ const demos: PreviewProps[] = [
     title: 'Layout.ScrollContainer',
     description:
       'Use this component to create an area that can be scrolled. The scrollable area will automatically consume all available space. ScrollContainer accepts all properties that Container accepts as well. Padding will be applied to the child rather than the parent.',
-    props: [],
+    props: [
+      [
+        'horizontal / vertical',
+        'boolean',
+        'specifies in which directions the container should scroll. If none is specified the container will scroll in both directions',
+      ],
+    ],
     demos: {
       'Basic usage': (
         <Layout.ScrollContainer style={{height: 100}}>
           {largeChild}
         </Layout.ScrollContainer>
       ),
+      'ScrollContainer + Vertical for vertical scroll only': (
+        <Layout.ScrollContainer
+          vertical
+          style={{
+            height: 100,
+            width: 100,
+            border: `2px solid ${theme.primaryColor}`,
+          }}>
+          <Layout.Vertical>
+            <Text ellipsis>
+              This text is truncated because it is too long and scroll is
+              vertical only...
+            </Text>
+            {largeChild}
+          </Layout.Vertical>
+        </Layout.ScrollContainer>
+      ),
     },
   },
   {
diff --git a/desktop/app/src/ui/components/Layout.tsx b/desktop/app/src/ui/components/Layout.tsx
index bb2a969b1..2d033cedf 100644
--- a/desktop/app/src/ui/components/Layout.tsx
+++ b/desktop/app/src/ui/components/Layout.tsx
@@ -64,28 +64,41 @@ const Container = styled.div<ContainerProps>(
   }),
 );
 
-const ScrollParent = styled.div({
-  boxSizing: 'border-box',
+const ScrollParent = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
   flex: 1,
+  boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'auto',
-});
+  overflowX: axis === 'y' ? 'hidden' : 'auto',
+  overflowY: axis === 'x' ? 'hidden' : 'auto',
+}));
 
-const ScrollChild = styled.div({
+const ScrollChild = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
   position: 'absolute',
   minHeight: '100%',
   minWidth: '100%',
-});
+  maxWidth: axis === 'y' ? '100%' : undefined,
+  maxHeight: axis === 'x' ? '100%' : undefined,
+}));
+
+type ScrollAxis = 'x' | 'y' | 'both';
 
 const ScrollContainer = ({
   children,
+  horizontal,
+  vertical,
   ...rest
-}: React.HTMLAttributes<HTMLDivElement>) =>
-  (
-    <ScrollParent {...rest}>
-      <ScrollChild>{children}</ScrollChild>
+}: React.HTMLAttributes<HTMLDivElement> & {
+  horizontal?: boolean;
+  vertical?: boolean;
+}) => {
+  const axis =
+    horizontal && !vertical ? 'x' : !horizontal && vertical ? 'y' : 'both';
+  return (
+    <ScrollParent axis={axis} {...rest}>
+      <ScrollChild axis={axis}>{children}</ScrollChild>
     </ScrollParent>
   ) as any;
+};
 
 type DistributionProps = ContainerProps & {
   /**