diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
index 1e7634c7..1554ab84 100644
--- a/app/controllers/accounts_controller.rb
+++ b/app/controllers/accounts_controller.rb
@@ -2,34 +2,35 @@ class AccountsController < ApplicationController
   before_action :authenticate_user!
 
   def new
-  end
-
-  def new_bank
-    @account = Depository.new
-  end
-
-  def new_credit
-    @account = Credit.new
+    if params[:type].blank? || Account.accountable_types.include?("Account::#{params[:type]}")
+      @account = if params[:type].blank?
+        Account.new
+      else
+        Account.new(accountable_type: "Account::#{params[:type]}")
+      end
+    else
+      head :not_found
+    end
   end
 
   def show
   end
 
   def create
-    @account = account_type_class.new(account_params)
-    @account.family = current_family
+    @account = Account.new(account_params.merge(family: current_family))
+    @account.accountable = account_params[:accountable_type].constantize.new
 
     if @account.save
-      redirect_to root_path
+      redirect_to accounts_path, notice: "New account created successfully"
     else
-      render :new
+      render "new", status: :unprocessable_entity
     end
   end
 
   private
 
   def account_params
-    params.require(:account).permit(:name, :balance, :type, :subtype)
+    params.require(:account).permit(:name, :accountable_type, :balance, :subtype)
   end
 
   def account_type_class
diff --git a/app/models/account.rb b/app/models/account.rb
index b3d34d28..63bfe8d3 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -1,9 +1,14 @@
 class Account < ApplicationRecord
-  # VALID_ACCOUNT_TYPES = %w[Investment Depository Credit Loan Property Vehicle OtherAsset OtherLiability].freeze
-
   belongs_to :family
 
-  delegated_type :accountable, types: %w[ Credit Depository Investment Loan OtherAsset OtherLiability Property Vehicle], dependent: :destroy
+  delegated_type :accountable, types: %w[ Account::Credit Account::Depository Account::Investment Account::Loan Account::OtherAsset Account::OtherLiability Account::Property Account::Vehicle], dependent: :destroy
 
-  scope :depository, -> { where(type: "Depository") }
+  delegate :icon, :type_name, :color, to: :accountable
+
+  # Class method to get a representative instance of each accountable type
+  def self.accountable_type_instances
+    accountable_types.map do |type|
+      type.constantize.new
+    end
+  end
 end
diff --git a/app/models/account/credit.rb b/app/models/account/credit.rb
index 06e91afc..8dbdc745 100644
--- a/app/models/account/credit.rb
+++ b/app/models/account/credit.rb
@@ -1,3 +1,18 @@
 class Account::Credit < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-credit-card.svg"
+  end
+
+  def type_name
+    "Credit Card"
+  end
+
+  def color
+    {
+      background: "bg-[#E6F6FA]",
+      text: "text-[#189FC7]"
+    }
+  end
 end
diff --git a/app/models/account/depository.rb b/app/models/account/depository.rb
index b7d4cb30..5f4c9fd6 100644
--- a/app/models/account/depository.rb
+++ b/app/models/account/depository.rb
@@ -1,3 +1,18 @@
 class Account::Depository < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Bank Accounts"
+  end
+
+  def color
+    {
+      background: "bg-[#EAF4FF]",
+      text: "text-[#3492FB]"
+    }
+  end
 end
diff --git a/app/models/account/investment.rb b/app/models/account/investment.rb
index 57bdfcf8..ae3da945 100644
--- a/app/models/account/investment.rb
+++ b/app/models/account/investment.rb
@@ -1,3 +1,18 @@
 class Account::Investment < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Investments"
+  end
+
+  def color
+    {
+      background: "bg-[#EDF7F4]",
+      text: "text-[#1BD5A1]"
+    }
+  end
 end
diff --git a/app/models/account/loan.rb b/app/models/account/loan.rb
index 71c72d92..ba8cd645 100644
--- a/app/models/account/loan.rb
+++ b/app/models/account/loan.rb
@@ -1,3 +1,18 @@
 class Account::Loan < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Loan"
+  end
+
+  def color
+    {
+      background: "bg-[#EDF7F4]",
+      text: "text-[#1BD5A1]"
+    }
+  end
 end
diff --git a/app/models/account/other_asset.rb b/app/models/account/other_asset.rb
index b4f638da..e00c9f51 100644
--- a/app/models/account/other_asset.rb
+++ b/app/models/account/other_asset.rb
@@ -1,3 +1,18 @@
 class Account::OtherAsset < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Other Asset"
+  end
+
+  def color
+    {
+      background: "bg-[#EDF7F4]",
+      text: "text-[#1BD5A1]"
+    }
+  end
 end
diff --git a/app/models/account/other_liability.rb b/app/models/account/other_liability.rb
index 2467c08d..c9c51ead 100644
--- a/app/models/account/other_liability.rb
+++ b/app/models/account/other_liability.rb
@@ -1,3 +1,18 @@
 class Account::OtherLiability < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Other Liability"
+  end
+
+  def color
+    {
+      background: "bg-[#EDF7F4]",
+      text: "text-[#1BD5A1]"
+    }
+  end
 end
diff --git a/app/models/account/property.rb b/app/models/account/property.rb
index 0088dfcd..105ac600 100644
--- a/app/models/account/property.rb
+++ b/app/models/account/property.rb
@@ -1,3 +1,18 @@
 class Account::Property < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-real-estate.svg"
+  end
+
+  def type_name
+    "Real Estate"
+  end
+
+  def color
+    {
+      background: "bg-[#FEF0F7]",
+      text: "text-[#F03695]"
+    }
+  end
 end
diff --git a/app/models/account/vehicle.rb b/app/models/account/vehicle.rb
index fd640f2a..6a43f4a6 100644
--- a/app/models/account/vehicle.rb
+++ b/app/models/account/vehicle.rb
@@ -1,3 +1,18 @@
 class Account::Vehicle < ApplicationRecord
   include Accountable
+
+  def icon
+    "icon-bank-accounts.svg"
+  end
+
+  def type_name
+    "Vehicle"
+  end
+
+  def color
+    {
+      background: "bg-[#EDF7F4]",
+      text: "text-[#1BD5A1]"
+    }
+  end
 end
diff --git a/app/models/depository.rb b/app/models/depository.rb
deleted file mode 100644
index bacbb9e6..00000000
--- a/app/models/depository.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-class Depository < Account
-end
diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb
new file mode 100644
index 00000000..6d654ce9
--- /dev/null
+++ b/app/views/accounts/_account_type.html.erb
@@ -0,0 +1,9 @@
+<div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
+  <%= link_to new_account_path(type: account_type.class.name.demodulize), class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
+    <span class="absolute inset-0" aria-hidden="true"></span>
+    <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl <%= account_type.color[:background] %> mb-2">
+      <%= inline_svg_tag(account_type.icon, class: "#{account_type.color[:text]} stroke-current") %>
+    </span>
+    <%= account_type.type_name %>
+  <% end %>
+</div>
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb
new file mode 100644
index 00000000..8e067a3c
--- /dev/null
+++ b/app/views/accounts/index.html.erb
@@ -0,0 +1,17 @@
+
+<h2 class="text-2xl font-semibold font-display">Cash</h2>
+<h3 class="mt-1 mb-4 text-sm text-gray-500"><%#= number_to_currency current_family.cash_balance %></h3>
+
+<% current_family.accounts.each do |account| %>
+    <div class="flex items-center justify-between px-3 py-3 mb-2 bg-white shadow-sm rounded-xl">
+      <div class="flex items-center text-sm">
+        <%= account.name %>
+      </div>
+      <div class="flex items-center text-sm">
+        <%= account.accountable %>
+      </div>
+      <p class="text-sm text-right">
+        <span class="block mb-1"><%= number_to_currency account.balance %></span>
+      </p>
+    </div>
+<% end %>
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index 928767b8..dc12162a 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -1,43 +1,37 @@
 <h1 class="text-3xl font-semibold font-display">Add an account</h1>
 
-<div class="grid grid-cols-2 gap-4 mt-8 text-sm sm:grid-cols-3 md:grid-cols-4">
-  <div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
-    <%= link_to new_bank_path, class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
-      <span class="absolute inset-0" aria-hidden="true"></span>
-      <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl bg-[#EAF4FF] mb-2">
-        <%= inline_svg_tag('icon-bank-accounts.svg', class: 'text-[#3492FB] stroke-current') %>
-      </span>
-      Bank accounts
-    <% end %>
+<% if params[:type].blank? || Account.accountable_types.include?("Account::#{params[:type]}") == false %>
+  <div class="grid grid-cols-2 gap-4 mt-8 text-sm sm:grid-cols-3 md:grid-cols-4">
+    <%= render partial: "account_type", collection: Account.accountable_type_instances %>
+  </div>
+<% else %>
+  <div class="relative flex items-center mb-5 space-x-2">
+      <%= link_to new_account_path, class: "" do %>
+        <%= inline_svg_tag('icon-arrow-left.svg', class: 'text-gray-500 fill-current') %>
+      <% end %>
+    <h2 class="text-2xl font-semibold font-display">Enter <%= params[:type] %> account</h2>
   </div>
 
-  <div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
-    <%= link_to new_credit_path, class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
-      <span class="absolute inset-0" aria-hidden="true"></span>
-      <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl bg-[#E6F6FA] mb-2">
-        <%= inline_svg_tag('icon-credit-card.svg', class: 'text-[#189FC7] stroke-current') %>
-      </span>
-      Credit cards
-    <% end %>
-  </div>
+  <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4" } do |f| %>
+    <%= f.hidden_field :accountable_type %>
 
-  <div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
-    <%= link_to "new_investment_path", class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
-      <span class="absolute inset-0" aria-hidden="true"></span>
-      <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl bg-[#EDF7F4] mb-2">
-        <%= inline_svg_tag('icon-investments.svg', class: 'text-[#1BD5A1] stroke-current') %>
-      </span>
-      Investments
-    <% end %>
-  </div>
+    <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+      <%# <span class="absolute px-2 py-1 text-xs font-medium text-gray-400 uppercase bg-gray-200 rounded-full opacity-50 right-3">Optional</span> %>
+      <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Name</label>
+      <%= f.text_field :name, placeholder: "Account name", required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+    </div>
 
-  <div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
-    <%= link_to "new_real_estate_path", class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
-      <span class="absolute inset-0" aria-hidden="true"></span>
-      <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl bg-[#FEF0F7] mb-2">
-        <%= inline_svg_tag('icon-real-estate.svg', class: 'text-[#F03695] stroke-current') %>
-      </span>
-      Real estate
-    <% end %>
-  </div>
-</div>
\ No newline at end of file
+    <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+      <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Balance</label>
+      <div class="flex">
+        <%= f.number_field :balance, placeholder: "$0.00", in: 0.00..100000000.00, required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+      </div>
+    </div>
+
+    <div class="absolute right-5 bottom-5">
+      <button type="submit" class="flex items-center justify-center w-12 h-12 mb-2 bg-black rounded-full shrink-0 grow-0 hover:bg-gray-600">
+          <i class="text-xl text-white fa-regular fa-check"></i>
+      </button>
+    </div>
+  <% end %>
+<% end %>
diff --git a/app/views/accounts/new_bank.html.erb b/app/views/accounts/new_bank.html.erb
deleted file mode 100644
index efd5e7f9..00000000
--- a/app/views/accounts/new_bank.html.erb
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="relative flex items-center mb-5 space-x-2">
-    <%= link_to new_account_path, class: "" do %>
-      <%= inline_svg_tag('icon-arrow-left.svg', class: 'text-gray-500 fill-current') %>
-    <% end %>
-  <h2 class="text-2xl font-semibold font-display">Enter bank account</h2>
-</div>
-
-<%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4" } do |f| %>
-  <%= f.hidden_field :type, value: "Depository" %>
-  
-  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <%# <span class="absolute px-2 py-1 text-xs font-medium text-gray-400 uppercase bg-gray-200 rounded-full opacity-50 right-3">Optional</span> %>
-    <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Name</label>
-    <%= f.text_field :name, placeholder: "Account name", required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
-  </div>
-
-  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
-    <%= f.select :subtype, options_for_select([["Checking", "checking"], ["Savings", "savings"]], selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
-  </div>
-
-  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Balance</label>
-    <div class="flex">
-      <%= f.number_field :balance, placeholder: "$0.00", in: 0.00..100000000.00, required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
-    </div>
-  </div>
-
-  <div class="absolute right-5 bottom-5">
-    <button type="submit" class="flex items-center justify-center w-12 h-12 mb-2 bg-black rounded-full shrink-0 grow-0 hover:bg-gray-600">
-        <i class="text-xl text-white fa-regular fa-check"></i>
-    </button>
-  </div>
-<% end %>
\ No newline at end of file
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 3043d036..e24469ff 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -79,4 +79,7 @@ Rails.application.configure do
 
   # Apply autocorrection by RuboCop to files generated by `bin/rails generate`.
   config.generators.apply_rubocop_autocorrect_after_generate!
+
+  # Allow connection from any host in development
+  config.hosts = nil
 end
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 4850d1b4..5618c738 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
   content: [
     './public/*.html',
     './app/helpers/**/*.rb',
+    './app/models/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}'
   ],