diff --git a/rolehandler/templates/modal/role_create.html b/rolehandler/templates/modal/role_create.html
new file mode 100644
index 0000000..58d68ca
--- /dev/null
+++ b/rolehandler/templates/modal/role_create.html
@@ -0,0 +1,38 @@
+<div class="modal" id="modal_new_role" xmlns="http://www.w3.org/1999/html">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span></button>
+                <h4 class="modal-title">New Role</h4>
+            </div>
+            <form id="formCreateRole" action='{% url "roles:create"   %}'
+                  class="form-horizontal"
+                  method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+                <div class="modal-body" id="modal_new_role_body">
+                    <div class="form-group">
+                        <label for="rolename" class="col-sm-3 control-label">Name *</label>
+                        <div class="col-sm-6">
+                            <input class="form-control" id="rolename" name="name"
+                                   placeholder="Name" required>
+                        </div>
+                    </div>
+
+            
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
+                    <button class="btn btn-primary"
+                            data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Creating..."
+                            id="create_new_role">Create
+                    </button>
+
+                </div>
+            </form>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
diff --git a/rolehandler/templates/modal/role_edit.html b/rolehandler/templates/modal/role_edit.html
new file mode 100644
index 0000000..8541177
--- /dev/null
+++ b/rolehandler/templates/modal/role_edit.html
@@ -0,0 +1,38 @@
+<div class="modal" id="modal_edit_role" xmlns="http://www.w3.org/1999/html">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span></button>
+                <h4 class="modal-title">Edit Role</h4>
+            </div>
+            <form id="formEditRole" action=""
+                  class="form-horizontal"
+                  method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+                <input type="hidden"  id="projects_old" name="projects_old" value="asdasd">
+                <div class="modal-body" id="modal_edit_role_body">
+                    
+                    <div class="form-group">
+                        <label for="name" class="col-sm-3 control-label">Name</label>
+                        <div class="col-sm-6">
+                           <input class="form-control" id="edit_role_name" name="role" 
+                                   placeholder="Name">
+                        </div>
+                    </div>
+                   
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
+                    <button class="btn btn-primary"
+                            data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Editing..."
+                            id="create_edit_role">Apply
+                    </button>
+
+                </div>
+            </form>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>