diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 69a430a..85986ae 100755
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -20,3 +20,5 @@ body {
 }
 @import "devise/index";
 @import "users/index";
+@import "connections/index";
+
diff --git a/app/assets/stylesheets/connections/_index.scss b/app/assets/stylesheets/connections/_index.scss
new file mode 100644
index 0000000..84cb37e
--- /dev/null
+++ b/app/assets/stylesheets/connections/_index.scss
@@ -0,0 +1 @@
+@import 'new';
diff --git a/app/assets/stylesheets/connections/_new.scss b/app/assets/stylesheets/connections/_new.scss
new file mode 100644
index 0000000..37fdd9a
--- /dev/null
+++ b/app/assets/stylesheets/connections/_new.scss
@@ -0,0 +1,11 @@
+.align-center {
+  justify-content: center;
+  text-align: center;
+  h2 {
+    color: white;
+  }
+}
+.email {
+  color: white;
+}
+
diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss
index 816a19e..a897fcf 100644
--- a/app/assets/stylesheets/pages/_contacts.scss
+++ b/app/assets/stylesheets/pages/_contacts.scss
@@ -2,6 +2,14 @@ a:hover {
   text-decoration: none;
 }
 
+.contacts-header {
+  display: flex;
+  justify-content: space-between;
+  a {
+    align-self: flex-end;
+  }
+}
+
 .card {
   display: flex;
   justify-content: space-between;
diff --git a/app/controllers/connections_controller.rb b/app/controllers/connections_controller.rb
new file mode 100644
index 0000000..0a8b48b
--- /dev/null
+++ b/app/controllers/connections_controller.rb
@@ -0,0 +1,18 @@
+class ConnectionsController < ApplicationController
+  def new
+
+  end
+
+  def create
+    @connection = Connection.new
+    @connection.user = current_user
+    contact_user = User.find_by(email: params[:user][:email])
+    @connection.contact = contact_user
+
+    if @connection.save
+        redirect_to contacts_path
+    else
+
+    end
+  end
+end
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index e7676ac..dd8b1f4 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -6,11 +6,15 @@ class PagesController < ApplicationController
   end
 
   def index
+    @contact = Connection.new
   end
 
   def home
   end
 
+
+
+
   def cable_testing
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index d1090e6..ad2a68f 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -31,6 +31,7 @@ class UsersController < ApplicationController
   end
 
 
+
   private
 
   def find_user
diff --git a/app/views/connections/new.html.erb b/app/views/connections/new.html.erb
new file mode 100644
index 0000000..7963a7c
--- /dev/null
+++ b/app/views/connections/new.html.erb
@@ -0,0 +1,9 @@
+<div class="align-center">
+  <h2>Add a new contact:</h2>
+  <%= form_for User.new, url: connections_path do |f| %>
+    <%= f.label :email, class: "email" %>:
+    <%= f.text_field :email %>
+
+    <%= f.submit %>
+  <% end %>
+</div>
diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb
index 0551402..6878932 100644
--- a/app/views/pages/_contact.html.erb
+++ b/app/views/pages/_contact.html.erb
@@ -6,7 +6,11 @@ end
 
 <div class="card">
   <div class="info">
-    <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=65>
+    <% if contact.photo.url.nil? %>
+      <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=65>
+    <% else %>
+      <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65%>
+    <% end %>
     <div class="text text-color">
       <% if contact.nil? || contact.nil? %> <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
         <p><%= contact.email %></p>
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
index 3338a41..a9edc98 100644
--- a/app/views/pages/index.html.erb
+++ b/app/views/pages/index.html.erb
@@ -1,10 +1,17 @@
 <div class="container">
   <div class="contacts-container text-color">
     <div class="contacts half">
-    <h2 class="contact">Contacts</h2>
+      <div class="contacts-header">
+        <h2>Contacts</h2>
+
+        <%= link_to new_connection_path do %>
+          <i class="fas fa-plus-square"></i>
+        <% end %>
+      </div>
       <% current_user.contacts.each do |contact| %>
         <%= render "pages/contact", contact: contact %>
       <% end %>
+
     </div>
     <div class="video-feed half">
       <div class="video-content">
diff --git a/config/routes.rb b/config/routes.rb
index 7a4cdbe..60e89c4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -41,4 +41,7 @@ Rails.application.routes.draw do
   get '/users/:id/edit', to: 'users#edit', as: :user_edit
   patch '/users/:id', to: 'users#update'
   delete '/users/:id', to: 'users#destroy'
+
+  resources :connections, only: [:create, :new]
+  #get '/add_contact', to: 'connections#create'
 end
diff --git a/db/seeds.rb b/db/seeds.rb
index 1beea2a..4ff65e2 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -5,3 +5,5 @@
 #
 #   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
 #   Character.create(name: 'Luke', movie: movies.first)
+
+
diff --git a/test/controllers/connections_controller_test.rb b/test/controllers/connections_controller_test.rb
new file mode 100644
index 0000000..bbcbcde
--- /dev/null
+++ b/test/controllers/connections_controller_test.rb
@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class ConnectionsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end