diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index c608f66000..0000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**To Reproduce**
-
-Steps to reproduce the behavior:
-
-1.
-
-**Expected behavior**
-
-<!-- A clear and concise description of what you expected to happen. -->
-
-**Screenshots**
-
-<!-- If applicable, add screenshots to help explain your problem. -->
-
-**Details**
-
- - Platform: <!-- desktop chrome windows, mobile safari, iOS, Android -->
- - Platform version:
- - App version:
-
-**Additional context**
-
-<!-- Add any other context about the problem here. -->
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000000..4f3041b40e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,67 @@
+name: "Bug Report"
+description: "Create a report for an issue you have experience in the app."
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report an issue you've found in the app! Before you submit this issue, please make
+        sure you've searched for similar issues that are already open and being tracked. If you find an open issue that
+        seems relevant to yours, it is best to leave a response there with your information instead of opening a new
+        issue, since it helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        Please provide the steps that may reproduce the issue that you are experiencing. The more concise of a
+        reproduction that you provide, the easier it will be for us to identify the issue and fix it in a timely manner.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If possible, please provide any images or videos that may help us understand the issue you are experiencing.
+    validations:
+      required: false
+  - type: dropdown
+    attributes:
+      label: What platform(s) does this occur on?
+      multiple: true
+      options:
+        - iOS
+        - Android
+        - Web (Desktop)
+        - Web (Mobile)
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Device Info
+      description: |
+        Please provide the device information that you are using when experiencing this issue. This can include the
+        device model, operating system version, and any other relevant information.
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: What version of the app are you using?
+      description: |
+        You can easily find this information by visting the Settings screen in the app, and tapping on the version info
+        at the bottom of the screen. All the relevant information will be copied to your clipboard, and you will be
+        able to share it here.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: |
+        Please provide any additional information that you think may be helpful in identifying the issue you are
+        experiencing. This can include any error messages, logs, or other information that you think may be relevant.
+    validations:
+        required: false
diff --git a/.github/ISSUE_TEMPLATE/bug_report_fabric.yml b/.github/ISSUE_TEMPLATE/bug_report_fabric.yml
new file mode 100644
index 0000000000..83782bf69d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report_fabric.yml
@@ -0,0 +1,72 @@
+name: "Bug Report - Fabric/New Architecture"
+description: "Create a bug report for builds using the New Architecture. If you are not sure what that means, don't use this template, and instead use the default bug report template."
+labels: ["bug", "fabric"]
+body:
+  - type: checkboxes
+    attributes:
+      label: You're running a build that uses the React Native New Architecture, right?
+      description: This template is specifically for issues related to builds that use the React Native New Architecture. If you are not sure what that means, this template is probably not relevant to you, and you should use the default Bug Report template.
+      options:
+        - label: I am running a build that uses the New Architecture
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report an issue you've found in the app! Before you submit this issue, please make
+        sure you've searched for similar issues that are already open and being tracked. If you find an open issue that
+        seems relevant to yours, it is best to leave a response there with your information instead of opening a new
+        issue, since it helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        Please provide the steps that may reproduce the issue that you are experiencing. The more concise of a
+        reproduction that you provide, the easier it will be for us to identify the issue and fix it in a timely manner.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If possible, please provide any images or videos that may help us understand the issue you are experiencing.
+    validations:
+      required: false
+  - type: dropdown
+    attributes:
+      label: What platform(s) does this occur on?
+      multiple: true
+      options:
+        - iOS
+        - Android
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Device Info
+      description: |
+        Please provide the device information that you are using when experiencing this issue. This can include the
+        device model, operating system version, and any other relevant information.
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: What version of the app are you using?
+      description: |
+        You can easily find this information by visting the Settings screen in the app, and tapping on the version info
+        at the bottom of the screen. All the relevant information will be copied to your clipboard, and you will be
+        able to share it here.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: |
+        Please provide any additional information that you think may be helpful in identifying the issue you are
+        experiencing. This can include any error messages, logs, or other information that you think may be relevant.
+    validations:
+        required: false
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index 0ac6b3c416..0000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: feature-request
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-**Describe the solution you'd like**
-
-<!-- A clear and concise description of what you want to happen. -->
-
-**Describe alternatives you've considered**
-
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-**Additional context**
-
-<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000000..f296e94360
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,45 @@
+name: "Feature Request"
+description: "Suggest an idea for the Bluesky app."
+labels: ["feature-request"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for submitting a feature request! Before you submit this request, please make sure you've searched for
+        similar requests that are already open and being tracked. If you find an open request that seems relevant to
+        yours, it is best to leave a response there with your information instead of opening a new request, since it
+        helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Describe the Feature
+      description: |
+        Please provide a detailed description of the feature you would like to see implemented in the app. The more
+        information you provide, the easier it will be for us to understand the feature you are requesting and to
+        implement it in a timely manner.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If helpful, provide some images or videos of similar features in other apps that you think would be helpful
+        for us to understand the feature you are requesting, or places within the app that you think the feature belongs
+        in or is missing from.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe Alternatives
+      description: |
+        If there are any alternative solutions or features that you think would be helpful to implement in place of the
+        feature you are requesting, please provide a description of those as well.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: |
+        If there is any additional context or information that you think would be helpful for us to know about the
+        feature you are requesting, please provide that information here.
+    validations:
+      required: false
diff --git a/.prettierignore b/.prettierignore
index 8ccbae2148..e107e129a4 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -15,3 +15,6 @@ android
 ios
 src/locale/locales
 lib/react-compiler-runtime
+bskyweb/static
+coverage
+web-build
diff --git a/src/lib/strings/__tests__/email.test.ts b/__tests__/lib/email.test.ts
similarity index 100%
rename from src/lib/strings/__tests__/email.test.ts
rename to __tests__/lib/email.test.ts
diff --git a/app.config.js b/app.config.js
index fe65c4fde5..6b2bad9385 100644
--- a/app.config.js
+++ b/app.config.js
@@ -234,24 +234,8 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              // './assets/fonts/inter/Inter-Thin.otf',
-              // './assets/fonts/inter/Inter-ThinItalic.otf',
-              // './assets/fonts/inter/Inter-ExtraLight.otf',
-              // './assets/fonts/inter/Inter-ExtraLightItalic.otf',
-              // './assets/fonts/inter/Inter-Light.otf',
-              // './assets/fonts/inter/Inter-LightItalic.otf',
-              './assets/fonts/inter/Inter-Regular.otf',
-              './assets/fonts/inter/Inter-Italic.otf',
-              './assets/fonts/inter/Inter-Medium.otf',
-              './assets/fonts/inter/Inter-MediumItalic.otf',
-              './assets/fonts/inter/Inter-SemiBold.otf',
-              './assets/fonts/inter/Inter-SemiBoldItalic.otf',
-              './assets/fonts/inter/Inter-Bold.otf',
-              './assets/fonts/inter/Inter-BoldItalic.otf',
-              './assets/fonts/inter/Inter-ExtraBold.otf',
-              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
-              './assets/fonts/inter/Inter-Black.otf',
-              './assets/fonts/inter/Inter-BlackItalic.otf',
+              './assets/fonts/inter/InterVariable.ttf',
+              './assets/fonts/inter/InterVariable-Italic.ttf',
             ],
           },
         ],
diff --git a/assets/fonts/inter/InterVariable-Italic.ttf b/assets/fonts/inter/InterVariable-Italic.ttf
new file mode 100644
index 0000000000..ed674e77cb
Binary files /dev/null and b/assets/fonts/inter/InterVariable-Italic.ttf differ
diff --git a/assets/fonts/inter/InterVariable.ttf b/assets/fonts/inter/InterVariable.ttf
new file mode 100644
index 0000000000..2d4b47093a
Binary files /dev/null and b/assets/fonts/inter/InterVariable.ttf differ
diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index fd80a5ed14..54c5f075ac 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/bskyweb/cmd/bskyweb/server.go
@@ -255,6 +255,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/intent/verify-email", server.WebGeneric)
 	e.GET("/messages", server.WebGeneric)
 	e.GET("/messages/:conversation", server.WebGeneric)
 
@@ -279,6 +280,7 @@ func serve(cctx *cli.Context) error {
 
 	// starter packs
 	e.GET("/starter-pack/:handleOrDID/:rkey", server.WebStarterPack)
+	e.GET("/starter-pack-short/:code", server.WebGeneric)
 	e.GET("/start/:handleOrDID/:rkey", server.WebStarterPack)
 
 	// ipcc
diff --git a/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf b/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
deleted file mode 100644
index 44d1779af6..0000000000
Binary files a/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf b/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
deleted file mode 100644
index 6fc475e415..0000000000
Binary files a/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf b/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
deleted file mode 100644
index 58a38073e8..0000000000
Binary files a/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf b/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
deleted file mode 100644
index e67935aa5a..0000000000
Binary files a/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf b/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
deleted file mode 100644
index 66cd95228c..0000000000
Binary files a/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf b/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
deleted file mode 100644
index f269814a64..0000000000
Binary files a/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf b/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
deleted file mode 100644
index f78848b987..0000000000
Binary files a/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf b/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
deleted file mode 100644
index f44f89adac..0000000000
Binary files a/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf b/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
deleted file mode 100644
index 1970f57214..0000000000
Binary files a/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf b/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
deleted file mode 100644
index 2d0bd1d645..0000000000
Binary files a/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf b/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
deleted file mode 100644
index 52c84550ba..0000000000
Binary files a/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf and /dev/null differ
diff --git a/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf b/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
deleted file mode 100644
index b725bfc883..0000000000
Binary files a/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf and /dev/null differ
diff --git a/bskyweb/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf b/bskyweb/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf
new file mode 100644
index 0000000000..ed674e77cb
Binary files /dev/null and b/bskyweb/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf differ
diff --git a/bskyweb/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf b/bskyweb/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf
new file mode 100644
index 0000000000..2d4b47093a
Binary files /dev/null and b/bskyweb/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf differ
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 03686ef5c4..885d13d2a7 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -13,24 +13,8 @@
 
   <!-- Hello Humans! API docs at https://atproto.com -->
 
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-  -->
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
 
   <style>
     /**
@@ -53,7 +37,7 @@
     body {
       margin: 0px;
       padding: 0px;
-      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
       text-rendering: optimizeLegibility;
       /* Platform-specific reset */
       -webkit-overflow-scrolling: touch;
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 53e8274d54..323f668b79 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -78,8 +78,8 @@ import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
 import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
-import {MessagesScreen} from '#/screens/Messages/List'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 0c8eb330d7..2625beda27 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -901,4 +901,32 @@ export const atoms = {
   hidden: {
     display: 'none',
   },
+
+  /*
+   * Transition
+   */
+  transition_none: web({
+    transitionProperty: 'none',
+  }),
+  transition_all: web({
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_color: web({
+    transitionProperty:
+      'color, background-color, border-color, text-decoration-color, fill, stroke',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_opacity: web({
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_transform: web({
+    transitionProperty: 'transform',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
 } as const
diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
index 46c741bc79..54fe7a34e0 100644
--- a/src/alf/fonts.ts
+++ b/src/alf/fonts.ts
@@ -1,3 +1,5 @@
+import {useFonts} from 'expo-font'
+
 import {isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'
 
@@ -40,31 +42,10 @@ export function applyFonts(
   fontFamily: 'system' | 'theme',
 ) {
   if (fontFamily === 'theme') {
-    style.fontFamily =
-      {
-        // '100': 'Inter-Thin',
-        // '200': 'Inter-ExtraLight',
-        // '300': 'Inter-Light',
-        // '500': 'Inter-Medium',
-        // '700': 'Inter-Bold',
-        // '900': 'Inter-Black',
-        '100': 'Inter-Regular',
-        '200': 'Inter-Regular',
-        '300': 'Inter-Regular',
-        '400': 'Inter-Regular',
-        '500': 'Inter-SemiBold',
-        '600': 'Inter-SemiBold',
-        '700': 'Inter-SemiBold',
-        '800': 'Inter-ExtraBold',
-        '900': 'Inter-ExtraBold',
-      }[style.fontWeight as string] || 'Inter-Regular'
+    style.fontFamily = 'InterVariable'
 
     if (style.fontStyle === 'italic') {
-      if (style.fontFamily === 'Inter-Regular') {
-        style.fontFamily = 'Inter-Italic'
-      } else {
-        style.fontFamily += 'Italic'
-      }
+      style.fontFamily += 'Italic'
     }
 
     // fallback families only supported on web
@@ -84,3 +65,15 @@ export function applyFonts(
    */
   style.fontVariant = ['no-contextual']
 }
+
+/*
+ * IMPORTANT: This is unused. Expo statically extracts these fonts.
+ *
+ * All used fonts MUST be configured here. Unused fonts can be commented out.
+ */
+export function DO_NOT_USE() {
+  return useFonts({
+    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
+    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
+  })
+}
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
deleted file mode 100644
index 5c21ee05be..0000000000
--- a/src/components/dms/MessagesNUX.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, {useCallback, useEffect} from 'react'
-import {View} from 'react-native'
-import {ChatBskyActorDeclaration} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import * as Toggle from '#/components/forms/Toggle'
-import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
-import {Text} from '#/components/Typography'
-
-export function MessagesNUX() {
-  const control = Dialog.useDialogControl()
-
-  const {currentAccount} = useSession()
-  const {data: profile} = useProfileQuery({
-    did: currentAccount!.did,
-  })
-
-  useEffect(() => {
-    if (profile && typeof profile.associated?.chat === 'undefined') {
-      const timeout = setTimeout(() => {
-        control.open()
-      }, 1000)
-
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [profile, control])
-
-  if (!profile) return null
-
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <DialogInner chatDeclation={profile.associated?.chat} />
-    </Dialog.Outer>
-  )
-}
-
-function DialogInner({
-  chatDeclation,
-}: {
-  chatDeclation?: ChatBskyActorDeclaration.Record
-}) {
-  const control = Dialog.useDialogContext()
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const [initialized, setInitialzed] = React.useState(false)
-  const {mutate: updateDeclaration} = useUpdateActorDeclaration({
-    onError: () => {
-      Toast.show(_(msg`Failed to update settings`), 'xmark')
-    },
-  })
-
-  const onSelectItem = useCallback(
-    (keys: string[]) => {
-      const key = keys[0]
-      if (!key) return
-      updateDeclaration(key as 'all' | 'none' | 'following')
-    },
-    [updateDeclaration],
-  )
-
-  useEffect(() => {
-    if (!chatDeclation && !initialized) {
-      updateDeclaration('following')
-      setInitialzed(true)
-    }
-  }, [chatDeclation, updateDeclaration, initialized])
-
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Introducing Direct Messages`)}
-      style={web({maxWidth: 440})}>
-      <View style={a.gap_xl}>
-        <View style={[a.align_center, a.pt_sm, a.pb_xs]}>
-          <Message_Stroke2_Corner0_Rounded width={64} />
-          <Text style={[a.text_2xl, a.font_bold, a.text_center, a.mt_md]}>
-            <Trans>Direct messages are here!</Trans>
-          </Text>
-          <Text style={[a.text_md, a.text_center, a.mt_sm]}>
-            <Trans>Privately chat with other users.</Trans>
-          </Text>
-        </View>
-        <View
-          style={[
-            a.gap_xs,
-            a.border,
-            a.overflow_hidden,
-            a.rounded_sm,
-            t.atoms.border_contrast_low,
-          ]}>
-          <View
-            style={[
-              a.p_md,
-              a.border_b,
-              t.atoms.bg_contrast_25,
-              t.atoms.border_contrast_low,
-            ]}>
-            <Text style={[a.text_sm, a.font_bold]}>
-              <Trans>Who can message you?</Trans>
-            </Text>
-            <Text
-              style={[
-                a.mt_xs,
-                a.text_sm,
-                a.italic,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>You can change this at any time.</Trans>
-            </Text>
-          </View>
-          <View style={[a.px_md, a.py_xs]}>
-            <Toggle.Group
-              label={_(msg`Who can message you?`)}
-              type="radio"
-              values={[chatDeclation?.allowIncoming ?? 'following']}
-              onChange={onSelectItem}>
-              <View>
-                <Toggle.Item
-                  name="all"
-                  label={_(msg`Everyone`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Everyone</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="following"
-                  label={_(msg`Users I follow`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Users I follow</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="none"
-                  label={_(msg`No one`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>No one</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-              </View>
-            </Toggle.Group>
-          </View>
-        </View>
-        <Button
-          label={_(msg`Start chatting`)}
-          accessibilityHint={_(msg`Close modal`)}
-          size="large"
-          color="primary"
-          variant="solid"
-          onPress={() => control.close()}>
-          <ButtonText>
-            <Trans>Get started</Trans>
-          </ButtonText>
-        </Button>
-      </View>
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
-  )
-}
diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx
new file mode 100644
index 0000000000..30791d0052
--- /dev/null
+++ b/src/components/forms/SearchInput.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import {TextInput, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from '#/lib/constants'
+import {isNative} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass2'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+
+type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
+  label?: TextField.InputProps['label']
+  /**
+   * Called when the user presses the (X) button
+   */
+  onClearText?: () => void
+}
+
+export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
+  function SearchInput({value, label, onClearText, ...rest}, ref) {
+    const t = useTheme()
+    const {_} = useLingui()
+
+    return (
+      <View style={[a.w_full, a.relative]}>
+        <TextField.Root>
+          <TextField.Icon icon={MagnifyingGlassIcon} />
+          <TextField.Input
+            inputRef={ref}
+            label={label || _(msg`Search`)}
+            value={value}
+            placeholder={_(msg`Search`)}
+            returnKeyType="search"
+            keyboardAppearance={t.scheme}
+            selectTextOnFocus={isNative}
+            autoFocus={false}
+            accessibilityRole="search"
+            autoCorrect={false}
+            autoComplete="off"
+            autoCapitalize="none"
+            {...rest}
+          />
+        </TextField.Root>
+
+        {value && value.length > 0 && (
+          <View
+            style={[
+              a.absolute,
+              a.z_10,
+              a.my_auto,
+              a.inset_0,
+              a.justify_center,
+              a.pr_sm,
+              {left: 'auto'},
+            ]}>
+            <Button
+              testID="searchTextInputClearBtn"
+              onPress={onClearText}
+              label={_(msg`Clear search query`)}
+              hitSlop={HITSLOP_10}
+              size="tiny"
+              shape="round"
+              variant="ghost"
+              color="secondary">
+              <ButtonIcon icon={X} size="xs" />
+            </Button>
+          </View>
+        )}
+      </View>
+    )
+  },
+)
diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
index 21928d3df3..96d3481cd4 100644
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -126,7 +126,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput>
+  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
 }
 
 export function createInput(Component: typeof TextInput) {
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index e8c63af82f..c78aabb6d4 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -3,11 +3,14 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent, useSession} from 'state/session'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {isNative} from '#/platform/detection'
+import {useAgent, useSession} from '#/state/session'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -23,7 +26,9 @@ export function VerifyEmailIntentDialog() {
   )
 }
 
-function Inner({control}: {control: DialogControlProps}) {
+function Inner({}: {control: DialogControlProps}) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {verifyEmailState: state} = useIntentDialogs()
   const [status, setStatus] = React.useState<
@@ -58,43 +63,47 @@ function Inner({control}: {control: DialogControlProps}) {
   }
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Verify email dialog`)}>
-      <Dialog.Close />
+    <Dialog.ScrollableInner
+      label={_(msg`Verify email dialog`)}
+      style={[
+        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      ]}>
       <View style={[a.gap_xl]}>
         {status === 'loading' ? (
           <View style={[a.py_2xl, a.align_center, a.justify_center]}>
-            <Loader size="xl" />
+            <Loader size="xl" fill={t.atoms.text_contrast_low.color} />
           </View>
         ) : status === 'success' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Email Verified</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
-                Thanks, you have successfully verified your email address.
+                Thanks, you have successfully verified your email address. You
+                can close this dialog.
               </Trans>
             </Text>
-          </>
+          </View>
         ) : status === 'failure' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Invalid Verification Code</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
                 The verification code you have provided is invalid. Please make
                 sure that you have used the correct verification link or request
                 a new one.
               </Trans>
             </Text>
-          </>
+          </View>
         ) : (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Email Resent</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
                 We have sent another verification email to{' '}
                 <Text style={[a.text_md, a.font_bold]}>
@@ -103,38 +112,29 @@ function Inner({control}: {control: DialogControlProps}) {
                 .
               </Trans>
             </Text>
-          </>
+          </View>
         )}
-        {status !== 'loading' ? (
-          <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
+
+        {status === 'failure' && (
+          <>
+            <Divider />
             <Button
-              label={_(msg`Close`)}
-              onPress={() => control.close()}
+              label={_(msg`Resend Verification Email`)}
+              onPress={onPressResendEmail}
               variant="solid"
-              color={status === 'failure' ? 'secondary' : 'primary'}
+              color="secondary_inverted"
               size="large"
-              style={{marginLeft: 'auto'}}>
+              disabled={sending}>
+              <ButtonIcon icon={sending ? Loader : Resend} position="left" />
               <ButtonText>
-                <Trans>Close</Trans>
+                <Trans>Resend Email</Trans>
               </ButtonText>
             </Button>
-            {status === 'failure' ? (
-              <Button
-                label={_(msg`Resend Verification Email`)}
-                onPress={onPressResendEmail}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={sending}>
-                <ButtonText>
-                  <Trans>Resend Email</Trans>
-                </ButtonText>
-                {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </Button>
-            ) : null}
-          </View>
-        ) : null}
+          </>
+        )}
       </View>
+
+      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 1e51c7f255..51bf51ffff 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -13,6 +13,8 @@ import {
   RichText,
 } from '@atproto/api'
 
+import {isNetworkError} from '#/lib/strings/errors'
+import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
 import {logger} from '#/logger'
 import {ComposerImage, compressImage} from '#/state/gallery'
 import {writePostgateRecord} from '#/state/queries/postgate'
@@ -22,8 +24,7 @@ import {
   threadgateAllowUISettingToAllowRecordValue,
   writeThreadgateRecord,
 } from '#/state/queries/threadgate'
-import {isNetworkError} from 'lib/strings/errors'
-import {shortenLinks, stripInvalidMentions} from 'lib/strings/rich-text-manip'
+import {ComposerState} from '#/view/com/composer/state'
 import {LinkMeta} from '../link-meta/link-meta'
 import {uploadBlob} from './upload-blob'
 
@@ -38,6 +39,7 @@ export interface ExternalEmbedDraft {
 }
 
 interface PostOpts {
+  composerState: ComposerState // TODO: Not used yet.
   rawText: string
   replyTo?: string
   quote?: {
@@ -60,13 +62,6 @@ interface PostOpts {
 }
 
 export async function post(agent: BskyAgent, opts: PostOpts) {
-  let embed:
-    | AppBskyEmbedImages.Main
-    | AppBskyEmbedExternal.Main
-    | AppBskyEmbedRecord.Main
-    | AppBskyEmbedVideo.Main
-    | AppBskyEmbedRecordWithMedia.Main
-    | undefined
   let reply
   let rt = new RichText({text: opts.rawText.trimEnd()}, {cleanNewlines: true})
 
@@ -77,134 +72,7 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
   rt = shortenLinks(rt)
   rt = stripInvalidMentions(rt)
 
-  // add quote embed if present
-  if (opts.quote) {
-    embed = {
-      $type: 'app.bsky.embed.record',
-      record: {
-        uri: opts.quote.uri,
-        cid: opts.quote.cid,
-      },
-    } as AppBskyEmbedRecord.Main
-  }
-
-  // add image embed if present
-  if (opts.images?.length) {
-    logger.debug(`Uploading images`, {
-      count: opts.images.length,
-    })
-
-    const images: AppBskyEmbedImages.Image[] = []
-    for (const image of opts.images) {
-      opts.onStateChange?.(`Uploading image #${images.length + 1}...`)
-
-      logger.debug(`Compressing image`)
-      const {path, width, height, mime} = await compressImage(image)
-
-      logger.debug(`Uploading image`)
-      const res = await uploadBlob(agent, path, mime)
-
-      images.push({
-        image: res.data.blob,
-        alt: image.alt,
-        aspectRatio: {width, height},
-      })
-    }
-
-    if (opts.quote) {
-      embed = {
-        $type: 'app.bsky.embed.recordWithMedia',
-        record: embed,
-        media: {
-          $type: 'app.bsky.embed.images',
-          images,
-        },
-      } as AppBskyEmbedRecordWithMedia.Main
-    } else {
-      embed = {
-        $type: 'app.bsky.embed.images',
-        images,
-      } as AppBskyEmbedImages.Main
-    }
-  }
-
-  // add video embed if present
-  if (opts.video) {
-    const captions = await Promise.all(
-      opts.video.captions
-        .filter(caption => caption.lang !== '')
-        .map(async caption => {
-          const {data} = await agent.uploadBlob(caption.file, {
-            encoding: 'text/vtt',
-          })
-          return {lang: caption.lang, file: data.blob}
-        }),
-    )
-    if (opts.quote) {
-      embed = {
-        $type: 'app.bsky.embed.recordWithMedia',
-        record: embed,
-        media: {
-          $type: 'app.bsky.embed.video',
-          video: opts.video.blobRef,
-          alt: opts.video.altText || undefined,
-          captions: captions.length === 0 ? undefined : captions,
-          aspectRatio: opts.video.aspectRatio,
-        } as AppBskyEmbedVideo.Main,
-      } as AppBskyEmbedRecordWithMedia.Main
-    } else {
-      embed = {
-        $type: 'app.bsky.embed.video',
-        video: opts.video.blobRef,
-        alt: opts.video.altText || undefined,
-        captions: captions.length === 0 ? undefined : captions,
-        aspectRatio: opts.video.aspectRatio,
-      } as AppBskyEmbedVideo.Main
-    }
-  }
-
-  // add external embed if present
-  if (opts.extLink && !opts.images?.length) {
-    if (opts.extLink.embed) {
-      embed = opts.extLink.embed
-    } else {
-      let thumb
-      if (opts.extLink.localThumb) {
-        opts.onStateChange?.('Uploading link thumbnail...')
-
-        const {path, mime} = opts.extLink.localThumb.source
-        const res = await uploadBlob(agent, path, mime)
-
-        thumb = res.data.blob
-      }
-
-      if (opts.quote) {
-        embed = {
-          $type: 'app.bsky.embed.recordWithMedia',
-          record: embed,
-          media: {
-            $type: 'app.bsky.embed.external',
-            external: {
-              uri: opts.extLink.uri,
-              title: opts.extLink.meta?.title || '',
-              description: opts.extLink.meta?.description || '',
-              thumb,
-            },
-          } as AppBskyEmbedExternal.Main,
-        } as AppBskyEmbedRecordWithMedia.Main
-      } else {
-        embed = {
-          $type: 'app.bsky.embed.external',
-          external: {
-            uri: opts.extLink.uri,
-            title: opts.extLink.meta?.title || '',
-            description: opts.extLink.meta?.description || '',
-            thumb,
-          },
-        } as AppBskyEmbedExternal.Main
-      }
-    }
-  }
+  const embed = await resolveEmbed(agent, opts)
 
   // add replyTo if post is a reply to another post
   if (opts.replyTo) {
@@ -313,3 +181,117 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
 
   return res
 }
+
+async function resolveEmbed(
+  agent: BskyAgent,
+  opts: PostOpts,
+): Promise<
+  | AppBskyEmbedImages.Main
+  | AppBskyEmbedVideo.Main
+  | AppBskyEmbedExternal.Main
+  | AppBskyEmbedRecord.Main
+  | AppBskyEmbedRecordWithMedia.Main
+  | undefined
+> {
+  const media = await resolveMedia(agent, opts)
+  if (opts.quote) {
+    const quoteRecord = {
+      $type: 'app.bsky.embed.record',
+      record: {
+        uri: opts.quote.uri,
+        cid: opts.quote.cid,
+      },
+    }
+    if (media) {
+      return {
+        $type: 'app.bsky.embed.recordWithMedia',
+        record: quoteRecord,
+        media,
+      }
+    } else {
+      return quoteRecord
+    }
+  }
+  if (media) {
+    return media
+  }
+  if (opts.extLink?.embed) {
+    return opts.extLink.embed
+  }
+  return undefined
+}
+
+async function resolveMedia(
+  agent: BskyAgent,
+  opts: PostOpts,
+): Promise<
+  | AppBskyEmbedExternal.Main
+  | AppBskyEmbedImages.Main
+  | AppBskyEmbedVideo.Main
+  | undefined
+> {
+  if (opts.images?.length) {
+    logger.debug(`Uploading images`, {
+      count: opts.images.length,
+    })
+    opts.onStateChange?.(`Uploading images...`)
+    const images: AppBskyEmbedImages.Image[] = await Promise.all(
+      opts.images.map(async (image, i) => {
+        logger.debug(`Compressing image #${i}`)
+        const {path, width, height, mime} = await compressImage(image)
+        logger.debug(`Uploading image #${i}`)
+        const res = await uploadBlob(agent, path, mime)
+        return {
+          image: res.data.blob,
+          alt: image.alt,
+          aspectRatio: {width, height},
+        }
+      }),
+    )
+    return {
+      $type: 'app.bsky.embed.images',
+      images,
+    }
+  }
+  if (opts.video) {
+    const captions = await Promise.all(
+      opts.video.captions
+        .filter(caption => caption.lang !== '')
+        .map(async caption => {
+          const {data} = await agent.uploadBlob(caption.file, {
+            encoding: 'text/vtt',
+          })
+          return {lang: caption.lang, file: data.blob}
+        }),
+    )
+    return {
+      $type: 'app.bsky.embed.video',
+      video: opts.video.blobRef,
+      alt: opts.video.altText || undefined,
+      captions: captions.length === 0 ? undefined : captions,
+      aspectRatio: opts.video.aspectRatio,
+    }
+  }
+  if (opts.extLink) {
+    if (opts.extLink.embed) {
+      return undefined
+    }
+    let thumb
+    if (opts.extLink.localThumb) {
+      opts.onStateChange?.('Uploading link thumbnail...')
+      const {path, mime} = opts.extLink.localThumb.source
+      const res = await uploadBlob(agent, path, mime)
+      thumb = res.data.blob
+    }
+    return {
+      $type: 'app.bsky.embed.external',
+      external: {
+        uri: opts.extLink.uri,
+        title: opts.extLink.meta?.title || '',
+        description: opts.extLink.meta?.description || '',
+        thumb,
+      },
+    }
+  }
+  return undefined
+}
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/ChatList.tsx
similarity index 98%
rename from src/screens/Messages/List/index.tsx
rename to src/screens/Messages/ChatList.tsx
index efd717f0b4..9912456e13 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
-import {MessagesNUX} from '#/components/dms/MessagesNUX'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
@@ -33,7 +32,7 @@ import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-import {ChatListItem} from './ChatListItem'
+import {ChatListItem} from './components/ChatListItem'
 
 type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
 
@@ -151,8 +150,6 @@ export function MessagesScreen({navigation, route}: Props) {
   if (conversations.length < 1) {
     return (
       <View style={a.flex_1}>
-        <MessagesNUX />
-
         <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
           {gtMobile ? (
             <DesktopHeader
@@ -240,7 +237,6 @@ export function MessagesScreen({navigation, route}: Props) {
 
   return (
     <View style={a.flex_1}>
-      <MessagesNUX />
       {!gtMobile && (
         <ViewHeader
           title={_(msg`Messages`)}
diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation.tsx
similarity index 93%
rename from src/screens/Messages/Conversation/index.tsx
rename to src/screens/Messages/Conversation.tsx
index d14ed160ae..21fdfe0ea9 100644
--- a/src/screens/Messages/Conversation/index.tsx
+++ b/src/screens/Messages/Conversation.tsx
@@ -8,16 +8,16 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
+import {isWeb} from '#/platform/detection'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo'
+import {ConvoStatus} from '#/state/messages/convo/types'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
-import {isWeb} from 'platform/detection'
-import {useProfileShadow} from 'state/cache/profile-shadow'
-import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo'
-import {ConvoStatus} from 'state/messages/convo/types'
-import {useSetMinimalShellMode} from 'state/shell'
-import {CenteredView} from 'view/com/util/Views'
-import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {CenteredView} from '#/view/com/util/Views'
+import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter'
 import {MessagesListHeader} from '#/components/dms/MessagesListHeader'
diff --git a/src/screens/Messages/Conversation/ChatDisabled.tsx b/src/screens/Messages/components/ChatDisabled.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/ChatDisabled.tsx
rename to src/screens/Messages/components/ChatDisabled.tsx
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx
similarity index 100%
rename from src/screens/Messages/List/ChatListItem.tsx
rename to src/screens/Messages/components/ChatListItem.tsx
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/components/MessageInput.tsx
similarity index 99%
rename from src/screens/Messages/Conversation/MessageInput.tsx
rename to src/screens/Messages/components/MessageInput.tsx
index 674edc41eb..21d6e574ea 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/components/MessageInput.tsx
@@ -18,11 +18,11 @@ import Graphemer from 'graphemer'
 
 import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
+import {isIOS} from '#/platform/detection'
 import {
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
-import {isIOS} from 'platform/detection'
 import {EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker.web'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
similarity index 98%
rename from src/screens/Messages/Conversation/MessageInput.web.tsx
rename to src/screens/Messages/components/MessageInput.web.tsx
index 0b7e479209..b15cd24921 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -5,13 +5,13 @@ import {useLingui} from '@lingui/react'
 import Graphemer from 'graphemer'
 import TextareaAutosize from 'react-textarea-autosize'
 
+import {isSafari, isTouchDevice} from '#/lib/browser'
 import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
-import {isSafari, isTouchDevice} from 'lib/browser'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {
   Emoji,
diff --git a/src/screens/Messages/Conversation/MessageInputEmbed.tsx b/src/screens/Messages/components/MessageInputEmbed.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/MessageInputEmbed.tsx
rename to src/screens/Messages/components/MessageInputEmbed.tsx
diff --git a/src/screens/Messages/Conversation/MessageListError.tsx b/src/screens/Messages/components/MessageListError.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/MessageListError.tsx
rename to src/screens/Messages/components/MessageListError.tsx
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
similarity index 97%
rename from src/screens/Messages/Conversation/MessagesList.tsx
rename to src/screens/Messages/components/MessagesList.tsx
index 3034f02905..b659e98d6e 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -15,6 +15,8 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/rean
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api'
 
+import {clamp} from '#/lib/numbers'
+import {ScrollProvider} from '#/lib/ScrollContext'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
 import {
   convertBskyAppUrlIfNeeded,
@@ -22,21 +24,19 @@ import {
 } from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {isConvoActive, useConvoActive} from '#/state/messages/convo'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
 import {useGetPost} from '#/state/queries/post'
 import {useAgent} from '#/state/session'
-import {clamp} from 'lib/numbers'
-import {ScrollProvider} from 'lib/ScrollContext'
-import {isWeb} from 'platform/detection'
 import {
   EmojiPicker,
   EmojiPickerState,
 } from '#/view/com/composer/text-input/web/EmojiPicker.web'
-import {List} from 'view/com/util/List'
-import {ChatDisabled} from '#/screens/Messages/Conversation/ChatDisabled'
-import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
-import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
+import {List} from '#/view/com/util/List'
+import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled'
+import {MessageInput} from '#/screens/Messages/components/MessageInput'
+import {MessageListError} from '#/screens/Messages/components/MessageListError'
 import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
index eaad2113f8..acc0893350 100644
--- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
+++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
@@ -46,29 +46,31 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
 
     return (
       <View style={styles.container}>
-        <LazyViewShot
-          // @ts-ignore this library doesn't have types
-          ref={viewshotRef}
-          options={{
-            fileName: 'placeholderAvatar',
-            format: 'jpg',
-            quality: 0.8,
-            height: 150 * SIZE_MULTIPLIER,
-            width: 150 * SIZE_MULTIPLIER,
-          }}>
-          <View
-            style={[
-              styles.imageContainer,
-              {backgroundColor: avatar.backgroundColor},
-            ]}
-            collapsable={false}>
-            <Icon
-              height={85 * SIZE_MULTIPLIER}
-              width={85 * SIZE_MULTIPLIER}
-              style={{color: 'white'}}
-            />
-          </View>
-        </LazyViewShot>
+        <React.Suspense fallback={null}>
+          <LazyViewShot
+            // @ts-ignore this library doesn't have types
+            ref={viewshotRef}
+            options={{
+              fileName: 'placeholderAvatar',
+              format: 'jpg',
+              quality: 0.8,
+              height: 150 * SIZE_MULTIPLIER,
+              width: 150 * SIZE_MULTIPLIER,
+            }}>
+            <View
+              style={[
+                styles.imageContainer,
+                {backgroundColor: avatar.backgroundColor},
+              ]}
+              collapsable={false}>
+              <Icon
+                height={85 * SIZE_MULTIPLIER}
+                width={85 * SIZE_MULTIPLIER}
+                style={{color: 'white'}}
+              />
+            </View>
+          </LazyViewShot>
+        </React.Suspense>
       </View>
     )
   },
diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx
index f047b612ae..0cf6ab2312 100644
--- a/src/screens/StarterPack/Wizard/StepFeeds.tsx
+++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx
@@ -4,17 +4,17 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {AppBskyFeedDefs, ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
+import {DISCOVER_FEED_URI} from '#/lib/constants'
 import {useA11y} from '#/state/a11y'
-import {DISCOVER_FEED_URI} from 'lib/constants'
 import {
   useGetPopularFeedsQuery,
   usePopularFeedsSearch,
   useSavedFeeds,
-} from 'state/queries/feed'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {List} from 'view/com/util/List'
+} from '#/state/queries/feed'
+import {List} from '#/view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {Loader} from '#/components/Loader'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
@@ -81,12 +81,11 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
   return (
     <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
-        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+        <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput
-            query={query}
-            onChangeQuery={t => setQuery(t)}
-            onPressCancelSearch={() => setQuery('')}
-            onSubmitQuery={() => {}}
+            value={query}
+            onChangeText={t => setQuery(t)}
+            onClearText={() => setQuery('')}
           />
         </View>
       </View>
@@ -94,7 +93,6 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
         data={query ? searchedFeeds : suggestedFeeds}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
-        contentContainerStyle={{paddingTop: 6}}
         onEndReached={
           !query && !screenReaderEnabled ? () => fetchNextPage() : undefined
         }
diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx
index c14de847f6..054a6a63e2 100644
--- a/src/screens/StarterPack/Wizard/StepProfiles.tsx
+++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx
@@ -4,14 +4,14 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
+import {isNative} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
-import {isNative} from 'platform/detection'
-import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
-import {useActorSearchPaginated} from 'state/queries/actor-search'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {List} from 'view/com/util/List'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
+import {useActorSearchPaginated} from '#/state/queries/actor-search'
+import {List} from '#/view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {Loader} from '#/components/Loader'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
@@ -65,12 +65,11 @@ export function StepProfiles({
   return (
     <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
-        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+        <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput
-            query={query}
-            onChangeQuery={setQuery}
-            onPressCancelSearch={() => setQuery('')}
-            onSubmitQuery={() => {}}
+            value={query}
+            onChangeText={setQuery}
+            onClearText={() => setQuery('')}
           />
         </View>
       </View>
diff --git a/src/style.css b/src/style.css
index b0b01ba3eb..72e1ce2a2b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,101 +7,19 @@
  */
 
 @font-face {
-  font-family: 'Inter-Regular';
-  src: local('Inter-Regular'),
-    url(/assets/fonts/inter/Inter-Regular.otf) format('opentype');
-  font-weight: 400;
+  font-family: 'InterVariable';
+  src: url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
+  font-weight: 300 1000;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: 'Inter-Italic';
-  src: local('Inter-Italic'),
-    url(/assets/fonts/inter/Inter-Italic.otf) format('opentype');
-  font-weight: 400;
+  font-family: 'InterVariableItalic';
+  src: url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
+  font-weight: 300 1000;
   font-style: italic;
   font-display: swap;
 }
-/*
-@font-face {
-  font-family: "Inter-Medium";
-  src: local("Inter-Medium"), url(/assets/fonts/inter/Inter-Medium.otf) format("opentype");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-MediumItalic";
-  src: local("Inter-MediumItalic"), url(/assets/fonts/inter/Inter-MediumItalic.otf) format("opentype");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-*/
-@font-face {
-  font-family: 'Inter-SemiBold';
-  src: local('Inter-SemiBold'),
-    url(/assets/fonts/inter/Inter-SemiBold.otf) format('opentype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inter-SemiBoldItalic';
-  src: local('Inter-SemiBoldItalic'),
-    url(/assets/fonts/inter/Inter-SemiBoldItalic.otf) format('opentype');
-  font-weight: 600;
-  font-style: italic;
-  font-display: swap;
-}
-/*
-@font-face {
-  font-family: "Inter-Bold";
-  src: local("Inter-Bold"), url(/assets/fonts/inter/Inter-Bold.otf) format("opentype");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-BoldItalic";
-  src: local("Inter-BoldItalic"), url(/assets/fonts/inter/Inter-BoldItalic.otf) format("opentype");
-  font-weight: 700;
-  font-style: italic;
-  font-display: swap;
-}
-*/
-@font-face {
-  font-family: 'Inter-ExtraBold';
-  src: local('Inter-ExtraBold'),
-    url(/assets/fonts/inter/Inter-ExtraBold.otf) format('opentype');
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inter-ExtraBoldItalic';
-  src: local('Inter-ExtraBoldItalic'),
-    url(/assets/fonts/inter/Inter-ExtraBoldItalic.otf) format('opentype');
-  font-weight: 800;
-  font-style: italic;
-  font-display: swap;
-}
-/*
-@font-face {
-  font-family: "Inter-Black";
-  src: local("Inter-Black"), url(/assets/fonts/inter/Inter-Black.otf) format("opentype");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Inter-BlackItalic";
-  src: local("Inter-BlackItalic"), url(/assets/fonts/inter/Inter-BlackItalic.otf) format("opentype");
-  font-weight: 900;
-  font-style: italic;
-  font-display: swap;
-}
-*/
 
 /**
  * BEGIN STYLES
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index ade37af1b6..f354f0f0dc 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -3,6 +3,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useMemo,
+  useReducer,
   useRef,
   useState,
 } from 'react'
@@ -66,7 +67,7 @@ import {logger} from '#/logger'
 import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {emitPostCreated} from '#/state/events'
-import {ComposerImage, createInitialImages, pasteImage} from '#/state/gallery'
+import {ComposerImage, pasteImage} from '#/state/gallery'
 import {useModalControls} from '#/state/modals'
 import {useModals} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
@@ -119,6 +120,7 @@ import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import * as Prompt from '#/components/Prompt'
 import {Text as NewText} from '#/components/Typography'
+import {composerReducer, createComposerState} from './state'
 
 const MAX_IMAGES = 4
 
@@ -126,6 +128,8 @@ type CancelRef = {
   onPressCancel: () => void
 }
 
+const NO_IMAGES: ComposerImage[] = []
+
 type Props = ComposerOpts
 export const ComposePost = ({
   replyTo,
@@ -213,9 +217,17 @@ export const ComposePost = ({
     )
   const [postgate, setPostgate] = useState(createPostgateRecord({post: ''}))
 
-  const [images, setImages] = useState<ComposerImage[]>(() =>
-    createInitialImages(initImageUris),
+  // TODO: Move more state here.
+  const [composerState, dispatch] = useReducer(
+    composerReducer,
+    {initImageUris},
+    createComposerState,
   )
+  let images = NO_IMAGES
+  if (composerState.embed.media?.type === 'images') {
+    images = composerState.embed.media.images
+  }
+
   const onClose = useCallback(() => {
     closeComposer()
   }, [closeComposer])
@@ -301,9 +313,12 @@ export const ComposePost = ({
 
   const onImageAdd = useCallback(
     (next: ComposerImage[]) => {
-      setImages(prev => prev.concat(next.slice(0, MAX_IMAGES - prev.length)))
+      dispatch({
+        type: 'embed_add_images',
+        images: next,
+      })
     },
-    [setImages],
+    [dispatch],
   )
 
   const onPhotoPasted = useCallback(
@@ -374,6 +389,7 @@ export const ComposePost = ({
       try {
         postUri = (
           await apilib.post(agent, {
+            composerState, // TODO: not used yet.
             rawText: richtext.text,
             replyTo: replyTo?.uri,
             images,
@@ -475,6 +491,7 @@ export const ComposePost = ({
       _,
       agent,
       captions,
+      composerState,
       extLink,
       images,
       graphemeLength,
@@ -717,7 +734,7 @@ export const ComposePost = ({
             />
           </View>
 
-          <Gallery images={images} onChange={setImages} />
+          <Gallery images={images} dispatch={dispatch} />
           {images.length === 0 && extLink && (
             <View style={a.relative}>
               <ExternalEmbed
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 369f08d745..5692f3d2c9 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -21,6 +21,7 @@ import {ComposerImage, cropImage} from '#/state/gallery'
 import {Text} from '#/view/com/util/text/Text'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
+import {ComposerAction} from '../state'
 import {EditImageDialog} from './EditImageDialog'
 import {ImageAltTextDialog} from './ImageAltTextDialog'
 
@@ -28,7 +29,7 @@ const IMAGE_GAP = 8
 
 interface GalleryProps {
   images: ComposerImage[]
-  onChange: (next: ComposerImage[]) => void
+  dispatch: (action: ComposerAction) => void
 }
 
 export let Gallery = (props: GalleryProps): React.ReactNode => {
@@ -56,7 +57,7 @@ interface GalleryInnerProps extends GalleryProps {
   containerInfo: Dimensions
 }
 
-const GalleryInner = ({images, containerInfo, onChange}: GalleryInnerProps) => {
+const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
   const {isMobile} = useWebMediaQueries()
 
   const {altTextControlStyle, imageControlsStyle, imageStyle} =
@@ -96,7 +97,7 @@ const GalleryInner = ({images, containerInfo, onChange}: GalleryInnerProps) => {
   return images.length !== 0 ? (
     <>
       <View testID="selectedPhotosView" style={styles.gallery}>
-        {images.map((image, index) => {
+        {images.map(image => {
           return (
             <GalleryItem
               key={image.source.id}
@@ -105,15 +106,10 @@ const GalleryInner = ({images, containerInfo, onChange}: GalleryInnerProps) => {
               imageControlsStyle={imageControlsStyle}
               imageStyle={imageStyle}
               onChange={next => {
-                onChange(
-                  images.map(i => (i.source === image.source ? next : i)),
-                )
+                dispatch({type: 'embed_update_image', image: next})
               }}
               onRemove={() => {
-                const next = images.slice()
-                next.splice(index, 1)
-
-                onChange(next)
+                dispatch({type: 'embed_remove_image', image})
               }}
             />
           )
diff --git a/src/view/com/composer/state.ts b/src/view/com/composer/state.ts
new file mode 100644
index 0000000000..5588de1aa3
--- /dev/null
+++ b/src/view/com/composer/state.ts
@@ -0,0 +1,131 @@
+import {ComposerImage, createInitialImages} from '#/state/gallery'
+import {ComposerOpts} from '#/state/shell/composer'
+
+type PostRecord = {
+  uri: string
+}
+
+type ImagesMedia = {
+  type: 'images'
+  images: ComposerImage[]
+  labels: string[]
+}
+
+type ComposerEmbed = {
+  // TODO: Other record types.
+  record: PostRecord | undefined
+  // TODO: Other media types.
+  media: ImagesMedia | undefined
+}
+
+export type ComposerState = {
+  // TODO: Other draft data.
+  embed: ComposerEmbed
+}
+
+export type ComposerAction =
+  | {type: 'embed_add_images'; images: ComposerImage[]}
+  | {type: 'embed_update_image'; image: ComposerImage}
+  | {type: 'embed_remove_image'; image: ComposerImage}
+
+const MAX_IMAGES = 4
+
+export function composerReducer(
+  state: ComposerState,
+  action: ComposerAction,
+): ComposerState {
+  switch (action.type) {
+    case 'embed_add_images': {
+      const prevMedia = state.embed.media
+      let nextMedia = prevMedia
+      if (!prevMedia) {
+        nextMedia = {
+          type: 'images',
+          images: action.images.slice(0, MAX_IMAGES),
+          labels: [],
+        }
+      } else if (prevMedia.type === 'images') {
+        nextMedia = {
+          ...prevMedia,
+          images: [...prevMedia.images, ...action.images].slice(0, MAX_IMAGES),
+        }
+      }
+      return {
+        ...state,
+        embed: {
+          ...state.embed,
+          media: nextMedia,
+        },
+      }
+    }
+    case 'embed_update_image': {
+      const prevMedia = state.embed.media
+      if (prevMedia?.type === 'images') {
+        const updatedImage = action.image
+        const nextMedia = {
+          ...prevMedia,
+          images: prevMedia.images.map(img => {
+            if (img.source.id === updatedImage.source.id) {
+              return updatedImage
+            }
+            return img
+          }),
+        }
+        return {
+          ...state,
+          embed: {
+            ...state.embed,
+            media: nextMedia,
+          },
+        }
+      }
+      return state
+    }
+    case 'embed_remove_image': {
+      const prevMedia = state.embed.media
+      if (prevMedia?.type === 'images') {
+        const removedImage = action.image
+        let nextMedia: ImagesMedia | undefined = {
+          ...prevMedia,
+          images: prevMedia.images.filter(img => {
+            return img.source.id !== removedImage.source.id
+          }),
+        }
+        if (nextMedia.images.length === 0) {
+          nextMedia = undefined
+        }
+        return {
+          ...state,
+          embed: {
+            ...state.embed,
+            media: nextMedia,
+          },
+        }
+      }
+      return state
+    }
+    default:
+      return state
+  }
+}
+
+export function createComposerState({
+  initImageUris,
+}: {
+  initImageUris: ComposerOpts['imageUris']
+}): ComposerState {
+  let media: ImagesMedia | undefined
+  if (initImageUris?.length) {
+    media = {
+      type: 'images',
+      images: createInitialImages(initImageUris),
+      labels: [],
+    }
+  }
+  return {
+    embed: {
+      record: undefined,
+      media,
+    },
+  }
+}
diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx
index 67981618e1..5ad4c256dd 100644
--- a/src/view/com/post-thread/PostThreadComposePrompt.tsx
+++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx
@@ -5,12 +5,12 @@ import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useHapticsDisabled} from '#/state/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
 export function PostThreadComposePrompt({
@@ -21,10 +21,15 @@ export function PostThreadComposePrompt({
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const {_} = useLingui()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
   const t = useTheme()
   const playHaptics = useHaptics()
   const isHapticsDisabled = useHapticsDisabled()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
 
   const onPress = () => {
     playHaptics('Light')
@@ -42,13 +47,15 @@ export function PostThreadComposePrompt({
       accessibilityLabel={_(msg`Compose reply`)}
       accessibilityHint={_(msg`Opens composer`)}
       style={[
-        {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11},
-        a.px_sm,
+        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
+        gtMobile ? {paddingLeft: 6, paddingRight: 6} : a.px_sm,
         a.border_t,
         t.atoms.border_contrast_low,
         t.atoms.bg,
       ]}
-      onPress={onPress}>
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}>
       <View
         style={[
           a.flex_row,
@@ -56,10 +63,11 @@ export function PostThreadComposePrompt({
           a.p_sm,
           a.gap_sm,
           a.rounded_full,
-          t.atoms.bg_contrast_25,
+          (!gtMobile || hovered) && t.atoms.bg_contrast_25,
+          a.transition_color,
         ]}>
         <UserAvatar
-          size={22}
+          size={gtMobile ? 24 : 22}
           avatar={profile?.avatar}
           type={profile?.associated?.labeler ? 'labeler' : 'user'}
         />
diff --git a/src/view/com/util/fab/FAB.web.tsx b/src/view/com/util/fab/FAB.web.tsx
index 0a8831fa92..601d505a8d 100644
--- a/src/view/com/util/fab/FAB.web.tsx
+++ b/src/view/com/util/fab/FAB.web.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import {View} from 'react-native'
+
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {FABInner, FABProps} from './FABInner'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 export const FAB = (_opts: FABProps) => {
   const {isDesktop} = useWebMediaQueries()
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
index 5d8aac81af..bc89ddb603 100644
--- a/src/view/com/util/fab/FABInner.tsx
+++ b/src/view/com/util/fab/FABInner.tsx
@@ -1,9 +1,10 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
-import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -11,7 +12,6 @@ import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {useHapticsDisabled} from '#/state/preferences'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
 
 export interface FABProps
   extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -25,11 +25,6 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
   const playHaptic = useHaptics()
   const isHapticsDisabled = useHapticsDisabled()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
 
   const size = isTablet ? styles.sizeLarge : styles.sizeRegular
 
@@ -37,43 +32,36 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
     ? {right: 50, bottom: 50}
     : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
 
-  const scale = useAnimatedStyle(() => ({
-    transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
-  }))
-
   return (
-    <TouchableWithoutFeedback
-      testID={testID}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onPress={e => {
-        playHaptic('Light')
-        setTimeout(
-          () => {
-            onPress?.(e)
-          },
-          isHapticsDisabled ? 0 : 75,
-        )
-      }}
-      {...props}>
-      <Animated.View
-        style={[
-          styles.outer,
-          size,
-          tabletSpacing,
-          isMobile && fabMinimalShellTransform,
-        ]}>
-        <Animated.View style={scale}>
-          <LinearGradient
-            colors={[gradients.blueLight.start, gradients.blueLight.end]}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[styles.inner, size]}>
-            {icon}
-          </LinearGradient>
-        </Animated.View>
-      </Animated.View>
-    </TouchableWithoutFeedback>
+    <Animated.View
+      style={[
+        styles.outer,
+        size,
+        tabletSpacing,
+        isMobile && fabMinimalShellTransform,
+      ]}>
+      <PressableScale
+        testID={testID}
+        onPress={e => {
+          playHaptic('Light')
+          setTimeout(
+            () => {
+              onPress?.(e)
+            },
+            isHapticsDisabled ? 0 : 75,
+          )
+        }}
+        targetScale={0.9}
+        {...props}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[styles.inner, size]}>
+          {icon}
+        </LinearGradient>
+      </PressableScale>
+    </Animated.View>
   )
 }
 
diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx
deleted file mode 100644
index 5a21d8fdd0..0000000000
--- a/src/view/com/util/forms/SearchInput.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react'
-import {
-  StyleProp,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {HITSLOP_10} from 'lib/constants'
-import {MagnifyingGlassIcon} from 'lib/icons'
-import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
-
-interface Props {
-  query: string
-  setIsInputFocused?: (v: boolean) => void
-  onChangeQuery: (v: string) => void
-  onPressCancelSearch: () => void
-  onSubmitQuery: () => void
-  style?: StyleProp<ViewStyle>
-}
-
-export interface SearchInputRef {
-  focus?: () => void
-}
-
-export const SearchInput = React.forwardRef<SearchInputRef, Props>(
-  function SearchInput(
-    {
-      query,
-      setIsInputFocused,
-      onChangeQuery,
-      onPressCancelSearch,
-      onSubmitQuery,
-      style,
-    },
-    ref,
-  ) {
-    const theme = useTheme()
-    const pal = usePalette('default')
-    const {_} = useLingui()
-    const textInput = React.useRef<TextInput>(null)
-
-    const onPressCancelSearchInner = React.useCallback(() => {
-      onPressCancelSearch()
-      textInput.current?.blur()
-    }, [onPressCancelSearch, textInput])
-
-    React.useImperativeHandle(ref, () => ({
-      focus: () => textInput.current?.focus(),
-      blur: () => textInput.current?.blur(),
-    }))
-
-    return (
-      <View style={[pal.viewLight, styles.container, style]}>
-        <MagnifyingGlassIcon style={[pal.icon, styles.icon]} size={21} />
-        <TextInput
-          testID="searchTextInput"
-          ref={textInput}
-          placeholder={_(msg`Search`)}
-          placeholderTextColor={pal.colors.textLight}
-          selectTextOnFocus
-          returnKeyType="search"
-          value={query}
-          style={[pal.text, styles.input]}
-          keyboardAppearance={theme.colorScheme}
-          onFocus={() => setIsInputFocused?.(true)}
-          onBlur={() => setIsInputFocused?.(false)}
-          onChangeText={onChangeQuery}
-          onSubmitEditing={onSubmitQuery}
-          accessibilityRole="search"
-          accessibilityLabel={_(msg`Search`)}
-          accessibilityHint=""
-          autoCorrect={false}
-          autoCapitalize="none"
-        />
-        {query ? (
-          <TouchableOpacity
-            onPress={onPressCancelSearchInner}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Clear search query`)}
-            accessibilityHint=""
-            hitSlop={HITSLOP_10}>
-            <FontAwesomeIcon
-              icon="xmark"
-              size={16}
-              style={pal.textLight as FontAwesomeIconStyle}
-            />
-          </TouchableOpacity>
-        ) : undefined}
-      </View>
-    )
-  },
-)
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 30,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  icon: {
-    marginRight: 6,
-    alignSelf: 'center',
-  },
-  input: {
-    flex: 1,
-    fontSize: 17,
-    minWidth: 0, // overflow mitigation for firefox
-  },
-  cancelBtn: {
-    paddingLeft: 10,
-  },
-})
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
index 310c3dc602..87af59f7f6 100644
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -6,6 +6,12 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import debounce from 'lodash.debounce'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {ComposeIcon2} from '#/lib/icons'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {cleanError} from '#/lib/strings/errors'
+import {s} from '#/lib/styles'
 import {isNative, isWeb} from '#/platform/detection'
 import {
   SavedFeedItem,
@@ -16,25 +22,19 @@ import {
 import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ComposeIcon2} from 'lib/icons'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {cleanError} from 'lib/strings/errors'
-import {s} from 'lib/styles'
-import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
-import {FAB} from 'view/com/util/fab/FAB'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {TextLink} from 'view/com/util/Link'
-import {List} from 'view/com/util/List'
-import {FeedFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
-import {Text} from 'view/com/util/text/Text'
-import {ViewHeader} from 'view/com/util/ViewHeader'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {FAB} from '#/view/com/util/fab/FAB'
+import {TextLink} from '#/view/com/util/Link'
+import {List} from '#/view/com/util/List'
+import {FeedFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {Text} from '#/view/com/util/text/Text'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
 import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
 import {atoms as a, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import * as FeedCard from '#/components/FeedCard'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {IconCircle} from '#/components/IconCircle'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
@@ -481,11 +481,12 @@ export function FeedsScreen(_props: Props) {
             <FeedsAboutHeader />
             <View style={{paddingHorizontal: 12, paddingBottom: 4}}>
               <SearchInput
-                query={query}
-                onChangeQuery={onChangeQuery}
-                onPressCancelSearch={onPressCancelSearch}
-                onSubmitQuery={onSubmitQuery}
-                setIsInputFocused={onChangeSearchFocus}
+                value={query}
+                onChangeText={onChangeQuery}
+                onClearText={onPressCancelSearch}
+                onSubmitEditing={onSubmitQuery}
+                onFocus={() => onChangeSearchFocus(true)}
+                onBlur={() => onChangeSearchFocus(false)}
               />
             </View>
           </>
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 66c354b3be..4a6c87f104 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -62,12 +62,10 @@ import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
 import {atoms as a, useBreakpoints, useTheme as useThemeNew, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
-import * as TextField from '#/components/forms/TextField'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
-import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
 function Loader() {
   const pal = usePalette('default')
@@ -624,7 +622,7 @@ export function SearchScreen(
    * Arbitrary sizing, so guess and check, used for sticky header alignment and
    * sizing.
    */
-  const headerHeight = 56 + (showFilters ? 40 : 0)
+  const headerHeight = 64 + (showFilters ? 40 : 0)
 
   useFocusEffect(
     useNonReactiveCallback(() => {
@@ -838,18 +836,18 @@ export function SearchScreen(
       <CenteredView
         style={[
           a.p_md,
-          a.pb_0,
+          a.pb_sm,
           a.gap_sm,
           t.atoms.bg,
           web({
-            height: headerHeight + a.mb_sm.marginBottom,
+            height: headerHeight,
             position: 'sticky',
             top: 0,
             zIndex: 1,
           }),
         ]}
         sideBorders={gtMobile}>
-        <View style={[a.flex_row, a.gap_sm, a.mb_sm]}>
+        <View style={[a.flex_row, a.gap_sm]}>
           {!gtMobile && (
             <Button
               testID="viewHeaderBackOrMenuBtn"
@@ -864,15 +862,16 @@ export function SearchScreen(
               <ButtonIcon icon={Menu} size="lg" />
             </Button>
           )}
-          <SearchInputBox
-            textInput={textInput}
-            searchText={searchText}
-            showAutocomplete={showAutocomplete}
-            onFocus={onSearchInputFocus}
-            onChangeText={onChangeText}
-            onSubmit={onSubmit}
-            onPressClearQuery={onPressClearQuery}
-          />
+          <View style={[a.flex_1]}>
+            <SearchInput
+              ref={textInput}
+              value={searchText}
+              onFocus={onSearchInputFocus}
+              onChangeText={onChangeText}
+              onClearText={onPressClearQuery}
+              onSubmitEditing={onSubmit}
+            />
+          </View>
           {showFiltersButton && (
             <Button
               onPress={() => setShowFilters(!showFilters)}
@@ -887,7 +886,7 @@ export function SearchScreen(
                 fill={
                   showFilters
                     ? t.palette.primary_500
-                    : t.atoms.text_contrast_low.color
+                    : t.atoms.text_contrast_medium.color
                 }
               />
             </Button>
@@ -961,78 +960,6 @@ export function SearchScreen(
   )
 }
 
-let SearchInputBox = ({
-  textInput,
-  searchText,
-  showAutocomplete,
-  onFocus,
-  onChangeText,
-  onSubmit,
-  onPressClearQuery,
-}: {
-  textInput: React.RefObject<TextInput>
-  searchText: string
-  showAutocomplete: boolean
-  onFocus: () => void
-  onChangeText: (text: string) => void
-  onSubmit: () => void
-  onPressClearQuery: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const t = useThemeNew()
-
-  return (
-    <View style={[a.flex_1]}>
-      <TextField.Root>
-        <TextField.Icon icon={MagnifyingGlass} />
-        <TextField.Input
-          inputRef={textInput}
-          label={_(msg`Search`)}
-          value={searchText}
-          placeholder={_(msg`Search`)}
-          returnKeyType="search"
-          onChangeText={onChangeText}
-          onSubmitEditing={onSubmit}
-          onFocus={onFocus}
-          keyboardAppearance={t.scheme}
-          selectTextOnFocus={isNative}
-          autoFocus={false}
-          accessibilityRole="search"
-          autoCorrect={false}
-          autoComplete="off"
-          autoCapitalize="none"
-        />
-      </TextField.Root>
-
-      {showAutocomplete && searchText.length > 0 && (
-        <View
-          style={[
-            a.absolute,
-            a.z_10,
-            a.my_auto,
-            a.inset_0,
-            a.justify_center,
-            a.pr_sm,
-            {left: 'auto'},
-          ]}>
-          <Button
-            testID="searchTextInputClearBtn"
-            onPress={onPressClearQuery}
-            label={_(msg`Clear search query`)}
-            hitSlop={HITSLOP_10}
-            size="tiny"
-            shape="round"
-            variant="ghost"
-            color="secondary">
-            <ButtonIcon icon={X} size="sm" />
-          </Button>
-        </View>
-      )}
-    </View>
-  )
-}
-SearchInputBox = React.memo(SearchInputBox)
-
 let AutocompleteResults = ({
   isAutocompleteFetching,
   autocompleteData,
diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx
index b43dbcce32..2780944f11 100644
--- a/src/view/shell/desktop/Search.tsx
+++ b/src/view/shell/desktop/Search.tsx
@@ -25,11 +25,11 @@ import {s} from '#/lib/styles'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {precacheProfile} from '#/state/queries/profile'
-import {SearchInput} from '#/view/com/util/forms/SearchInput'
 import {Link} from '#/view/com/util/Link'
 import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
+import {SearchInput} from '#/components/forms/SearchInput'
 
 let SearchLinkCard = ({
   label,
@@ -184,10 +184,10 @@ export function DesktopSearch() {
   return (
     <View style={[styles.container, pal.view]}>
       <SearchInput
-        query={query}
-        onChangeQuery={onChangeText}
-        onPressCancelSearch={onPressCancelSearch}
-        onSubmitQuery={onSubmit}
+        value={query}
+        onChangeText={onChangeText}
+        onClearText={onPressCancelSearch}
+        onSubmitEditing={onSubmit}
       />
       {query !== '' && isActive && moderationOpts && (
         <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
diff --git a/web/index.html b/web/index.html
index 71e5ac0892..8efc2cb68f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -18,24 +18,8 @@
     <link rel="preconnect" href="https://bsky.network">
     <title>%WEB_TITLE%</title>
 
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-    -->
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-    -->
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
-    <!--
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
-    <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-    -->
+    <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
+    <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
 
     <style>
       /**
@@ -58,7 +42,7 @@
       body {
         margin: 0px;
         padding: 0px;
-        font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+        font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
         text-rendering: optimizeLegibility;
         /* Platform-specific reset */
         -webkit-overflow-scrolling: touch;