From 90a9546f320a36e0dc0ca216604a4324182b7b27 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach@maybe.co>
Date: Wed, 30 Apr 2025 18:14:22 -0400
Subject: [PATCH] Pre-launch design sync with Figma spec (#2154)

* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface
---
 .cursor/rules/project-conventions.mdc         |   1 +
 Gemfile                                       |   4 +-
 Gemfile.lock                                  | 118 +++--
 app/assets/tailwind/maybe-design-system.css   | 489 ++----------------
 .../maybe-design-system/background-utils.css  |  87 ++++
 .../maybe-design-system/border-utils.css      |  88 ++++
 .../maybe-design-system/component-utils.css   | 109 ++++
 .../maybe-design-system/foreground-utils.css  |  63 +++
 .../maybe-design-system/text-utils.css        |  39 ++
 app/components/button_component.html.erb      |  13 +
 app/components/button_component.rb            |  41 ++
 app/components/buttonish_component.rb         | 148 ++++++
 app/components/dialog_component.html.erb      |  38 ++
 app/components/dialog_component.rb            | 105 ++++
 .../dialog_controller.js}                     |  15 +-
 app/components/disclosure_component.html.erb  |  25 +
 app/components/disclosure_component.rb        |  12 +
 app/components/filled_icon_component.html.erb |   8 +
 app/components/filled_icon_component.rb       |  97 ++++
 app/components/link_component.html.erb        |  13 +
 app/components/link_component.rb              |  31 ++
 app/components/menu_component.html.erb        |  27 +
 app/components/menu_component.rb              |  37 ++
 .../menu_controller.js                        |   0
 app/components/menu_item_component.html.erb   |  12 +
 app/components/menu_item_component.rb         |  57 ++
 app/components/tab_component.rb               |  12 +
 app/components/tabs/nav_component.rb          |  29 ++
 app/components/tabs/panel_component.rb        |  11 +
 app/components/tabs_component.html.erb        |  17 +
 app/components/tabs_component.rb              |  65 +++
 app/components/tabs_controller.js             |  42 ++
 app/components/toggle_component.html.erb      |   5 +
 app/components/toggle_component.rb            |  26 +
 app/controllers/chats_controller.rb           |   2 -
 app/controllers/lookbooks_controller.rb       |   3 +
 app/helpers/application_helper.rb             | 119 +----
 app/helpers/custom_confirm.rb                 |  51 ++
 app/helpers/forms_helper.rb                   |  22 -
 app/helpers/menus_helper.rb                   |  47 --
 app/helpers/styled_form_builder.rb            |  43 +-
 app/helpers/transactions_helper.rb            |  14 +-
 .../account_collapse_controller.js            |  51 --
 .../controllers/app_layout_controller.js      |  56 ++
 app/javascript/controllers/application.js     |  52 +-
 .../controllers/bulk_select_controller.js     |   7 +-
 .../controllers/color_avatar_controller.js    |   4 +-
 .../controllers/confirm_dialog_controller.js  |  59 +++
 .../controllers/deletion_controller.js        |  32 +-
 .../controllers/intercom_controller.js        |   8 +
 .../controllers/preserve_scroll_controller.js |  39 --
 .../controllers/rule/actions_controller.js    |   1 +
 .../controllers/sidebar_controller.js         |  86 ---
 app/javascript/controllers/tabs_controller.js |  74 ---
 .../controllers/theme_controller.js           |  56 +-
 .../time_series_chart_controller.js           |  59 ++-
 app/models/balance_sheet.rb                   |   8 +-
 app/models/family.rb                          |   4 +
 app/models/period.rb                          |   4 +
 app/views/accounts/_account.html.erb          |   6 +-
 .../accounts/_account_sidebar_tabs.html.erb   | 155 +++---
 app/views/accounts/_account_type.html.erb     |  10 +-
 .../accounts/_accountable_group.html.erb      |  29 +-
 app/views/accounts/_empty.html.erb            |   9 +-
 app/views/accounts/_logo.html.erb             |   2 +-
 app/views/accounts/index.html.erb             |  32 +-
 .../accounts/index/_manual_accounts.html.erb  |   4 +-
 app/views/accounts/new.html.erb               |  10 +-
 app/views/accounts/new/_container.html.erb    |  42 +-
 .../accounts/new/_method_selector.html.erb    |  12 +-
 app/views/accounts/show/_activity.html.erb    |  43 +-
 app/views/accounts/show/_chart.html.erb       |   6 +-
 app/views/accounts/show/_header.html.erb      |  24 +-
 app/views/accounts/show/_menu.html.erb        |  62 +--
 app/views/accounts/show/_tabs.html.erb        |  18 +-
 app/views/accounts/show/_template.html.erb    |   2 +-
 .../_assistant_message.html.erb               |   2 +-
 .../assistant_messages/_tool_calls.html.erb   |   2 +-
 .../_budget_category.html.erb                 |  12 +-
 .../_budget_category_donut.html.erb           |   4 +-
 .../_confirm_button.html.erb                  |  17 +-
 .../budget_categories/_no_categories.html.erb |  16 +-
 app/views/budget_categories/index.html.erb    |   2 +-
 app/views/budget_categories/show.html.erb     |  99 ++--
 app/views/budgets/_budget_categories.html.erb |   2 +-
 app/views/budgets/_budget_donut.html.erb      |  40 +-
 app/views/budgets/_budget_header.html.erb     |  48 +-
 app/views/budgets/_budget_nav.html.erb        |   2 +-
 .../budgets/_over_allocation_warning.html.erb |  16 +-
 app/views/budgets/_picker.html.erb            |  22 +-
 app/views/budgets/edit.html.erb               |  20 +-
 app/views/budgets/show.html.erb               |  10 +-
 app/views/categories/_badge.html.erb          |   3 +-
 app/views/categories/_category.html.erb       |  18 +-
 app/views/categories/_color_avatar.html.erb   |   2 +-
 app/views/categories/_form.html.erb           | 103 ++--
 app/views/categories/_menu.html.erb           |  27 +-
 app/views/categories/edit.html.erb            |   7 +-
 app/views/categories/index.html.erb           |  41 +-
 app/views/categories/new.html.erb             |   7 +-
 app/views/category/deletions/new.html.erb     |  33 +-
 app/views/category/dropdowns/_row.html.erb    |  29 +-
 app/views/category/dropdowns/show.html.erb    |  18 +-
 app/views/chats/_ai_consent.html.erb          |  55 +-
 app/views/chats/_chat.html.erb                |  12 +-
 app/views/chats/_chat_nav.html.erb            |  19 +-
 app/views/chats/_error.html.erb               |   7 +-
 app/views/chats/index.html.erb                |  55 +-
 app/views/chats/show.html.erb                 |  59 ++-
 app/views/credit_cards/_overview.html.erb     |   7 +-
 app/views/credit_cards/edit.html.erb          |   8 +-
 app/views/credit_cards/new.html.erb           |   7 +-
 app/views/cryptos/edit.html.erb               |   7 +-
 app/views/cryptos/new.html.erb                |   7 +-
 app/views/depositories/edit.html.erb          |   7 +-
 app/views/depositories/new.html.erb           |   7 +-
 app/views/entries/_selection_bar.html.erb     |   4 +-
 .../_family_merchant.html.erb                 |  20 +-
 app/views/family_merchants/_form.html.erb     |  10 +-
 app/views/family_merchants/edit.html.erb      |   7 +-
 app/views/family_merchants/index.html.erb     |  21 +-
 app/views/family_merchants/new.html.erb       |   7 +-
 app/views/holdings/_cash.html.erb             |   7 +-
 .../holdings/_missing_price_tooltip.html.erb  |   2 +-
 app/views/holdings/index.html.erb             |   4 +-
 app/views/holdings/show.html.erb              |  39 +-
 .../_approval_bar.html.erb                    |   6 +-
 .../_super_admin_bar.html.erb                 |   4 +-
 app/views/import/cleans/show.html.erb         |  18 +-
 .../configurations/_account_import.html.erb   |   2 +-
 .../configurations/_mint_import.html.erb      |   6 +-
 .../configurations/_trade_import.html.erb     |   2 +-
 .../_transaction_import.html.erb              |   4 +-
 app/views/import/configurations/show.html.erb |   4 +-
 app/views/import/confirms/_mappings.html.erb  |  33 +-
 app/views/import/rows/_form.html.erb          |   6 +-
 app/views/import/uploads/show.html.erb        | 100 ++--
 app/views/imports/_empty.html.erb             |  12 +-
 app/views/imports/_failure.html.erb           |   6 +-
 app/views/imports/_import.html.erb            |  50 +-
 app/views/imports/_importing.html.erb         |   6 +-
 app/views/imports/_nav.html.erb               |   2 +-
 app/views/imports/_ready.html.erb             |   8 +-
 app/views/imports/_revert_failure.html.erb    |  10 +-
 app/views/imports/_success.html.erb           |  11 +-
 app/views/imports/index.html.erb              |  11 +-
 app/views/imports/new.html.erb                |  43 +-
 app/views/investments/_value_tooltip.html.erb |   2 +-
 app/views/investments/edit.html.erb           |   7 +-
 app/views/investments/new.html.erb            |   7 +-
 app/views/invitations/new.html.erb            |  36 +-
 app/views/invite_codes/_invite_code.html.erb  |   4 +-
 app/views/invite_codes/index.html.erb         |   2 +-
 app/views/layouts/application.html.erb        | 203 ++++----
 app/views/layouts/imports.html.erb            |  16 +-
 app/views/layouts/lookbooks.html.erb          |  14 +
 app/views/layouts/settings.html.erb           |   2 +-
 .../layouts/shared/_breadcrumbs.html.erb      |  42 +-
 .../layouts/shared/_confirm_dialog.html.erb   |  30 ++
 .../layouts/shared/_fixed_content.html.erb    |   6 -
 app/views/layouts/shared/_htmldoc.html.erb    |  17 +-
 app/views/layouts/shared/_nav_item.html.erb   |  20 +
 app/views/layouts/sidebar/_nav_item.html.erb  |  18 -
 app/views/layouts/wizard.html.erb             |  16 +-
 app/views/loans/_overview.html.erb            |   7 +-
 app/views/loans/edit.html.erb                 |   7 +-
 app/views/loans/new.html.erb                  |   7 +-
 app/views/merchants/_merchant.html.erb        |  22 +-
 app/views/messages/_chat_form.html.erb        |   8 +-
 app/views/mfa/backup_codes.html.erb           |   9 +-
 app/views/mfa/new.html.erb                    |   6 +-
 app/views/onboardings/_header.html.erb        |   2 +-
 app/views/onboardings/preferences.html.erb    |   2 +-
 app/views/onboardings/show.html.erb           |   7 +-
 app/views/other_assets/edit.html.erb          |   7 +-
 app/views/other_assets/new.html.erb           |   7 +-
 app/views/other_liabilities/edit.html.erb     |   7 +-
 app/views/other_liabilities/new.html.erb      |   7 +-
 app/views/pages/dashboard.html.erb            |  36 +-
 .../pages/dashboard/_balance_sheet.html.erb   |  79 ++-
 .../pages/dashboard/_group_weight.html.erb    |  10 +
 .../pages/dashboard/_net_worth_chart.html.erb |   9 +-
 .../_no_account_empty_state.html.erb          |  15 -
 .../_no_accounts_graph_placeholder.html.erb   |  17 +
 app/views/pages/early_access.html.erb         |   2 +-
 app/views/pages/feedback.html.erb             |   5 +-
 app/views/plaid_items/_plaid_item.html.erb    | 115 ++--
 app/views/properties/_overview.html.erb       |   7 +-
 app/views/properties/edit.html.erb            |   7 +-
 app/views/properties/new.html.erb             |   7 +-
 app/views/registrations/new.html.erb          |  14 +-
 app/views/rule/actions/_action.html.erb       |  10 +-
 app/views/rule/conditions/_condition.html.erb |  11 +-
 .../rule/conditions/_condition_group.html.erb |  19 +-
 app/views/rules/_category_rule_cta.html.erb   |   5 +-
 app/views/rules/_form.html.erb                |  21 +-
 app/views/rules/_rule.html.erb                |  26 +-
 app/views/rules/confirm.html.erb              |  36 +-
 app/views/rules/edit.html.erb                 |   7 +-
 app/views/rules/index.html.erb                |  40 +-
 app/views/rules/new.html.erb                  |   7 +-
 app/views/settings/_settings_nav.html.erb     |  24 +-
 .../settings/_settings_nav_item.html.erb      |   4 +-
 .../_settings_nav_link_large.html.erb         |  16 +-
 app/views/settings/_user_avatar.html.erb      |   8 +-
 .../settings/_user_avatar_field.html.erb      |  11 +-
 app/views/settings/billings/show.html.erb     |  27 +-
 .../hostings/_invite_code_settings.html.erb   |  20 +-
 app/views/settings/preferences/show.html.erb  |  10 +-
 app/views/settings/profiles/show.html.erb     |  86 ++-
 app/views/settings/securities/show.html.erb   |  30 +-
 app/views/shared/_circle_logo.html.erb        |  13 -
 app/views/shared/_confirm_modal.html.erb      |  16 -
 app/views/shared/_disclosure.html.erb         |  12 -
 app/views/shared/_drawer.html.erb             |  19 -
 app/views/shared/_form_errors.html.erb        |   4 +-
 app/views/shared/_icon.html.erb               |   6 -
 app/views/shared/_icon_custom.html.erb        |   6 -
 app/views/shared/_icon_image.html.erb         |   6 -
 app/views/shared/_modal.html.erb              |  19 -
 app/views/shared/_modal_form.html.erb         |  18 -
 app/views/shared/_money_field.html.erb        |   2 +-
 app/views/shared/_pagination.html.erb         |   8 +-
 app/views/shared/_subscribe_modal.html.erb    |  43 +-
 app/views/shared/_toggle_form.html.erb        |  11 -
 .../shared/_transaction_type_tabs.html.erb    |  12 +-
 app/views/shared/_trend_change.html.erb       |   2 +-
 .../shared/notifications/_alert.html.erb      |   4 +-
 app/views/shared/notifications/_cta.html.erb  |   2 +-
 .../shared/notifications/_loading.html.erb    |   2 +-
 .../shared/notifications/_notice.html.erb     |  30 +-
 app/views/tag/deletions/new.html.erb          |  33 +-
 app/views/tags/_tag.html.erb                  |  34 +-
 app/views/tags/edit.html.erb                  |   7 +-
 app/views/tags/index.html.erb                 |  22 +-
 app/views/tags/new.html.erb                   |   7 +-
 app/views/trades/_header.html.erb             |   2 +-
 app/views/trades/_trade.html.erb              |   9 +-
 app/views/trades/new.html.erb                 |   7 +-
 app/views/trades/show.html.erb                |  27 +-
 app/views/transactions/_form.html.erb         |   8 +-
 app/views/transactions/_header.html.erb       |   2 +-
 .../transactions/_selection_bar.html.erb      |   8 +-
 app/views/transactions/_transaction.html.erb  |  13 +-
 .../transactions/_transfer_match.html.erb     |   6 +-
 .../transactions/bulk_updates/new.html.erb    |  76 +--
 app/views/transactions/index.html.erb         |  55 +-
 app/views/transactions/new.html.erb           |   7 +-
 .../transactions/searches/_form.html.erb      |  23 +-
 .../transactions/searches/_menu.html.erb      |  71 ++-
 .../searches/filters/_account_filter.html.erb |   2 +-
 .../filters/_category_filter.html.erb         |   2 +-
 .../filters/_merchant_filter.html.erb         |  11 +-
 .../searches/filters/_tag_filter.html.erb     |  11 +-
 app/views/transactions/show.html.erb          |  53 +-
 app/views/transfer_matches/new.html.erb       | 109 ++--
 app/views/transfers/_account_links.html.erb   |  23 +-
 app/views/transfers/_form.html.erb            |   4 +-
 app/views/transfers/new.html.erb              |   7 +-
 app/views/transfers/show.html.erb             |  49 +-
 app/views/users/_user_menu.html.erb           | 100 ++--
 app/views/valuations/_valuation.html.erb      |   4 +-
 app/views/valuations/index.html.erb           |   4 +-
 app/views/valuations/new.html.erb             |   7 +-
 app/views/valuations/show.html.erb            |  19 +-
 app/views/vehicles/_overview.html.erb         |   7 +-
 app/views/vehicles/edit.html.erb              |   7 +-
 app/views/vehicles/new.html.erb               |   7 +-
 config/application.rb                         |   5 +
 config/importmap.rb                           |   1 +
 config/initializers/assets.rb                 |   2 +-
 config/initializers/mini_profiler.rb          |   3 +
 config/routes.rb                              |   2 +
 lib/money/currency.rb                         |   6 +
 test/application_system_test_case.rb          |   6 +
 .../previews/button_component_preview.rb      |  16 +
 .../previews/dialog_component_preview.rb      |  46 ++
 .../previews/disclosure_component_preview.rb  |  13 +
 .../previews/filled_icon_component_preview.rb |  11 +
 .../previews/link_component_preview.rb        |  25 +
 .../previews/menu_component_preview.rb        |  44 ++
 .../previews/tabs_component_preview.rb        |   7 +
 .../tabs_component_preview/custom.html.erb    |  29 ++
 .../tabs_component_preview/default.html.erb   |  16 +
 .../previews/toggle_component_preview.rb      |  15 +
 test/controllers/chats_controller_test.rb     |   6 -
 test/system/accounts_test.rb                  |   7 +-
 test/system/chats_test.rb                     |   2 +-
 test/system/imports_test.rb                   |  32 +-
 test/system/settings_test.rb                  |   6 +-
 test/system/trades_test.rb                    |   6 +-
 291 files changed, 4143 insertions(+), 3104 deletions(-)
 create mode 100644 app/assets/tailwind/maybe-design-system/background-utils.css
 create mode 100644 app/assets/tailwind/maybe-design-system/border-utils.css
 create mode 100644 app/assets/tailwind/maybe-design-system/component-utils.css
 create mode 100644 app/assets/tailwind/maybe-design-system/foreground-utils.css
 create mode 100644 app/assets/tailwind/maybe-design-system/text-utils.css
 create mode 100644 app/components/button_component.html.erb
 create mode 100644 app/components/button_component.rb
 create mode 100644 app/components/buttonish_component.rb
 create mode 100644 app/components/dialog_component.html.erb
 create mode 100644 app/components/dialog_component.rb
 rename app/{javascript/controllers/modal_controller.js => components/dialog_controller.js} (55%)
 create mode 100644 app/components/disclosure_component.html.erb
 create mode 100644 app/components/disclosure_component.rb
 create mode 100644 app/components/filled_icon_component.html.erb
 create mode 100644 app/components/filled_icon_component.rb
 create mode 100644 app/components/link_component.html.erb
 create mode 100644 app/components/link_component.rb
 create mode 100644 app/components/menu_component.html.erb
 create mode 100644 app/components/menu_component.rb
 rename app/{javascript/controllers => components}/menu_controller.js (100%)
 create mode 100644 app/components/menu_item_component.html.erb
 create mode 100644 app/components/menu_item_component.rb
 create mode 100644 app/components/tab_component.rb
 create mode 100644 app/components/tabs/nav_component.rb
 create mode 100644 app/components/tabs/panel_component.rb
 create mode 100644 app/components/tabs_component.html.erb
 create mode 100644 app/components/tabs_component.rb
 create mode 100644 app/components/tabs_controller.js
 create mode 100644 app/components/toggle_component.html.erb
 create mode 100644 app/components/toggle_component.rb
 create mode 100644 app/controllers/lookbooks_controller.rb
 create mode 100644 app/helpers/custom_confirm.rb
 delete mode 100644 app/helpers/forms_helper.rb
 delete mode 100644 app/helpers/menus_helper.rb
 delete mode 100644 app/javascript/controllers/account_collapse_controller.js
 create mode 100644 app/javascript/controllers/app_layout_controller.js
 create mode 100644 app/javascript/controllers/confirm_dialog_controller.js
 create mode 100644 app/javascript/controllers/intercom_controller.js
 delete mode 100644 app/javascript/controllers/preserve_scroll_controller.js
 delete mode 100644 app/javascript/controllers/sidebar_controller.js
 delete mode 100644 app/javascript/controllers/tabs_controller.js
 create mode 100644 app/views/layouts/lookbooks.html.erb
 create mode 100644 app/views/layouts/shared/_confirm_dialog.html.erb
 delete mode 100644 app/views/layouts/shared/_fixed_content.html.erb
 create mode 100644 app/views/layouts/shared/_nav_item.html.erb
 delete mode 100644 app/views/layouts/sidebar/_nav_item.html.erb
 create mode 100644 app/views/pages/dashboard/_group_weight.html.erb
 delete mode 100644 app/views/pages/dashboard/_no_account_empty_state.html.erb
 create mode 100644 app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
 delete mode 100644 app/views/shared/_circle_logo.html.erb
 delete mode 100644 app/views/shared/_confirm_modal.html.erb
 delete mode 100644 app/views/shared/_disclosure.html.erb
 delete mode 100644 app/views/shared/_drawer.html.erb
 delete mode 100644 app/views/shared/_icon.html.erb
 delete mode 100644 app/views/shared/_icon_custom.html.erb
 delete mode 100644 app/views/shared/_icon_image.html.erb
 delete mode 100644 app/views/shared/_modal.html.erb
 delete mode 100644 app/views/shared/_modal_form.html.erb
 delete mode 100644 app/views/shared/_toggle_form.html.erb
 create mode 100644 config/initializers/mini_profiler.rb
 create mode 100644 test/components/previews/button_component_preview.rb
 create mode 100644 test/components/previews/dialog_component_preview.rb
 create mode 100644 test/components/previews/disclosure_component_preview.rb
 create mode 100644 test/components/previews/filled_icon_component_preview.rb
 create mode 100644 test/components/previews/link_component_preview.rb
 create mode 100644 test/components/previews/menu_component_preview.rb
 create mode 100644 test/components/previews/tabs_component_preview.rb
 create mode 100644 test/components/previews/tabs_component_preview/custom.html.erb
 create mode 100644 test/components/previews/tabs_component_preview/default.html.erb
 create mode 100644 test/components/previews/toggle_component_preview.rb

diff --git a/.cursor/rules/project-conventions.mdc b/.cursor/rules/project-conventions.mdc
index 33906c22..5a312840 100644
--- a/.cursor/rules/project-conventions.mdc
+++ b/.cursor/rules/project-conventions.mdc
@@ -53,6 +53,7 @@ This codebase adopts a "skinny controller, fat models" convention.  Furthermore,
 - Use Turbo streams to enhance functionality, but do not solely depend on it
 - Format currencies, numbers, dates, and other values server-side, then pass to Stimulus controllers for display only
 - Keep client-side code for where it truly shines.  For example, @bulk_select_controller.js is a case where server-side solutions would degrade the user experience significantly.  When bulk-selecting entries, client-side solutions are the way to go and Stimulus provides the right toolset to achieve this.
+- Always use the `icon` helper in [application_helper.rb](mdc:app/helpers/application_helper.rb) for icons.  NEVER use `lucide_icon` helper directly.
 
 The Hotwire suite (Turbo/Stimulus) works very well with these native elements and we optimize for this.
 
diff --git a/Gemfile b/Gemfile
index f5d73296..26b29fc9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -19,9 +19,11 @@ gem "propshaft"
 gem "tailwindcss-rails"
 gem "lucide-rails", github: "maybe-finance/lucide-rails"
 
-# Hotwire
+# Hotwire + UI
 gem "stimulus-rails"
 gem "turbo-rails"
+gem "view_component"
+gem "lookbook", ">= 2.3.7"
 
 gem "hotwire_combobox"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 9fb79093..2e64fa11 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -85,8 +85,8 @@ GEM
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.3)
     aws-eventstream (1.3.2)
-    aws-partitions (1.1073.0)
-    aws-sdk-core (3.221.0)
+    aws-partitions (1.1093.0)
+    aws-sdk-core (3.222.3)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
@@ -133,21 +133,23 @@ GEM
       logger (~> 1.5)
     chunky_png (1.4.0)
     climate_control (1.2.0)
-    concurrent-ruby (1.3.5)
-    connection_pool (2.5.2)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.5.3)
     crack (1.0.0)
       bigdecimal
       rexml
     crass (1.0.6)
+    css_parser (1.21.1)
+      addressable
     csv (3.3.4)
     date (3.4.1)
     debug (1.10.0)
       irb (~> 1.10)
       reline (>= 0.3.8)
     docile (1.4.1)
-    dotenv (3.1.7)
-    dotenv-rails (3.1.7)
-      dotenv (= 3.1.7)
+    dotenv (3.1.8)
+    dotenv-rails (3.1.8)
+      dotenv (= 3.1.8)
       railties (>= 6.1)
     drb (2.2.1)
     erb_lint (0.9.0)
@@ -171,14 +173,14 @@ GEM
       net-http (>= 0.5.0)
     faraday-retry (2.3.1)
       faraday (~> 2.0)
-    ffi (1.17.1-aarch64-linux-gnu)
-    ffi (1.17.1-aarch64-linux-musl)
-    ffi (1.17.1-arm-linux-gnu)
-    ffi (1.17.1-arm-linux-musl)
-    ffi (1.17.1-arm64-darwin)
-    ffi (1.17.1-x86_64-darwin)
-    ffi (1.17.1-x86_64-linux-gnu)
-    ffi (1.17.1-x86_64-linux-musl)
+    ffi (1.17.2-aarch64-linux-gnu)
+    ffi (1.17.2-aarch64-linux-musl)
+    ffi (1.17.2-arm-linux-gnu)
+    ffi (1.17.2-arm-linux-musl)
+    ffi (1.17.2-arm64-darwin)
+    ffi (1.17.2-x86_64-darwin)
+    ffi (1.17.2-x86_64-linux-gnu)
+    ffi (1.17.2-x86_64-linux-musl)
     foreman (0.88.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -194,6 +196,8 @@ GEM
       rails (>= 7.0.7.2)
       stimulus-rails (>= 1.2)
       turbo-rails (>= 1.2)
+    htmlbeautifier (1.4.3)
+    htmlentities (4.3.4)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     i18n-tasks (1.0.15)
@@ -221,7 +225,7 @@ GEM
       activesupport (> 4.0)
       jwt (~> 2.0)
     io-console (0.8.0)
-    irb (1.15.1)
+    irb (1.15.2)
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
@@ -255,6 +259,18 @@ GEM
     loofah (2.24.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lookbook (2.3.9)
+      activemodel
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      marcel (~> 1.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (>= 3.26, < 5.0)
+      view_component (>= 2.0)
+      yard (~> 0.9)
+      zeitwerk (~> 2.5)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -262,6 +278,7 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    method_source (1.1.0)
     mini_magick (5.2.0)
       benchmark
       logger
@@ -273,7 +290,7 @@ GEM
     multipart-post (2.4.1)
     net-http (0.6.0)
       uri
-    net-imap (0.5.6)
+    net-imap (0.5.7)
       date
       net-protocol
     net-pop (0.1.2)
@@ -283,28 +300,28 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.6-aarch64-linux-gnu)
+    nokogiri (1.18.8-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.6-aarch64-linux-musl)
+    nokogiri (1.18.8-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.18.6-arm-linux-gnu)
+    nokogiri (1.18.8-arm-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.6-arm-linux-musl)
+    nokogiri (1.18.8-arm-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.18.6-arm64-darwin)
+    nokogiri (1.18.8-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.6-x86_64-darwin)
+    nokogiri (1.18.8-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.6-x86_64-linux-gnu)
+    nokogiri (1.18.8-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.18.6-x86_64-linux-musl)
+    nokogiri (1.18.8-x86_64-linux-musl)
       racc (~> 1.4)
     octokit (10.0.0)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
     pagy (9.3.4)
-    parallel (1.26.3)
-    parser (3.3.7.2)
+    parallel (1.27.0)
+    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     pg (1.5.9)
@@ -382,7 +399,7 @@ GEM
       ffi (~> 1.0)
     rbs (3.9.2)
       logger
-    rdoc (6.13.0)
+    rdoc (6.13.1)
       psych (>= 4.0.0)
     redcarpet (3.6.1)
     redis (5.4.0)
@@ -390,15 +407,16 @@ GEM
     redis-client (0.24.0)
       connection_pool
     regexp_parser (2.10.0)
-    reline (0.6.0)
+    reline (0.6.1)
       io-console (~> 0.5)
     rexml (3.4.1)
     rotp (6.3.0)
-    rqrcode (3.0.0)
+    rouge (4.5.2)
+    rqrcode (3.1.0)
       chunky_png (~> 1.0)
       rqrcode_core (~> 2.0)
     rqrcode_core (2.0.0)
-    rubocop (1.74.0)
+    rubocop (1.75.4)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -406,20 +424,21 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.41.0)
+    rubocop-ast (1.44.1)
       parser (>= 3.3.7.2)
-    rubocop-performance (1.24.0)
+      prism (~> 1.4)
+    rubocop-performance (1.25.0)
       lint_roller (~> 1.1)
-      rubocop (>= 1.72.1, < 2.0)
+      rubocop (>= 1.75.0, < 2.0)
       rubocop-ast (>= 1.38.0, < 2.0)
-    rubocop-rails (2.30.3)
+    rubocop-rails (2.31.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.72.1, < 2.0)
+      rubocop (>= 1.75.0, < 2.0)
       rubocop-ast (>= 1.38.0, < 2.0)
     rubocop-rails-omakase (1.1.0)
       rubocop (>= 1.72)
@@ -479,18 +498,18 @@ GEM
     sorbet-runtime (0.5.12043)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
-    stringio (3.1.5)
+    stringio (3.1.7)
     stripe (15.0.0)
-    tailwindcss-rails (4.2.1)
+    tailwindcss-rails (4.2.2)
       railties (>= 7.0.0)
       tailwindcss-ruby (~> 4.0)
-    tailwindcss-ruby (4.0.15)
-    tailwindcss-ruby (4.0.15-aarch64-linux-gnu)
-    tailwindcss-ruby (4.0.15-aarch64-linux-musl)
-    tailwindcss-ruby (4.0.15-arm64-darwin)
-    tailwindcss-ruby (4.0.15-x86_64-darwin)
-    tailwindcss-ruby (4.0.15-x86_64-linux-gnu)
-    tailwindcss-ruby (4.0.15-x86_64-linux-musl)
+    tailwindcss-ruby (4.1.4)
+    tailwindcss-ruby (4.1.4-aarch64-linux-gnu)
+    tailwindcss-ruby (4.1.4-aarch64-linux-musl)
+    tailwindcss-ruby (4.1.4-arm64-darwin)
+    tailwindcss-ruby (4.1.4-x86_64-darwin)
+    tailwindcss-ruby (4.1.4-x86_64-linux-gnu)
+    tailwindcss-ruby (4.1.4-x86_64-linux-musl)
     terminal-table (4.0.0)
       unicode-display_width (>= 1.1.1, < 4)
     thor (1.3.2)
@@ -508,6 +527,10 @@ GEM
     vcr (6.3.1)
       base64
     vernier (1.7.0)
+    view_component (3.22.0)
+      activesupport (>= 5.2.0, < 8.1)
+      concurrent-ruby (= 1.3.4)
+      method_source (~> 1.0)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -524,6 +547,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
+    yard (0.9.37)
     zeitwerk (2.7.2)
 
 PLATFORMS
@@ -564,6 +588,7 @@ DEPENDENCIES
   jwt
   letter_opener
   logtail-rails
+  lookbook (>= 2.3.7)
   lucide-rails!
   mocha
   octokit
@@ -596,6 +621,7 @@ DEPENDENCIES
   tzinfo-data
   vcr
   vernier
+  view_component
   web-console
   webmock
 
diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index fc7a67ac..d29b5c04 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -5,6 +5,12 @@
   One-off styling (3rd party overrides, etc.) should be done in the application.css file.
 */
 
+@import './maybe-design-system/background-utils.css';
+@import './maybe-design-system/foreground-utils.css';
+@import './maybe-design-system/text-utils.css';
+@import './maybe-design-system/border-utils.css';
+@import './maybe-design-system/component-utils.css';
+
 @custom-variant theme-dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 @theme {
@@ -18,6 +24,7 @@
   --color-success: var(--color-green-600);
   --color-warning: var(--color-yellow-600);
   --color-destructive: var(--color-red-600);
+  --color-shadow: --alpha(var(--color-black) / 6%);
 
   /* Gray scale */
   --color-gray-25: #FAFAFA;
@@ -231,262 +238,25 @@
   }
 }
 
-/* Custom shadow borders used for surfaces / containers  */
-@utility shadow-border-xs {
-  box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-black-50);
-}
-
-@utility shadow-border-sm {
-  box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-black-50);
-}
-
-@utility shadow-border-md {
-  box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-black-50);
-}
-
-@utility shadow-border-lg {
-  box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-black-50);
-}
-
-@utility shadow-border-xl {
-  box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-black-50);
-}
-
-/* Design system color utilities */
-@utility text-primary {
-  @apply text-gray-900;
-
-  @variant theme-dark {
-   @apply text-white;
-  }
-}
-
-@utility text-secondary {
-  @apply text-gray-500;
-
-  @variant theme-dark {
-    @apply text-gray-400;
-  }
-}
-
-@utility text-subdued {
-  @apply text-gray-400;
-
-  @variant theme-dark {
-    @apply text-gray-600;
-  }
-}
-
-@utility text-link {
-  @apply text-blue-600;
-
-  @variant theme-dark {
-    @apply text-blue-500;
-  }
-}
-
-@utility bg-surface {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-black;
-  }
-}
-
-@utility bg-surface-hover {
-  @apply bg-gray-100;
-
-  @variant theme-dark {
-    @apply bg-gray-800;
-  }
-}
-
-@utility bg-surface-inset {
-  @apply bg-gray-100;
-
-  @variant theme-dark {
-    @apply bg-gray-900;
-  }
-}
-
-@utility bg-surface-inset-hover {
-  @apply bg-gray-200;
-
-  @variant theme-dark {
-    @apply bg-gray-800;
-  }
-}
-
-@utility bg-container {
-  @apply bg-white;
-
-  @variant theme-dark {
-    @apply bg-gray-900;
-  }
-}
-
-@utility bg-container-hover {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-gray-800;
-  }
-}
-
-@utility bg-container-inset {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-gray-800;
-  }
-}
-
-@utility bg-container-inset-hover {
-  @apply bg-gray-100;
-
-  @variant theme-dark {
-    @apply bg-gray-700;
-  }
-}
-
-@utility bg-inverse {
-  @apply bg-gray-800;
-
-  @variant theme-dark {
-    @apply bg-white;
-  }
-}
-
-@utility bg-inverse-hover {
-  @apply bg-gray-700;
-
-  @variant theme-dark {
-    @apply bg-gray-100;
-  }
-}
-
-@utility bg-overlay {
-  background-color: rgba(var(--color-gray-100), 0.5);
-
-  @variant theme-dark {
-    background-color: var(--color-alpha-black-900);
-  }
-}
-
-@utility border-primary {
-  @apply border-alpha-black-300;
-
-  @variant theme-dark {
-    @apply border-alpha-white-400;
-  }
-}
-
-@utility border-secondary {
-  @apply border-alpha-black-200;
-
-  @variant theme-dark {
-    @apply border-alpha-white-300;
-  }
-}
-
-@utility border-tertiary {
-  @apply border-alpha-black-100;
-
-  @variant theme-dark {
-    @apply border-alpha-white-200;
-  }
-}
-
-@utility border-subdued {
-  @apply border-alpha-black-50;
-
-  @variant theme-dark {
-    @apply border-alpha-white-100;
-  }
-}
-
-@utility border-solid {
-  @apply border-black;
-
-  @variant theme-dark {
-    @apply border-white;
-  }
-}
-
-@utility border-destructive {
-  @apply border-red-500;
-
-  @variant theme-dark {
-    @apply border-red-400;
-  }
-}
-
-/* Foreground Colors */
-@utility fg-gray {
-  @apply text-gray-500;
-
-  @variant theme-dark {
-    @apply text-gray-400;
-  }
-}
-
-@utility fg-contrast {
-  @apply text-gray-400;
-
-  @variant theme-dark {
-    @apply text-gray-500;
-  }
-}
-
-@utility fg-inverse {
-  @apply text-white;
-
-  @variant theme-dark {
-    @apply text-gray-900;
-  }
-}
-
-@utility fg-primary {
-  @apply text-gray-900;
-
-  @variant theme-dark {
-    @apply text-white;
-  }
-}
-
-@utility fg-primary-variant {
-  @apply text-gray-800;
-
-  @variant theme-dark {
-    @apply text-gray-50;
-  }
-}
-
-@utility fg-secondary {
-  @apply text-gray-50;
-
-  @variant theme-dark {
-    @apply text-gray-700;
-  }
-}
-
-@utility fg-secondary-variant {
-  @apply text-gray-100;
-
-  @variant theme-dark {
-    @apply text-gray-600;
-  }
-}
-
-@utility fg-subdued {
-  @apply text-gray-400;
-
-  @variant theme-dark {
-    @apply text-gray-500;
-  }
+/* Specific override for strong tags in prose under dark mode */
+.prose:where([data-theme=dark], [data-theme=dark] *) strong {
+  color: theme(colors.white) !important;
 }
 
 @layer base {
+  [data-theme="dark"] { 
+    --color-success: var(--color-green-500);
+    --color-warning: var(--color-yellow-400);
+    --color-destructive: var(--color-red-400);
+    --color-shadow: --alpha(#000000 / 8%);
+
+    --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
+    --shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
+    --shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
+    --shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
+    --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
+  }
+
   button {
     @apply cursor-pointer focus-visible:outline-gray-900;
   }
@@ -495,6 +265,12 @@
     @apply text-gray-200;
   }
 
+  /* We control the sizing through DialogComponent, so reset this value */
+  dialog:modal {
+    max-width: 100dvw;
+    max-height: 100dvh;
+  }
+
   details>summary::-webkit-details-marker {
     @apply hidden;
   }
@@ -515,85 +291,6 @@
 }
 
 @layer components {
-  /* Buttons */
-  .btn {
-    @apply inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500;
-    @apply transition-all duration-300;
-  }
-
-  .btn--primary {
-    @apply button-bg-primary text-white disabled:text-gray-400;
-    @apply hover:button-bg-primary-hover;
-    @apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
-
-    @variant theme-dark {
-      @apply button-bg-primary fg-primary;
-      @apply hover:button-bg-primary-hover;
-      @apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
-    }
-  }
-
-  .btn--secondary {
-    @apply button-bg-secondary text-primary;
-    @apply hover:button-bg-secondary-hover;
-
-    @variant theme-dark {
-      @apply text-white;
-      background-color: var(--color-gray-700);
-      &:hover {
-        background-color: var(--color-gray-800);
-      }
-    }
-  }
-
-  .btn--outline {
-    @apply border border-alpha-black-200 text-primary disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-400;
-
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-
-    @variant theme-dark {
-      @apply border-alpha-white-300 text-white disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-600;
-
-      &:hover {
-        background-color: var(--color-gray-800);
-      }
-    }
-  }
-
-  .btn--ghost {
-    @apply border border-transparent text-primary;
-
-    &:hover {
-      background-color: var(--color-gray-100)
-    }
-
-    @variant theme-dark {
-      @apply fg-primary;
-
-      &:hover {
-        background-color: var(--color-gray-900);
-      }
-    }
-  }
-
-  .btn--outline-destructive {
-    @apply border border-red-500 text-red-500 hover:bg-gray-50;
-
-    @variant theme-dark {
-      @apply border-red-400 text-red-400 hover:button-bg-destructive-hover;
-    }
-  }
-
-  .btn--destructive {
-    @apply button-bg-destructive text-white hover:button-bg-destructive-hover disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-red-400;
-
-    @variant theme-dark {
-      @apply button-bg-destructive text-white hover:button-bg-destructive-hover disabled:button-bg-disabled disabled:hover:button-bg-disabled;
-    }
-  }
-
   /* Forms */
   .form-field {
     @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;
@@ -706,19 +403,6 @@
     }
   }
 
-  /* Switches */
-  .switch {
-    @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer;
-    @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full;
-    @apply after:transition-transform after:duration-300 after:ease-in-out;
-    @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
-    @apply transition-colors duration-300;
-
-    @variant theme-dark {
-      background-color: var(--color-gray-700);
-    }
-  }
-
   /* Tooltips */
   .tooltip {
     @apply hidden absolute;
@@ -733,120 +417,5 @@
   }
 }
 
-@layer utilities {
 
-  /* Specific override for strong tags in prose under dark mode */
-  .prose:where([data-theme=dark], [data-theme=dark] *) strong {
-    color: theme(colors.white) !important;
-  }
-}
 
-/* Button Backgrounds */
-@utility button-bg-primary {
-  @apply bg-gray-900;
-  /* Maps to fg-primary light */
-
-  @variant theme-dark {
-    @apply bg-white;
-    /* Maps to fg-primary dark */
-  }
-}
-
-@utility button-bg-primary-hover {
-  @apply bg-gray-800;
-  /* Maps to fg-primary-variant light */
-
-  @variant theme-dark {
-    @apply bg-gray-50;
-    /* Maps to fg-primary-variant dark */
-  }
-}
-
-@utility button-bg-secondary {
-  @apply bg-gray-50; /* Maps to fg-secondary light */
-
-  @variant theme-dark {
-    @apply bg-gray-700; /* Maps to fg-secondary dark */
-  }
-}
-
-@utility button-bg-secondary-hover {
-  @apply bg-gray-100; /* Maps to fg-secondary-variant light */
-
-  @variant theme-dark {
-    @apply bg-gray-600; /* Maps to fg-secondary-variant dark */
-  }
-}
-
-@utility button-bg-disabled {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-gray-700;
-  }
-}
-
-@utility button-bg-destructive {
-  @apply bg-red-500;
-
-  @variant theme-dark {
-    @apply bg-red-400;
-  }
-}
-
-@utility button-bg-destructive-hover {
-  @apply bg-red-600;
-
-  @variant theme-dark {
-    @apply bg-red-500;
-  }
-}
-
-@utility button-bg-ghost-hover {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-gray-800 fg-inverse;
-  }
-}
-
-@utility button-bg-outline-hover {
-  @apply bg-gray-100;
-
-  @variant theme-dark {
-    @apply bg-gray-700;
-  }
-}
-
-/* Tab Styles */
-@utility tab-item-active {
-  @apply bg-white;
-
-  @variant theme-dark {
-    @apply bg-gray-700;
-  }
-}
-
-@utility tab-item-hover {
-  @apply bg-gray-200;
-
-  @variant theme-dark {
-    @apply bg-gray-800;
-  }
-}
-
-@utility tab-bg-group {
-  @apply bg-gray-50;
-
-  @variant theme-dark {
-    @apply bg-alpha-black-700;
-  }
-}
-
-@utility bg-nav-indicator {
-  @apply bg-black;
-
-  @variant theme-dark {
-    @apply bg-white;
-  }
-}
diff --git a/app/assets/tailwind/maybe-design-system/background-utils.css b/app/assets/tailwind/maybe-design-system/background-utils.css
new file mode 100644
index 00000000..1c7bc56a
--- /dev/null
+++ b/app/assets/tailwind/maybe-design-system/background-utils.css
@@ -0,0 +1,87 @@
+@utility bg-surface {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-black;
+  }
+}
+
+@utility bg-surface-hover {
+  @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-900;
+  }
+}
+
+@utility bg-surface-inset {
+  @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
+}
+
+@utility bg-surface-inset-hover {
+  @apply bg-gray-200;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
+}
+
+@utility bg-container {
+  @apply bg-white;
+
+  @variant theme-dark {
+    @apply bg-gray-900;
+  }
+}
+
+@utility bg-container-hover {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
+}
+
+@utility bg-container-inset {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
+}
+
+@utility bg-container-inset-hover {
+  @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-700;
+  }
+}
+
+@utility bg-inverse {
+  @apply bg-gray-800;
+
+  @variant theme-dark {
+    @apply bg-white;
+  }
+}
+
+@utility bg-inverse-hover {
+  @apply bg-gray-700;
+
+  @variant theme-dark {
+    @apply bg-gray-100;
+  }
+}
+
+@utility bg-overlay {
+  background-color: --alpha(var(--color-gray-100) / 50%);
+
+  @variant theme-dark {
+    background-color: var(--color-alpha-black-900);
+  }
+}
\ No newline at end of file
diff --git a/app/assets/tailwind/maybe-design-system/border-utils.css b/app/assets/tailwind/maybe-design-system/border-utils.css
new file mode 100644
index 00000000..94c54a55
--- /dev/null
+++ b/app/assets/tailwind/maybe-design-system/border-utils.css
@@ -0,0 +1,88 @@
+/* Custom shadow borders used for surfaces / containers  */
+@utility shadow-border-xs {
+  box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-black-50);
+
+  @variant theme-dark {
+    box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-white-50);
+  }
+}
+
+@utility shadow-border-sm {
+  box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-black-50);
+
+  @variant theme-dark {
+    box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-white-50);
+  }
+}
+
+@utility shadow-border-md {
+  box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-black-50);
+
+  @variant theme-dark {
+    box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-white-50);
+  }
+}
+
+@utility shadow-border-lg {
+  box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-black-50);
+
+  @variant theme-dark {
+    box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-white-50);
+  }
+}
+
+@utility shadow-border-xl {
+  box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-black-50);
+
+  @variant theme-dark {
+    box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-white-50);
+  }
+}
+
+@utility border-primary {
+  @apply border-alpha-black-300;
+
+  @variant theme-dark {
+    @apply border-alpha-white-400;
+  }
+}
+
+@utility border-secondary {
+  @apply border-alpha-black-200;
+
+  @variant theme-dark {
+    @apply border-alpha-white-300;
+  }
+}
+
+@utility border-tertiary {
+  @apply border-alpha-black-100;
+
+  @variant theme-dark {
+    @apply border-alpha-white-200;
+  }
+}
+
+@utility border-subdued {
+  @apply border-alpha-black-50;
+
+  @variant theme-dark {
+    @apply border-alpha-white-100;
+  }
+}
+
+@utility border-solid {
+  @apply border-black;
+
+  @variant theme-dark {
+    @apply border-white;
+  }
+}
+
+@utility border-destructive {
+  @apply border-red-500;
+
+  @variant theme-dark {
+    @apply border-red-400;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/tailwind/maybe-design-system/component-utils.css b/app/assets/tailwind/maybe-design-system/component-utils.css
new file mode 100644
index 00000000..597b5092
--- /dev/null
+++ b/app/assets/tailwind/maybe-design-system/component-utils.css
@@ -0,0 +1,109 @@
+/* Button Backgrounds */
+@utility button-bg-primary {
+  @apply bg-gray-900;
+  /* Maps to fg-primary light */
+
+  @variant theme-dark {
+    @apply bg-white;
+    /* Maps to fg-primary dark */
+  }
+}
+
+@utility button-bg-primary-hover {
+  @apply bg-gray-800;
+  /* Maps to fg-primary-variant light */
+
+  @variant theme-dark {
+    @apply bg-gray-50;
+    /* Maps to fg-primary-variant dark */
+  }
+}
+
+@utility button-bg-secondary {
+  @apply bg-gray-50; /* Maps to fg-secondary light */
+
+  @variant theme-dark {
+    @apply bg-gray-700; /* Maps to fg-secondary dark */
+  }
+}
+
+@utility button-bg-secondary-hover {
+  @apply bg-gray-100; /* Maps to fg-secondary-variant light */
+
+  @variant theme-dark {
+    @apply bg-gray-600; /* Maps to fg-secondary-variant dark */
+  }
+}
+
+@utility button-bg-disabled {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-700;
+  }
+}
+
+@utility button-bg-destructive {
+  @apply bg-red-500;
+
+  @variant theme-dark {
+    @apply bg-red-400;
+  }
+}
+
+@utility button-bg-destructive-hover {
+  @apply bg-red-600;
+
+  @variant theme-dark {
+    @apply bg-red-500;
+  }
+}
+
+@utility button-bg-ghost-hover {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-gray-800 fg-inverse;
+  }
+}
+
+@utility button-bg-outline-hover {
+  @apply bg-gray-100;
+
+  @variant theme-dark {
+    @apply bg-gray-700;
+  }
+}
+
+/* Tab Styles */
+@utility tab-item-active {
+  @apply bg-white;
+
+  @variant theme-dark {
+    @apply bg-gray-700;
+  }
+}
+
+@utility tab-item-hover {
+  @apply bg-gray-200;
+
+  @variant theme-dark {
+    @apply bg-gray-800;
+  }
+}
+
+@utility tab-bg-group {
+  @apply bg-gray-50;
+
+  @variant theme-dark {
+    @apply bg-alpha-black-700;
+  }
+}
+
+@utility bg-nav-indicator {
+  @apply bg-black;
+
+  @variant theme-dark {
+    @apply bg-white;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/tailwind/maybe-design-system/foreground-utils.css b/app/assets/tailwind/maybe-design-system/foreground-utils.css
new file mode 100644
index 00000000..6bc76aa1
--- /dev/null
+++ b/app/assets/tailwind/maybe-design-system/foreground-utils.css
@@ -0,0 +1,63 @@
+@utility fg-gray {
+  @apply text-gray-500;
+
+  @variant theme-dark {
+    @apply text-gray-400;
+  }
+}
+
+@utility fg-contrast {
+  @apply text-gray-400;
+
+  @variant theme-dark {
+    @apply text-gray-500;
+  }
+}
+
+@utility fg-inverse {
+  @apply text-white;
+
+  @variant theme-dark {
+    @apply text-gray-900;
+  }
+}
+
+@utility fg-primary {
+  @apply text-gray-900;
+
+  @variant theme-dark {
+    @apply text-white;
+  }
+}
+
+@utility fg-primary-variant {
+  @apply text-gray-800;
+
+  @variant theme-dark {
+    @apply text-gray-50;
+  }
+}
+
+@utility fg-secondary {
+  @apply text-gray-50;
+
+  @variant theme-dark {
+    @apply text-gray-700;
+  }
+}
+
+@utility fg-secondary-variant {
+  @apply text-gray-100;
+
+  @variant theme-dark {
+    @apply text-gray-600;
+  }
+}
+
+@utility fg-subdued {
+  @apply text-gray-400;
+
+  @variant theme-dark {
+    @apply text-gray-500;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/tailwind/maybe-design-system/text-utils.css b/app/assets/tailwind/maybe-design-system/text-utils.css
new file mode 100644
index 00000000..1a35dfff
--- /dev/null
+++ b/app/assets/tailwind/maybe-design-system/text-utils.css
@@ -0,0 +1,39 @@
+@utility text-primary {
+  @apply text-gray-900;
+
+  @variant theme-dark {
+   @apply text-white;
+  }
+}
+
+@utility text-inverse {
+  @apply text-white;
+
+  @variant theme-dark {
+    @apply text-gray-900;
+  }
+}
+
+@utility text-secondary {
+  @apply text-gray-500;
+
+  @variant theme-dark {
+    @apply text-gray-400;
+  }
+}
+
+@utility text-subdued {
+  @apply text-gray-400;
+
+  @variant theme-dark {
+    @apply text-gray-600;
+  }
+}
+
+@utility text-link {
+  @apply text-blue-600;
+
+  @variant theme-dark {
+    @apply text-blue-500;
+  }
+}
\ No newline at end of file
diff --git a/app/components/button_component.html.erb b/app/components/button_component.html.erb
new file mode 100644
index 00000000..e0c5e017
--- /dev/null
+++ b/app/components/button_component.html.erb
@@ -0,0 +1,13 @@
+<%= container do %>
+  <% if icon && (icon_position != "right") %>
+    <%= lucide_icon(icon, class: icon_classes) %>
+  <% end %>
+
+  <% unless icon_only? %>
+    <%= text %>
+  <% end %>
+
+  <% if icon && icon_position == "right" %>
+    <%= lucide_icon(icon, class: icon_classes) %>
+  <% end %>
+<% end %>
diff --git a/app/components/button_component.rb b/app/components/button_component.rb
new file mode 100644
index 00000000..36600a3c
--- /dev/null
+++ b/app/components/button_component.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# An extension to `button_to` helper.  All options are passed through to the `button_to` helper with some additional
+# options available.
+class ButtonComponent < ButtonishComponent
+  attr_reader :confirm
+
+  def initialize(confirm: nil, **opts)
+    super(**opts)
+    @confirm = confirm
+  end
+
+  def container(&block)
+    if href.present?
+      button_to(href, **merged_opts, &block)
+    else
+      content_tag(:button, **merged_opts, &block)
+    end
+  end
+
+  private
+    def merged_opts
+      merged_opts = opts.dup || {}
+      extra_classes = merged_opts.delete(:class)
+      href = merged_opts.delete(:href)
+      data = merged_opts.delete(:data) || {}
+
+      if confirm.present?
+        data = data.merge(turbo_confirm: confirm.to_data_attribute)
+      end
+
+      if frame.present?
+        data = data.merge(turbo_frame: frame)
+      end
+
+      merged_opts.merge(
+        class: class_names(container_classes, extra_classes),
+        data: data
+      )
+    end
+end
diff --git a/app/components/buttonish_component.rb b/app/components/buttonish_component.rb
new file mode 100644
index 00000000..4743616e
--- /dev/null
+++ b/app/components/buttonish_component.rb
@@ -0,0 +1,148 @@
+class ButtonishComponent < ViewComponent::Base
+  VARIANTS = {
+    primary: {
+      container_classes: "text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
+      icon_classes: "fg-inverse"
+    },
+    secondary: {
+      container_classes: "text-secondary bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 disabled:bg-gray-200 theme-dark:disabled:bg-gray-600",
+      icon_classes: "fg-primary"
+    },
+    destructive: {
+      container_classes: "text-inverse bg-red-500 theme-dark:bg-red-400 hover:bg-red-600 theme-dark:hover:bg-red-500 disabled:bg-red-200 theme-dark:disabled:bg-red-600",
+      icon_classes: "fg-white"
+    },
+    outline: {
+      container_classes: "text-primary border border-secondary bg-transparent hover:bg-surface-hover",
+      icon_classes: "fg-gray"
+    },
+    outline_destructive: {
+      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    ghost: {
+      container_classes: "text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    icon: {
+      container_classes: "hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      icon_classes: "fg-gray"
+    },
+    icon_inverse: {
+      container_classes: "bg-inverse hover:bg-inverse-hover",
+      icon_classes: "fg-inverse"
+    }
+  }.freeze
+
+  SIZES = {
+    sm: {
+      container_classes: "px-2 py-1",
+      icon_container_classes: "inline-flex items-center justify-center w-8 h-8",
+      radius_classes: "rounded-md",
+      text_classes: "text-sm",
+      icon_classes: "w-4 h-4"
+    },
+    md: {
+      container_classes: "px-3 py-2",
+      icon_container_classes: "inline-flex items-center justify-center w-9 h-9",
+      radius_classes: "rounded-lg",
+      text_classes: "text-sm",
+      icon_classes: "w-5 h-5"
+    },
+    lg: {
+      container_classes: "px-4 py-3",
+      icon_container_classes: "inline-flex items-center justify-center w-10 h-10",
+      radius_classes: "rounded-xl",
+      text_classes: "text-base",
+      icon_classes: "w-6 h-6"
+    }
+  }.freeze
+
+  attr_reader :variant, :size, :href, :icon, :icon_position, :text, :full_width, :extra_classes, :frame, :opts
+
+  def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_position: :left, full_width: false, frame: nil, **opts)
+    @variant = variant.to_s.underscore.to_sym
+    @size = size.to_sym
+    @href = href
+    @icon = icon
+    @icon_position = icon_position.to_sym
+    @text = text
+    @full_width = full_width
+    @extra_classes = opts.delete(:class)
+    @frame = frame
+    @opts = opts
+  end
+
+  def call
+    raise NotImplementedError, "ButtonishComponent is an abstract class and cannot be instantiated directly."
+  end
+
+  def container_classes(override_classes = nil)
+    class_names(
+      "font-medium whitespace-nowrap",
+      merged_base_classes,
+      full_width ? "w-full justify-center" : nil,
+      container_size_classes,
+      size_data.dig(:text_classes),
+      variant_data.dig(:container_classes)
+    )
+  end
+
+  def container_size_classes
+    icon_only? ? size_data.dig(:icon_container_classes) : size_data.dig(:container_classes)
+  end
+
+  def icon_classes
+    class_names(
+      size_data.dig(:icon_classes),
+      variant_data.dig(:icon_classes)
+    )
+  end
+
+  def icon_only?
+    variant.in?([ :icon, :icon_inverse ])
+  end
+
+  private
+    def variant_data
+      self.class::VARIANTS.dig(variant)
+    end
+
+    def size_data
+      self.class::SIZES.dig(size)
+    end
+
+    # Make sure that user can override common classes like `hidden`
+    def merged_base_classes
+      base_display_classes = "inline-flex items-center gap-1"
+      base_radius_classes = size_data.dig(:radius_classes)
+
+      extra_classes_list = (extra_classes || "").split
+
+      has_display_override = extra_classes_list.any? { |c| permitted_display_override_classes.include?(c) }
+      has_radius_override = extra_classes_list.any? { |c| permitted_radius_override_classes.include?(c) }
+
+      base_classes = []
+
+      unless has_display_override
+        base_classes << base_display_classes
+      end
+
+      unless has_radius_override
+        base_classes << base_radius_classes
+      end
+
+      class_names(
+        base_classes,
+        extra_classes
+      )
+    end
+
+    def permitted_radius_override_classes
+      [ "rounded-full" ]
+    end
+
+    def permitted_display_override_classes
+      [ "hidden", "flex" ]
+    end
+end
diff --git a/app/components/dialog_component.html.erb b/app/components/dialog_component.html.erb
new file mode 100644
index 00000000..8b2a67be
--- /dev/null
+++ b/app/components/dialog_component.html.erb
@@ -0,0 +1,38 @@
+<turbo-frame id="<%= frame %>">
+  <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
+    <%= tag.div class: dialog_outer_classes do %>
+      <%= tag.div class: dialog_inner_classes, data: { dialog_target: "content" } do %>
+        <div class="grow overflow-y-auto py-4 space-y-4">
+          <% if header? %>
+            <%= header %>
+          <% end %>
+
+          <% if body? %>
+            <div class="px-4">
+              <%= body %>
+
+              <% if sections.any? %>
+                <div class="space-y-4">
+                  <% sections.each do |section| %>
+                    <%= section %>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <%# Optional, for customizing dialogs %>
+          <%= content %>
+        </div>
+
+        <% if actions? %>
+          <div class="flex items-center gap-2 justify-end p-4">
+            <% actions.each do |action| %>
+              <%= action %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</turbo-frame>
diff --git a/app/components/dialog_component.rb b/app/components/dialog_component.rb
new file mode 100644
index 00000000..16f04bdc
--- /dev/null
+++ b/app/components/dialog_component.rb
@@ -0,0 +1,105 @@
+class DialogComponent < ViewComponent::Base
+  renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
+    content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
+      title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
+        title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
+        close_icon = render ButtonComponent.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "dialog#close" }) unless hide_close_icon
+        safe_join([ title, close_icon ].compact)
+      end
+
+      subtitle = content_tag(:p, subtitle, class: "text-sm text-secondary") if subtitle
+
+      block_content = capture(&block) if block
+
+      safe_join([ title_div, subtitle, block_content ].compact)
+    end
+  end
+
+  renders_one :body
+
+  renders_many :actions, ->(cancel_action: false, **button_opts) do
+    merged_opts = if cancel_action
+      button_opts.merge(type: "button", data: { action: "modal#close" })
+    else
+      button_opts
+    end
+
+    render ButtonComponent.new(**merged_opts)
+  end
+
+  renders_many :sections, ->(title:, **disclosure_opts, &block) do
+    render DisclosureComponent.new(title: title, align: :right, **disclosure_opts) do
+      block.call
+    end
+  end
+
+  attr_reader :variant, :auto_open, :reload_on_close, :frame, :width, :opts
+
+  VARIANTS = %w[modal drawer].freeze
+  WIDTHS = {
+    sm: "lg:max-w-[300px]",
+    md: "lg:max-w-[550px]",
+    lg: "lg:max-w-[700px]",
+    full: "lg:max-w-full"
+  }.freeze
+
+  def initialize(variant: "modal", auto_open: true, reload_on_close: false, frame: nil, width: "md", **opts)
+    @variant = variant.to_sym
+    @auto_open = auto_open
+    @reload_on_close = reload_on_close
+    @frame = frame
+    @width = width.to_sym
+    @opts = opts
+  end
+
+  def frame
+    @frame || variant
+  end
+
+  def dialog_outer_classes
+    variant_classes = if drawer?
+      "items-end justify-end"
+    else
+      "items-center justify-center"
+    end
+
+    class_names(
+      "flex h-full w-full",
+      variant_classes
+    )
+  end
+
+  def dialog_inner_classes
+    variant_classes = if drawer?
+      "lg:w-[550px] h-full"
+    else
+      class_names(
+        "max-h-full",
+        WIDTHS[width]
+      )
+    end
+
+    class_names(
+      "flex flex-col bg-container lg:rounded-xl lg:shadow-border-xs w-full overflow-hidden",
+      variant_classes
+    )
+  end
+
+  def merged_opts
+    merged_opts = opts.dup
+    data = merged_opts.delete(:data) || {}
+
+    data[:controller] = [ "dialog", "hotkey", data[:controller] ].compact.join(" ")
+    data[:dialog_auto_open_value] = auto_open
+    data[:dialog_reload_on_close_value] = reload_on_close
+    data[:action] = [ "mousedown->dialog#clickOutside", data[:action] ].compact.join(" ")
+    data[:hotkey] = "esc:dialog#close"
+    merged_opts[:data] = data
+
+    merged_opts
+  end
+
+  def drawer?
+    variant == :drawer
+  end
+end
diff --git a/app/javascript/controllers/modal_controller.js b/app/components/dialog_controller.js
similarity index 55%
rename from app/javascript/controllers/modal_controller.js
rename to app/components/dialog_controller.js
index 242c0247..8d746ad9 100644
--- a/app/javascript/controllers/modal_controller.js
+++ b/app/components/dialog_controller.js
@@ -1,19 +1,24 @@
 import { Controller } from "@hotwired/stimulus";
 
-// Connects to data-controller="modal"
+// Connects to data-controller="dialog"
 export default class extends Controller {
+  static targets = ["content"]
+
   static values = {
+    autoOpen: { type: Boolean, default: false },
     reloadOnClose: { type: Boolean, default: false },
   };
 
   connect() {
     if (this.element.open) return;
-    this.element.showModal();
+    if (this.autoOpenValue) {
+      this.element.showModal();
+    }
   }
-
-  // Hide the dialog when the user clicks outside of it
+  
+  // If the user clicks anywhere outside of the visible content, close the dialog
   clickOutside(e) {
-    if (e.target === this.element) {
+    if (!this.contentTarget.contains(e.target)) {
       this.close();
     }
   }
diff --git a/app/components/disclosure_component.html.erb b/app/components/disclosure_component.html.erb
new file mode 100644
index 00000000..554342d1
--- /dev/null
+++ b/app/components/disclosure_component.html.erb
@@ -0,0 +1,25 @@
+<details class="group" <%= "open" if open %>>
+  <%= tag.summary class: class_names(
+    "px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface"
+  ) do %>
+    <div class="flex items-center gap-3">
+      <% if align == :left %>
+        <%= lucide_icon "chevron-right", class: "fg-gray w-5 h-5 group-open:transform group-open:rotate-90" %>
+      <% end %>
+
+      <%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
+        <%= title %>
+      <% end %>
+    </div>
+
+    <% if align == :right %>
+      <%= lucide_icon "chevron-down", class: "fg-gray w-5 h-5 group-open:transform group-open:rotate-180" %>
+    <% elsif summary_content? %>
+      <%= summary_content %>
+    <% end %>
+  <% end %>
+
+  <div class="mt-2">
+    <%= content %>
+  </div>
+</details>
diff --git a/app/components/disclosure_component.rb b/app/components/disclosure_component.rb
new file mode 100644
index 00000000..013e3e9d
--- /dev/null
+++ b/app/components/disclosure_component.rb
@@ -0,0 +1,12 @@
+class DisclosureComponent < ViewComponent::Base
+  renders_one :summary_content
+
+  attr_reader :title, :align, :open, :opts
+
+  def initialize(title:, align: "right", open: false, **opts)
+    @title = title
+    @align = align.to_sym
+    @open = open
+    @opts = opts
+  end
+end
diff --git a/app/components/filled_icon_component.html.erb b/app/components/filled_icon_component.html.erb
new file mode 100644
index 00000000..49adba9e
--- /dev/null
+++ b/app/components/filled_icon_component.html.erb
@@ -0,0 +1,8 @@
+<%= tag.div style: transparent? ? container_styles : nil,
+            class: container_classes do %>
+  <% if icon %>
+    <%= helpers.icon(icon, size: icon_size, color: "current") %>
+  <% elsif text %>
+    <%= tag.span text.first, class: text_classes %>
+  <% end %>
+<% end %>
diff --git a/app/components/filled_icon_component.rb b/app/components/filled_icon_component.rb
new file mode 100644
index 00000000..e9c3ce68
--- /dev/null
+++ b/app/components/filled_icon_component.rb
@@ -0,0 +1,97 @@
+class FilledIconComponent < ViewComponent::Base
+  attr_reader :icon, :text, :hex_color, :size, :rounded, :variant
+
+  VARIANTS = %i[default text surface container].freeze
+
+  SIZES = {
+    sm: {
+      container_size: "w-6 h-6",
+      container_radius: "rounded-md",
+      icon_size: "sm",
+      text_size: "text-xs"
+    },
+    md: {
+      container_size: "w-8 h-8",
+      container_radius: "rounded-lg",
+      icon_size: "md",
+      text_size: "text-xs"
+    },
+    lg: {
+      container_size: "w-9 h-9",
+      container_radius: "rounded-xl",
+      icon_size: "lg",
+      text_size: "text-sm"
+    }
+  }.freeze
+
+  def initialize(variant: :default, icon: nil, text: nil, hex_color: nil, size: "md", rounded: false)
+    @variant = variant.to_sym
+    @icon = icon
+    @text = text
+    @hex_color = hex_color
+    @size = size.to_sym
+    @rounded = rounded
+  end
+
+  def container_classes
+    class_names(
+      "flex justify-center items-center",
+      size_classes,
+      radius_classes,
+      transparent? ? "border" : solid_bg_class
+    )
+  end
+
+  def icon_size
+    SIZES[size][:icon_size]
+  end
+
+  def text_classes
+    class_names(
+      "text-center font-medium uppercase",
+      SIZES[size][:text_size]
+    )
+  end
+
+  def container_styles
+    <<~STYLE.strip
+      background-color: #{transparent_bg_color};
+      border-color: #{transparent_border_color};
+      color: #{custom_fg_color};
+    STYLE
+  end
+
+  def transparent?
+    variant.in?(%i[default text])
+  end
+
+  private
+    def solid_bg_class
+      case variant
+      when :surface
+        "bg-surface-inset"
+      when :container
+        "bg-container-inset"
+      end
+    end
+
+    def size_classes
+      SIZES[size][:container_size]
+    end
+
+    def radius_classes
+      rounded ? "rounded-full" : SIZES[size][:container_radius]
+    end
+
+    def custom_fg_color
+      hex_color || "var(--color-gray-500)"
+    end
+
+    def transparent_bg_color
+      "color-mix(in oklab, #{custom_fg_color} 10%, transparent)"
+    end
+
+    def transparent_border_color
+      "color-mix(in oklab, #{custom_fg_color} 10%, transparent)"
+    end
+end
diff --git a/app/components/link_component.html.erb b/app/components/link_component.html.erb
new file mode 100644
index 00000000..707c3d9f
--- /dev/null
+++ b/app/components/link_component.html.erb
@@ -0,0 +1,13 @@
+<%= link_to href, **merged_opts do %>
+  <% if icon && (icon_position != "right") %>
+    <%= lucide_icon(icon, class: icon_classes) %>
+  <% end %>
+
+  <% unless icon_only? %>
+    <%= text %>
+  <% end %>
+
+  <% if icon && icon_position == "right" %>
+    <%= lucide_icon(icon, class: icon_classes) %>
+  <% end %>
+<% end %>
diff --git a/app/components/link_component.rb b/app/components/link_component.rb
new file mode 100644
index 00000000..4bbe10e5
--- /dev/null
+++ b/app/components/link_component.rb
@@ -0,0 +1,31 @@
+# An extension to `link_to` helper.  All options are passed through to the `link_to` helper with some additional
+# options available.
+class LinkComponent < ButtonishComponent
+  attr_reader :frame
+
+  VARIANTS = VARIANTS.reverse_merge(
+    default: {
+      container_classes: "",
+      icon_classes: "fg-gray"
+    }
+  ).freeze
+
+  def merged_opts
+    merged_opts = opts.dup || {}
+    data = merged_opts.delete(:data) || {}
+
+    if frame
+      data = data.merge(turbo_frame: frame)
+    end
+
+    merged_opts.merge(
+      class: class_names(container_classes, extra_classes),
+      data: data
+    )
+  end
+
+  private
+    def container_size_classes
+      super unless variant == :default
+    end
+end
diff --git a/app/components/menu_component.html.erb b/app/components/menu_component.html.erb
new file mode 100644
index 00000000..527e5e36
--- /dev/null
+++ b/app/components/menu_component.html.erb
@@ -0,0 +1,27 @@
+<%= tag.div data: { controller: "menu", menu_placement_value: placement, menu_offset_value: offset, testid: testid } do %>
+  <% if variant == :icon %>
+    <%= render ButtonComponent.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { menu_target: "button" }) %>
+  <% elsif variant == :button %>
+    <%= button %>
+  <% elsif variant == :avatar %>
+    <button data-menu-target="button">
+      <div class="w-9 h-9 cursor-pointer">
+        <%= render "settings/user_avatar", avatar_url: avatar_url %>
+      </div>
+    </button>
+  <% end %>
+
+  <div data-menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
+    <div class="mx-auto min-w-[200px] shadow-border-xs bg-container rounded-lg">
+      <%= header %>
+
+      <%= tag.div class: class_names("py-1" => !no_padding) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+
+        <%= custom_content %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/components/menu_component.rb b/app/components/menu_component.rb
new file mode 100644
index 00000000..012b2f62
--- /dev/null
+++ b/app/components/menu_component.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class MenuComponent < ViewComponent::Base
+  attr_reader :variant, :avatar_url, :placement, :offset, :icon_vertical, :no_padding, :testid
+
+  renders_one :button, ->(**button_options, &block) do
+    options_with_target = button_options.merge(data: { menu_target: "button" })
+
+    if block
+      content_tag(:button, **options_with_target, &block)
+    else
+      ButtonComponent.new(**options_with_target)
+    end
+  end
+
+  renders_one :header, ->(&block) do
+    content_tag(:div, class: "border-b border-tertiary", &block)
+  end
+
+  renders_one :custom_content
+
+  renders_many :items, MenuItemComponent
+
+  VARIANTS = %i[icon button avatar].freeze
+
+  def initialize(variant: "icon", avatar_url: nil, placement: "bottom-end", offset: 12, icon_vertical: false, no_padding: false, testid: nil)
+    @variant = variant.to_sym
+    @avatar_url = avatar_url
+    @placement = placement
+    @offset = offset
+    @icon_vertical = icon_vertical
+    @no_padding = no_padding
+    @testid = testid
+
+    raise ArgumentError, "Invalid variant: #{@variant}" unless VARIANTS.include?(@variant)
+  end
+end
diff --git a/app/javascript/controllers/menu_controller.js b/app/components/menu_controller.js
similarity index 100%
rename from app/javascript/controllers/menu_controller.js
rename to app/components/menu_controller.js
diff --git a/app/components/menu_item_component.html.erb b/app/components/menu_item_component.html.erb
new file mode 100644
index 00000000..bd62bad7
--- /dev/null
+++ b/app/components/menu_item_component.html.erb
@@ -0,0 +1,12 @@
+<% if variant == :divider %>
+  <hr class="border-tertiary my-1">
+<% else %>
+  <div class="px-1">
+    <%= wrapper do %>
+      <% if icon %>
+        <%= lucide_icon(icon, class: destructive? ? "text-destructive" : "fg-gray") %>
+      <% end %>
+      <%= tag.span(text, class: text_classes) %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/components/menu_item_component.rb b/app/components/menu_item_component.rb
new file mode 100644
index 00000000..c029afa7
--- /dev/null
+++ b/app/components/menu_item_component.rb
@@ -0,0 +1,57 @@
+class MenuItemComponent < ViewComponent::Base
+  VARIANTS = %i[link button divider].freeze
+
+  attr_reader :variant, :text, :icon, :href, :method, :destructive, :confirm, :opts
+
+  def initialize(variant:, text: nil, icon: nil, href: nil, method: :post, destructive: false, confirm: nil, **opts)
+    @variant = variant.to_sym
+    @text = text
+    @icon = icon
+    @href = href
+    @method = method.to_sym
+    @destructive = destructive
+    @opts = opts
+    @confirm = confirm
+    raise ArgumentError, "Invalid variant: #{@variant}" unless VARIANTS.include?(@variant)
+  end
+
+  def wrapper(&block)
+    if variant == :button
+      button_to href, method: method, class: container_classes, **merged_button_opts, &block
+    elsif variant == :link
+      link_to href, class: container_classes, **opts, &block
+    else
+      nil
+    end
+  end
+
+  def text_classes
+    [
+      "text-sm",
+      destructive? ? "text-destructive" : "text-primary"
+    ].join(" ")
+  end
+
+  def destructive?
+    method == :delete || destructive
+  end
+
+  private
+    def container_classes
+      [
+        "flex items-center gap-2 p-2 rounded-md w-full",
+        destructive? ? "hover:bg-red-tint-5 theme-dark:hover:bg-red-tint-10" : "hover:bg-container-hover"
+      ].join(" ")
+    end
+
+    def merged_button_opts
+      merged_opts = opts.dup || {}
+      data = merged_opts.delete(:data) || {}
+
+      if confirm.present?
+        data = data.merge(turbo_confirm: confirm.to_data_attribute)
+      end
+
+      merged_opts.merge(data: data)
+    end
+end
diff --git a/app/components/tab_component.rb b/app/components/tab_component.rb
new file mode 100644
index 00000000..fc084a1a
--- /dev/null
+++ b/app/components/tab_component.rb
@@ -0,0 +1,12 @@
+class TabComponent < ViewComponent::Base
+  attr_reader :id, :label
+
+  def initialize(id:, label:)
+    @id = id
+    @label = label
+  end
+
+  def call
+    content
+  end
+end
diff --git a/app/components/tabs/nav_component.rb b/app/components/tabs/nav_component.rb
new file mode 100644
index 00000000..2c4e81ca
--- /dev/null
+++ b/app/components/tabs/nav_component.rb
@@ -0,0 +1,29 @@
+class Tabs::NavComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <%= tag.nav class: classes do %>
+      <% btns.each do |btn| %>
+        <%= btn %>
+      <% end %>
+    <% end %>
+  ERB
+
+  renders_many :btns, ->(id:, label:, classes: nil, &block) do
+    content_tag(
+      :button, label, id: id,
+      type: "button",
+      class: class_names(btn_classes, id == active_tab ? active_btn_classes : inactive_btn_classes, classes),
+      data: { id: id, action: "tabs#show", tabs_target: "navBtn" },
+      &block
+    )
+  end
+
+  attr_reader :active_tab, :classes, :active_btn_classes, :inactive_btn_classes, :btn_classes
+
+  def initialize(active_tab:, classes: nil, active_btn_classes: nil, inactive_btn_classes: nil, btn_classes: nil)
+    @active_tab = active_tab
+    @classes = classes
+    @active_btn_classes = active_btn_classes
+    @inactive_btn_classes = inactive_btn_classes
+    @btn_classes = btn_classes
+  end
+end
diff --git a/app/components/tabs/panel_component.rb b/app/components/tabs/panel_component.rb
new file mode 100644
index 00000000..3c34932a
--- /dev/null
+++ b/app/components/tabs/panel_component.rb
@@ -0,0 +1,11 @@
+class Tabs::PanelComponent < ViewComponent::Base
+  attr_reader :tab_id
+
+  def initialize(tab_id:)
+    @tab_id = tab_id
+  end
+
+  def call
+    content
+  end
+end
diff --git a/app/components/tabs_component.html.erb b/app/components/tabs_component.html.erb
new file mode 100644
index 00000000..4ec901fa
--- /dev/null
+++ b/app/components/tabs_component.html.erb
@@ -0,0 +1,17 @@
+<%= tag.div data: {
+  controller: "tabs",
+  testid: testid,
+  tabs_url_param_key_value: url_param_key,
+  tabs_nav_btn_active_class: active_btn_classes,
+  tabs_nav_btn_inactive_class: inactive_btn_classes
+} do %>
+  <% if unstyled? %>
+    <%= content %>
+  <% else %>
+    <%= nav %>
+
+    <% panels.each do |panel| %>
+      <%= panel %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/components/tabs_component.rb b/app/components/tabs_component.rb
new file mode 100644
index 00000000..4017b308
--- /dev/null
+++ b/app/components/tabs_component.rb
@@ -0,0 +1,65 @@
+class TabsComponent < ViewComponent::Base
+  renders_one :nav, ->(classes: nil) do
+    Tabs::NavComponent.new(
+      active_tab: active_tab,
+      active_btn_classes: active_btn_classes,
+      inactive_btn_classes: inactive_btn_classes,
+      btn_classes: base_btn_classes,
+      classes: unstyled? ? classes : class_names(nav_container_classes, classes)
+    )
+  end
+
+  renders_many :panels, ->(tab_id:, &block) do
+    content_tag(
+      :div,
+      class: ("hidden" unless tab_id == active_tab),
+      data: { id: tab_id, tabs_target: "panel" },
+      &block
+    )
+  end
+
+  VARIANTS = {
+    default: {
+      active_btn_classes: "bg-white theme-dark:bg-gray-700 text-primary shadow-sm",
+      inactive_btn_classes: "text-secondary hover:bg-surface-inset-hover",
+      base_btn_classes: "w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200",
+      nav_container_classes: "flex bg-surface-inset p-1 rounded-lg mb-4"
+    }
+  }
+
+  attr_reader :active_tab, :url_param_key, :variant, :testid
+
+  def initialize(active_tab:, url_param_key: nil, variant: :default, active_btn_classes: "", inactive_btn_classes: "", testid: nil)
+    @active_tab = active_tab
+    @url_param_key = url_param_key
+    @variant = variant.to_sym
+    @active_btn_classes = active_btn_classes
+    @inactive_btn_classes = inactive_btn_classes
+    @testid = testid
+  end
+
+  def active_btn_classes
+    unstyled? ? @active_btn_classes : VARIANTS.dig(variant, :active_btn_classes)
+  end
+
+  def inactive_btn_classes
+    unstyled? ? @inactive_btn_classes : VARIANTS.dig(variant, :inactive_btn_classes)
+  end
+
+  private
+    def unstyled?
+      variant == :unstyled
+    end
+
+    def base_btn_classes
+      unless unstyled?
+        VARIANTS.dig(variant, :base_btn_classes)
+      end
+    end
+
+    def nav_container_classes
+      unless unstyled?
+        VARIANTS.dig(variant, :nav_container_classes)
+      end
+    end
+end
diff --git a/app/components/tabs_controller.js b/app/components/tabs_controller.js
new file mode 100644
index 00000000..32f18d08
--- /dev/null
+++ b/app/components/tabs_controller.js
@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="tabs--components"
+export default class extends Controller {
+  static classes = ["navBtnActive", "navBtnInactive"];
+  static targets = ["panel", "navBtn"];
+  static values = { urlParamKey: String };
+
+  connect() {
+    console.log("tabs controller connected");
+  } 
+
+  show(e) {
+    const btn = e.target.closest("button");
+    const selectedTabId = btn.dataset.id;
+
+    this.navBtnTargets.forEach((navBtn) => {
+      if (navBtn.dataset.id === selectedTabId) {
+        navBtn.classList.add(...this.navBtnActiveClasses);
+        navBtn.classList.remove(...this.navBtnInactiveClasses);
+      } else {
+        navBtn.classList.add(...this.navBtnInactiveClasses);
+        navBtn.classList.remove(...this.navBtnActiveClasses);
+      }
+    });
+
+    this.panelTargets.forEach((panel) => {
+      if (panel.dataset.id === selectedTabId) {
+        panel.classList.remove("hidden");
+      } else {
+        panel.classList.add("hidden");
+      }
+    });
+
+    // Update URL with the selected tab
+    if (this.urlParamKeyValue) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.urlParamKeyValue, selectedTabId);
+      window.history.replaceState({}, "", url);
+    }
+  } 
+}
diff --git a/app/components/toggle_component.html.erb b/app/components/toggle_component.html.erb
new file mode 100644
index 00000000..6845686c
--- /dev/null
+++ b/app/components/toggle_component.html.erb
@@ -0,0 +1,5 @@
+<div class="relative inline-block select-none">
+  <%= hidden_field_tag name, unchecked_value, id: nil %>
+  <%= check_box_tag name, checked_value, checked, class: "sr-only peer", disabled: disabled, id: id, **opts %>
+  <%= label_tag name, "&nbsp;".html_safe, class: label_classes, for: id %>
+</div>
diff --git a/app/components/toggle_component.rb b/app/components/toggle_component.rb
new file mode 100644
index 00000000..e3af85a8
--- /dev/null
+++ b/app/components/toggle_component.rb
@@ -0,0 +1,26 @@
+class ToggleComponent < ViewComponent::Base
+  attr_reader :id, :name, :checked, :disabled, :checked_value, :unchecked_value, :opts
+
+  def initialize(id:, name: nil, checked: false, disabled: false, checked_value: "1", unchecked_value: "0", **opts)
+    @id = id
+    @name = name
+    @checked = checked
+    @disabled = disabled
+    @checked_value = checked_value
+    @unchecked_value = unchecked_value
+    @opts = opts
+  end
+
+  def label_classes
+    class_names(
+       "block w-9 h-5 cursor-pointer",
+       "rounded-full bg-gray-100 theme-dark:bg-gray-700",
+       "transition-colors duration-300",
+       "after:content-[''] after:block after:bg-white after:absolute after:rounded-full",
+       "after:top-0.5 after:left-0.5 after:w-4 after:h-4",
+       "after:transition-transform after:duration-300 after:ease-in-out",
+       "peer-checked:bg-green-600 peer-checked:after:translate-x-4",
+       "peer-disabled:opacity-70 peer-disabled:cursor-not-allowed"
+    )
+  end
+end
diff --git a/app/controllers/chats_controller.rb b/app/controllers/chats_controller.rb
index 61909200..6b8b494a 100644
--- a/app/controllers/chats_controller.rb
+++ b/app/controllers/chats_controller.rb
@@ -1,8 +1,6 @@
 class ChatsController < ApplicationController
   include ActionView::RecordIdentifier
 
-  guard_feature unless: -> { Current.user.ai_enabled? }
-
   before_action :set_chat, only: [ :show, :edit, :update, :destroy ]
 
   def index
diff --git a/app/controllers/lookbooks_controller.rb b/app/controllers/lookbooks_controller.rb
new file mode 100644
index 00000000..6dc06d7e
--- /dev/null
+++ b/app/controllers/lookbooks_controller.rb
@@ -0,0 +1,3 @@
+class LookbooksController < Lookbook::PreviewController
+  layout "lookbooks"
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 316e7900..0db4c9e5 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,12 +1,30 @@
 module ApplicationHelper
   include Pagy::Frontend
 
-  def icon(key, size: "md", color: "current")
-    render partial: "shared/icon", locals: { key:, size:, color: }
+  def styled_form_with(**options, &block)
+    options[:builder] = StyledFormBuilder
+    form_with(**options, &block)
   end
 
-  def icon_custom(key, size: "md", color: "current")
-    render partial: "shared/icon_custom", locals: { key:, size:, color: }
+  def icon(key, size: "md", color: "default", custom: false, as_button: false, **opts)
+    extra_classes = opts.delete(:class)
+    sizes = { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6", xl: "w-7 h-7", "2xl": "w-8 h-8" }
+    colors = { default: "fg-gray", success: "text-success", warning: "text-warning", destructive: "text-destructive", current: "text-current" }
+
+    icon_classes = class_names(
+      "shrink-0",
+      sizes[size.to_sym],
+      colors[color.to_sym],
+      extra_classes
+    )
+
+    if custom
+      inline_svg_tag("#{key}.svg", class: icon_classes, **opts)
+    elsif as_button
+      render ButtonComponent.new(variant: "icon", class: extra_classes, icon: key, size: size, type: "button", **opts)
+    else
+      lucide_icon(key, class: icon_classes, **opts)
+    end
   end
 
   # Convert alpha (0-1) to 8-digit hex (00-FF)
@@ -31,60 +49,10 @@ module ApplicationHelper
     turbo_stream_from Current.family if Current.family
   end
 
-  ##
-  # Helper to open a centered and overlayed modal with custom contents
-  #
-  # @example Basic usage
-  #   <%= modal classes: "custom-class" do %>
-  #     <div>Content here</div>
-  #   <% end %>
-  #
-  def modal(reload_on_close: false, overflow_visible: false, &block)
-    content = capture &block
-    render partial: "shared/modal", locals: { content:, reload_on_close:, overflow_visible: }
-  end
-
-  ##
-  # Helper to open a drawer on the right side of the screen with custom contents
-  #
-  # @example Basic usage
-  #   <%= drawer do %>
-  #     <div>Content here</div>
-  #   <% end %>
-  #
-  def drawer(reload_on_close: false, &block)
-    content = capture &block
-    render partial: "shared/drawer", locals: { content:, reload_on_close: }
-  end
-
-  def disclosure(title, default_open: true, &block)
-    content = capture &block
-    render partial: "shared/disclosure", locals: { title: title, content: content, open: default_open }
-  end
-
   def page_active?(path)
     current_page?(path) || (request.path.start_with?(path) && path != "/")
   end
 
-  def mixed_hex_styles(hex)
-    color = hex || "#1570EF" # blue-600
-
-    <<-STYLE.strip
-      background-color: color-mix(in srgb, #{color} 10%, white);
-      border-color: color-mix(in srgb, #{color} 30%, white);
-      color: #{color};
-    STYLE
-  end
-
-  def circle_logo(name, hex: nil, size: "md")
-    render partial: "shared/circle_logo", locals: { name: name, hex: hex, size: size }
-  end
-
-  def return_to_path(params, fallback = root_path)
-    uri = URI.parse(params[:return_to] || fallback)
-    uri.relative? ? uri.path : root_path
-  end
-
   # Wrapper around I18n.l to support custom date formats
   def format_date(object, format = :default, options = {})
     date = object.to_date
@@ -144,49 +112,6 @@ module ApplicationHelper
     markdown.render(text).html_safe
   end
 
-  # Determines the starting widths of each panel depending on the user's sidebar preferences
-  def app_sidebar_config(user)
-    left_sidebar_showing = user.show_sidebar?
-    right_sidebar_showing = user.show_ai_sidebar?
-
-    content_max_width = if !left_sidebar_showing && !right_sidebar_showing
-      1024 # 5xl
-    elsif left_sidebar_showing && !right_sidebar_showing
-      896 # 4xl
-    else
-      768 # 3xl
-    end
-
-    left_panel_min_width = 320
-    left_panel_max_width = 320
-    right_panel_min_width = 400
-    right_panel_max_width = 550
-
-    left_panel_width = left_sidebar_showing ? left_panel_min_width : 0
-    right_panel_width = if right_sidebar_showing
-      left_sidebar_showing ? right_panel_min_width : right_panel_max_width
-    else
-      0
-    end
-
-    {
-      left_panel: {
-        is_open: left_sidebar_showing,
-        initial_width: left_panel_width,
-        min_width: left_panel_min_width,
-        max_width: left_panel_max_width
-      },
-      right_panel: {
-        is_open: right_sidebar_showing,
-        initial_width: right_panel_width,
-        min_width: right_panel_min_width,
-        max_width: right_panel_max_width,
-        overflow: right_sidebar_showing ? "auto" : "hidden"
-      },
-      content_max_width: content_max_width
-    }
-  end
-
   private
     def calculate_total(item, money_method, negate)
       items = item.reject { |i| i.respond_to?(:entryable) && i.entryable.transfer? }
diff --git a/app/helpers/custom_confirm.rb b/app/helpers/custom_confirm.rb
new file mode 100644
index 00000000..bf40f449
--- /dev/null
+++ b/app/helpers/custom_confirm.rb
@@ -0,0 +1,51 @@
+# The shape of data expected by `confirm_dialog_controller.js` to override the
+# default browser confirm API via Turbo.
+class CustomConfirm
+  class << self
+    def for_resource_deletion(resource_name, high_severity: false)
+      new(
+        destructive: true,
+        high_severity: high_severity,
+        title: "Delete #{resource_name}?",
+        body: "Are you sure you want to delete #{resource_name}? This is not reversible.",
+        btn_text: "Delete #{resource_name}"
+      )
+    end
+  end
+
+  def initialize(title: default_title, body: default_body, btn_text: default_btn_text, destructive: false, high_severity: false)
+    @title = title
+    @body = body
+    @btn_text = btn_text
+    @btn_variant = derive_btn_variant(destructive, high_severity)
+  end
+
+  def to_data_attribute
+    {
+      title: title,
+      body: body,
+      confirmText: btn_text,
+      variant: btn_variant
+    }
+  end
+
+  private
+    attr_reader :title, :body, :btn_text, :btn_variant
+
+    def derive_btn_variant(destructive, high_severity)
+      return "primary" unless destructive
+      high_severity ? "destructive" : "outline-destructive"
+    end
+
+    def default_title
+      "Are you sure?"
+    end
+
+    def default_body
+      "This is not reversible."
+    end
+
+    def default_btn_text
+      "Confirm"
+    end
+end
diff --git a/app/helpers/forms_helper.rb b/app/helpers/forms_helper.rb
deleted file mode 100644
index dfa5c3b5..00000000
--- a/app/helpers/forms_helper.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-module FormsHelper
-  def styled_form_with(**options, &block)
-    options[:builder] = StyledFormBuilder
-    form_with(**options, &block)
-  end
-
-  def modal_form_wrapper(title:, subtitle: nil, overflow_visible: false, &block)
-    content = capture &block
-
-    render partial: "shared/modal_form", locals: { title:, subtitle:, content:, overflow_visible: }
-  end
-
-  def period_select(form:, selected:, classes: "border border-secondary bg-container-inset rounded-lg text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0")
-    periods_for_select = Period.all.map { |period| [ period.label_short, period.key ] }
-
-    form.select(:period, periods_for_select, { selected: selected.key }, class: classes, data: { "auto-submit-form-target": "auto" })
-  end
-
-  def currencies_for_select
-    Money::Currency.all_instances.sort_by { |currency| [ currency.priority, currency.name ] }
-  end
-end
diff --git a/app/helpers/menus_helper.rb b/app/helpers/menus_helper.rb
deleted file mode 100644
index 0ddc9e5f..00000000
--- a/app/helpers/menus_helper.rb
+++ /dev/null
@@ -1,47 +0,0 @@
-module MenusHelper
-  def contextual_menu(icon: "more-horizontal", id: nil, &block)
-    tag.div id: id, data: { controller: "menu" } do
-      concat contextual_menu_icon(icon)
-      concat contextual_menu_content(&block)
-    end
-  end
-
-  def contextual_menu_modal_action_item(label, url, icon: "pencil-line", turbo_frame: :modal, class_name: nil)
-    link_to url, class: "flex items-center rounded-md text-primary hover:bg-container-hover p-2 gap-2 #{class_name}", data: { action: "click->menu#close", turbo_frame: turbo_frame } do
-      concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-secondary"))
-      concat(tag.span(label, class: "text-sm"))
-    end
-  end
-
-  def contextual_menu_item(label, url:, icon:, turbo_frame: nil)
-    link_to url, class: "flex items-center rounded-md text-primary hover:bg-container-hover p-2 gap-2", data: { action: "click->menu#close", turbo_frame: turbo_frame } do
-      concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-secondary"))
-      concat(tag.span(label, class: "text-sm"))
-    end
-  end
-
-  def contextual_menu_destructive_item(label, url, turbo_confirm: true, turbo_frame: nil)
-    button_to url,
-              method: :delete,
-              class: "flex items-center w-full rounded-md text-red-500 hover:bg-red-500/5 p-2 gap-2",
-              data: { turbo_confirm: turbo_confirm, turbo_frame: } do
-      concat(lucide_icon("trash-2", class: "shrink-0 w-5 h-5"))
-      concat(tag.span(label, class: "text-sm"))
-    end
-  end
-
-  private
-    def contextual_menu_icon(icon)
-      tag.button class: "w-9 h-9 flex justify-center items-center hover:bg-surface-hover rounded-lg cursor-pointer focus:outline-none focus-visible:outline-none", data: { menu_target: "button" } do
-        concat lucide_icon("more-vertical", class: "w-5 h-5 text-secondary md:hidden")
-        concat lucide_icon(icon, class: "w-5 h-5 text-secondary hidden md:block")
-      end
-    end
-
-    def contextual_menu_content(&block)
-      tag.div class: "min-w-[200px] p-1 z-50 shadow-border-xs bg-container rounded-lg hidden",
-               data: { menu_target: "content" } do
-        capture(&block)
-      end
-    end
-end
diff --git a/app/helpers/styled_form_builder.rb b/app/helpers/styled_form_builder.rb
index 7a817578..1ddd445a 100644
--- a/app/helpers/styled_form_builder.rb
+++ b/app/helpers/styled_form_builder.rb
@@ -48,19 +48,46 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
     }
   end
 
-  def submit(value = nil, options = {})
-    default_options = {
-      data: { turbo_submits_with: "Submitting..." },
-      class: "btn btn--primary w-full justify-center"
-    }
+  # A custom styled "toggle" switch input.  Underlying input is a `check_box` (uses same API)
+  def toggle(method, options = {}, checked_value = "1", unchecked_value = "0")
+    if object
+      id = "#{object.id}_#{object_name}_#{method}"
+      name = "#{object_name}[#{method}]"
+      checked = object.send(method)
+    else
+      id = "#{method}_toggle_id"
+      name = method
+      checked = options[:checked]
+    end
 
-    merged_options = default_options.merge(options)
+    @template.render(
+      ToggleComponent.new(
+        id: id,
+        name: name,
+        checked: checked,
+        disabled: options[:disabled],
+        checked_value: checked_value,
+        unchecked_value: unchecked_value,
+        **options
+      )
+    )
+  end
+
+  def submit(value = nil, options = {})
+    # Rails superclass logic to extract the submit text
     value, options = nil, value if value.is_a?(Hash)
-    super(value, merged_options)
+    value ||= submit_default_value
+
+    @template.render(
+      ButtonComponent.new(
+        text: value,
+        data: (options[:data] || {}).merge({ turbo_submits_with: "Submitting..." }),
+        full_width: true
+      )
+    )
   end
 
   private
-
     def build_styled_field(label, field, options, remove_padding_right: false)
       if options[:inline]
         label + field
diff --git a/app/helpers/transactions_helper.rb b/app/helpers/transactions_helper.rb
index dd729c47..173306b9 100644
--- a/app/helpers/transactions_helper.rb
+++ b/app/helpers/transactions_helper.rb
@@ -1,13 +1,13 @@
 module TransactionsHelper
   def transaction_search_filters
     [
-      { key: "account_filter", icon: "layers" },
-      { key: "date_filter", icon: "calendar" },
-      { key: "type_filter", icon: "tag" },
-      { key: "amount_filter", icon: "hash" },
-      { key: "category_filter", icon: "shapes" },
-      { key: "tag_filter", icon: "tags" },
-      { key: "merchant_filter", icon: "store" }
+      { key: "account_filter", label: "Account", icon: "layers" },
+      { key: "date_filter", label: "Date", icon: "calendar" },
+      { key: "type_filter", label: "Type", icon: "tag" },
+      { key: "amount_filter", label: "Amount", icon: "hash" },
+      { key: "category_filter", label: "Category", icon: "shapes" },
+      { key: "tag_filter", label: "Tag", icon: "tags" },
+      { key: "merchant_filter", label: "Merchant", icon: "store" }
     ]
   end
 
diff --git a/app/javascript/controllers/account_collapse_controller.js b/app/javascript/controllers/account_collapse_controller.js
deleted file mode 100644
index 11c51cde..00000000
--- a/app/javascript/controllers/account_collapse_controller.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Connects to data-controller="account-collapse"
-export default class extends Controller {
-  static values = { type: String };
-  initialToggle = false;
-  STORAGE_NAME = "accountCollapseStates";
-
-  connect() {
-    this.element.addEventListener("toggle", this.onToggle);
-    this.updateFromLocalStorage();
-  }
-
-  disconnect() {
-    this.element.removeEventListener("toggle", this.onToggle);
-  }
-
-  onToggle = () => {
-    if (this.initialToggle) {
-      this.initialToggle = false;
-      return;
-    }
-
-    const items = this.getItemsFromLocalStorage();
-    if (items.has(this.typeValue)) {
-      items.delete(this.typeValue);
-    } else {
-      items.add(this.typeValue);
-    }
-    localStorage.setItem(this.STORAGE_NAME, JSON.stringify([...items]));
-  };
-
-  updateFromLocalStorage() {
-    const items = this.getItemsFromLocalStorage();
-
-    if (items.has(this.typeValue)) {
-      this.initialToggle = true;
-      this.element.setAttribute("open", "");
-    }
-  }
-
-  getItemsFromLocalStorage() {
-    try {
-      const items = localStorage.getItem(this.STORAGE_NAME);
-      return new Set(items ? JSON.parse(items) : []);
-    } catch (error) {
-      console.error("Error parsing items from localStorage:", error);
-      return new Set();
-    }
-  }
-}
diff --git a/app/javascript/controllers/app_layout_controller.js b/app/javascript/controllers/app_layout_controller.js
new file mode 100644
index 00000000..cc15c78c
--- /dev/null
+++ b/app/javascript/controllers/app_layout_controller.js
@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["leftSidebar", "rightSidebar", "mobileSidebar"];
+  static classes = [
+    "expandedSidebar",
+    "collapsedSidebar",
+    "expandedTransition",
+    "collapsedTransition",
+  ];
+
+  openMobileSidebar() {
+    this.mobileSidebarTarget.classList.remove("hidden");
+  }
+
+  closeMobileSidebar() {
+    this.mobileSidebarTarget.classList.add("hidden");
+  }
+
+  toggleLeftSidebar() {
+    const isOpen = this.leftSidebarTarget.classList.contains("w-full");
+    this.#updateUserPreference("show_sidebar", !isOpen);
+    this.#toggleSidebarWidth(this.leftSidebarTarget, isOpen);
+  }
+
+  toggleRightSidebar() {
+    const isOpen = this.rightSidebarTarget.classList.contains("w-full");
+    this.#updateUserPreference("show_ai_sidebar", !isOpen);
+    this.#toggleSidebarWidth(this.rightSidebarTarget, isOpen);
+  }
+
+  #toggleSidebarWidth(el, isCurrentlyOpen) {
+    if (isCurrentlyOpen) {
+      el.classList.remove(...this.expandedSidebarClasses);
+      el.classList.add(...this.collapsedSidebarClasses);
+    } else {
+      el.classList.add(...this.expandedSidebarClasses);
+      el.classList.remove(...this.collapsedSidebarClasses);
+    }
+  }
+
+  #updateUserPreference(field, value) {
+    fetch(`/users/${this.userIdValue}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        "X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
+        Accept: "application/json",
+      },
+      body: new URLSearchParams({
+        [`user[${field}]`]: value,
+      }).toString(),
+    });
+  }
+}
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
index f898dcad..ae24872d 100644
--- a/app/javascript/controllers/application.js
+++ b/app/javascript/controllers/application.js
@@ -6,52 +6,14 @@ const application = Application.start();
 application.debug = false;
 window.Stimulus = application;
 
-Turbo.config.forms.confirm = (message) => {
-  const dialog = document.getElementById("turbo-confirm");
-
-  try {
-    const { title, body, accept, acceptClass } = JSON.parse(message);
-
-    if (title) {
-      document.getElementById("turbo-confirm-title").innerHTML = title;
-    }
-
-    if (body) {
-      document.getElementById("turbo-confirm-body").innerHTML = body;
-    }
-
-    if (accept) {
-      document.getElementById("turbo-confirm-accept").innerHTML = accept;
-    }
-
-    if (acceptClass) {
-      document.getElementById("turbo-confirm-accept").className = acceptClass;
-    }
-  } catch (e) {
-    document.getElementById("turbo-confirm-title").innerText = message;
-  }
-
-  dialog.showModal();
-
-  return new Promise((resolve) => {
-    dialog.addEventListener(
-      "close",
-      () => {
-        const confirmed = dialog.returnValue === "confirm";
-
-        if (!confirmed) {
-          document.getElementById("turbo-confirm-title").innerHTML =
-            "Are you sure?";
-          document.getElementById("turbo-confirm-body").innerHTML =
-            "You will not be able to undo this decision";
-          document.getElementById("turbo-confirm-accept").innerHTML = "Confirm";
-        }
-
-        resolve(confirmed);
-      },
-      { once: true },
+Turbo.config.forms.confirm = (data) => {
+  const confirmDialogController =
+    application.getControllerForElementAndIdentifier(
+      document.getElementById("confirm-dialog"),
+      "confirm-dialog",
     );
-  });
+
+  return confirmDialogController.handleConfirm(data);
 };
 
 export { application };
diff --git a/app/javascript/controllers/bulk_select_controller.js b/app/javascript/controllers/bulk_select_controller.js
index a1e40157..0851da7a 100644
--- a/app/javascript/controllers/bulk_select_controller.js
+++ b/app/javascript/controllers/bulk_select_controller.js
@@ -7,7 +7,7 @@ export default class extends Controller {
     "group",
     "selectionBar",
     "selectionBarText",
-    "bulkEditDrawerTitle",
+    "bulkEditDrawerHeader",
   ];
   static values = {
     singularLabel: String,
@@ -25,8 +25,9 @@ export default class extends Controller {
     document.removeEventListener("turbo:load", this._updateView);
   }
 
-  bulkEditDrawerTitleTargetConnected(element) {
-    element.innerText = `Edit ${
+  bulkEditDrawerHeaderTargetConnected(element) {
+    const headingTextEl = element.querySelector("h2");
+    headingTextEl.innerText = `Edit ${
       this.selectedIdsValue.length
     } ${this._pluralizedResourceName()}`;
   }
diff --git a/app/javascript/controllers/color_avatar_controller.js b/app/javascript/controllers/color_avatar_controller.js
index 49d9caeb..351bc437 100644
--- a/app/javascript/controllers/color_avatar_controller.js
+++ b/app/javascript/controllers/color_avatar_controller.js
@@ -21,8 +21,8 @@ export default class extends Controller {
 
   handleColorChange(e) {
     const color = e.currentTarget.value;
-    this.avatarTarget.style.backgroundColor = `color-mix(in srgb, ${color} 10%, white)`;
-    this.avatarTarget.style.borderColor = `color-mix(in srgb, ${color} 10%, white)`;
+    this.avatarTarget.style.backgroundColor = `color-mix(in srgb, ${color} 10%, transparent)`;
+    this.avatarTarget.style.borderColor = `color-mix(in srgb, ${color} 10%, transparent)`;
     this.avatarTarget.style.color = color;
   }
 }
diff --git a/app/javascript/controllers/confirm_dialog_controller.js b/app/javascript/controllers/confirm_dialog_controller.js
new file mode 100644
index 00000000..e66269a6
--- /dev/null
+++ b/app/javascript/controllers/confirm_dialog_controller.js
@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="confirm-dialog"
+// See javascript/controllers/application.js for how this is wired up
+export default class extends Controller {
+  static targets = ["title", "subtitle", "confirmButton"];
+
+  handleConfirm(rawData) {
+    const data = this.#normalizeRawData(rawData);
+
+    this.#prepareDialog(data);
+
+    this.element.showModal();
+
+    return new Promise((resolve) => {
+      this.element.addEventListener(
+        "close",
+        () => {
+          const isConfirmed = this.element.returnValue === "confirm";
+          resolve(isConfirmed);
+        },
+        { once: true },
+      );
+    });
+  }
+
+  #prepareDialog(data) {
+    const variant = data.variant || "primary";
+
+    this.confirmButtonTargets.forEach((button) => {
+      if (button.dataset.variant === variant) {
+        button.removeAttribute("hidden");
+      } else {
+        button.setAttribute("hidden", true);
+      }
+
+      button.textContent = data.confirmText || "Confirm";
+    });
+
+    this.titleTarget.textContent = data.title || "Are you sure?";
+    this.subtitleTarget.innerHTML =
+      data.body || "This action cannot be undone.";
+  }
+
+  // If data is a string, it's the title.  Otherwise, return the parsed object.
+  #normalizeRawData(rawData) {
+    try {
+      const parsed = JSON.parse(rawData);
+
+      if (typeof parsed === "boolean") {
+        return { title: "Are you sure?" };
+      }
+
+      return parsed;
+    } catch (e) {
+      return { title: rawData };
+    }
+  }
+}
diff --git a/app/javascript/controllers/deletion_controller.js b/app/javascript/controllers/deletion_controller.js
index cd49065d..ec4bc9f2 100644
--- a/app/javascript/controllers/deletion_controller.js
+++ b/app/javascript/controllers/deletion_controller.js
@@ -1,30 +1,28 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["replacementField", "submitButton"];
-  static classes = ["dangerousAction", "safeAction"];
+  static targets = [
+    "replacementField",
+    "destructiveSubmitButton",
+    "safeSubmitButton",
+  ];
+
   static values = {
     submitTextWhenReplacing: String,
     submitTextWhenNotReplacing: String,
   };
 
-  updateSubmitButton() {
+  chooseSubmitButton() {
     if (this.replacementFieldTarget.value) {
-      this.submitButtonTarget.value = this.submitTextWhenReplacingValue;
-      this.#markSafe();
+      this.destructiveSubmitButtonTarget.hidden = true;
+      this.safeSubmitButtonTarget.textContent =
+        this.submitTextWhenReplacingValue;
+      this.safeSubmitButtonTarget.hidden = false;
     } else {
-      this.submitButtonTarget.value = this.submitTextWhenNotReplacingValue;
-      this.#markDangerous();
+      this.destructiveSubmitButtonTarget.textContent =
+        this.submitTextWhenNotReplacingValue;
+      this.destructiveSubmitButtonTarget.hidden = false;
+      this.safeSubmitButtonTarget.hidden = true;
     }
   }
-
-  #markSafe() {
-    this.submitButtonTarget.classList.remove(...this.dangerousActionClasses);
-    this.submitButtonTarget.classList.add(...this.safeActionClasses);
-  }
-
-  #markDangerous() {
-    this.submitButtonTarget.classList.remove(...this.safeActionClasses);
-    this.submitButtonTarget.classList.add(...this.dangerousActionClasses);
-  }
 }
diff --git a/app/javascript/controllers/intercom_controller.js b/app/javascript/controllers/intercom_controller.js
new file mode 100644
index 00000000..f22d1db8
--- /dev/null
+++ b/app/javascript/controllers/intercom_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="intercom"
+export default class extends Controller {
+  show() {
+    Intercom("show");
+  }
+}
diff --git a/app/javascript/controllers/preserve_scroll_controller.js b/app/javascript/controllers/preserve_scroll_controller.js
deleted file mode 100644
index c2110fd1..00000000
--- a/app/javascript/controllers/preserve_scroll_controller.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* 
-  https://dev.to/konnorrogers/maintain-scroll-position-in-turbo-without-data-turbo-permanent-2b1i
-  modified to add support for horizontal scrolling
- */
-if (!window.scrollPositions) {
-  window.scrollPositions = {};
-}
-
-function preserveScroll() {
-  document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
-    scrollPositions[element.id] = {
-      top: element.scrollTop,
-      left: element.scrollLeft
-    };
-  });
-}
-
-function restoreScroll(event) {
-  document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
-    if (scrollPositions[element.id]) {
-      element.scrollTop = scrollPositions[element.id].top;
-      element.scrollLeft = scrollPositions[element.id].left;
-    }
-  });
-
-  if (!event.detail.newBody) return;
-  // event.detail.newBody is the body element to be swapped in.
-  // https://turbo.hotwired.dev/reference/events
-  event.detail.newBody.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
-    if (scrollPositions[element.id]) {
-      element.scrollTop = scrollPositions[element.id].top;
-      element.scrollLeft = scrollPositions[element.id].left;
-    }
-  });
-}
-
-window.addEventListener("turbo:before-cache", preserveScroll);
-window.addEventListener("turbo:before-render", restoreScroll);
-window.addEventListener("turbo:render", restoreScroll);
diff --git a/app/javascript/controllers/rule/actions_controller.js b/app/javascript/controllers/rule/actions_controller.js
index 815e027e..f4de40eb 100644
--- a/app/javascript/controllers/rule/actions_controller.js
+++ b/app/javascript/controllers/rule/actions_controller.js
@@ -8,6 +8,7 @@ export default class extends Controller {
   remove(e) {
     if (e.params.destroy) {
       this.destroyFieldTarget.value = true;
+      this.element.classList.add("hidden");
     } else {
       this.element.remove();
     }
diff --git a/app/javascript/controllers/sidebar_controller.js b/app/javascript/controllers/sidebar_controller.js
deleted file mode 100644
index a46794e3..00000000
--- a/app/javascript/controllers/sidebar_controller.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Connects to data-controller="sidebar"
-export default class extends Controller {
-  static values = {
-    userId: String,
-    config: Object,
-  };
-
-  static targets = ["leftPanel", "leftPanelMobile", "rightPanel", "content"];
-
-  initialize() {
-    this.leftPanelOpen = this.configValue.left_panel.is_open;
-    this.rightPanelOpen = this.configValue.right_panel.is_open;
-  }
-
-  toggleLeftPanel() {
-    this.leftPanelOpen = !this.leftPanelOpen;
-    this.#updatePanelWidths();
-    this.#persistPreference("show_sidebar", this.leftPanelOpen);
-  }
-
-  toggleLeftPanelMobile() {
-    if (this.leftPanelOpen) {
-      this.leftPanelMobileTarget.classList.remove("hidden");
-      this.leftPanelOpen = false;
-    } else {
-      this.leftPanelMobileTarget.classList.add("hidden");
-      this.leftPanelOpen = true;
-    }
-  }
-
-  toggleRightPanel() {
-    this.rightPanelOpen = !this.rightPanelOpen;
-    this.#updatePanelWidths();
-    this.#persistPreference("show_ai_sidebar", this.rightPanelOpen);
-  }
-
-  #updatePanelWidths() {
-    this.leftPanelTarget.style.width = `${this.#leftPanelWidth()}px`;
-    this.rightPanelTarget.style.width = `${this.#rightPanelWidth()}px`;
-    this.rightPanelTarget.style.overflow = this.#rightPanelOverflow();
-  }
-
-  #leftPanelWidth() {
-    if (this.leftPanelOpen) {
-      return this.configValue.left_panel.min_width;
-    }
-
-    return 0;
-  }
-
-  #rightPanelWidth() {
-    if (this.rightPanelOpen) {
-      if (this.leftPanelOpen) {
-        return this.configValue.right_panel.min_width;
-      }
-
-      return this.configValue.right_panel.max_width;
-    }
-
-    return 0;
-  }
-
-  #rightPanelOverflow() {
-    if (this.rightPanelOpen) {
-      return "auto";
-    }
-
-    return "hidden";
-  }
-
-  #persistPreference(field, value) {
-    fetch(`/users/${this.userIdValue}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-        "X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
-        Accept: "application/json",
-      },
-      body: new URLSearchParams({
-        [`user[${field}]`]: value,
-      }).toString(),
-    });
-  }
-}
diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js
deleted file mode 100644
index 1e1cd614..00000000
--- a/app/javascript/controllers/tabs_controller.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-// Connects to data-controller="tabs"
-export default class extends Controller {
-  static classes = ["active", "inactive"];
-  static targets = ["btn", "tab"];
-  static values = { defaultTab: String, localStorageKey: String };
-
-  connect() {
-    const selectedTab = this.hasLocalStorageKeyValue
-      ? this.getStoredTab() || this.defaultTabValue
-      : this.defaultTabValue;
-
-    this.updateClasses(selectedTab);
-    document.addEventListener("turbo:load", this.onTurboLoad);
-  }
-
-  disconnect() {
-    document.removeEventListener("turbo:load", this.onTurboLoad);
-  }
-
-  select(event) {
-    const element = event.target.closest("[data-id]");
-    if (element) {
-      const selectedId = element.dataset.id;
-      this.updateClasses(selectedId);
-      if (this.hasLocalStorageKeyValue) {
-        this.storeTab(selectedId);
-      }
-    }
-  }
-
-  onTurboLoad = () => {
-    const selectedTab = this.hasLocalStorageKeyValue
-      ? this.getStoredTab() || this.defaultTabValue
-      : this.defaultTabValue;
-
-    this.updateClasses(selectedTab);
-  };
-
-  getStoredTab() {
-    const tabs = JSON.parse(localStorage.getItem("tabs") || "{}");
-    return tabs[this.localStorageKeyValue];
-  }
-
-  storeTab(selectedId) {
-    const tabs = JSON.parse(localStorage.getItem("tabs") || "{}");
-    tabs[this.localStorageKeyValue] = selectedId;
-    localStorage.setItem("tabs", JSON.stringify(tabs));
-  }
-
-  updateClasses = (selectedId) => {
-    this.btnTargets.forEach((btn) => {
-      btn.classList.remove(...this.activeClasses);
-      btn.classList.remove(...this.inactiveClasses);
-    });
-
-    this.tabTargets.forEach((tab) => tab.classList.add("hidden"));
-
-    this.btnTargets.forEach((btn) => {
-      if (btn.dataset.id === selectedId) {
-        btn.classList.add(...this.activeClasses);
-      } else {
-        btn.classList.add(...this.inactiveClasses);
-      }
-    });
-
-    this.tabTargets.forEach((tab) => {
-      if (tab.id === selectedId) {
-        tab.classList.remove("hidden");
-      }
-    });
-  };
-}
diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js
index d01edf7f..b9c0782d 100644
--- a/app/javascript/controllers/theme_controller.js
+++ b/app/javascript/controllers/theme_controller.js
@@ -1,73 +1,87 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static values = { userPreference: String }
+  static values = { userPreference: String };
 
   connect() {
-    this.applyTheme()
-    this.startSystemThemeListener()
+    this.applyTheme();
+    this.startSystemThemeListener();
   }
 
   disconnect() {
-    this.stopSystemThemeListener()
+    this.stopSystemThemeListener();
   }
 
   // Called automatically by Stimulus when the userPreferenceValue changes (e.g., after form submit/page reload)
   userPreferenceValueChanged() {
-    this.applyTheme()
+    this.applyTheme();
   }
 
   // Called when a theme radio button is clicked
   updateTheme(event) {
-    const selectedTheme = event.currentTarget.value
+    const selectedTheme = event.currentTarget.value;
     if (selectedTheme === "system") {
-      this.setTheme(this.systemPrefersDark())
+      this.setTheme(this.systemPrefersDark());
     } else if (selectedTheme === "dark") {
-      this.setTheme(true)
+      this.setTheme(true);
     } else {
-      this.setTheme(false)
+      this.setTheme(false);
     }
   }
 
   // Applies theme based on the userPreferenceValue (from server)
   applyTheme() {
     if (this.userPreferenceValue === "system") {
-      this.setTheme(this.systemPrefersDark())
+      this.setTheme(this.systemPrefersDark());
     } else if (this.userPreferenceValue === "dark") {
-      this.setTheme(true)
+      this.setTheme(true);
     } else {
-      this.setTheme(false)
+      this.setTheme(false);
     }
   }
 
   // Sets or removes the data-theme attribute
   setTheme(isDark) {
     if (isDark) {
-      document.documentElement.setAttribute("data-theme", "dark")
+      document.documentElement.setAttribute("data-theme", "dark");
     } else {
-      document.documentElement.removeAttribute("data-theme")
+      document.documentElement.removeAttribute("data-theme");
     }
   }
 
   systemPrefersDark() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
 
   handleSystemThemeChange = (event) => {
     // Only apply system theme changes if the user preference is currently 'system'
     if (this.userPreferenceValue === "system") {
-      this.setTheme(event.matches)
+      this.setTheme(event.matches);
     }
+  };
+
+  toDark() {
+    this.setTheme(true);
+  }
+
+  toLight() {
+    this.setTheme(false);
   }
 
   startSystemThemeListener() {
-    this.darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    this.darkMediaQuery.addEventListener("change", this.handleSystemThemeChange)
+    this.darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.darkMediaQuery.addEventListener(
+      "change",
+      this.handleSystemThemeChange,
+    );
   }
 
   stopSystemThemeListener() {
     if (this.darkMediaQuery) {
-      this.darkMediaQuery.removeEventListener("change", this.handleSystemThemeChange)
+      this.darkMediaQuery.removeEventListener(
+        "change",
+        this.handleSystemThemeChange,
+      );
     }
   }
-} 
\ No newline at end of file
+}
diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js
index 664e989d..57cac880 100644
--- a/app/javascript/controllers/time_series_chart_controller.js
+++ b/app/javascript/controllers/time_series_chart_controller.js
@@ -95,7 +95,8 @@ export default class extends Controller {
       .attr("cx", this._d3InitialContainerWidth / 2)
       .attr("cy", this._d3InitialContainerHeight / 2)
       .attr("r", 4)
-      .style("fill", "var(--color-gray-400)");
+      .attr("class", "fg-subdued")
+      .style("fill", "currentColor");
   }
 
   _drawChart() {
@@ -151,7 +152,8 @@ export default class extends Controller {
       .append("stop")
       .attr("class", "end-color")
       .attr("offset", "100%")
-      .attr("stop-color", "var(--color-gray-300)");
+      .attr("class", "fg-subdued")
+      .attr("stop-color", "currentColor");
   }
 
   _setTrendlineSplitAt(percent) {
@@ -191,7 +193,7 @@ export default class extends Controller {
     // Style ticks
     this._d3Group
       .selectAll(".tick text")
-      .style("fill", "var(--color-gray-500)")
+      .attr("class", "fg-gray")
       .style("font-size", "12px")
       .style("font-weight", "500")
       .attr("text-anchor", "middle")
@@ -258,14 +260,10 @@ export default class extends Controller {
     this._d3Tooltip = d3
       .select(`#${this.element.id}`)
       .append("div")
-      .style("position", "absolute")
-      .style("padding", "8px")
-      .style("font", "14px Inter, sans-serif")
-      .style("background", "var(--color-white)")
-      .style("border", "1px solid var(--color-alpha-black-100)")
-      .style("border-radius", "10px")
-      .style("pointer-events", "none")
-      .style("opacity", 0); // Starts as hidden
+      .attr(
+        "class",
+        "bg-container text-sm font-sans absolute p-2 border border-secondary rounded-lg pointer-events-none opacity-0",
+      );
   }
 
   _trackMouseForShowingTooltip() {
@@ -273,6 +271,7 @@ export default class extends Controller {
 
     this._d3Group
       .append("rect")
+      .attr("class", "bg-container")
       .attr("width", this._d3ContainerWidth)
       .attr("height", this._d3ContainerHeight)
       .attr("fill", "none")
@@ -308,12 +307,12 @@ export default class extends Controller {
         // Guideline
         this._d3Group
           .append("line")
-          .attr("class", "guideline")
+          .attr("class", "guideline fg-subdued")
           .attr("x1", this._d3XScale(d.date))
           .attr("y1", 0)
           .attr("x2", this._d3XScale(d.date))
           .attr("y2", this._d3ContainerHeight)
-          .attr("stroke", "var(--color-gray-300)")
+          .attr("stroke", "currentColor")
           .attr("stroke-dasharray", "4, 4");
 
         // Big circle
@@ -353,7 +352,6 @@ export default class extends Controller {
           this._d3Group.selectAll(".guideline").remove();
           this._d3Group.selectAll(".data-point-circle").remove();
           this._d3Tooltip.style("opacity", 0);
-
           this._setTrendlineSplitAt(1);
         }
       });
@@ -364,23 +362,17 @@ export default class extends Controller {
       <div style="margin-bottom: 4px; color: var(--color-gray-500);">
         ${datum.date_formatted}
       </div>
-      <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 0px;">
-        <div style="display: flex; align-items: center; gap: 8px; color: var(--color-black);">
-          <div style="display: flex; align-items: center; justify-content: center; height: 16px; width: 16px;">
-            ${datum.trend.previous.amount === datum.trend.current.amount ? `
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>
-            ` : Number(datum.trend.previous.amount) < Number(datum.trend.current.amount) ? `
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
-            ` : `
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-right-icon lucide-arrow-down-right"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>
-              `}
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2 text-primary">
+          <div class="flex items-center justify-center h-4 w-4">
+            ${this._getTrendIcon(datum)}
           </div>
           ${this._extractFormattedValue(datum.trend.current)}
         </div>
 
         ${
           datum.trend.value === 0
-            ? `<span style="width: 80px;"></span>`
+            ? `<span class="w-20"></span>`
             : `
           <span style="color: ${datum.trend.color};">
             ${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
@@ -391,6 +383,23 @@ export default class extends Controller {
     `;
   }
 
+  _getTrendIcon(datum) {
+    const isIncrease =
+      Number(datum.trend.previous.amount) < Number(datum.trend.current.amount);
+    const isDecrease =
+      Number(datum.trend.previous.amount) > Number(datum.trend.current.amount);
+
+    if (isIncrease) {
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>`;
+    }
+
+    if (isDecrease) {
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-right-icon lucide-arrow-down-right"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>`;
+    }
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${datum.trend.color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>`;
+  }
+
   _getDatumValue = (datum) => {
     return this._extractNumericValue(datum.trend.current);
   };
diff --git a/app/models/balance_sheet.rb b/app/models/balance_sheet.rb
index 21b4aeca..c289f86f 100644
--- a/app/models/balance_sheet.rb
+++ b/app/models/balance_sheet.rb
@@ -26,13 +26,15 @@ class BalanceSheet
       ClassificationGroup.new(
         key: "asset",
         display_name: "Assets",
-        icon: "blocks",
+        icon: "plus",
+        total_money: total_assets_money,
         account_groups: account_groups("asset")
       ),
       ClassificationGroup.new(
         key: "liability",
         display_name: "Debts",
-        icon: "scale",
+        icon: "minus",
+        total_money: total_liabilities_money,
         account_groups: account_groups("liability")
       )
     ]
@@ -75,7 +77,7 @@ class BalanceSheet
   end
 
   private
-    ClassificationGroup = Struct.new(:key, :display_name, :icon, :account_groups, keyword_init: true)
+    ClassificationGroup = Struct.new(:key, :display_name, :icon, :total_money, :account_groups, keyword_init: true)
     AccountGroup = Struct.new(:key, :name, :accountable_type, :classification, :total, :total_money, :weight, :accounts, :color, :missing_rates?, keyword_init: true)
 
     def active_accounts
diff --git a/app/models/family.rb b/app/models/family.rb
index caaa4134..1ab64523 100644
--- a/app/models/family.rb
+++ b/app/models/family.rb
@@ -146,6 +146,10 @@ class Family < ApplicationRecord
     false
   end
 
+  def missing_data_provider?
+    requires_data_provider? && Provider::Registry.get_provider(:synth).nil?
+  end
+
   def primary_user
     users.order(:created_at).first
   end
diff --git a/app/models/period.rb b/app/models/period.rb
index 2cceb743..2fbcd30b 100644
--- a/app/models/period.rb
+++ b/app/models/period.rb
@@ -84,6 +84,10 @@ class Period
     def all
       PERIODS.map { |key, period| from_key(key) }
     end
+
+    def as_options
+      all.map { |period| [ period.label_short, period.key ] }
+    end
   end
 
   PERIODS.each do |key, period|
diff --git a/app/views/accounts/_account.html.erb b/app/views/accounts/_account.html.erb
index 07236d6c..07ffd3d5 100644
--- a/app/views/accounts/_account.html.erb
+++ b/app/views/accounts/_account.html.erb
@@ -25,7 +25,7 @@
 
       <% unless account.scheduled_for_deletion? %>
         <%= link_to edit_account_path(account, return_to: return_to), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
-          <%= lucide_icon "pencil-line", class: "w-4 h-4 text-secondary" %>
+          <%= icon("pencil-line", size: "sm") %>
         <% end %>
       <% end %>
     </div>
@@ -35,7 +35,9 @@
       </p>
 
       <% unless account.scheduled_for_deletion? %>
-        <%= render "shared/toggle_form", model: account, attribute: :is_active, turbo_frame: "_top" %>
+        <%= styled_form_with model: account, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
+          <%= f.toggle :is_active, { data: { auto_submit_form_target: "auto" } } %>
+        <% end %>
       <% end %>
     </div>
   </div>
diff --git a/app/views/accounts/_account_sidebar_tabs.html.erb b/app/views/accounts/_account_sidebar_tabs.html.erb
index 49d6ebaf..1ed98300 100644
--- a/app/views/accounts/_account_sidebar_tabs.html.erb
+++ b/app/views/accounts/_account_sidebar_tabs.html.erb
@@ -1,88 +1,91 @@
-<%# locals: (family:) %>
+<%# locals: (family:, active_account_group_tab:) %>
 
-<% if family.requires_data_provider? && Provider::Registry.get_provider(:synth).nil? %>
-  <details class="group bg-yellow-tint-10 rounded-lg p-2 text-yellow-600 mb-3 text-xs">
-    <summary class="flex items-center justify-between gap-2">
-      <div class="flex items-center gap-2">
-        <%= icon "triangle-alert", size: "sm" %>
-        <p class="font-medium">Missing historical data</p>
+<div>
+  <% if family.missing_data_provider? %>
+    <details class="group bg-yellow-tint-10 rounded-lg p-2 text-yellow-600 mb-3 text-xs">
+      <summary class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <%= icon "triangle-alert", size: "sm", color: "warning" %>
+          <p class="font-medium">Missing historical data</p>
+        </div>
+
+        <%= icon("chevron-down", color: "warning", class: "group-open:transform group-open:rotate-180") %>
+      </summary>
+      <div class="text-xs py-2 space-y-2">
+        <p>Maybe uses Synth API to fetch historical exchange rates, security prices, and more.  This data is required to calculate accurate historical account balances.</p>
+
+        <p>
+          <%= link_to "Add your Synth API key here.", settings_hosting_path, class: "text-yellow-600 underline" %>
+        </p>
       </div>
+    </details>
+  <% end %>
 
-      <%= lucide_icon "chevron-down", class: "text-yellow-600 group-open:transform group-open:rotate-180 w-5" %>
-    </summary>
-    <div class="text-xs py-2 space-y-2">
-      <p>Maybe uses Synth API to fetch historical exchange rates, security prices, and more.  This data is required to calculate accurate historical account balances.</p>
-
-      <p>
-        <%= link_to "Add your Synth API key here.", settings_hosting_path, class: "text-yellow-600 underline" %>
-      </p>
-    </div>
-  </details>
-<% end %>
-
-<div
-  class="space-y-3"
-  data-controller="tabs"
-  data-tabs-local-storage-key-value="account-sidebar-tabs"
-  data-tabs-active-class="bg-surface shadow-sm text-primary"
-  data-tabs-inactive-class="text-secondary"
-  data-tabs-default-tab-value="assets-tab">
-  <div class="bg-surface-inset rounded-lg p-1 flex">
-    <button type="button" data-id="assets-tab" class="w-1/3 px-2 py-1 rounded-md text-sm text-secondary font-medium" data-tabs-target="btn" data-action="click->tabs#select">
-      Assets
-    </button>
-
-    <button type="button" data-id="debts-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">
-      Debts
-    </button>
-
-    <button type="button" data-id="all-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">
-      All
-    </button>
-  </div>
-
-  <div data-tabs-target="tab" id="assets-tab">
-    <%= link_to new_account_path(step: "method_select", classification: "asset"),
-              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
-              data: { turbo_frame: "modal" } do %>
-      <%= icon("plus") %>
-      <span>New asset</span>
+  <%= render TabsComponent.new(active_tab: active_account_group_tab, url_param_key: "account_group_tab", testid: "account-sidebar-tabs") do |tabs| %>
+    <% tabs.with_nav do |nav| %>
+      <% nav.with_btn(id: "assets", label: "Assets") %>
+      <% nav.with_btn(id: "debts", label: "Debts") %>
+      <% nav.with_btn(id: "all", label: "All") %>
     <% end %>
 
-    <div class="space-y-2">
-      <% family.balance_sheet.account_groups("asset").each do |group| %>
-        <%= render "accounts/accountable_group", account_group: group %>
-      <% end %>
-    </div>
-  </div>
+    <% tabs.with_panel(tab_id: "assets") do %>
+      <div class="space-y-2">
+        <%= render LinkComponent.new(
+        text: "New asset",
+        variant: "ghost",
+        href: new_account_path(step: "method_select", classification: "asset"),
+        icon: "plus",
+        frame: :modal,
+        full_width: true,
+        class: "justify-start"
+      ) %>
 
-  <div data-tabs-target="tab" id="debts-tab" class="hidden">
-    <%= link_to new_account_path(step: "method_select", classification: "liability"),
-              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
-              data: { turbo_frame: "modal" } do %>
-      <%= icon("plus") %>
-      <span>New debt</span>
+        <div>
+          <% family.balance_sheet.account_groups("asset").each do |group| %>
+            <%= render "accounts/accountable_group", account_group: group %>
+          <% end %>
+        </div>
+      </div>
     <% end %>
 
-    <div class="space-y-2">
-      <% family.balance_sheet.account_groups("liability").each do |group| %>
-        <%= render "accounts/accountable_group", account_group: group %>
-      <% end %>
-    </div>
-  </div>
+    <% tabs.with_panel(tab_id: "debts") do %>
+      <div class="space-y-2">
+        <%= render LinkComponent.new(
+          text: "New debt",
+          variant: "ghost",
+          href: new_account_path(step: "method_select", classification: "liability"),
+          icon: "plus",
+          frame: :modal,
+        full_width: true,
+        class: "justify-start"
+      ) %>
 
-  <div data-tabs-target="tab" id="all-tab" class="hidden">
-    <%= link_to new_account_path(step: "method_select"),
-              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
-              data: { turbo_frame: "modal" } do %>
-      <%= icon("plus") %>
-      <span>New account</span>
+        <div>
+          <% family.balance_sheet.account_groups("liability").each do |group| %>
+            <%= render "accounts/accountable_group", account_group: group %>
+          <% end %>
+        </div>
+      </div>
     <% end %>
 
-    <div class="space-y-2">
-      <% family.balance_sheet.account_groups.each do |group| %>
-        <%= render "accounts/accountable_group", account_group: group %>
-      <% end %>
-    </div>
-  </div>
+    <% tabs.with_panel(tab_id: "all") do %>
+      <div class="space-y-2">
+        <%= render LinkComponent.new(
+          text: "New account",
+          variant: "ghost",
+          full_width: true,
+          href: new_account_path(step: "method_select"),
+          icon: "plus",
+        frame: :modal,
+        class: "justify-start"
+      ) %>
+
+        <div>
+          <% family.balance_sheet.account_groups.each do |group| %>
+            <%= render "accounts/accountable_group", account_group: group %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
 </div>
diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb
index 63622859..9eb98d6e 100644
--- a/app/views/accounts/_account_type.html.erb
+++ b/app/views/accounts/_account_type.html.erb
@@ -1,9 +1,11 @@
 <%# locals: (accountable:) %>
 
 <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-  <span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
-    <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
-  </span>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
+  <%= render FilledIconComponent.new(
+    icon: accountable.icon,
+    hex_color: accountable.color,
+  ) %>
+
   <%= accountable.display_name.singularize %>
 <% end %>
diff --git a/app/views/accounts/_accountable_group.html.erb b/app/views/accounts/_accountable_group.html.erb
index 3e2a26ee..a3939727 100644
--- a/app/views/accounts/_accountable_group.html.erb
+++ b/app/views/accounts/_accountable_group.html.erb
@@ -1,11 +1,7 @@
 <%# locals: (account_group:) %>
 
-<details class="group" data-controller="account-collapse" data-account-collapse-type-value="<%= account_group.key %>">
-  <summary class="px-3 py-2 flex items-center gap-3 cursor-pointer h-10 mb-1">
-    <%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
-
-    <%= tag.p account_group.name, class: "text-sm font-medium" %>
-
+<%= render DisclosureComponent.new(title: account_group.name, align: :left) do |disclosure| %>
+  <% disclosure.with_summary_content do %>
     <div class="ml-auto text-right grow">
       <%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
 
@@ -15,11 +11,11 @@
         </div>
       <% end %>
     </div>
-  </summary>
+  <% end %>
 
   <div class="space-y-1">
     <% account_group.accounts.each do |account| %>
-      <%= link_to account_path(account), class: "block flex items-center gap-2 btn btn--ghost", title: account.name do %>
+      <%= link_to account_path(account), class: "block flex items-center gap-2 px-3 py-2 hover:bg-surface-hover", title: account.name do %>
         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 
         <div class="min-w-0 grow">
@@ -40,10 +36,13 @@
     <% end %>
   </div>
 
-  <%= link_to new_polymorphic_path(account_group.key, step: "method_select"),
-              class: "flex items-center gap-3 btn btn--ghost text-secondary",
-              data: { turbo_frame: "modal" } do %>
-    <%= icon("plus") %>
-    <span>New <%= account_group.name.downcase.singularize %></span>
-  <% end %>
-</details>
+  <%= render LinkComponent.new(
+    href: new_polymorphic_path(account_group.key, step: "method_select"),
+    text: "New #{account_group.name.downcase.singularize}",
+    icon: "plus",
+    full_width: true,
+    variant: "ghost",
+    frame: :modal,
+    class: "justify-start"
+  ) %>
+<% end %>
diff --git a/app/views/accounts/_empty.html.erb b/app/views/accounts/_empty.html.erb
index 6a1b6c89..a1eef715 100644
--- a/app/views/accounts/_empty.html.erb
+++ b/app/views/accounts/_empty.html.erb
@@ -3,9 +3,10 @@
     <%= tag.p t(".no_accounts"), class: "text-primary mb-1 font-medium" %>
     <%= tag.p t(".empty_message"), class: "text-secondary mb-4" %>
 
-    <%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new_account") %></span>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: t(".new_account"),
+      href: new_account_path,
+      frame: :modal
+    ) %>
   </div>
 </div>
diff --git a/app/views/accounts/_logo.html.erb b/app/views/accounts/_logo.html.erb
index 9286a0f3..8eec2153 100644
--- a/app/views/accounts/_logo.html.erb
+++ b/app/views/accounts/_logo.html.erb
@@ -12,5 +12,5 @@
 <% elsif account.logo.attached? %>
   <%= image_tag account.logo, class: "shrink-0 rounded-full #{size_classes[size]}" %>
 <% else %>
-  <%= circle_logo(account.name, hex: color || account.accountable.color, size: size) %>
+  <%= render FilledIconComponent.new(variant: :text, hex_color: color || account.accountable.color, text: account.name, size: size, rounded: true) %>
 <% end %>
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb
index fcdca138..4893e44c 100644
--- a/app/views/accounts/index.html.erb
+++ b/app/views/accounts/index.html.erb
@@ -2,23 +2,23 @@
   <h1 class="text-xl"><%= t(".accounts") %></h1>
   <div class="flex items-center gap-5">
     <div class="flex items-center gap-2">
-      <%= button_to sync_all_accounts_path,
-                      disabled: Current.family.syncing?,
-                      class: "md:btn md:btn--outline flex items-center justify-center gap-2 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg",
-                      title: t(".sync") do %>
-        <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
-        <span class="hidden md:inline"><%= t(".sync") %></span>
-      <% end %>
+      <%= render ButtonComponent.new(
+        text: "Sync all",
+        href: sync_all_accounts_path,
+        method: :post,
+        variant: "outline",
+        disabled: Current.family.syncing?,
+        icon: "refresh-cw",
+        class: ""
+      ) %>
 
-      <%= link_to new_account_path(return_to: accounts_path),
-                    data: { turbo_frame: "modal" },
-                    class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
-        <div class="flex items-center justify-center w-5 h-5">
-
-        <%= lucide_icon("plus") %>
-                    </div>
-        <p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
-      <% end %>
+      <%= render LinkComponent.new(
+        text: "New account",
+        href: new_account_path(return_to: accounts_path),
+        variant: "primary",
+        icon: "plus",
+        frame: :modal
+      ) %>
     </div>
   </div>
 </header>
diff --git a/app/views/accounts/index/_manual_accounts.html.erb b/app/views/accounts/index/_manual_accounts.html.erb
index b20c400e..0dd8f66d 100644
--- a/app/views/accounts/index/_manual_accounts.html.erb
+++ b/app/views/accounts/index/_manual_accounts.html.erb
@@ -2,10 +2,10 @@
 
 <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
   <summary class="flex items-center gap-2 focus-visible:outline-hidden">
-    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
+    <%= icon("chevron-right", class: "group-open:transform group-open:rotate-90") %>
 
     <div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
-      <%= lucide_icon("folder-pen", class: "w-5 h-5 text-secondary") %>
+      <%= icon("folder-pen") %>
     </div>
 
     <span class="mr-auto text-sm font-medium text-primary"><%= t(".other_accounts") %></span>
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index 0bde1bd8..1ca5229e 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -24,10 +24,12 @@
     <% unless params[:return_to].present? %>
       <%= button_to imports_path(import: { type: "AccountImport" }),
               data: { turbo_frame: :_top },
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-        <span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
-          <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
-        </span>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
+        <%= render FilledIconComponent.new(
+          icon: "download",
+          hex_color: "#F79009",
+        ) %>
+
         <%= t("accounts.new.import_accounts") %>
       <% end %>
     <% end %>
diff --git a/app/views/accounts/new/_container.html.erb b/app/views/accounts/new/_container.html.erb
index d83d2e8c..2d3582f7 100644
--- a/app/views/accounts/new/_container.html.erb
+++ b/app/views/accounts/new/_container.html.erb
@@ -1,18 +1,22 @@
 <%# locals: (title:, back_path: nil) %>
 
-<%= modal do %>
-  <div class="flex flex-col w-screen max-w-xl relative" data-controller="list-keyboard-navigation">
-    <div class="border-b border-tertiary md:border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
-      <% if back_path %>
-        <%= link_to back_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
-          <%= lucide_icon("arrow-left", class: "text-secondary w-5 h-5") %>
+<%= render DialogComponent.new do |dialog| %>
+  <div class="flex flex-col relative" data-controller="list-keyboard-navigation">
+    <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-gray-800 flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <% if back_path %>
+          <%= render LinkComponent.new(
+          variant: "icon",
+          icon: "arrow-left",
+          href: back_path,
+          size: "lg"
+        ) %>
         <% end %>
-      <% end %>
 
-      <span class="text-primary"><%= title %></span>
-      <button class="absolute top-1/2 -translate-y-1/2 right-4 flex w-8 h-8 items-center justify-center rounded-lg md:hidden outline-0" data-action="click->modal#close">
-        <%= lucide_icon("x", class: "text-secondary w-6 h-6") %>
-      </button>
+        <span class="text-primary"><%= title %></span>
+      </div>
+
+      <%= icon("x", as_button: true, size: "lg", data: { action: "dialog#close" }) %>
     </div>
 
     <div class="p-2 text-subdued">
@@ -22,20 +26,26 @@
       <%= yield %>
     </div>
 
-    <div class="border-t border-alpha-black-25 p-4 text-secondary text-sm justify-between hidden md:flex">
+    <div class="border-t border-alpha-black-25 px-4 pt-4 text-secondary text-sm justify-between hidden md:flex">
       <div class="flex space-x-5">
         <div class="flex items-center space-x-2">
           <span>Select</span>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("corner-down-left", class: "inline w-3 h-3") %></kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("corner-down-left", size: "xs") %>
+          </kbd>
         </div>
         <div class="flex items-center space-x-2">
           <span>Navigate</span>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-up", class: "inline w-3 h-3") %></kbd>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-down", class: "inline w-3 h-3") %></kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("arrow-up", size: "xs") %>
+          </kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("arrow-down", size: "xs") %>
+          </kbd>
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <button data-action="modal#close">Close</button>
+        <button data-action="dialog#close">Close</button>
         <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
       </div>
     </div>
diff --git a/app/views/accounts/new/_method_selector.html.erb b/app/views/accounts/new/_method_selector.html.erb
index 07a70074..25dc9f62 100644
--- a/app/views/accounts/new/_method_selector.html.erb
+++ b/app/views/accounts/new/_method_selector.html.erb
@@ -2,18 +2,18 @@
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
-    <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
+    <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
       <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-        <%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
+        <%= icon("keyboard") %>
       </span>
       <%= t("accounts.new.method_selector.manual_entry") %>
     <% end %>
 
     <% if us_link_token %>
       <%# Default US-only Link %>
-      <button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
+      <button data-controller="plaid" data-action="plaid#open dialog#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-          <%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
+          <%= icon("link-2") %>
         </span>
         <%= t("accounts.new.method_selector.connected_entry") %>
       </button>
@@ -21,9 +21,9 @@
 
     <%# EU Link %>
     <% if eu_link_token %>
-      <button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
+      <button data-controller="plaid" data-action="plaid#open dialog#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-          <%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
+          <%= icon("link-2") %>
         </span>
         <%= t("accounts.new.method_selector.connected_entry_eu") %>
       </button>
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index 3e9805bc..00bf610d 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -2,30 +2,29 @@
 
 <%= turbo_frame_tag dom_id(account, "entries") do %>
   <div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
-    <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center justify-between mb-4" data-testid="activity-menu">
       <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
       <% unless @account.plaid_account_id.present? %>
-        <div data-controller="menu" data-testid="activity-menu">
-          <button class="btn btn--secondary flex items-center gap-2" data-menu-target="button">
-            <%= lucide_icon("plus", class: "w-4 h-4") %>
-            <%= tag.span t(".new") %>
-          </button>
-          <div data-menu-target="content" class="z-10 hidden bg-container rounded-lg border border-alpha-black-25 shadow-xs p-1">
-            <%= link_to new_valuation_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
-              <%= lucide_icon("circle-dollar-sign", class: "text-secondary w-5 h-5") %>
-              <%= tag.span t(".new_balance"), class: "text-sm" %>
-            <% end %>
+        <%= render MenuComponent.new(variant: "button") do |menu| %>
+          <% menu.with_button(text: "New", variant: "secondary", icon: "plus") %>
 
-            <% unless @account.crypto? %>
-              <%= link_to @account.investment? ? new_trade_path(account_id: @account.id) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "btn btn--primary flex items-center justify-center gap-2 rounded-full md:rounded-lg w-9 h-9 md:w-auto md:h-auto" do %>
-              <span class="flex items-center justify-center">
-                <%= lucide_icon("credit-card", class: "text-secondary w-5 h-5") %>
-              </span>
-                <%= tag.span t(".new_transaction"), class: "text-sm md:block" %>
-              <% end %>
-            <% end %>
-          </div>
-        </div>
+          <% menu.with_item(
+              variant: "link",
+              text: "New balance",
+              icon: "circle-dollar-sign",
+              href: new_valuation_path(account_id: @account.id),
+              data: { turbo_frame: :modal }) %>
+
+          <% unless @account.crypto? %>
+            <% href = @account.investment? ? new_trade_path(account_id: @account.id) : new_transaction_path(account_id: @account.id) %>
+            <% menu.with_item(
+                variant: "link",
+                text: "New transaction",
+                icon: "credit-card",
+                href: href,
+                data: { turbo_frame: :modal }) %>
+          <% end %>
+        <% end %>
       <% end %>
     </div>
 
@@ -38,7 +37,7 @@
         <div class="flex gap-2 mb-4">
           <div class="grow">
             <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
-              <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
+              <%= icon("search") %>
               <%= hidden_field_tag :account_id, @account.id %>
               <%= form.search_field :search,
                             placeholder: "Search entries by name",
diff --git a/app/views/accounts/show/_chart.html.erb b/app/views/accounts/show/_chart.html.erb
index 9910fee0..c94adeb3 100644
--- a/app/views/accounts/show/_chart.html.erb
+++ b/app/views/accounts/show/_chart.html.erb
@@ -24,7 +24,11 @@
             data: { "auto-submit-form-target": "auto" } %>
         <% end %>
 
-        <%= period_select form: form, selected: period %>
+        <%= form.select :period,
+                    Period.as_options,
+                    { selected: period.key },
+                    data: { "auto-submit-form-target": "auto" },
+                    class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
       </div>
     <% end %>
   </div>
diff --git a/app/views/accounts/show/_header.html.erb b/app/views/accounts/show/_header.html.erb
index 6d822711..4c60e832 100644
--- a/app/views/accounts/show/_header.html.erb
+++ b/app/views/accounts/show/_header.html.erb
@@ -19,17 +19,27 @@
       </div>
     <% end %>
 
-    <div class="flex items-center gap-3 ml-auto">
+    <div class="flex items-center gap-1 ml-auto">
       <% if account.plaid_account_id.present? %>
         <% if Rails.env.development? %>
-          <%= button_to sync_plaid_item_path(account.plaid_account.plaid_item), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
-            <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
-          <% end %>
+          <%= icon(
+            "refresh-cw",
+            as_button: true,
+            size: "sm",
+            href: sync_plaid_item_path(account.plaid_account.plaid_item),
+            disabled: account.syncing?,
+            frame: :_top
+          ) %>
         <% end %>
       <% else %>
-        <%= button_to sync_account_path(account), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
-          <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
-        <% end %>
+        <%= icon(
+          "refresh-cw",
+          as_button: true,
+          size: "sm",
+          href: sync_account_path(account),
+          disabled: account.syncing?,
+          frame: :_top
+        ) %>
       <% end %>
 
       <%= render "accounts/show/menu", account: account %>
diff --git a/app/views/accounts/show/_menu.html.erb b/app/views/accounts/show/_menu.html.erb
index c5c9549a..5e59c88a 100644
--- a/app/views/accounts/show/_menu.html.erb
+++ b/app/views/accounts/show/_menu.html.erb
@@ -1,47 +1,25 @@
 <%# locals: (account:) %>
 
-<%= contextual_menu do %>
-  <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-    <% if account.plaid_account_id.present? %>
-      <%= link_to accounts_path,
-                      data: { turbo_frame: :_top },
-                      class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
-        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
+<%= render MenuComponent.new(testid: "account-menu") do |menu| %>
+  <% menu.with_item(variant: "link", text: "Edit", href: edit_account_path(account), icon: "pencil-line", data: { turbo_frame: :modal }) %>
 
-        <span><%= t(".manage") %></span>
-      <% end %>
-    <% else %>
-      <%= link_to edit_account_path(account),
-                      data: { turbo_frame: :modal },
-                      class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
-        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
+  <% unless account.crypto? %>
+    <% menu.with_item(
+      variant: "link",
+      text: "Import transactions",
+      href: imports_path({ import: { type: account.investment? ? "TradeImport" : "TransactionImport", account_id: account.id } }),
+      icon: "download",
+      data: { turbo_frame: :_top }
+    ) %>
+  <% end %>
 
-        <span><%= t(".edit") %></span>
-      <% end %>
-
-      <% unless account.crypto? %>
-        <%= button_to imports_path({ import: { type: account.investment? ? "TradeImport" : "TransactionImport", account_id: account.id } }),
-                      data: { turbo_frame: :_top },
-                      class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
-          <%= lucide_icon "download", class: "w-5 h-5 text-secondary" %>
-
-          <span><%= t(".import") %></span>
-        <% end %>
-      <% end %>
-
-      <%= button_to account_path(account),
-                        method: :delete,
-                        class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-                        data: {
-                          turbo_frame: :_top,
-                          turbo_confirm: {
-                            title: t(".confirm_title"),
-                            body: t(".confirm_body_html"),
-                            accept: t(".confirm_accept", name: account.name)
-                          }
-                        } do %>
-        <%= lucide_icon("trash-2", class: "w-5 h-5 mr-2") %> Delete account
-      <% end %>
-    <% end %>
-  </div>
+  <% menu.with_item(
+    variant: "button",
+    text: "Delete account",
+    href: account_path(account),
+    method: :delete,
+    icon: "trash-2",
+    confirm: CustomConfirm.for_resource_deletion("Account", high_severity: true),
+    data: { turbo_frame: :_top }
+  ) %>
 <% end %>
diff --git a/app/views/accounts/show/_tabs.html.erb b/app/views/accounts/show/_tabs.html.erb
index 2a0e2b2f..169fe0d4 100644
--- a/app/views/accounts/show/_tabs.html.erb
+++ b/app/views/accounts/show/_tabs.html.erb
@@ -1,11 +1,17 @@
 <%# locals: (account:, tabs:) %>
 
-<% selected_tab = tabs.find { |tab| tab[:key] == params[:tab] } || tabs.first %>
+<% active_tab = tabs.find { |tab| tab[:key] == params[:tab] } || tabs.first %>
 
-<div class="flex gap-2 text-sm text-primary font-medium mb-4">
-  <% tabs.each do |tab| %>
-    <%= render "accounts/show/tab", account: account, key: tab[:key], is_selected: selected_tab[:key] == tab[:key] %>
+<%= render TabsComponent.new(active_tab: active_tab[:key], url_param_key: "tab") do |tabs_container| %>
+  <% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
+    <% tabs.each do |tab| %>
+      <% nav.with_btn(id: tab[:key], label: tab[:key].humanize, classes: "px-6") %>
+    <% end %>
   <% end %>
-</div>
 
-<%= selected_tab[:contents] %>
+  <% tabs.each do |tab| %>
+    <% tabs_container.with_panel(tab_id: tab[:key]) do %>
+      <%= tab[:contents] %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/accounts/show/_template.html.erb b/app/views/accounts/show/_template.html.erb
index 5bc44376..20d352b5 100644
--- a/app/views/accounts/show/_template.html.erb
+++ b/app/views/accounts/show/_template.html.erb
@@ -16,7 +16,7 @@
       <%= render "accounts/show/chart", account: account %>
     <% end %>
 
-    <div class="min-h-[800px]">
+    <div class="min-h-[800px]" data-testid="account-details>
       <% if tabs.present? %>
         <%= tabs %>
       <% else %>
diff --git a/app/views/assistant_messages/_assistant_message.html.erb b/app/views/assistant_messages/_assistant_message.html.erb
index dfbaae07..ced5d254 100644
--- a/app/views/assistant_messages/_assistant_message.html.erb
+++ b/app/views/assistant_messages/_assistant_message.html.erb
@@ -5,7 +5,7 @@
     <details class="group mb-1">
       <summary class="flex items-center gap-2">
         <p class="text-secondary text-sm">Assistant reasoning</p>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
+        <%= icon("chevron-down", class: "group-open:transform group-open:rotate-180") %>
       </summary>
 
       <div class="prose prose--ai-chat"><%= markdown(assistant_message.content) %></div>
diff --git a/app/views/assistant_messages/_tool_calls.html.erb b/app/views/assistant_messages/_tool_calls.html.erb
index fc0e8129..59c14922 100644
--- a/app/views/assistant_messages/_tool_calls.html.erb
+++ b/app/views/assistant_messages/_tool_calls.html.erb
@@ -2,7 +2,7 @@
 
 <details class="my-2 group mb-4">
   <summary class="text-secondary text-xs cursor-pointer flex items-center gap-2">
-    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
+    <%= icon("chevron-right", class: "group-open:transform group-open:rotate-90") %>
     <p>Tool Calls</p>
   </summary>
 
diff --git a/app/views/budget_categories/_budget_category.html.erb b/app/views/budget_categories/_budget_category.html.erb
index 0c850678..6ae6ff38 100644
--- a/app/views/budget_categories/_budget_category.html.erb
+++ b/app/views/budget_categories/_budget_category.html.erb
@@ -8,11 +8,17 @@
         <%= render "budget_categories/budget_category_donut", budget_category: budget_category %>
       </div>
     <% else %>
-      <div class="w-8 h-8 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" style="<%= mixed_hex_styles(budget_category.category.color) %>">
+      <div class="w-8 h-8 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" style="color: <%= budget_category.category.color %>">
         <% if budget_category.category.lucide_icon %>
-          <%= icon(budget_category.category.lucide_icon) %>
+          <%= icon(budget_category.category.lucide_icon, color: "current") %>
         <% else %>
-          <%= render "shared/circle_logo", name: budget_category.category.name, hex: budget_category.category.color %>
+          <%= render FilledIconComponent.new(
+            variant: :text,
+            hex_color: budget_category.category.color,
+            text: budget_category.category.name,
+            size: "sm",
+            rounded: true
+          ) %>
         <% end %>
       </div>
     <% end %>
diff --git a/app/views/budget_categories/_budget_category_donut.html.erb b/app/views/budget_categories/_budget_category_donut.html.erb
index 517135fe..0305d316 100644
--- a/app/views/budget_categories/_budget_category_donut.html.erb
+++ b/app/views/budget_categories/_budget_category_donut.html.erb
@@ -11,7 +11,9 @@
   <div data-donut-chart-target="contentContainer" class="flex justify-center items-center h-full p-1">
     <div data-donut-chart-target="defaultContent" class="h-full w-full rounded-full flex flex-col items-center justify-center" style="background-color: <%= hex_with_alpha(budget_category.category.color, 0.05) %>">
       <% if budget_category.category.lucide_icon %>
-        <%= lucide_icon budget_category.category.lucide_icon, class: "w-4 h-4 shrink-0", style: "color: #{budget_category.category.color}" %>
+        <span style="color: <%= budget_category.category.color %>">
+          <%= icon(budget_category.category.lucide_icon, size: "sm", color: "current") %>
+        </span>
       <% else %>
         <span class="text-sm uppercase" style="color: <%= budget_category.category.color %>">
           <%= budget_category.category.name.first.upcase %>
diff --git a/app/views/budget_categories/_confirm_button.html.erb b/app/views/budget_categories/_confirm_button.html.erb
index 6c949eae..f7e00a22 100644
--- a/app/views/budget_categories/_confirm_button.html.erb
+++ b/app/views/budget_categories/_confirm_button.html.erb
@@ -1,11 +1,10 @@
 <div id="<%= dom_id(budget, :confirm_button) %>">
-  <% if budget.allocations_valid? %>
-    <%= link_to "Confirm",
-        budget_path(budget),
-        class: "block btn btn--primary w-full text-center" %>
-  <% else %>
-    <span class="block btn btn--secondary w-full text-center text-subdued cursor-not-allowed">
-      Confirm
-    </span>
-  <% end %>
+  <%= render ButtonComponent.new(
+    text: "Confirm",
+    variant: "primary",
+    full_width: true,
+    href: budget_path(budget),
+    method: :get,
+    disabled: !budget.allocations_valid?
+  ) %>
 </div>
diff --git a/app/views/budget_categories/_no_categories.html.erb b/app/views/budget_categories/_no_categories.html.erb
index 5f489f94..927a0b2b 100644
--- a/app/views/budget_categories/_no_categories.html.erb
+++ b/app/views/budget_categories/_no_categories.html.erb
@@ -6,12 +6,18 @@
     </p>
 
     <div class="flex items-center gap-2">
-      <%= button_to "Use defaults (recommended)", bootstrap_categories_path, class: "btn btn--primary" %>
+      <%= render ButtonComponent.new(
+        text: "Use defaults (recommended)",
+        href: bootstrap_categories_path,
+      ) %>
 
-      <%= link_to new_category_path, class: "btn btn--outline flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-        <%= lucide_icon("plus", class: "w-5 h-5") %>
-        <span>New category</span>
-      <% end %>
+      <%= render LinkComponent.new(
+        text: "New category",
+        variant: "outline",
+        icon: "plus",
+        href: new_category_path,
+        frame: :modal,
+      ) %>
     </div>
   </div>
 </div>
diff --git a/app/views/budget_categories/index.html.erb b/app/views/budget_categories/index.html.erb
index 4d38f594..d5ded43d 100644
--- a/app/views/budget_categories/index.html.erb
+++ b/app/views/budget_categories/index.html.erb
@@ -32,7 +32,7 @@
                   <% group.budget_subcategories.each do |budget_subcategory| %>
                     <div class="w-full flex items-center gap-4">
                       <div class="ml-4 flex items-center justify-center text-subdued">
-                        <%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
+                        <%= icon("corner-down-right") %>
                       </div>
 
                       <%= render "budget_categories/budget_category_form", budget_category: budget_subcategory %>
diff --git a/app/views/budget_categories/show.html.erb b/app/views/budget_categories/show.html.erb
index cf6bb5a8..53b06240 100644
--- a/app/views/budget_categories/show.html.erb
+++ b/app/views/budget_categories/show.html.erb
@@ -1,39 +1,32 @@
-<%= drawer do %>
-  <div class="space-y-4">
-    <header class="flex justify-between">
-      <div>
-        <p class="text-sm text-secondary">Category</p>
-        <h3 class="text-2xl font-medium text-primary">
-          <%= @budget_category.name %>
-        </h3>
-
-        <% if @budget_category.budget.initialized? %>
-          <p class="text-sm text-secondary">
-            <span class="text-primary">
-              <%= format_money(@budget_category.actual_spending_money) %>
-            </span>
-            <span>/</span>
-            <span><%= format_money(@budget_category.budgeted_spending_money) %></span>
-          </p>
-        <% end %>
-      </div>
+<%= render DialogComponent.new(variant: :drawer) do |dialog| %>
+  <% dialog.with_header do %>
+    <div>
+      <p class="text-sm text-secondary">Category</p>
+      <h3 class="text-2xl font-medium text-primary">
+        <%= @budget_category.name %>
+      </h3>
 
       <% if @budget_category.budget.initialized? %>
-        <div class="ml-auto w-10 h-10">
-          <%= render "budget_categories/budget_category_donut",
-                    budget_category: @budget_category %>
-        </div>
+        <p class="text-sm text-secondary">
+          <span class="text-primary">
+            <%= format_money(@budget_category.actual_spending_money) %>
+          </span>
+          <span>/</span>
+          <span><%= format_money(@budget_category.budgeted_spending_money) %></span>
+        </p>
       <% end %>
-    </header>
+    </div>
 
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
-                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4>Overview</h4>
-        <%= lucide_icon "chevron-down",
-            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% if @budget_category.budget.initialized? %>
+      <div class="ml-auto w-10 h-10">
+        <%= render "budget_categories/budget_category_donut",
+                    budget_category: @budget_category %>
+      </div>
+    <% end %>
+  <% end %>
 
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: "Overview", open: true) do %>
       <div class="pb-4">
         <dl class="space-y-3 px-3 py-2">
           <div class="flex items-center justify-between text-sm">
@@ -49,20 +42,20 @@
             <div class="flex items-center justify-between text-sm">
               <dt class="text-secondary">Status</dt>
               <% if @budget_category.available_to_spend.negative? %>
-                <dd class="text-red-500 flex items-center gap-1 text-red-500 font-medium">
-                  <%= lucide_icon "alert-circle", class: "shrink-0 w-4 h-4 text-red-500" %>
+                <dd class="flex items-center gap-1 text-red-500 font-medium">
+                  <%= icon "alert-circle", size: "sm", color: "destructive" %>
                   <%= format_money @budget_category.available_to_spend_money.abs %>
                   <span>overspent</span>
                 </dd>
               <% elsif @budget_category.available_to_spend.zero? %>
-                <dd class="text-orange-500 flex items-center gap-1 text-orange-500 font-medium">
-                  <%= lucide_icon "x-circle", class: "shrink-0 w-4 h-4 text-orange-500" %>
+                <dd class="flex items-center gap-1 text-orange-500 font-medium">
+                  <%= icon "x-circle", size: "sm", color: "warning" %>
                   <%= format_money @budget_category.available_to_spend_money %>
                   <span>left</span>
                 </dd>
               <% else %>
                 <dd class="text-primary flex items-center gap-1 text-green-500 font-medium">
-                  <%= lucide_icon "check-circle-2", class: "shrink-0 w-4 h-4 text-green-500" %>
+                  <%= icon "check-circle", size: "sm", color: "success" %>
                   <%= format_money @budget_category.available_to_spend_money %>
                   <span>left</span>
                 </dd>
@@ -92,16 +85,9 @@
           </div>
         </dl>
       </div>
-    </details>
-
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
-                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4>Recent Transactions</h4>
-        <%= lucide_icon "chevron-down",
-            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% end %>
 
+    <% dialog.with_section(title: "Recent Transactions", open: true) do %>
       <div class="space-y-2">
         <div class="px-3 py-4 space-y-2">
           <% if @recent_transactions.any? %>
@@ -133,14 +119,17 @@
               <% end %>
             </ul>
 
-            <%= link_to "View all category transactions",
-                  transactions_path(q: {
-                    categories: [@budget_category.name],
-                    start_date: @budget.start_date,
-                    end_date: @budget.end_date
-                  }),
-                  data: { turbo_frame: :_top },
-                  class: "block text-center btn btn--outline w-full" %>
+            <%= render LinkComponent.new(
+              text: "View all category transactions",
+              variant: "outline",
+              full_width: true,
+              href: transactions_path(q: {
+                categories: [@budget_category.name],
+                start_date: @budget.start_date,
+                end_date: @budget.end_date
+              }),
+              frame: :_top
+            ) %>
           <% else %>
             <p class="text-secondary text-sm mb-4">
               No transactions found for this budget period.
@@ -148,6 +137,6 @@
           <% end %>
         </div>
       </div>
-    </details>
-  </div>
+    <% end %>
+  <% end %>
 <% end %>
diff --git a/app/views/budgets/_budget_categories.html.erb b/app/views/budgets/_budget_categories.html.erb
index e9ff5f11..5b9e1a1c 100644
--- a/app/views/budgets/_budget_categories.html.erb
+++ b/app/views/budgets/_budget_categories.html.erb
@@ -25,7 +25,7 @@
             <% group.budget_subcategories.each do |budget_subcategory| %>
               <div class="w-full flex items-center -mt-4">
                 <div class="ml-8 flex items-center justify-center text-subdued">
-                  <%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
+                  <%= icon "corner-down-right" %>
                 </div>
 
                 <%= render "budget_categories/budget_category", budget_category: budget_subcategory %>
diff --git a/app/views/budgets/_budget_donut.html.erb b/app/views/budgets/_budget_donut.html.erb
index 8ec57be3..384830e5 100644
--- a/app/views/budgets/_budget_donut.html.erb
+++ b/app/views/budgets/_budget_donut.html.erb
@@ -8,24 +8,29 @@
           <span>Spent</span>
         </div>
 
-        <div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
+        <div class="mb-2 text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
           <%= format_money(budget.actual_spending_money) %>
         </div>
 
-        <%= link_to edit_budget_path(budget), class: "btn btn--secondary flex items-center gap-1 mt-2" do %>
-          <span class="text-primary font-medium">
-            of <%= format_money(budget.budgeted_spending_money) %>
-          </span>
-          <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
-        <% end %>
+        <%= render LinkComponent.new(
+          text: "of #{budget.budgeted_spending_money.format}",
+          variant: "secondary",
+          icon: "pencil",
+          icon_position: "right",
+          size: "sm",
+          href: edit_budget_path(budget)
+        ) %>
       <% else %>
         <div class="text-subdued text-3xl mb-2">
           <span><%= format_money Money.new(0, budget.currency || budget.family.currency) %></span>
         </div>
-        <%= link_to edit_budget_path(budget), class: "flex items-center gap-2 btn btn--primary" do %>
-          <%= lucide_icon "plus", class: "w-4 h-4 text-white" %>
-          New budget
-        <% end %>
+
+        <%= render LinkComponent.new(
+          text: "New budget",
+          size: "sm",
+          icon: "plus",
+          href: edit_budget_path(budget)
+        ) %>
       <% end %>
     </div>
 
@@ -41,11 +46,14 @@
             <%= format_money(bc.actual_spending_money) %>
           </p>
 
-          <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-            <span>of <%= format_money(bc.budgeted_spending_money, precision: 0) %></span>
-
-            <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary shrink-0" %>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "of #{bc.budgeted_spending_money.format(precision: 0)}",
+            variant: "secondary",
+            icon: "pencil",
+            icon_position: "right",
+            size: "sm",
+            href: budget_budget_categories_path(budget)
+          ) %>
         </div>
       </div>
     <% end %>
diff --git a/app/views/budgets/_budget_header.html.erb b/app/views/budgets/_budget_header.html.erb
index 8dfdb679..c6c8ce21 100644
--- a/app/views/budgets/_budget_header.html.erb
+++ b/app/views/budgets/_budget_header.html.erb
@@ -3,38 +3,46 @@
 <div class="flex items-center gap-1 mb-4">
   <div class="flex items-center gap-2">
     <% if budget.previous_budget_param %>
-      <%= link_to budget_path(budget.previous_budget_param) do %>
-        <%= lucide_icon "chevron-left" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "chevron-left",
+        href: budget_path(budget.previous_budget_param),
+      ) %>
     <% else %>
-      <%= lucide_icon "chevron-left", class: "text-subdued" %>
+      <span class="text-subdued">
+        <%= icon "chevron-left", color: "current" %>
+      </span>
     <% end %>
 
     <% if budget.next_budget_param %>
-      <%= link_to budget_path(budget.next_budget_param) do %>
-        <%= lucide_icon "chevron-right" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "chevron-right",
+        href: budget_path(budget.next_budget_param),
+      ) %>
     <% else %>
-      <%= lucide_icon "chevron-right", class: "text-subdued" %>
+      <span class="text-subdued">
+        <%= icon "chevron-right", color: "current" %>
+      </span>
     <% end %>
   </div>
 
-  <div data-controller="menu" data-menu-placement-value="bottom-start">
-    <%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2" do %>
-      <span class="text-primary font-medium text-3xl md:text-base"><%= @budget.name %></span>
-      <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
+  <%= render MenuComponent.new(variant: "button") do |menu| %>
+    <% menu.with_button class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2"  do %>
+      <span class="text-primary font-medium text-lg lg:text-base"><%= @budget.name %></span>
+      <%= icon("chevron-down") %>
     <% end %>
 
-    <div data-menu-target="content" class="hidden z-10">
+    <% menu.with_custom_content do %>
       <%= render "budgets/picker", family: Current.family, year: budget.start_date.year %>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 
   <div class="ml-auto">
-    <% if @budget.current? %>
-      <span class="border border-secondary text-primary text-sm font-medium px-3 py-2 rounded-lg">Today</span>
-    <% else %>
-      <%= link_to "Today", budget_path(Budget.date_to_param(Date.current)), class: "btn btn--outline" %>
-    <% end %>
+    <%= render LinkComponent.new(
+        text: "Today",
+        variant: "outline",
+        href: budget_path(Budget.date_to_param(Date.current)),
+    ) %>
   </div>
 </div>
diff --git a/app/views/budgets/_budget_nav.html.erb b/app/views/budgets/_budget_nav.html.erb
index 5ad87caa..41d81a61 100644
--- a/app/views/budgets/_budget_nav.html.erb
+++ b/app/views/budgets/_budget_nav.html.erb
@@ -24,7 +24,7 @@
       <%= link_to step[:path], class: "flex items-center gap-3" do %>
         <div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
           <span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
-            <%= step[:is_complete] && !is_current ? lucide_icon("check", class: "w-4 h-4") : idx + 1 %>
+            <%= step[:is_complete] && !is_current ? icon("check", size: "sm") : idx + 1 %>
           </span>
 
           <span><%= step[:name] %></span>
diff --git a/app/views/budgets/_over_allocation_warning.html.erb b/app/views/budgets/_over_allocation_warning.html.erb
index 95381811..8d9f5913 100644
--- a/app/views/budgets/_over_allocation_warning.html.erb
+++ b/app/views/budgets/_over_allocation_warning.html.erb
@@ -1,13 +1,15 @@
 <%# locals: (budget:) %>
 
 <div class="flex flex-col gap-4 items-center justify-center h-full">
-  <%= lucide_icon "alert-triangle", class: "w-6 h-6 text-red-500" %>
+  <%= icon "alert-triangle", size: "lg", color: "destructive" %>
   <p class="text-secondary text-sm text-center">You have over-allocated your budget.  Please fix your allocations.</p>
 
-  <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-    <span class="text-primary font-medium">
-      Fix allocations
-    </span>
-    <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: "Fix allocations",
+    variant: "secondary",
+    size: "sm",
+    icon: "pencil",
+    icon_position: "right",
+    href: budget_budget_categories_path(budget)
+  ) %>
 </div>
diff --git a/app/views/budgets/_picker.html.erb b/app/views/budgets/_picker.html.erb
index aca22c0b..4b112f30 100644
--- a/app/views/budgets/_picker.html.erb
+++ b/app/views/budgets/_picker.html.erb
@@ -1,17 +1,17 @@
 <%# locals: (family:, year:) %>
 
 <%= turbo_frame_tag "budget_picker" do %>
-  <div class="bg-container shadow-border-xs p-3 rounded-xl space-y-4">
+  <div class="p-3 space-y-4">
     <div class="flex items-center gap-2 justify-between">
       <% last_month_of_previous_year = Date.new(year - 1, 12, 1) %>
 
       <% if Budget.budget_date_valid?(last_month_of_previous_year, family: family) %>
         <%= link_to picker_budgets_path(year: year - 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-secondary" %>
+          <%= icon "chevron-left" %>
         <% end %>
       <% else %>
-        <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-subdued" %>
+        <span class="p-2 flex items-center justify-center text-subdued rounded-md">
+          <%= icon "chevron-left", color: "current" %>
         </span>
       <% end %>
 
@@ -23,11 +23,11 @@
 
       <% if Budget.budget_date_valid?(first_month_of_next_year, family: family) %>
         <%= link_to picker_budgets_path(year: year + 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-secondary" %>
+          <%= icon "chevron-right" %>
         <% end %>
       <% else %>
-        <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-subdued" %>
+        <span class="p-2 flex items-center justify-center text-subdued rounded-md">
+          <%= icon "chevron-right", color: "current" %>
         </span>
       <% end %>
     </div>
@@ -38,7 +38,13 @@
         <% param_key = Budget.date_to_param(date) %>
 
         <% if Budget.budget_date_valid?(date, family: family) %>
-          <%= link_to month_name, budget_path(param_key), data: { turbo_frame: "_top" }, class: "btn btn--ghost" %>
+          <%= render LinkComponent.new(
+            variant: "ghost",
+            text: month_name,
+            href: budget_path(param_key),
+            full_width: true,
+            frame: :_top
+          ) %>
         <% else %>
           <span class="px-3 py-2 text-subdued rounded-md"><%= month_name %></span>
         <% end %>
diff --git a/app/views/budgets/edit.html.erb b/app/views/budgets/edit.html.erb
index 3728dc8c..546aa54b 100644
--- a/app/views/budgets/edit.html.erb
+++ b/app/views/budgets/edit.html.erb
@@ -21,7 +21,7 @@
 
         <% if @budget.estimated_income && @budget.estimated_spending %>
           <div class="border border-tertiary rounded-lg p-3 flex">
-            <%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
+            <%= icon "sparkles" %>
             <div class="ml-2 space-y-1 text-sm">
               <h4 class="text-primary">Autosuggest income & spending budget</h4>
               <p class="text-secondary">
@@ -29,18 +29,18 @@
               </p>
             </div>
 
-            <div class="relative inline-block select-none ml-6">
-              <%= check_box_tag :auto_fill, "1", params[:auto_fill].present?, class: "sr-only peer", data: {
-                  action: "change->budget-form#toggleAutoFill",
-                  budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
-                  budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
-                } %>
-              <label for="auto_fill" class="switch"></label>
-            </div>
+            <%= render ToggleComponent.new(
+              id: "auto_fill",
+              data: {
+                action: "change->budget-form#toggleAutoFill",
+                budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
+                budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
+              }
+            ) %>
           </div>
         <% end %>
 
-        <%= f.submit "Continue", class: "btn btn--primary w-full" %>
+        <%= f.submit "Continue" %>
       <% end %>
     </div>
   </div>
diff --git a/app/views/budgets/show.html.erb b/app/views/budgets/show.html.erb
index bd04d8ce..5d92a2f2 100644
--- a/app/views/budgets/show.html.erb
+++ b/app/views/budgets/show.html.erb
@@ -54,10 +54,12 @@
         <h2 class="text-lg font-medium">Categories</h2>
 
         <% if @budget.initialized? %>
-          <%= link_to budget_budget_categories_path(@budget), class: "btn btn--secondary flex items-center gap-2" do %>
-            <%= icon "settings-2", color: "gray" %>
-            <span>Edit</span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "Edit",
+            variant: "secondary",
+            icon: "settings-2",
+            href: budget_budget_categories_path(@budget)
+          ) %>
         <% end %>
       </div>
 
diff --git a/app/views/categories/_badge.html.erb b/app/views/categories/_badge.html.erb
index 67a42251..744ce94f 100644
--- a/app/views/categories/_badge.html.erb
+++ b/app/views/categories/_badge.html.erb
@@ -8,9 +8,8 @@
           border-color: color-mix(in srgb, <%= category.color %> 30%, white);
           color: <%= category.color %>;">
     <% if category.lucide_icon.present? %>
-      <%= lucide_icon category.lucide_icon, class: "w-4 h-4 shrink-0" %>
+      <%= icon category.lucide_icon, size: "sm", color: "current" %>
     <% end %>
     <%= category.name %>
   </span>
-
 </div>
diff --git a/app/views/categories/_category.html.erb b/app/views/categories/_category.html.erb
index f04e1e96..1b49a045 100644
--- a/app/views/categories/_category.html.erb
+++ b/app/views/categories/_category.html.erb
@@ -3,24 +3,22 @@
 <div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-container">
   <div class="flex w-full items-center gap-2.5">
     <% if category.subcategory? %>
-      <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued ml-2" %>
+      <span style="color: <%= category.color %>">
+        <%= icon "corner-down-right", size: "sm", color: "current", class: "ml-2" %>
+      </span>
     <% end %>
 
     <%= render partial: "categories/badge", locals: { category: category } %>
   </div>
+
   <div class="justify-self-end">
-    <%= contextual_menu do %>
-      <%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
 
       <% if category.transactions.any? %>
-        <%= link_to new_category_deletion_path(category),
-              class: "flex items-center w-full rounded-lg text-red-600 hover:bg-red-50 py-2 px-3 gap-2",
-              data: { turbo_frame: :modal } do %>
-          <%= lucide_icon "trash-2", class: "shrink-0 w-5 h-5" %>
-          <span class="text-sm"><%= t(".delete") %></span>
-        <% end %>
+        <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), destructive: true, data: { turbo_frame: :modal }) %>
       <% else %>
-        <%= contextual_menu_destructive_item t(".delete"), category_path(category), turbo_confirm: nil %>
+        <% menu.with_item(variant: "button", text: t(".delete"), icon: "trash-2", href: category_path(category), method: :delete) %>
       <% end %>
     <% end %>
   </div>
diff --git a/app/views/categories/_color_avatar.html.erb b/app/views/categories/_color_avatar.html.erb
index 6d2aea94..b8cde18a 100644
--- a/app/views/categories/_color_avatar.html.erb
+++ b/app/views/categories/_color_avatar.html.erb
@@ -4,5 +4,5 @@
       data-category-target="avatar"
       class="w-14 h-14 flex items-center justify-center rounded-full"
       style="background-color: color-mix(in oklab, <%= category.color %> 10%, transparent); color: <%= category.color %>">
-  <%= lucide_icon(category.lucide_icon, class: "w-8 h-8") %>
+  <%= icon(category.lucide_icon, size: "2xl", color: "current") %>
 </span>
diff --git a/app/views/categories/_form.html.erb b/app/views/categories/_form.html.erb
index 54605e1b..bb15e650 100644
--- a/app/views/categories/_form.html.erb
+++ b/app/views/categories/_form.html.erb
@@ -2,59 +2,60 @@
 
 <div data-controller="category" data-category-preset-colors-value="<%= Category::COLORS %>">
   <%= styled_form_with model: category, class: "space-y-4" do |f| %>
-    <section class="space-y-4">
-      <div class="w-fit m-auto">
+    <section class="space-y-4 ">
+      <div class="w-fit mx-auto relative">
         <%= render partial: "color_avatar", locals: { category: category } %>
+
+        <details data-category-target="details">
+          <summary class="cursor-pointer absolute -bottom-2 -right-2 flex justify-center items-center bg-gray-50 border-2 w-7 h-7 border-white rounded-full text-gray-500">
+            <%= icon("pen", size: "sm") %>
+          </summary>
+
+          <div class="fixed ml-8 mt-2 z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit">
+            <div class="flex gap-2 flex-col mb-4" data-category-target="selection" style="<%= "display:none;" if @category.subcategory? %>">
+              <div data-category-target="pickerSection"></div>
+              <h4 class="text-gray-500 text-sm">Color</h4>
+              <div class="flex gap-2 items-center" data-category-target="colorsSection">
+                <% Category::COLORS.each do |color| %>
+                  <label class="relative">
+                    <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->category#handleColorChange" } %>
+                    <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
+                  </label>
+                <% end %>
+                <label class="relative">
+                  <%= f.radio_button :color, "custom-color", class: "sr-only peer", data: { category_target: "colorPickerRadioBtn"} %>
+                  <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" data-category-target="pickerBtn" style="background: conic-gradient(red,orange,yellow,lime,green,teal,cyan,blue,indigo,purple,magenta,pink,red)"></div>
+                </label>
+              </div>
+              <div class="flex gap-2 items-center hidden flex-col" data-category-target="paletteSection">
+                <div class="flex gap-2 items-center w-full">
+                  <div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= category.color %>" data-category-target="colorPreview"></div>
+                  <%= f.text_field :color , data: { category_target: "colorInput"}, inline: true %>
+                  <%= icon "palette", size: "2xl", data: { action: "click->category#toggleSections" } %>
+                </div>
+                <div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive ">
+                  <span>Poor contrast, choose darker color or</span>
+                  <button type="button" class="underline cursor-pointer" data-action="category#autoAdjust">auto-adjust.</button>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap gap-2 justify-center flex-col w-87">
+              <h4 class="text-gray-500 text-sm">Icon</h4>
+              <div class="flex flex-wrap gap-0.5">
+                <% Category.icon_codes.each do |icon| %>
+                  <label class="relative">
+                    <%= f.radio_button :lucide_icon, icon, class: "sr-only peer", data: { action: "change->category#handleIconChange change->category#handleIconColorChange", category_target:"icon" } %>
+                    <div class="w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent">
+                      <%= icon(icon, size: "sm", color: "current") %>
+                    </div>
+                  </label>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </details>
       </div>
-      <details data-category-target="details">
-        <summary class="cursor-pointer absolute top-23 left-58.5 flex justify-center items-center bg-gray-50 border-2 w-7 h-7 border-white rounded-full text-gray-500">
-          <%= icon("pen", size: "sm") %>
-        </summary>
-
-        <div class=" absolute z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit left-66 top-24">
-          <div class="flex gap-2 flex-col mb-4" data-category-target="selection" style="<%= "display:none;" if @category.subcategory? %>">
-            <div data-category-target="pickerSection"></div>
-            <h4 class="text-gray-500 text-sm">Color</h4>
-            <div class="flex gap-2 items-center" data-category-target="colorsSection">
-              <% Category::COLORS.each do |color| %>
-                <label class="relative">
-                  <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->category#handleColorChange" } %>
-                  <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
-                </label>
-              <% end %>
-              <label class="relative">
-                <%= f.radio_button :color, "custom-color", class: "sr-only peer", data: { category_target: "colorPickerRadioBtn"} %>
-                <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" data-category-target="pickerBtn" style="background: conic-gradient(red,orange,yellow,lime,green,teal,cyan,blue,indigo,purple,magenta,pink,red)"></div>
-              </label>
-            </div>
-            <div class="flex gap-2 items-center hidden flex-col" data-category-target="paletteSection">
-              <div class="flex gap-2 items-center w-full">
-                <div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= category.color %>" data-category-target="colorPreview"></div>
-                <%= f.text_field :color , data: { category_target: "colorInput"}, inline: true %>
-                <%= lucide_icon "palette", class: "w-8 h-8 cursor-pointer hover:bg-gray-100 p-1", data: { action: "click->category#toggleSections" } %>
-              </div>
-              <div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive ">
-                <span>Poor contrast, choose darker color or</span>
-                <button type="button" class="underline cursor-pointer" data-action="category#autoAdjust">auto-adjust.</button>
-              </div>
-            </div>
-          </div>
-
-          <div class="flex flex-wrap gap-2 justify-center flex-col w-87">
-            <h4 class="text-gray-500 text-sm">Icon</h4>
-            <div class="flex flex-wrap gap-0.5">
-              <% Category.icon_codes.each do |icon| %>
-                <label class="relative">
-                  <%= f.radio_button :lucide_icon, icon, class: "sr-only peer", data: { action: "change->category#handleIconChange change->category#handleIconColorChange", category_target:"icon" } %>
-                  <div class="w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent">
-                    <%= lucide_icon icon, class: "w-6 h-6 p-1" %>
-                  </div>
-                </label>
-              <% end %>
-            </div>
-          </div>
-        </div>
-      </details>
 
       <% if category.errors.any? %>
         <%= render "shared/form_errors", model: category %>
diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb
index 83532011..d6ec5d0b 100644
--- a/app/views/categories/_menu.html.erb
+++ b/app/views/categories/_menu.html.erb
@@ -1,16 +1,15 @@
 <%# locals: (transaction:) %>
 
-<div class="relative" data-controller="menu" id="<%= dom_id(transaction, :category_menu) %>">
-  <button data-menu-target="button" class="flex cursor-pointer">
-    <%= render partial: "categories/badge", locals: { category: transaction.category } %>
-  </button>
-  <div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
-    <div class="w-80 text-sm font-semibold leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
-        <div class="p-6 flex items-center justify-center">
-          <p class="text-sm text-secondary animate-pulse"><%= t(".loading") %></p>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</div>
+<%= render MenuComponent.new(variant: "button") do |menu| %>
+  <% menu.with_button do %>
+    <% render partial: "categories/badge", locals: { category: transaction.category } %>
+  <% end %>
+
+  <% menu.with_custom_content do %>
+    <%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
+      <div class="p-6 flex items-center justify-center">
+        <p class="text-sm text-secondary animate-pulse"><%= t(".loading") %></p>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/categories/edit.html.erb b/app/views/categories/edit.html.erb
index 43daea2d..dd8eb41c 100644
--- a/app/views/categories/edit.html.erb
+++ b/app/views/categories/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit"), overflow_visible: true do %>
-  <%= render "form", category: @category, categories: @categories %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit")) %>
+  <% dialog.with_body do %>
+    <%= render "form", category: @category, categories: @categories %>
+  <% end %>
 <% end %>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index fec33344..95344043 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -2,18 +2,23 @@
   <h1 class="text-primary text-xl font-medium"><%= t(".categories") %></h1>
 
   <div class="flex items-center gap-2">
-    <%= contextual_menu do %>
-      <%= contextual_menu_destructive_item "Delete all", destroy_all_categories_path, turbo_confirm: {
-        title: "Delete all categories?",
-        body: "All of your transactions will become uncategorized and this cannot be undone.",
-        accept: "Delete all categories",
-      } %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(
+          variant: "button",
+          text: "Delete all",
+          href: destroy_all_categories_path,
+          method: :delete,
+          icon: "trash-2",
+          confirm: CustomConfirm.for_resource_deletion("All categories", high_severity: true)) %>
     <% end %>
 
-    <%= link_to new_category_path, class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
-      <%= lucide_icon "plus", class: "w-5 h-5" %>
-      <p><%= t(".new") %></p>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: t(".new"),
+      variant: "primary",
+      icon: "plus",
+      href: new_category_path,
+      frame: :modal
+    ) %>
   </div>
 </header>
 
@@ -33,12 +38,18 @@
       <div class="text-center flex flex-col items-center max-w-[500px]">
         <p class="text-sm text-secondary mb-4"><%= t(".empty") %></p>
         <div class="flex items-center gap-2">
-          <%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--primary" %>
+          <%= render ButtonComponent.new(
+            text: t(".bootstrap"),
+            href: bootstrap_categories_path,
+          ) %>
 
-          <%= link_to new_category_path, class: "btn btn--outline flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-            <%= lucide_icon("plus", class: "w-5 h-5") %>
-            <span><%= t(".new") %></span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: t(".new"),
+            variant: "outline",
+            icon: "plus",
+            href: new_category_path,
+            frame: :modal
+          ) %>
         </div>
       </div>
     </div>
diff --git a/app/views/categories/new.html.erb b/app/views/categories/new.html.erb
index 6478d94d..09ac5cd7 100644
--- a/app/views/categories/new.html.erb
+++ b/app/views/categories/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".new_category"), overflow_visible: true do %>
-  <%= render "form", category: @category, categories: @categories %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".new_category")) %>
+  <% dialog.with_body do %>
+    <%= render "form", category: @category, categories: @categories %>
+  <% end %>
 <% end %>
diff --git a/app/views/category/deletions/new.html.erb b/app/views/category/deletions/new.html.erb
index 7c337ccf..b199b880 100644
--- a/app/views/category/deletions/new.html.erb
+++ b/app/views/category/deletions/new.html.erb
@@ -1,21 +1,32 @@
-<%= modal_form_wrapper title: t(".delete_category"), subtitle: t(".explanation", category_name: @category.name) do %>
-  <%= styled_form_with url: category_deletions_path(@category),
-                       class: "space-y-4",
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".delete_category"), subtitle: t(".explanation", category_name: @category.name)) %>
+
+  <% dialog.with_body do %>
+    <%= styled_form_with url: category_deletions_path(@category),
                        data: {
                          turbo: false,
                          controller: "deletion",
-                         deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                         deletion_safe_action_class: "form-field__submit border border-transparent",
                          deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", category_name: @category.name),
                          deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", category_name: @category.name) } do |f| %>
-    <%= f.collection_select :replacement_category_id,
+      <%= f.collection_select :replacement_category_id,
                             Current.family.categories.alphabetically.without(@category),
                             :id, :name,
-                            { prompt: t(".replacement_category_prompt"), label: t(".category") },
-                            { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
+                            { prompt: t(".replacement_category_prompt"), label: t(".category"), container_class: "mb-4" },
+                            data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
 
-    <%= f.submit t(".delete_and_leave_uncategorized", category_name: @category.name),
-                 class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                 data: { deletion_target: "submitButton" } %>
+      <%= render ButtonComponent.new(
+        variant: "destructive",
+        text: t(".delete_and_leave_uncategorized", category_name: @category.name),
+        full_width: true,
+        data: { deletion_target: "destructiveSubmitButton" }
+      ) %>
+
+      <%= render ButtonComponent.new(
+        text: "Delete and reassign",
+        data: { deletion_target: "safeSubmitButton" },
+        hidden: true,
+        full_width: true
+      ) %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index c4e0affc..e9c5f993 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -15,32 +15,17 @@
       method: :patch,
       class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %>
 
-    <span class="w-5 h-5">
-      <%= lucide_icon("check", class: "w-5 h-5 text-secondary") if is_selected %>
-    </span>
+    <%= icon("check") if is_selected %>
+
     <% if category.subcategory? %>
-      <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued" %>
+      <%= icon("corner-down-right", size: "sm") %>
     <% end %>
+
     <%= render partial: "categories/badge", locals: { category: category } %>
   <% end %>
 
-  <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= link_to edit_category_path(category),
-            class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
-
-        <span><%= t(".edit") %></span>
-      <% end %>
-
-      <%= link_to new_category_deletion_path(category),
-            class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-        <span><%= t(".delete") %></span>
-      <% end %>
-    </div>
+  <%= render MenuComponent.new do |menu| %>
+    <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil-line", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
+    <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), data: { turbo_frame: :modal }, destructive: true) %>
   <% end %>
 <% end %>
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index d559de6e..6bda0159 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -3,7 +3,7 @@
     <div class="grow p-1.5">
       <div class="relative flex items-center bg-container border border-secondary rounded-lg">
         <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
-        <%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
+        <%= icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
       </div>
     </div>
     <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
@@ -22,7 +22,13 @@
         <div class="flex justify-center items-center py-12">
           <div class="text-center flex flex-col items-center max-w-[500px]">
             <p class="text-sm text-secondary font-normal mb-4"><%= t(".empty") %></p>
-            <%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--outline", data: { turbo_frame: :_top } %>
+
+            <%= render ButtonComponent.new(
+              text: t(".bootstrap"),
+              variant: "outline",
+              href: bootstrap_categories_path,
+              method: :post,
+              data: { turbo_frame: :_top }) %>
           </div>
         </div>
       <% end %>
@@ -35,7 +41,7 @@
                       data: { turbo_frame: dom_id(@transaction.entry) },
                       params: { entry: { entryable_type: "Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
                       class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100" do %>
-          <%= lucide_icon "minus", class: "w-5 h-5" %>
+          <%= icon("minus") %>
 
           <%= t(".clear") %>
         <% end %>
@@ -45,7 +51,7 @@
         <%= link_to new_transaction_transfer_match_path(@transaction.entry),
                   class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100",
                   data: { turbo_frame: "modal" } do %>
-          <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
+          <%= icon("refresh-cw") %>
 
           <p>Match transfer/payment</p>
         <% end %>
@@ -66,7 +72,9 @@
 
         <p>One-time <%= @transaction.entry.amount.negative? ? "income" : "expense" %></p>
 
-        <%= lucide_icon "asterisk", class: "w-5 h-5 shrink-0 text-orange-500 ml-auto" %>
+        <span class="text-orange-500 ml-auto">
+          <%= icon("asterisk", color: "current") %>
+        </span>
       </div>
     </div>
   </div>
diff --git a/app/views/chats/_ai_consent.html.erb b/app/views/chats/_ai_consent.html.erb
index 25907f3f..960aa6b3 100644
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -1,33 +1,26 @@
-<div class="flex flex-col items-center justify-start h-full p-6 text-center">
-  <div class="border border-secondary rounded-lg p-4 bg-container">
-    <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
-      <%= icon("sparkles") %>
-    </div>
-
-    <h3 class="text-lg font-medium text-primary mb-2">Enable Personal Finance AI</h3>
-
-    <p class="text-gray-600 mb-6 text-sm">
-      <% if Current.user.ai_available? %>
-        Our personal finance AI can help answer questions about your finances and provide insights based on your data.
-        To use this feature, you'll need to explicitly enable it.
-      <% else %>
-        To use the AI assistant, you need to set the <code class="bg-surface-inset px-1 py-0.5 rounded font-mono text-xs">OPENAI_ACCESS_TOKEN</code>
-        environment variable in your self-hosted instance.
-      <% end %>
-    </p>
-
-    <% unless self_hosted? %>
-      <p class="text-gray-600 mb-6 text-sm">
-        NOTE: During beta testing, we'll be monitoring usage and AI conversations to improve the assistant.
-      </p>
-    <% end %>
-
-    <% if Current.user.ai_available? %>
-      <%= form_with url: user_path(Current.user), method: :patch, class: "w-full", data: { turbo: false } do |form| %>
-        <%= form.hidden_field "user[ai_enabled]", value: true %>
-        <%= form.hidden_field "user[redirect_to]", value: "home" %>
-        <%= form.submit "Enable AI Assistant", class: "cursor-pointer hover:bg-black w-full py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
-      <% end %>
-    <% end %>
+<div class="rounded-lg p-4 bg-container shadow-border-xs">
+  <div class="flex justify-center">
+    <%= render "chats/ai_avatar" %>
   </div>
+
+  <h3 class="text-sm font-medium text-primary mb-1 -mt-2 text-center">Enable Maybe AI</h3>
+
+  <p class="text-gray-600 mb-4 text-sm text-center">
+    <% if Current.user.ai_available? %>
+      Maybe AI can answer financial questions and provide insights based on your data. To use this feature you'll need to explicitly enable it.
+    <% else %>
+      To use the AI assistant, you need to set the <code class="bg-surface-inset px-1 py-0.5 rounded font-mono text-xs">OPENAI_ACCESS_TOKEN</code>
+      environment variable in your self-hosted instance.
+    <% end %>
+  </p>
+
+  <% if Current.user.ai_available? %>
+    <%= form_with url: user_path(Current.user), method: :patch, class: "w-full", data: { turbo: false } do |form| %>
+      <%= form.hidden_field "user[ai_enabled]", value: true %>
+      <%= form.hidden_field "user[redirect_to]", value: "home" %>
+      <%= form.submit "Enable Maybe AI", class: "cursor-pointer hover:bg-black w-full py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+    <% end %>
+  <% end %>
+
+  <p class="text-xs text-secondary text-center mt-2">Disable anytime.  All data sent to our LLM providers is anonymized.</p>
 </div>
diff --git a/app/views/chats/_chat.html.erb b/app/views/chats/_chat.html.erb
index aa0a915b..79e02b73 100644
--- a/app/views/chats/_chat.html.erb
+++ b/app/views/chats/_chat.html.erb
@@ -9,8 +9,14 @@
     </p>
   </div>
 
-  <%= contextual_menu icon: "more-vertical" do %>
-    <%= contextual_menu_item("Edit chat", url: edit_chat_path(chat), icon: "pencil", turbo_frame: dom_id(chat, :title)) %>
-    <%= contextual_menu_destructive_item("Delete chat", chat_path(chat)) %>
+  <%= render MenuComponent.new(icon_vertical: true) do |menu| %>
+    <% menu.with_item(variant: "link", text: "Edit chat", href: edit_chat_path(chat), icon: "pencil", frame: dom_id(chat, "title")) %>
+    <% menu.with_item(
+      variant: "button",
+      text: "Delete chat",
+      href: chat_path(chat),
+      icon: "trash-2",
+      method: :delete,
+      confirm: CustomConfirm.for_resource_deletion("Chat")) %>
   <% end %>
 <% end %>
diff --git a/app/views/chats/_chat_nav.html.erb b/app/views/chats/_chat_nav.html.erb
index 5ef56402..47e56c8e 100644
--- a/app/views/chats/_chat_nav.html.erb
+++ b/app/views/chats/_chat_nav.html.erb
@@ -13,12 +13,23 @@
     </div>
   </div>
 
-  <%= contextual_menu icon: "more-vertical", id: "chat-menu" do %>
-    <%= contextual_menu_item "Start new chat", url: new_chat_path, icon: "plus" %>
+  <%= render MenuComponent.new(icon_vertical: true) do |menu| %>
+    <% menu.with_item(variant: "link", text: "Start new chat", href: new_chat_path, icon: "plus") %>
 
     <% unless chat.new_record? %>
-      <%= contextual_menu_item "Edit chat title", url: edit_chat_path(chat, ctx: "chat"), icon: "pencil", turbo_frame: dom_id(chat, "title") %>
-      <%= contextual_menu_destructive_item "Delete chat", chat_path(chat), turbo_confirm: "Are you sure you want to delete this chat?" %>
+      <% menu.with_item(
+        variant: "link",
+        text: "Edit chat title",
+        href: edit_chat_path(chat, ctx: "chat"),
+        icon: "pencil", data: { turbo_frame: dom_id(chat, "title") }) %>
+
+      <% menu.with_item(
+        variant: "button",
+        text: "Delete chat",
+        href: chat_path(chat),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion("Chat")) %>
     <% end %>
   <% end %>
 </nav>
diff --git a/app/views/chats/_error.html.erb b/app/views/chats/_error.html.erb
index 94fb2d2a..d72dd13d 100644
--- a/app/views/chats/_error.html.erb
+++ b/app/views/chats/_error.html.erb
@@ -10,8 +10,9 @@
   <div class="flex items-center justify-between gap-2">
     <p class="text-xs text-red-500">Failed to generate response.  Please try again.</p>
 
-    <%= button_to retry_chat_path(chat), method: :post, class: "btn btn--primary" do %>
-      <span>Retry</span>
-    <% end %>
+    <%= render ButtonComponent.new(
+      text: "Retry",
+      href: retry_chat_path(chat),
+    ) %>
   </div>
 </div>
diff --git a/app/views/chats/index.html.erb b/app/views/chats/index.html.erb
index 277a9b84..9a95fbfb 100644
--- a/app/views/chats/index.html.erb
+++ b/app/views/chats/index.html.erb
@@ -1,31 +1,30 @@
-<%= turbo_frame_tag chat_frame do %>
-  <div class="flex flex-col h-full md:p-4">
-    <nav class="mb-6">
-      <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
-      <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
-        <%= icon("arrow-left", color: "gray" ) %>
-      <% end %>
-    </nav>
-
-    <div class="grow flex flex-col">
-      <h1 class="text-xl font-medium mb-6">Chats</h1>
-
+<div data-controller="chat hotkey">
+  <%= turbo_frame_tag chat_frame do %>
+    <div class="flex flex-col h-full md:p-4">
       <% if @chats.any? %>
-        <div class="space-y-2 px-0.5">
-          <%= render @chats %>
-        </div>
-      <% else %>
-        <div class="text-center py-12 bg-container rounded-lg border border-primary">
-          <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
-            <%= icon("message-square", size: "lg") %>
-          </div>
-          <h3 class="text-lg font-medium text-primary mb-1">No chats yet</h3>
-          <p class="text-gray-500 mb-4">Start a new conversation with the AI assistant</p>
-        </div>
-        <div class="mt-auto p-4 lg:mt-auto">
-          <%= render "messages/chat_form", chat: nil %>
-        </div>
+        <nav class="mb-6">
+          <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
+          <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
+            <%= icon("arrow-left", color: "gray" ) %>
+          <% end %>
+        </nav>
       <% end %>
+
+      <div class="grow flex flex-col">
+        <% if @chats.any? %>
+          <h1 class="text-xl font-medium mb-6">Chats</h1>
+          <div class="space-y-2 px-0.5">
+            <%= render @chats %>
+          </div>
+        <% else %>
+          <h1 class="sr-only">Chats</h1>
+          <div class="mt-auto py-8">
+            <%= render "chats/ai_greeting" %>
+          </div>
+
+          <%= render "messages/chat_form" %>
+        <% end %>
+      </div>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>
diff --git a/app/views/chats/show.html.erb b/app/views/chats/show.html.erb
index 341eca01..cb52b632 100644
--- a/app/views/chats/show.html.erb
+++ b/app/views/chats/show.html.erb
@@ -1,35 +1,38 @@
-<%= turbo_frame_tag chat_frame do %>
-  <%= turbo_stream_from @chat %>
+<div data-controller="chat hotkey">
+  <%= turbo_frame_tag chat_frame do %>
+    <%= turbo_stream_from @chat %>
 
-  <h1 class="sr-only"><%= @chat.title %></h1>
+    <h1 class="sr-only"><%= @chat.title %></h1>
 
-  <div class="flex flex-col h-full">
-    <div class="md:p-4">
-      <%= render "chats/chat_nav", chat: @chat %>
-    </div>
+    <div class="flex flex-col h-full">
+      <div class="md:p-4">
+        <%= render "chats/chat_nav", chat: @chat %>
+      </div>
 
-    <div id="messages" class="grow overflow-y-auto p-4 space-y-6" data-chat-target="messages">
-      <% if @chat.conversation_messages.any? %>
-        <% @chat.conversation_messages.ordered.each do |message| %>
-          <%= render message %>
+      <div id="messages" class="grow overflow-y-auto p-4 space-y-6 pb-24 lg:pb-4" data-chat-target="messages">
+        <% if @chat.conversation_messages.any? %>
+          <% @chat.conversation_messages.ordered.each do |message| %>
+            <%= render message %>
+          <% end %>
+        <% else %>
+          <div class="mt-auto">
+            <%= render "chats/ai_greeting", context: "chat" %>
+          </div>
         <% end %>
-      <% else %>
-        <div class="mt-auto">
-          <%= render "chats/ai_greeting", context: "chat" %>
-        </div>
-      <% end %>
 
-      <% if params[:thinking].present? %>
-        <%= render "chats/thinking_indicator", chat: @chat %>
-      <% end %>
+        <% if params[:thinking].present? %>
+          <%= render "chats/thinking_indicator", chat: @chat %>
+        <% end %>
 
-      <% if @chat.error.present? && @chat.needs_assistant_response? %>
-        <%= render "chats/error", chat: @chat %>
-      <% end %>
+        <% if @chat.error.present? && @chat.needs_assistant_response? %>
+          <%= render "chats/error", chat: @chat %>
+        <% end %>
+      </div>
+
+      <%# DESKTOP - Chat form %>
+      <div class="p-4 lg:mt-auto fixed lg:static left-0 bottom-16 w-full bg-surface">
+        <%= render "messages/chat_form", chat: @chat %>
+      </div>
     </div>
-
-    <div class="p-4 lg:mt-auto">
-      <%= render "messages/chat_form", chat: @chat %>
-    </div>
-  </div>
-<% end %>
+  <% end %>
+</div>
diff --git a/app/views/credit_cards/_overview.html.erb b/app/views/credit_cards/_overview.html.erb
index 85ce6527..fec910e0 100644
--- a/app/views/credit_cards/_overview.html.erb
+++ b/app/views/credit_cards/_overview.html.erb
@@ -27,5 +27,10 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= link_to "Edit account details", edit_credit_card_path(account), class: "btn btn--ghost", data: { turbo_frame: :modal } %>
+  <%= render LinkComponent.new(
+    text: "Edit account details",
+    variant: "ghost",
+    href: edit_credit_card_path(account),
+    frame: :modal
+  ) %>
 </div>
diff --git a/app/views/credit_cards/edit.html.erb b/app/views/credit_cards/edit.html.erb
index fc97a7a8..f30f68a0 100644
--- a/app/views/credit_cards/edit.html.erb
+++ b/app/views/credit_cards/edit.html.erb
@@ -1,3 +1,7 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: credit_card_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: credit_card_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/credit_cards/new.html.erb b/app/views/credit_cards/new.html.erb
index 5b35dce1..0f7d4fcd 100644
--- a/app/views/credit_cards/new.html.erb
+++ b/app/views/credit_cards/new.html.erb
@@ -1,7 +1,10 @@
 <% if params[:step] == "method_select" %>
   <%= render "accounts/new/method_selector", path: new_credit_card_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
 <% else %>
-  <%= modal_form_wrapper title: t(".title") do %>
-    <%= render "credit_cards/form", account: @account, url: credit_cards_path %>
+  <%= render DialogComponent.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+    <% dialog.with_body do %>
+      <%= render "credit_cards/form", account: @account, url: credit_cards_path %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/cryptos/edit.html.erb b/app/views/cryptos/edit.html.erb
index 5f5b4981..6b7812c2 100644
--- a/app/views/cryptos/edit.html.erb
+++ b/app/views/cryptos/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: crypto_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: crypto_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/cryptos/new.html.erb b/app/views/cryptos/new.html.erb
index f4979c6e..5587cfae 100644
--- a/app/views/cryptos/new.html.erb
+++ b/app/views/cryptos/new.html.erb
@@ -1,7 +1,10 @@
 <% if params[:step] == "method_select" %>
   <%= render "accounts/new/method_selector", path: new_crypto_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
 <% else %>
-  <%= modal_form_wrapper title: t(".title") do %>
-    <%= render "cryptos/form", account: @account, url: cryptos_path %>
+  <%= render DialogComponent.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+    <% dialog.with_body do %>
+      <%= render "form", account: @account, url: cryptos_path %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/depositories/edit.html.erb b/app/views/depositories/edit.html.erb
index 0c61040d..03d3e668 100644
--- a/app/views/depositories/edit.html.erb
+++ b/app/views/depositories/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: depository_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: depository_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/depositories/new.html.erb b/app/views/depositories/new.html.erb
index 3ed099b3..4f08e3c9 100644
--- a/app/views/depositories/new.html.erb
+++ b/app/views/depositories/new.html.erb
@@ -1,7 +1,10 @@
 <% if params[:step] == "method_select" %>
   <%= render "accounts/new/method_selector", path: new_depository_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
 <% else %>
-  <%= modal_form_wrapper title: t(".title") do %>
-    <%= render "depositories/form", account: @account, url: depositories_path %>
+  <%= render DialogComponent.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+    <% dialog.with_body do %>
+      <%= render "depositories/form", account: @account, url: depositories_path %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/entries/_selection_bar.html.erb b/app/views/entries/_selection_bar.html.erb
index 8f0a98f3..1c633bde 100644
--- a/app/views/entries/_selection_bar.html.erb
+++ b/app/views/entries/_selection_bar.html.erb
@@ -7,8 +7,8 @@
 
   <div class="flex items-center gap-1 text-secondary">
     <%= form_with url: transactions_bulk_deletion_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
-      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
-        <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-inverse flex items-center justify-center rounded-md" title="Delete">
+        <%= icon "trash-2", class: "group-hover:text-inverse" %>
       </button>
     <% end %>
   </div>
diff --git a/app/views/family_merchants/_family_merchant.html.erb b/app/views/family_merchants/_family_merchant.html.erb
index ec1cc1fd..f47d64c9 100644
--- a/app/views/family_merchants/_family_merchant.html.erb
+++ b/app/views/family_merchants/_family_merchant.html.erb
@@ -15,17 +15,15 @@
     </p>
   </div>
   <div class="justify-self-end">
-    <%= contextual_menu do %>
-      <%= contextual_menu_modal_action_item t(".edit"), edit_family_merchant_path(family_merchant), icon: "pencil", turbo_frame: "modal" %>
-
-      <%= contextual_menu_destructive_item "Delete",
-                                             family_merchant_path(family_merchant),
-                                             turbo_frame: "_top",
-                                             turbo_confirm: family_merchant.transactions.any? ? {
-                                               title: "Delete #{family_merchant.name}?",
-                                               body: "This will remove this merchant from all transactions it has been assigned to.",
-                                               accept: "Delete"
-                                             } : nil %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(variant: "link", text: "Edit", href: edit_family_merchant_path(family_merchant), icon: "pencil", data: { turbo_frame: "modal" }) %>
+      <% menu.with_item(
+        variant: "button",
+        text: "Delete",
+        href: family_merchant_path(family_merchant),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion(family_merchant.name)) %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/family_merchants/_form.html.erb b/app/views/family_merchants/_form.html.erb
index 34306679..db5bd085 100644
--- a/app/views/family_merchants/_form.html.erb
+++ b/app/views/family_merchants/_form.html.erb
@@ -1,11 +1,13 @@
+<%# locals: (family_merchant:) %>
+
 <div data-controller="color-avatar">
-  <%= styled_form_with model: @merchant, class: "space-y-4" do |f| %>
+  <%= styled_form_with model: family_merchant, class: "space-y-4" do |f| %>
     <section class="space-y-4">
-      <% if @merchant.errors.any? %>
-        <%= render "shared/form_errors", model: @merchant %>
+      <% if family_merchant.errors.any? %>
+        <%= render "shared/form_errors", model: family_merchant %>
       <% end %>
       <div class="w-fit m-auto mb-4">
-        <%= render partial: "shared/color_avatar", locals: { name: @merchant.name, color: @merchant.color } %>
+        <%= render partial: "shared/color_avatar", locals: { name: family_merchant.name, color: family_merchant.color } %>
       </div>
       <div class="flex gap-2 items-center justify-center">
         <% FamilyMerchant::COLORS.each do |color| %>
diff --git a/app/views/family_merchants/edit.html.erb b/app/views/family_merchants/edit.html.erb
index a8776d3a..044ae422 100644
--- a/app/views/family_merchants/edit.html.erb
+++ b/app/views/family_merchants/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "form", merchant: @merchant %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", family_merchant: @family_merchant %>
+  <% end %>
 <% end %>
diff --git a/app/views/family_merchants/index.html.erb b/app/views/family_merchants/index.html.erb
index 4f72e455..944b4bb9 100644
--- a/app/views/family_merchants/index.html.erb
+++ b/app/views/family_merchants/index.html.erb
@@ -1,10 +1,12 @@
 <header class="flex items-center justify-between">
   <h1 class="text-primary text-xl font-medium">Merchants</h1>
 
-  <%= link_to new_family_merchant_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: "modal" } do %>
-    <%= lucide_icon("plus", class: "w-5 h-5") %>
-    <p class="text-sm font-medium">New merchant</p>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: "New merchant",
+    variant: "primary",
+    href: new_family_merchant_path,
+    frame: :modal
+  ) %>
 </header>
 
 <div class="bg-container shadow-border-xs rounded-xl p-4">
@@ -26,10 +28,13 @@
     <div class="flex justify-center items-center py-20">
       <div class="text-center flex flex-col items-center max-w-[300px]">
         <p class="text-primary mb-1 font-medium text-sm"><%= t(".empty") %></p>
-        <%= link_to new_family_merchant_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
-          <%= lucide_icon("plus", class: "w-5 h-5") %>
-          <span><%= t(".new") %></span>
-        <% end %>
+
+        <%= render LinkComponent.new(
+          text: t(".new"),
+          icon: "plus",
+          href: new_family_merchant_path,
+          frame: :modal
+        ) %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/family_merchants/new.html.erb b/app/views/family_merchants/new.html.erb
index a8776d3a..fa9da88f 100644
--- a/app/views/family_merchants/new.html.erb
+++ b/app/views/family_merchants/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "form", merchant: @merchant %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", family_merchant: @merchant %>
+  <% end %>
 <% end %>
diff --git a/app/views/holdings/_cash.html.erb b/app/views/holdings/_cash.html.erb
index 235b5128..a279d9ab 100644
--- a/app/views/holdings/_cash.html.erb
+++ b/app/views/holdings/_cash.html.erb
@@ -4,7 +4,12 @@
 
 <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4">
   <div class="col-span-4 flex items-center gap-4">
-    <%= render "shared/circle_logo", name: currency.iso_code %>
+    <%= render FilledIconComponent.new(
+      variant: :text,
+      text: currency.symbol,
+      rounded: true,
+      size: "lg"
+    ) %>
 
     <div class="space-y-0.5">
       <%= tag.p t(".brokerage_cash"), class: "text-primary" %>
diff --git a/app/views/holdings/_missing_price_tooltip.html.erb b/app/views/holdings/_missing_price_tooltip.html.erb
index 933a4355..e24fa310 100644
--- a/app/views/holdings/_missing_price_tooltip.html.erb
+++ b/app/views/holdings/_missing_price_tooltip.html.erb
@@ -1,6 +1,6 @@
 <div data-controller="tooltip" data-tooltip-cross-axis-value="50">
   <div class="flex items-center gap-1 text-warning">
-    <%= lucide_icon "info", class: "w-4 h-4 shrink-0" %>
+    <%= icon "info", size: "sm", color: "current" %>
     <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
   </div>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
diff --git a/app/views/holdings/index.html.erb b/app/views/holdings/index.html.erb
index 7da9cd4c..2fcd0714 100644
--- a/app/views/holdings/index.html.erb
+++ b/app/views/holdings/index.html.erb
@@ -6,7 +6,9 @@
                   id: dom_id(@account, "new_trade"),
                   data: { turbo_frame: :modal },
                   class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
+        <span class="text-primary">
+          <%= icon("plus", color: "current") %>
+        </span>
         <%= tag.span t(".new_holding"), class: "text-sm" %>
       <% end %>
     </div>
diff --git a/app/views/holdings/show.html.erb b/app/views/holdings/show.html.erb
index f536da9c..19e4b504 100644
--- a/app/views/holdings/show.html.erb
+++ b/app/views/holdings/show.html.erb
@@ -1,20 +1,17 @@
-<%= drawer do %>
-  <div class="space-y-4">
-    <header class="flex justify-between">
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <div class="flex items-center justify-between">
       <div>
         <%= tag.h3 @holding.name, class: "text-2xl font-medium text-primary" %>
         <%= tag.p @holding.ticker, class: "text-sm text-secondary" %>
       </div>
 
       <%= image_tag "https://logo.synthfinance.com/ticker/#{@holding.ticker}", loading: "lazy", class: "w-9 h-9 rounded-full" %>
-    </header>
-
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4><%= t(".overview") %></h4>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    </div>
+  <% end %>
 
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <dl class="space-y-3 px-3 py-2">
           <div class="flex items-center justify-between text-sm">
@@ -45,14 +42,9 @@
           </div>
         </dl>
       </div>
-    </details>
-
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4><%= t(".history") %></h4>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% end %>
 
+    <% dialog.with_section(title: t(".history"), open: true) do %>
       <div class="space-y-2">
         <div class="px-3 py-4">
           <% if @holding.trades.any? %>
@@ -85,15 +77,10 @@
           <% end %>
         </div>
       </div>
-    </details>
+    <% end %>
 
     <% unless @holding.account.plaid_account_id.present? %>
-      <details class="group space-y-2" open>
-        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-          <h4><%= t(".settings") %></h4>
-          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-        </summary>
-
+      <% dialog.with_section(title: t(".settings"), open: true) do %>
         <div class="pb-4">
           <div class="flex items-center justify-between gap-2 p-3">
             <div class="text-sm space-y-1">
@@ -108,7 +95,7 @@
                 data: { turbo_confirm: true } %>
           </div>
         </div>
-      </details>
+      <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/impersonation_sessions/_approval_bar.html.erb b/app/views/impersonation_sessions/_approval_bar.html.erb
index 7ab60104..b8690c74 100644
--- a/app/views/impersonation_sessions/_approval_bar.html.erb
+++ b/app/views/impersonation_sessions/_approval_bar.html.erb
@@ -2,9 +2,9 @@
 <% in_progress_session = Current.true_user.impersonated_support_sessions.in_progress.first %>
 
 <div class="sticky top-0 left-0 w-full bg-black flex items-center justify-between font-mono">
-  <div class="flex items-center bg-red-600 px-6 py-4">
-    <%= lucide_icon "alert-triangle", class: "w-6 h-6 text-white mr-2" %>
-    <span class="text-white font-semibold uppercase">Access <%= in_progress_session.present? ? "Session" : "Request" %></span>
+  <div class="flex items-center bg-red-600 text-inverse px-6 py-4">
+    <%= icon "alert-triangle", size: "lg", color: "current", class: "mr-2" %>
+    <span class="text-inverse font-semibold uppercase">Access <%= in_progress_session.present? ? "Session" : "Request" %></span>
   </div>
   <div class="flex items-center space-x-2 px-2 py-2 text-white gap-4">
     <% if pending_session.present? %>
diff --git a/app/views/impersonation_sessions/_super_admin_bar.html.erb b/app/views/impersonation_sessions/_super_admin_bar.html.erb
index 57bfa825..a09a8250 100644
--- a/app/views/impersonation_sessions/_super_admin_bar.html.erb
+++ b/app/views/impersonation_sessions/_super_admin_bar.html.erb
@@ -1,7 +1,7 @@
 <div class="sticky top-0 left-0 w-full bg-black flex items-center justify-between font-mono">
   <div class="flex items-center bg-red-600 px-6 py-4">
-    <%= lucide_icon "alert-triangle", class: "w-6 h-6 text-white mr-2" %>
-    <span class="text-white font-semibold uppercase">Super Admin</span>
+    <%= icon "alert-triangle", size: "lg", color: "current", class: "mr-2" %>
+    <span class="text-inverse font-semibold uppercase">Super Admin</span>
   </div>
   <div>
     <%= link_to "Jobs", sidekiq_web_url, class: "text-white underline hover:text-gray-100" %>
diff --git a/app/views/import/cleans/show.html.erb b/app/views/import/cleans/show.html.erb
index efce906c..1412cb5e 100644
--- a/app/views/import/cleans/show.html.erb
+++ b/app/views/import/cleans/show.html.erb
@@ -13,18 +13,24 @@
   <% if @import.cleaned? %>
     <div class="bg-container border border-tertiary rounded-lg p-3 flex flex-col md:flex-row items-start md:items-center justify-between gap-2 md:gap-0">
       <div class="flex items-center gap-2">
-        <%= lucide_icon "check-circle", class: "w-4 h-4 text-green-500" %>
-        <p class="text-green-500 text-sm md:text-base">Your data has been cleaned</p>
+        <%= icon "check-circle", size: "sm", color: "success" %>
+        <p class="text-success text-sm md:text-base">Your data has been cleaned</p>
       </div>
 
-      <%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary w-full md:w-auto" %>
+      <%= render LinkComponent.new(
+        text: "Next step",
+        variant: "primary",
+        href: import_confirm_path(@import),
+        frame: :_top,
+        class: "w-full md:w-auto"
+      ) %>
     </div>
   <% else %>
     <div class="bg-container border border-tertiary rounded-lg p-3 flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-0">
       <div class="flex items-center gap-2">
-        <%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500 flex-shrink-0" %>
-        <p class="text-red-500 text-sm hidden md:block"><%= t(".errors_notice") %></p>
-        <p class="text-red-500 text-sm md:hidden"><%= t(".errors_notice_mobile") %></p>
+        <%= icon "alert-triangle", size: "sm", color: "destructive" %>
+        <p class="text-destructive text-sm hidden md:block"><%= t(".errors_notice") %></p>
+        <p class="text-destructive text-sm md:hidden"><%= t(".errors_notice_mobile") %></p>
       </div>
 
       <div class="flex justify-center w-full md:w-auto">
diff --git a/app/views/import/configurations/_account_import.html.erb b/app/views/import/configurations/_account_import.html.erb
index 7f6ff6f2..28096ff9 100644
--- a/app/views/import/configurations/_account_import.html.erb
+++ b/app/views/import/configurations/_account_import.html.erb
@@ -6,5 +6,5 @@
   <%= form.select :amount_col_label, import.csv_headers, { include_blank: "Leave empty", label: "Balance" }, required: true %>
   <%= form.select :currency_col_label, import.csv_headers, { include_blank: "Default", label: "Currency" } %>
 
-  <%= form.submit "Apply configuration", class: "w-full btn btn--primary", disabled: import.complete? %>
+  <%= form.submit "Apply configuration", disabled: import.complete? %>
 <% end %>
diff --git a/app/views/import/configurations/_mint_import.html.erb b/app/views/import/configurations/_mint_import.html.erb
index e1271c4a..4fdbe698 100644
--- a/app/views/import/configurations/_mint_import.html.erb
+++ b/app/views/import/configurations/_mint_import.html.erb
@@ -1,7 +1,9 @@
 <%# locals: (import:) %>
 
 <div class="flex items-center justify-between border border-secondary rounded-lg bg-green-500/5 p-5 gap-4 mb-4">
-  <%= lucide_icon("check-circle", class: "w-5 h-5 shrink-0 text-green-500") %>
+  <span class="text-green-500">
+    <%= icon("check-circle", color: "current") %>
+  </span>
   <p class="text-sm text-primary italic">We have pre-configured your Mint import for you. Please proceed to the next step.</p>
 </div>
 
@@ -29,5 +31,5 @@
   <%= form.select :category_col_label, import.csv_headers, { include_blank: "Leave empty", label: "Category (optional)" }, disabled: import.complete? %>
   <%= form.select :tags_col_label, import.csv_headers, { include_blank: "Leave empty", label: "Tags (optional)" }, disabled: import.complete? %>
 
-  <%= form.submit "Apply configuration", class: "w-full btn btn--primary", disabled: import.complete? %>
+  <%= form.submit "Apply configuration", disabled: import.complete? %>
 <% end %>
diff --git a/app/views/import/configurations/_trade_import.html.erb b/app/views/import/configurations/_trade_import.html.erb
index 8231e9cf..007bf34b 100644
--- a/app/views/import/configurations/_trade_import.html.erb
+++ b/app/views/import/configurations/_trade_import.html.erb
@@ -36,5 +36,5 @@
     <% end %>
   </div>
 
-  <%= form.submit "Apply configuration", class: "w-full btn btn--primary", disabled: import.complete? %>
+  <%= form.submit "Apply configuration", disabled: import.complete? %>
 <% end %>
diff --git a/app/views/import/configurations/_transaction_import.html.erb b/app/views/import/configurations/_transaction_import.html.erb
index 9181f97f..84301d69 100644
--- a/app/views/import/configurations/_transaction_import.html.erb
+++ b/app/views/import/configurations/_transaction_import.html.erb
@@ -107,7 +107,5 @@
                   import.csv_headers,
                   { include_blank: "Leave empty", label: "Notes" } %>
 
-  <%= form.submit "Apply configuration",
-                  class: "w-full btn btn--primary",
-                  disabled: import.complete? %>
+  <%= form.submit "Apply configuration", disabled: import.complete? %>
 <% end %>
diff --git a/app/views/import/configurations/show.html.erb b/app/views/import/configurations/show.html.erb
index d061b692..89e53e07 100644
--- a/app/views/import/configurations/show.html.erb
+++ b/app/views/import/configurations/show.html.erb
@@ -18,8 +18,8 @@
       <p class="text-sm text-secondary">We found a configuration from a previous import for this account.  Would you like to apply it to this import?</p>
 
       <div class="mt-4 flex gap-2 items-center">
-        <%= link_to "Manually configure", import_configuration_path(@import), class: "btn btn--outline" %>
-        <%= button_to "Apply template", apply_template_import_path(@import), class: "btn btn--primary", method: :put, data: { turbo_frame: :_top } %>
+        <%= render LinkComponent.new(text: "Manually configure", href: import_configuration_path(@import), variant: "outline") %>
+        <%= render ButtonComponent.new(text: "Apply template", href: apply_template_import_path(@import), method: :put, data: { turbo_frame: :_top }) %>
       </div>
     </div>
   </div>
diff --git a/app/views/import/confirms/_mappings.html.erb b/app/views/import/confirms/_mappings.html.erb
index 76e353be..2fcb14ac 100644
--- a/app/views/import/confirms/_mappings.html.erb
+++ b/app/views/import/confirms/_mappings.html.erb
@@ -8,18 +8,29 @@
     <% if import.requires_account? %>
       <div class="w-full max-w-full overflow-hidden mb-4">
         <div class="overflow-x-auto">
-          <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-red-100 border border-red-200 rounded-lg w-[650px] min-w-0">
+          <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-red-100 border border-red-200 rounded-lg w-[650px] min-w-0 mx-auto">
             <%= tag.p t(".no_accounts"), class: "text-sm" %>
-            <%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
+
+            <%= render LinkComponent.new(
+              text: "Create account",
+              variant: "primary",
+              href: new_account_path(return_to: import_confirm_path(import)),
+              frame: :modal
+            ) %>
           </div>
         </div>
       </div>
     <% elsif import.has_unassigned_account? %>
       <div class="w-full max-w-full overflow-hidden mb-4">
         <div class="overflow-x-auto">
-          <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-yellow-100 border border-yellow-200 rounded-lg w-[650px] min-w-0">
+          <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-yellow-100 border border-yellow-200 rounded-lg w-[650px] min-w-0 mx-auto">
             <%= tag.p t(".unassigned_account"), class: "text-sm" %>
-            <%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
+            <%= render LinkComponent.new(
+              text: t(".create_account"),
+              variant: "primary",
+              href: new_account_path(return_to: import_confirm_path(import)),
+              frame: :modal
+            ) %>
           </div>
         </div>
       </div>
@@ -29,7 +40,7 @@
   <div class="space-y-4 w-full max-w-full">
     <div class="w-full max-w-full overflow-hidden">
       <div class="overflow-x-auto">
-        <div class="bg-container-inset rounded-xl p-1 space-y-1 w-[650px] min-w-0">
+        <div class="bg-container-inset rounded-xl p-1 space-y-1 w-[650px] min-w-0 mx-auto">
           <div class="grid grid-cols-3 gap-2 text-xs font-medium text-secondary uppercase px-5 py-3">
             <p><%= t(".csv_mapping_label", mapping: mapping_label(mapping_class)) %></p>
             <p><%= t(".maybe_mapping_label", mapping: mapping_label(mapping_class)) %></p>
@@ -48,10 +59,14 @@
     </div>
 
     <div class="flex justify-center w-full">
-      <%= link_to is_last_step ? import_path(import) : url_for(step: step_idx + 2), class: "btn btn--primary w-full md:w-36 flex items-center justify-between gap-2" do %>
-        <span>Next</span>
-        <%= lucide_icon "arrow-right", class: "w-5 h-5" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        text: "Next",
+        variant: "primary",
+        href: is_last_step ? import_path(import) : url_for(step: step_idx + 2),
+        icon: "arrow-right",
+        icon_position: "right",
+        class: "w-full md:w-auto"
+      ) %>
     </div>
   </div>
 </div>
diff --git a/app/views/import/rows/_form.html.erb b/app/views/import/rows/_form.html.erb
index 43521eb6..b5057d63 100644
--- a/app/views/import/rows/_form.html.erb
+++ b/app/views/import/rows/_form.html.erb
@@ -28,10 +28,10 @@
                 disabled: row.import.complete? %>
 
           <% if !cell_is_valid?(row, key) %>
-            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden"
+            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-destructive md:hidden"
                   data-action="click->mobile-cell-interaction#toggleErrorMessage"
-                  data-mobile-cell-interaction-target="errorIcon">
-              <%= lucide_icon "alert-circle", class: "w-4 h-4" %>
+              data-mobile-cell-interaction-target="errorIcon">
+              <%= icon "alert-circle", size: "sm", color: "destructive" %>
             </span>
 
             <div class="absolute left-4 right-4 bottom-full mb-2 p-2 bg-red-50 border border-red-200 rounded-lg shadow-lg text-xs text-red-600 hidden md:hidden z-20"
diff --git a/app/views/import/uploads/show.html.erb b/app/views/import/uploads/show.html.erb
index 93b6ebe2..9f523673 100644
--- a/app/views/import/uploads/show.html.erb
+++ b/app/views/import/uploads/show.html.erb
@@ -11,65 +11,67 @@
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <div
-      data-controller="tabs"
-      data-tabs-active-class="bg-surface shadow-sm text-primary"
-      data-tabs-inactive-class="text-secondary"
-      data-tabs-default-tab-value="csv-upload-tab">
-      <div class="flex justify-center mb-4 w-full">
-        <div class="bg-surface-inset rounded-lg p-1 flex w-full">
-          <button type="button" data-id="csv-upload-tab" class="w-1/2 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
-          <button type="button" data-id="csv-paste-tab" class="w-1/2 px-2 py-1 rounded-md text-sm text-secondary font-medium" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
-        </div>
-      </div>
+    <%= render TabsComponent.new(active_tab: params[:tab] || "csv-upload", url_param_key: "tab", testid: "import-tabs") do |tabs| %>
+      <% tabs.with_nav do |nav| %>
+        <% nav.with_btn(id: "csv-upload", label: "Upload CSV") %>
+        <% nav.with_btn(id: "csv-paste", label: "Copy & Paste") %>
+      <% end %>
 
-      <% ["csv-paste-tab", "csv-upload-tab"].each do |tab| %>
-        <%= tag.div id: tab, data: { tabs_target: "tab" }, class: tab == "csv-upload-tab" ? "hidden" : "" do %>
-          <%= styled_form_with model: @import, scope: :import, url: import_upload_path(@import), multipart: true, class: "space-y-2" do |form| %>
-            <%= form.select :col_sep, Import::SEPARATORS, label: true %>
+      <% tabs.with_panel(tab_id: "csv-upload") do %>
+        <%= styled_form_with model: @import, scope: :import, url: import_upload_path(@import), multipart: true, class: "space-y-2" do |form| %>
+          <%= form.select :col_sep, Import::SEPARATORS, label: true %>
 
-            <% if @import.type == "TransactionImport" || @import.type == "TradeImport" %>
-              <%= form.select :account_id, @import.family.accounts.pluck(:name, :id), { label: "Account (optional)", include_blank: "Multi-account import", selected: @import.account_id } %>
-            <% end %>
+          <% if @import.type == "TransactionImport" || @import.type == "TradeImport" %>
+            <%= form.select :account_id, @import.family.accounts.pluck(:name, :id), { label: "Account (optional)", include_blank: "Multi-account import", selected: @import.account_id } %>
+          <% end %>
 
-            <% if tab == "csv-paste-tab" %>
-              <%= form.text_area :raw_file_str,
+          <div class="flex flex-col items-center justify-center w-full h-64 border border-secondary border-dashed rounded-xl cursor-pointer" data-controller="file-upload" data-action="click->file-upload#triggerFileInput" data-file-upload-target="uploadArea">
+            <div class="flex flex-col items-center justify-center pt-5 pb-6">
+              <div data-file-upload-target="uploadText" class="flex flex-col items-center">
+                <%= icon("plus", size: "lg", class: "mb-4 mx-auto") %>
+                <p class="mb-2 text-md text-gray text-center">
+                  <span class="font-medium text-primary">Browse</span> to add your CSV file here
+                </p>
+              </div>
+
+              <div class="flex flex-col gap-4 items-center hidden mb-2" data-file-upload-target="fileName">
+                <span class="text-primary">
+                  <%= icon("file-text", size: "lg", color: "current") %>
+                </span>
+                <p class="text-md font-medium text-primary"></p>
+              </div>
+
+              <%= form.file_field :csv_file, class: "hidden", "data-auto-submit-form-target": "auto", "data-file-upload-target": "input" %>
+            </div>
+          </div>
+
+          <%= form.submit "Upload CSV", disabled: @import.complete? %>
+        <% end %>
+      <% end %>
+
+      <% tabs.with_panel(tab_id: "csv-paste") do %>
+        <%= styled_form_with model: @import, scope: :import, url: import_upload_path(@import), multipart: true, class: "space-y-2" do |form| %>
+          <%= form.select :col_sep, Import::SEPARATORS, label: true %>
+
+          <% if @import.type == "TransactionImport" || @import.type == "TradeImport" %>
+            <%= form.select :account_id, @import.family.accounts.pluck(:name, :id), { label: "Account (optional)", include_blank: "Multi-account import", selected: @import.account_id } %>
+          <% end %>
+
+          <%= form.text_area :raw_file_str,
                        rows: 10,
                        required: true,
                        placeholder: "Paste your CSV file contents here",
                        "data-auto-submit-form-target": "auto" %>
-            <% else %>
-              <div class="flex flex-col items-center justify-center w-full h-64 border border-secondary border-dashed rounded-xl cursor-pointer" data-controller="file-upload" data-action="click->file-upload#triggerFileInput" data-file-upload-target="uploadArea">
-                <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                  <div data-file-upload-target="uploadText" class="flex flex-col items-center">
-                    <%= lucide_icon("plus", class: "w-6 h-6 mb-4 text-secondary mx-auto") %>
-                    <p class="mb-2 text-md text-gray text-center">
-                      <span class="font-medium text-primary">Browse</span> to add your CSV file here
-                    </p>
-                  </div>
 
-                  <div class="flex flex-col items-center hidden" data-file-upload-target="fileName">
-                    <%= lucide_icon("file-text", class: "w-6 h-6 mb-4 text-primary") %>
-                    <p class="mb-2 text-md font-medium text-primary"></p>
-                  </div>
-
-                  <%= form.file_field :csv_file, class: "hidden", "data-auto-submit-form-target": "auto", "data-file-upload-target": "input" %>
-                </div>
-              </div>
-            <% end %>
-
-            <%= form.submit "Upload CSV", disabled: @import.complete? %>
-          <% end %>
+          <%= form.submit "Upload CSV", disabled: @import.complete? %>
         <% end %>
       <% end %>
-    </div>
+    <% end %>
   </div>
 
-<div class="flex justify-center">
-
-<span class="text-secondary text-sm">
-  <%= link_to "Download a sample CSV", "/imports/#{@import.id}/upload/sample_csv", class: "text-primary underline", data: { turbo: false } %> to see the required CSV format
-</span>
-</div>
-
+  <div class="flex justify-center">
+    <span class="text-secondary text-sm">
+      <%= link_to "Download a sample CSV", "/imports/#{@import.id}/upload/sample_csv", class: "text-primary underline", data: { turbo: false } %> to see the required CSV format
+    </span>
+  </div>
 </div>
diff --git a/app/views/imports/_empty.html.erb b/app/views/imports/_empty.html.erb
index 334ab4b6..8f147797 100644
--- a/app/views/imports/_empty.html.erb
+++ b/app/views/imports/_empty.html.erb
@@ -1,9 +1,13 @@
 <div class="flex justify-center items-center py-20">
   <div class="text-center flex flex-col items-center max-w-[300px] gap-4">
     <p class="text-primary mb-1 font-medium text-sm"><%= t(".message") %></p>
-    <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new") %></span>
-    <% end %>
+
+    <%= render LinkComponent.new(
+      text: t(".new"),
+      variant: "primary",
+      href: new_import_path,
+      icon: "plus",
+      frame: :modal
+    ) %>
   </div>
 </div>
diff --git a/app/views/imports/_failure.html.erb b/app/views/imports/_failure.html.erb
index 0ae9f2a5..533d4e52 100644
--- a/app/views/imports/_failure.html.erb
+++ b/app/views/imports/_failure.html.erb
@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-red-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "alert-octagon", class: "w-5 h-5 text-red-500" %>
+      <%= icon "alert-octagon", color: "destructive" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,6 @@
       <p class="text-sm text-secondary">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
     </div>
 
-    <div>
-      <%= button_to "Try again", publish_import_path(import), class: "btn btn--primary text-center w-full" %>
-    </div>
+    <%= render ButtonComponent.new(text: "Try again", href: publish_import_path(import), full_width: true) %>
   </div>
 </div>
diff --git a/app/views/imports/_import.html.erb b/app/views/imports/_import.html.erb
index 2b84bd53..fca4764b 100644
--- a/app/views/imports/_import.html.erb
+++ b/app/views/imports/_import.html.erb
@@ -36,34 +36,30 @@
     <% end %>
   </div>
 
-  <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= link_to import_path(import),
-                    class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
-        <%= lucide_icon "eye", class: "w-5 h-5 text-secondary" %>
+  <%= render MenuComponent.new do |menu| %>
+    <% menu.with_item(variant: "link", text: t(".view"), href: import_path(import), icon: "eye") %>
 
-        <span><%= t(".view") %></span>
-      <% end %>
+    <% if import.complete? || import.revert_failed? %>
+      <% menu.with_item(
+        variant: "button",
+        text: t(".revert"),
+        href: revert_import_path(import),
+        icon: "rotate-ccw",
+        method: :put,
+        confirm: CustomConfirm.new(
+          title: "Revert import?",
+          body: "This will delete transactions that were imported, but you will still be able to review and re-import your data at any time.",
+          btn_text: "Revert"
+        )) %>
 
-      <% if import.complete? || import.revert_failed? %>
-        <%= button_to revert_import_path(import),
-                      method: :put,
-                      class: "block w-full py-2 px-3 space-x-2 text-orange-600 hover:bg-orange-50 flex items-center rounded-lg",
-                      data: { turbo_confirm: true } do %>
-          <%= lucide_icon "rotate-ccw", class: "w-5 h-5" %>
-
-          <span>Revert</span>
-        <% end %>
-      <% else %>
-        <%= button_to import_path(import),
-                      method: :delete,
-                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-                      data: { turbo_confirm: true } do %>
-          <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-          <span><%= t(".delete") %></span>
-        <% end %>
-      <% end %>
-    </div>
+    <% else %>
+      <% menu.with_item(
+        variant: "button",
+        text: t(".delete"),
+        href: import_path(import),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion("Import")) %>
+    <% end %>
   <% end %>
 </div>
diff --git a/app/views/imports/_importing.html.erb b/app/views/imports/_importing.html.erb
index df1c70a0..3815cc07 100644
--- a/app/views/imports/_importing.html.erb
+++ b/app/views/imports/_importing.html.erb
@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-secondary" %>
+      <%= icon "loader", class: "animate-pulse" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -12,8 +12,8 @@
     </div>
 
     <div class="space-y-2">
-      <%= link_to "Check status", import_path(import), class: "block btn btn--primary text-center w-full" %>
-      <%= link_to "Back to dashboard", root_path, class: "block btn btn--secondary text-center w-full" %>
+      <%= render LinkComponent.new(text: "Check status", href: import_path(import), variant: "primary") %>
+      <%= render LinkComponent.new(text: "Back to dashboard", href: root_path, variant: "secondary") %>
     </div>
   </div>
 </div>
diff --git a/app/views/imports/_nav.html.erb b/app/views/imports/_nav.html.erb
index 3353e15f..eb8f5c08 100644
--- a/app/views/imports/_nav.html.erb
+++ b/app/views/imports/_nav.html.erb
@@ -36,7 +36,7 @@
       <%= link_to step[:path], class: "flex items-center gap-3" do %>
         <div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
           <span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
-            <%= step[:is_complete] && !is_current ? lucide_icon("check", class: "w-4 h-4") : idx + 1 %>
+            <%= step[:is_complete] && !is_current ? icon("check", size: "sm") : idx + 1 %>
           </span>
 
           <span><%= step[:name] %></span>
diff --git a/app/views/imports/_ready.html.erb b/app/views/imports/_ready.html.erb
index fbbf4a1d..225c0dd1 100644
--- a/app/views/imports/_ready.html.erb
+++ b/app/views/imports/_ready.html.erb
@@ -18,9 +18,9 @@
 
         <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-tl-lg rounded-tr-lg">
           <div class="flex items-center gap-3">
-            <div class="<%= resource.bg_class %> w-8 h-8 rounded-full flex justify-center items-center">
-              <%= lucide_icon resource.icon, class: "#{resource.text_class} w-5 h-5 shrink-0" %>
-            </div>
+            <%= tag.div class: class_names(resource.bg_class, resource.text_class, "w-8 h-8 rounded-full flex justify-center items-center") do %>
+              <%= icon resource.icon, color: "current" %>
+            <% end %>
 
             <p><%= resource.label %></p>
           </div>
@@ -35,5 +35,5 @@
     </div>
   </div>
 
-  <%= button_to "Publish import", publish_import_path(import), class: "btn btn--primary w-full" %>
+  <%= render ButtonComponent.new(text: "Publish import", href: publish_import_path(import), full_width: true) %>
 </div>
diff --git a/app/views/imports/_revert_failure.html.erb b/app/views/imports/_revert_failure.html.erb
index 6566648d..6eacd786 100644
--- a/app/views/imports/_revert_failure.html.erb
+++ b/app/views/imports/_revert_failure.html.erb
@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-red-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "alert-octagon", class: "w-5 h-5 text-red-500" %>
+      <%= icon "alert-octagon", color: "destructive" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,10 @@
       <p class="text-sm text-secondary">Please try again or contact support.</p>
     </div>
 
-    <div>
-      <%= button_to "Try again", revert_import_path(import), class: "btn btn--primary text-center w-full" %>
-    </div>
+    <%= render ButtonComponent.new(
+      text: "Try again",
+      full_width: true,
+      href: revert_import_path(import)
+    ) %>
   </div>
 </div>
diff --git a/app/views/imports/_success.html.erb b/app/views/imports/_success.html.erb
index 4c58e07b..a1130c0d 100644
--- a/app/views/imports/_success.html.erb
+++ b/app/views/imports/_success.html.erb
@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-green-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "check", class: "w-5 h-5 text-green-500" %>
+      <%= icon "check", color: "success" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,11 @@
       <p class="text-sm text-secondary">Your imported data has been successfully added to the app and is now ready for use.</p>
     </div>
 
-    <div>
-      <%= link_to "Back to dashboard", root_path, class: "block btn btn--primary text-center w-full" %>
-    </div>
+    <%= render LinkComponent.new(
+      text: "Back to dashboard",
+      variant: "primary",
+      full_width: true,
+      href: root_path
+    ) %>
   </div>
 </div>
diff --git a/app/views/imports/index.html.erb b/app/views/imports/index.html.erb
index 1a87e72c..108f3dc5 100644
--- a/app/views/imports/index.html.erb
+++ b/app/views/imports/index.html.erb
@@ -1,10 +1,13 @@
 <div class="flex items-center justify-between">
   <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
 
-  <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
-    <%= lucide_icon("plus", class: "w-5 h-5") %>
-    <span><%= t(".new") %></span>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: "New import",
+    href: new_import_path,
+    icon: "plus",
+    variant: "primary",
+    frame: :modal
+  ) %>
 </div>
 
 <div class="bg-container shadow-border-xs rounded-xl p-4">
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index 92794acb..ac739056 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -1,16 +1,7 @@
-<%= modal do %>
-  <div class="p-4 space-y-4 max-w-[420px]">
-    <div class="space-y-2">
-      <div class="flex justify-between items-center">
-        <h2 class="font-medium text-primary"><%= t(".title") %></h2>
-        <button data-action="modal#close" tabindex="-1">
-          <%= lucide_icon("x", class: "w-5 h-5 text-primary") %>
-        </button>
-      </div>
-
-      <p class="text-secondary text-sm"><%= t(".description") %></p>
-    </div>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title"), subtitle: t(".description")) %>
 
+  <% dialog.with_body do %>
     <div class="rounded-xl bg-container-inset p-1">
       <h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
       <ul class="bg-container shadow-border-xs rounded-lg">
@@ -19,13 +10,15 @@
             <%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
+                  <span class="text-orange-500">
+                    <%= icon("loader", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".resume", type: @pending_import.type.titleize) %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -39,13 +32,15 @@
             <%= button_to imports_path(import: { type: "TransactionImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
+                  <span class="text-indigo-500">
+                    <%= icon("file-spreadsheet", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_transactions") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -59,13 +54,15 @@
             <%= button_to imports_path(import: { type: "TradeImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
+                  <span class="text-yellow-500">
+                    <%= icon("square-percent", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_portfolio") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -79,13 +76,15 @@
             <%= button_to imports_path(import: { type: "AccountImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
+                  <span class="text-violet-500">
+                    <%= icon("building", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_accounts") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -103,7 +102,7 @@
                   <%= t(".import_mint") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -113,5 +112,5 @@
         <% end %>
       </ul>
     </div>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/investments/_value_tooltip.html.erb b/app/views/investments/_value_tooltip.html.erb
index c311474a..62615d76 100644
--- a/app/views/investments/_value_tooltip.html.erb
+++ b/app/views/investments/_value_tooltip.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (balance:, holdings:, cash:) %>
 
 <div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
-  <%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-secondary") %>
+  <%= icon("info", size: "sm") %>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
     <div class="text-white">
       <%= t(".total_value_tooltip") %>
diff --git a/app/views/investments/edit.html.erb b/app/views/investments/edit.html.erb
index c91d9eb2..433f118f 100644
--- a/app/views/investments/edit.html.erb
+++ b/app/views/investments/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "investments/form", account: @account, url: investment_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "investments/form", account: @account, url: investment_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/investments/new.html.erb b/app/views/investments/new.html.erb
index 92dc1da7..737c5818 100644
--- a/app/views/investments/new.html.erb
+++ b/app/views/investments/new.html.erb
@@ -1,7 +1,10 @@
 <% if params[:step] == "method_select" %>
   <%= render "accounts/new/method_selector", path: new_investment_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
 <% else %>
-  <%= modal_form_wrapper title: t(".title") do %>
-    <%= render "investments/form", account: @account, url: investments_path %>
+  <%= render DialogComponent.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+    <% dialog.with_body do %>
+      <%= render "investments/form", account: @account, url: investments_path %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/invitations/new.html.erb b/app/views/invitations/new.html.erb
index 5d50e516..6d1c2cbc 100644
--- a/app/views/invitations/new.html.erb
+++ b/app/views/invitations/new.html.erb
@@ -1,20 +1,24 @@
-<%= modal_form_wrapper title: t(".title"), subtitle: t(".subtitle") do %>
-  <%= styled_form_with model: @invitation, class: "space-y-4", data: { turbo: false } do |form| %>
-    <%= form.email_field :email,
-      required: true,
-      placeholder: t(".email_placeholder"),
-      label: t(".email_label") %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title"), subtitle: t(".subtitle")) %>
 
-    <%= form.select :role,
-      options_for_select([
-        [t(".role_member"), "member"],
-        [t(".role_admin"), "admin"]
-      ]),
-      {},
-      { label: t(".role_label") } %>
+  <% dialog.with_body do %>
+    <%= styled_form_with model: @invitation, class: "space-y-4", data: { turbo: false } do |form| %>
+      <%= form.email_field :email,
+        required: true,
+        placeholder: t(".email_placeholder"),
+        label: t(".email_label") %>
 
-    <div class="w-full">
-      <%= form.submit t(".submit"), class: "bg-gray-900 text-white rounded-lg px-4 py-2 w-full" %>
-    </div>
+      <%= form.select :role,
+        options_for_select([
+          [t(".role_member"), "member"],
+          [t(".role_admin"), "admin"]
+        ]),
+        {},
+        { label: t(".role_label") } %>
+
+      <div class="w-full">
+        <%= form.submit t(".submit"), class: "bg-gray-900 text-white rounded-lg px-4 py-2 w-full" %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/invite_codes/_invite_code.html.erb b/app/views/invite_codes/_invite_code.html.erb
index cabf65dc..b4f52d45 100644
--- a/app/views/invite_codes/_invite_code.html.erb
+++ b/app/views/invite_codes/_invite_code.html.erb
@@ -6,10 +6,10 @@
     </div>
     <button data-action="clipboard#copy" class="shrink-0 z-10 inline-flex items-center px-1 text-sm text-secondary font-sm text-center" type="button">
       <span data-clipboard-target="iconDefault">
-        <%= lucide_icon "copy", class: "w-5 h-5" %>
+        <%= icon "copy" %>
       </span>
       <span class="hidden inline-flex items-center" data-clipboard-target="iconSuccess">
-        <%= lucide_icon "check", class: "w-5 h-4" %>
+        <%= icon "check" %>
       </span>
     </button>
   </div>
diff --git a/app/views/invite_codes/index.html.erb b/app/views/invite_codes/index.html.erb
index ad27bc18..467037c4 100644
--- a/app/views/invite_codes/index.html.erb
+++ b/app/views/invite_codes/index.html.erb
@@ -4,7 +4,7 @@
     <%= render @invite_codes %>
   <% else %>
     <div class="flex flex-col items-center w-full h-64 bg-container text-center justify-center">
-      <%= lucide_icon "binary", class: "w-6 h-6 text-sm text-secondary" %>
+      <%= icon "binary", size: "lg" %>
       <p class="text-base pt-4"><%= t(".no_invite_codes") %></p>
       <p class="text-sm text-secondary pt-2 w-2/3"><%= t(".invite_code_description") %></p>
     </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 846a656c..42275c90 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,135 +1,140 @@
+<% mobile_nav_items = [
+  { name: "Home", path: root_path, icon: "pie-chart", icon_custom: false, active: page_active?(root_path) },
+  { name: "Transactions", path: transactions_path, icon: "credit-card", icon_custom: false, active: page_active?(transactions_path) },
+  { name: "Budgets", path: budgets_path, icon: "map", icon_custom: false, active: page_active?(budgets_path) },
+  { name: "Assistant", path: chats_path, icon: "icon-assistant", icon_custom: true, active: page_active?(chats_path), mobile_only: true }
+] %>
+
+<% desktop_nav_items = mobile_nav_items.reject { |item| item[:mobile_only] } %>
+<% expanded_sidebar_class = "w-full" %>
+<% collapsed_sidebar_class = "w-0" %>
+
 <%= render "layouts/shared/htmldoc" do %>
-  <% sidebar_config = app_sidebar_config(Current.user) %>
+  <div
+    class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface"
+    data-controller="app-layout"
+    data-app-layout-expanded-sidebar-class="<%= expanded_sidebar_class %>"
+    data-app-layout-collapsed-sidebar-class="<%= collapsed_sidebar_class %>"
+    data-app-layout-user-id-value="<%= Current.user.id %>">
+    <div
+      class="hidden fixed inset-0 bg-surface z-20 h-dvh w-full p-3 overflow-y-auto transition-all duration-300"
+      data-app-layout-target="mobileSidebar">
+      <div class="mb-2">
+        <%= icon("x", as_button: true, data: { action: "app-layout#closeMobileSidebar" }) %>
+      </div>
 
-  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-surface pt-safe"
-       data-controller="sidebar"
-       data-sidebar-user-id-value="<%= Current.user.id %>"
-       data-sidebar-config-value="<%= sidebar_config.to_json %>">
-    <button hidden data-controller="hotkey" data-hotkey="b" data-action="sidebar#toggleLeftPanel">Toggle accounts</button>
-    <button hidden data-controller="hotkey" data-hotkey="l" data-action="sidebar#toggleRightPanel">Toggle chat</button>
+      <%= render(
+        "accounts/account_sidebar_tabs",
+        family: Current.family,
+        active_account_group_tab: params[:account_group_tab] || "assets"
+      ) %>
+    </div>
 
-    <% unless controller_name == 'chats' %>
-      <nav class="flex justify-between lg:justify-start lg:flex-col shrink-0 lg:w-[84px] p-3 lg:px-0 lg:py-4 lg:mr-3">
-        <button data-action="sidebar#toggleLeftPanelMobile" class="lg:hidden inline-flex p-2 rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
-          <%= icon("panel-left", color: "gray") %>
-        </button>
+    <%# MOBILE - Top nav %>
+    <nav class="lg:hidden flex justify-between items-center p-3">
+      <%= icon("panel-left", as_button: true, data: { action: "app-layout#openMobileSidebar"}) %>
 
-        <%# Mobile only account sidebar groups %>
-        <%= tag.div class: class_names("hidden bg-surface z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300 pt-safe"),
-                  data: { sidebar_target: "leftPanelMobile" } do %>
-          <div id="account-sidebar-tabs" class="pt-6">
-            <div class="mb-4">
-              <button data-action="sidebar#toggleLeftPanelMobile">
-                <%= icon("x", color: "gray") %>
-              </button>
-            </div>
-            <%= render "accounts/account_sidebar_tabs", family: Current.family %>
-          </div>
-        <% end %>
+      <%= link_to root_path, class: "block" do %>
+        <%= image_tag "logomark-color.svg", class: "w-9 h-9 mx-auto" %>
+      <% end %>
 
-        <div class="lg:pl-2 lg:mb-3">
+      <%= render "users/user_menu", user: Current.user, placement: "bottom-end", offset: 12 %>
+    </nav>
+
+    <%# DESKTOP - Left navbar %>
+    <div class="hidden lg:block">
+      <nav class="h-full flex flex-col shrink-0 w-[84px] py-4 mr-3">
+        <div class="pl-2 mb-3">
           <%= link_to root_path, class: "block" do %>
             <%= image_tag "logomark-color.svg", class: "w-9 h-9 mx-auto" %>
           <% end %>
         </div>
 
-        <ul class="space-y-0.5 hidden lg:block">
-          <li>
-            <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
-          </li>
-
-          <li>
-            <%= render "layouts/sidebar/nav_item", name: "Transactions", path: transactions_path, icon_key: "credit-card" %>
-          </li>
-
-          <li>
-            <%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "map" %>
-          </li>
+        <ul class="space-y-0.5">
+          <% desktop_nav_items.reject { |item| item[:mobile_only] }.each do |nav_item| %>
+            <li>
+              <%= render "layouts/shared/nav_item", **nav_item %>
+            </li>
+          <% end %>
         </ul>
 
-        <div class="lg:pl-2 lg:mt-auto lg:mx-auto">
-          <div class="lg:hidden">
-            <%= render "users/user_menu", user: Current.user, placement: "bottom-end", offset: 12 %>
-          </div>
+        <div class="pl-2 mt-auto mx-auto flex flex-col gap-2">
+          <%= render ButtonComponent.new(
+            variant: "icon",
+            icon: "message-circle-question",
+            data: { action: "intercom#show" }
+          ) %>
 
-          <div class="hidden lg:block">
-            <%= render "users/user_menu", user: Current.user %>
-          </div>
+          <%= render "users/user_menu", user: Current.user %>
         </div>
       </nav>
+    </div>
+
+    <%# DESKTOP - Left sidebar %>
+    <%= tag.div class: class_names(
+        "hidden lg:block py-4 overflow-y-auto shrink-0 max-w-[320px] transition-all duration-300",
+        Current.user.show_sidebar? ? expanded_sidebar_class : collapsed_sidebar_class,
+       ),
+       data: { app_layout_target: "leftSidebar" } do %>
+      <% if content_for?(:sidebar) %>
+        <%= yield :sidebar %>
+      <% else %>
+        <div id="account-sidebar-tabs" data-turbo-permanent>
+          <%= render "accounts/account_sidebar_tabs", family: Current.family, active_account_group_tab: params[:account_group_tab] || "assets" %>
+        </div>
+      <% end %>
     <% end %>
 
-    <div class="flex justify-between lg:justify-normal grow overflow-y-auto">
-      <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 hidden lg:block"),
-                style: "width: #{sidebar_config.dig(:left_panel, :initial_width)}px",
-                data: { sidebar_target: "leftPanel" } do %>
-        <% if content_for?(:sidebar) %>
-          <%= yield :sidebar %>
-        <% else %>
-          <div id="account-sidebar-tabs" data-turbo-permanent>
-            <%= render "accounts/account_sidebar_tabs", family: Current.family %>
-          </div>
-        <% end %>
-      <% end %>
+    <%# SHARED - Main content %>
+    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 h-full w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %>
+      <div class="hidden lg:flex gap-2 items-center justify-between mb-6">
+        <div class="flex items-center gap-2">
+          <%= icon("panel-left", as_button: true, data: { action: "app-layout#toggleLeftSidebar" }) %>
 
-      <%= tag.main class: class_names("px-3 lg:px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
-        <% if require_upgrade? %>
-          <div class="absolute inset-0 px-3 lg:px-10 h-full w-full z-50">
-            <%= render "shared/subscribe_modal" %>
-          </div>
-        <% end %>
-
-        <%= tag.div class: class_names("mx-auto max-w-5xl w-full h-full"), data: { sidebar_target: "content" } do %>
           <% if content_for?(:breadcrumbs) %>
             <%= yield :breadcrumbs %>
           <% else %>
             <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
           <% end %>
+        </div>
+        <%= icon("panel-right", as_button: true, data: { action: "app-layout#toggleRightSidebar" }) %>
+      </div>
 
-          <% if content_for?(:page_header) %>
-            <%= yield :page_header %>
-          <% end %>
-
-          <%= yield %>
-        <% end %>
+      <% if content_for?(:page_header) %>
+        <%= yield :page_header %>
       <% end %>
 
-      <%# AI chat sidebar %>
-      <%= tag.div id: "chat-container",
-                style: "width: #{sidebar_config.dig(:right_panel, :initial_width)}px; overflow: #{sidebar_config.dig(:right_panel, :overflow)}",
-                class: class_names("flex flex-col justify-between shrink-0 transition-all duration-300 hidden lg:block"),
-                data: { controller: "chat hotkey", sidebar_target: "rightPanel", turbo_permanent: true } do %>
+      <%= yield %>
+    <% end %>
 
-        <% if Current.user.ai_enabled? %>
+    <%# DESKTOP - Right sidebar %>
+    <%= tag.div class: class_names(
+          "hidden lg:block h-full overflow-y-auto shrink-0 max-w-[400px] transition-all duration-300",
+          Current.user.show_ai_sidebar? ? expanded_sidebar_class : collapsed_sidebar_class,
+        ),
+        data: { app_layout_target: "rightSidebar" } do %>
+      <%= tag.div id: "chat-container", class: "relative h-full", data: { controller: "chat hotkey", turbo_permanent: true } do %>
+        <div class="flex flex-col h-full justify-between shrink-0">
           <%= turbo_frame_tag chat_frame, src: chat_view_path(@chat), loading: "lazy", class: "h-full" do %>
             <div class="flex justify-center items-center h-full">
-              <%= lucide_icon("loader-circle", class: "w-5 h-5 text-secondary animate-spin") %>
+              <%= icon("loader-circle", class: "animate-spin") %>
             </div>
           <% end %>
-        <% else %>
-          <%= render "chats/ai_consent" %>
+        </div>
+
+        <% unless Current.user.ai_enabled? %>
+          <div class="absolute backdrop-blur-lg inset-0 h-full w-full flex flex-col justify-center items-center pl-0.5 pr-4">
+            <%= render "chats/ai_consent" %>
+          </div>
         <% end %>
       <% end %>
-    </div>
+    <% end %>
 
-    <nav class="lg:hidden bg-surface md:bg-container shrink-0 z-10 pb-2 border-t border-tertiary pb-safe">
-      <ul class="flex items-center justify-around gap-1">
-        <li>
-          <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
-        </li>
-
-        <li>
-          <%= render "layouts/sidebar/nav_item", name: "Transactions", path: transactions_path, icon_key: "credit-card" %>
-        </li>
-
-        <li>
-          <%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "map" %>
-        </li>
-
-        <li>
-          <%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "icon-assistant", is_custom: true %>
-        </li>
-      </ul>
-    </nav>
+    <%# MOBILE - Bottom Nav %>
+    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-2 border-t border-tertiary pb-safe flex justify-around" do %>
+      <% mobile_nav_items.each do |nav_item| %>
+        <%= render "layouts/shared/nav_item", **nav_item %>
+      <% end %>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb
index 8acf9c6c..6b73ad67 100644
--- a/app/views/layouts/imports.html.erb
+++ b/app/views/layouts/imports.html.erb
@@ -1,17 +1,21 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col h-dvh bg-container pt-safe">
     <header class="flex items-center justify-between p-8">
-      <%= link_to content_for(:previous_path) || imports_path do %>
-        <%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "arrow-left",
+        href: content_for(:previous_path) || imports_path
+      ) %>
 
       <nav>
         <%= yield :header_nav %>
       </nav>
 
-      <%= link_to imports_path do %>
-        <%= lucide_icon "x", class: "text-secondary w-5 h-5" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "x",
+        href: imports_path
+      ) %>
     </header>
 
     <main class="grow px-8 md:pt-12 pb-32 overflow-y-auto">
diff --git a/app/views/layouts/lookbooks.html.erb b/app/views/layouts/lookbooks.html.erb
new file mode 100644
index 00000000..de1b9dc9
--- /dev/null
+++ b/app/views/layouts/lookbooks.html.erb
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html data-theme="<%= params.dig(:lookbook, :display, :theme) %>">
+  <head>
+    <title>Component Preview</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= javascript_importmap_tags %>
+  </head>
+  <body class="p-4 h-full bg-container <%= params.dig(:lookbook, :display, :container_classes) %>">
+    <%= yield %>
+  </body>
+</html>
diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
index 30e248c1..e4e68784 100644
--- a/app/views/layouts/settings.html.erb
+++ b/app/views/layouts/settings.html.erb
@@ -10,7 +10,7 @@
           <% if content_for?(:breadcrumbs) %>
             <%= yield :breadcrumbs %>
           <% else %>
-            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs, sidebar_toggle_enabled: false %>
+            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
           <% end %>
 
           <% if content_for?(:page_title) %>
diff --git a/app/views/layouts/shared/_breadcrumbs.html.erb b/app/views/layouts/shared/_breadcrumbs.html.erb
index a9d41928..665fa4be 100644
--- a/app/views/layouts/shared/_breadcrumbs.html.erb
+++ b/app/views/layouts/shared/_breadcrumbs.html.erb
@@ -1,33 +1,17 @@
-<%# locals: (breadcrumbs:, sidebar_toggle_enabled: true) %>
+<%# locals: (breadcrumbs:) %>
 
-<nav class="items-center gap-2 mb-6 hidden md:flex">
-  <% if sidebar_toggle_enabled %>
-    <button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer">
-      <%= icon("panel-left", color: "gray") %>
-    </button>
-  <% end %>
-
-  <div class="py-2 flex items-center gap-2">
-    <% breadcrumbs.each_with_index do |(name, path), index| %>
-      <% if index > 0 %>
-        <%= icon("chevron-right", color: "gray", size: "sm") %>
-      <% end %>
-
-      <% if path.present? && index < breadcrumbs.size - 1 %>
-        <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
-      <% elsif index == breadcrumbs.size - 1 %>
-        <span class="text-primary font-medium text-sm"><%= name %></span>
-      <% else %>
-        <span class="text-sm text-gray-500 font-medium"><%= name %></span>
-      <% end %>
+<div class="py-2 flex items-center gap-2">
+  <% breadcrumbs.each_with_index do |(name, path), index| %>
+    <% if index > 0 %>
+      <%= icon("chevron-right", color: "gray", size: "sm") %>
     <% end %>
-  </div>
 
-  <% if sidebar_toggle_enabled %>
-    <div class="ml-auto">
-      <button data-action="sidebar#toggleRightPanel" class="p-2 hidden lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer" title="Toggle AI Assistant">
-        <%= icon("panel-right", color: "gray") %>
-      </button>
-    </div>
+    <% if path.present? && index < breadcrumbs.size - 1 %>
+      <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
+    <% elsif index == breadcrumbs.size - 1 %>
+      <span class="text-primary font-medium text-sm"><%= name %></span>
+    <% else %>
+      <span class="text-sm text-gray-500 font-medium"><%= name %></span>
+    <% end %>
   <% end %>
-</nav>
+</div>
diff --git a/app/views/layouts/shared/_confirm_dialog.html.erb b/app/views/layouts/shared/_confirm_dialog.html.erb
new file mode 100644
index 00000000..4709ffb4
--- /dev/null
+++ b/app/views/layouts/shared/_confirm_dialog.html.erb
@@ -0,0 +1,30 @@
+<%# This dialog is used as an override to the browser's confirm API when submitting forms with data-turbo-confirm %>
+<%# See confirm_dialog_controller.js and _htmldoc.html.erb  %>
+<%= render DialogComponent.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm") do |dialog| %>
+  <% dialog.with_body do %>
+    <form method="dialog" class="space-y-4">
+      <div class="space-y-2">
+        <div class="flex items-center justify-between gap-2">
+          <h3 class="font-medium text-primary" data-confirm-dialog-target="title">Are you sure?</h3>
+          <%= icon("x", as_button: true, type: "submit", value: "cancel") %>
+        </div>
+
+        <p class="text-sm text-secondary" data-confirm-dialog-target="subtitle">This action cannot be undone.</p>
+      </div>
+
+      <div>
+        <% ["primary", "outline-destructive", "destructive"].each do |variant| %>
+          <%= render ButtonComponent.new(
+          text: "Confirm",
+          variant: variant,
+          autofocus: true,
+          full_width: true,
+          value: "confirm",
+          data: { variant: variant, confirm_dialog_target: "confirmButton" },
+          hidden: true,
+        ) %>
+        <% end %>
+      </div>
+    </form>
+  <% end %>
+<% end %>
diff --git a/app/views/layouts/shared/_fixed_content.html.erb b/app/views/layouts/shared/_fixed_content.html.erb
deleted file mode 100644
index 88ace0d3..00000000
--- a/app/views/layouts/shared/_fixed_content.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%= turbo_frame_tag "modal" %>
-<%= turbo_frame_tag "drawer" %>
-<%= render "shared/confirm_modal" %>
-
-<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
-<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
diff --git a/app/views/layouts/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index 3643637d..efb89615 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme" data-theme-user-preference-value="<%= Current.user&.theme || "system" %>">
+<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme intercom" data-theme-user-preference-value="<%= Current.user&.theme || "system" %>">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>
@@ -20,9 +20,22 @@
 
     <%= family_stream %>
 
+    <% if Rails.env.development? %>
+      <div class="fixed bottom-32 left-7 flex flex-col gap-1">
+        <%= icon("eclipse", as_button: true, data: { action: "theme#toDark" }) %>
+        <%= icon("sun", as_button: true, data: { action: "theme#toLight" }) %>
+      </div>
+    <% end %>
+
+    <% if require_upgrade? %>
+      <%= render "shared/subscribe_modal" %>
+    <% end %>
+
     <%= turbo_frame_tag "modal" %>
     <%= turbo_frame_tag "drawer" %>
-    <%= render "shared/confirm_modal" %>
+
+    <%# Custom overrides for browser's confirm API  %>
+    <%= render "layouts/shared/confirm_dialog" %>
 
     <%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
     <%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
diff --git a/app/views/layouts/shared/_nav_item.html.erb b/app/views/layouts/shared/_nav_item.html.erb
new file mode 100644
index 00000000..8c5fd683
--- /dev/null
+++ b/app/views/layouts/shared/_nav_item.html.erb
@@ -0,0 +1,20 @@
+<%# locals:(name:, path:, icon:, icon_custom:, active:, mobile_only: false) %>
+
+<%= link_to path, class: "space-y-1 group block relative pb-1" do %>
+  <div class="grow flex flex-col lg:flex-row gap-1 items-center">
+    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
+
+    <%= tag.div class: class_names(
+      "w-8 h-8 flex items-center justify-center mx-auto rounded-lg",
+      active ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary"
+    ) do %>
+      <%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %>
+    <% end %>
+  </div>
+
+  <div class="grow flex justify-center lg:pl-2">
+    <%= tag.p class: class_names("font-medium text-[11px]", active ? "text-primary" : "text-secondary") do %>
+      <%= name %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/layouts/sidebar/_nav_item.html.erb b/app/views/layouts/sidebar/_nav_item.html.erb
deleted file mode 100644
index dd8661af..00000000
--- a/app/views/layouts/sidebar/_nav_item.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<%# locals: (name:, path:, icon_key:, is_custom: false) %>
-<%= link_to path, class: "space-y-1 group block relative pb-1" do %>
-  <div class="grow flex flex-col lg:flex-row gap-1 items-center">
-    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => page_active?(path)) %>
-
-    <% icon_color = page_active?(path) ? "current" : "gray" %>
-
-    <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary") do %>
-      <%= is_custom ? icon_custom(icon_key, color: icon_color) : icon(icon_key, color: icon_color) %>
-    <% end %>
-  </div>
-
-  <div class="grow flex justify-center lg:pl-2">
-    <%= tag.p class: class_names("font-medium text-[11px]", page_active?(path) ? "text-primary" : "text-secondary") do %>
-      <%= name %>
-    <% end %>
-  </div>
-<% end %>
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
index a188fe60..1be2229d 100644
--- a/app/views/layouts/wizard.html.erb
+++ b/app/views/layouts/wizard.html.erb
@@ -1,17 +1,21 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="bg-container flex flex-col h-dvh pt-safe">
     <header class="flex items-center justify-between p-8">
-      <%= link_to content_for(:previous_path) || root_path do %>
-        <%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "arrow-left",
+        href: content_for(:previous_path) || root_path
+      ) %>
 
       <nav>
         <%= yield :header_nav %>
       </nav>
 
-      <%= link_to content_for(:cancel_path) || root_path do %>
-        <%= lucide_icon "x", class: "text-secondary w-5 h-5" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "x",
+        href: content_for(:cancel_path) || root_path
+      ) %>
     </header>
 
     <main class="grow px-8 pt-12 pb-32 overflow-y-auto">
diff --git a/app/views/loans/_overview.html.erb b/app/views/loans/_overview.html.erb
index bbeccb6e..f04ccc49 100644
--- a/app/views/loans/_overview.html.erb
+++ b/app/views/loans/_overview.html.erb
@@ -45,5 +45,10 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= link_to "Edit loan details", edit_loan_path(account), class: "btn btn--ghost", data: { turbo_frame: :modal } %>
+  <%= render LinkComponent.new(
+    text: "Edit loan details",
+    variant: "ghost",
+    href: edit_loan_path(account),
+    frame: :modal
+  ) %>
 </div>
diff --git a/app/views/loans/edit.html.erb b/app/views/loans/edit.html.erb
index 5fb3b13e..f9a56f12 100644
--- a/app/views/loans/edit.html.erb
+++ b/app/views/loans/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: loan_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: loan_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/loans/new.html.erb b/app/views/loans/new.html.erb
index b09a6b32..de4c9575 100644
--- a/app/views/loans/new.html.erb
+++ b/app/views/loans/new.html.erb
@@ -1,7 +1,10 @@
 <% if params[:step] == "method_select" %>
   <%= render "accounts/new/method_selector", path: new_loan_path(return_to: params[:return_to]), us_link_token: @us_link_token, eu_link_token: @eu_link_token %>
 <% else %>
-  <%= modal_form_wrapper title: t(".title") do %>
-    <%= render "loans/form", account: @account, url: loans_path %>
+  <%= render DialogComponent.new do |dialog| %>
+    <% dialog.with_header(title: t(".title")) %>
+    <% dialog.with_body do %>
+      <%= render "loans/form", account: @account, url: loans_path %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/merchants/_merchant.html.erb b/app/views/merchants/_merchant.html.erb
index 6c930ead..964a7fff 100644
--- a/app/views/merchants/_merchant.html.erb
+++ b/app/views/merchants/_merchant.html.erb
@@ -15,19 +15,15 @@
     </p>
   </div>
   <div class="justify-self-end">
-    <%= contextual_menu do %>
-      <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-        <%= contextual_menu_modal_action_item t(".edit"), edit_merchant_path(merchant) %>
-
-        <%= contextual_menu_destructive_item t(".delete"),
-                                             merchant_path(merchant),
-                                             turbo_frame: "_top",
-                                             turbo_confirm: merchant.transactions.any? ? {
-                                               title: t(".confirm_title"),
-                                               body: t(".confirm_body"),
-                                               accept: t(".confirm_accept")
-                                             } : nil %>
-      </div>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(variant: "link", text: t(".edit"), href: edit_merchant_path(merchant), icon: "pencil", data: { turbo_frame: "modal" }) %>
+      <% menu.with_item(
+        variant: "button",
+        text: t(".delete"),
+        href: merchant_path(merchant),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion(merchant.name)) %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/messages/_chat_form.html.erb b/app/views/messages/_chat_form.html.erb
index 10c35e5a..0c536c94 100644
--- a/app/views/messages/_chat_form.html.erb
+++ b/app/views/messages/_chat_form.html.erb
@@ -19,15 +19,11 @@
       <div class="items-center gap-1 hidden lg:flex">
         <%# These are disabled for now, but in the future, will all open specific menus with their own context and search %>
         <% ["plus", "command", "at-sign", "mouse-pointer-click"].each do |icon| %>
-          <button type="button" title="Coming soon" class="cursor-not-allowed w-8 h-8 flex justify-center items-center hover:bg-surface-hover rounded-lg">
-            <%= icon(icon, color: "gray") %>
-          </button>
+          <%= icon(icon, as_button: true, disabled: true, class: "cursor-not-allowed", title: "Coming soon") %>
         <% end %>
       </div>
 
-      <button type="submit" class="w-8 h-8 flex justify-center items-center text-secondary hover:bg-surface-hover cursor-pointer rounded-lg">
-        <%= icon("arrow-up") %>
-      </button>
+      <%= icon("arrow-up", as_button: true, type: "submit") %>
     </div>
   <% end %>
 
diff --git a/app/views/mfa/backup_codes.html.erb b/app/views/mfa/backup_codes.html.erb
index b27e78d4..e4684030 100644
--- a/app/views/mfa/backup_codes.html.erb
+++ b/app/views/mfa/backup_codes.html.erb
@@ -19,9 +19,12 @@
         <% end %>
       </div>
 
-      <div class="mt-6">
-        <%= link_to t(".continue"), settings_security_path, class: "w-full btn btn--primary" %>
-      </div>
+      <%= render LinkComponent.new(
+        text: t(".continue"),
+        href: settings_security_path,
+        variant: "primary",
+        full_width: true
+      ) %>
     </div>
   <% end %>
 
diff --git a/app/views/mfa/new.html.erb b/app/views/mfa/new.html.erb
index 0726bf1b..c8ad0892 100644
--- a/app/views/mfa/new.html.erb
+++ b/app/views/mfa/new.html.erb
@@ -29,10 +29,10 @@
                  class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
           <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
             <span data-clipboard-target="iconDefault">
-              <%= lucide_icon "copy", class: "w-5 h-5" %>
+              <%= icon "copy" %>
             </span>
             <span class="hidden" data-clipboard-target="iconSuccess">
-              <%= lucide_icon "check", class: "w-5 h-5" %>
+              <%= icon "check" %>
             </span>
           </button>
         </div>
@@ -57,7 +57,7 @@
             placeholder: t(".code_placeholder") %>
 
           <div class="flex justify-end mt-4">
-            <%= f.submit t(".verify_button"), class: "btn btn--primary" %>
+            <%= f.submit t(".verify_button") %>
           </div>
         </div>
       <% end %>
diff --git a/app/views/onboardings/_header.html.erb b/app/views/onboardings/_header.html.erb
index 6f671662..14dabc5e 100644
--- a/app/views/onboardings/_header.html.erb
+++ b/app/views/onboardings/_header.html.erb
@@ -1,7 +1,7 @@
 <header class="flex justify-between items-center p-4 pt-safe">
   <%= image_tag "logo.svg", class: "h-[22px]" %>
   <div class="flex items-center gap-2">
-    <%= lucide_icon "log-in", class: "w-5 h-5 shrink-0 text-secondary gap-2" %>
+    <%= icon("log-in", color: "secondary") %>
     <%= button_to t(".sign_out"), session_path(Current.session), method: :delete, class: "text-sm text-primary font-medium" %>
   </div>
 </header>
diff --git a/app/views/onboardings/preferences.html.erb b/app/views/onboardings/preferences.html.erb
index 0af8e27f..95e701dd 100644
--- a/app/views/onboardings/preferences.html.erb
+++ b/app/views/onboardings/preferences.html.erb
@@ -69,7 +69,7 @@
             { data: { action: "onboarding#setLocale" } } %>
 
             <%= family_form.select :currency,
-            currencies_for_select.map { |currency| [ "#{currency.name} (#{currency.iso_code})", currency.iso_code ] },
+            Money::Currency.as_options.map { |currency| [ "#{currency.name} (#{currency.iso_code})", currency.iso_code ] },
             { label: t(".currency"), required: true, selected: params[:currency] || @user.family.currency },
             { data: { action: "onboarding#setCurrency" } } %>
 
diff --git a/app/views/onboardings/show.html.erb b/app/views/onboardings/show.html.erb
index c4af9793..542691a3 100644
--- a/app/views/onboardings/show.html.erb
+++ b/app/views/onboardings/show.html.erb
@@ -5,7 +5,12 @@
       <%= tag.h1 t(".title"), class: "text-3xl font-medium mb-2" %>
       <%= tag.p t(".message"), class: "text-sm text-secondary mb-6" %>
 
-      <%= link_to t(".setup"), profile_onboarding_path, class: "block flex justify-center items-center btn btn--primary w-full" %>
+      <%= render LinkComponent.new(
+        text: t(".setup"),
+        href: profile_onboarding_path,
+        variant: "primary",
+        full_width: true
+      ) %>
     </div>
   </div>
 </div>
diff --git a/app/views/other_assets/edit.html.erb b/app/views/other_assets/edit.html.erb
index 4c38d223..271982fc 100644
--- a/app/views/other_assets/edit.html.erb
+++ b/app/views/other_assets/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "other_assets/form", account: @account, url: other_asset_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: other_asset_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/other_assets/new.html.erb b/app/views/other_assets/new.html.erb
index bff7face..106b2994 100644
--- a/app/views/other_assets/new.html.erb
+++ b/app/views/other_assets/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "other_assets/form", account: @account, url: other_assets_path(return_to: params[:return_to]) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: other_assets_path %>
+  <% end %>
 <% end %>
diff --git a/app/views/other_liabilities/edit.html.erb b/app/views/other_liabilities/edit.html.erb
index 4473faff..8cc6c1be 100644
--- a/app/views/other_liabilities/edit.html.erb
+++ b/app/views/other_liabilities/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: other_liability_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: other_liability_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/other_liabilities/new.html.erb b/app/views/other_liabilities/new.html.erb
index 364a5ecf..f8a1ab46 100644
--- a/app/views/other_liabilities/new.html.erb
+++ b/app/views/other_liabilities/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "other_liabilities/form", account: @account, url: other_liabilities_path(return_to: params[:return_to]) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: other_liabilities_path %>
+  <% end %>
 <% end %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 9d0e21f7..298e48e3 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -1,24 +1,38 @@
 <% content_for :page_header do %>
-  <div class="space-y-1 mb-6 flex justify-between">
+  <div class="space-y-1 mb-6 flex justify-between items-center lg:items-start">
     <div class="space-y-1">
       <h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
       <p class="text-gray-500">Here's what's happening with your finances</p>
     </div>
 
-    <%= link_to new_account_path(step: "method_select", classification: "asset"),
-                class: "btn btn--primary flex items-center justify-center gap-2 rounded-full w-9 h-9 md:hidden",
-                data: { turbo_frame: "modal" } do %>
-                <span class="flex items-center justify-center">
-          <%= lucide_icon("plus", class: "size-5") %>
-        </span>
-    <% end %>
+    <%= render LinkComponent.new(
+      icon: "plus",
+      text: "New",
+      href: new_account_path,
+      frame: :modal,
+      class: "hidden lg:inline-flex"
+    ) %>
+
+    <%= render LinkComponent.new(
+        variant: "icon-inverse",
+        icon: "plus",
+        href: new_account_path,
+        frame: :modal,
+        class: "rounded-full lg:hidden"
+      ) %>
   </div>
 <% end %>
 
 <div class="w-full space-y-6 pb-24">
-  <section class="bg-container py-4 rounded-xl shadow-border-xs">
-    <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @balance_sheet.net_worth_series(period: @period), period: @period } %>
-  </section>
+  <% if Current.family.accounts.any? %>
+    <section class="bg-container py-4 rounded-xl shadow-border-xs px-0.5">
+      <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @balance_sheet.net_worth_series(period: @period), period: @period } %>
+    </section>
+  <% else %>
+    <section class="p-0.5">
+      <%= render "pages/dashboard/no_accounts_graph_placeholder" %>
+    </section>
+  <% end %>
 
   <section>
     <%= render "pages/dashboard/balance_sheet", balance_sheet: @balance_sheet %>
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 0c76d046..e5383278 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -1,9 +1,19 @@
 <%# locals: (balance_sheet:) %>
 
-<div class="space-y-4">
+<div class="space-y-4 overflow-x-auto p-0.5">
   <% balance_sheet.classification_groups.each do |classification_group| %>
     <div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
-      <h2 class="text-lg font-medium"><%= classification_group.display_name %></h2>
+      <h2 class="text-lg font-medium inline-flex items-center gap-1.5">
+        <span>
+          <%= classification_group.display_name %>
+        </span>
+
+        <% if classification_group.account_groups.any? %>
+          <span class="text-secondary">&middot;</span>
+
+          <span class="text-secondary font-medium text-lg"><%= classification_group.total_money.format(precision: 0) %></span>
+        <% end %>
+      </h2>
 
       <% if classification_group.account_groups.any? %>
         <div class="space-y-4">
@@ -23,9 +33,9 @@
           </div>
         </div>
 
-        <div class="bg-surface rounded-xl p-1 space-y-1">
+        <div class="bg-surface rounded-xl p-1 space-y-1 overflow-x-auto">
           <div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
-            <div class="hidden sm:block">Name</div>
+            <div class="w-40">Name</div>
             <div class="ml-auto text-right flex items-center gap-6">
               <div class="w-24">
                 <p>Weight</p>
@@ -36,33 +46,22 @@
             </div>
           </div>
 
-          <div class="shadow-border-xs rounded-lg bg-container">
+          <div class="shadow-border-xs rounded-lg bg-container min-w-fit">
             <% classification_group.account_groups.each do |account_group| %>
               <details class="group rounded-lg open:bg-surface font-medium text-sm">
                 <summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
-                  <div class="items-center gap-4 hidden md:flex">
-                    <%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
+                  <div class="w-40 shrink-0 flex items-center gap-4">
+                    <%= icon("chevron-right", class: "group-open:rotate-90") %>
 
                     <p><%= account_group.name %></p>
                   </div>
 
                   <div class="ml-auto flex items-center text-right gap-6">
-                    <div class="w-24 flex items-center justify-end gap-2">
-                      <div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
-                        <%= render partial: "shared/progress_circle", locals: { progress: account_group.weight, color: account_group.color } %>
-                        <p><%= number_to_percentage(account_group.weight, precision: 0) %></p>
-                      </div>
-                      <div class="flex sm:hidden items-center gap-2">
-                        <div class="flex gap-[3px]">
-                          <% 10.times do |i| %>
-                            <div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
-                          <% end %>
-                        </div>
-                        <p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
-                      </div>
+                    <div class="w-24 shrink-0 flex items-center justify-end gap-2">
+                      <%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
                     </div>
 
-                    <div class="w-40">
+                    <div class="w-40 shrink-0">
                       <p><%= format_money(account_group.total_money) %></p>
                     </div>
                   </div>
@@ -70,39 +69,25 @@
 
                 <div>
                   <% account_group.accounts.each_with_index do |account, idx| %>
-                    <div class="pl-4 sm:pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
-                      <div class="hidden sm:flex sm:items-center sm:gap-3">
+                    <div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
+                      <div class="flex items-center gap-3">
                         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
+
                         <%= link_to account.name, account_path(account) %>
                       </div>
 
                       <div class="ml-auto flex items-center text-right gap-6">
-                        <div class="w-24 flex items-center justify-end gap-2">
-                          <div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
-                            <%= render partial: "shared/progress_circle", locals: { progress: account.weight, color: account_group.color } %>
-                            <p><%= number_to_percentage(account.weight, precision: 0) %></p>
-                          </div>
-                          <div class="flex sm:hidden items-center gap-2">
-                            <div class="flex gap-[3px]">
-                              <% 10.times do |i| %>
-                                <div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
-                              <% end %>
-                            </div>
-                            <p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>
-                          </div>
+                        <div class="w-24 shrink-0 flex items-center justify-end gap-2">
+                          <%= render "pages/dashboard/group_weight", weight: account.weight, color: account_group.color %>
                         </div>
 
-                        <div class="w-40">
+                        <div class="w-40 shrink-0">
                           <p><%= format_money(account.balance_money) %></p>
-                          <div class="sm:hidden text-xs text-secondary truncate max-w-28">
-                            <%= account.name %>
-                          </div>
                         </div>
                       </div>
                     </div>
 
                     <% if idx < account_group.accounts.size - 1 %>
-
                       <div class="pl-[84px] pr-40">
                         <div class="w-full border-subdued border-b"></div>
                       </div>
@@ -115,10 +100,14 @@
         </div>
 
       <% else %>
-        <div class="py-20 flex flex-col items-center">
-          <%= lucide_icon classification_group.icon, class: "w-6 h-6 shrink-0 text-secondary" %>
-          <p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.display_name %></p>
-          <p class="text-secondary text-sm max-w-xs text-center"><%= "You have no #{classification_group.display_name}" %></p>
+        <div class="py-10 flex flex-col items-center">
+          <%= render FilledIconComponent.new(
+            variant: :container,
+            icon: classification_group.icon,
+          ) %>
+
+          <p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.display_name %> yet</p>
+          <p class="text-secondary text-sm text-center"><%= "Add your #{classification_group.display_name} accounts to see a full breakdown" %></p>
         </div>
       <% end %>
     </div>
diff --git a/app/views/pages/dashboard/_group_weight.html.erb b/app/views/pages/dashboard/_group_weight.html.erb
new file mode 100644
index 00000000..65bc4ea6
--- /dev/null
+++ b/app/views/pages/dashboard/_group_weight.html.erb
@@ -0,0 +1,10 @@
+<%# locals: (weight:, color:) %>
+
+<div class="flex items-center gap-2">
+  <div class="flex gap-[3px]">
+    <% 10.times do |i| %>
+      <div class="w-[2px] h-[10px] rounded-lg <%= i < (weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
+    <% end %>
+  </div>
+  <p class="text-sm"><%= number_to_percentage(weight, precision: 2) %></p>
+</div>
diff --git a/app/views/pages/dashboard/_net_worth_chart.html.erb b/app/views/pages/dashboard/_net_worth_chart.html.erb
index dfa22031..a8870cac 100644
--- a/app/views/pages/dashboard/_net_worth_chart.html.erb
+++ b/app/views/pages/dashboard/_net_worth_chart.html.erb
@@ -14,8 +14,13 @@
       <% end %>
     </div>
   </div>
-  <%= form_with url: root_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do |form| %>
-    <%= period_select form: form, selected: period %>
+
+  <%= form_with url: root_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
+    <%= form.select :period,
+                    Period.as_options,
+                    { selected: period.key },
+                    data: { "auto-submit-form-target": "auto" },
+                    class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
   <% end %>
 </div>
 
diff --git a/app/views/pages/dashboard/_no_account_empty_state.html.erb b/app/views/pages/dashboard/_no_account_empty_state.html.erb
deleted file mode 100644
index 0fc0b00c..00000000
--- a/app/views/pages/dashboard/_no_account_empty_state.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="flex justify-center items-center h-[800px]">
-  <div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
-    <%= lucide_icon "layers", class: "w-6 h-6 text-secondary" %>
-
-    <div class="space-y-1 text-sm">
-      <p class="text-primary font-medium"><%= t(".no_account_title") %></p>
-      <p class="text-secondary"><%= t(".no_account_subtitle") %></p>
-    </div>
-
-    <%= link_to new_account_path, class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new_account") %></span>
-    <% end %>
-  </div>
-</div>
diff --git a/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb b/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
new file mode 100644
index 00000000..836a5d69
--- /dev/null
+++ b/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
@@ -0,0 +1,17 @@
+<div class="h-[300px] lg:h-[340px] bg-container shadow-border-xs rounded-xl py-4 flex flex-col items-center justify-center">
+  <div class="space-y-3 text-center flex flex-col items-center">
+    <%= render FilledIconComponent.new(
+      variant: :container,
+      icon: "layers",
+    ) %>
+
+    <p class="text-sm font-medium text-primary">No accounts yet</p>
+    <p class="text-secondary text-sm">Add accounts to display net worth data</p>
+    <%= render LinkComponent.new(
+      text: "Add account",
+      icon: "plus",
+      href: new_account_path,
+      frame: :modal
+    ) %>
+  </div>
+</div>
diff --git a/app/views/pages/early_access.html.erb b/app/views/pages/early_access.html.erb
index 1d2954b7..b710d85f 100644
--- a/app/views/pages/early_access.html.erb
+++ b/app/views/pages/early_access.html.erb
@@ -37,7 +37,7 @@
 
           <p class="mt-4 sm:mt-6">
             <%= link_to early_access_path, class: "w-full block text-center justify-center inline-flex items-center text-white hover:bg-gray-800 p-2 rounded-md text-base transition duration-150", data: { turbo_method: :get } do %>
-              <%= lucide_icon "refresh-cw", class: "w-4 h-4 sm:w-5 sm:h-5 mr-2 text-subdued" %>
+              <%= icon "refresh-cw", class: "mr-2" %>
               <span>Refresh page</span>
             <% end %>
           </p>
diff --git a/app/views/pages/feedback.html.erb b/app/views/pages/feedback.html.erb
index 91636a67..e2e1ab05 100644
--- a/app/views/pages/feedback.html.erb
+++ b/app/views/pages/feedback.html.erb
@@ -8,14 +8,15 @@
       <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
       <span class="text-sm font-medium text-primary text-center">Write a feature request</span>
     <% end %>
+
     <% if self_hosted? %>
       <%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
         <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-primary text-center">File a bug report</span>
       <% end %>
     <% else %>
-      <%= link_to "mailto:hello@maybefinance.com", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover", onclick: "Intercom('showNewMessage'); return false;" do %>
-        <%= lucide_icon "bug", class: "w-8 h-8 mb-2" %>
+      <%= tag.button class: "w-full md:w-1/3 flex flex-col gap-2 items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover", data: { action: "intercom#show" } do %>
+        <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-primary text-center">File a bug report</span>
       <% end %>
     <% end %>
diff --git a/app/views/plaid_items/_plaid_item.html.erb b/app/views/plaid_items/_plaid_item.html.erb
index bd6b20f8..7c3dc8b2 100644
--- a/app/views/plaid_items/_plaid_item.html.erb
+++ b/app/views/plaid_items/_plaid_item.html.erb
@@ -4,9 +4,9 @@
   <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
     <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
       <div class="flex items-center gap-2">
-        <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
+        <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
 
-        <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full bg-black/5">
+        <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full">
           <% if plaid_item.logo.attached? %>
             <%= image_tag plaid_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
           <% else %>
@@ -20,23 +20,23 @@
           <div class="flex items-center gap-2">
             <%= tag.p plaid_item.name, class: "font-medium text-primary" %>
             <% if plaid_item.scheduled_for_deletion? %>
-              <p class="text-red-500 text-sm animate-pulse">(deletion in progress...)</p>
+              <p class="text-destructive text-sm animate-pulse">(deletion in progress...)</p>
             <% end %>
           </div>
           <% if plaid_item.syncing? %>
             <div class="text-secondary flex items-center gap-1">
-              <%= lucide_icon "loader", class: "w-4 h-4 animate-pulse" %>
+              <%= icon "loader", size: "sm", class: "animate-pulse" %>
               <%= tag.span t(".syncing") %>
             </div>
           <% elsif plaid_item.requires_update? %>
-            <div class="text-amber-500 flex items-center gap-1">
-              <%= lucide_icon "alert-triangle", class: "w-4 h-4" %>
+            <div class="text-warning flex items-center gap-1">
+              <%= icon "alert-triangle", size: "sm" %>
               <%= tag.span t(".requires_update") %>
             </div>
           <% elsif plaid_item.sync_error.present? %>
             <div class="text-secondary flex items-center gap-1">
-              <%= lucide_icon "alert-circle", class: "w-4 h-4 text-red-500" %>
-              <%= tag.span t(".error"), class: "text-red-500" %>
+              <%= icon "alert-circle", size: "sm", color: "destructive" %>
+              <%= tag.span t(".error"), class: "text-destructive" %>
             </div>
           <% else %>
             <p class="text-secondary">
@@ -50,69 +50,66 @@
         <% if plaid_item.requires_update? %>
           <% begin %>
             <% link_token = plaid_item.get_update_link_token(webhooks_url: plaid_webhooks_url(plaid_item.plaid_region), redirect_url: accounts_url) %>
-            <button
-              data-controller="plaid"
-              data-action="plaid#open"
-              data-plaid-region-value="<%= plaid_item.plaid_region %>"
-              data-plaid-link-token-value="<%= link_token %>"
-              data-plaid-is-update-value="true"
-              data-plaid-item-id-value="<%= plaid_item.id %>"
-              class="btn btn--secondary flex items-center gap-2">
-              <%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
-              <%= tag.span t(".update") %>
-            </button>
+
+            <%= render ButtonComponent.new(
+              text: t(".update"),
+              icon: "refresh-cw",
+              variant: "secondary",
+              data: {
+                controller: "plaid",
+                action: "plaid#open",
+                plaid_region_value: plaid_item.plaid_region,
+                plaid_link_token_value: link_token,
+                plaid_is_update_value: true,
+                plaid_item_id_value: plaid_item.id
+              }
+            ) %>
             <% rescue PlaidItem::PlaidConnectionLostError %>
             <div class="flex flex-col gap-2">
-              <div class="text-amber-500 flex items-center gap-1">
-                <%= lucide_icon "alert-triangle", class: "w-4 h-4" %>
+              <div class="text-warning flex items-center gap-1">
+                <%= icon "alert-triangle", size: "sm", color: "warning" %>
                 <%= tag.span t(".connection_lost") %>
               </div>
+
               <p class="text-sm text-secondary"><%= t(".connection_lost_description") %></p>
+
               <div class="flex items-center gap-2">
-                <%= button_to plaid_item_path(plaid_item),
-                          method: :delete,
-                          class: "btn btn--danger flex items-center gap-2",
-                          data: {
-                            turbo_confirm: {
-                              title: t(".confirm_title"),
-                              body: t(".confirm_body"),
-                              accept: t(".confirm_accept")
-                            }
-                          } do %>
-                  <%= lucide_icon "trash-2", class: "w-4 h-4" %>
-                  <%= tag.span t(".delete") %>
-                <% end %>
-                <%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-2" do %>
-                  <%= lucide_icon "plus", class: "w-4 h-4" %>
-                  <%= tag.span t(".add_new") %>
-                <% end %>
+                <%= render ButtonComponent.new(
+                  text: t(".delete"),
+                  icon: "trash-2",
+                  variant: "destructive",
+                  href: plaid_item_path(plaid_item),
+                  method: :delete,
+                  confirm: CustomConfirm.for_resource_deletion(plaid_item.name, high_severity: true)
+                ) %>
+
+                <%= render LinkComponent.new(
+                  text: t(".add_new"),
+                  icon: "plus",
+                  variant: "secondary",
+                  href: new_account_path
+                ) %>
               </div>
             </div>
           <% end %>
         <% else %>
-          <%= button_to sync_plaid_item_path(plaid_item), disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?, class: "disabled:text-subdued text-primary flex hover:text-gray-800 items-center text-sm font-medium hover:underline" do %>
-            <%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
-          <% end %>
+          <%= icon(
+            "refresh-cw",
+            as_button: true,
+            href: sync_plaid_item_path(plaid_item),
+            disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?
+          ) %>
         <% end %>
 
-        <%= contextual_menu do %>
-          <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-            <%= button_to plaid_item_path(plaid_item),
-                      method: :delete,
-                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-                      disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?,
-                      data: {
-                        turbo_confirm: {
-                          title: t(".confirm_title"),
-                          body: t(".confirm_body"),
-                          accept: t(".confirm_accept")
-                        }
-                      } do %>
-              <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-              <span><%= t(".delete") %></span>
-            <% end %>
-          </div>
+        <%= render MenuComponent.new do |menu| %>
+          <% menu.with_item(
+            variant: "button",
+            text: t(".delete"),
+            icon: "trash-2",
+            href: plaid_item_path(plaid_item),
+            method: :delete,
+            confirm: CustomConfirm.for_resource_deletion(plaid_item.name, high_severity: true)
+          ) %>
         <% end %>
       </div>
     </summary>
diff --git a/app/views/properties/_overview.html.erb b/app/views/properties/_overview.html.erb
index 95d42c8e..3916fb05 100644
--- a/app/views/properties/_overview.html.erb
+++ b/app/views/properties/_overview.html.erb
@@ -29,5 +29,10 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= link_to "Edit account details", edit_property_path(account), class: "btn btn--ghost", data: { turbo_frame: :modal } %>
+  <%= render LinkComponent.new(
+    text: "Edit account details",
+    href: edit_property_path(account),
+    variant: "ghost",
+    frame: :modal
+  ) %>
 </div>
diff --git a/app/views/properties/edit.html.erb b/app/views/properties/edit.html.erb
index 187208b6..9681e031 100644
--- a/app/views/properties/edit.html.erb
+++ b/app/views/properties/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: property_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: property_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/properties/new.html.erb b/app/views/properties/new.html.erb
index 5cddb5eb..d888f198 100644
--- a/app/views/properties/new.html.erb
+++ b/app/views/properties/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "properties/form", account: @account, url: properties_path(return_to: params[:return_to]) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "properties/form", account: @account, url: properties_path(return_to: params[:return_to]) %>
+  <% end %>
 <% end %>
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
index d0852937..7eb32066 100644
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -19,7 +19,7 @@
 
 <% if @user.errors.present? %>
   <div class="text-red-600 flex items-center gap-2">
-    <%= lucide_icon "circle-alert", class: "w-5 h-5" %>
+    <%= icon("circle-alert") %>
     <p class="text-sm"><%= @user.errors.full_messages.to_sentence %></p>
   </div>
 <% end %>
@@ -56,10 +56,10 @@
               class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
               data-action="click->password-visibility#toggle">
         <div data-password-visibility-target="showIcon">
-          <%= lucide_icon "eye", class: "w-5 h-5 text-gray" %>
+          <%= icon("eye") %>
         </div>
         <div data-password-visibility-target="hideIcon">
-          <%= lucide_icon "eye-off", class: "w-5 h-5 text-gray" %>
+          <%= icon("eye-off") %>
         </div>
       </button>
     </div>
@@ -73,19 +73,19 @@
 
     <div class="space-y-1 my-4">
       <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="length">
-        <%= lucide_icon "check", class: "w-4 h-4" %>
+        <%= icon("check", size: "sm") %>
         <span>Minimum 8 characters</span>
       </div>
       <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="case">
-        <%= lucide_icon "check", class: "w-4 h-4" %>
+        <%= icon("check", size: "sm") %>
         <span>Upper and lowercase letters</span>
       </div>
       <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="number">
-        <%= lucide_icon "check", class: "w-4 h-4" %>
+        <%= icon("check", size: "sm") %>
         <span>A number (0-9)</span>
       </div>
       <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="special">
-        <%= lucide_icon "check", class: "w-4 h-4" %>
+        <%= icon("check", size: "sm") %>
         <span>A special character (!, @, #, $, %, etc)</span>
       </div>
     </div>
diff --git a/app/views/rule/actions/_action.html.erb b/app/views/rule/actions/_action.html.erb
index 84bc8b1c..f41e4857 100644
--- a/app/views/rule/actions/_action.html.erb
+++ b/app/views/rule/actions/_action.html.erb
@@ -19,9 +19,9 @@
     <% end %>
   </div>
 
-  <button type="button"
-          data-action="rule--actions#remove"
-          data-rule--actions-destroy-param="<%= action.persisted? %>">
-    <%= icon("trash-2", color: "gray", size: "sm") %>
-  </button>
+  <%= icon(
+    "trash-2",
+    size: "sm",
+    as_button: true,
+    data: { action: "rule--actions#remove", rule__actions_destroy_param: action.persisted? }) %>
 </li>
diff --git a/app/views/rule/conditions/_condition.html.erb b/app/views/rule/conditions/_condition.html.erb
index 972c3d1d..b79978a1 100644
--- a/app/views/rule/conditions/_condition.html.erb
+++ b/app/views/rule/conditions/_condition.html.erb
@@ -32,9 +32,10 @@
     </div>
   </div>
 
-  <button type="button"
-          data-action="rule--conditions#remove"
-          data-rule--conditions-destroy-param="<%= condition.persisted? %>">
-    <%= icon("trash-2", color: "gray", size: "sm") %>
-  </button>
+  <%= icon(
+    "trash-2",
+    as_button: true,
+    size: "sm",
+    data: { action: "rule--conditions#remove", rule__conditions_destroy_param: condition.persisted? }
+  ) %>
 </li>
diff --git a/app/views/rule/conditions/_condition_group.html.erb b/app/views/rule/conditions/_condition_group.html.erb
index e00df533..67b3eb0f 100644
--- a/app/views/rule/conditions/_condition_group.html.erb
+++ b/app/views/rule/conditions/_condition_group.html.erb
@@ -19,9 +19,12 @@
       <p class="text-sm text-secondary">of the following conditions</p>
     </div>
 
-    <button type="button" data-action="element-removal#remove">
-      <%= icon("trash-2", color: "gray", size: "sm") %>
-    </button>
+    <%= icon(
+      "trash-2",
+      size: "sm",
+      as_button: true,
+      data: { action: "element-removal#remove" }
+    ) %>
   </div>
 
   <%# Sub-condition template, used by Stimulus controller to add new sub-conditions dynamically %>
@@ -37,8 +40,10 @@
     <% end %>
   </ul>
 
-  <button type="button" class="btn btn--ghost" data-action="rule--conditions#addSubCondition">
-    <%= icon("plus", color: "gray", size: "sm") %>
-    <span>Add condition</span>
-  </button>
+  <%= render ButtonComponent.new(
+    text: "Add condition",
+    leading_icon: "plus",
+    variant: "ghost",
+    data: { action: "rule--conditions#addSubCondition" }
+  ) %>
 </li>
diff --git a/app/views/rules/_category_rule_cta.html.erb b/app/views/rules/_category_rule_cta.html.erb
index 54f2b752..66996044 100644
--- a/app/views/rules/_category_rule_cta.html.erb
+++ b/app/views/rules/_category_rule_cta.html.erb
@@ -13,8 +13,9 @@
     <%= f.hidden_field :rule_prompt_dismissed_at, value: Time.current %>
 
     <%= tag.div class:"flex gap-2 justify-end" do %>
-      <%= f.submit "Dismiss", class: "btn btn--secondary" %>
-      <%= tag.a "Create rule", href: new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]), class: "btn btn--primary", data: { turbo_frame: "modal" } %>
+      <%= render ButtonComponent.new(text: "Dismiss", variant: "secondary") %>
+      <% rule_href = new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]) %>
+      <%= render LinkComponent.new(text: "Create rule", variant: "primary", href: rule_href, frame: :modal) %>
     <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/rules/_form.html.erb b/app/views/rules/_form.html.erb
index 5a03eff6..79c0b45e 100644
--- a/app/views/rules/_form.html.erb
+++ b/app/views/rules/_form.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (rule:) %>
 
-<%= styled_form_with model: rule, class: "space-y-4 w-[550px]",
+<%= styled_form_with model: rule, class: "space-y-4",
                      data: { controller: "rules", rule_registry_value: rule.registry.to_json } do |f| %>
 
   <%= f.hidden_field :resource_type, value: rule.resource_type %>
@@ -37,15 +37,8 @@
     </ul>
 
     <div class="flex items-center gap-2">
-      <button type="button" data-action="rules#addCondition" class="btn btn--ghost">
-        <%= icon("plus") %>
-        <span>Add condition</span>
-      </button>
-
-      <button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
-        <%= icon("boxes") %>
-        <span>Add condition group</span>
-      </button>
+      <%= render ButtonComponent.new(text: "Add condition", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addCondition" }) %>
+      <%= render ButtonComponent.new(text: "Add condition group", icon: "boxes", variant: "ghost", type: "button", data: { action: "rules#addConditionGroup" }) %>
     </div>
   </section>
 
@@ -65,13 +58,7 @@
       <% end %>
     </ul>
 
-    <button
-        type="button"
-        data-action="rules#addAction"
-        class="btn btn--ghost">
-      <%= icon("plus") %>
-      <span>Add action</span>
-    </button>
+    <%= render ButtonComponent.new(text: "Add action", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addAction" }) %>
   </section>
 
   <section class="space-y-4">
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index 2e433c72..0a19d9b3 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -42,20 +42,20 @@
   </div>
 
   <div class="flex items-center gap-4">
-    <%= render "shared/toggle_form", model: rule, attribute: :active %>
+    <%= styled_form_with model: rule, data: { controller: "auto-submit-form" } do |f| %>
+      <%= f.toggle :active, { data: { auto_submit_form_target: "auto" } } %>
+    <% end %>
 
-    <%= contextual_menu icon: "more-vertical", id: "chat-menu" do %>
-      <%= contextual_menu_item "Edit", url: edit_rule_path(rule), icon: "pencil", turbo_frame: "modal" %>
-
-      <%= contextual_menu_item "Re-apply rule", url: confirm_rule_path(rule), turbo_frame: "modal", icon: "refresh-cw" %>
-
-      <% turbo_confirm = {
-        title: "Delete rule",
-        body: "Are you sure you want to delete this rule? Data affected by this rule will no longer be automatically updated. This action cannot be undone.",
-        accept: "Delete rule",
-      } %>
-
-      <%= contextual_menu_destructive_item "Delete", rule_path(rule), turbo_confirm: turbo_confirm %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(variant: "link", text: "Edit", href: edit_rule_path(rule), icon: "pencil", data: { turbo_frame: "modal" }) %>
+      <% menu.with_item(variant: "link", text: "Re-apply rule", href: confirm_rule_path(rule), icon: "refresh-cw", data: { turbo_frame: "modal" }) %>
+      <% menu.with_item(
+        variant: "button",
+        text: "Delete",
+        href: rule_path(rule),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion("Rule")) %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/rules/confirm.html.erb b/app/views/rules/confirm.html.erb
index 4749dea8..987a7fa9 100644
--- a/app/views/rules/confirm.html.erb
+++ b/app/views/rules/confirm.html.erb
@@ -1,20 +1,18 @@
-<%= modal(reload_on_close: true) do %>
-  <div class="space-y-4 p-4 max-w-[400px]">
-    <div>
-      <div class="flex justify-between mb-2 gap-4">
-        <h3 class="font-medium text-md">Confirm changes</h3>
-        <button data-action="mousedown->modal#close">
-          <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
-        </button>
-      </div>
-      <div class="text-secondary text-sm">
-        <p>
-          You are about to apply this rule to
-          <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
-          that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
-        </p>
-      </div>
-    </div>
-    <%= button_to "Confirm changes", apply_rule_path(@rule), class: "btn btn--primary w-full justify-center", data: { turbo_frame: "_top"} %>
-  </div>
+<%= render DialogComponent.new(reload_on_close: true) do |dialog| %>
+  <% dialog.with_header(title: "Confirm changes") %>
+
+  <% dialog.with_body do %>
+    <p class="text-secondary text-sm mb-4">
+      You are about to apply this rule to
+      <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
+      that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
+    </p>
+
+    <%= render ButtonComponent.new(
+      text: "Confirm changes",
+      href: apply_rule_path(@rule),
+      method: :post,
+      full_width: true,
+      data: { turbo_frame: "_top" }) %>
+  <% end %>
 <% end %>
diff --git a/app/views/rules/edit.html.erb b/app/views/rules/edit.html.erb
index e5693fa2..6693ac5e 100644
--- a/app/views/rules/edit.html.erb
+++ b/app/views/rules/edit.html.erb
@@ -1,5 +1,8 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= modal_form_wrapper title: "Edit #{@rule.resource_type} rule" do %>
-  <%= render "rules/form", rule: @rule %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "Edit #{@rule.resource_type} rule") %>
+  <% dialog.with_body do %>
+    <%= render "rules/form", rule: @rule %>
+  <% end %>
 <% end %>
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index 39412b4e..13e538b4 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -1,29 +1,32 @@
 <header class="flex items-center justify-between">
   <h1 class="text-primary text-xl font-medium">Rules</h1>
 
-  <% turbo_confirm = {
-    title: "Delete all rules",
-    body: "Are you sure you want to delete all rules? This action cannot be undone.",
-    accept: "Delete all rules",
-  } %>
-
   <div class="flex items-center gap-2">
     <% if @rules.any? %>
-      <%= contextual_menu do %>
-        <%= contextual_menu_destructive_item "Delete all rules", destroy_all_rules_path, turbo_confirm: turbo_confirm %>
+      <%= render MenuComponent.new do |menu| %>
+        <% menu.with_item(
+          variant: "button",
+          text: "Delete all rules",
+          href: destroy_all_rules_path,
+          icon: "trash-2",
+          method: :delete,
+          confirm: CustomConfirm.for_resource_deletion("All rules", high_severity: true)) %>
       <% end %>
     <% end %>
 
-    <%= link_to new_rule_path(resource_type: "transaction"), class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
-      <%= lucide_icon "plus", class: "w-5 h-5" %>
-      <p>New rule</p>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: "New rule",
+      variant: "primary",
+      href: new_rule_path(resource_type: "transaction"),
+      icon: "plus",
+      frame: :modal
+    ) %>
   </div>
 </header>
 
 <% if self_hosted? %>
   <div class="flex items-center gap-2 mb-2 py-4">
-    <%= lucide_icon("circle-alert", class: "w-4 h-4 text-secondary") %>
+    <%= icon("circle-alert", size: "sm") %>
     <p class="text-sm text-secondary">
       AI-enabled rule actions will cost money.  Be sure to filter as narrowly as possible to avoid unnecessary costs.
     </p>
@@ -50,10 +53,13 @@
         <p class="text-sm text-primary font-medium mb-1">No rules yet</p>
         <p class="text-sm text-secondary mb-4">Set up rules to perform actions to your transactions and other data on every account sync.</p>
         <div class="flex items-center gap-2">
-          <%= link_to new_rule_path(resource_type: "transaction"), class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-            <%= lucide_icon("plus", class: "w-5 h-5") %>
-            <span>New rule</span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "New rule",
+            variant: "primary",
+            href: new_rule_path(resource_type: "transaction"),
+            icon: "plus",
+            frame: :modal
+          ) %>
         </div>
       </div>
     </div>
diff --git a/app/views/rules/new.html.erb b/app/views/rules/new.html.erb
index 37205dd9..a39a299b 100644
--- a/app/views/rules/new.html.erb
+++ b/app/views/rules/new.html.erb
@@ -1,5 +1,8 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= modal_form_wrapper title: "New #{@rule.resource_type} rule" do %>
-  <%= render "rules/form", rule: @rule %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "New #{@rule.resource_type} rule") %>
+  <% dialog.with_body do %>
+    <%= render "rules/form", rule: @rule %>
+  <% end %>
 <% end %>
diff --git a/app/views/settings/_settings_nav.html.erb b/app/views/settings/_settings_nav.html.erb
index be1ad416..0a035206 100644
--- a/app/views/settings/_settings_nav.html.erb
+++ b/app/views/settings/_settings_nav.html.erb
@@ -1,11 +1,15 @@
 <div class="pt-safe space-y-4">
   <div class="flex items-center gap-2 p-1.5">
-    <%= link_to previous_path, class: "flex items-center gap-1 text-primary font-medium text-sm" do %>
-      <%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
-      <span class="hidden md:block">Back</span>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: "Back",
+      icon: "chevron-left",
+      href: previous_path,
+      variant: "ghost",
+      class: "hidden md:inline-flex"
+    ) %>
+
     <%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
-      esc
+      <kbd>esc</kbd>
     <% end %>
   </div>
   <nav class="space-y-4 hidden md:block">
@@ -83,13 +87,13 @@
     </section>
 
     <section>
-      <%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 btn btn--ghost text-destructive w-full" do %>
-        <%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
+      <%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
+        <%= icon("log-out", color: "current") %>
         <span><%= t(".logout") %></span>
       <% end %>
     </section>
   </nav>
-  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav" data-preserve-scroll data-controller="preserve-scroll">
+  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav">
 
     <ul class="flex space-y-1">
 
@@ -141,8 +145,8 @@
         <%= render "settings/settings_nav_item", name: t(".feedback_label"), path: feedback_path, icon: "megaphone" %>
       </li>
 
-      <%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 btn btn--ghost text-destructive w-full" do %>
-        <%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
+      <%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
+        <%= icon("log-out") %>
         <span><%= t(".logout") %></span>
       <% end %>
 
diff --git a/app/views/settings/_settings_nav_item.html.erb b/app/views/settings/_settings_nav_item.html.erb
index 6515d117..cbf51311 100644
--- a/app/views/settings/_settings_nav_item.html.erb
+++ b/app/views/settings/_settings_nav_item.html.erb
@@ -1,9 +1,9 @@
 <%# locals: (name:, path:, icon:) %>
 
 <%= link_to path, class: class_names(
-  "flex items-center gap-2 btn btn--ghost whitespace-nowrap",
+  "flex items-center gap-2 whitespace-nowrap px-3 py-2 rounded-lg text-sm",
   page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-surface-hover border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
-  <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
+  <%= icon(icon) if icon %>
   <%= name %>
 <% end %>
diff --git a/app/views/settings/_settings_nav_link_large.html.erb b/app/views/settings/_settings_nav_link_large.html.erb
index beba1e89..73265aed 100644
--- a/app/views/settings/_settings_nav_link_large.html.erb
+++ b/app/views/settings/_settings_nav_link_large.html.erb
@@ -1,18 +1,14 @@
 <%# locals: path, direction, title %>
 <%= link_to path, class: "hidden md:flex w-full bg-container hover:bg-container-inset rounded-xl border border-alpha-black-25 shadow-xs p-4 items-center justify-between" do %>
   <% if direction == 'previous' %>
-    <div class="w-5 h-5 text-secondary">
-      <%= lucide_icon("arrow-left") %>
-    </div>
+    <%= icon("arrow-left") %>
   <% end %>
   <div class="<%= "grow" if direction == "next" %> <%= "text-right" if direction == "previous" %>">
     <span class="block text-sm text-secondary"><%= t(".#{direction}") %></span>
     <span class="block text-sm font-medium text-primary"><%= title %></span>
   </div>
   <% if direction == 'next' %>
-    <div class="w-5 h-5 text-secondary">
-      <%= lucide_icon("arrow-right") %>
-    </div>
+    <%= icon("arrow-right") %>
   <% end %>
 <% end %>
 
@@ -21,9 +17,7 @@
   <div class="flex items-center justify-between">
     <% if direction == 'previous' %>
       <div class="flex items-center gap-3">
-        <div class="w-5 h-5 text-secondary">
-          <%= lucide_icon("arrow-left") %>
-        </div>
+        <%= icon("arrow-left") %>
         <span class="text-sm text-secondary">Back</span>
       </div>
       <div>
@@ -35,9 +29,7 @@
       </div>
       <div class="flex items-center gap-3">
         <span class="text-sm font-medium text-primary"><%= title %></span>
-        <div class="w-5 h-5 text-secondary">
-          <%= lucide_icon("arrow-right") %>
-        </div>
+        <%= icon("arrow-right") %>
       </div>
     <% end %>
   </div>
diff --git a/app/views/settings/_user_avatar.html.erb b/app/views/settings/_user_avatar.html.erb
index 46b322db..67da90cd 100644
--- a/app/views/settings/_user_avatar.html.erb
+++ b/app/views/settings/_user_avatar.html.erb
@@ -1,7 +1,7 @@
-<%# locals: (user:, variant: :thumbnail, lazy: false) %>
+<%# locals: (avatar_url: nil, initials: "U", lazy: false) %>
 
-<% if user.profile_image.attached? %>
-  <%= image_tag user.profile_image.variant(variant), class: "rounded-full w-full h-full object-cover", loading: lazy ? "lazy" : "eager" %>
+<% if avatar_url.present? %>
+  <%= image_tag avatar_url, class: "rounded-full w-full h-full object-cover", loading: lazy ? "lazy" : "eager" %>
 <% else %>
-  <div class="text-white w-full h-full bg-gray-400 rounded-full flex items-center justify-center text-lg uppercase"><%= user.initial %></div>
+  <div class="w-full h-full bg-surface-inset hover:bg-surface-inset-hover text-secondary rounded-full flex items-center justify-center text-lg uppercase"><%= initials %></div>
 <% end %>
diff --git a/app/views/settings/_user_avatar_field.html.erb b/app/views/settings/_user_avatar_field.html.erb
index e19bf1d1..c312b910 100644
--- a/app/views/settings/_user_avatar_field.html.erb
+++ b/app/views/settings/_user_avatar_field.html.erb
@@ -12,7 +12,7 @@
     <div data-profile-image-preview-target="placeholderImage"
          class="h-full w-full flex justify-center  items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
       <div class="h-full w-full flex justify-center items-center bg-container">
-        <%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
+        <%= icon "image-plus", size: "lg" %>
       </div>
     </div>
 
@@ -21,7 +21,7 @@
          class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
       <% if user.profile_image.attached? %>
         <div class="h-full w-full">
-          <%= render "settings/user_avatar", user: user %>
+          <%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
         </div>
       <% end %>
     </div>
@@ -30,16 +30,15 @@
             data-profile-image-preview-target="clearBtn"
             data-action="click->profile-image-preview#clearFileInput"
       class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
-      <%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
+      <%= icon "x", size: "sm" %>
     </button>
   </div>
 
   <div class="md:text-left text-center">
     <%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
 
-    <%= form.label :profile_image, class: "btn btn--outline inline-block", data: { profile_image_preview_target: "uploadButton" } do %>
-
-      <%= lucide_icon "camera", class: "w-5 h-5 mr-2 inline-block", data: { profile_image_preview_target: "cameraIcon" } %>
+    <%= form.label :profile_image, class: "px-3 py-2 rounded-lg text-sm hover:bg-surface-hover border border-secondary inline-flex items-center gap-2 cursor-pointer", data: { profile_image_preview_target: "uploadButton" } do %>
+      <%= icon "camera", data: { profile_image_preview_target: "cameraIcon" } %>
       <span data-profile-image-preview-target="uploadText">
         <%= t(".choose") %> <span class="text-secondary"><%= t(".choose_label") %></span>
       </span>
diff --git a/app/views/settings/billings/show.html.erb b/app/views/settings/billings/show.html.erb
index e683efa1..1b4cc5e2 100644
--- a/app/views/settings/billings/show.html.erb
+++ b/app/views/settings/billings/show.html.erb
@@ -5,7 +5,7 @@
     <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
-          <%= lucide_icon "gem", class: "w-5 h-5 text-secondary" %>
+          <%= icon "gem" %>
         </div>
 
         <div class="text-sm space-y-1">
@@ -19,15 +19,24 @@
       </div>
 
       <% if @user.family.subscribed? || subscription_pending? %>
-        <%= link_to subscription_path, class: "btn btn--secondary flex items-center gap-1", target: "_blank", rel: "noopener" do %>
-          <span>Manage</span>
-          <%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-secondary" %>
-        <% end %>
+        <%= render LinkComponent.new(
+          text: "Manage",
+          icon: "external-link",
+          variant: "primary",
+          icon_position: "right",
+          href: subscription_path,
+          target: "_blank",
+          rel: "noopener"
+        ) %>
       <% else %>
-        <%= link_to new_subscription_path, class: "btn btn--secondary flex items-center gap-1", target: "_blank", rel: "noopener" do %>
-          <span>Subscribe</span>
-          <%= lucide_icon "external-link", class: "w-5 h-5 shrink-0 text-secondary" %>
-        <% end %>
+        <%= render LinkComponent.new(
+          text: "Subscribe",
+          variant: "primary",
+          icon: "external-link",
+          icon_position: "right",
+          href: new_subscription_path,
+          target: "_blank",
+          rel: "noopener") %>
       <% end %>
     </div>
 
diff --git a/app/views/settings/hostings/_invite_code_settings.html.erb b/app/views/settings/hostings/_invite_code_settings.html.erb
index 138f5c95..63a5a335 100644
--- a/app/views/settings/hostings/_invite_code_settings.html.erb
+++ b/app/views/settings/hostings/_invite_code_settings.html.erb
@@ -5,11 +5,11 @@
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
-      <div class="relative inline-block select-none">
-        <%= form.check_box :require_invite_for_signup, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
-        <%= form.label :require_invite_for_signup, "&nbsp;".html_safe, class: "switch" %>
-      </div>
+    <%= styled_form_with model: Setting.new,
+                         url: settings_hosting_path,
+                         method: :patch,
+                         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
+      <%= form.toggle :require_invite_for_signup, { data: { auto_submit_form_target: "auto" } } %>
     <% end %>
   </div>
 
@@ -19,11 +19,11 @@
       <p class="text-secondary text-sm"><%= t(".email_confirmation_description") %></p>
     </div>
 
-    <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
-      <div class="relative inline-block select-none">
-        <%= form.check_box :require_email_confirmation, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
-        <%= form.label :require_email_confirmation, "&nbsp;".html_safe, class: "switch" %>
-      </div>
+    <%= styled_form_with model: Setting.new,
+                         url: settings_hosting_path,
+                         method: :patch,
+                         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
+      <%= form.toggle :require_email_confirmation, { data: { auto_submit_form_target: "auto" } } %>
     <% end %>
   </div>
 
diff --git a/app/views/settings/preferences/show.html.erb b/app/views/settings/preferences/show.html.erb
index 169df40a..fae15f30 100644
--- a/app/views/settings/preferences/show.html.erb
+++ b/app/views/settings/preferences/show.html.erb
@@ -7,7 +7,7 @@
 
       <%= form.fields_for :family do |family_form| %>
         <%= family_form.select :currency,
-            currencies_for_select.map { |currency| [ "#{currency.name} (#{currency.iso_code})", currency.iso_code ] },
+            Money::Currency.as_options.map { |currency| [ "#{currency.name} (#{currency.iso_code})", currency.iso_code ] },
             { label: t(".currency") }, disabled: true %>
 
         <%= family_form.select :locale,
@@ -46,9 +46,9 @@
     <%= form_with model: @user, class: "flex flex-col md:flex-row justify-between items-center gap-4", id: "theme_form",
         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
       <%= form.hidden_field :redirect_to, value: "preferences" %>
-      
+
       <% theme_option_class = "text-center transition-all duration-200 p-3 rounded-lg hover:bg-surface-hover cursor-pointer [&:has(input:checked)]:bg-surface-hover [&:has(input:checked)]:border [&:has(input:checked)]:border-primary [&:has(input:checked)]:shadow-xs" %>
-      
+
       <% [
         { value: "light", image: "light-mode-preview.png" },
         { value: "dark", image: "dark-mode-preview.png" },
@@ -57,8 +57,8 @@
         <%= form.label :"theme_#{theme[:value]}", class: "group" do %>
           <div class="<%= theme_option_class %>">
             <%= image_tag(theme[:image], alt: "#{theme[:value].titleize} Theme Preview", class: "h-44 mb-2") %>
-            <div class="<%= theme[:value] == 'system' ? 'flex items-center gap-2 justify-center' : 'text-sm font-medium text-primary' %>">
-              <%= form.radio_button :theme, theme[:value], checked: @user.theme == theme[:value], class: "sr-only", 
+            <div class="<%= theme[:value] == "system" ? "flex items-center gap-2 justify-center" : "text-sm font-medium text-primary" %>">
+              <%= form.radio_button :theme, theme[:value], checked: @user.theme == theme[:value], class: "sr-only",
                 data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change", action: "theme#updateTheme" } %>
               <%= t(".theme_#{theme[:value]}") %>
             </div>
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index dae79cca..e375f2ad 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -6,17 +6,20 @@
 
     <div>
       <%= form.email_field :email, placeholder: t(".email"), label: t(".email") %>
+
       <% if @user.unconfirmed_email.present? %>
         <p class="mt-2 text-sm text-gray-600">
           You have requested to change your email to <%= @user.unconfirmed_email %>. Please go to your email and confirm for the change to take effect.
         </p>
       <% end %>
+
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
         <%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name") %>
         <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name") %>
       </div>
+
       <div class="flex justify-end mt-4">
-        <%= form.submit t(".save"), class: "btn btn--primary md:w-auto w-full" %>
+        <%= render ButtonComponent.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
       </div>
     </div>
   <% end %>
@@ -40,7 +43,7 @@
       <% @users.each do |user| %>
         <div class="flex gap-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
           <div class="w-9 h-9 shrink-0">
-            <%= render "settings/user_avatar", user: user %>
+            <%= render "settings/user_avatar", avatar_url: user.profile_image.url %>
           </div>
           <p class="text-primary font-medium text-sm"><%= user.display_name %></p>
           <div class="rounded-md bg-surface px-1.5 py-0.5">
@@ -48,17 +51,13 @@
           </div>
           <% if Current.user.admin? && user != Current.user %>
             <div class="ml-auto">
-              <%= button_to settings_profile_path(user_id: user),
-                      method: :delete,
-                      class: "text-red-500 hover:text-red-700",
-                      data: { turbo_confirm: {
-                        title: t(".confirm_remove_member.title"),
-                        body: t(".confirm_remove_member.body", name: user.display_name),
-                        accept: t(".remove_member"),
-                        acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
-                      }} do %>
-                <%= lucide_icon "x", class: "w-5 h-5" %>
-              <% end %>
+              <%= render ButtonComponent.new(
+                variant: "icon",
+                icon: "x",
+                href: settings_profile_path(user_id: user),
+                method: :delete,
+                confirm: CustomConfirm.for_resource_deletion(user.display_name, high_severity: true)
+              ) %>
             </div>
           <% end %>
         </div>
@@ -89,26 +88,23 @@
                              class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
                   <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
                     <span data-clipboard-target="iconDefault">
-                      <%= lucide_icon "copy", class: "w-5 h-5" %>
+                      <%= icon "copy" %>
                     </span>
                     <span class="hidden" data-clipboard-target="iconSuccess">
-                      <%= lucide_icon "check", class: "w-5 h-5" %>
+                      <%= icon "check" %>
                     </span>
                   </button>
                 </div>
               <% end %>
+
               <% if Current.user.admin? %>
-                <%= button_to invitation_path(invitation),
-                        method: :delete,
-                        class: "text-red-500 hover:text-red-700",
-                        data: { turbo_confirm: {
-                          title: t(".confirm_remove_invitation.title"),
-                          body: t(".confirm_remove_invitation.body", email: invitation.email),
-                          accept: t(".remove_invitation"),
-                          acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
-                        }} do %>
-                  <%= lucide_icon "x", class: "w-5 h-5" %>
-                <% end %>
+                <%= render ButtonComponent.new(
+                  variant: "icon",
+                  icon: "x",
+                  href: invitation_path(invitation),
+                  method: :delete,
+                  confirm: CustomConfirm.for_resource_deletion(invitation.email, high_severity: true)
+                ) %>
               <% end %>
             </div>
           </div>
@@ -118,7 +114,7 @@
         <%= link_to new_invitation_path,
                 class: "bg-container-inset flex items-center justify-center gap-2 text-secondary mt-1 hover:bg-container-inset-hover rounded-lg px-4 py-2 w-full text-center",
                 data: { turbo_frame: :modal } do %>
-          <%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
+          <%= icon("plus") %>
           <%= t(".invite_member") %>
         <% end %>
       <% end %>
@@ -134,16 +130,14 @@
           <h3 class="font-medium text-primary"><%= t(".reset_account") %></h3>
           <p class="text-secondary text-sm"><%= t(".reset_account_warning") %></p>
         </div>
-        <%=
-              button_to t(".reset_account"), reset_user_path(@user), method: :delete,
-                class: "w-full md:w-auto btn btn--destructive",
-                data: { turbo_confirm: {
-                  title: t(".confirm_reset.title"),
-                  body: t(".confirm_reset.body"),
-                  accept: t(".reset_account"),
-                  acceptClass: "w-full btn btn--destructive  text-primary rounded-xl text-center p-[10px]  mb-2"
-                }}
-        %>
+
+        <%= render ButtonComponent.new(
+          text: t(".reset_account"),
+          variant: "destructive",
+          href: reset_user_path(@user),
+          method: :delete,
+          confirm: CustomConfirm.for_resource_deletion("Account", high_severity: true)
+        ) %>
       </div>
     <% end %>
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
@@ -151,16 +145,14 @@
         <h3 class="font-medium text-primary"><%= t(".delete_account") %></h3>
         <p class="text-secondary text-sm"><%= t(".delete_account_warning") %></p>
       </div>
-      <%=
-            button_to t(".delete_account"), user_path(@user), method: :delete,
-              class: "w-full md:w-auto btn btn--destructive",
-              data: { turbo_confirm: {
-                title: t(".confirm_delete.title"),
-                body: t(".confirm_delete.body"),
-                accept: t(".delete_account"),
-                acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
-              }}
-      %>
+
+      <%= render ButtonComponent.new(
+        text: t(".delete_account"),
+        variant: "destructive",
+        href: user_path(@user),
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion("your account", high_severity: true)
+      ) %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/settings/securities/show.html.erb b/app/views/settings/securities/show.html.erb
index e1bd3af3..1ac38d73 100644
--- a/app/views/settings/securities/show.html.erb
+++ b/app/views/settings/securities/show.html.erb
@@ -5,7 +5,7 @@
     <div class="p-3 shadow-border-xs bg-container rounded-lg md:flex md:justify-between md:items-center">
       <div class="flex items-center gap-3">
         <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
-          <%= lucide_icon "shield-check", class: "w-5 h-5 text-secondary" %>
+          <%= icon "shield-check" %>
         </div>
 
         <div class="text-sm space-y-1">
@@ -21,18 +21,24 @@
 
       <div class="mt-4 md:mt-0">
         <% if Current.user.otp_required? %>
-          <%= button_to t(".disable_mfa"), disable_mfa_path,
-              method: :delete,
-              class: "w-full md:w-auto btn btn--secondary flex items-center gap-1 justify-center",
-              data: { turbo_confirm: {
-                title: t(".disable_mfa_confirm"),
-                body: t(".disable_mfa_confirm"),
-                accept: t(".disable_mfa"),
-                acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
-              } } %>
+          <%= render ButtonComponent.new(
+            text: t(".disable_mfa"),
+            variant: "secondary",
+            href: disable_mfa_path,
+            method: :delete,
+            confirm: CustomConfirm.new(
+              title: t(".disable_mfa_confirm"),
+              body: t(".disable_mfa_confirm"),
+              btn_text: t(".disable_mfa"),
+              destructive: true
+            )
+          ) %>
         <% else %>
-          <%= link_to t(".enable_mfa"), new_mfa_path,
-              class: "w-full md:w-auto btn btn--primary flex items-center gap-1 justify-center" %>
+          <%= render LinkComponent.new(
+            text: t(".enable_mfa"),
+            variant: "primary",
+            href: new_mfa_path
+          ) %>
         <% end %>
       </div>
     </div>
diff --git a/app/views/shared/_circle_logo.html.erb b/app/views/shared/_circle_logo.html.erb
deleted file mode 100644
index 0aba2373..00000000
--- a/app/views/shared/_circle_logo.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<%# locals: (name:, hex: nil, size: "md") %>
-
-<% size_classes = {
-  "sm" => "w-6 h-6",
-  "md" => "w-9 h-9",
-  "lg" => "w-10 h-10",
-  "full" => "w-full h-full"
-} %>
-
-<%= tag.div style: mixed_hex_styles(hex || "#1570EF"),
-            class: [size_classes[size], "flex shrink-0 items-center justify-center rounded-full"] do %>
-  <%= tag.span (name.presence&.first || "T").upcase, class: ["font-medium", size == "sm" ? "text-xs" : "text-sm"] %>
-<% end %>
diff --git a/app/views/shared/_confirm_modal.html.erb b/app/views/shared/_confirm_modal.html.erb
deleted file mode 100644
index ec24a1e0..00000000
--- a/app/views/shared/_confirm_modal.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl m-auto">
-  <form method="dialog" class="p-4 bg-container">
-    <div class="flex flex-col mb-4">
-      <div class="flex justify-between mb-2 gap-4">
-        <h3 id="turbo-confirm-title" class="font-medium text-primary text-md"><%= t(".title") %></h3>
-        <button value="cancel">
-          <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
-        </button>
-      </div>
-      <div id="turbo-confirm-body" class="text-secondary text-sm">
-        <%= t(".body_html") %>
-      </div>
-    </div>
-    <button id="turbo-confirm-accept" class="btn btn--outline-destructive justify-center w-full mb-2" value="confirm"><%= t(".accept") %></button>
-  </form>
-</dialog>
diff --git a/app/views/shared/_disclosure.html.erb b/app/views/shared/_disclosure.html.erb
deleted file mode 100644
index c4e59d9c..00000000
--- a/app/views/shared/_disclosure.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<%# locals: (title:, content:, open: true) %>
-
-<details class="group space-y-2" <%= "open" if open %>>
-  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
-                        uppercase text-secondary bg-surface focus-visible:outline-hidden">
-    <h3><%= title %></h3>
-    <%= lucide_icon "chevron-down",
-              class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>
-  </summary>
-
-  <%= content %>
-</details>
diff --git a/app/views/shared/_drawer.html.erb b/app/views/shared/_drawer.html.erb
deleted file mode 100644
index e133fa0a..00000000
--- a/app/views/shared/_drawer.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<%# locals: (content:, reload_on_close: false) %>
-
-<%= turbo_frame_tag "drawer" do %>
-  <dialog class="ml-auto bg-container md:shadow-border-xs md:rounded-2xl  max-w-screen max-h-screen md:max-w-[480px] h-full w-full md:mt-4 md:mr-4 pt-safe focus-visible:outline-hidden"
-    data-controller="modal"
-    data-action="mousedown->modal#clickOutside"
-    data-modal-reload-on-close-value="<%= reload_on_close %>">
-    <div class="flex flex-col h-full gap-4">
-      <div class="flex justify-end items-center p-4">
-        <div data-action="mousedown->modal#close" class="cursor-pointer p-2">
-          <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
-        </div>
-      </div>
-      <div class="flex-1 overflow-y-auto px-4 pb-4">
-        <%= content %>
-      </div>
-    </div>
-  </dialog>
-<% end %>
diff --git a/app/views/shared/_form_errors.html.erb b/app/views/shared/_form_errors.html.erb
index 30e37a97..f2d703e2 100644
--- a/app/views/shared/_form_errors.html.erb
+++ b/app/views/shared/_form_errors.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (model:) %>
 
 <div class="flex items-center gap-2">
-  <%= lucide_icon("alert-circle", class: "text-red-500 w-4 h-4 shrink-0") %>
-  <p class="text-red-500 text-sm"><%= model.errors.full_messages.to_sentence %></p>
+  <%= icon("alert-circle", size: "sm", color: "destructive") %>
+  <p class="text-destructive text-sm"><%= model.errors.full_messages.to_sentence %></p>
 </div>
diff --git a/app/views/shared/_icon.html.erb b/app/views/shared/_icon.html.erb
deleted file mode 100644
index 82f999de..00000000
--- a/app/views/shared/_icon.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= lucide_icon key, class: class_names(size_class, color_class, "shrink-0") %>
diff --git a/app/views/shared/_icon_custom.html.erb b/app/views/shared/_icon_custom.html.erb
deleted file mode 100644
index ae3b6935..00000000
--- a/app/views/shared/_icon_custom.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>
diff --git a/app/views/shared/_icon_image.html.erb b/app/views/shared/_icon_image.html.erb
deleted file mode 100644
index b782dc3f..00000000
--- a/app/views/shared/_icon_image.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
deleted file mode 100644
index 3fdcb70a..00000000
--- a/app/views/shared/_modal.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<%# locals: (content:, reload_on_close:, overflow_visible: false) -%>
-
-<%= turbo_frame_tag "modal" do %>
-  <%= tag.dialog(
-    class: class_names(
-      "focus:outline-none md:m-auto bg-container rounded-none md:rounded-2xl max-w-screen max-h-screen md:max-w-max w-full h-full md:h-fit md:w-auto shadow-border-xs",
-      overflow_visible ? "overflow-visible" : "overflow-auto"
-    ),
-    data: {
-      controller: "modal",
-      action: "mousedown->modal#clickOutside",
-      modal_reload_on_close_value: reload_on_close
-    }
-  ) do %>
-    <div class="flex flex-col h-full md:h-auto mt-safe">
-      <%= content %>
-    </div>
-  <% end %>
-<% end %>
diff --git a/app/views/shared/_modal_form.html.erb b/app/views/shared/_modal_form.html.erb
deleted file mode 100644
index fb6d21c8..00000000
--- a/app/views/shared/_modal_form.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<%# locals: (title:, content:, subtitle: nil, overflow_visible: false) %>
-
-<%= modal overflow_visible: overflow_visible do %>
-  <article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
-    <div class="space-y-2">
-      <header class="flex justify-between items-center">
-        <h2 class="font-medium text-primary"><%= title %></h2>
-        <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
-      </header>
-
-      <% if subtitle.present? %>
-        <%= tag.p subtitle, class: "text-secondary font-light" %>
-      <% end %>
-    </div>
-
-    <%= content %>
-  </article>
-<% end %>
diff --git a/app/views/shared/_money_field.html.erb b/app/views/shared/_money_field.html.erb
index 9b83820a..ac8e6e55 100644
--- a/app/views/shared/_money_field.html.erb
+++ b/app/views/shared/_money_field.html.erb
@@ -44,7 +44,7 @@
     <% unless options[:hide_currency] %>
       <div>
         <%= form.select currency_method,
-                      currencies_for_select.map(&:iso_code),
+                      Money::Currency.as_options.map(&:iso_code),
                       { inline: true, selected: currency.iso_code },
                       {
                         class: "w-fit pr-5 disabled:text-subdued form-field__input",
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
index 73a6ddea..afc047de 100644
--- a/app/views/shared/_pagination.html.erb
+++ b/app/views/shared/_pagination.html.erb
@@ -7,11 +7,11 @@
         <%= link_to pagy_url_for(pagy, pagy.prev),
               data: { turbo_frame: :_top },
               class: "inline-flex items-center p-2 text-sm font-medium text-secondary bg-container-inset hover:border-secondary hover:text-secondary" do %>
-          <%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
+          <%= icon("chevron-left") %>
         <% end %>
       <% else %>
         <div class="inline-flex items-center p-2 text-sm font-medium hover:border-secondary">
-          <%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
+          <%= icon("chevron-left") %>
         </div>
       <% end %>
     </div>
@@ -39,11 +39,11 @@
         <%= link_to pagy_url_for(pagy, pagy.next),
               data: { turbo_frame: :_top },
               class: "inline-flex items-center p-2 text-sm font-medium text-secondary hover:border-secondary hover:text-secondary" do %>
-          <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+          <%= icon("chevron-right") %>
         <% end %>
       <% else %>
         <div class="inline-flex items-center p-2 text-sm font-medium hover:border-secondary">
-          <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+          <%= icon("chevron-right") %>
         </div>
       <% end %>
     </div>
diff --git a/app/views/shared/_subscribe_modal.html.erb b/app/views/shared/_subscribe_modal.html.erb
index 3afedaab..62d7d72a 100644
--- a/app/views/shared/_subscribe_modal.html.erb
+++ b/app/views/shared/_subscribe_modal.html.erb
@@ -1,25 +1,26 @@
-<div data-controller="modal" data-modal-open-value="true" class="h-full flex items-center justify-center bg-container/90" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-  <div class="w-[400px] rounded-xl relative overflow-hidden">
-    <div class="bg-container shadow-border-xs rounded-xl relative z-10">
-      <div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
-        <div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
-          <div class="p-4 pt-2 rounded-xl">
-            <div class="flex justify-center">
-              <%= image_tag "maybe-plus-logo.png", class: "w-20" %>
-            </div>
-
-            <h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
-
-            <div class="text-secondary text-sm space-y-4 mb-5">
-              <p>Nobody likes paywalls, but we need feedback from users willing to pay for Maybe. </p>
-
-              <p>To continue using the app, please subscribe. In this early beta testing phase, we require that you upgrade within one hour to claim your spot.</p>
-            </div>
-
-            <%= link_to "Upgrade to Maybe+", new_subscription_path, class: "btn btn--primary text-center w-full block" %>
-          </div>
+<%= render DialogComponent.new do |dialog| %>
+  <div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
+    <div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
+      <div class="p-4 pt-2 rounded-xl">
+        <div class="flex justify-center">
+          <%= image_tag "maybe-plus-logo.png", class: "w-20" %>
         </div>
+
+        <h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
+
+        <div class="text-secondary text-sm space-y-4 mb-5">
+          <p>Nobody likes paywalls, but we need feedback from users willing to pay for Maybe. </p>
+
+          <p>To continue using the app, please subscribe. In this early beta testing phase, we require that you upgrade within one hour to claim your spot.</p>
+        </div>
+
+        <%= render LinkComponent.new(
+              text: "Upgrade to Maybe+",
+              href: new_subscription_path,
+              variant: "primary",
+              full_width: true
+            ) %>
       </div>
     </div>
   </div>
-</div>
+<% end %>
diff --git a/app/views/shared/_toggle_form.html.erb b/app/views/shared/_toggle_form.html.erb
deleted file mode 100644
index a5d1ed25..00000000
--- a/app/views/shared/_toggle_form.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<%# locals: (model:, attribute:, turbo_frame: nil) %>
-
-<%= form_with model: model,
-              namespace: model.id,
-              class: "flex items-center",
-              data: { controller: "auto-submit-form", turbo_frame: turbo_frame } do |form| %>
-  <div class="relative inline-block select-none">
-    <%= form.check_box attribute, { class: "sr-only peer", data: { "auto-submit-form-target": "auto" } } %>
-    <%= form.label attribute, "&nbsp;".html_safe, class: "switch" %>
-  </div>
-<% end %>
diff --git a/app/views/shared/_transaction_type_tabs.html.erb b/app/views/shared/_transaction_type_tabs.html.erb
index 0c55b6cc..c2b53b2f 100644
--- a/app/views/shared/_transaction_type_tabs.html.erb
+++ b/app/views/shared/_transaction_type_tabs.html.erb
@@ -1,24 +1,24 @@
 <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
-  <% active_tab = local_assigns[:active_tab] || 'expense' %>
+  <% active_tab = local_assigns[:active_tab] || "expense" %>
 
-  <%= link_to new_transaction_path(nature: 'outflow'),
+  <%= link_to new_transaction_path(nature: "outflow"),
               data: { turbo_frame: :modal },
               class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'expense' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
-    <%= lucide_icon "minus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
+    <%= icon "minus-circle" %>
     <%= tag.span t("shared.transaction_tabs.expense") %>
   <% end %>
 
-  <%= link_to new_transaction_path(nature: 'inflow'),
+  <%= link_to new_transaction_path(nature: "inflow"),
               data: { turbo_frame: :modal },
               class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'income' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
-    <%= lucide_icon "plus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
+    <%= icon "plus-circle" %>
     <%= tag.span t("shared.transaction_tabs.income") %>
   <% end %>
 
   <%= link_to new_transfer_path,
               data: { turbo_frame: :modal },
               class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'transfer' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
-    <%= lucide_icon "arrow-right-left", class: "w-4 h-4 md:w-5 md:h-5" %>
+    <%= icon "arrow-right-left" %>
     <%= tag.span t("shared.transaction_tabs.transfer") %>
   <% end %>
 </fieldset>
diff --git a/app/views/shared/_trend_change.html.erb b/app/views/shared/_trend_change.html.erb
index b2503a7a..ad9c44cf 100644
--- a/app/views/shared/_trend_change.html.erb
+++ b/app/views/shared/_trend_change.html.erb
@@ -8,7 +8,7 @@
       <%= trend.value.is_a?(Money) ? format_money(trend.value) : trend.value.round(2) %>
     </span>
     <% unless trend.percent.infinite? %>
-      <span class="font-mono">(<%= lucide_icon(trend.icon, class: "w-4 h-4 align-text-bottom inline") %><%= trend.percent_formatted %>)</span>
+      <span class="font-mono">(<%= icon(trend.icon, size: "sm", color: "current", class: "mb-0.5 inline") %><%= trend.percent_formatted %>)</span>
     <% end %>
     <span class="text-secondary">
       <%= " #{comparison_label}" if defined?(comparison_label) && comparison_label.present? %>
diff --git a/app/views/shared/notifications/_alert.html.erb b/app/views/shared/notifications/_alert.html.erb
index 63269f8c..28373aa8 100644
--- a/app/views/shared/notifications/_alert.html.erb
+++ b/app/views/shared/notifications/_alert.html.erb
@@ -4,13 +4,13 @@
             data: { controller: "element-removal" } do %>
   <div class="h-5 w-5 shrink-0 p-px text-primary">
     <div class="flex h-full items-center justify-center rounded-full bg-destructive">
-      <%= lucide_icon "x", class: "w-3 h-3" %>
+      <%= icon "x", size: "xs" %>
     </div>
   </div>
 
   <%= tag.p message, class: "text-primary text-sm font-medium" %>
 
   <div class="ml-auto">
-    <%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
+    <%= icon "x", data: { action: "click->element-removal#remove" }, class: "cursor-pointer" %>
   </div>
 <% end %>
diff --git a/app/views/shared/notifications/_cta.html.erb b/app/views/shared/notifications/_cta.html.erb
index f1fa2496..6b38ff53 100644
--- a/app/views/shared/notifications/_cta.html.erb
+++ b/app/views/shared/notifications/_cta.html.erb
@@ -4,7 +4,7 @@
   <%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
     <div class="h-5 w-5 shrink-0 p-px text-primary">
       <div class="flex h-full items-center justify-center rounded-full bg-success">
-        <%= lucide_icon "check", class: "w-3 h-3" %>
+        <%= icon "check", size: "xs" %>
       </div>
     </div>
 
diff --git a/app/views/shared/notifications/_loading.html.erb b/app/views/shared/notifications/_loading.html.erb
index 2a444028..c16771c0 100644
--- a/app/views/shared/notifications/_loading.html.erb
+++ b/app/views/shared/notifications/_loading.html.erb
@@ -2,7 +2,7 @@
 
 <%= tag.div id: id, class: "flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs" do %>
   <div class="h-5 w-5 shrink-0 p-px text-primary">
-    <%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
+    <%= icon "loader", class: "animate-pulse" %>
   </div>
 
   <%= tag.p message, class: "text-primary text-sm font-medium" %>
diff --git a/app/views/shared/notifications/_notice.html.erb b/app/views/shared/notifications/_notice.html.erb
index 76c1ea60..d4931716 100644
--- a/app/views/shared/notifications/_notice.html.erb
+++ b/app/views/shared/notifications/_notice.html.erb
@@ -1,14 +1,13 @@
-<%# locals: (message:, description: nil, cta: nil) %>
+<%# locals: (message:, description: nil) %>
 
 <%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs",
             data: {
               controller: "element-removal",
               action: "animationend->element-removal#remove"
             } do %>
-
   <div class="h-5 w-5 shrink-0 p-px text-primary">
     <div class="flex h-full items-center justify-center rounded-full bg-success">
-      <%= lucide_icon "check", class: "w-3 h-3" %>
+      <%= icon "check", size: "xs" %>
     </div>
   </div>
 
@@ -20,29 +19,18 @@
         <%= tag.p description, class: "text-secondary text-sm" %>
       <% end %>
     </div>
-
-    <% if cta %>
-      <%= tag.div class:"flex gap-2 justify-end" do %>
-        <%= tag.button cta[:decline][:label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %>
-        <%= tag.a cta[:accept][:label], href: cta[:accept][:href], class: "btn btn--primary" %>
-      <% end %>
-    <% end %>
   </div>
 
   <div class="ml-auto">
     <div class="h-5 shrink-0">
-      <% unless cta %>
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
-          <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
-          <circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
-        </svg>
-      <% end %>
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
+        <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
+        <circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
+      </svg>
     </div>
   </div>
 
-  <% unless cta %>
-    <div class="absolute -top-2 -right-2">
-      <%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
-    </div>
-  <% end %>
+  <div class="absolute -top-2 -right-2">
+    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
+  </div>
 <% end %>
diff --git a/app/views/tag/deletions/new.html.erb b/app/views/tag/deletions/new.html.erb
index afcd2d29..57f4d14b 100644
--- a/app/views/tag/deletions/new.html.erb
+++ b/app/views/tag/deletions/new.html.erb
@@ -1,21 +1,32 @@
-<%= modal_form_wrapper title: t(".delete_tag"), subtitle: t(".explanation", tag_name: @tag.name) do %>
-  <%= styled_form_with url: tag_deletions_path(@tag),
-                       class: "space-y-4",
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".delete_tag"), subtitle: t(".explanation", tag_name: @tag.name)) %>
+
+  <% dialog.with_body do %>
+    <%= styled_form_with url: tag_deletions_path(@tag),
                        data: {
                          turbo: false,
                          controller: "deletion",
-                         deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                         deletion_safe_action_class: "form-field__submit border border-transparent",
                          deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
                          deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", tag_name: @tag.name) } do |f| %>
-    <%= f.collection_select :replacement_tag_id,
+      <%= f.collection_select :replacement_tag_id,
                             Current.family.tags.alphabetically.without(@tag),
                             :id, :name,
-                            { prompt: t(".replacement_tag_prompt"), label: t(".tag") },
-                            { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
+                            { prompt: t(".replacement_tag_prompt"), label: t(".tag"), container_class: "mb-4" },
+                            data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
 
-    <%= f.submit t(".delete_and_leave_uncategorized", tag_name: @tag.name),
-                 class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                 data: { deletion_target: "submitButton" } %>
+      <%= render ButtonComponent.new(
+        variant: "destructive",
+        text: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
+        full_width: true,
+        data: { deletion_target: "destructiveSubmitButton" }
+      ) %>
+
+      <%= render ButtonComponent.new(
+        text: "Delete and reassign",
+        data: { deletion_target: "safeSubmitButton" },
+        hidden: true,
+        full_width: true
+      ) %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 96c61dea..654e4fdb 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -8,21 +8,27 @@
     </p>
   </div>
   <div class="justify-self-end">
-    <%= contextual_menu do %>
-      <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-        <%= contextual_menu_modal_action_item t(".edit"), edit_tag_path(tag) %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(variant: "link", text: t(".edit"), href: edit_tag_path(tag), icon: "pencil", data: { turbo_frame: "modal" }) %>
 
-        <% if tag.transactions.any? %>
-          <%= link_to new_tag_deletion_path(tag),
-                    class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-                    data: { turbo_frame: :modal } do %>
-            <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-            <span><%= t(".delete") %></span>
-          <% end %>
-        <% else %>
-          <%= contextual_menu_destructive_item t(".delete"), tag_path(tag), turbo_confirm: nil %>
-        <% end %>
-      </div>
+      <% if tag.transactions.any? %>
+        <% menu.with_item(
+          variant: "link",
+          text: t(".delete"),
+          href: new_tag_deletion_path(tag),
+          icon: "trash-2",
+          frame: :modal
+        ) %>
+      <% else %>
+        <% menu.with_item(
+          variant: "button",
+          text: t(".delete"),
+          href: tag_path(tag),
+          icon: "trash-2",
+          method: :delete,
+          confirm: CustomConfirm.for_resource_deletion(tag.name)
+        ) %>
+      <% end %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb
index 75ad4a0f..3453189d 100644
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit") do %>
-  <%= render "form", tag: @tag %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit")) %>
+  <% dialog.with_body do %>
+    <%= render "form", tag: @tag %>
+  <% end %>
 <% end %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 1b05c051..d12bd356 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -1,10 +1,13 @@
 <header class="flex items-center justify-between">
   <h1 class="text-primary text-xl font-medium"><%= t(".tags") %></h1>
 
-  <%= link_to new_tag_path, class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
-    <%= lucide_icon "plus", class: "w-5 h-5" %>
-    <p><%= t(".new") %></p>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: t(".new"),
+    variant: "primary",
+    href: new_tag_path,
+    icon: "plus",
+    frame: :modal
+  ) %>
 </header>
 
 <div class="bg-container shadow-border-xs rounded-xl p-4">
@@ -26,10 +29,13 @@
     <div class="flex justify-center items-center py-20">
       <div class="text-center flex flex-col items-center max-w-[300px]">
         <p class="text-primary mb-1 font-medium text-sm"><%= t(".empty") %></p>
-        <%= link_to new_tag_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
-          <%= lucide_icon("plus", class: "w-5 h-5") %>
-          <span><%= t(".new") %></span>
-        <% end %>
+
+        <%= render LinkComponent.new(
+          text: t(".new"),
+          icon: "plus",
+          href: new_tag_path,
+          frame: :modal
+        ) %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/tags/new.html.erb b/app/views/tags/new.html.erb
index ad97c79d..19508471 100644
--- a/app/views/tags/new.html.erb
+++ b/app/views/tags/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".new") do %>
-  <%= render "form", tag: @tag %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".new")) %>
+  <% dialog.with_body do %>
+    <%= render "form", tag: @tag %>
+  <% end %>
 <% end %>
diff --git a/app/views/trades/_header.html.erb b/app/views/trades/_header.html.erb
index a649ebf5..7fcf1a47 100644
--- a/app/views/trades/_header.html.erb
+++ b/app/views/trades/_header.html.erb
@@ -26,7 +26,7 @@
   <% trade = entry.trade %>
 
   <div class="mb-2">
-    <%= disclosure t(".overview") do %>
+    <%= render DisclosureComponent.new(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <dl class="space-y-3 px-3 py-2">
           <div class="flex items-center justify-between text-sm">
diff --git a/app/views/trades/_trade.html.erb b/app/views/trades/_trade.html.erb
index eb558dd3..2a4c32f0 100644
--- a/app/views/trades/_trade.html.erb
+++ b/app/views/trades/_trade.html.erb
@@ -12,9 +12,12 @@
 
         <div class="max-w-full">
           <%= tag.div class: ["flex items-center gap-2"] do %>
-            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-600/5 text-gray-600">
-              <%= entry.name.first.upcase %>
-            </div>
+            <%= render FilledIconComponent.new(
+              variant: :text,
+              text: entry.name,
+              size: "sm",
+              rounded: true
+            ) %>
 
             <div class="truncate">
               <%= link_to entry.name,
diff --git a/app/views/trades/new.html.erb b/app/views/trades/new.html.erb
index d3df030f..381a809e 100644
--- a/app/views/trades/new.html.erb
+++ b/app/views/trades/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "trades/form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "trades/form", entry: @entry %>
+  <% end %>
 <% end %>
diff --git a/app/views/trades/show.html.erb b/app/views/trades/show.html.erb
index 565f8c8b..97c48e2d 100644
--- a/app/views/trades/show.html.erb
+++ b/app/views/trades/show.html.erb
@@ -1,11 +1,12 @@
-<%= drawer do %>
-  <%= render "trades/header", entry: @entry %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <%= render "trades/header", entry: @entry %>
+  <% end %>
 
   <% trade = @entry.trade %>
 
-  <div class="space-y-2">
-    <!-- Details Section -->
-    <%= disclosure t(".details") do %>
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".details"), open: true) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: trade_path(@entry),
@@ -42,8 +43,7 @@
       </div>
     <% end %>
 
-    <!-- Additional Section -->
-    <%= disclosure t(".additional") do %>
+    <% dialog.with_section(title: t(".additional")) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: trade_path(@entry),
@@ -58,8 +58,7 @@
       </div>
     <% end %>
 
-    <!-- Settings Section -->
-    <%= disclosure t(".settings") do %>
+    <% dialog.with_section(title: t(".settings")) do %>
       <div class="pb-4">
         <!-- Exclude Trade Form -->
         <%= styled_form_with model: @entry,
@@ -72,13 +71,7 @@
               <p class="text-secondary"><%= t(".exclude_subtitle") %></p>
             </div>
 
-            <div class="relative inline-block select-none">
-              <%= f.check_box :excluded,
-                      class: "sr-only peer",
-                      "data-auto-submit-form-target": "auto" %>
-              <label for="entry_excluded"
-                         class="switch"></label>
-            </div>
+            <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
           </div>
         <% end %>
 
@@ -98,5 +91,5 @@
         </div>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
index 19c9acaa..733af700 100644
--- a/app/views/transactions/_form.html.erb
+++ b/app/views/transactions/_form.html.erb
@@ -1,4 +1,6 @@
-<%= styled_form_with model: @entry, url: transactions_path, class: "space-y-4 text-subdued", data: { controller: "transaction-form" } do |f| %>
+<%# locals: (entry:, income_categories:, expense_categories:) %>
+
+<%= styled_form_with model: entry, url: transactions_path, class: "space-y-4 text-subdued", data: { controller: "transaction-form" } do |f| %>
   <% if entry.errors.any? %>
     <%= render "shared/form_errors", model: entry %>
   <% end %>
@@ -21,13 +23,13 @@
 
     <%= f.money_field :amount, label: t(".amount"), required: true %>
     <%= f.fields_for :entryable do |ef| %>
-      <% categories = params[:nature] == "inflow" ? @income_categories : @expense_categories %>
+      <% categories = params[:nature] == "inflow" ? income_categories : expense_categories %>
       <%= ef.collection_select :category_id, categories, :id, :name, { prompt: t(".category_prompt"), label: t(".category") } %>
     <% end %>
     <%= f.date_field :date, label: t(".date"), required: true, min: Entry.min_supported_date, max: Date.current, value: Date.current %>
   </section>
 
-  <%= disclosure t(".details"), default_open: false do %>
+  <%= render DisclosureComponent.new(title: t(".details")) do %>
     <%= f.fields_for :entryable do |ef| %>
       <%= ef.select :tag_ids,
                     Current.family.tags.alphabetically.pluck(:name, :id),
diff --git a/app/views/transactions/_header.html.erb b/app/views/transactions/_header.html.erb
index 5b3e75b8..565892d5 100644
--- a/app/views/transactions/_header.html.erb
+++ b/app/views/transactions/_header.html.erb
@@ -13,7 +13,7 @@
     </h3>
 
     <% if entry.transaction.transfer? %>
-      <%= lucide_icon "arrow-left-right", class: "text-secondary mt-1 w-5 h-5" %>
+      <%= icon "arrow-left-right", class: "mt-1" %>
     <% end %>
   </div>
 
diff --git a/app/views/transactions/_selection_bar.html.erb b/app/views/transactions/_selection_bar.html.erb
index fada06aa..65e2ce12 100644
--- a/app/views/transactions/_selection_bar.html.erb
+++ b/app/views/transactions/_selection_bar.html.erb
@@ -8,15 +8,15 @@
   <div class="flex items-center gap-1 text-secondary">
     <%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
     <%= link_to new_transactions_bulk_update_path,
-                class: "p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md",
+                class: "p-1.5 group hover:bg-inverse flex items-center justify-center rounded-md",
                 title: "Edit",
                 data: { turbo_frame: "bulk_transaction_edit_drawer" } do %>
-      <%= lucide_icon "pencil-line", class: "w-5 group-hover:text-white" %>
+      <%= icon "pencil-line", class: "group-hover:text-inverse" %>
     <% end %>
 
     <%= form_with url: transactions_bulk_deletion_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
-      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
-        <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-inverse flex items-center justify-center rounded-md" title="Delete">
+        <%= icon "trash-2", class: "group-hover:text-inverse" %>
       </button>
     <% end %>
   </div>
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index 4aa8ddd1..1ad74980 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -26,9 +26,12 @@
                   class: "w-6 h-6 rounded-full",
                   loading: "lazy" %>
             <% else %>
-              <%= render "shared/circle_logo",
-                  name: entry.name,
-                  size: "sm" %>
+              <%= render FilledIconComponent.new(
+                variant: :text,
+                text: entry.name,
+                size: "sm",
+                rounded: true
+              ) %>
             <% end %>
 
             <div class="truncate">
@@ -45,8 +48,8 @@
                       ) %>
 
                   <% if entry.excluded %>
-                    <span title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
-                      <%= lucide_icon "asterisk", class: "w-4 h-4 shrink-0 text-orange-500" %>
+                    <span class="text-orange-500" title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
+                      <%= icon "asterisk", size: "sm", color: "current" %>
                     </span>
                   <% end %>
 
diff --git a/app/views/transactions/_transfer_match.html.erb b/app/views/transactions/_transfer_match.html.erb
index a406e7f4..a1ff6a76 100644
--- a/app/views/transactions/_transfer_match.html.erb
+++ b/app/views/transactions/_transfer_match.html.erb
@@ -3,7 +3,7 @@
 <div id="<%= dom_id(transaction, "transfer_match") %>" class="flex items-center gap-1">
   <% if transaction.transfer.confirmed? %>
     <span title="<%= transaction.transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
-      <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
+      <%= icon "link-2", size: "sm", class: "text-indigo-600" %>
     </span>
   <% elsif transaction.transfer.pending? %>
     <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
@@ -14,7 +14,7 @@
                     method: :patch,
                     class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
                     title: "Confirm match" do %>
-      <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
+      <%= icon "check", size: "sm", class: "text-indigo-400 hover:text-indigo-600" %>
     <% end %>
 
     <%= button_to transfer_path(transaction.transfer, transfer: { status: "rejected" }),
@@ -22,7 +22,7 @@
                     data: { turbo: false },
                     class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
                     title: "Reject match" do %>
-      <%= lucide_icon "x", class: "w-4 h-4 text-subdued hover:text-gray-600" %>
+      <%= icon "x", size: "sm", class: "text-subdued hover:text-gray-600" %>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/transactions/bulk_updates/new.html.erb b/app/views/transactions/bulk_updates/new.html.erb
index 80c04526..072605b6 100644
--- a/app/views/transactions/bulk_updates/new.html.erb
+++ b/app/views/transactions/bulk_updates/new.html.erb
@@ -1,63 +1,25 @@
-<%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
-  <dialog data-controller="modal"
-          data-action="mousedown->modal#clickOutside"
-    class="bg-container shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] h-full max-w-[480px] w-full mt-4 mr-4 ml-auto">
+<%= render DialogComponent.new(variant: "drawer", frame: "bulk_transaction_edit_drawer") do |dialog| %>
+  <% dialog.with_header(title: "Edit transactions", data: { bulk_select_target: "bulkEditDrawerHeader" }) %>
+
+  <% dialog.with_body do %>
     <%= styled_form_with url: transactions_bulk_update_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
-      <div class="flex h-full flex-col justify-between p-4 gap-4">
-        <div>
-          <div class="flex h-9 items-center justify-end">
-            <div data-action="mousedown->modal#close" class="cursor-pointer">
-              <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
-            </div>
-          </div>
-
-          <div class="flex flex-col overflow-scroll">
-            <div>
-              <header class="mb-4 space-y-1">
-                <h3 class="text-2xl font-medium" data-bulk-select-target="bulkEditDrawerTitle">
-                  Edit transactions
-                </h3>
-              </header>
-
-              <div class="space-y-2">
-                <details class="group space-y-2" open>
-                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-                    <h4>Overview</h4>
-                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-                  </summary>
-
-                  <div class="pb-6 space-y-2">
-                    <%= form.date_field :date, label: "Date", max: Date.current %>
-                  </div>
-                </details>
-
-                <details class="group space-y-2" open>
-                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-                    <h4>Details</h4>
-                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-                  </summary>
-
-                  <div class="space-y-2">
-                    <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: "Select a category", label: "Category", class: "text-subdued" } %>
-                    <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: "Select a merchant", label: "Merchant", class: "text-subdued" } %>
-                    <%= form.select :tag_ids, Current.family.tags.alphabetically.pluck(:name, :id), { include_blank: "None", multiple: true, label: "Tags", container_class: "h-40" } %>
-                    <%= form.text_area :notes, label: "Notes", placeholder: "Enter a note that will be applied to selected transactions", rows: 5 %>
-                  </div>
-                </details>
-              </div>
-            </div>
-          </div>
+      <% dialog.with_section(title: "Overview", open: true) do %>
+        <div class="pb-6 space-y-2">
+          <%= form.date_field :date, label: "Date", max: Date.current %>
         </div>
+      <% end %>
 
-        <div class="flex justify-end items-center gap-2">
-          <%= link_to "Cancel", transactions_path, class: "btn btn--ghost" %>
-
-          <%= tag.button "Save",
-                         type: "button",
-                         data: { "bulk-select-scope-param": "bulk_update", action: "bulk-select#submitBulkRequest" },
-                         class: "btn btn--primary" %>
+      <% dialog.with_section(title: "Transactions", open: true) do %>
+        <div class="space-y-2">
+          <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: "Select a category", label: "Category", class: "text-subdued" } %>
+          <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: "Select a merchant", label: "Merchant", class: "text-subdued" } %>
+          <%= form.select :tag_ids, Current.family.tags.alphabetically.pluck(:name, :id), { include_blank: "None", multiple: true, label: "Tags", container_class: "h-40" } %>
+          <%= form.text_area :notes, label: "Notes", placeholder: "Enter a note that will be applied to selected transactions", rows: 5 %>
         </div>
-      </div>
+      <% end %>
     <% end %>
-  </dialog>
+  <% end %>
+
+  <% dialog.with_action(cancel_action: true, text: "Cancel", variant: "ghost") %>
+  <% dialog.with_action(text: "Save", data: { bulk_select_scope_param: "bulk_update", action: "bulk-select#submitBulkRequest" }) %>
 <% end %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 7ed329aa..6ab1cc44 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -3,30 +3,43 @@
     <h1 class="text-xl">Transactions</h1>
     <div class="flex items-center gap-5">
       <div class="flex items-center gap-2">
-        <%= contextual_menu do %>
-          <% if Rails.env.development? %>
-            <%= button_to "Dev only: Sync all", sync_all_accounts_path, class: "btn btn--ghost w-full" %>
-          <% end %>
-          <%= contextual_menu_item "New rule", url: new_rule_path(resource_type: "transaction"), icon: "plus", turbo_frame: :modal %>
-          <%= contextual_menu_item "Edit rules", url: rules_path, icon: "git-branch", turbo_frame: :_top %>
-          <%= contextual_menu_modal_action_item t(".edit_categories"), categories_path, icon: "shapes", turbo_frame: :_top %>
-          <%= contextual_menu_modal_action_item t(".edit_tags"), tags_path, icon: "tags", turbo_frame: :_top %>
-          <%= contextual_menu_modal_action_item t(".edit_merchants"), family_merchants_path, icon: "store", turbo_frame: :_top %>
-          <%= contextual_menu_modal_action_item t(".edit_imports"), imports_path, icon: "hard-drive-upload", turbo_frame: :_top %>
-          <%= contextual_menu_modal_action_item t(".import"), new_import_path, icon: "download", turbo_frame: "modal", class_name: "md:!hidden" %>
+        <%= render MenuComponent.new do |menu| %>
+          <% menu.with_item(variant: "button", text: "Dev only: Sync all", href: sync_all_accounts_path, method: :post, icon: "refresh-cw") %>
+          <% menu.with_item(variant: "link", text: "New rule", href: new_rule_path(resource_type: "transaction"), icon: "plus", data: { turbo_frame: :modal }) %>
+          <% menu.with_item(variant: "link", text: "Edit rules", href: rules_path, icon: "git-branch", data: { turbo_frame: :_top }) %>
+          <% menu.with_item(variant: "link", text: "Edit categories", href: categories_path, icon: "shapes", data: { turbo_frame: :_top }) %>
+          <% menu.with_item(variant: "link", text: "Edit tags", href: tags_path, icon: "tags", data: { turbo_frame: :_top }) %>
+          <% menu.with_item(variant: "link", text: "Edit merchants", href: family_merchants_path, icon: "store", data: { turbo_frame: :_top }) %>
+          <% menu.with_item(variant: "link", text: "Edit imports", href: imports_path, icon: "hard-drive-upload", data: { turbo_frame: :_top }) %>
+          <% menu.with_item(variant: "link", text: "Import", href: new_import_path, icon: "download", data: { turbo_frame: "modal", class_name: "md:!hidden" }) %>
         <% end %>
 
-        <%= link_to new_import_path, class: "btn btn--outline flex items-center gap-2 hidden md:flex", data: { turbo_frame: "modal" } do %>
-          <%= lucide_icon("download", class: "text-secondary w-4 h-4") %>
-          <p class="text-sm font-medium text-primary"><%= t(".import") %></p>
-        <% end %>
+        <div class="hidden md:flex">
+          <%= render LinkComponent.new(
+            text: t(".import"),
+            icon: "download",
+            variant: "outline",
+            href: new_import_path,
+            frame: :modal,
+          ) %>
+        </div>
 
-        <%= link_to new_transaction_path, class: "btn btn--primary flex items-center justify-center gap-2 rounded-full md:rounded-lg w-9 h-9 md:w-auto md:h-auto", data: { turbo_frame: :modal } do %>
-          <span class="flex items-center justify-center">
-            <%= lucide_icon("plus", class: "w-5 h-5") %>
-          </span>
-          <p class="text-sm font-medium hidden md:block">New transaction</p>
-        <% end %>
+        <%= render LinkComponent.new(
+            text: "New transaction",
+            icon: "plus",
+            variant: "primary",
+            href: new_transaction_path,
+            frame: :modal,
+            class: "hidden md:inline-flex"
+          ) %>
+
+        <%= render LinkComponent.new(
+            icon: "plus",
+            variant: "icon-inverse",
+            href: new_transaction_path,
+            frame: :modal,
+            class: "rounded-full md:hidden"
+          ) %>
       </div>
     </div>
   </header>
diff --git a/app/views/transactions/new.html.erb b/app/views/transactions/new.html.erb
index 3ad75f36..c9183822 100644
--- a/app/views/transactions/new.html.erb
+++ b/app/views/transactions/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: "New transaction" do %>
-  <%= render "form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "New transaction") %>
+  <% dialog.with_body do %>
+    <%= render "form", entry: @entry, income_categories: @income_categories, expense_categories: @expense_categories %>
+  <% end %>
 <% end %>
diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb
index dfffd7fd..eba44cb5 100644
--- a/app/views/transactions/searches/_form.html.erb
+++ b/app/views/transactions/searches/_form.html.erb
@@ -8,7 +8,7 @@
   <div class="flex gap-2 mb-4">
     <div class="grow">
       <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-secondary focus-within:border-secondary">
-        <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
+        <%= icon("search") %>
         <%= form.text_field :search,
                             placeholder: "Search transactions ...",
                             value: @q[:search],
@@ -16,13 +16,20 @@
                             "data-auto-submit-form-target": "auto" %>
       </div>
     </div>
-    <div data-controller="menu" class="relative">
-      <button id="transaction-filters-button" data-menu-target="button" type="button" class="btn btn--outline flex items-center gap-2">
-        <%= lucide_icon("list-filter", class: "w-5 h-5 text-secondary") %>
-        <p class="text-sm font-medium text-primary md:block hidden">Filter</p>
-      </button>
 
-      <%= render "transactions/searches/menu", form: form %>
-    </div>
+    <%= render MenuComponent.new(variant: "button", no_padding: true) do |menu| %>
+      <% menu.with_button(
+        id: "transaction-filters-button",
+        type: "button",
+        text: "Filter",
+        variant: "outline",
+        icon: "list-filter",
+        data: { menu_target: "button" }
+      ) %>
+
+      <% menu.with_custom_content do %>
+        <%= render "transactions/searches/menu", form: form %>
+      <% end %>
+    <% end %>
   </div>
 <% end %>
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index cdcd2536..3d11a37a 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/app/views/transactions/searches/_menu.html.erb
@@ -1,47 +1,46 @@
 <%# locals: (form:) %>
 
-<div
-  id="transaction-filters-menu"
-  data-menu-target="content"
-  data-controller="tabs"
-  data-tabs-active-class="bg-surface text-primary"
-  data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
-  class="hidden absolute flex flex-col md:flex-row z-10 h-auto md:h-80 w-full md:w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg overflow-hidden">
-  <div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible">
-    <% transaction_search_filters.each do |filter| %>
-      <button
-        class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 min-w-max md:w-full"
-        type="button"
-        data-id="<%= filter[:key] %>"
-        data-tabs-target="btn"
-        data-action="tabs#select">
-        <%= lucide_icon(filter[:icon], class: "w-5 h-5") %>
-        <span class="text-sm font-medium"><%= t(".#{filter[:key]}") %></span>
-      </button>
-    <% end %>
-  </div>
-  <div class="flex flex-col grow">
-    <div class="grow p-3 border-b border-secondary overflow-y-auto max-h-[50vh] md:max-h-none">
+<%= render TabsComponent.new(
+  variant: :unstyled,
+  active_tab: get_default_transaction_search_filter[:key],
+  active_btn_classes: "bg-surface text-primary",
+  inactive_btn_classes: "text-secondary hover:bg-container-inset"
+) do |tabs| %>
+  <div id="transaction-filters-menu" class="flex flex-col md:flex-row h-[50vh] lg:max-h-auto z-10 md:h-80 w-full md:w-[540px] top-12 right-0 overflow-hidden">
+    <%= tabs.with_nav(classes: "shrink-0 flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible") do |nav| %>
       <% transaction_search_filters.each do |filter| %>
-        <div id="<%= filter[:key] %>" data-tabs-target="tab">
-          <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
-        </div>
+        <%= nav.with_btn(id: filter[:key], label: filter[:label], classes: "w-full px-3 py-2 flex gap-2 items-center rounded-md") do %>
+          <%= icon(filter[:icon]) %>
+          <%= tag.span(filter[:label], class: "text-sm font-medium") %>
+        <% end %>
       <% end %>
-    </div>
+    <% end %>
 
-    <div class="flex justify-between items-center gap-2 bg-container p-3">
-      <div>
-        <% if @q.present? %>
-          <%= link_to t(".clear_filters"), transactions_path(clear_filters: true), class: "btn btn--ghost" %>
+    <div class="flex flex-col grow overflow-y-auto">
+      <div class="grow p-3 border-b border-secondary overflow-y-auto">
+        <% transaction_search_filters.each do |filter| %>
+          <%= tabs.with_panel(tab_id: filter[:key]) do %>
+            <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
+          <% end %>
         <% end %>
       </div>
 
-      <div>
-        <%= button_tag type: "reset", data: { action: "menu#close" }, class: "py-2 px-3 bg-container-inset rounded-lg text-sm text-primary font-medium" do %>
-          <%= t(".cancel") %>
-        <% end %>
-        <%= form.submit t(".apply"), name: nil, class: "py-2 px-3 bg-primary hover:bg-primary-dark rounded-lg text-sm text-primary font-medium cursor-pointer" %>
+      <div class="flex justify-between items-center gap-2 bg-container p-3 shrink-0">
+        <div>
+          <% if @q.present? %>
+            <%= render LinkComponent.new(
+            text: t(".clear_filters"),
+            variant: "ghost",
+            href: transactions_path(clear_filters: true),
+          ) %>
+          <% end %>
+        </div>
+
+        <div>
+          <%= render ButtonComponent.new(text: t(".cancel"), type: "button", variant: "ghost", data: { action: "menu#close" }) %>
+          <%= render ButtonComponent.new(text: t(".apply")) %>
+        </div>
       </div>
     </div>
   </div>
-</div>
+<% end %>
diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb
index 6e516dc7..8182dedc 100644
--- a/app/views/transactions/searches/filters/_account_filter.html.erb
+++ b/app/views/transactions/searches/filters/_account_filter.html.erb
@@ -2,7 +2,7 @@
 <div data-controller="list-filter">
   <div class="relative">
     <input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
-    <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
+    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.accounts.alphabetically.each do |account| %>
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb
index 5d974b88..6b848ed9 100644
--- a/app/views/transactions/searches/filters/_category_filter.html.erb
+++ b/app/views/transactions/searches/filters/_category_filter.html.erb
@@ -2,7 +2,7 @@
 <div data-controller="list-filter">
   <div class="relative">
     <input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
+    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% family_categories.each do |category| %>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index 986255f1..3166374c 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb
@@ -2,7 +2,7 @@
 <div data-controller="list-filter">
   <div class="relative">
     <input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
+    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.assigned_merchants.alphabetically.each do |merchant| %>
@@ -16,7 +16,14 @@
                            merchant.name,
                            nil %>
         <%= form.label :merchants, value: merchant.name, class: "text-sm text-primary flex items-center gap-2" do %>
-          <%= circle_logo(merchant.name, hex: merchant.color, size: "sm") %>
+          <%= render FilledIconComponent.new(
+            variant: :text,
+            hex_color: merchant.color,
+            text: merchant.name,
+            size: "sm",
+            rounded: true
+          ) %>
+
           <%= merchant.name %>
         <% end %>
       </div>
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb
index dfde1053..8cf20adc 100644
--- a/app/views/transactions/searches/filters/_tag_filter.html.erb
+++ b/app/views/transactions/searches/filters/_tag_filter.html.erb
@@ -2,7 +2,7 @@
 <div data-controller="list-filter">
   <div class="relative">
     <input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
+    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.tags.alphabetically.each do |tag| %>
@@ -16,7 +16,14 @@
                            tag.name,
                            nil %>
         <%= form.label :tags, value: tag.name, class: "text-sm text-primary flex items-center gap-2" do %>
-          <%= circle_logo(tag.name, hex: tag.color || Tag::UNCATEGORIZED_COLOR, size: "sm") %>
+          <%= render FilledIconComponent.new(
+            variant: :text,
+            hex_color: tag.color || Tag::UNCATEGORIZED_COLOR,
+            text: tag.name,
+            size: "sm",
+            rounded: true
+          ) %>
+
           <%= tag.name %>
         <% end %>
       </div>
diff --git a/app/views/transactions/show.html.erb b/app/views/transactions/show.html.erb
index 7306ffc0..c5e65334 100644
--- a/app/views/transactions/show.html.erb
+++ b/app/views/transactions/show.html.erb
@@ -1,9 +1,10 @@
-<%= drawer do %>
-  <%= render "transactions/header", entry: @entry %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <%= render "transactions/header", entry: @entry %>
+  <% end %>
 
-  <div class="space-y-2">
-    <!-- Overview Section -->
-    <%= disclosure t(".overview") do %>
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: transaction_path(@entry),
@@ -47,8 +48,7 @@
       </div>
     <% end %>
 
-    <!-- Details Section -->
-    <%= disclosure t(".details"), default_open: false do %>
+    <% dialog.with_section(title: t(".details")) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: transaction_path(@entry),
@@ -95,10 +95,8 @@
       </div>
     <% end %>
 
-    <!-- Settings Section -->
-    <%= disclosure t(".settings") do %>
+    <% dialog.with_section(title: t(".settings")) do %>
       <div class="pb-4">
-
         <%= styled_form_with model: @entry,
               url: transaction_path(@entry),
               class: "p-3",
@@ -109,13 +107,7 @@
               <p class="text-secondary">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
             </div>
 
-            <div class="relative inline-block select-none">
-              <%= f.check_box :excluded,
-                      class: "sr-only peer",
-                      "data-auto-submit-form-target": "auto" %>
-              <label for="entry_excluded"
-                         class="switch"></label>
-            </div>
+            <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
           </div>
         <% end %>
 
@@ -125,10 +117,13 @@
             <p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
           </div>
 
-          <%= link_to new_transaction_transfer_match_path(@entry), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: :modal } do %>
-            <%= lucide_icon "arrow-left-right", class: "w-4 h-4 shrink-0" %>
-            <span class="whitespace-nowrap">Open matcher</span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "Open matcher",
+            icon: "arrow-left-right",
+            variant: "outline",
+            href: new_transaction_transfer_match_path(@entry),
+            frame: :modal
+          ) %>
         </div>
 
         <!-- Delete Transaction Form -->
@@ -138,14 +133,16 @@
             <p class="text-secondary"><%= t(".delete_subtitle") %></p>
           </div>
 
-          <%= button_to t(".delete"),
-                  entry_path(@entry),
-                  method: :delete,
-                  class:  "rounded-lg px-3 py-2 text-red-500 text-sm
-                           font-medium border border-secondary",
-                  data:   { turbo_confirm: true, turbo_frame: "_top" } %>
+          <%= render ButtonComponent.new(
+            text: t(".delete"),
+            variant: "outline-destructive",
+            href: entry_path(@entry),
+            method: :delete,
+            confirm: CustomConfirm.for_resource_deletion("transaction"),
+            frame: "_top"
+          ) %>
         </div>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/transfer_matches/new.html.erb b/app/views/transfer_matches/new.html.erb
index d8a7e3f4..e4709e30 100644
--- a/app/views/transfer_matches/new.html.erb
+++ b/app/views/transfer_matches/new.html.erb
@@ -1,60 +1,63 @@
-<%= modal_form_wrapper title: "Match transfer or payment" do %>
-  <%= styled_form_with(
-        url: transaction_transfer_match_path(@entry),
-        scope: :transfer_match,
-        class: "space-y-8",
-        data: { turbo_frame: :_top }
-      ) do |f| %>
-    <section class="space-y-4">
-      <div class="space-y-2">
-        <h2 class="text-sm font-medium text-gray-700">
-          <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
-        </h2>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "Match transfer or payment") %>
+  <% dialog.with_body do %>
+    <%= styled_form_with(
+          url: transaction_transfer_match_path(@entry),
+          scope: :transfer_match,
+          class: "space-y-8",
+          data: { turbo_frame: :_top }
+        ) do |f| %>
+      <section class="space-y-4">
+        <div class="space-y-2">
+          <h2 class="text-sm font-medium text-gray-700">
+            <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
+          </h2>
 
-        <% if @entry.amount.positive? %>
-          <%= f.select(
-                :entry_id,
-                [[entry_name_detailed(@entry), @entry.id]],
-                {
-                  label: "Outflow transaction",
-                  selected: @entry.id,
-                },
-                disabled: true
-              ) %>
-        <% else %>
-          <%= render "transfer_matches/matching_fields",
-                      form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.outflow_transaction.entry }, accounts: @accounts %>
-        <% end %>
+          <% if @entry.amount.positive? %>
+            <%= f.select(
+                  :entry_id,
+                  [[entry_name_detailed(@entry), @entry.id]],
+                  {
+                    label: "Outflow transaction",
+                    selected: @entry.id,
+                  },
+                  disabled: true
+                ) %>
+          <% else %>
+            <%= render "transfer_matches/matching_fields",
+                        form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.outflow_transaction.entry }, accounts: @accounts %>
+          <% end %>
+        </div>
+      </section>
+
+      <div class="flex justify-center py-2">
+        <%= icon "arrow-down" %>
       </div>
-    </section>
 
-    <div class="flex justify-center py-2">
-      <%= lucide_icon "arrow-down", class: "w-5 h-5" %>
-    </div>
+      <section class="space-y-4">
+        <div class="space-y-2">
+          <h2 class="text-sm font-medium text-gray-700">
+            <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
+          </h2>
 
-    <section class="space-y-4">
-      <div class="space-y-2">
-        <h2 class="text-sm font-medium text-gray-700">
-          <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
-        </h2>
+          <% if @entry.amount.negative? %>
+            <%= f.select(
+                  :entry_id,
+                  [[entry_name_detailed(@entry), @entry.id]],
+                  {
+                    label: "Inflow transaction",
+                    selected: @entry.id,
+                  },
+                  disabled: true
+                ) %>
+          <% else %>
+            <%= render "transfer_matches/matching_fields",
+                        form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.inflow_transaction.entry }, accounts: @accounts %>
+          <% end %>
+        </div>
+      </section>
 
-        <% if @entry.amount.negative? %>
-          <%= f.select(
-                :entry_id,
-                [[entry_name_detailed(@entry), @entry.id]],
-                {
-                  label: "Inflow transaction",
-                  selected: @entry.id,
-                },
-                disabled: true
-              ) %>
-        <% else %>
-          <%= render "transfer_matches/matching_fields",
-                      form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.inflow_transaction.entry }, accounts: @accounts %>
-        <% end %>
-      </div>
-    </section>
-
-    <%= f.submit "Create transfer match", data: { turbo_submits_with: "Saving..."} %>
+      <%= f.submit "Create transfer match" %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/transfers/_account_links.html.erb b/app/views/transfers/_account_links.html.erb
index f7ba4365..33390b31 100644
--- a/app/views/transfers/_account_links.html.erb
+++ b/app/views/transfers/_account_links.html.erb
@@ -1,24 +1,7 @@
 <%# locals: (transfer:, is_inflow: false) %>
 <div class="flex items-center gap-1">
   <% first_account, second_account = is_inflow ? [transfer.to_account, transfer.from_account] : [transfer.from_account, transfer.to_account] %>
-
-  <%# Check if first_account exists before creating link %>
-  <% if first_account %>
-    <%= link_to first_account.name, account_path(first_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
-  <% else %>
-    <span class="text-warning text-xs italic" title="Transfer ID: <%= transfer.id %>">
-      Data Error: Missing account
-    </span>
-  <% end %>
-
-  <%= lucide_icon is_inflow ? "arrow-left" : "arrow-right", class: "w-4 h-4 shrink-0" %>
-
-  <%# Check if second_account exists before creating link %>
-  <% if second_account %>
-    <%= link_to second_account.name, account_path(second_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
-  <% else %>
-    <span class="text-warning text-xs italic" title="Transfer ID: <%= transfer.id %>">
-      Data Error: Missing account
-    </span>
-  <% end %>
+  <%= link_to first_account.name, account_path(first_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
+  <%= icon(is_inflow ? "arrow-left" : "arrow-right", size: "sm") %>
+  <%= link_to second_account.name, account_path(second_account, tab: "activity"), class: "hover:underline", data: { turbo_frame: "_top" } %>
 </div>
diff --git a/app/views/transfers/_form.html.erb b/app/views/transfers/_form.html.erb
index 26344579..d584cb7c 100644
--- a/app/views/transfers/_form.html.erb
+++ b/app/views/transfers/_form.html.erb
@@ -1,7 +1,7 @@
 <%= styled_form_with model: transfer, class: "space-y-4", data: { turbo_frame: "_top", controller: "transfer-form" } do |f| %>
   <% if transfer.errors.present? %>
-    <div class="text-red-600 flex items-center gap-2">
-      <%= lucide_icon "circle-alert", class: "w-5 h-5" %>
+    <div class="text-destructive flex items-center gap-2">
+      <%= icon "circle-alert", size: "sm" %>
       <p class="text-sm"><%= @transfer.errors.full_messages.to_sentence %></p>
     </div>
   <% end %>
diff --git a/app/views/transfers/new.html.erb b/app/views/transfers/new.html.erb
index f1a7ae0d..5456f1b3 100644
--- a/app/views/transfers/new.html.erb
+++ b/app/views/transfers/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "form", transfer: @transfer %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", transfer: @transfer %>
+  <% end %>
 <% end %>
diff --git a/app/views/transfers/show.html.erb b/app/views/transfers/show.html.erb
index 911f382b..42b05219 100644
--- a/app/views/transfers/show.html.erb
+++ b/app/views/transfers/show.html.erb
@@ -1,27 +1,28 @@
-<%= drawer do %>
-  <header class="mb-4 space-y-1">
-    <div class="flex items-center gap-4">
-      <h3 class="font-medium">
-        <span class="text-2xl">
-          <%= format_money @transfer.amount_abs %>
-        </span>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <div class="space-y-1">
+      <div class="flex items-center gap-4">
+        <h3 class="font-medium">
+          <span class="text-2xl">
+            <%= format_money @transfer.amount_abs %>
+          </span>
 
-        <span class="text-lg text-secondary">
-          <%= @transfer.amount_abs.currency.iso_code %>
-        </span>
-      </h3>
+          <span class="text-lg text-secondary">
+            <%= @transfer.amount_abs.currency.iso_code %>
+          </span>
+        </h3>
 
-      <%= lucide_icon "arrow-left-right", class: "text-secondary mt-1 w-5 h-5" %>
+        <%= icon "arrow-left-right", size: "sm" %>
+      </div>
+
+      <span class="text-sm text-secondary">
+        <%= @transfer.name %>
+      </span>
     </div>
+  <% end %>
 
-    <span class="text-sm text-secondary">
-      <%= @transfer.name %>
-    </span>
-  </header>
-
-  <div class="space-y-2">
-    <!-- Overview Section -->
-    <%= disclosure t(".overview") do %>
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".overview"), open: true) do %>
       <div class="pb-4 px-3 pt-2 text-sm space-y-3 text-primary">
         <div class="space-y-3">
           <dl class="flex items-center gap-2 justify-between">
@@ -67,8 +68,7 @@
       </div>
     <% end %>
 
-    <!-- Details Section -->
-    <%= disclosure t(".details") do %>
+    <% dialog.with_section(title: t(".details")) do %>
       <%= styled_form_with model: @transfer,
               data: { controller: "auto-submit-form" }, class: "space-y-2" do |f| %>
         <% if @transfer.categorizable? %>
@@ -83,8 +83,7 @@
       <% end %>
     <% end %>
 
-    <!-- Settings Section -->
-    <%= disclosure t(".settings") do %>
+    <% dialog.with_section(title: t(".settings")) do %>
       <div class="pb-4">
         <div class="flex items-center justify-between gap-2 p-3">
           <div class="text-sm space-y-1">
@@ -101,5 +100,5 @@
         </div>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/users/_user_menu.html.erb b/app/views/users/_user_menu.html.erb
index 584cd4e7..92566c49 100644
--- a/app/views/users/_user_menu.html.erb
+++ b/app/views/users/_user_menu.html.erb
@@ -1,73 +1,47 @@
 <%# locals: (user:, placement: "right-start", offset: 16) %>
 
-<div id="user-menu" data-controller="menu" data-menu-placement-value="<%= placement %>" data-menu-offset-value="<%= offset %>">
-  <button data-menu-target="button">
-    <div class="w-9 h-9 cursor-pointer">
-      <%= render "settings/user_avatar", user: user, variant: :small %>
-    </div>
-  </button>
+<div data-testid="user-menu">
+  <%= render MenuComponent.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, placement: placement, offset: offset) do |menu| %>
+    <%= menu.with_header do %>
+      <div class="px-4 py-3 flex items-center gap-3">
+        <div class="w-9 h-9 shrink-0">
+          <%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, lazy: true %>
+        </div>
 
-  <div data-menu-target="content" class="hidden absolute w-[276px] z-100 divide-y divide-alpha-black-100 bg-container rounded-xl shadow-border-sm">
-    <div class="px-4 py-3 flex items-center gap-3">
-      <div class="w-9 h-9 shrink-0">
-        <%= render "settings/user_avatar", user: user, variant: :small, lazy: true %>
-      </div>
-
-      <div class="overflow-hidden text-ellipsis text-sm">
-        <p class="font-medium"><%= user.display_name %></p>
-        <% if user.display_name != user.email %>
-          <p class="text-secondary"><%= user.email %></p>
-        <% end %>
-      </div>
-    </div>
-
-    <% if self_hosted? %>
-      <div class="p-3">
-        <p class="text-sm">
-          <span class="font-medium text-primary">Version:</span>
-          <%= link_to Maybe.version.to_release_tag, "https://github.com/maybe-finance/maybe/releases/tag/#{Maybe.version.to_release_tag}", target: "_blank", class: "hover:underline" %>
-
-          <% if Maybe.commit_sha.present? %>
-            (<%= link_to Maybe.commit_sha.first(7), "https://github.com/maybe-finance/maybe/commit/#{Maybe.commit_sha}", target: "_blank", class: "hover:underline" %>)
+        <div class="overflow-hidden text-ellipsis text-sm">
+          <p class="font-medium"><%= user.display_name %></p>
+          <% if user.display_name != user.email %>
+            <p class="text-secondary"><%= user.email %></p>
           <% end %>
-        </p>
+        </div>
       </div>
-    <% end %>
-
-    <div class="p-1">
-      <%= link_to settings_profile_path(return_to: request.fullpath), class: "btn btn--ghost flex gap-2 items-center" do %>
-        <%= lucide_icon("settings", class: "w-5 h-5 text-secondary shrink-0") %>
-        <span class="text-sm">Settings</span>
-      <% end %>
-
-      <%= link_to changelog_path, class: "btn btn--ghost flex gap-2 items-center" do %>
-        <%= lucide_icon("box", class: "w-5 h-5 text-secondary shrink-0") %>
-        <span class="text-sm">Changelog</span>
-      <% end %>
-
-      <%= link_to feedback_path, class: "btn btn--ghost flex gap-2 items-center" do %>
-        <%= lucide_icon("megaphone", class: "w-5 h-5 text-secondary shrink-0") %>
-        <span class="text-sm">Feedback</span>
-      <% end %>
 
       <% if self_hosted? %>
-        <%= link_to "https://link.maybe.co/discord", class: "btn btn--ghost flex gap-2 items-center" do %>
-          <%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
-          <span class="text-sm">Contact</span>
-        <% end %>
-      <% else %>
-        <%= link_to "mailto:hello@maybefinance.com", class: "btn btn--ghost flex gap-2 items-center", onclick: "Intercom('showNewMessage'); return false;" do %>
-          <%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
-          <span class="text-sm">Contact</span>
-        <% end %>
-      <% end %>
-    </div>
+        <div class="px-4 py-3 border-t border-tertiary">
+          <p class="text-sm">
+            <span class="font-medium text-primary">Version:</span>
+            <%= link_to Maybe.version.to_release_tag, "https://github.com/maybe-finance/maybe/releases/tag/#{Maybe.version.to_release_tag}", target: "_blank", class: "hover:underline" %>
 
-    <div class="p-1">
-      <%= button_to session_path(Current.session), method: :delete, class: "btn btn--ghost text-destructive w-full flex gap-2 items-center" do %>
-        <%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
-        <span class="text-sm">Logout</span>
+            <% if Maybe.commit_sha.present? %>
+              (<%= link_to Maybe.commit_sha.first(7), "https://github.com/maybe-finance/maybe/commit/#{Maybe.commit_sha}", target: "_blank", class: "hover:underline" %>)
+            <% end %>
+          </p>
+        </div>
       <% end %>
-    </div>
-  </div>
+    <% end %>
+
+    <% menu.with_item(variant: "link", text: "Settings", icon: "settings", href: settings_profile_path(return_to: request.fullpath)) %>
+    <% menu.with_item(variant: "link", text: "Changelog", icon: "box", href: changelog_path) %>
+
+    <% if self_hosted? %>
+      <% menu.with_item(variant: "link", text: "Feedback", icon: "megaphone", href: feedback_path) %>
+      <% menu.with_item(variant: "link", text: "Contact", icon: "message-square-more", href: "https://link.maybe.co/discord") %>
+    <% else %>
+      <% menu.with_item(variant: "button", text: "Contact", icon: "message-square-more", data: { action: "intercom#show" }) %>
+    <% end %>
+
+    <% menu.with_item(variant: "divider") %>
+
+    <% menu.with_item(variant: "button", text: "Log out", icon: "log-out", href: session_path(Current.session), method: :delete) %>
+  <% end %>
 </div>
diff --git a/app/views/valuations/_valuation.html.erb b/app/views/valuations/_valuation.html.erb
index 1308a927..865c5d35 100644
--- a/app/views/valuations/_valuation.html.erb
+++ b/app/views/valuations/_valuation.html.erb
@@ -14,8 +14,8 @@
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
 
         <div class="flex items-center gap-3">
-          <%= tag.div class: "w-6 h-6 rounded-full p-1.5 flex items-center justify-center", style: mixed_hex_styles(color) do %>
-            <%= lucide_icon icon, class: "w-4 h-4 shrink-0" %>
+          <%= tag.div class: "w-6 h-6 rounded-full p-1.5 flex items-center justify-center", style: "color: #{color}" do %>
+            <%= icon(icon, size: "sm", color: "current") %>
           <% end %>
 
           <div class="truncate text-primary">
diff --git a/app/views/valuations/index.html.erb b/app/views/valuations/index.html.erb
index 7487fa46..aa20b548 100644
--- a/app/views/valuations/index.html.erb
+++ b/app/views/valuations/index.html.erb
@@ -5,7 +5,9 @@
       <%= link_to new_valuation_path(@account),
                   data:  { turbo_frame: dom_id(@account.entries.valuations.new) },
                   class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
+        <span class="text-primary">
+          <%= icon("plus", color: "current") %>
+        </span>
         <%= tag.span t(".new_entry"), class: "text-sm" %>
       <% end %>
     </div>
diff --git a/app/views/valuations/new.html.erb b/app/views/valuations/new.html.erb
index ee05f06b..191ee5f5 100644
--- a/app/views/valuations/new.html.erb
+++ b/app/views/valuations/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "form", entry: @entry %>
+  <% end %>
 <% end %>
diff --git a/app/views/valuations/show.html.erb b/app/views/valuations/show.html.erb
index 9a21b2e7..bd7d8d9e 100644
--- a/app/views/valuations/show.html.erb
+++ b/app/views/valuations/show.html.erb
@@ -1,11 +1,12 @@
 <% entry, account = @entry, @entry.account %>
 
-<%= drawer do %>
-  <%= render "valuations/header", entry: %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <%= render "valuations/header", entry: @entry %>
+  <% end %>
 
-  <div class="space-y-2">
-    <!-- Overview Section -->
-    <%= disclosure t(".overview") do %>
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <%= styled_form_with model: entry,
               url: entry_path(entry),
@@ -29,8 +30,7 @@
       </div>
     <% end %>
 
-    <!-- Details Section -->
-    <%= disclosure t(".details") do %>
+    <% dialog.with_section(title: t(".details")) do %>
       <div class="pb-4">
         <%= styled_form_with model: entry,
               url: entry_path(entry),
@@ -45,8 +45,7 @@
       </div>
     <% end %>
 
-    <!-- Settings Section -->
-    <%= disclosure t(".settings") do %>
+    <% dialog.with_section(title: t(".settings")) do %>
       <div class="pb-4">
         <!-- Delete Valuation Form -->
         <div class="flex items-center justify-between gap-2 p-3">
@@ -63,5 +62,5 @@
         </div>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/vehicles/_overview.html.erb b/app/views/vehicles/_overview.html.erb
index ab08ae21..e8592533 100644
--- a/app/views/vehicles/_overview.html.erb
+++ b/app/views/vehicles/_overview.html.erb
@@ -33,5 +33,10 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= link_to "Edit account details", edit_vehicle_path(account), class: "btn btn--ghost", data: { turbo_frame: :modal } %>
+  <%= render LinkComponent.new(
+    text: "Edit account details",
+    variant: "ghost",
+    href: edit_vehicle_path(account),
+    frame: :modal
+  ) %>
 </div>
diff --git a/app/views/vehicles/edit.html.erb b/app/views/vehicles/edit.html.erb
index a64715f1..00424799 100644
--- a/app/views/vehicles/edit.html.erb
+++ b/app/views/vehicles/edit.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= render "form", account: @account, url: vehicle_path(@account) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".edit", account: @account.name)) %>
+  <% dialog.with_body do %>
+    <%= render "form", account: @account, url: vehicle_path(@account) %>
+  <% end %>
 <% end %>
diff --git a/app/views/vehicles/new.html.erb b/app/views/vehicles/new.html.erb
index b5002e30..56422ce8 100644
--- a/app/views/vehicles/new.html.erb
+++ b/app/views/vehicles/new.html.erb
@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "vehicles/form", account: @account, url: vehicles_path(return_to: params[:return_to]) %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "vehicles/form", account: @account, url: vehicles_path(return_to: params[:return_to]) %>
+  <% end %>
 <% end %>
diff --git a/config/application.rb b/config/application.rb
index a5d2e280..efd3956b 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -33,5 +33,10 @@ module Maybe
     if Rails.application.credentials.active_record_encryption.present?
       config.active_record.encryption = Rails.application.credentials.active_record_encryption
     end
+
+    config.view_component.preview_controller = "LookbooksController"
+    config.lookbook.preview_display_options = {
+      theme: [ "light", "dark" ] # available in view as params[:theme]
+    }
   end
 end
diff --git a/config/importmap.rb b/config/importmap.rb
index f79ddb7f..7343cd06 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -5,6 +5,7 @@ pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin_all_from "app/components", under: "controllers", to: ""
 pin_all_from "app/javascript/services", under: "services", to: "services"
 pin "@github/hotkey", to: "@github--hotkey.js" # @3.1.0
 pin "@simonwep/pickr", to: "@simonwep--pickr.js" # @1.9.1
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 48732442..d4339639 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -4,4 +4,4 @@
 Rails.application.config.assets.version = "1.0"
 
 # Add additional assets to the asset load path.
-# Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << "app/components"
diff --git a/config/initializers/mini_profiler.rb b/config/initializers/mini_profiler.rb
new file mode 100644
index 00000000..d304a50e
--- /dev/null
+++ b/config/initializers/mini_profiler.rb
@@ -0,0 +1,3 @@
+Rails.application.configure do
+  Rack::MiniProfiler.config.skip_paths = [ "/design-system" ]
+end
diff --git a/config/routes.rb b/config/routes.rb
index 501ffb99..e0f5d9d5 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -8,6 +8,8 @@ Rails.application.routes.draw do
     delete :disable
   end
 
+  mount Lookbook::Engine, at: "/design-system"
+
   # Uses basic auth - see config/initializers/sidekiq.rb
   mount Sidekiq::Web => "/sidekiq"
 
diff --git a/lib/money/currency.rb b/lib/money/currency.rb
index a515aeed..e38cd1f6 100644
--- a/lib/money/currency.rb
+++ b/lib/money/currency.rb
@@ -35,6 +35,12 @@ class Money::Currency
       all.values.map { |currency_data| new(currency_data["iso_code"]) }
     end
 
+    def as_options
+      all_instances.sort_by do |currency|
+        [ currency.priority, currency.name ]
+      end
+    end
+
     def popular
       all.values.sort_by { |currency| currency["priority"] }.first(12).map { |currency_data| new(currency_data["iso_code"]) }
     end
diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rb
index a65f724e..438e98c6 100644
--- a/test/application_system_test_case.rb
+++ b/test/application_system_test_case.rb
@@ -32,4 +32,10 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
       # Trigger Capybara's wait mechanism to avoid timing issues with logout
       find("h2", text: "Sign in to your account")
     end
+
+    def within_testid(testid)
+      within "[data-testid='#{testid}']" do
+        yield
+      end
+    end
 end
diff --git a/test/components/previews/button_component_preview.rb b/test/components/previews/button_component_preview.rb
new file mode 100644
index 00000000..499d36b3
--- /dev/null
+++ b/test/components/previews/button_component_preview.rb
@@ -0,0 +1,16 @@
+class ButtonComponentPreview < ViewComponent::Preview
+  # @param variant select {{ ButtonComponent::VARIANTS.keys }}
+  # @param size select {{ ButtonComponent::SIZES.keys }}
+  # @param disabled toggle
+  # @param icon select ["plus", "circle"]
+  def default(variant: "primary", size: "md", disabled: false, icon: "plus")
+    render ButtonComponent.new(
+      text: "Sample button",
+      variant: variant,
+      size: size,
+      disabled: disabled,
+      icon: icon,
+      data: { menu_target: "button" }
+    )
+  end
+end
diff --git a/test/components/previews/dialog_component_preview.rb b/test/components/previews/dialog_component_preview.rb
new file mode 100644
index 00000000..a1b81340
--- /dev/null
+++ b/test/components/previews/dialog_component_preview.rb
@@ -0,0 +1,46 @@
+class DialogComponentPreview < ViewComponent::Preview
+  # @param show_overflow toggle
+  def modal(show_overflow: false)
+    render DialogComponent.new(variant: "modal") do |dialog|
+      dialog.with_header(title: "Sample modal title")
+
+      dialog.with_body do
+        "Welcome to Maybe!  This is some test modal content."
+      end
+
+      dialog.with_action(cancel_action: true, text: "Cancel", variant: "outline")
+      dialog.with_action(text: "Submit")
+
+      if show_overflow
+        content_tag(:div, class: "p-4 font-semibold h-[800px] bg-surface-inset") do
+          "Example of overflow content"
+        end
+      end
+    end
+  end
+
+  # @param show_overflow toggle
+  def drawer(show_overflow: false)
+    render DialogComponent.new(variant: "drawer") do |dialog|
+      dialog.with_header(title: "Drawer title")
+
+      dialog.with_body do
+        dialog.with_section(title: "Section 1", open: true) do
+          content_tag(:div, "Section 1 content", class: "p-2")
+        end
+
+        dialog.with_section(title: "Section 2", open: true) do
+          content_tag(:div, "Section 2 content", class: "p-2")
+        end
+      end
+
+      dialog.with_action(text: "Example action")
+
+      if show_overflow
+        content_tag(:div, class: "p-4 font-semibold h-[800px] bg-surface-inset") do
+          "Example of overflow content"
+        end
+      end
+    end
+  end
+end
diff --git a/test/components/previews/disclosure_component_preview.rb b/test/components/previews/disclosure_component_preview.rb
new file mode 100644
index 00000000..ec6e6d1d
--- /dev/null
+++ b/test/components/previews/disclosure_component_preview.rb
@@ -0,0 +1,13 @@
+class DisclosureComponentPreview < ViewComponent::Preview
+  # @display container_classes max-w-[400px]
+  # @param align select ["left", "right"]
+  def default(align: "right")
+    render DisclosureComponent.new(title: "Title", align: align, open: true) do |disclosure|
+      disclosure.with_summary_content do
+        content_tag(:p, "$200.25", class: "text-xs font-mono font-medium")
+      end
+
+      content_tag(:p, "Sample disclosure content", class: "text-sm")
+    end
+  end
+end
diff --git a/test/components/previews/filled_icon_component_preview.rb b/test/components/previews/filled_icon_component_preview.rb
new file mode 100644
index 00000000..c2670308
--- /dev/null
+++ b/test/components/previews/filled_icon_component_preview.rb
@@ -0,0 +1,11 @@
+class FilledIconComponentPreview < ViewComponent::Preview
+  # @param size select ["sm", "md", "lg"]
+  def default(size: "md")
+    render FilledIconComponent.new(icon: "home", variant: :default, size: size)
+  end
+
+  # @param size select ["sm", "md", "lg"]
+  def text(size: "md")
+    render FilledIconComponent.new(variant: :text, text: "Test", size: size, rounded: true)
+  end
+end
diff --git a/test/components/previews/link_component_preview.rb b/test/components/previews/link_component_preview.rb
new file mode 100644
index 00000000..17150204
--- /dev/null
+++ b/test/components/previews/link_component_preview.rb
@@ -0,0 +1,25 @@
+class LinkComponentPreview < ViewComponent::Preview
+  # Usage
+  # -------------
+  #
+  # LinkComponent is a small abstraction on top of the `link_to` helper.
+  #
+  # It can be used as a regular link or styled as a "Link button" using any of the available ButtonComponent variants.
+  #
+  # @param variant select {{ LinkComponent::VARIANTS.keys }}
+  # @param size select {{ LinkComponent::SIZES.keys }}
+  # @param icon select ["", "plus", "arrow-right"]
+  # @param icon_position select ["left", "right"]
+  # @param full_width toggle
+  def default(variant: "default", size: "md", icon: "plus", icon_position: "left", full_width: false)
+    render LinkComponent.new(
+      href: "#",
+      text: "Preview link",
+      variant: variant,
+      size: size,
+      icon: icon,
+      icon_position: icon_position,
+      full_width: full_width
+    )
+  end
+end
diff --git a/test/components/previews/menu_component_preview.rb b/test/components/previews/menu_component_preview.rb
new file mode 100644
index 00000000..6c210437
--- /dev/null
+++ b/test/components/previews/menu_component_preview.rb
@@ -0,0 +1,44 @@
+class MenuComponentPreview < ViewComponent::Preview
+  def icon
+    render MenuComponent.new(variant: "icon") do |menu|
+      menu_contents(menu)
+    end
+  end
+
+  def button
+    render MenuComponent.new(variant: "button") do |menu|
+      menu.with_button(text: "Open menu", variant: "secondary")
+      menu_contents(menu)
+    end
+  end
+
+  def avatar
+    render MenuComponent.new(variant: "avatar") do |menu|
+      menu_contents(menu)
+    end
+  end
+
+  private
+    def menu_contents(menu)
+      menu.with_header do
+        content_tag(:div, class: "p-3") do
+          content_tag(:h3, "Menu header", class: "font-medium text-gray-900")
+        end
+      end
+
+      menu.with_item(variant: "link", text: "Link", href: "#", icon: "plus")
+      menu.with_item(variant: "button", text: "Action", href: "#", method: :post, icon: "circle")
+      menu.with_item(variant: "button", text: "Action destructive", href: "#", method: :delete, icon: "circle")
+
+      menu.with_item(variant: "divider")
+
+      menu.with_custom_content do
+        content_tag(:div, class: "p-4") do
+          safe_join([
+            content_tag(:h3, "Custom content header", class: "font-medium text-gray-900"),
+            content_tag(:p, "Some custom content", class: "text-sm text-gray-500")
+          ])
+        end
+      end
+    end
+end
diff --git a/test/components/previews/tabs_component_preview.rb b/test/components/previews/tabs_component_preview.rb
new file mode 100644
index 00000000..ac3d2eef
--- /dev/null
+++ b/test/components/previews/tabs_component_preview.rb
@@ -0,0 +1,7 @@
+class TabsComponentPreview < ViewComponent::Preview
+  def default
+  end
+
+  def custom
+  end
+end
diff --git a/test/components/previews/tabs_component_preview/custom.html.erb b/test/components/previews/tabs_component_preview/custom.html.erb
new file mode 100644
index 00000000..3ecbbf9f
--- /dev/null
+++ b/test/components/previews/tabs_component_preview/custom.html.erb
@@ -0,0 +1,29 @@
+<%= render TabsComponent.new(
+  variant: :unstyled,
+  active_tab: "tab1", 
+  active_btn_classes: "bg-white text-primary", 
+  inactive_btn_classes: "text-secondary",
+) do |tabs| %>
+  <div class="flex border border-secondary rounded-lg h-full max-w-[400px]">
+    <%= tabs.with_nav(classes: "flex flex-col py-2 px-3 border-r border-secondary") do |nav| %>
+      <%= nav.with_btn(id: "tab1", label: "Tab 1", classes: "px-2 py-1 rounded-md w-full whitespace-nowrap") %>
+      <%= nav.with_btn(id: "tab2", label: "Tab 2", classes: "px-2 py-1 rounded-md w-full whitespace-nowrap") %>
+    <% end %>
+
+    <div class="flex flex-col w-full">
+      <div class="h-[200px] p-4">
+        <%= tabs.with_panel(tab_id: "tab1") do %>
+          <%= content_tag(:p, "Content for tab 1") %>
+        <% end %>
+
+        <%= tabs.with_panel(tab_id: "tab2") do %>
+          <%= content_tag(:p, "Content for tab 2") %>
+        <% end %>
+      </div>
+
+      <div class="w-full border-t border-secondary p-4">
+        Footer
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/test/components/previews/tabs_component_preview/default.html.erb b/test/components/previews/tabs_component_preview/default.html.erb
new file mode 100644
index 00000000..da98d471
--- /dev/null
+++ b/test/components/previews/tabs_component_preview/default.html.erb
@@ -0,0 +1,16 @@
+<div class="max-w-[400px]">
+  <%= render TabsComponent.new(active_tab: "tab1") do |tabs| %>
+    <%= tabs.with_nav do |tab_nav| %>
+      <%= tab_nav.with_btn(id: "tab1", label: "Tab 1") %>
+      <%= tab_nav.with_btn(id: "tab2", label: "Tab 2") %>
+    <% end %>
+
+    <%= tabs.with_panel(tab_id: "tab1") do %>
+      <%= content_tag(:p, "Content for tab 1") %>
+    <% end %>
+
+    <%= tabs.with_panel(tab_id: "tab2") do %>
+      <%= content_tag(:p, "Content for tab 2") %>
+    <% end %>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/test/components/previews/toggle_component_preview.rb b/test/components/previews/toggle_component_preview.rb
new file mode 100644
index 00000000..9ab3d014
--- /dev/null
+++ b/test/components/previews/toggle_component_preview.rb
@@ -0,0 +1,15 @@
+class ToggleComponentPreview < ViewComponent::Preview
+  # @param disabled toggle
+  def default(disabled: false)
+    render(
+      ToggleComponent.new(
+        id: "toggle-component-id",
+        name: "toggle-component-name",
+        checked: false,
+        disabled: disabled,
+        checked_value: "on",
+        unchecked_value: "off"
+      )
+    )
+  end
+end
diff --git a/test/controllers/chats_controller_test.rb b/test/controllers/chats_controller_test.rb
index 5fa98e24..8f8b6eed 100644
--- a/test/controllers/chats_controller_test.rb
+++ b/test/controllers/chats_controller_test.rb
@@ -7,12 +7,6 @@ class ChatsControllerTest < ActionDispatch::IntegrationTest
     sign_in @user
   end
 
-  test "cannot create a chat if AI is disabled" do
-    @user.update!(ai_enabled: false)
-    post chats_url, params: { chat: { content: "Hello", ai_model: "gpt-4o" } }
-    assert_response :forbidden
-  end
-
   test "gets index" do
     get chats_url
     assert_response :success
diff --git a/test/system/accounts_test.rb b/test/system/accounts_test.rb
index 70ed7492..c3cf8f45 100644
--- a/test/system/accounts_test.rb
+++ b/test/system/accounts_test.rb
@@ -92,7 +92,8 @@ class AccountsTest < ApplicationSystemTestCase
 
       click_button "Create Account"
 
-      within "[data-controller='tabs']" do
+      within_testid("account-sidebar-tabs") do
+        click_on "All"
         find("details", text: Accountable.from_type(accountable_type).display_name).click
         assert_text account_name
       end
@@ -104,8 +105,8 @@ class AccountsTest < ApplicationSystemTestCase
 
       visit account_url(created_account)
 
-      within "header:has(button[data-menu-target='button'])" do
-        find('button[data-menu-target="button"]').click
+      within_testid("account-menu") do
+        find("button").click
         click_on "Edit"
       end
 
diff --git a/test/system/chats_test.rb b/test/system/chats_test.rb
index 6e1fe5b5..9d00fd99 100644
--- a/test/system/chats_test.rb
+++ b/test/system/chats_test.rb
@@ -12,7 +12,7 @@ class ChatsTest < ApplicationSystemTestCase
     visit root_path
 
     within "#chat-container" do
-      assert_selector "h3", text: "Enable Personal Finance AI"
+      assert_selector "h3", text: "Enable Maybe AI"
     end
   end
 
diff --git a/test/system/imports_test.rb b/test/system/imports_test.rb
index 9cedd2f6..c39477ac 100644
--- a/test/system/imports_test.rb
+++ b/test/system/imports_test.rb
@@ -15,11 +15,15 @@ class ImportsTest < ApplicationSystemTestCase
 
     click_on "Import transactions"
 
-    find("button[data-id='csv-paste-tab']").click
+    within_testid("import-tabs") do
+      click_on "Copy & Paste"
+    end
 
     fill_in "import[raw_file_str]", with: file_fixture("imports/transactions.csv").read
 
-    find('input[type="submit"][value="Upload CSV"]').click
+    within "form" do
+      click_on "Upload CSV"
+    end
 
     select "Date", from: "import[date_col_label]"
     select "YYYY-MM-DD", from: "import[date_format]"
@@ -61,11 +65,15 @@ class ImportsTest < ApplicationSystemTestCase
 
     click_on "Import investments"
 
-    find("button[data-id='csv-paste-tab']").click
+    within_testid("import-tabs") do
+      click_on "Copy & Paste"
+    end
 
     fill_in "import[raw_file_str]", with: file_fixture("imports/trades.csv").read
 
-    find('input[type="submit"][value="Upload CSV"]').click
+    within "form" do
+      click_on "Upload CSV"
+    end
 
     select "date", from: "import[date_col_label]"
     select "YYYY-MM-DD", from: "import[date_format]"
@@ -99,11 +107,15 @@ class ImportsTest < ApplicationSystemTestCase
 
     click_on "Import accounts"
 
-    find("button[data-id='csv-paste-tab']").click
+    within_testid("import-tabs") do
+      click_on "Copy & Paste"
+    end
 
     fill_in "import[raw_file_str]", with: file_fixture("imports/accounts.csv").read
 
-    find('input[type="submit"][value="Upload CSV"]').click
+    within "form" do
+      click_on "Upload CSV"
+    end
 
     select "type", from: "import[entity_type_col_label]"
     select "name", from: "import[name_col_label]"
@@ -143,11 +155,15 @@ class ImportsTest < ApplicationSystemTestCase
 
     click_on "Import from Mint"
 
-    find("button[data-id='csv-paste-tab']").click
+    within_testid("import-tabs") do
+      click_on "Copy & Paste"
+    end
 
     fill_in "import[raw_file_str]", with: file_fixture("imports/mint.csv").read
 
-    find('input[type="submit"][value="Upload CSV"]').click
+    within "form" do
+      click_on "Upload CSV"
+    end
 
     click_on "Apply configuration"
 
diff --git a/test/system/settings_test.rb b/test/system/settings_test.rb
index 233b8a42..da9abeab 100644
--- a/test/system/settings_test.rb
+++ b/test/system/settings_test.rb
@@ -39,7 +39,7 @@ class SettingsTest < ApplicationSystemTestCase
     click_link "Self hosting"
     assert_current_path settings_hosting_path
     assert_selector "h1", text: "Self-Hosting"
-    check "setting_require_invite_for_signup", allow_label_click: true
+    check "setting[require_invite_for_signup]", allow_label_click: true
     click_button "Generate new code"
     assert_selector 'span[data-clipboard-target="source"]', visible: true, count: 1 # invite code copy widget
     copy_button = find('button[data-action="clipboard#copy"]', match: :first) # Find the first copy button (adjust if needed)
@@ -56,7 +56,9 @@ class SettingsTest < ApplicationSystemTestCase
   private
 
     def open_settings_from_sidebar
-      find("#user-menu").click
+      within "div[data-testid=user-menu]" do
+        find("button").click
+      end
       click_link "Settings"
     end
 end
diff --git a/test/system/trades_test.rb b/test/system/trades_test.rb
index d4da8368..6972f2a7 100644
--- a/test/system/trades_test.rb
+++ b/test/system/trades_test.rb
@@ -29,12 +29,12 @@ class TradesTest < ApplicationSystemTestCase
     visit_trades
 
     within_trades do
-      assert_text "Purchase 10 shares of AAPL"
       assert_text "Buy #{shares_qty} shares of AAPL"
     end
   end
 
   test "can create sell transaction" do
+    qty = 10
     aapl = @account.holdings.find { |h| h.security.ticker == "AAPL" }
 
     open_new_trade_modal
@@ -42,7 +42,7 @@ class TradesTest < ApplicationSystemTestCase
     select "Sell", from: "Type"
     fill_in "Ticker symbol", with: aapl.ticker
     fill_in "Date", with: Date.current
-    fill_in "Quantity", with: aapl.qty
+    fill_in "Quantity", with: qty
     fill_in "entry[price]", with: 215.33
 
     click_button "Add transaction"
@@ -50,7 +50,7 @@ class TradesTest < ApplicationSystemTestCase
     visit_trades
 
     within_trades do
-      assert_text "Sell #{aapl.qty.round} shares of AAPL"
+      assert_text "Sell #{qty} shares of AAPL"
     end
   end