diff --git a/media/scripts/app/views/add-repo.js b/media/scripts/app/views/add-repo.js
index d161cdad78..cb71cecf36 100644
--- a/media/scripts/app/views/add-repo.js
+++ b/media/scripts/app/views/add-repo.js
@@ -4,24 +4,29 @@ define([
     'backbone',
     'common',
     'app/collections/repos',
-], function($, _, Backbone, Common, Repos) {
+    'text!' + app.config._tmplRoot + 'create-repo.html',
+], function($, _, Backbone, Common, Repos, CreateRepoTemplate) {
     'use strict';
 
     var AddRepoView = Backbone.View.extend({
-        el: '#repo-create-form',
 
-        events: {
-            "submit": "addRepo",
-            "click #encrypt-switch": "togglePasswdInput"
-        },
+        tagName: 'div',
+
+        template: _.template(CreateRepoTemplate),
 
         initialize: function(repos) {
             this.repos = repos;
             this.listenTo(repos, 'invalid', this.displayValidationErrors);
         },
 
+        events: {
+            "submit": "addRepo",
+            "click #encrypt-switch": "togglePasswdInput"
+        },
+
         render: function() {
-            this.$el.modal({appendTo: '#main', autoResize: true});
+            this.$el.html(this.template({}));
+            this.$el.modal();
         },
 
         // Generate the attributes for a new GroupRepo item.
diff --git a/media/scripts/app/views/myhome-repos.js b/media/scripts/app/views/myhome-repos.js
index b7d696ad39..9d05a95caa 100644
--- a/media/scripts/app/views/myhome-repos.js
+++ b/media/scripts/app/views/myhome-repos.js
@@ -70,8 +70,8 @@ define([
         },
 
         createRepo: function() {
-            var dialog = new AddRepoView(this.repos);
-            dialog.render();
+            var addRepoView = new AddRepoView(this.repos);
+            addRepoView.render();
         },
 
 
diff --git a/seahub/templates/js/create-repo.html b/seahub/templates/js/create-repo.html
new file mode 100644
index 0000000000..91bb15fade
--- /dev/null
+++ b/seahub/templates/js/create-repo.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+<form id="repo-create-form" action="" method="post">{% csrf_token %}
+    <h3>{% trans "New Library"%}</h3>
+    <label>{% trans "Name"%}</label><br/>
+    <input type="text" name="repo_name" value="" maxlength="{{max_file_name}}" class="input" /><br />
+    <label>{% trans "Description"%}</label><br/>
+    <textarea name="repo_desc" class="textarea"></textarea><br />
+    {% if create_shared_repo %}
+    <label>{% trans "Share Permission"%}</label><br />
+    <select name="permission" class="perm">
+      <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
+      <option value="r">{% trans "Read-Only"%}</option>
+    </select>
+    {% endif %}
+    <div class="repo-create-encryption">
+        <label class="checkbox-label">
+            <span class="checkbox"><input type="checkbox" name="encryption" id="encrypt-switch" class="checkbox-orig" /></span>
+            <span class="checkbox-option">{% trans "Encrypt"%}</span>
+        </label>
+        <label>{% trans "Password"%}</label><span class="tip">{% blocktrans %}(at least {{repo_password_min_length}} characters){% endblocktrans %}</span><br />
+        <input type="password" name="passwd" disabled="disabled" class="input input-disabled" /><br />
+        <label>{% trans "Password again"%}</label><br />
+        <input type="password" name="passwd_again" disabled="disabled" class="input input-disabled" />
+    </div>
+    <p class="error hide"></p>
+    <input type="submit" value="{% trans "Submit"%}" class="submit" />
+</form>