diff --git a/app/src/components/ConfirmNavigation.tsx b/app/src/components/ConfirmNavigation.tsx
index 66d480ce37..1adaaa3638 100644
--- a/app/src/components/ConfirmNavigation.tsx
+++ b/app/src/components/ConfirmNavigation.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { Blocker } from "react-router";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
   return (
diff --git a/app/src/components/ErrorBoundary.tsx b/app/src/components/ErrorBoundary.tsx
index a2a12c8700..0661fa060f 100644
--- a/app/src/components/ErrorBoundary.tsx
+++ b/app/src/components/ErrorBoundary.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { css } from "@emotion/react";
 
-import { EmptyGraphic, Flex } from "@arizeai/components";
+import { EmptyGraphic } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 
 import { ExternalLink } from "./ExternalLink";
 type ErrorBoundaryProps = { children: ReactNode };
diff --git a/app/src/components/ViewSummaryAside.tsx b/app/src/components/ViewSummaryAside.tsx
index 4b52d353e5..cf5d6fe0f7 100644
--- a/app/src/components/ViewSummaryAside.tsx
+++ b/app/src/components/ViewSummaryAside.tsx
@@ -1,8 +1,6 @@
 import React, { PropsWithChildren } from "react";
 
-import { Flex } from "@arizeai/components";
-
-import { View, ViewProps } from "@phoenix/components";
+import { Flex, View, ViewProps } from "@phoenix/components";
 
 type ViewSummaryAsideProps = PropsWithChildren<{
   width?: ViewProps["width"];
diff --git a/app/src/components/annotation/AnnotationTooltip.tsx b/app/src/components/annotation/AnnotationTooltip.tsx
index ef26db5f31..11288d85bd 100644
--- a/app/src/components/annotation/AnnotationTooltip.tsx
+++ b/app/src/components/annotation/AnnotationTooltip.tsx
@@ -1,14 +1,13 @@
 import React, { CSSProperties, ReactNode } from "react";
 
 import {
-  Flex,
   HelpTooltip,
   Text,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
 
 import { Annotation } from "./types";
diff --git a/app/src/components/auth/CreateAPIKeyDialog.tsx b/app/src/components/auth/CreateAPIKeyDialog.tsx
index 83340b424f..719ca0920e 100644
--- a/app/src/components/auth/CreateAPIKeyDialog.tsx
+++ b/app/src/components/auth/CreateAPIKeyDialog.tsx
@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Form } from "react-router-dom";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import { Dialog, Flex, TextArea, TextField } from "@arizeai/components";
+import { Dialog, TextArea, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 export type APIKeyFormParams = {
   name: string;
diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
index 532b8312a1..97467fff70 100644
--- a/app/src/components/auth/OneTimeAPIKeyDialog.tsx
+++ b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
@@ -1,16 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import {
-  Alert,
-  Dialog,
-  Flex,
-  Heading,
-  Text,
-  TextField,
-} from "@arizeai/components";
+import { Alert, Dialog, Heading, Text, TextField } from "@arizeai/components";
 
-import { ExternalLink, View } from "@phoenix/components";
+import { ExternalLink, Flex, View } from "@phoenix/components";
 import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
 import { CopyToClipboardButton } from "@phoenix/components/CopyToClipboardButton";
 
diff --git a/app/src/components/dataset/DatasetPicker.tsx b/app/src/components/dataset/DatasetPicker.tsx
index 0696974e2b..24bfb7acc0 100644
--- a/app/src/components/dataset/DatasetPicker.tsx
+++ b/app/src/components/dataset/DatasetPicker.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 
-import { Flex, Item, Picker, PickerProps, Text } from "@arizeai/components";
+import { Item, Picker, PickerProps, Text } from "@arizeai/components";
+
+import { Flex } from "@phoenix/components";
 
 import { DatasetPickerQuery } from "./__generated__/DatasetPickerQuery.graphql";
 
diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx
index 127f05a472..01f1a1b1a0 100644
--- a/app/src/components/index.tsx
+++ b/app/src/components/index.tsx
@@ -11,3 +11,4 @@ export * from "./combobox";
 export * from "./button";
 export * from "./icon";
 export * from "./view";
+export * from "./layout";
diff --git a/app/src/components/layout/Flex.tsx b/app/src/components/layout/Flex.tsx
new file mode 100644
index 0000000000..3cd6eb3558
--- /dev/null
+++ b/app/src/components/layout/Flex.tsx
@@ -0,0 +1,105 @@
+import React, { forwardRef, ReactNode, Ref } from "react";
+import { filterDOMProps } from "@react-aria/utils";
+import { css } from "@emotion/react";
+
+import { DOMProps, FlexStyleProps } from "@phoenix/components/types";
+import {
+  passthroughStyle,
+  responsiveDimensionValue,
+  StyleHandlers,
+  useStyleProps,
+} from "@phoenix/components/utils";
+
+export interface FlexProps extends DOMProps, FlexStyleProps {
+  /** Children of the flex container. */
+  children: ReactNode;
+}
+
+const flexCSS = css`
+  display: flex;
+`;
+
+const flexStyleProps: StyleHandlers = {
+  direction: ["flexDirection", passthroughStyle],
+  wrap: ["flexWrap", flexWrapValue],
+  justifyContent: ["justifyContent", flexAlignValue],
+  alignItems: ["alignItems", flexAlignValue],
+  alignContent: ["alignContent", flexAlignValue],
+};
+
+function Flex(props: FlexProps, ref: Ref<HTMLDivElement>) {
+  const { children, ...otherProps } = props;
+
+  const matchedBreakpoints = ["base"];
+  const { styleProps } = useStyleProps(otherProps);
+  const { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps);
+
+  // If no gaps, or native support exists, then we only need to render a single div.
+  const style = {
+    ...styleProps.style,
+    ...flexStyle.style,
+  };
+
+  if (props.gap != null) {
+    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
+  }
+
+  if (props.columnGap != null) {
+    style.columnGap = responsiveDimensionValue(
+      props.columnGap,
+      matchedBreakpoints
+    );
+  }
+
+  if (props.rowGap != null) {
+    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
+  }
+
+  return (
+    <div
+      css={flexCSS}
+      {...filterDOMProps(otherProps)}
+      className="flex"
+      style={style}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
+ * in flex containers for browser compatibility.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function flexAlignValue(value: any) {
+  if (value === "start") {
+    return "flex-start";
+  }
+
+  if (value === "end") {
+    return "flex-end";
+  }
+
+  return value;
+}
+
+/**
+ * Takes a boolean and translates it to flex wrap or nowrap.
+ */
+function flexWrapValue(value: boolean | "wrap" | "nowrap") {
+  if (typeof value === "boolean") {
+    return value ? "wrap" : "nowrap";
+  }
+
+  return value;
+}
+
+/**
+ * A layout container using flexbox. Provides dimension values, and supports the gap
+ * property to define consistent spacing between items.
+ */
+const _Flex = forwardRef(Flex);
+export { _Flex as Flex };
diff --git a/app/src/components/layout/index.tsx b/app/src/components/layout/index.tsx
new file mode 100644
index 0000000000..aa6953a00a
--- /dev/null
+++ b/app/src/components/layout/index.tsx
@@ -0,0 +1 @@
+export * from "./Flex";
diff --git a/app/src/components/pointcloud/ClusterItem.tsx b/app/src/components/pointcloud/ClusterItem.tsx
index b5605b7c18..616a58c346 100644
--- a/app/src/components/pointcloud/ClusterItem.tsx
+++ b/app/src/components/pointcloud/ClusterItem.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Heading, Text } from "@arizeai/components";
+import { Heading, Text } from "@arizeai/components";
 
+import { Flex } from "@phoenix/components";
 import { InferencesRole } from "@phoenix/types";
 import { numberFormatter } from "@phoenix/utils/numberFormatUtils";
 
diff --git a/app/src/components/settings/UserForm.tsx b/app/src/components/settings/UserForm.tsx
index cd91d928cb..b5f2ad73da 100644
--- a/app/src/components/settings/UserForm.tsx
+++ b/app/src/components/settings/UserForm.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Flex, Form, TextField } from "@arizeai/components";
+import { Form, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { UserRole } from "@phoenix/constants";
 
 import { RolePicker } from "./RolePicker";
diff --git a/app/src/components/trace/AnnotationActionMenu.tsx b/app/src/components/trace/AnnotationActionMenu.tsx
index e0dd2ddb41..983f14e194 100644
--- a/app/src/components/trace/AnnotationActionMenu.tsx
+++ b/app/src/components/trace/AnnotationActionMenu.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { ActionMenu, Flex, Item, Text } from "@arizeai/components";
+import { ActionMenu, Item, Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 type AnnotationActionMenuProps = {
   onDelete: () => void;
diff --git a/app/src/components/trace/SpanAnnotationForm.tsx b/app/src/components/trace/SpanAnnotationForm.tsx
index 9011affcbe..cc6e0300ee 100644
--- a/app/src/components/trace/SpanAnnotationForm.tsx
+++ b/app/src/components/trace/SpanAnnotationForm.tsx
@@ -2,9 +2,9 @@ import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Flex, Form, TextArea, TextField } from "@arizeai/components";
+import { Form, TextArea, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 export type AnnotationFormData = {
   name: string;
   score?: number | null;
diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx
index fc2b344c55..09055ebff0 100644
--- a/app/src/components/trace/TraceTree.tsx
+++ b/app/src/components/trace/TraceTree.tsx
@@ -8,13 +8,12 @@ import { css } from "@emotion/react";
 
 import {
   classNames,
-  Flex,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
 import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
 
diff --git a/app/src/pages/auth/ResetPasswordWithTokenPage.tsx b/app/src/pages/auth/ResetPasswordWithTokenPage.tsx
index 7691a03e59..93988d2a21 100644
--- a/app/src/pages/auth/ResetPasswordWithTokenPage.tsx
+++ b/app/src/pages/auth/ResetPasswordWithTokenPage.tsx
@@ -2,9 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router";
 import { useSearchParams } from "react-router-dom";
 
-import { Flex } from "@arizeai/components";
-
-import { Link, View } from "@phoenix/components";
+import { Flex, Link, View } from "@phoenix/components";
 
 import { AuthLayout } from "./AuthLayout";
 import { PhoenixLogo } from "./PhoenixLogo";
diff --git a/app/src/pages/dataset/DatasetCodeDropdown.tsx b/app/src/pages/dataset/DatasetCodeDropdown.tsx
index f612fcaa7a..fcad0af694 100644
--- a/app/src/pages/dataset/DatasetCodeDropdown.tsx
+++ b/app/src/pages/dataset/DatasetCodeDropdown.tsx
@@ -5,14 +5,19 @@ import {
   DropdownButton,
   DropdownMenu,
   DropdownTrigger,
-  Flex,
   Form,
   TabPane,
   Tabs,
   TextField,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton, Icon, Icons, View } from "@phoenix/components";
+import {
+  CopyToClipboardButton,
+  Flex,
+  Icon,
+  Icons,
+  View,
+} from "@phoenix/components";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 import { BASE_URL } from "@phoenix/config";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";
diff --git a/app/src/pages/datasets/DatasetsPage.tsx b/app/src/pages/datasets/DatasetsPage.tsx
index 10a0735187..81d7e8286e 100644
--- a/app/src/pages/datasets/DatasetsPage.tsx
+++ b/app/src/pages/datasets/DatasetsPage.tsx
@@ -6,12 +6,11 @@ import {
   ActionMenu,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
   Item,
 } from "@arizeai/components";
 
-import { Icon, Icons, Loading, View } from "@phoenix/components";
+import { Flex, Icon, Icons, Loading, View } from "@phoenix/components";
 import { CreateDatasetForm } from "@phoenix/components/dataset/CreateDatasetForm";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
diff --git a/app/src/pages/dimension/DimensionPage.tsx b/app/src/pages/dimension/DimensionPage.tsx
index 1a423a91d5..26b6de3b32 100644
--- a/app/src/pages/dimension/DimensionPage.tsx
+++ b/app/src/pages/dimension/DimensionPage.tsx
@@ -3,9 +3,9 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { useLoaderData, useNavigate, useParams } from "react-router";
 import { css } from "@emotion/react";
 
-import { Dialog, DialogContainer, Flex } from "@arizeai/components";
+import { Dialog, DialogContainer } from "@arizeai/components";
 
-import { Loading, View, ViewSummaryAside } from "@phoenix/components";
+import { Loading, View, ViewSummaryAside, Flex } from "@phoenix/components";
 import { useInferences, useTimeRange } from "@phoenix/contexts";
 import { TimeSliceContextProvider } from "@phoenix/contexts/TimeSliceContext";
 
diff --git a/app/src/pages/embedding/EventDetails.tsx b/app/src/pages/embedding/EventDetails.tsx
index 79b5965c0b..86f2eb0bdd 100644
--- a/app/src/pages/embedding/EventDetails.tsx
+++ b/app/src/pages/embedding/EventDetails.tsx
@@ -11,12 +11,11 @@ import {
   Accordion,
   AccordionItem,
   Counter,
-  Flex,
   Heading,
   Label,
 } from "@arizeai/components";
 
-import { Icon, Icons, View } from "@phoenix/components";
+import { Flex, Icon, Icons, View } from "@phoenix/components";
 import { Empty } from "@phoenix/components/Empty";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { numberFormatter } from "@phoenix/utils/numberFormatUtils";
diff --git a/app/src/pages/example/EditExampleDialog.tsx b/app/src/pages/example/EditExampleDialog.tsx
index d5b8b26946..b990c0a1c7 100644
--- a/app/src/pages/example/EditExampleDialog.tsx
+++ b/app/src/pages/example/EditExampleDialog.tsx
@@ -3,16 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
-import {
-  Alert,
-  Card,
-  CardProps,
-  Dialog,
-  Flex,
-  TextArea,
-} from "@arizeai/components";
+import { Alert, Card, CardProps, Dialog, TextArea } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
diff --git a/app/src/pages/example/ExampleDetailsDialog.tsx b/app/src/pages/example/ExampleDetailsDialog.tsx
index f4d84eb2c9..7d9abe6935 100644
--- a/app/src/pages/example/ExampleDetailsDialog.tsx
+++ b/app/src/pages/example/ExampleDetailsDialog.tsx
@@ -9,11 +9,10 @@ import {
   CardProps,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
 } from "@arizeai/components";
 
-import { Button, CopyToClipboardButton, View } from "@phoenix/components";
+import { Button, CopyToClipboardButton, Flex, View } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import { useNotifySuccess } from "@phoenix/contexts";
diff --git a/app/src/pages/experiment/ExperimentCompareTable.tsx b/app/src/pages/experiment/ExperimentCompareTable.tsx
index 67bb48ef2f..d7452ab094 100644
--- a/app/src/pages/experiment/ExperimentCompareTable.tsx
+++ b/app/src/pages/experiment/ExperimentCompareTable.tsx
@@ -24,7 +24,6 @@ import {
   CardProps,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
   Item,
   Text,
@@ -35,6 +34,7 @@ import {
 import {
   Button,
   CopyToClipboardButton,
+  Flex,
   Icon,
   Icons,
   View,
diff --git a/app/src/pages/playground/ModelProviderPicker.tsx b/app/src/pages/playground/ModelProviderPicker.tsx
index 06dc9b3a78..76fabd186e 100644
--- a/app/src/pages/playground/ModelProviderPicker.tsx
+++ b/app/src/pages/playground/ModelProviderPicker.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { graphql, useFragment } from "react-relay";
 
 import {
-  Flex,
   Item,
   Picker,
   PickerProps,
@@ -11,7 +10,7 @@ import {
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { isModelProvider } from "@phoenix/utils/generativeUtils";
 
 import type { ModelProviderPickerFragment$key } from "./__generated__/ModelProviderPickerFragment.graphql";
diff --git a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
index 0fc4418d73..f9ec24829c 100644
--- a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 
-import { Flex } from "@arizeai/components";
-
-import { Button, Icon, Icons } from "@phoenix/components";
+import { Button, Flex, Icon, Icons } from "@phoenix/components";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import {
   createOpenAIResponseFormat,
diff --git a/app/src/pages/playground/PlaygroundCredentialsDropdown.tsx b/app/src/pages/playground/PlaygroundCredentialsDropdown.tsx
index b8c2d93811..18a9d0c9f3 100644
--- a/app/src/pages/playground/PlaygroundCredentialsDropdown.tsx
+++ b/app/src/pages/playground/PlaygroundCredentialsDropdown.tsx
@@ -5,14 +5,13 @@ import {
   DropdownButton,
   DropdownMenu,
   DropdownTrigger,
-  Flex,
   Form,
   Heading,
   Text,
   TextField,
 } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import { useCredentialsContext } from "@phoenix/contexts/CredentialsContext";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 export const ProviderToCredentialNameMap: Record<ModelProvider, string> = {
diff --git a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
index d651c803fd..a054c1d78b 100644
--- a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
+++ b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
@@ -35,13 +35,12 @@ import { css } from "@emotion/react";
 
 import {
   DialogContainer,
-  Flex,
   Text,
   Tooltip,
   TooltipTrigger,
 } from "@arizeai/components";
 
-import { Button, Icon, Icons, Loading } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, Loading } from "@phoenix/components";
 import { AlphabeticIndexIcon } from "@phoenix/components/AlphabeticIndexIcon";
 import { JSONText } from "@phoenix/components/code/JSONText";
 import { borderedTableCSS, tableCSS } from "@phoenix/components/table/styles";
diff --git a/app/src/pages/playground/PlaygroundErrorWrap.tsx b/app/src/pages/playground/PlaygroundErrorWrap.tsx
index 93b8302907..deeb8e0777 100644
--- a/app/src/pages/playground/PlaygroundErrorWrap.tsx
+++ b/app/src/pages/playground/PlaygroundErrorWrap.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 export function PlaygroundErrorWrap({ children }: { children: ReactNode }) {
   return (
diff --git a/app/src/pages/playground/PlaygroundExperimentRunDetailsDialog.tsx b/app/src/pages/playground/PlaygroundExperimentRunDetailsDialog.tsx
index 032d2721f3..76cd254eac 100644
--- a/app/src/pages/playground/PlaygroundExperimentRunDetailsDialog.tsx
+++ b/app/src/pages/playground/PlaygroundExperimentRunDetailsDialog.tsx
@@ -3,17 +3,11 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { css } from "@emotion/react";
 
-import {
-  Card,
-  CardProps,
-  Dialog,
-  Flex,
-  Heading,
-  Text,
-} from "@arizeai/components";
+import { Card, CardProps, Dialog, Heading, Text } from "@arizeai/components";
 
 import {
   CopyToClipboardButton,
+  Flex,
   Icon,
   Icons,
   View,
diff --git a/app/src/pages/playground/PlaygroundTool.tsx b/app/src/pages/playground/PlaygroundTool.tsx
index 47b46807d3..398e3bcc84 100644
--- a/app/src/pages/playground/PlaygroundTool.tsx
+++ b/app/src/pages/playground/PlaygroundTool.tsx
@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { JSONSchema7 } from "json-schema";
 
-import { Card, Flex, Text } from "@arizeai/components";
+import { Card, Text } from "@arizeai/components";
 
 import {
   Button,
   CopyToClipboardButton,
+  Flex,
   Icon,
   Icons,
 } from "@phoenix/components";
diff --git a/app/src/pages/profile/ProfilePage.tsx b/app/src/pages/profile/ProfilePage.tsx
index 2dee2be3ee..2be1333b38 100644
--- a/app/src/pages/profile/ProfilePage.tsx
+++ b/app/src/pages/profile/ProfilePage.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Flex } from "@arizeai/components";
-
+import { Flex } from "@phoenix/components";
 import { useViewer } from "@phoenix/contexts/ViewerContext";
 
 import { ViewerAPIKeys } from "./ViewerAPIKeys";
diff --git a/app/src/pages/profile/ViewerProfileCard.tsx b/app/src/pages/profile/ViewerProfileCard.tsx
index 639b2bfbfe..f2ca14f757 100644
--- a/app/src/pages/profile/ViewerProfileCard.tsx
+++ b/app/src/pages/profile/ViewerProfileCard.tsx
@@ -3,16 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 import { useNavigate } from "react-router";
 
-import {
-  Card,
-  Flex,
-  Form,
-  Heading,
-  Text,
-  TextField,
-} from "@arizeai/components";
+import { Card, Form, Heading, Text, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { UserPicture } from "@phoenix/components/user/UserPicture";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { useViewer } from "@phoenix/contexts/ViewerContext";
diff --git a/app/src/pages/project/DatasetSelectorPopoverContent.tsx b/app/src/pages/project/DatasetSelectorPopoverContent.tsx
index c2e4270c9b..2faf618bd9 100644
--- a/app/src/pages/project/DatasetSelectorPopoverContent.tsx
+++ b/app/src/pages/project/DatasetSelectorPopoverContent.tsx
@@ -2,16 +2,9 @@ import React, { useMemo, useState } from "react";
 import { graphql, useLazyLoadQuery, useRefetchableFragment } from "react-relay";
 import { css } from "@emotion/react";
 
-import {
-  Card,
-  Flex,
-  Item,
-  ListBox,
-  Text,
-  TextField,
-} from "@arizeai/components";
+import { Card, Item, ListBox, Text, TextField } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 
 import { DatasetSelectorPopoverContent_datasets$key } from "./__generated__/DatasetSelectorPopoverContent_datasets.graphql";
 import { DatasetSelectorPopoverContentDatasetsQuery } from "./__generated__/DatasetSelectorPopoverContentDatasetsQuery.graphql";
diff --git a/app/src/pages/project/SessionSearchField.tsx b/app/src/pages/project/SessionSearchField.tsx
index ae6187a08b..7da22880f7 100644
--- a/app/src/pages/project/SessionSearchField.tsx
+++ b/app/src/pages/project/SessionSearchField.tsx
@@ -3,9 +3,9 @@ import { nord } from "@uiw/codemirror-theme-nord";
 import CodeMirror from "@uiw/react-codemirror";
 import { css } from "@emotion/react";
 
-import { AddonBefore, Flex } from "@arizeai/components";
+import { AddonBefore } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { useTheme } from "@phoenix/contexts";
 
 import { useSessionSearchContext } from "./SessionSearchContext";
diff --git a/app/src/pages/project/SpanColumnSelector.tsx b/app/src/pages/project/SpanColumnSelector.tsx
index 5cf964b164..14b7e44f2a 100644
--- a/app/src/pages/project/SpanColumnSelector.tsx
+++ b/app/src/pages/project/SpanColumnSelector.tsx
@@ -3,9 +3,9 @@ import { graphql, useFragment } from "react-relay";
 import { Column } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Dropdown, Flex } from "@arizeai/components";
+import { Dropdown } from "@arizeai/components";
 
-import { Icon, Icons, View } from "@phoenix/components";
+import { Flex, Icon, Icons, View } from "@phoenix/components";
 import { useTracingContext } from "@phoenix/contexts/TracingContext";
 
 import { SpanColumnSelector_annotations$key } from "./__generated__/SpanColumnSelector_annotations.graphql";
diff --git a/app/src/pages/project/SpanFilterConditionField.tsx b/app/src/pages/project/SpanFilterConditionField.tsx
index fcfa6fa261..c1cc959b0b 100644
--- a/app/src/pages/project/SpanFilterConditionField.tsx
+++ b/app/src/pages/project/SpanFilterConditionField.tsx
@@ -19,7 +19,6 @@ import { css } from "@emotion/react";
 import {
   AddonBefore,
   Field,
-  Flex,
   Form,
   HelpTooltip,
   PopoverTrigger,
@@ -28,7 +27,7 @@ import {
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { useTheme } from "@phoenix/contexts";
 import environment from "@phoenix/RelayEnvironment";
 
diff --git a/app/src/pages/settings/DeleteUserDialog.tsx b/app/src/pages/settings/DeleteUserDialog.tsx
index 0356101415..668996a6ba 100644
--- a/app/src/pages/settings/DeleteUserDialog.tsx
+++ b/app/src/pages/settings/DeleteUserDialog.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Dialog, Flex, Text } from "@arizeai/components";
+import { Dialog, Text } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
 export function DeleteUserDialog({
diff --git a/app/src/pages/settings/SettingsPage.tsx b/app/src/pages/settings/SettingsPage.tsx
index b2c174f2ac..138dd3dc5e 100644
--- a/app/src/pages/settings/SettingsPage.tsx
+++ b/app/src/pages/settings/SettingsPage.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Card, Flex, TextField } from "@arizeai/components";
+import { Card, TextField } from "@arizeai/components";
 
-import { CopyToClipboardButton, View } from "@phoenix/components";
+import { CopyToClipboardButton, Flex, View } from "@phoenix/components";
 import { IsAdmin } from "@phoenix/components/auth";
 import { BASE_URL, VERSION } from "@phoenix/config";
 
diff --git a/app/src/pages/settings/SystemAPIKeysTable.tsx b/app/src/pages/settings/SystemAPIKeysTable.tsx
index b6c25ba794..9c2514c599 100644
--- a/app/src/pages/settings/SystemAPIKeysTable.tsx
+++ b/app/src/pages/settings/SystemAPIKeysTable.tsx
@@ -7,9 +7,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Flex } from "@arizeai/components";
-
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { DeleteAPIKeyButton } from "@phoenix/components/auth";
 import { TextCell } from "@phoenix/components/table";
 import { tableCSS } from "@phoenix/components/table/styles";
diff --git a/app/src/pages/settings/UserAPIKeysTable.tsx b/app/src/pages/settings/UserAPIKeysTable.tsx
index e49f137667..8ca34173b3 100644
--- a/app/src/pages/settings/UserAPIKeysTable.tsx
+++ b/app/src/pages/settings/UserAPIKeysTable.tsx
@@ -7,9 +7,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Flex } from "@arizeai/components";
-
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { DeleteAPIKeyButton } from "@phoenix/components/auth";
 import { TextCell } from "@phoenix/components/table";
 import { tableCSS } from "@phoenix/components/table/styles";
diff --git a/app/src/pages/settings/UserRoleChangeDialog.tsx b/app/src/pages/settings/UserRoleChangeDialog.tsx
index a26613ac74..e48bc51fcb 100644
--- a/app/src/pages/settings/UserRoleChangeDialog.tsx
+++ b/app/src/pages/settings/UserRoleChangeDialog.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Dialog, Flex, Text } from "@arizeai/components";
+import { Dialog, Text } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { normalizeUserRole } from "@phoenix/constants";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
diff --git a/app/src/pages/trace/SessionDetails.tsx b/app/src/pages/trace/SessionDetails.tsx
index f0e92a978f..7e7cbb1178 100644
--- a/app/src/pages/trace/SessionDetails.tsx
+++ b/app/src/pages/trace/SessionDetails.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
 
diff --git a/app/src/pages/trace/SessionDetailsTraceList.tsx b/app/src/pages/trace/SessionDetailsTraceList.tsx
index 484422a12d..d3d765e20e 100644
--- a/app/src/pages/trace/SessionDetailsTraceList.tsx
+++ b/app/src/pages/trace/SessionDetailsTraceList.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo } from "react";
 import { isNumber, isString } from "lodash";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 import {
   SemanticAttributePrefixes,
   UserAttributePostfixes,
 } from "@arizeai/openinference-semantic-conventions";
 
-import { Icon, Icons, Link, View } from "@phoenix/components";
+import { Flex, Icon, Icons, Link, View } from "@phoenix/components";
 import {
   AnnotationLabel,
   AnnotationTooltip,
diff --git a/app/src/pages/trace/SpanAnnotationsEmpty.tsx b/app/src/pages/trace/SpanAnnotationsEmpty.tsx
index 3114da35de..1c217432dc 100644
--- a/app/src/pages/trace/SpanAnnotationsEmpty.tsx
+++ b/app/src/pages/trace/SpanAnnotationsEmpty.tsx
@@ -5,11 +5,17 @@ import {
   Dialog,
   DialogContainer,
   EmptyGraphic,
-  Flex,
   Text,
 } from "@arizeai/components";
 
-import { Button, ExternalLink, Icon, Icons, View } from "@phoenix/components";
+import {
+  Button,
+  ExternalLink,
+  Flex,
+  Icon,
+  Icons,
+  View,
+} from "@phoenix/components";
 
 export function SpanAnnotationsEmpty() {
   const [dialog, setDialog] = useState<ReactNode>(null);
diff --git a/app/src/pages/trace/SpanAside.tsx b/app/src/pages/trace/SpanAside.tsx
index 574f100de6..fd82f77630 100644
--- a/app/src/pages/trace/SpanAside.tsx
+++ b/app/src/pages/trace/SpanAside.tsx
@@ -2,9 +2,9 @@ import React, { PropsWithChildren, useMemo } from "react";
 import { graphql, useRefetchableFragment } from "react-relay";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import { AnnotationLabel } from "@phoenix/components/annotation";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
diff --git a/app/src/pages/trace/SpanCodeDropdown.tsx b/app/src/pages/trace/SpanCodeDropdown.tsx
index 24fd6baeb5..5825022b0f 100644
--- a/app/src/pages/trace/SpanCodeDropdown.tsx
+++ b/app/src/pages/trace/SpanCodeDropdown.tsx
@@ -5,12 +5,17 @@ import {
   DropdownButton,
   DropdownMenu,
   DropdownTrigger,
-  Flex,
   Form,
   TextField,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton, Icon, Icons, View } from "@phoenix/components";
+import {
+  CopyToClipboardButton,
+  Flex,
+  Icon,
+  Icons,
+  View,
+} from "@phoenix/components";
 
 type SpanCodeDropdownProps = {
   spanId: string;
diff --git a/app/src/pages/trace/SpanDetails.tsx b/app/src/pages/trace/SpanDetails.tsx
index c362f9aa39..1d1105cc62 100644
--- a/app/src/pages/trace/SpanDetails.tsx
+++ b/app/src/pages/trace/SpanDetails.tsx
@@ -22,7 +22,6 @@ import {
   Counter,
   DialogContainer,
   EmptyGraphic,
-  Flex,
   Heading,
   Label,
   LabelProps,
@@ -50,6 +49,7 @@ import {
   Button,
   CopyToClipboardButton,
   ExternalLink,
+  Flex,
   Icon,
   Icons,
   View,
diff --git a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
index 4ceb5d417a..ebed4f01bb 100644
--- a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
+++ b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
-import { Alert, Card, CardProps, Dialog, Flex } from "@arizeai/components";
+import { Alert, Card, CardProps, Dialog } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { DatasetPicker, NewDatasetButton } from "@phoenix/components/dataset";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
diff --git a/app/src/pages/trace/TraceDetails.tsx b/app/src/pages/trace/TraceDetails.tsx
index 2ebc99d64f..006078983b 100644
--- a/app/src/pages/trace/TraceDetails.tsx
+++ b/app/src/pages/trace/TraceDetails.tsx
@@ -4,9 +4,9 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { useParams, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { Icon, Icons, Link, Loading, View } from "@phoenix/components";
+import { Flex, Icon, Icons, Link, Loading, View } from "@phoenix/components";
 import {
   AnnotationLabel,
   AnnotationTooltip,