diff --git a/app/src/components/combobox/styles.tsx b/app/src/components/combobox/styles.tsx
index 8ea4d4daa5..bdc00a406a 100644
--- a/app/src/components/combobox/styles.tsx
+++ b/app/src/components/combobox/styles.tsx
@@ -3,11 +3,13 @@ import { css } from "@emotion/react";
 export const comboBoxCSS = css`
   &[data-size="M"] {
     --combobox-vertical-padding: 6px;
-    --combobox-horizontal-padding: 6px;
+    --combobox-start-padding: 8px;
+    --combobox-end-padding: 6px;
   }
   &[data-size="L"] {
     --combobox-vertical-padding: 10px;
-    --combobox-horizontal-padding: var(--ac-global-dimension-static-size-200);
+    --combobox-start-padding: var(--ac-global-dimension-static-size-200);
+    --combobox-end-padding: var(--ac-global-dimension-static-size-200);
   }
   color: var(--ac-global-text-color-900);
   &[data-required] {
@@ -25,8 +27,8 @@ export const comboBoxCSS = css`
     position: relative;
 
     .react-aria-Input {
-      padding: var(--combobox-vertical-padding)
-        var(--combobox-horizontal-padding);
+      padding: var(--combobox-vertical-padding) var(--combobox-end-padding)
+        var(--combobox-vertical-padding) var(--combobox-start-padding);
     }
     .react-aria-Button {
       background: none;
diff --git a/app/src/components/field/styles.ts b/app/src/components/field/styles.ts
index 53fb1a1ffd..ba46accc4b 100644
--- a/app/src/components/field/styles.ts
+++ b/app/src/components/field/styles.ts
@@ -15,6 +15,7 @@ export const fieldBaseCSS = css`
     transition: all 0.2s ease-in-out;
     margin: 0;
     flex: 1 1 auto;
+    font-size: var(--ac-global-font-size-s);
     min-width: var(--ac-global-input-field-min-width);
     background-color: var(--ac-global-input-field-background-color);
     color: var(--ac-global-text-color-900);
diff --git a/app/stories/ComboBox.stories.tsx b/app/stories/ComboBox.stories.tsx
index 8a5e5f2cea..a0776ae3b9 100644
--- a/app/stories/ComboBox.stories.tsx
+++ b/app/stories/ComboBox.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Flex } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import {
   ComboBox,
   ComboBoxItem,
@@ -62,20 +62,22 @@ export default meta;
 
 const Template: StoryFn<ComboBoxProps<object>> = (args) => (
   <ThemeWrapper>
-    <ComboBox {...args}>
-      <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-        Chocolate
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Mint" key={"mint"}>
-        Mint
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-        Strawberry
-      </ComboBoxItem>
-      <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-        Vanilla
-      </ComboBoxItem>
-    </ComboBox>
+    <View width="300px">
+      <ComboBox {...args}>
+        <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+          Chocolate
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Mint" key={"mint"}>
+          Mint
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+          Strawberry
+        </ComboBoxItem>
+        <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+          Vanilla
+        </ComboBoxItem>
+      </ComboBox>
+    </View>
   </ThemeWrapper>
 );
 
diff --git a/app/stories/Gallery.stories.tsx b/app/stories/Gallery.stories.tsx
index f19d80248d..af86d1238c 100644
--- a/app/stories/Gallery.stories.tsx
+++ b/app/stories/Gallery.stories.tsx
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Item, Picker } from "@arizeai/components";
 
 import {
   Button,
+  ComboBox,
+  ComboBoxItem,
   Disclosure,
   DisclosureGroup,
   DisclosurePanel,
@@ -19,11 +21,6 @@ import {
   TextField,
   View,
 } from "@phoenix/components";
-import {
-  ComboBox,
-  ComboBoxItem,
-  ComboBoxProps,
-} from "@phoenix/components/combobox/ComboBox";
 
 import { ThemeWrapper } from "./components/ThemeWrapper";
 
@@ -37,155 +34,175 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<ComboBoxProps<object>> = () => (
-  <ThemeWrapper>
-    <View
-      borderWidth="thin"
-      borderColor="dark"
-      padding="size-200"
-      borderRadius="medium"
-      marginTop="size-800"
-    >
-      <Flex direction="row" gap="size-200" alignItems="center">
-        <ComboBox label="Ice cream flavor" description={"pick a flavor"}>
-          <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-            Chocolate
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Mint" key={"mint"}>
-            Mint
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-            Strawberry
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-            Vanilla
-          </ComboBoxItem>
-        </ComboBox>
-        <View minWidth="270px">
-          <TagGroup selectionMode="multiple">
-            <Label>Categories</Label>
-            <TagList>
-              <Tag>News</Tag>
-              <Tag>Travel</Tag>
-              <Tag>Gaming</Tag>
-              <Tag>Shopping</Tag>
-            </TagList>
-            <Text slot="description">Choose your own category</Text>
-          </TagGroup>
-        </View>
-        <Picker label="Toppings" size="compact" description={"pick a flavor"}>
-          <Item key="chocolate">Chocolate</Item>
-          <Item key="mint">Mint</Item>
-          <Item key="strawberry">Strawberry</Item>
-          <Item key="vanilla">Vanilla</Item>
-        </Picker>
-        <TextField size="M">
-          <Label>Label</Label>
-          <Input type="text" />
-          <Text slot="description">some text</Text>
-        </TextField>
-        <Button size="S">Button</Button>
-      </Flex>
-      <Flex direction="row" gap="size-200" alignItems="center">
-        <ComboBox
-          label="Ice cream flavor"
-          description={"pick a flavor"}
-          size="L"
+const Template: StoryFn = () => {
+  const [direction, setDirection] = useState<"row" | "column">("row");
+  return (
+    <ThemeWrapper>
+      <View
+        padding="size-200"
+        borderWidth="thin"
+        borderColor="dark"
+        borderRadius="medium"
+      >
+        <Button
+          size="S"
+          onPress={() => setDirection(direction === "row" ? "column" : "row")}
+        >
+          {`Toggle Direction: ${direction}`}
+        </Button>
+      </View>
+      <View
+        borderWidth="thin"
+        borderColor="dark"
+        padding="size-200"
+        borderRadius="medium"
+        marginTop="size-200"
+      >
+        <Flex
+          direction={direction}
+          gap="size-200"
+          alignItems={direction === "row" ? "center" : "start"}
         >
-          <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-            Chocolate
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Mint" key={"mint"}>
-            Mint
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-            Strawberry
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-            Vanilla
-          </ComboBoxItem>
-        </ComboBox>
-        <Picker label="Toppings" size="default" description={"pick a flavor"}>
-          <Item key="chocolate">Chocolate</Item>
-          <Item key="mint">Mint</Item>
-          <Item key="strawberry">Strawberry</Item>
-          <Item key="vanilla">Vanilla</Item>
-        </Picker>
-        <TextField size="L">
-          <Label>Label</Label>
-          <Input type="text" />
-          <Text slot="description">some description</Text>
-        </TextField>
-        <Button size="M">Button</Button>
-      </Flex>
-    </View>
-    <View
-      padding="size-200"
-      borderWidth="thin"
-      borderColor="dark"
-      borderRadius="medium"
-      marginTop="size-200"
-    >
-      <Flex direction="column" gap="size-200">
-        <ComboBox label="Ice cream flavor">
-          <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-            Chocolate
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Mint" key={"mint"}>
-            Mint
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-            Strawberry
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-            Vanilla
-          </ComboBoxItem>
-        </ComboBox>
-        <Picker label="Toppings" size="compact">
-          <Item key="chocolate">Chocolate</Item>
-          <Item key="mint">Mint</Item>
-          <Item key="strawberry">Strawberry</Item>
-          <Item key="vanilla">Vanilla</Item>
-        </Picker>
-        <ComboBox label="Ice cream flavor" size="L">
-          <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
-            Chocolate
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Mint" key={"mint"}>
-            Mint
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
-            Strawberry
-          </ComboBoxItem>
-          <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
-            Vanilla
-          </ComboBoxItem>
-        </ComboBox>
-        <Picker label="Toppings" size="default">
-          <Item key="chocolate">Chocolate</Item>
-          <Item key="mint">Mint</Item>
-          <Item key="strawberry">Strawberry</Item>
-          <Item key="vanilla">Vanilla</Item>
-        </Picker>
-      </Flex>
-    </View>
-    <View
-      padding="size-200"
-      borderWidth="thin"
-      borderColor="dark"
-      borderRadius="medium"
-      marginTop="size-200"
-    >
-      <DisclosureGroup>
-        <Disclosure id="content">
-          <DisclosureTrigger>Nutrition Facts</DisclosureTrigger>
-          <DisclosurePanel>
-            <Text>Ice cream is sooooo good for you!</Text>
-          </DisclosurePanel>
-        </Disclosure>
-      </DisclosureGroup>
-    </View>
-  </ThemeWrapper>
-);
+          <ComboBox label="Ice cream flavor" description={"pick a flavor"}>
+            <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+              Chocolate
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Mint" key={"mint"}>
+              Mint
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+              Strawberry
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+              Vanilla
+            </ComboBoxItem>
+          </ComboBox>
+          <Picker label="Toppings" size="compact" description={"pick a flavor"}>
+            <Item key="chocolate">Chocolate</Item>
+            <Item key="mint">Mint</Item>
+            <Item key="strawberry">Strawberry</Item>
+            <Item key="vanilla">Vanilla</Item>
+          </Picker>
+          <View minWidth="270px">
+            <TagGroup selectionMode="multiple">
+              <Label>Categories</Label>
+              <TagList>
+                <Tag>News</Tag>
+                <Tag>Travel</Tag>
+                <Tag>Gaming</Tag>
+                <Tag>Shopping</Tag>
+              </TagList>
+              <Text slot="description">Choose your own category</Text>
+            </TagGroup>
+          </View>
+          <TextField size="M">
+            <Label>Label</Label>
+            <Input type="text" />
+            <Text slot="description">some text</Text>
+          </TextField>
+          <Button size="S">Button</Button>
+        </Flex>
+        <Flex direction="row" gap="size-200" alignItems="center">
+          <ComboBox
+            label="Ice cream flavor"
+            description={"pick a flavor"}
+            size="L"
+          >
+            <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+              Chocolate
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Mint" key={"mint"}>
+              Mint
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+              Strawberry
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+              Vanilla
+            </ComboBoxItem>
+          </ComboBox>
+          <Picker label="Toppings" size="default" description={"pick a flavor"}>
+            <Item key="chocolate">Chocolate</Item>
+            <Item key="mint">Mint</Item>
+            <Item key="strawberry">Strawberry</Item>
+            <Item key="vanilla">Vanilla</Item>
+          </Picker>
+          <TextField size="L">
+            <Label>Label</Label>
+            <Input type="text" />
+            <Text slot="description">some description</Text>
+          </TextField>
+          <Button size="M">Button</Button>
+        </Flex>
+      </View>
+      <View
+        padding="size-200"
+        borderWidth="thin"
+        borderColor="dark"
+        borderRadius="medium"
+        marginTop="size-200"
+      >
+        <Flex direction="column" gap="size-200">
+          <ComboBox label="Ice cream flavor">
+            <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+              Chocolate
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Mint" key={"mint"}>
+              Mint
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+              Strawberry
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+              Vanilla
+            </ComboBoxItem>
+          </ComboBox>
+          <Picker label="Toppings" size="compact">
+            <Item key="chocolate">Chocolate</Item>
+            <Item key="mint">Mint</Item>
+            <Item key="strawberry">Strawberry</Item>
+            <Item key="vanilla">Vanilla</Item>
+          </Picker>
+          <ComboBox label="Ice cream flavor" size="L">
+            <ComboBoxItem textValue="Chocolate" key={"chocolate"}>
+              Chocolate
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Mint" key={"mint"}>
+              Mint
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Strawberry" key={"strawberry"}>
+              Strawberry
+            </ComboBoxItem>
+            <ComboBoxItem textValue="Vanilla" key={"vanilla"}>
+              Vanilla
+            </ComboBoxItem>
+          </ComboBox>
+          <Picker label="Toppings" size="default">
+            <Item key="chocolate">Chocolate</Item>
+            <Item key="mint">Mint</Item>
+            <Item key="strawberry">Strawberry</Item>
+            <Item key="vanilla">Vanilla</Item>
+          </Picker>
+        </Flex>
+      </View>
+      <View
+        padding="size-200"
+        borderWidth="thin"
+        borderColor="dark"
+        borderRadius="medium"
+        marginTop="size-200"
+      >
+        <DisclosureGroup>
+          <Disclosure id="content">
+            <DisclosureTrigger>Nutrition Facts</DisclosureTrigger>
+            <DisclosurePanel>
+              <Text>Ice cream is sooooo good for you!</Text>
+            </DisclosurePanel>
+          </Disclosure>
+        </DisclosureGroup>
+      </View>
+    </ThemeWrapper>
+  );
+};
 
 export const Default = Template.bind({});