diff --git a/Gemfile b/Gemfile
index 126b84aa..79d31939 100644
--- a/Gemfile
+++ b/Gemfile
@@ -35,8 +35,6 @@ gem "view_component"
 
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", require: false
-
-gem 'dotenv-rails', groups: [:development, :test]
 gem "faker"
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
@@ -46,6 +44,7 @@ group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri windows ]
   gem "bullet"
+  gem 'dotenv-rails'
 end
 
 group :development do
@@ -70,4 +69,5 @@ group :test do
   gem "timecop"
   gem "webmock"
   gem "vcr"
+  gem 'rails-controller-testing'
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index 7ec1c3a0..ddea33a6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -213,6 +213,10 @@ GEM
       activesupport (= 7.1.2)
       bundler (>= 1.15.0)
       railties (= 7.1.2)
+    rails-controller-testing (1.0.5)
+      actionpack (>= 5.0.1.rc1)
+      actionview (>= 5.0.1.rc1)
+      activesupport (>= 5.0.1.rc1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -345,6 +349,7 @@ DEPENDENCIES
   puma (>= 5.0)
   rack-cors
   rails (= 7.1.2)
+  rails-controller-testing
   rspec-rails
   selenium-webdriver
   shoulda-matchers (~> 5.0)
diff --git a/app/components/clients/list_item_component.html.erb b/app/components/clients/list_item_component.html.erb
new file mode 100644
index 00000000..7366b2e7
--- /dev/null
+++ b/app/components/clients/list_item_component.html.erb
@@ -0,0 +1,25 @@
+<li class="relative flex justify-between gap-x-6 py-5">
+  <div class="flex min-w-0 gap-x-4">
+    <div class="min-w-0 flex-auto">
+      <p class="text-sm font-semibold leading-6 text-gray-900">
+        <%= link_to client_path(@client) do %>
+          <span class="absolute inset-x-0 -top-px bottom-0"></span>
+          <%= client_name %>
+        <% end %>
+      </p>
+      <p class="mt-1 flex text-xs leading-5 text-gray-500">
+        <%= client_description %>
+      </p>
+    </div>
+  </div>
+  <div class="flex shrink-0 items-center gap-x-4">
+    <div class="hidden sm:flex sm:flex-col sm:items-end">
+      <div class="mt-1 flex items-center gap-x-1.5">
+        <%= render(Shared::StatusComponent.new(status: client_status)) %>
+      </div>
+    </div>
+    <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+    </svg>
+  </div>
+</li>
\ No newline at end of file
diff --git a/app/components/clients/list_item_component.rb b/app/components/clients/list_item_component.rb
new file mode 100644
index 00000000..574a58fc
--- /dev/null
+++ b/app/components/clients/list_item_component.rb
@@ -0,0 +1,20 @@
+module Clients
+  class ListItemComponent < ViewComponent::Base
+    def initialize(client:, current_company:)
+      @current_company = current_company
+      @client = client
+    end
+
+    def client_name
+      @client.name
+    end
+
+    def client_description
+      @client.description
+    end
+
+    def client_status
+      @client.status
+    end
+  end
+end
\ No newline at end of file
diff --git a/app/components/settings/breadcrumbs_component.rb b/app/components/settings/breadcrumbs_component.rb
index 58955891..b2e4ec22 100644
--- a/app/components/settings/breadcrumbs_component.rb
+++ b/app/components/settings/breadcrumbs_component.rb
@@ -2,8 +2,5 @@ module Settings
   class BreadcrumbsComponent < ViewComponent::Base
 
     renders_many :breadcrumbs, Settings::BreadcrumbComponent
-
-    def initialize()
-    end
   end
 end
\ No newline at end of file
diff --git a/app/components/settings/users/list_item_component.html.erb b/app/components/settings/users/list_item_component.html.erb
index d2c30a7b..ff943388 100644
--- a/app/components/settings/users/list_item_component.html.erb
+++ b/app/components/settings/users/list_item_component.html.erb
@@ -21,7 +21,7 @@
         <p class="text-sm leading-6 text-gray-900"><%= user_job_title %></p>
       <% end %>
       <div class="mt-1 flex items-center gap-x-1.5">
-        <%= render(Settings::Users::StatusComponent.new(status: user_status)) %>
+        <%= render(Shared::StatusComponent.new(status: user_status)) %>
       </div>
     </div>
     <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/app/components/settings/users/status_component.html.erb b/app/components/settings/users/status_component.html.erb
deleted file mode 100644
index fc5c0886..00000000
--- a/app/components/settings/users/status_component.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset <%= user_status_color %>">
-  Status: <%= user_status %>
-</span>
\ No newline at end of file
diff --git a/app/components/settings/users/status_component.rb b/app/components/settings/users/status_component.rb
deleted file mode 100644
index 13598917..00000000
--- a/app/components/settings/users/status_component.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-module Settings
-  module Users
-    class StatusComponent < ViewComponent::Base
-      def initialize(status:)
-        @status = status
-      end
-
-      def user_status
-        @status.capitalize
-      end
-
-      def user_status_color
-        case @status
-        when Membership::ACTIVE
-          "bg-green-50 text-green-700 ring-green-600/20"
-        else
-          "bg-gray-50 text-gray-600 ring-gray-500/10"
-        end
-      end
-    end
-  end
-end
\ No newline at end of file
diff --git a/app/components/shared/status_component.html.erb b/app/components/shared/status_component.html.erb
new file mode 100644
index 00000000..9962ef94
--- /dev/null
+++ b/app/components/shared/status_component.html.erb
@@ -0,0 +1,3 @@
+<span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset <%= target_status_color %>">
+  Status: <%= target_status.titleize %>
+</span>
\ No newline at end of file
diff --git a/app/components/shared/status_component.rb b/app/components/shared/status_component.rb
new file mode 100644
index 00000000..7aff9a72
--- /dev/null
+++ b/app/components/shared/status_component.rb
@@ -0,0 +1,20 @@
+module Shared
+  class StatusComponent < ViewComponent::Base
+    def initialize(status:)
+      @status = status
+    end
+
+    def target_status
+      @status.capitalize
+    end
+
+    def target_status_color
+      case @status
+      when Membership::ACTIVE || Client::ACTIVE
+        "bg-green-50 text-green-700 ring-green-600/20"
+      else
+        "bg-gray-50 text-gray-600 ring-gray-500/10"
+      end
+    end
+  end
+end
\ No newline at end of file
diff --git a/app/controllers/clients_controller.rb b/app/controllers/clients_controller.rb
index a0ec8e66..60d432c2 100644
--- a/app/controllers/clients_controller.rb
+++ b/app/controllers/clients_controller.rb
@@ -1,71 +1,55 @@
 class ClientsController < ApplicationController
   before_action :require_user!
-  before_action :set_client, only: %i[ show edit update destroy ]
+  before_action :set_client, only: %i[ show edit update toggle_archived ]
 
-  # GET /clients or /clients.json
   def index
-    @clients = Client.all
+    @clients = current_company.clients.all
   end
 
-  # GET /clients/1 or /clients/1.json
   def show
   end
 
-  # GET /clients/new
   def new
     @client = Client.new
   end
 
-  # GET /clients/1/edit
   def edit
   end
 
-  # POST /clients or /clients.json
   def create
-    @client = Client.new(client_params)
+    @client = current_company.clients.new(create_client_params)
 
-    respond_to do |format|
-      if @client.save
-        format.html { redirect_to client_url(@client), notice: "Client was successfully created." }
-        format.json { render :show, status: :created, location: @client }
-      else
-        format.html { render :new, status: :unprocessable_entity }
-        format.json { render json: @client.errors, status: :unprocessable_entity }
-      end
+    if @client.save
+      redirect_to client_url(@client), notice: "Client was successfully created."
+    else
+      render :new, status: :unprocessable_entity
     end
   end
 
-  # PATCH/PUT /clients/1 or /clients/1.json
   def update
-    respond_to do |format|
-      if @client.update(client_params)
-        format.html { redirect_to client_url(@client), notice: "Client was successfully updated." }
-        format.json { render :show, status: :ok, location: @client }
-      else
-        format.html { render :edit, status: :unprocessable_entity }
-        format.json { render json: @client.errors, status: :unprocessable_entity }
-      end
+    if @client.update(update_client_params)
+      redirect_to client_url(@client), notice: "Client was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
     end
   end
 
-  # DELETE /clients/1 or /clients/1.json
-  def destroy
-    @client.destroy!
+  def toggle_archived
+    @client.toggle_archived!
 
-    respond_to do |format|
-      format.html { redirect_to clients_url, notice: "Client was successfully destroyed." }
-      format.json { head :no_content }
-    end
+    redirect_to clients_url, notice: "Client status was successfully updated."
   end
 
   private
-    # Use callbacks to share common setup or constraints between actions.
     def set_client
-      @client = Client.find(params[:id])
+      @client = current_company.clients.find(params[:id])
+    end
+
+    def create_client_params
+      params.require(:client).permit(:name, :description)
     end
 
-    # Only allow a list of trusted parameters through.
-    def client_params
-      params.require(:client).permit(:name, :description, :status, :company_id)
+    def update_client_params
+      params.require(:client).permit(:name, :description, :status)
     end
 end
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 942ee10c..78adff8b 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -1,60 +1,43 @@
 class ProjectsController < ApplicationController
   before_action :require_user!
-  before_action :set_project, only: %i[ show edit update destroy ]
+  before_action :set_project, only: %i[ show edit update ]
 
-  # GET /projects or /projects.json
   def index
     @projects = Project.includes(:company). all
   end
 
-  # GET /projects/1 or /projects/1.json
   def show
   end
 
-  # GET /projects/new
   def new
-    @project = Project.new
+    @client = Client.find_by(id: params[:client_id]) # optional
+    @project = Project.new(
+      client_id: params[:client_id],
+
+      # TODO: make these configurable?
+      status: Project::PROPOSED,
+      payment_frequency: Project::MONTHLY
+    )
   end
 
-  # GET /projects/1/edit
   def edit
   end
 
-  # POST /projects or /projects.json
   def create
     @project = Project.new(project_params)
 
-    respond_to do |format|
-      if @project.save
-        format.html { redirect_to project_url(@project), notice: "Project was successfully created." }
-        format.json { render :show, status: :created, location: @project }
-      else
-        format.html { render :new, status: :unprocessable_entity }
-        format.json { render json: @project.errors, status: :unprocessable_entity }
-      end
+    if @project.save
+      redirect_to project_url(@project), notice: "Project was successfully created."
+    else
+      render :new, status: :unprocessable_entity
     end
   end
 
-  # PATCH/PUT /projects/1 or /projects/1.json
   def update
-    respond_to do |format|
-      if @project.update(project_params)
-        format.html { redirect_to project_url(@project), notice: "Project was successfully updated." }
-        format.json { render :show, status: :ok, location: @project }
-      else
-        format.html { render :edit, status: :unprocessable_entity }
-        format.json { render json: @project.errors, status: :unprocessable_entity }
-      end
-    end
-  end
-
-  # DELETE /projects/1 or /projects/1.json
-  def destroy
-    @project.destroy!
-
-    respond_to do |format|
-      format.html { redirect_to projects_url, notice: "Project was successfully destroyed." }
-      format.json { head :no_content }
+    if @project.update(project_params)
+      redirect_to project_url(@project), notice: "Project was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
     end
   end
 
diff --git a/app/models/client.rb b/app/models/client.rb
index ff1a4b08..ea55ef17 100644
--- a/app/models/client.rb
+++ b/app/models/client.rb
@@ -13,4 +13,24 @@ class Client < ApplicationRecord
 
   scope :active, -> { where(status: 'active') }
   scope :archived, -> { where(status: 'archived') }
+
+  def active?
+    status == ACTIVE
+  end
+
+  def archived?
+    status == ARCHIVED
+  end
+  def toggle_archived!
+    new_status = active? ? Client::ARCHIVED : Client::ACTIVE
+
+    Client.transaction do
+      update!(status: new_status)
+
+      # archive all projects
+      if new_status == Client::ARCHIVED
+        projects.update_all(status: Project::ARCHIVED)
+      end
+    end
+  end
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 09837f3d..227814e0 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -28,4 +28,24 @@ class Project < ApplicationRecord
   validates :status, presence: true, inclusion: { in: VALID_STATUSES }
   validates :cost, presence: true, numericality: { greater_than_or_equal_to: 0.0 }
   validates :payment_frequency, presence: true, inclusion: { in: VALID_PAYMENT_FREQUENCIES }
+
+  def active?
+    status == ACTIVE
+  end
+
+  def archived?
+    status == ARCHIVED
+  end
+
+  def proposed?
+    status == PROPOSED
+  end
+
+  def cancelled?
+    status == CANCELLED
+  end
+
+  def completed?
+    status == COMPLETED
+  end
 end
diff --git a/app/views/clients/_client.html.erb b/app/views/clients/_client.html.erb
deleted file mode 100644
index 9fe1013e..00000000
--- a/app/views/clients/_client.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<div id="<%= dom_id client %>">
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Name:</strong>
-    <%= client.name %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= client.description %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Status:</strong>
-    <%= client.status %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Company:</strong>
-    <%= client.company_id %>
-  </p>
-
-  <% if action_name != "show" %>
-    <%= link_to "Show this client", client, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%= link_to "Edit this client", edit_client_path(client), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
-    <hr class="mt-6">
-  <% end %>
-</div>
diff --git a/app/views/clients/_client.json.jbuilder b/app/views/clients/_client.json.jbuilder
deleted file mode 100644
index 853686c9..00000000
--- a/app/views/clients/_client.json.jbuilder
+++ /dev/null
@@ -1,2 +0,0 @@
-json.extract! client, :id, :name, :description, :status, :company_id, :created_at, :updated_at
-json.url client_url(client, format: :json)
diff --git a/app/views/clients/_form.html.erb b/app/views/clients/_form.html.erb
deleted file mode 100644
index 74595cb0..00000000
--- a/app/views/clients/_form.html.erb
+++ /dev/null
@@ -1,34 +0,0 @@
-<%= form_with(model: client, class: "contents") do |form| %>
-  <% if client.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2><%= pluralize(client.errors.count, "error") %> prohibited this client from being saved:</h2>
-
-      <ul>
-        <% client.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-
-  <div class="my-5">
-    <%= form.label :name %>
-    <%= form.text_field :name, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
-
-  <div class="my-5">
-    <%= form.label :description %>
-    <%= form.text_area :description, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
-
-  <div class="my-5">
-    <%= form.label :status %>
-    <%= form.select :status, Client::VALID_STATUSES, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
-
-  <%= form.hidden_field :company_id, value: current_company_id %>
-
-  <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
-  </div>
-<% end %>
diff --git a/app/views/clients/edit.html.erb b/app/views/clients/edit.html.erb
index 3c0c5f9f..4fa9a96c 100644
--- a/app/views/clients/edit.html.erb
+++ b/app/views/clients/edit.html.erb
@@ -1,8 +1,66 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing client</h1>
+<div class="border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+  <%= render(Settings::BreadcrumbsComponent.new) do |breadcrumbs_component|
+    breadcrumbs_component.with_breadcrumb(title: "Clients", link: clients_path, first: true) do |clients_icon|
+      clients_icon.with_svg do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6 inline">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
+        </svg>
+      <% end
+    end
+    breadcrumbs_component.with_breadcrumb(title: @client.name, last: true)
+  end %>
+</div>
 
-  <%= render "form", client: @client %>
+<div class="bg-white p-4 mt-4">
+  <%= form_for @client, url: client_path(@client), data: {turbo: false} do |f| %>
+    <div class="space-y-12">
+      <div class="pb-12">
+        <h2 class="text-base font-semibold leading-7 text-gray-900">Add a new client</h2>
 
-  <%= link_to "Show this client", @client, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to clients", clients_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-</div>
+        <% if @client.errors.any? %>
+          <div class="rounded-md bg-red-50 p-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">There were <%= pluralize(@client.errors.count, "error") %> with adding the user to your company</h3>
+                <div class="mt-2 text-sm text-red-700">
+                  <ul role="list" class="list-disc space-y-1 pl-5">
+                    <% @client.errors.full_messages.each do |error| %>
+                      <li><%= error %></li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8">
+          <div>
+            <%= f.label :name, "Client name", class: "block text-sm font-medium leading-6 text-gray-900" %>
+            <div class="mt-2">
+              <%= f.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div>
+            <%= f.label :email, "Description", class: "block text-sm font-medium leading-6 text-gray-900" %>
+            <div class="mt-2">
+              <%= f.text_area :description, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <%= link_to "Cancel", client_path(@client), class: "text-sm font-semibold leading-6 text-gray-900" %>
+      <%= submit_tag "Save changes", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+    </div>
+  <% end %>
+
+</div>
\ No newline at end of file
diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb
index 977e4da2..0c8eca72 100644
--- a/app/views/clients/index.html.erb
+++ b/app/views/clients/index.html.erb
@@ -1,14 +1,15 @@
-<div class="w-full">
-  <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-  <% end %>
-
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Clients</h1>
-    <%= link_to "New client", new_client_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
-  </div>
-
-  <div id="clients" class="min-w-full">
-    <%= render @clients %>
+<div class="border-b border-gray-200 pb-5 sm:flex sm:items-center sm:justify-between">
+  <h3 class="text-base font-semibold leading-6 text-gray-900">Clients</h3>
+  <div class="mt-3 sm:ml-4 sm:mt-0">
+    <%= link_to "New Client", new_client_path, class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
   </div>
 </div>
+
+
+<div class="bg-white p-4 mt-4">
+  <ul role="list" class="divide-y divide-gray-100">
+    <% @clients.each do |client| %>
+      <%= render(Clients::ListItemComponent.new(client:, current_company:)) %>
+    <% end %>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/app/views/clients/index.json.jbuilder b/app/views/clients/index.json.jbuilder
deleted file mode 100644
index aca36bca..00000000
--- a/app/views/clients/index.json.jbuilder
+++ /dev/null
@@ -1 +0,0 @@
-json.array! @clients, partial: "clients/client", as: :client
diff --git a/app/views/clients/new.html.erb b/app/views/clients/new.html.erb
index 2c5aa7ca..4939f537 100644
--- a/app/views/clients/new.html.erb
+++ b/app/views/clients/new.html.erb
@@ -1,7 +1,62 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New client</h1>
+<div class="border-b border-gray-200 pb-5">
+  <%= link_to clients_path, class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" do %>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+    </svg>
+    <span class="ml-2 pr-2">Back</span>
+  <% end %>
+</div>
 
-  <%= render "form", client: @client %>
+<div class="bg-white p-4 mt-4">
+  <%= form_for @client, url: clients_path, data: {turbo: false} do |f| %>
+    <div class="space-y-12">
+      <div class="pb-12">
+        <h2 class="text-base font-semibold leading-7 text-gray-900">Add a new client</h2>
 
-  <%= link_to "Back to clients", clients_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-</div>
+        <% if @client.errors.any? %>
+          <div class="rounded-md bg-red-50 p-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">There were <%= pluralize(@client.errors.count, "error") %> with adding the user to your company</h3>
+                <div class="mt-2 text-sm text-red-700">
+                  <ul role="list" class="list-disc space-y-1 pl-5">
+                    <% @client.errors.full_messages.each do |error| %>
+                      <li><%= error %></li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8">
+          <div>
+            <%= f.label :name, "Client name", class: "block text-sm font-medium leading-6 text-gray-900" %>
+            <div class="mt-2">
+              <%= f.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div>
+            <%= f.label :email, "Description", class: "block text-sm font-medium leading-6 text-gray-900" %>
+            <div class="mt-2">
+              <%= f.text_area :description, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <%= link_to "Cancel", clients_path, class: "text-sm font-semibold leading-6 text-gray-900" %>
+      <%= submit_tag "Create", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+    </div>
+  <% end %>
+
+</div>
\ No newline at end of file
diff --git a/app/views/clients/show.html.erb b/app/views/clients/show.html.erb
index 8f33bdaa..5599682d 100644
--- a/app/views/clients/show.html.erb
+++ b/app/views/clients/show.html.erb
@@ -1,15 +1,106 @@
-<div class="mx-auto md:w-2/3 w-full flex">
-  <div class="mx-auto">
-    <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-    <% end %>
+<div class="border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+  <%= render(Settings::BreadcrumbsComponent.new) do |breadcrumbs_component|
+    breadcrumbs_component.with_breadcrumb(title: "Clients", link: clients_path, first: true) do |clients_icon|
+      clients_icon.with_svg do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6 inline">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
+        </svg>
+      <% end
+    end
+    breadcrumbs_component.with_breadcrumb(title: @client.name, last: true)
+  end %>
 
-    <%= render @client %>
+  <div class="mt-3 sm:ml-4 sm:mt-0">
+    <%= link_to "Edit", edit_client_path(@client), class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
 
-    <%= link_to "Edit this client", edit_client_path(@client), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%= button_to "Destroy this client", client_path(@client), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
-    </div>
-    <%= link_to "Back to clients", clients_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <% link_text = @client.active? ? 'Archive' : 'Activate' %>
+    <% confirmation_text = @client.active? ? 'Are you sure? This will archive all projects for this client.' : "Are you sure?" %>
+    <%= button_to link_text, toggle_archived_client_path(@client), method: :post, data: { turbo_confirm: confirmation_text }, form_class: "inline", class: "ml-3 inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600" %>
   </div>
 </div>
+
+<div class="bg-white p-4 mt-4">
+  <dl class="divide-y divide-gray-100">
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Client name</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @client.name %>
+      </dd>
+    </div>
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Description</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @client.description.presence || "N/A" %>
+      </dd>
+    </div>
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Projects</dt>
+      <dd class="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+        <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
+          <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
+            <div class="flex w-0 flex-1 items-center">
+              <%= link_to new_project_path(client_id: @client.id), class: "inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" do %>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="-ml-0.5 h-5 w-5">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+
+                New Project
+              <% end %>
+            </div>
+          </li>
+          <% @client.projects.each do |project| %>
+            <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
+              <div class="flex w-0 flex-1 items-center">
+                <% if project.active? %>
+                  <span class="inline-flex items-center gap-x-1.5 rounded-md bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                    <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                      Active
+                    </span>
+                  </span>
+                <% elsif project.proposed? %>
+                  <span class="inline-flex items-center gap-x-1.5 rounded-md bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800">
+                    <svg class="h-1.5 w-1.5 fill-yellow-500" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                    Proposed
+                  </span>
+                <% elsif project.archived? %>
+                  <span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+                    <svg class="h-1.5 w-1.5 fill-gray-400" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                    Archived
+                  </span>
+                <% elsif project.cancelled? %>
+                  <span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+                    <svg class="h-1.5 w-1.5 fill-gray-400" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                    Cancelled
+                  </span>
+                <% elsif project.completed? %>
+                  <span class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-100 px-1.5 py-0.5 text-xs font-medium text-indigo-700">
+                    <svg class="h-1.5 w-1.5 fill-indigo-500" viewBox="0 0 6 6" aria-hidden="true">
+                      <circle cx="3" cy="3" r="3" />
+                    </svg>
+                    Completed
+                  </span>
+                <% end %>
+                <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                  <span class="truncate font-medium">
+                    <%= link_to project.name, project_path(project) %>
+                  </span>
+                </div>
+              </div>
+              <div class="ml-4 flex-shrink-0">
+                <%= link_to "View StaffPlan", "#", class: "font-medium text-indigo-600 hover:text-indigo-500", onclick: "alert('this will take you to the React front end')" %>
+              </div>
+            </li>
+          <% end %>
+        </ul>
+      </dd>
+    </div>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/app/views/clients/show.json.jbuilder b/app/views/clients/show.json.jbuilder
deleted file mode 100644
index bc3ac83a..00000000
--- a/app/views/clients/show.json.jbuilder
+++ /dev/null
@@ -1 +0,0 @@
-json.partial! "clients/client", client: @client
diff --git a/app/views/dashboard/show.html.erb b/app/views/dashboard/show.html.erb
index f0a1e069..abb8d7a5 100644
--- a/app/views/dashboard/show.html.erb
+++ b/app/views/dashboard/show.html.erb
@@ -18,15 +18,19 @@
                 <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
                   <div class="flex w-0 flex-1 items-center">
                     <% if membership.active? %>
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 pr-2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                      </svg>
-                      Active
+                      <span class="inline-flex items-center gap-x-1.5 rounded-md bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                        <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
+                          <circle cx="3" cy="3" r="3" />
+                        </svg>
+                        Active
+                      </span>
                     <% else %>
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 pr-2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" />
-                      </svg>
-                      Inactive
+                      <span class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+                        <svg class="h-1.5 w-1.5 fill-gray-400" viewBox="0 0 6 6" aria-hidden="true">
+                          <circle cx="3" cy="3" r="3" />
+                        </svg>
+                        Inactive
+                      </span>
                     <% end %>
                     <div class="ml-4 flex min-w-0 flex-1 gap-2">
                       <span class="truncate font-medium">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index ade880d8..befdd643 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -26,7 +26,7 @@
                 <div class="ml-10 flex items-baseline space-x-4">
                   <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
                   <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium" onclick="alert('Assumption: this will render the current user StaffPlan view'); return false;">My StaffPlan</a>
-                  <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Clients</a>
+                  <%= header_link_to "Clients", clients_path %>
                   <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium" onclick="alert('Assumption: this will render the projects StaffPlan view'); return false;">Projects</a>
                   <% if current_user.owner?(company: current_company) %>
                     <%= header_link_to "Settings", settings_path %>
@@ -97,7 +97,7 @@
         <div class="border-b border-gray-700 md:hidden hidden" id="mobile-menu">
           <div class="space-y-1 px-2 py-3 sm:px-3">
             <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium" onclick="alert('Assumption: this will render the current user StaffPlan view'); return false;">My StaffPlan</a>
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Clients</a>
+            <%= mobile_header_link_to "Clients", clients_path %>
             <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium" onclick="alert('Assumption: this will render the projects StaffPlan view'); return false;">Projects</a>
             <% if current_user.owner?(company: current_company) %>
               <%= mobile_header_link_to "Settings", settings_path %>
diff --git a/app/views/projects/_project.json.jbuilder b/app/views/projects/_project.json.jbuilder
deleted file mode 100644
index a9f0bfc7..00000000
--- a/app/views/projects/_project.json.jbuilder
+++ /dev/null
@@ -1,2 +0,0 @@
-json.extract! project, :id, :client_id, :name, :status, :company_id, :proposed, :cost, :payment_frequency, :created_at, :updated_at
-json.url project_url(project, format: :json)
diff --git a/app/views/projects/edit.html.erb b/app/views/projects/edit.html.erb
index 2975991b..9ff671eb 100644
--- a/app/views/projects/edit.html.erb
+++ b/app/views/projects/edit.html.erb
@@ -1,8 +1,99 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing project</h1>
+<div class="border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+  <%= render(Settings::BreadcrumbsComponent.new) do |breadcrumbs_component|
+    breadcrumbs_component.with_breadcrumb(title: "Clients", link: clients_path, first: true) do |breadcumb|
+      breadcumb.with_svg do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6 inline">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
+        </svg>
+      <% end
+    end
 
-  <%= render "form", project: @project %>
+    breadcrumbs_component.with_breadcrumb(title: @project.client.name, link: client_path(@project.client))
+    breadcrumbs_component.with_breadcrumb(title: @project.name, link: project_path(@project))
+    breadcrumbs_component.with_breadcrumb(title: "Edit project", last: true)
+  end %>
 
-  <%= link_to "Show this project", @project, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to projects", projects_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <div class="mt-3 sm:ml-4 sm:mt-0">
+    <%= link_to "Edit", edit_project_path(@project), class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+  </div>
 </div>
+
+<div class="bg-white p-4 mt-4">
+  <%= form_for @project, url: project_path(@project), data: {turbo: false} do |f| %>
+    <div class="space-y-12 sm:space-y-16">
+      <div>
+        <h2 class="text-base font-semibold leading-7 text-gray-900">Edit project</h2>
+
+        <% if @project.errors.any? %>
+          <div class="rounded-md bg-red-50 p-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">There were <%= pluralize(@project.errors.count, "error") %> with adding the user to your company</h3>
+                <div class="mt-2 text-sm text-red-700">
+                  <ul role="list" class="list-disc space-y-1 pl-5">
+                    <% @project.errors.full_messages.each do |error| %>
+                      <li><%= error %></li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="mt-10 space-y-8 border-b border-gray-900/10 pb-12 sm:space-y-0 sm:divide-y sm:divide-gray-900/10 sm:border-t sm:pb-0">
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <label for="country" class="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5">Client</label>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_client_id" name="project[client_id]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_from_collection_for_select current_company.clients.active.all, 'id', 'name', @project.client_id %>
+              </select>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :name, "Project name", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <%= f.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :status, "Status", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_status" name="project[status]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_for_select(Project::VALID_STATUSES, @project.status) %>
+              </select>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :cost, "Estimated cost", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <%= f.text_field :cost, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-md sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :payment_frequency, "Payment frequency", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_payment_frequency" name="project[payment_frequency]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_for_select(Project::VALID_PAYMENT_FREQUENCIES, @project.payment_frequency) %>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <%= link_to "Cancel", project_path(@project), class: "text-sm font-semibold leading-6 text-gray-900" %>
+      <%= submit_tag "Save changes", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+    </div>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/views/projects/index.json.jbuilder b/app/views/projects/index.json.jbuilder
deleted file mode 100644
index e9db4f98..00000000
--- a/app/views/projects/index.json.jbuilder
+++ /dev/null
@@ -1 +0,0 @@
-json.array! @projects, partial: "projects/project", as: :project
diff --git a/app/views/projects/new.html.erb b/app/views/projects/new.html.erb
index d7fd3e3a..8678e988 100644
--- a/app/views/projects/new.html.erb
+++ b/app/views/projects/new.html.erb
@@ -1,7 +1,90 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New project</h1>
+<% back_link = @client.present? ? client_path(@client) : projects_path %>
 
-  <%= render "form", project: @project %>
-
-  <%= link_to "Back to projects", projects_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+<div class="border-b border-gray-200 pb-5">
+  <%= link_to back_link, class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" do %>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+    </svg>
+    <span class="ml-2 pr-2">Back</span>
+  <% end %>
 </div>
+
+<div class="bg-white p-4 mt-4">
+  <%= form_for @project, url: projects_path, data: {turbo: false} do |f| %>
+    <div class="space-y-12 sm:space-y-16">
+      <div>
+        <h2 class="text-base font-semibold leading-7 text-gray-900">Add a project</h2>
+
+        <% if @project.errors.any? %>
+          <div class="rounded-md bg-red-50 p-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">There were <%= pluralize(@project.errors.count, "error") %> with adding the user to your company</h3>
+                <div class="mt-2 text-sm text-red-700">
+                  <ul role="list" class="list-disc space-y-1 pl-5">
+                    <% @project.errors.full_messages.each do |error| %>
+                      <li><%= error %></li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="mt-10 space-y-8 border-b border-gray-900/10 pb-12 sm:space-y-0 sm:divide-y sm:divide-gray-900/10 sm:border-t sm:pb-0">
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <label for="country" class="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5">Client</label>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_client_id" name="project[client_id]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_from_collection_for_select current_company.clients.active.all, 'id', 'name', @project.client_id %>
+              </select>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :name, "Project name", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <%= f.text_field :name, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :status, "Status", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_status" name="project[status]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_for_select(Project::VALID_STATUSES, @project.status) %>
+              </select>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :cost, "Estimated cost", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <%= f.text_field :cost, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-md sm:text-sm sm:leading-6" %>
+            </div>
+          </div>
+
+          <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">
+            <%= f.label :payment_frequency, "Payment frequency", class: "block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5" %>
+            <div class="mt-2 sm:col-span-2 sm:mt-0">
+              <select id="project_payment_frequency" name="project[payment_frequency]" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                <%= options_for_select(Project::VALID_PAYMENT_FREQUENCIES, @project.payment_frequency) %>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <%= link_to "Cancel", back_link, class: "text-sm font-semibold leading-6 text-gray-900" %>
+      <%= submit_tag "Create", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+    </div>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index 9d9ae805..8b99700b 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -1,15 +1,47 @@
-<div class="mx-auto md:w-2/3 w-full flex">
-  <div class="mx-auto">
-    <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-    <% end %>
+<div class="border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+  <%= render(Settings::BreadcrumbsComponent.new) do |breadcrumbs_component|
+    breadcrumbs_component.with_breadcrumb(title: "Clients", link: clients_path, first: true) do |breadcumb|
+      breadcumb .with_svg do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-6 h-6 inline">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
+        </svg>
+      <% end
+    end
 
-    <%= render @project %>
+    breadcrumbs_component.with_breadcrumb(title: @project.client.name, link: client_path(@project.client))
+    breadcrumbs_component.with_breadcrumb(title: @project.name, last: true)
+  end %>
 
-    <%= link_to "Edit this project", edit_project_path(@project), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%= button_to "Destroy this project", project_path(@project), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
-    </div>
-    <%= link_to "Back to projects", projects_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <div class="mt-3 sm:ml-4 sm:mt-0">
+    <%= link_to "Edit", edit_project_path(@project), class: "ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
   </div>
 </div>
+
+<div class="bg-white p-4 mt-4">
+  <dl class="divide-y divide-gray-100">
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Project name</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @project.name %>
+      </dd>
+    </div>
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Status</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @project.status %>
+      </dd>
+    </div>
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Cost</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @project.cost || "N/A" %>
+      </dd>
+    </div>
+    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <dt class="text-sm font-medium leading-6 text-gray-900">Payment Frequency</dt>
+      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+        <%= @project.payment_frequency || "N/A" %>
+      </dd>
+    </div>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/app/views/projects/show.json.jbuilder b/app/views/projects/show.json.jbuilder
deleted file mode 100644
index 0be99bdf..00000000
--- a/app/views/projects/show.json.jbuilder
+++ /dev/null
@@ -1 +0,0 @@
-json.partial! "projects/project", project: @project
diff --git a/app/views/settings/users/edit.html.erb b/app/views/settings/users/edit.html.erb
index 81711e12..118593b8 100644
--- a/app/views/settings/users/edit.html.erb
+++ b/app/views/settings/users/edit.html.erb
@@ -59,7 +59,7 @@ end %>
 
     <div class="mt-6 flex items-center justify-end gap-x-6">
       <%= link_to "Cancel", settings_user_path(@user), class: "text-sm font-semibold leading-6 text-gray-900" %>
-      <%= submit_tag "Create", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+      <%= submit_tag "Save changes", data: {disable_with: "Please wait..."}, class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
     </div>
   <% end %>
 </div>
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index 969bf04b..20b0bfd4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -12,8 +12,12 @@
   post "/graphql", to: "graphql#execute"
 
   resources :assignments
-  resources :projects
-  resources :clients
+  resources :projects, except: [:destroy]
+  resources :clients, except: [:destroy] do
+    member do
+      post :toggle_archived
+    end
+  end
   resources :registrations, only: [:new, :create] do
     member do
       get :register
diff --git a/spec/models/client_spec.rb b/spec/models/client_spec.rb
index a4554afd..908c2841 100644
--- a/spec/models/client_spec.rb
+++ b/spec/models/client_spec.rb
@@ -16,4 +16,49 @@
     it { should belong_to(:company) }
     it { should have_many(:projects).dependent(:destroy) }
   end
+
+  describe "#active?" do
+    it "returns true if status is active" do
+      client = build(:client, status: "active")
+      expect(client.active?).to be true
+    end
+
+    it "returns false if status is archived" do
+      client = build(:client, status: "archived")
+      expect(client.active?).to be false
+    end
+  end
+
+  describe "archived?" do
+    it "returns true if status is archived" do
+      client = build(:client, status: "archived")
+      expect(client.archived?).to be true
+    end
+
+    it "returns false if status is active" do
+      client = build(:client, status: "active")
+      expect(client.archived?).to be false
+    end
+  end
+
+  describe "#toggle_archived!" do
+    it "changes status from active to archived" do
+      client = create(:client, status: "active")
+      client.toggle_archived!
+      expect(client.status).to eq("archived")
+    end
+
+    it "changes status from archived to active" do
+      client = create(:client, status: "archived")
+      client.toggle_archived!
+      expect(client.status).to eq("active")
+    end
+
+    it "archives all projects when archived" do
+      client = create(:client, status: "active")
+      project = create(:project, client: client, status: "active")
+      client.toggle_archived!
+      expect(project.reload.status).to eq("archived")
+    end
+  end
 end
diff --git a/spec/models/project_spec.rb b/spec/models/project_spec.rb
index 25badb87..6b91f98e 100644
--- a/spec/models/project_spec.rb
+++ b/spec/models/project_spec.rb
@@ -19,4 +19,64 @@
     it { should have_many(:assignments).dependent(:destroy) }
     it { should have_many(:users).through(:assignments) }
   end
+
+  describe "#active?" do
+    it "returns true if the status is active" do
+      project = build(:project, status: "active")
+      expect(project.active?).to eq(true)
+    end
+
+    it "returns false if the status is not active" do
+      project = build(:project, status: "archived")
+      expect(project.active?).to eq(false)
+    end
+  end
+
+  describe "#archived?" do
+    it "returns true if the status is archived" do
+      project = build(:project, status: "archived")
+      expect(project.archived?).to eq(true)
+    end
+
+    it "returns false if the status is not archived" do
+      project = build(:project, status: "active")
+      expect(project.archived?).to eq(false)
+    end
+  end
+
+  describe "#proposed?" do
+    it "returns true if the status is proposed" do
+      project = build(:project, status: "proposed")
+      expect(project.proposed?).to eq(true)
+    end
+
+    it "returns false if the status is not proposed" do
+      project = build(:project, status: "active")
+      expect(project.proposed?).to eq(false)
+    end
+  end
+
+  describe "#cancelled?" do
+    it "returns true if the status is cancelled" do
+      project = build(:project, status: "cancelled")
+      expect(project.cancelled?).to eq(true)
+    end
+
+    it "returns false if the status is not cancelled" do
+      project = build(:project, status: "active")
+      expect(project.cancelled?).to eq(false)
+    end
+  end
+
+  describe "#completed?" do
+    it "returns true if the status is completed" do
+      project = build(:project, status: "completed")
+      expect(project.completed?).to eq(true)
+    end
+
+    it "returns false if the status is not completed" do
+      project = build(:project, status: "active")
+      expect(project.completed?).to eq(false)
+    end
+  end
 end
diff --git a/spec/requests/clients_spec.rb b/spec/requests/clients_spec.rb
new file mode 100644
index 00000000..979a2f67
--- /dev/null
+++ b/spec/requests/clients_spec.rb
@@ -0,0 +1,197 @@
+require 'rails_helper'
+
+RSpec.describe "Clients", type: :request do
+
+  context "when user is not logged in" do
+    describe "GET /index" do
+      it "redirects to login page" do
+        get clients_path
+        expect(response).to redirect_to("/sign_in")
+      end
+    end
+  end
+
+  context "when user is logged in" do
+    before do
+      @user = FactoryBot.create(:user)
+      passwordless_sign_in(@user)
+    end
+
+    describe "GET /index" do
+      it "returns http success" do
+        get clients_path
+        expect(response).to have_http_status(:success)
+      end
+
+      it "renders the index template" do
+        get clients_path
+        expect(response).to render_template(:index)
+      end
+
+      it "returns all clients" do
+        FactoryBot.create(:client, company: @user.current_company)
+        FactoryBot.create(:client, company: @user.current_company)
+        FactoryBot.create(:client, company: @user.current_company)
+        FactoryBot.create(:client, company: @user.current_company)
+        get clients_path
+        expect(assigns(:clients).length).to eq(4)
+      end
+    end
+
+    describe "GET /show" do
+      it "returns http success" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get client_path(client)
+        expect(response).to have_http_status(:success)
+      end
+
+      it "renders the show template" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get client_path(client)
+        expect(response).to render_template(:show)
+      end
+
+      it "returns the correct client" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get client_path(client)
+        expect(assigns(:client)).to eq(client)
+      end
+
+      it "renders the 404 page if the client does not belong to the current_company" do
+        client = FactoryBot.create(:client)
+        expect(@user.current_company.clients).not_to include(client)
+        get client_path(client.id)
+        expect(response.status).to eq(404)
+      end
+    end
+
+    describe "GET /new" do
+      it "returns http success" do
+        get new_client_path
+        expect(response).to have_http_status(:success)
+      end
+
+      it "renders the new template" do
+        get new_client_path
+        expect(response).to render_template(:new)
+      end
+    end
+
+    describe "GET /edit" do
+      it "returns http success" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get edit_client_path(client)
+        expect(response).to have_http_status(:success)
+      end
+
+      it "renders the edit template" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get edit_client_path(client)
+        expect(response).to render_template(:edit)
+      end
+
+      it "returns the correct client" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        get edit_client_path(client)
+        expect(assigns(:client)).to eq(client)
+      end
+
+      it "renders the 404 page if the client does not belong to the current_company" do
+        client = FactoryBot.create(:client)
+        expect(@user.current_company.clients).not_to include(client)
+        get edit_client_path(client.id)
+        expect(response.status).to eq(404)
+      end
+    end
+
+    describe "POST /create" do
+      it "creates a new client" do
+        expect {
+          post clients_path, params: { client: FactoryBot.attributes_for(:client) }
+        }.to change(Client, :count).by(1)
+      end
+
+      it "redirects to the client page" do
+        post clients_path, params: { client: FactoryBot.attributes_for(:client) }
+        expect(response).to redirect_to(client_path(Client.last))
+      end
+
+      it "returns an error if the client is invalid" do
+        post clients_path, params: { client: { name: nil } }
+        expect(response).to render_template(:new)
+      end
+
+      it "sets the client's company to the current_company" do
+        post clients_path, params: { client: FactoryBot.attributes_for(:client) }
+        expect(Client.last.company).to eq(@user.current_company)
+      end
+
+      it "sets the client's status to active" do
+        post clients_path, params: { client: FactoryBot.attributes_for(:client) }
+        expect(Client.last.status).to eq(Client::ACTIVE)
+      end
+
+      it "returns an error if the client's name is not unique for the current_company" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        post clients_path, params: { client: { name: client.name } }
+        expect(response).to render_template(:new)
+      end
+    end
+
+    describe "PATCH /update" do
+      it "updates the client" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        patch client_path(client), params: { client: { name: "New Name" } }
+        expect(client.reload.name).to eq("New Name")
+      end
+
+      it "redirects to the client page" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        patch client_path(client), params: { client: { name: "New Name" } }
+        expect(response).to redirect_to(client_path(client))
+      end
+
+      it "returns an error if the client is invalid" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        patch client_path(client), params: { client: { name: nil } }
+        expect(response).to render_template(:edit)
+      end
+
+      it "renders the 404 page if the client does not belong to the current_company" do
+        client = FactoryBot.create(:client)
+        expect(@user.current_company.clients).not_to include(client)
+        patch client_path(client), params: { client: { name: "New Name" } }
+        expect(response.status).to eq(404)
+      end
+
+      it "returns an error if the client's name is not unique for the current_company" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        other_client = FactoryBot.create(:client, company: @user.current_company)
+        patch client_path(client), params: { client: { name: other_client.name } }
+        expect(response).to render_template(:edit)
+      end
+    end
+
+    describe "POST /toggle_archived" do
+      it "toggles the client's status" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        expect(client.active?).to eq(true)
+        post toggle_archived_client_path(client)
+        expect(client.reload.archived?).to eq(true)
+      end
+
+      it "redirects to the clients page" do
+        client = FactoryBot.create(:client, company: @user.current_company)
+        post toggle_archived_client_path(client)
+        expect(response).to redirect_to(clients_path)
+      end
+
+      it "renders the 404 page if the client does not belong to the current_company" do
+        client = FactoryBot.create(:client)
+        expect(@user.current_company.clients).not_to include(client)
+        post toggle_archived_client_path(client)
+        expect(response.status).to eq(404)
+      end
+    end
+  end
+end
diff --git a/spec/requests/projects_spec.rb b/spec/requests/projects_spec.rb
new file mode 100644
index 00000000..9e8f0415
--- /dev/null
+++ b/spec/requests/projects_spec.rb
@@ -0,0 +1,121 @@
+require 'rails_helper'
+
+RSpec.describe "Projects", type: :request do
+  context "when no use is logged in" do
+    describe "GET /projects" do
+      it "redirects to the login page" do
+        get projects_path
+        expect(response).to redirect_to(auth_sign_in_path)
+      end
+    end
+  end
+
+  context "when logged in as a user" do
+    before do
+      @user = FactoryBot.create(:user)
+      passwordless_sign_in @user
+    end
+
+    describe "GET /projects" do
+      it "renders the index template" do
+        get projects_path
+        expect(response).to render_template(:index)
+      end
+    end
+
+    describe "GET /projects/:id" do
+      it "renders the show template" do
+        project = FactoryBot.create(:project)
+        get project_path(project)
+        expect(response).to render_template(:show)
+      end
+
+      it "returns a 404 for a project that doesn't exist" do
+        get project_path(123)
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    describe "GET /projects/new" do
+      it "renders the new template" do
+        get new_project_path
+        expect(response).to render_template(:new)
+      end
+
+      it "sets the client_id on the new project if passed in" do
+        client = FactoryBot.create(:client)
+        get new_project_path(client_id: client.id)
+        expect(assigns(:project).client_id).to eq(client.id)
+      end
+
+      it "sets the status to proposed on the new project" do
+        get new_project_path
+        expect(assigns(:project).status).to eq("proposed")
+      end
+
+      it "sets the payment_frequency to monthly on the new project" do
+        get new_project_path
+        expect(assigns(:project).payment_frequency).to eq("monthly")
+      end
+    end
+
+    describe "GET /projects/:id/edit" do
+      it "renders the edit template" do
+        project = FactoryBot.create(:project)
+        get edit_project_path(project)
+        expect(response).to render_template(:edit)
+      end
+
+      it "returns a 404 for a project that doesn't exist" do
+        get edit_project_path(123)
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    describe "POST /projects" do
+      it "creates a project" do
+        client = FactoryBot.create(:client)
+        project_params = FactoryBot.attributes_for(:project, client_id: client.id)
+        expect {
+          post projects_path, params: { project: project_params }
+        }.to change(Project, :count).by(1)
+      end
+
+      it "redirects to the project page" do
+        client = FactoryBot.create(:client)
+        project_params = FactoryBot.attributes_for(:project, client_id: client.id)
+        post projects_path, params: { project: project_params }
+        expect(response).to redirect_to(project_path(Project.last))
+      end
+
+      it "returns a 422 for invalid params" do
+        project_params = FactoryBot.attributes_for(:project, name: nil)
+        post projects_path, params: { project: project_params }
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+    end
+
+    describe "PATCH /projects/:id" do
+      it "updates a project" do
+        project = FactoryBot.create(:project)
+        project_params = FactoryBot.attributes_for(:project, name: "New Name")
+        patch project_path(project), params: { project: project_params }
+        expect(project.reload.name).to eq("New Name")
+      end
+
+      it "redirects to the project page" do
+        project = FactoryBot.create(:project)
+        project_params = FactoryBot.attributes_for(:project, name: "New Name")
+        patch project_path(project), params: { project: project_params }
+        expect(response).to redirect_to(project_path(project))
+      end
+
+      it "returns a 422 for invalid params" do
+        project = FactoryBot.create(:project)
+        project_params = FactoryBot.attributes_for(:project, name: nil)
+        patch project_path(project), params: { project: project_params }
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+    end
+  end
+end