diff --git a/app/assets/javascripts/signaling-server.js b/app/assets/javascripts/signaling-server.js
index 25db06a..25d1e5e 100644
--- a/app/assets/javascripts/signaling-server.js
+++ b/app/assets/javascripts/signaling-server.js
@@ -16,10 +16,12 @@ let pcPeers = {}; // peer connection
 let localstream;
 
 window.onload = () => {
-  currentUser = document.getElementById("current-user").innerHTML;
-  console.log(currentUser)
-  localVideo = document.getElementById("local-video");
-  remoteVideoContainer = document.getElementById("remote-video-container");
+  if (document.getElementById("current-user")) {
+    currentUser = document.getElementById("current-user").innerHTML;
+    console.log(currentUser)
+    localVideo = document.getElementById("local-video");
+    remoteVideoContainer = document.getElementById("remote-video-container");
+  }
 };
 
 // Ice Credentials
@@ -35,8 +37,10 @@ document.onreadystatechange = async () => {
       })
 
       localstream = stream;
-      localVideo.srcObject = stream
-      localVideo.muted = true
+      if (localVideo) {
+        localVideo.srcObject = stream
+        localVideo.muted = true
+      }
     } catch (e) { console.error(e); }
   }
 };
@@ -67,7 +71,11 @@ document.onreadystatechange = async () => {
 //     }
 //   });
 // };
-const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+
+if (document.getElementById('chatroom-hook')) {
+  const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+
+}
 
 const handleJoinSession = async () => {
   App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
diff --git a/app/assets/stylesheets/users/_index.scss b/app/assets/stylesheets/users/_index.scss
index 7147706..949abee 100644
--- a/app/assets/stylesheets/users/_index.scss
+++ b/app/assets/stylesheets/users/_index.scss
@@ -1,2 +1,3 @@
 @import "show";
 @import "edit";
+@import "setting";
diff --git a/app/assets/stylesheets/users/_setting.scss b/app/assets/stylesheets/users/_setting.scss
new file mode 100644
index 0000000..e69de29
diff --git a/app/assets/stylesheets/users/_show.scss b/app/assets/stylesheets/users/_show.scss
index b978a08..e800dd4 100644
--- a/app/assets/stylesheets/users/_show.scss
+++ b/app/assets/stylesheets/users/_show.scss
@@ -34,6 +34,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+      color: #f2321f;
       h1 {
         margin: 0 0 .5em 0 ;
       }
@@ -49,3 +50,4 @@
 
   }
 
+
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index efd5757..e7676ac 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -36,7 +36,6 @@ class PagesController < ApplicationController
         chat_room_id: chat_room.id
       }
     })
-
   end
 
   def accept_call
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 3901dc9..d1090e6 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -26,6 +26,11 @@ class UsersController < ApplicationController
     redirect_to root_path
   end
 
+  def setting
+    @user = current_user
+  end
+
+
   private
 
   def find_user
@@ -33,7 +38,8 @@ class UsersController < ApplicationController
     #authorize @user
   end
 
+
   def user_params
-    params.require(:user).permit(:email, :first_name, :last_name, :description, :photo)
+    params.require(:user).permit(:email, :first_name, :last_name, :description, :photo, :language, :caption_font, :caption_font_size, :enable_transcript)
   end
 end
diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js
new file mode 100644
index 0000000..25eb307
--- /dev/null
+++ b/app/javascript/components/modal.js
@@ -0,0 +1,11 @@
+
+const triggerModalEvent = () => {
+  const btn = document.getElementById("modalTrigger");
+  const modal = document.getElementById("myModal");
+
+  btn.addEventListener('click', function(event) {
+    $('#myModal').modal('show');
+  });
+}
+
+export { triggerModalEvent }
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 7eb9154..8a54864 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,2 +1,9 @@
 import "bootstrap";
 
+import { triggerModalEvent } from "../components/modal.js";
+
+triggerModalEvent();
+
+// import { profilePageAnimation } from '../users/lesson';
+
+// profilePageAnimation();
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 30a4fda..99d6833 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -16,5 +16,6 @@
     <%= yield %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
+
   </body>
 </html>
diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb
index 08f0a36..0551402 100644
--- a/app/views/pages/_contact.html.erb
+++ b/app/views/pages/_contact.html.erb
@@ -18,13 +18,14 @@ end
     </div>
   </div>
   <div class="call" data-user-id="<%= contact.id %>">
-    <%= link_to establish_call_path(contact.id), 'data-toggle':"modal", 'data-target':"#myModal" do  %>
+    <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do  %>
       <i class="fas fa-phone"></i>
     <% end %>
   </div>
 </div>
 
 
+
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
@@ -58,3 +59,5 @@ end
     </div>
   </div>
 </div>
+
+
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 6810141..c5ea4c9 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -6,7 +6,7 @@
   <div class="right-align">
     <div class="links">
       <div class="active"><%= link_to "Dashboard", contacts_path %></div>
-      <div><%= link_to "Settings", "#" %></div>
+      <div><%= link_to "Settings", setting_path %></div>
     </div>
     <div class="profile">
     <% if current_user.nil? %>
diff --git a/app/views/users/setting.html.erb b/app/views/users/setting.html.erb
new file mode 100644
index 0000000..131f531
--- /dev/null
+++ b/app/views/users/setting.html.erb
@@ -0,0 +1,158 @@
+<div class="profile-container">
+  <%= simple_form_for(@user) do |t| %>
+    <div class="profile-form">
+      <div>
+        <div class="lign">
+
+       <div class="card"><%= t.input :language, collection:
+[
+"Afrikaans (South Africa)",
+"Amharic (Ethiopia)",
+"Armenian (Armenia)",
+"Azerbaijani (Azerbaijan)",
+"Indonesian (Indonesia)",
+"Malay (Malaysia)",
+"Bengali (Bangladesh)",
+"Bengali (India)",
+"Catalan (Spain)",
+"Czech (Czech Republic)",
+"Danish (Denmark)",
+"German (Germany)",
+"English (Australia)",
+"English (Canada)",
+"English (Ghana)",
+"English (United Kingdom)",
+"English (India)",
+"English (Ireland)",
+"English (Kenya)",
+"English (New Zealand)",
+"English (Nigeria)",
+"English (Philippines)",
+"English (South Africa)",
+"English (Tanzania)",
+"English (United States)",
+"Spanish (Argentina)",
+"Spanish (Bolivia)",
+"Spanish (Chile)",
+"Spanish (Colombia)",
+"Spanish (Costa Rica)",
+"Spanish (Ecuador)",
+"Spanish (El Salvador)",
+"Spanish (Spain)",
+"Spanish (United States)",
+"Spanish (Guatemala)",
+"Spanish (Honduras)",
+"Spanish (Mexico)",
+"Spanish (Nicaragua)",
+"Spanish (Panama)",
+"Spanish (Paraguay)",
+"Spanish (Peru)",
+"Spanish (Puerto Rico)",
+"Spanish (Dominican Republic)",
+"Spanish (Uruguay)",
+"Spanish (Venezuela)",
+"Basque (Spain)",
+"Filipino (Philippines)",
+"French (Canada)",
+"French (France)",
+"Galician (Spain)",
+"Georgian (Georgia)",
+"Gujarati (India)",
+"Croatian (Croatia)",
+"Zulu (South Africa)",
+"Icelandic (Iceland)",
+"Italian (Italy)",
+"Javanese (Indonesia)",
+"Kannada (India)",
+"Khmer (Cambodia)",
+"Lao (Laos)",
+"Latvian (Latvia)",
+"Lithuanian (Lithuania)",
+"Hungarian (Hungary)",
+"Malayalam (India)",
+"Marathi (India)",
+"Dutch (Netherlands)",
+"Nepali (Nepal)",
+"Norwegian Bokmål (Norway)",
+"Polish (Poland)",
+"Portuguese (Brazil)",
+"Portuguese (Portugal)",
+"Romanian (Romania)",
+"Sinhala (Sri Lanka)",
+"Slovak (Slovakia)",
+"Slovenian (Slovenia)",
+"Sundanese (Indonesia)",
+"Swahili (Tanzania)",
+"Swahili (Kenya)",
+"Finnish (Finland)",
+"Swedish (Sweden)",
+"Tamil (India)",
+"Tamil (Singapore)",
+"Tamil (Sri Lanka)",
+"Tamil (Malaysia)",
+"Telugu (India)",
+"Vietnamese (Vietnam)",
+"Turkish (Turkey)",
+"Urdu (Pakistan)",
+"Urdu (India)",
+"Greek (Greece)",
+"Bulgarian (Bulgaria)",
+"Russian (Russia)",
+"Serbian (Serbia)",
+"Ukrainian (Ukraine)",
+"Hebrew (Israel)",
+"Arabic (Israel)",
+"Arabic (Jordan)",
+"Arabic (United Arab Emirates)",
+"Arabic (Bahrain)",
+"Arabic (Algeria)",
+"Arabic (Saudi Arabia)",
+"Arabic (Iraq)",
+"Arabic (Kuwait)",
+"Arabic (Morocco)",
+"Arabic (Tunisia)",
+"Arabic (Oman)",
+"Arabic (Qatar)",
+"Arabic (Lebanon)",
+"Arabic (Egypt)",
+"Persian (Iran)",
+"Hindi (India)",
+"Thai (Thailand)",
+"Korean (South Korea)",
+"Chinese, Mandarin (Traditional, Taiwan)",
+"Chinese, Cantonese (Traditional, Hong Kong)",
+"Japanese (Japan)",
+"Chinese, Mandarin (Simplified, Hong Kong)",
+"Chinese, Mandarin (Simplified, China)"] %>
+
+        </div>
+        </div>
+       <div class="card"><%= t.input :caption_font %></div>
+       <div class="card"><%= t.input :caption_font_size %></div>
+       <div class="card"><%= t.input :enable_transcript %></div>
+
+        <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
+        <p></p>
+      </div>
+
+
+
+      <div class="profile-pic">
+        <% if @user.photo.url.nil? %>
+          <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
+        <% else %>
+          <%= cl_image_tag current_user.photo%>
+        <% end %>
+
+        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
+        <%#= t.input_field :photo, as: :hidden %>
+
+      </div>
+
+    </div>
+  <% end %>
+</div>
+
+
+
+
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 5d17cda..fcd054c 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -22,5 +22,6 @@
             confirm: "Are you sure?"
           } %>
       </div>
-
   </div>
+ </div>
+
diff --git a/config/application.rb b/config/application.rb
index a72f336..1a5c6c8 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -15,6 +15,8 @@ module Polyglot
         end
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 5.2
+    config.action_view.embed_authenticity_token_in_remote_forms = true
+
 
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
diff --git a/config/routes.rb b/config/routes.rb
index a888321..7a4cdbe 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -22,6 +22,7 @@ Rails.application.routes.draw do
   patch '/accept_call/:request_id', to: 'requests#update', as: 'update_request'
 
   get '/contacts', to: 'pages#index'
+  get '/setting', to: 'users#setting'
   post '/sessions', to: 'video_sessions#create'
 
   post '/chat_rooms/chat_room_sessions', to: 'chat_rooms#create'
diff --git a/db/migrate/20180830100110_add_columns_to_users.rb b/db/migrate/20180830100110_add_columns_to_users.rb
new file mode 100644
index 0000000..1a23916
--- /dev/null
+++ b/db/migrate/20180830100110_add_columns_to_users.rb
@@ -0,0 +1,8 @@
+class AddColumnsToUsers < ActiveRecord::Migration[5.2]
+  def change
+    add_column :users, :language, :string
+    add_column :users, :caption_font, :string
+    add_column :users, :caption_font_size, :integer
+    add_column :users, :enable_transcript, :boolean
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index c2540bf..46b1487 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2018_08_29_123204) do
+ActiveRecord::Schema.define(version: 2018_08_30_100110) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -57,6 +57,10 @@ ActiveRecord::Schema.define(version: 2018_08_29_123204) do
     t.string "first_name"
     t.string "last_name"
     t.string "photo"
+    t.string "language"
+    t.string "caption_font"
+    t.integer "caption_font_size"
+    t.boolean "enable_transcript"
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
   end