diff --git a/.changeset/thirty-toys-prove.md b/.changeset/thirty-toys-prove.md
new file mode 100644
index 000000000..d68162899
--- /dev/null
+++ b/.changeset/thirty-toys-prove.md
@@ -0,0 +1,7 @@
+---
+"@orbit-ui/transition-components": major
+---
+
+- Alert is now dismissable by default. This is potentially a breaking change if you we're not expecting the alert to be closable. To fix this, either add `dismissable={false}` to the Alert, or handle the `onClose` event handler.
+
+- Dialog small size has been slightly reduced by 84px.
diff --git a/.storybook/components/component-info/ComponentInfo.tsx b/.storybook/components/component-info/ComponentInfo.tsx
index 20fd16d9c..30e8a92fd 100644
--- a/.storybook/components/component-info/ComponentInfo.tsx
+++ b/.storybook/components/component-info/ComponentInfo.tsx
@@ -29,7 +29,7 @@ const ExtendLinks = {
 };
 
 
-export interface ComponentInfoProps extends ComponentProps<"dl">{
+export interface ComponentInfoProps extends ComponentProps<"dl"> {
     usage: string | {
         sharegate: string;
     };
diff --git a/packages/components/src/alert/docs/Alert.stories.mdx b/packages/components/src/alert/docs/Alert.stories.mdx
index bd99a131a..9486d4a33 100644
--- a/packages/components/src/alert/docs/Alert.stories.mdx
+++ b/packages/components/src/alert/docs/Alert.stories.mdx
@@ -155,38 +155,18 @@ Use a destructive alert to confirm a permanent change, like deleting data.
     </Story>
 </Preview>
 
-### Warning
+### Not Dismissable
 
-Use a warning alert to inform of a significant change.
+An alert can be undismissable.
 
 <Preview>
-    <Story name="warning">
+    <Story name="not dismissable">
         <AlertTrigger>
             <Button variant="secondary">Open</Button>
             <Alert
-                variant="warning"
-                primaryButtonLabel="Ok"
-                secondaryButtonLabel="Diagnose"
-            >
-                <Heading>Low carburant</Heading>
-                <Content>The space shuttle will be out of fuel in an hour.</Content>
-            </Alert>
-        </AlertTrigger>
-    </Story>
-</Preview>
-
-### Negative
-
-Use a negative alert to inform that something went wrong, like a server error.
-
-<Preview>
-    <Story name="negative">
-        <AlertTrigger>
-            <Button variant="secondary">Open</Button>
-            <Alert
-                variant="negative"
                 primaryButtonLabel="Retry"
                 cancelButtonLabel="Cancel"
+                dismissable={false}
             >
                 <Heading>Network error</Heading>
                 <Content>Something went wrong while connecting to NASA network. Please try again in a few minutes.</Content>
diff --git a/packages/components/src/alert/src/Alert.css b/packages/components/src/alert/src/Alert.css
index cc954ec56..dc1a84ff9 100644
--- a/packages/components/src/alert/src/Alert.css
+++ b/packages/components/src/alert/src/Alert.css
@@ -1,7 +1,29 @@
-.o-ui-alert-warning-icon {
-    color: var(--hop-warning-icon-weak);
+.o-ui-alert-button-group > .o-ui-button {
+    max-width: 50%;
+    width: 50%;
+    flex-grow: 1;
+    flex-basis: 0;
 }
 
-.o-ui-alert-negative-icon {
-    color: var(--hop-danger-icon-weak);
+.o-ui-alert-heading {
+    text-align: left;
+    width: 100%;
+}
+
+.o-ui-alert-content {
+    text-align: left;
+}
+
+/* We need to determine a sensitive max-width to wrap - 360px seems like a good point */
+@media all and (max-width: 40rem) {
+    .o-ui-alert-button-group > .o-ui-button {
+        max-width: 100%;
+        width: 100%;
+    }
+    .o-ui-alert-heading {
+        text-align: center;
+    }
+    .o-ui-alert-content {
+        text-align: center;
+    }
 }
diff --git a/packages/components/src/alert/src/Alert.tsx b/packages/components/src/alert/src/Alert.tsx
index 96d78b56f..88d779baa 100644
--- a/packages/components/src/alert/src/Alert.tsx
+++ b/packages/components/src/alert/src/Alert.tsx
@@ -1,13 +1,11 @@
 import { AbstractDialogProps, Dialog, useDialogTriggerContext } from "../../dialog";
 import { Button, ButtonGroup } from "../../button";
 import { ComponentProps, MouseEvent, forwardRef, useMemo } from "react";
-import { Header } from "../../placeholders";
-import { WarningIcon } from "@hopper-ui/icons";
 import { OmitInternalProps, isNil, isNilOrEmpty, mergeProps, useChainedEventCallback, useSlots } from "../../shared";
 
 const DefaultElement = "section";
 
-export interface InnerAlertProps extends Omit<AbstractDialogProps<typeof DefaultElement>, "dismissable"> {
+export interface InnerAlertProps extends AbstractDialogProps<typeof DefaultElement> {
     /**
      * The button to focus by default when the alert open.
      */
@@ -53,7 +51,7 @@ export interface InnerAlertProps extends Omit<AbstractDialogProps<typeof Default
     /**
      * The style to use.
      */
-    variant?: "confirmation" | "destructive" | "warning" | "negative";
+    variant?: "confirmation" | "destructive";
 }
 
 export function InnerAlert({
@@ -61,6 +59,7 @@ export function InnerAlert({
     autoFocusButton,
     cancelButtonLabel,
     children,
+    dismissable = true,
     forwardedRef,
     onCancelButtonClick,
     onPrimaryButtonClick,
@@ -79,8 +78,12 @@ export function InnerAlert({
         _: {
             required: ["heading", "content"]
         },
-        content: null,
-        heading: null
+        content: {
+            className: "o-ui-alert-content"
+        },
+        heading: {
+            className: "o-ui-alert-heading"
+        }
     }), []));
 
     const handlePrimaryButtonClick = useChainedEventCallback(onPrimaryButtonClick, event => {
@@ -101,18 +104,6 @@ export function InnerAlert({
         }
     });
 
-    const warningIconMarkup = variant === "warning" && (
-        <Header>
-            <WarningIcon className="o-ui-alert-icon o-ui-alert-warning-icon" />
-        </Header>
-    );
-
-    const negativeIconMarkup = variant === "negative" && (
-        <Header>
-            <WarningIcon className="o-ui-alert-icon o-ui-alert-negative-icon" />
-        </Header>
-    );
-
     const primaryButtonMarkup = (
         <Button
             autoFocus={isNil(autoFocusButton) || autoFocusButton === "primary"}
@@ -135,7 +126,6 @@ export function InnerAlert({
         </Button>
     );
 
-
     const cancelButtonMarkup = !isNilOrEmpty(cancelButtonLabel) && (
         <Button
             autoFocus={autoFocusButton === "cancel"}
@@ -149,7 +139,17 @@ export function InnerAlert({
     const buttonsMarkup = isNil(secondaryButtonMarkup) && isNil(cancelButtonMarkup)
         ? primaryButtonMarkup
         : (
-            <ButtonGroup>
+            <ButtonGroup
+                className="o-ui-alert-button-group"
+                fluid={{
+                    base: true,
+                    xs: false
+                }}
+                orientation={{
+                    base: "vertical",
+                    xs: "horizontal"
+                }}
+            >
                 {cancelButtonMarkup}
                 {secondaryButtonMarkup}
                 {primaryButtonMarkup}
@@ -162,7 +162,8 @@ export function InnerAlert({
                 rest,
                 {
                     as,
-                    dismissable: false,
+                    className: "o-ui-alert o-ui-alert-dialog",
+                    dismissable,
                     ref: forwardedRef,
                     role: "alertdialog" as const,
                     size: "sm" as const,
@@ -171,8 +172,6 @@ export function InnerAlert({
             )}
         >
             {heading}
-            {warningIconMarkup}
-            {negativeIconMarkup}
             {content}
             {buttonsMarkup}
         </Dialog>
diff --git a/packages/components/src/alert/src/AlertTrigger.tsx b/packages/components/src/alert/src/AlertTrigger.tsx
index 6985a4a95..39f7eb0c9 100644
--- a/packages/components/src/alert/src/AlertTrigger.tsx
+++ b/packages/components/src/alert/src/AlertTrigger.tsx
@@ -11,7 +11,6 @@ export function InnerAlertTrigger({
     return (
         <DialogTrigger
             {...rest}
-            dismissable={false}
             ref={forwardedRef}
         />
     );
diff --git a/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx b/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx
index 8f5fbd526..96229cf9a 100644
--- a/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx
+++ b/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx
@@ -14,10 +14,6 @@ createTestSuite(<Alert variant="confirmation" />, stories("/confirmation"));
 
 createTestSuite(<Alert variant="destructive" />, stories("/destructive"));
 
-createTestSuite(<Alert variant="warning" />, stories("/warning"));
-
-createTestSuite(<Alert variant="negative" />, stories("/negative"));
-
 stories()
     .add("styled system", () =>
         <Alert
diff --git a/packages/components/src/alert/tests/chromatic/createTestSuite.jsx b/packages/components/src/alert/tests/chromatic/createTestSuite.jsx
index fa79c0569..9548e1c6e 100644
--- a/packages/components/src/alert/tests/chromatic/createTestSuite.jsx
+++ b/packages/components/src/alert/tests/chromatic/createTestSuite.jsx
@@ -70,6 +70,17 @@ export function createTestSuite(element, stories) {
                 <Content>Are you sure you want to launch the space shuttle?</Content>
             </Alert>
         )
+        .add("not dismissable", () =>
+            <Alert
+                primaryButtonLabel="Launch"
+                secondaryButtonLabel="Postpone"
+                element={element}
+                dismissable={false}
+            >
+                <Heading>Launch</Heading>
+                <Content>Are you sure you want to launch the space shuttle?</Content>
+            </Alert>
+        )
         .add("zoom in", () =>
             <Div className="zoom-in">
                 <Alert primaryButtonLabel="Yes" element={element}>
diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css
index 04fed2d86..4b0878efd 100644
--- a/packages/components/src/dialog/src/Dialog.css
+++ b/packages/components/src/dialog/src/Dialog.css
@@ -49,7 +49,7 @@
 
 /* DIALOG | SIZES */
 .o-ui-dialog-sm {
-    width: 34rem;
+    width: 28.75rem;
 }
 
 .o-ui-dialog-md {