diff --git a/README.md b/README.md
index 8671b10..6002b1a 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,7 @@ TUDUDI_SESSION_SECRET
     -e TUDUDI_USER_EMAIL=myemail@example.com \
     -e TUDUDI_USER_PASSWORD=mysecurepassword \
     -e TUDUDI_SESSION_SECRET=3337c138d17ac7acefa412e5db0d7ef6540905b198cc28c5bf0d11e48807a71bdfe48d82ed0a0a6eb667c937cbdd1db3e1e6073b3148bff37f73cc6398a39671 \
-    -v ~/tududi_db:/db \
+    -v ~/tududi_db:/usr/src/app/db \
     -p 9292:9292 \
     -d chrisvel/tududi:0.5
     ```
diff --git a/app/routes/projects_routes.rb b/app/routes/projects_routes.rb
index e686680..00801ec 100644
--- a/app/routes/projects_routes.rb
+++ b/app/routes/projects_routes.rb
@@ -1,7 +1,6 @@
 class Sinatra::Application
   get '/projects' do
-    @projects_with_tasks = current_user.projects.with_incomplete_tasks.order(:name)
-    @projects_with_tasks_complete = current_user.projects.with_complete_tasks.order(:name)
+    @projects_with_tasks = current_user.projects.includes(:tasks, :area).order(:name)
 
     erb :'projects/index'
   end
diff --git a/app/views/projects/index.erb b/app/views/projects/index.erb
index ed44e98..0767bb6 100644
--- a/app/views/projects/index.erb
+++ b/app/views/projects/index.erb
@@ -3,25 +3,33 @@
   <i class="fs-4 bi bi-plus-circle-fill text-primary me-2"></i> <span class="fs-6">New task</span>
 </div>
 <div class="collapse" id="newTaskForm">
-  <div class="card bg-white shadow-sm border-0 p-4">
+  <div class="card bg-white shadow-sm border-0 mt-2 p-4 mx-3">
     <%= partial :'tasks/_form', locals: { task: Task.new } %>
   </div>
 </div>
 <div class="mx-3 my-2">
   <% if @projects_with_tasks.any? %>
     <% @projects_with_tasks.each do |project| %>
+      <h5 class="mt-4 mb-2">
+        <a class="px-2 py-1 btn btn-outline-dark rounded-0 d-inline-block" href="/project/<%= project.id %>">
+          <%= project.name.upcase %>
+        </a>
+      </h5>
       <% if project.tasks.any? %>
-        <h5 class="mt-4 mb-2">
-          <div class="px-2 py-1 mb-1 border border-dark d-inline-block"><%= project.name.upcase %></div>
-        </h5>
-        <% project.tasks.each do |task| %>
-          <div id="edit_task_form_<%= task.id %>" class="d-none">
-            <%= partial :'tasks/_form', locals: { task: task } %>
-          </div>
-          <div class="">
-            <%= partial :'tasks/_task', locals: { task: task } %>
-          </div>
-        <% end %>
+        <div class="mb-4">
+          <% project.tasks.each do |task| %>
+            <div id="edit_task_form_<%= task.id %>" class="d-none">
+              <%= partial :'tasks/_form', locals: { task: task } %>
+            </div>
+            <div class="">
+              <%= partial :'tasks/_task', locals: { task: task } %>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="px-4 py-2 mb-4 bg-secondary-subtle fw-light opacity-50">
+          No tasks have been created yet for this project
+        </div>
       <% end %>
     <% end %>
   <% end %>
diff --git a/app/views/sidebar.erb b/app/views/sidebar.erb
index 6e9247f..b2622b4 100644
--- a/app/views/sidebar.erb
+++ b/app/views/sidebar.erb
@@ -3,16 +3,16 @@
   </a>
   <hr>
   <ul class="nav nav-pills flex-column">
-    <li class="nav-item">
-      <a href="/inbox" class="<%= nav_link('/inbox') %>" aria-current="page">
-        <i class="bi bi-inbox-fill me-1"></i> Inbox
-      </a>
-    </li>
     <li>
       <a href="/tasks?due_date=today" class="<%= nav_link('/tasks', 'due_date' => 'today') %>">
         <i class="bi bi-calendar-day-fill me-1"></i> Today
       </a>
     </li>
+    <li class="nav-item">
+      <a href="/inbox" class="<%= nav_link('/inbox') %>" aria-current="page">
+        <i class="bi bi-inbox-fill me-1"></i> Inbox
+      </a>
+    </li>
     <li>
       <a href="/tasks?due_date=upcoming" class="<%= nav_link('/tasks', 'due_date' => 'upcoming') %>">
         <i class="bi bi-calendar3 me-1"></i> Upcoming
diff --git a/app/views/tasks/_form.erb b/app/views/tasks/_form.erb
index 4db75c5..38a6720 100644
--- a/app/views/tasks/_form.erb
+++ b/app/views/tasks/_form.erb
@@ -7,8 +7,9 @@
   <fieldset>
     <div class="row mb-3">
       <div class="col-md-12">
-        <label for="task_name" class="form-label">Task:</label>
-        <input type="text" id="task_name" name="name" value="<%= task.name %>" class="form-control" required>
+        <div class="input-group input-group-lg">
+          <input type="text" id="task_name" name="name" value="<%= task.name %>" class="form-control" placeholder="+ Add Task" required>
+        </div>
       </div>
     </div>
     <div class="row mb-3">
@@ -19,12 +20,12 @@
           <% current_user.projects.each do |project| %>
             <option value="<%= project.id %>" <%= 'selected' if task.project_id == project.id %>><%= project.name %></option>
             <% end %>
-          </select>
-        </div>
-        <div class="col-md-4">
-          <label for="task_priority" class="form-label">Priority:</label>
-          <select id="task_priority" name="priority" class="form-select">
-            <option value="Low" <%= 'selected' if task.priority == 'Low' %>>Low</option>
+        </select>
+      </div>
+      <div class="col-md-4">
+        <label for="task_priority" class="form-label">Priority:</label>
+        <select id="task_priority" name="priority" class="form-select">
+          <option value="Low" <%= 'selected' if task.priority == 'Low' %>>Low</option>
           <option value="Medium" <%= 'selected' if task.priority == 'Medium' %>>Medium</option>
           <option value="High" <%= 'selected' if task.priority == 'High' %>>High</option>
         </select>
@@ -32,36 +33,35 @@
       <div class="col-md-4">
         <label for="task_due_date" class="form-label">Due Date:</label>
         <input type="date" id="task_due_date" name="due_date" value="<%= task.due_date.strftime('%Y-%m-%d') if task.due_date %>" class="form-control">
-            </div>
-          </div>
-          <div class="row mb-3">
-            <div class="col-md-12">
-              <label for="task_tags" class="form-label">Tags:</label>
-              <input name="tags" id="task_tags" class="form-control" value="<%= task.tags&.map(&:name)&.join(',') %>">
-            </div>
-          </div>
-          <div class="mt-4">
-            <button type="submit" class="btn btn-primary">
-              <%= task.new_record? ? 'Create Task' : 'Update Task' %>
-            </button>
-            <% unless task.new_record? %>
-              <button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
-                <i class="bi bi-trash"></i>
-              </button>
-            <% end %>
-          </div>
-        </fieldset>
-      </form>
-      <% if !task.new_record? %>
-        <form id="delete_task_<%= task.id %>" action="/task/<%= task.id %>" method="post" class="d-none">
-          <input type="hidden" name="_method" value="delete">
-        </form>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class="col-md-12">
+        <input name="tags" id="task_tags" class="form-control" value="<%= task.tags&.map(&:name)&.join(',') %>" placeholder="Add Tags">
+      </div>
+    </div>
+    <div class="mt-4">
+      <button type="submit" class="btn btn-primary">
+        <%= task.new_record? ? 'Create Task' : 'Update Task' %>
+      </button>
+      <% unless task.new_record? %>
+        <button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
+          <i class="bi bi-trash"></i>
+        </button>
       <% end %>
-      <script>        
-        function deleteTask(taskId) {
-          if (confirm('Are you sure you want to delete this task?')) {
-            var form = document.getElementById('delete_task_' + taskId);
-            form.submit();
-          }
-        }
-      </script>
+    </div>
+  </fieldset>
+</form>
+<% if !task.new_record? %>
+  <form id="delete_task_<%= task.id %>" action="/task/<%= task.id %>" method="post" class="d-none">
+    <input type="hidden" name="_method" value="delete">
+  </form>
+<% end %>
+<script>
+  function deleteTask(taskId) {
+    if (confirm('Are you sure you want to delete this task?')) {
+      var form = document.getElementById('delete_task_' + taskId);
+      form.submit();
+    }
+  }
+</script>
diff --git a/public/css/app.css b/public/css/app.css
index f8212a9..7d7301d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -77,4 +77,11 @@ h6 {
 
 .login-content {
   margin-left: 200px;
+}
+
+/* task form */
+
+#task_name::placeholder {
+  color: #ccc;
+  opacity: 1; /* Firefox */
 }
\ No newline at end of file