diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
index 686292d..670090d 100644
--- a/src/components/Badge/index.tsx
+++ b/src/components/Badge/index.tsx
@@ -107,7 +107,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       >
         {leadIcon && <Icon size="small" variant={leadIcon} />}
         {trailIcon && !leadIcon && <div style={{ width: 1, height: '100%' }} />}
-        <Text color="inherit" variant="subtext-medium">
+        <Text singleLine color="inherit" variant="subtext-medium">
           {children}
         </Text>
         {trailIcon && <Icon size="small" variant={trailIcon} />}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 304861d..8a80fb9 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -330,6 +330,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             )}
             <Text
               color="inherit"
+              singleLine
               variant={size === 'small' ? 'subtext-medium' : 'display-medium'}
             >
               {children}
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index 3b5ad68..92193c8 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -61,6 +61,7 @@ import { Button } from '../Button/index.js'
 import { IconButton } from '../IconButton/index.js'
 import { Icon } from '../Icon/index.js'
 import { styled } from 'inlines'
+import { ScrollArea } from '../ScrollArea/index.js'
 
 type CalendarProps = {
   children: ReactElement | (({ open }: { open: boolean }) => ReactElement)
@@ -247,43 +248,40 @@ function DatePicker({
               gap: 2,
               height: 184,
               overflowY: 'auto',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
             }}
-            ref={monthContainerRef}
           >
-            {[...Array(12).keys()].map((e, i) => (
-              <styled.div
-                key={i}
-                style={{
-                  height: 32,
-                  flexShrink: 0,
-                  display: 'flex',
-                  padding: '0 8px',
-                  alignItems: 'center',
-                  gap: 8,
-                  cursor: 'pointer',
-                  borderRadius: radius[8],
-                  '&:hover': {
-                    background: colors.neutral10Adjusted,
-                  },
-                }}
-                onClick={() => {
-                  setCurrentMonth(setMonth(currentMonth, e))
-                }}
-              >
-                {getMonth(currentMonth) === e ? (
-                  <Icon variant="checkmark" />
-                ) : (
-                  <div style={{ height: 24, width: 24 }} />
-                )}
-                <Text variant="display-medium">
-                  {format(addMonths(startOfYear(new Date()), e), 'MMM')}
-                </Text>
-              </styled.div>
-            ))}
+            <ScrollArea ref={monthContainerRef}>
+              {[...Array(12).keys()].map((e, i) => (
+                <styled.div
+                  key={i}
+                  style={{
+                    height: 32,
+                    flexShrink: 0,
+                    display: 'flex',
+                    padding: '0 8px',
+                    alignItems: 'center',
+                    gap: 8,
+                    cursor: 'pointer',
+                    borderRadius: radius[8],
+                    '&:hover': {
+                      background: colors.neutral10Adjusted,
+                    },
+                  }}
+                  onClick={() => {
+                    setCurrentMonth(setMonth(currentMonth, e))
+                  }}
+                >
+                  {getMonth(currentMonth) === e ? (
+                    <Icon variant="checkmark" />
+                  ) : (
+                    <div style={{ height: 24, width: 24 }} />
+                  )}
+                  <Text variant="display-medium">
+                    {format(addMonths(startOfYear(new Date()), e), 'MMM')}
+                  </Text>
+                </styled.div>
+              ))}
+            </ScrollArea>
           </styled.div>
           <styled.div
             style={{
@@ -294,47 +292,45 @@ function DatePicker({
               height: 184,
               overflowY: 'auto',
               scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
             }}
-            ref={yearContainerRef}
           >
-            {[-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((e, i) => (
-              <styled.div
-                key={i}
-                style={{
-                  height: 32,
-                  flexShrink: 0,
-                  display: 'flex',
-                  padding: '0 8px',
-                  alignItems: 'center',
-                  gap: 8,
-                  cursor: 'pointer',
-                  borderRadius: radius[8],
-                  '&:hover': {
-                    background: colors.neutral10Adjusted,
-                  },
-                }}
-                onClick={() => {
-                  setCurrentMonth(
-                    setYear(currentMonth, getYear(new Date()) + e),
-                  )
-                }}
-              >
-                {isSameYear(
-                  currentMonth,
-                  addYears(startOfYear(new Date()), e),
-                ) ? (
-                  <Icon variant="checkmark" />
-                ) : (
-                  <div style={{ height: 24, width: 24 }} />
-                )}
-                <Text variant="display-medium">
-                  {format(addYears(startOfYear(new Date()), e), 'yyyy')}
-                </Text>
-              </styled.div>
-            ))}
+            <ScrollArea ref={yearContainerRef}>
+              {[-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((e, i) => (
+                <styled.div
+                  key={i}
+                  style={{
+                    height: 32,
+                    flexShrink: 0,
+                    display: 'flex',
+                    padding: '0 8px',
+                    alignItems: 'center',
+                    gap: 8,
+                    cursor: 'pointer',
+                    borderRadius: radius[8],
+                    '&:hover': {
+                      background: colors.neutral10Adjusted,
+                    },
+                  }}
+                  onClick={() => {
+                    setCurrentMonth(
+                      setYear(currentMonth, getYear(new Date()) + e),
+                    )
+                  }}
+                >
+                  {isSameYear(
+                    currentMonth,
+                    addYears(startOfYear(new Date()), e),
+                  ) ? (
+                    <Icon variant="checkmark" />
+                  ) : (
+                    <div style={{ height: 24, width: 24 }} />
+                  )}
+                  <Text variant="display-medium">
+                    {format(addYears(startOfYear(new Date()), e), 'yyyy')}
+                  </Text>
+                </styled.div>
+              ))}
+            </ScrollArea>
           </styled.div>
         </div>
       </div>
@@ -461,49 +457,47 @@ function TimePicker({
           height: 184,
           overflowY: 'auto',
           scrollbarWidth: 'none',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
         }}
-        ref={timeContainerRef}
       >
-        {[...Array(24 * 2).keys()].map((e, i) => (
-          <styled.div
-            key={i}
-            style={{
-              height: 32,
-              flexShrink: 0,
-              display: 'flex',
-              padding: '0 8px',
-              alignItems: 'center',
-              gap: 8,
-              cursor: 'pointer',
-              borderRadius: radius[8],
-              '&:hover': {
-                background: colors.neutral10Adjusted,
-              },
-            }}
-            onClick={() => {
-              onChange(addMinutes(startOfDay(value ?? new Date()), e * 30))
-            }}
-          >
-            {value &&
-            getHours(value) ===
-              getHours(addMinutes(startOfDay(value), e * 30)) &&
-            getMinutes(value) ===
-              getMinutes(addMinutes(startOfDay(value), e * 30)) ? (
-              <Icon variant="checkmark" />
-            ) : (
-              <div style={{ height: 24, width: 24 }} />
-            )}
-            <Text variant="display-medium">
-              {format(
-                addMinutes(startOfDay(value ?? new Date()), e * 30),
-                'HH:mm',
+        <ScrollArea ref={timeContainerRef}>
+          {[...Array(24 * 2).keys()].map((e, i) => (
+            <styled.div
+              key={i}
+              style={{
+                height: 32,
+                flexShrink: 0,
+                display: 'flex',
+                padding: '0 8px',
+                alignItems: 'center',
+                gap: 8,
+                cursor: 'pointer',
+                borderRadius: radius[8],
+                '&:hover': {
+                  background: colors.neutral10Adjusted,
+                },
+              }}
+              onClick={() => {
+                onChange(addMinutes(startOfDay(value ?? new Date()), e * 30))
+              }}
+            >
+              {value &&
+              getHours(value) ===
+                getHours(addMinutes(startOfDay(value), e * 30)) &&
+              getMinutes(value) ===
+                getMinutes(addMinutes(startOfDay(value), e * 30)) ? (
+                <Icon variant="checkmark" />
+              ) : (
+                <div style={{ height: 24, width: 24 }} />
               )}
-            </Text>
-          </styled.div>
-        ))}
+              <Text variant="display-medium">
+                {format(
+                  addMinutes(startOfDay(value ?? new Date()), e * 30),
+                  'HH:mm',
+                )}
+              </Text>
+            </styled.div>
+          ))}
+        </ScrollArea>
       </styled.div>
     </div>
   )
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index aa75b10..8e947d5 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -124,10 +124,6 @@ function Dialog({
             borderRadius: radius[24],
             background: colors.neutralInverted100,
             boxShadow: shadows.popoverLarge,
-            display: 'flex',
-            justifyContent: 'center',
-            flexDirection: 'column',
-            gap: 16,
             outline: 'none',
             ...styles,
           }}
@@ -139,44 +135,55 @@ function Dialog({
               background: colors.neutral10Background,
               borderRadius: radius[24],
               border: `1px solid ${colors.neutral10}`,
-              zIndex: -1,
             }}
           />
-          <Text variant="subheading-bold" color="neutral100" align="center">
-            {title}
-          </Text>
-          <Text variant="display-regular" color="neutral60" align="center">
-            {description}
-          </Text>
           <div
             style={{
+              position: 'relative',
+              width: '100%',
+              height: '100%',
               display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column',
               gap: 16,
             }}
           >
-            <Button
-              width="full"
-              keyHint="Esc"
-              keyHintPlacement="none"
-              variant="border"
-              onClick={onDismiss}
+            <Text variant="subheading-bold" color="neutral100" align="center">
+              {title}
+            </Text>
+            <Text variant="display-regular" color="neutral60" align="center">
+              {description}
+            </Text>
+            <div
+              style={{
+                display: 'flex',
+                gap: 16,
+              }}
             >
-              {dismissButtonLabel}
-            </Button>
-            {actionButtonLabel && (
               <Button
                 width="full"
-                keyHint="Enter"
+                keyHint="Esc"
                 keyHintPlacement="none"
-                color={color}
-                onClick={() => {
-                  onAction()
-                  onDismiss()
-                }}
+                variant="border"
+                onClick={onDismiss}
               >
-                {actionButtonLabel}
+                {dismissButtonLabel}
               </Button>
-            )}
+              {actionButtonLabel && (
+                <Button
+                  width="full"
+                  keyHint="Enter"
+                  keyHintPlacement="none"
+                  color={color}
+                  onClick={() => {
+                    onAction()
+                    onDismiss()
+                  }}
+                >
+                  {actionButtonLabel}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </FloatingFocusManager>
diff --git a/src/components/FileInput/index.tsx b/src/components/FileInput/index.tsx
index 91ef537..e4f4dea 100644
--- a/src/components/FileInput/index.tsx
+++ b/src/components/FileInput/index.tsx
@@ -85,10 +85,6 @@ function FileInput(props: FileInptuProps) {
             padding: 8,
             maxHeight: 360,
             overflowY: 'auto',
-            scrollbarWidth: 'none',
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
           }}
           onDrop={(e) => {
             e.preventDefault()
diff --git a/src/components/Grid/index.tsx b/src/components/Grid/index.tsx
index 790f1dc..34fcc91 100644
--- a/src/components/Grid/index.tsx
+++ b/src/components/Grid/index.tsx
@@ -140,6 +140,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
                   key={field.key}
                   variant="display-medium"
                   color="neutral80"
+                  singleLine
                 >
                   {data[field.key]}
                 </Text>
@@ -161,6 +162,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
                   key={field.key}
                   variant="display-regular"
                   color="neutral60"
+                  singleLine
                 >
                   {data[field.key]}
                 </Text>
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index c6fa0c3..770251a 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -247,11 +247,6 @@ function MenuItems({ children }: MenuItemsProps) {
               outline: 'none',
               background: colors.neutralInverted100,
               boxShadow: shadows.popoverLarge,
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
               ...floatingStyles,
             }}
             {...getFloatingProps({
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index bd21bd5..2c90e53 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Modal } from './index.js'
 import { Button } from '../Button/index.js'
-import { FormFieldGroup, FormField } from '../Form/index.js'
+import { FormFieldGroup, FormField, Form } from '../Form/index.js'
 import { TextInput } from '../TextInput/index.js'
 
 export default {
@@ -76,7 +76,23 @@ export const LargeBody = () => {
           Some text here to descripe what we expect from you in this modal.
         </Modal.Description>
         <Modal.Body>
-          <div style={{ height: 500 }} />
+          <Form
+            fields={{
+              title: { type: 'text', label: 'Title' },
+              title2: { type: 'text', label: 'Title' },
+              title3: { type: 'text', label: 'Title' },
+              title4: { type: 'text', label: 'Title' },
+              title5: { type: 'text', label: 'Title' },
+              title6: { type: 'text', label: 'Title' },
+              title7: { type: 'text', label: 'Title' },
+              title8: { type: 'text', label: 'Title' },
+            }}
+            onSubmit={() => {}}
+          >
+            <div style={{ padding: '24px 0' }}>
+              <Form.Fields />
+            </div>
+          </Form>
         </Modal.Body>
         <Modal.Actions>
           {({ close }) => (
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 6f6be1e..b7ff691 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -17,7 +17,7 @@ import { useTransitionStyles } from '@floating-ui/react'
 import { colors } from '../../utils/colors.js'
 import { shadows } from '../../utils/shadows.js'
 import { radius } from '../../utils/radius.js'
-import { styled } from 'inlines'
+import { ScrollArea } from '../ScrollArea/index.js'
 
 const ModalContext = createContext<{ close: () => void }>({ close: () => {} })
 
@@ -78,13 +78,9 @@ function Modal({ children, open, onOpenChange }: ModalRootProps) {
             style={{
               position: 'relative',
               width: 480,
-              padding: 24,
               borderRadius: radius[24],
               background: colors.neutralInverted100,
               boxShadow: shadows.popoverLarge,
-              display: 'flex',
-              justifyContent: 'center',
-              flexDirection: 'column',
               outline: 'none',
               ...styles,
             }}
@@ -96,10 +92,20 @@ function Modal({ children, open, onOpenChange }: ModalRootProps) {
                 inset: 0,
                 borderRadius: radius[24],
                 border: `1px solid ${colors.neutral10}`,
-                zIndex: -1,
               }}
             />
-            {children}
+            <div
+              style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              {children}
+            </div>
           </div>
         </FloatingFocusManager>
       </FloatingOverlay>
@@ -112,9 +118,11 @@ type ModalTitleProps = {
 }
 function ModalTitle({ children }: ModalTitleProps) {
   return (
-    <Text color="neutral100" variant="subheading-bold">
-      {children}
-    </Text>
+    <div style={{ padding: '24px 24px 0' }}>
+      <Text color="neutral100" variant="subheading-bold">
+        {children}
+      </Text>
+    </div>
   )
 }
 
@@ -123,7 +131,7 @@ type ModalDescriptionProps = {
 }
 function ModalDescription({ children }: ModalDescriptionProps) {
   return (
-    <div style={{ marginTop: 8 }}>
+    <div style={{ padding: '8px 24px 24px' }}>
       <Text variant="display-regular" color="neutral60">
         {children}
       </Text>
@@ -153,27 +161,20 @@ function ModalBody({ children }: ModalBodyProps) {
   }, [])
 
   return (
-    <styled.div
+    <div
       style={{
-        marginTop: 32,
-        marginLeft: -24,
-        marginRight: -24,
-        paddingLeft: 24,
-        paddingRight: 24,
-        maxHeight: 480,
         ...(contentHeight > 480 && {
           borderTop: `1px solid ${colors.neutral10}`,
           borderBottom: `1px solid ${colors.neutral10}`,
-          overflowY: 'scroll',
-          scrollbarWidth: 'none',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
         }),
       }}
     >
-      <div ref={ref}>{children}</div>
-    </styled.div>
+      <ScrollArea style={{ maxHeight: 480 }}>
+        <div ref={ref} style={{ paddingLeft: 24, paddingRight: 24 }}>
+          {children}
+        </div>
+      </ScrollArea>
+    </div>
   )
 }
 
@@ -190,7 +191,7 @@ function ModalActions({ children }: ModalActionsProps) {
         justifyContent: 'end',
         alignItems: 'center',
         gap: 16,
-        marginTop: 24,
+        padding: 24,
       }}
     >
       {typeof children === 'function' ? children({ close }) : children}
diff --git a/src/components/ScrollArea/index.tsx b/src/components/ScrollArea/index.tsx
index 323ab22..3206b4e 100644
--- a/src/components/ScrollArea/index.tsx
+++ b/src/components/ScrollArea/index.tsx
@@ -6,15 +6,19 @@ import { styled } from 'inlines'
 
 type ScrollAreaProps = {
   children: ReactNode
+  style?: React.CSSProperties
 }
 
 const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ children }, ref) => {
+  ({ children, style }, ref) => {
     return (
       <Primitive.Root
         style={{ overflow: 'hidden', width: '100%', height: '100%' }}
       >
-        <Primitive.Viewport ref={ref} style={{ width: '100%', height: '100%' }}>
+        <Primitive.Viewport
+          ref={ref}
+          style={{ width: '100%', height: '100%', ...style }}
+        >
           {children}
         </Primitive.Viewport>
         <Primitive.Scrollbar forceMount orientation="vertical" asChild>
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 06ca345..a57e527 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -189,7 +189,9 @@ function InternalTable({
                     column.header()
                   ) : (
                     <>
-                      <Text variant="display-bold">{column.header}</Text>
+                      <Text singleLine variant="display-bold">
+                        {column.header}
+                      </Text>
                       {onSortChange && sort?.key === column.key && (
                         <Icon
                           variant={
@@ -272,7 +274,11 @@ function InternalTable({
                     {column.cell ? (
                       column.cell(row, { forceHover, setForceHover })
                     ) : (
-                      <Text variant="display-medium" color="neutral80">
+                      <Text
+                        singleLine
+                        variant="display-medium"
+                        color="neutral80"
+                      >
                         {row[column.key]}
                       </Text>
                     )}
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index 6deb108..c83f559 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -22,6 +22,7 @@ type TextProps = {
   align?: 'left' | 'center' | 'right'
   color?: 'inherit' | Color
   maxWidth?: number
+  singleLine?: boolean
 }
 
 function Text({
@@ -30,6 +31,7 @@ function Text({
   color: colorProp = 'neutral100',
   align = 'left',
   maxWidth,
+  singleLine,
 }: TextProps) {
   return (
     <div
@@ -40,9 +42,11 @@ function Text({
         letterSpacing: 'normal',
         overflowWrap: 'break-word',
         maxWidth: maxWidth,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
+        ...((singleLine || maxWidth) && {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+        }),
         ...(variant === 'title-regular' && {
           fontSize: 28,
           fontWeight: 400,