diff --git a/static/js/modal.js b/static/js/modal.js
new file mode 100644
index 0000000000000000000000000000000000000000..be2315afba901cca701e4e2958cd9fec1ff5325e
--- /dev/null
+++ b/static/js/modal.js
@@ -0,0 +1,260 @@
+/* =========================================================
+ * bootstrap-modal.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+
+!function( $ ){
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(function () {
+
+    $.support.transition = (function () {
+      var thisBody = document.body || document.documentElement
+        , thisStyle = thisBody.style
+        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+      return support
+    })()
+
+    // set CSS transition event type
+    if ( $.support.transition ) {
+      transitionEnd = "TransitionEnd"
+      if ( $.browser.webkit ) {
+        transitionEnd = "webkitTransitionEnd"
+      } else if ( $.browser.mozilla ) {
+        transitionEnd = "transitionend"
+      } else if ( $.browser.opera ) {
+        transitionEnd = "oTransitionEnd"
+      }
+    }
+
+  })
+
+
+ /* MODAL PUBLIC CLASS DEFINITION
+  * ============================= */
+
+  var Modal = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.modal.defaults, options)
+    this.$element = $(content)
+      .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+
+    if ( this.settings.show ) {
+      this.show()
+    }
+
+    return this
+  }
+
+  Modal.prototype = {
+
+      toggle: function () {
+        return this[!this.isShown ? 'show' : 'hide']()
+      }
+
+    , show: function () {
+        var that = this
+        this.isShown = true
+        this.$element.trigger('show')
+
+        escape.call(this)
+        backdrop.call(this, function () {
+          var transition = $.support.transition && that.$element.hasClass('fade')
+
+          that.$element
+            .appendTo(document.body)
+            .show()
+
+          if (transition) {
+            that.$element[0].offsetWidth // force reflow
+          }
+
+          that.$element.addClass('in')
+
+          transition ?
+            that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
+            that.$element.trigger('shown')
+
+        })
+
+        return this
+      }
+
+    , hide: function (e) {
+        e && e.preventDefault()
+
+        if ( !this.isShown ) {
+          return this
+        }
+
+        var that = this
+        this.isShown = false
+
+        escape.call(this)
+
+        this.$element
+          .trigger('hide')
+          .removeClass('in')
+
+        $.support.transition && this.$element.hasClass('fade') ?
+          hideWithTransition.call(this) :
+          hideModal.call(this)
+
+        return this
+      }
+
+  }
+
+
+ /* MODAL PRIVATE METHODS
+  * ===================== */
+
+  function hideWithTransition() {
+    // firefox drops transitionEnd events :{o
+    var that = this
+      , timeout = setTimeout(function () {
+          that.$element.unbind(transitionEnd)
+          hideModal.call(that)
+        }, 500)
+
+    this.$element.one(transitionEnd, function () {
+      clearTimeout(timeout)
+      hideModal.call(that)
+    })
+  }
+
+  function hideModal (that) {
+    this.$element
+      .hide()
+      .trigger('hidden')
+
+    backdrop.call(this)
+  }
+
+  function backdrop ( callback ) {
+    var that = this
+      , animate = this.$element.hasClass('fade') ? 'fade' : ''
+    if ( this.isShown && this.settings.backdrop ) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      if ( this.settings.backdrop != 'static' ) {
+        this.$backdrop.click($.proxy(this.hide, this))
+      }
+
+      if ( doAnimate ) {
+        this.$backdrop[0].offsetWidth // force reflow
+      }
+
+      this.$backdrop.addClass('in')
+
+      doAnimate ?
+        this.$backdrop.one(transitionEnd, callback) :
+        callback()
+
+    } else if ( !this.isShown && this.$backdrop ) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
+        removeBackdrop.call(this)
+
+    } else if ( callback ) {
+       callback()
+    }
+  }
+
+  function removeBackdrop() {
+    this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  function escape() {
+    var that = this
+    if ( this.isShown && this.settings.keyboard ) {
+      $(document).bind('keyup.modal', function ( e ) {
+        if ( e.which == 27 ) {
+          that.hide()
+        }
+      })
+    } else if ( !this.isShown ) {
+      $(document).unbind('keyup.modal')
+    }
+  }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modal = function ( options ) {
+    var modal = this.data('modal')
+
+    if (!modal) {
+
+      if (typeof options == 'string') {
+        options = {
+          show: /show|toggle/.test(options)
+        }
+      }
+
+      return this.each(function () {
+        $(this).data('modal', new Modal(this, options))
+      })
+    }
+
+    if ( options === true ) {
+      return modal
+    }
+
+    if ( typeof options == 'string' ) {
+      modal[options]()
+    } else if ( modal ) {
+      modal.toggle()
+    }
+
+    return this
+  }
+
+  $.fn.modal.Modal = Modal
+
+  $.fn.modal.defaults = {
+    backdrop: false
+  , keyboard: false
+  , show: false
+  }
+
+
+ /* MODAL DATA- IMPLEMENTATION
+  * ========================== */
+
+  $(document).ready(function () {
+    $('body').delegate('[data-controls-modal]', 'click', function (e) {
+      e.preventDefault()
+      var $this = $(this).data('show', true)
+      $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+    })
+  })
+
+}( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b205f5e0a4ed58ee9559db039c8b38a2b267650
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,90 @@
+// First, checks if it isn't implemented yet.
+if (!String.prototype.format) {
+  String.prototype.format = function() {
+    var args = arguments;
+    return this.replace(/{(\d+)}/g, function(match, number) { 
+      return typeof args[number] != 'undefined'
+        ? args[number]
+        : match
+      ;
+    });
+  };
+}
+
+
+jQuery(document).ready(function($) {
+    $(".left-label").attr('contenteditable', 'true');
+    $(".label-value").attr('contenteditable', 'true');
+    $(".info-title").attr('contenteditable', 'true');
+    $("h3").attr('contenteditable', 'true');
+    $("p").attr('contenteditable', 'true');
+    $(".right-paragraph p").attr('contenteditable', 'true');
+    $("#username").attr('contenteditable', 'true');
+    $("#persona-tag").attr('contenteditable', 'true');
+    $(".info-unit ul li").append('<span class="item-remove"><i class="iconfont icon-delete"></i></span>');
+    
+    $(".info-unit").filter(function(index) {
+        return ($(this).children('ul').length);
+    }).children("h2").append('<span class="item-add"><i class="iconfont icon-playlistadd"></i></span>');
+
+    $(".info-unit h2").append('<span class="unit-remove"><i class="iconfont icon-delete"></i></span>');
+    
+
+    var portrait_modal = $('[data-remodal-id=portrait-modal]').remodal();
+    $(".portrait").click(function(event) {
+        portrait_modal.open();
+    });
+    $('[data-remodal-id=portrait-modal] button').click(function(event) {
+        $(".portrait").css('background-image', 'url("{0}")'.format($("#avatar-url").val()));
+    });
+    var weixin_modal = $('[data-remodal-id=weixin-modal]').remodal();
+    $(".weixin").click(function(event) {
+        weixin_modal.open();
+    });
+    $('[data-remodal-id=weixin-modal] button').click(function(event) {
+        $(".weixin img").attr('src', $("#weixin-url").val());
+    });
+
+    $('.info-header').hover(function() {
+        /* Stuff to do when the mouse enters the element */
+        $(this).children('.unit-remove').css('visibility', 'visible');
+        $(this).children('.item-add').css('visibility', 'visible');
+
+    }, function() {
+        /* Stuff to do when the mouse leaves the element */
+        $(this).children('.unit-remove').css('visibility', 'hidden');
+        $(this).children('.item-add').css('visibility', 'hidden');
+    });
+
+    $('.info-unit ul li').hover(function() {
+        /* Stuff to do when the mouse enters the element */
+        $(this).children('.item-remove').css('visibility', 'visible');
+
+    }, function() {
+        /* Stuff to do when the mouse leaves the element */
+        $(this).children('.item-remove').css('visibility', 'hidden');
+    });
+
+    $('.unit-remove').click(function(event) {
+        $(this).closest(".info-unit").remove();
+    });
+
+    $('.item-remove').click(function(event) {
+        $(this).closest("li").remove();
+    });
+
+    $('.item-add').click(function(event) {
+        var unit = $(this).closest(".info-unit");
+        if (unit.children('ul')){
+            var list = unit.children('ul');
+            var clone = list.children('li:first-child').clone(true);
+            list.append(clone);
+        }
+
+    });
+    $("progress").click(function(event) {
+        $(this).attr("value", event.offsetX/$(this).width()/0.8 * $(this).attr("max"));
+    });
+    // $("*").removeAttr('contenteditable');
+
+});
\ No newline at end of file