diff --git a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
index 4b6a970e0..f6412c995 100644
--- a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
+++ b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
@@ -141,6 +141,7 @@ export const StyledToolButton = styled('button', {
         [`& ${StyledToolButtonInner}`]: {
           fontSize: '$1',
           padding: '0 $3',
+          gap: '$3',
         },
       },
       circle: {
diff --git a/packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx b/packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx
index 516c8972b..030fa9d58 100644
--- a/packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx
+++ b/packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx
@@ -2,17 +2,8 @@ import * as React from 'react'
 
 export function RedoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
-    <svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.5 2.495a.5.5 0 00-.5.5v2.5H9.5a.5.5 0 100 1h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.697 2.049a5 5 0 104.02 6.613.5.5 0 10-.944-.332 4 4 0 11-.946-4.16l.01.01 2.32 2.18a.5.5 0 00.685-.729l-2.314-2.175A5 5 0 007.697 2.05z"
-      />
+    <svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M4.32978 8.5081C4.32978 10.1923 5.70009 11.5625 7.38418 11.5625H8.46539C8.64456 11.5625 8.78975 11.4173 8.78975 11.2382V11.13C8.78975 10.9508 8.64457 10.8057 8.46539 10.8057H7.38418C6.11736 10.8057 5.08662 9.77492 5.08662 8.5081C5.08662 7.24128 6.11736 6.21054 7.38418 6.21054H9.37894L8.00515 7.58433C7.8576 7.73183 7.8576 7.97195 8.00515 8.11944C8.14833 8.26251 8.39751 8.2623 8.54036 8.11944L10.56 6.09971C10.6315 6.02824 10.6709 5.93321 10.6709 5.8321C10.6709 5.73106 10.6315 5.63598 10.56 5.56454L8.54025 3.54472C8.3974 3.40176 8.14801 3.40176 8.00513 3.54472C7.85758 3.69218 7.85758 3.93234 8.00513 4.07979L9.37892 5.45368H7.38418C5.70009 5.45368 4.32978 6.82393 4.32978 8.5081Z" />
     </svg>
   )
 }
diff --git a/packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx b/packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx
index d6215a413..b8fb9467e 100644
--- a/packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx
+++ b/packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx
@@ -2,17 +2,8 @@ import * as React from 'react'
 
 export function UndoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
-    <svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 2.495a.5.5 0 01.5.5v2.5h2.5a.5.5 0 110 1h-3a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.303 2.049a5 5 0 11-4.02 6.613.5.5 0 01.944-.332 4 4 0 10.946-4.16l-.01.01-2.32 2.18a.5.5 0 01-.685-.729l2.314-2.175A5 5 0 017.303 2.05z"
-      />
+    <svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M10.6707 8.5081C10.6707 10.1923 9.3004 11.5625 7.61631 11.5625H6.5351C6.35593 11.5625 6.21074 11.4173 6.21074 11.2382V11.13C6.21074 10.9508 6.35591 10.8057 6.5351 10.8057H7.61631C8.88313 10.8057 9.91387 9.77492 9.91387 8.5081C9.91387 7.24128 8.88313 6.21054 7.61631 6.21054H5.62155L6.99534 7.58433C7.14289 7.73183 7.14289 7.97195 6.99534 8.11944C6.85216 8.26251 6.60298 8.2623 6.46013 8.11944L4.44045 6.09971C4.36898 6.02824 4.32959 5.93321 4.32959 5.8321C4.32959 5.73106 4.36898 5.63598 4.44045 5.56454L6.46024 3.54472C6.60309 3.40176 6.85248 3.40176 6.99535 3.54472C7.14291 3.69218 7.14291 3.93234 6.99535 4.07979L5.62156 5.45368H7.61631C9.3004 5.45368 10.6707 6.82393 10.6707 8.5081Z" />
     </svg>
   )
 }
diff --git a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx b/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
index f4bb1406d..211412991 100644
--- a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
+++ b/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
@@ -38,6 +38,7 @@ import {
   TextAlignLeftIcon,
   TextAlignRightIcon,
 } from '@radix-ui/react-icons'
+import { RowButton } from '~components/Primitives/RowButton'
 
 const currentStyleSelector = (s: TDSnapshot) => s.appState.currentStyle
 const selectedIdsSelector = (s: TDSnapshot) =>
@@ -149,22 +150,25 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
 
   return (
     <DropdownMenu.Root dir="ltr">
-      <DMTriggerIcon>
-        <OverlapIcons
-          style={{
-            color: strokes[theme][displayedStyle.color as ColorStyle],
-          }}
-        >
-          {displayedStyle.isFilled && (
-            <CircleIcon
-              size={16}
-              stroke="none"
-              fill={fills[theme][displayedStyle.color as ColorStyle]}
-            />
-          )}
-          {DASH_ICONS[displayedStyle.dash]}
-        </OverlapIcons>
-      </DMTriggerIcon>
+      <DropdownMenu.Trigger asChild>
+        <ToolButton variant="text">
+          Styles
+          <OverlapIcons
+            style={{
+              color: strokes[theme][displayedStyle.color as ColorStyle],
+            }}
+          >
+            {displayedStyle.isFilled && (
+              <CircleIcon
+                size={16}
+                stroke="none"
+                fill={fills[theme][displayedStyle.color as ColorStyle]}
+              />
+            )}
+            {DASH_ICONS[displayedStyle.dash]}
+          </OverlapIcons>
+        </ToolButton>
+      </DropdownMenu.Trigger>
       <DMContent>
         <StyledRow variant="tall">
           <span>Color</span>
diff --git a/packages/tldraw/src/components/TopPanel/TopPanel.tsx b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
index 9925aecac..10c487927 100644
--- a/packages/tldraw/src/components/TopPanel/TopPanel.tsx
+++ b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
@@ -5,6 +5,10 @@ import { PageMenu } from './PageMenu'
 import { ZoomMenu } from './ZoomMenu'
 import { StyleMenu } from './StyleMenu'
 import { Panel } from '~components/Primitives/Panel'
+import { ToolButton } from '~components/Primitives/ToolButton'
+import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
+import { breakpoints } from '~components/breakpoints'
+import { useTldrawApp } from '~hooks'
 
 interface TopPanelProps {
   readOnly: boolean
@@ -23,6 +27,8 @@ export function TopPanel({
   showZoom,
   showSponsorLink,
 }: TopPanelProps) {
+  const app = useTldrawApp()
+
   return (
     <StyledTopPanel>
       {(showMenu || showPages) && (
@@ -35,6 +41,14 @@ export function TopPanel({
       {(showStyles || showZoom) && (
         <Panel side="right">
           {showStyles && !readOnly && <StyleMenu />}
+          <MobileOnly bp={breakpoints}>
+            <ToolButton>
+              <UndoIcon onClick={app.undo} />
+            </ToolButton>
+            <ToolButton>
+              <RedoIcon onClick={app.redo} />
+            </ToolButton>
+          </MobileOnly>
           {showZoom && <ZoomMenu />}
         </Panel>
       )}
@@ -60,3 +74,18 @@ const StyledSpacer = styled('div', {
   flexGrow: 2,
   pointerEvents: 'none',
 })
+
+const MobileOnly = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  variants: {
+    bp: {
+      small: {
+        display: 'inherit',
+      },
+      medium: {
+        display: 'none',
+      },
+    },
+  },
+})
diff --git a/packages/tldraw/src/components/breakpoints.tsx b/packages/tldraw/src/components/breakpoints.tsx
index dfd64f662..6100e1bdb 100644
--- a/packages/tldraw/src/components/breakpoints.tsx
+++ b/packages/tldraw/src/components/breakpoints.tsx
@@ -3,4 +3,9 @@
 /* -------------------------------------------------- */
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const breakpoints: any = { '@initial': 'mobile', '@sm': 'small' }
+export const breakpoints: any = {
+  '@initial': 'mobile',
+  '@micro': 'micro',
+  '@sm': 'small',
+  '@md': 'medium',
+}
diff --git a/packages/tldraw/src/styles/stitches.config.ts b/packages/tldraw/src/styles/stitches.config.ts
index 2a800f7ca..e1feafc0e 100644
--- a/packages/tldraw/src/styles/stitches.config.ts
+++ b/packages/tldraw/src/styles/stitches.config.ts
@@ -32,7 +32,8 @@ const { styled, createTheme } = createStitches({
       key: '1px 1px rgba(0,0,0,1)',
       panel: `0px 0px 16px -1px rgba(0, 0, 0, 0.05), 
         0px 0px 16px -8px rgba(0, 0, 0, 0.05), 
-        0px 0px 16px -12px rgba(0, 0, 0, 0.12)`,
+        0px 0px 16px -12px rgba(0, 0, 0, 0.12),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.08)`,
     },
     space: {
       0: '2px',