diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
index e6df3a19..bf2ce753 100644
--- a/app/javascript/controllers/modal_controller.js
+++ b/app/javascript/controllers/modal_controller.js
@@ -3,7 +3,8 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="modal"
 export default class extends Controller {
   connect() {
-    this.element.showModal();
+    if (this.element.open) return
+    else this.element.showModal()
   }
 
   // Hide the dialog when the user clicks outside of it
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index 1cbac1ea..ac2ef743 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -1,11 +1,12 @@
 <h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>
 
 <%= modal do %>
+  <div class="flex flex-col min-h-[530px]">
   <% if @account.accountable.blank? %>
     <div class="border-b border-[#141414]/2 p-4 text-gray-400">
       <%= t '.select_accountable_type' %>
     </div>
-    <div class="flex flex-col p-2 text-sm" data-controller="list-keyboard-navigation">
+    <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
@@ -38,7 +39,7 @@
       <% end %>
       <span>How would you like to add it?</span>
     </div>
-    <div class="flex flex-col p-2 text-sm" data-controller="list-keyboard-navigation">
+    <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
@@ -67,16 +68,19 @@
       <span>Add <%= @account.accountable.model_name.human.downcase %></span>
     </div>
 
-    <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4 m-5 mt-1", data: { turbo: false } } do |f| %>
-      <%= f.hidden_field :accountable_type %>
+    <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "m-5 mt-1 flex flex-col justify-between grow", data: { turbo: false } } do |f| %>
+      <div class="space-y-4 grow">
+        <%= f.hidden_field :accountable_type %>
 
-      <%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %>
+        <%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %>
 
-      <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
+        <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
 
-      <%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', label: true %>
+        <%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', label: true %>
+      </div>
 
       <%= f.submit "Add #{@account.accountable.model_name.human.downcase}" %>
     <% end %>
   <% end %>
+  </div>
 <% end %>