diff --git a/projecthandler/template/project/modal/new_project.html b/projecthandler/template/project/modal/new_project.html
new file mode 100644
index 0000000..c346ec8
--- /dev/null
+++ b/projecthandler/template/project/modal/new_project.html
@@ -0,0 +1,32 @@
+<div class="modal" id="modal_new_project" 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" id="modal_new_project_title">New Project</h4>
+            </div>
+            <form id="formNewProject" action='{% url "projects:new_project" %}'class="form-horizontal" method="post" >
+                     {% csrf_token %}
+            <div class="modal-body">
+
+                <div id="div_chose_id">
+                    <label>Project Name: </label>
+                    <input name="name" id="name"  size="40" maxlength="20"/>
+                </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_project">Create
+                    </button>
+            </div>
+                </form>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
\ No newline at end of file
diff --git a/projecthandler/template/project/new_project.html b/projecthandler/template/project/new_project.html
deleted file mode 100644
index 44fb435..0000000
--- a/projecthandler/template/project/new_project.html
+++ /dev/null
@@ -1,129 +0,0 @@
-{% extends "base.html" %}
-
-{% load staticfiles %}
-
-{% block head_block %}
-{{ block.super }}
-    <link rel="stylesheet" href="{% static "bower_components/admin-lte/plugins/select2/select2.css" %}">
-
-    <style type="text/css">
-
-  input:required:invalid, input:focus:invalid {
-
-    background-position: right top;
-    background-repeat: no-repeat;
-  }
-  input:required:valid {
-
-    background-position: right top;
-    background-repeat: no-repeat;
-  }
-
-</style>
-{% endblock %}
-
-{% block left_sidebar %}
-    {% include 'left_sidebar_base.html' %}
-{% endblock %}
-
-{% block breadcrumb_body %}
-{{ block.super }}
-<li><a href='{% url "projects:new_project" %}'>New Project</a></li>
-{% endblock %}
-
-{% block content_body %}
-{{ block.super }}
-<div class="row">
-    <div class="col-md-12">
-        <!-- general form elements -->
-        <div class="box box-primary">
-            <div class="box-header with-border">
-                <h3 class="box-title">New Project</h3>
-            </div>
-            <!-- /.box-header -->
-            <!-- form start -->
-            <form role="form" method="post" enctype="multipart/form-data">
-                {% csrf_token %}
-                <div class="box-body">
-                    <div class="row">
-                        <div class="form-group col-xs-3">
-                            <p for="typeButtonsSelect">Project Type</p>
-                            <input type="hidden" class="form-control input-sm" name="type" id="projectType"
-                                    required>
-                            <select id="select_type" class="js-example-basic-single form-control" style="width: 75%">
-
-                            </select>
-
-                        </div>
-                        <div class="form-group col-xs-4">
-                            <p for="projectName">Project Name</p>
-                            <input type="text" class="form-control input-sm" name="name" id="projectName"
-                                   placeholder="Enter Project name" required>
-                        </div>
-                        <div class="form-group col-xs-4">
-                            <p for="projectInfo">Info</p>
-                            <input type="text" class="form-control input-sm" name="info" id="projectInfo"
-                                   placeholder="Short Description">
-                        </div>
-
-
-                    </div>
-                    <div class="row">
-                        <div id="startGroup" class="form-group col-xs-5" style="display: none;">
-
-
-                            <div id="startButtonsSelect" class="btn-group" data-toggle="buttons">
-                                <label id="s-scratch" class="btn btn-primary active">
-                                    <input id="scratch" type="radio" name="startfrom" autocomplete="off" value="scratch">
-                                     Empty project
-                                </label>
-                                <label id="s-example" class="btn btn-primary">
-                                    <input type="radio" name="startfrom" autocomplete="off" value="example">
-                                     Example project
-                                </label>
-                                <label id="s-files" class="btn btn-primary">
-                                    <input type="radio" name="startfrom" autocomplete="off" value="files">
-                                     Load files
-                                </label>
-
-
-                            </div>
-                        </div>
-                    </div>
-                    <div id="typeStartContainer" class="row">
-                         <div class="form-group col-xs-8">
-                        {% autoescape off %}{{ type_container_template }}{% endautoescape %}
-                        </div>
-                    </div>
-
-                    <!-- /.box-body -->
-                </div>
-                <div class="box-footer">
-                    <button id="createButton" type="submit" class="btn btn-primary" disabled>Create</button>
-                </div>
-            </form>
-        </div>
-        <!-- /.box -->
-
-    </div>
-</div>
-{% endblock %}
-
-{% block resource_block %}
-{{ block.super }}
-    <!-- Select2 -->
-    <script src="{% static "bower_components/admin-lte/plugins/select2/select2.full.min.js" %}"></script>
-
-    <script src="{% static "src/projecthandler/new_project.js" %}"></script>
-<script>
-{% if data_type_selector %}
-var data_type_selector ={{ data_type_selector |safe }};
-{% endif %}
-
-{% if type_example_files %}
-var type_example_files = {{type_example_files | safe}};
-{% endif %}
-
-</script>
-{% endblock %}
-
diff --git a/projecthandler/template/project/projectlist.html b/projecthandler/template/project/projectlist.html
index 033b0e0..6339679 100644
--- a/projecthandler/template/project/projectlist.html
+++ b/projecthandler/template/project/projectlist.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
-
+{% load get %}
+{% load date_tag %}
 {% load staticfiles %}
 
 {% block head_block %}
@@ -31,7 +32,10 @@
         <div class="box-header with-border">
                   <h3 class="box-title">Projects</h3>
             <div class="box-tools">
-                <a href="" class="btn btn-block btn-primary btn-sm" disabled><i class="fa fa-plus"></i><span> New Project</span></a>
+                <button type="button" class="btn btn-default" data-container="body"
+                                        data-toggle="tooltip" data-placement="top" title="New Project"
+                                        onclick="javascript:showModalNewProject()">
+                                    <i class="fa fa-plus"></i> New Project</button>
             </div>
         </div>
         <div class="box-body">
@@ -40,12 +44,10 @@
 					<tr>
 
 						<th>Name</th>
-						<th>Info</th>
-						<th>Type</th>
+
 						<th>Modification Date</th>
 						<th>Creation Date</th>
 
-						<th>Owner</th>
 
 						<th><i class="far fa-trash-alt"></i></th>
 					</tr>
@@ -55,15 +57,13 @@
 					<tr>
 
 						<td>
-							<a href="javascript:openProject('{{ p.id }}')" >{{ p.name }}</a>
+							<a href="javascript:openProject('{{ p.name }}')" >{{ p.name }}</a>
 						</td>
-						<td>{{ p.info }}</td>
-						<td>{{ p.get_type }}</td>
-						<td>{{ p.updated_date }}</td>
-						<td>{{ p.created_date }}</td>
-						<td>{{ p.owner.username }}</td>
 
-						<td><a href="#"> Delete</a></td>
+						<td>{{ p|get_sub:"_admin,modified"|get_date}}</td>
+                        <td>{{ p|get_sub:"_admin,created"|get_date}}</td>
+
+						<td><a href="javascript:deleteProject('{% url 'projects:delete_project'  project_id=p|get:'_id' %}')"> Delete</a></td>
 
 					</tr>
 				{% endfor %}
@@ -74,11 +74,89 @@
 </div>
 
 </div>
+{% include "modal/new_project.html" %}
 {% endblock %}
 
 {% block resource_block %}
   	{{ block.super }}
+    <script>
+    function showModalNewProject(){
+        $('#modal_new_project').modal('show');
+    }
 
+    function deleteProject(url) {
+    bootbox.confirm("Are you sure want to delete?", function (result) {
+        if (result) {
+            $.ajax({
+            url: url,
+            type: 'GET',
+            headers: {
+                "Accept": 'application/json'
+            },
+            contentType: false,
+            processData: false
+        }).done(function (response,textStatus, jqXHR) {
+
+            bootbox.alert({
+                title: "Result",
+                message: "Project deleted.",
+                callback: function () {
+                    location.reload();
+                }
+            });
+        }).fail(function(result){
+            var data  = result.responseJSON;
+            var title = "Error " + (data.code ? data.code: 'unknown');
+                var message = data.detail ? data.detail: 'No detail available.';
+                bootbox.alert({
+                    title: title,
+                    message: message
+                });
+        });
+        }
+    })
+    }
+
+    $(document).ready(function () {
+    $("#formNewProject").submit(function (event) {
+        event.preventDefault(); //prevent default action
+        var post_url = $(this).attr("action"); //get form action url
+        var request_method = $(this).attr("method"); //get form GET/POST method
+        var form_data = new FormData(this); //Encode form elements for submission
+        console.log(post_url);
+        $.ajax({
+            url: post_url,
+            type: request_method,
+            data: form_data,
+            headers: {
+                "Accept": 'application/json'
+            },
+            contentType: false,
+            processData: false
+        }).done(function (response,textStatus, jqXHR) {
+            bootbox.alert({
+                    title: "Result",
+                    message: "Project created.",
+                callback: function () {
+                    location.reload();
+                }
+                });
+        }).fail(function(result){
+            var data  = result.responseJSON;
+            var title = "Error " + (data.code ? data.code: 'unknown');
+                var message = data.detail ? data.detail: 'No detail available.';
+                bootbox.alert({
+                    title: title,
+                    message: message
+                });
+        });
+    });
+    });
+
+
+
+
+    </script>
 
 
 {% endblock %}
\ No newline at end of file