diff --git a/template/base.html b/template/base.html
new file mode 100644
index 0000000..60576d1
--- /dev/null
+++ b/template/base.html
@@ -0,0 +1,159 @@
+{% load staticfiles %}
+<!DOCTYPE html>
+<html>
+<head>
+
+    {% block head_base %}
+        {% include "head.html" %}
+    {% endblock %}
+    {% block head_block %}
+
+    {% endblock %}
+  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+  <![endif]-->
+
+  <!-- Google Font
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
+</head>
+
+
+{% block body %}
+
+{% if request.COOKIES.collapsed_sidebar == '1' %}
+<body class="skin-purple sidebar-mini sidebar-collapse">
+{% else %}
+<body class="skin-purple hold-transition sidebar-mini">
+{% endif %}
+
+<div class="wrapper">
+
+  <header class="main-header">
+    <!-- Logo -->
+    {% block logo_sidebar %}
+        {% include "logo_sidebar.html" %}
+    {% endblock %}
+    <!-- Header Navbar: style can be found in header.less -->
+    <nav class="navbar navbar-static-top">
+      <!-- Sidebar toggle button-->
+      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+
+      <div class="navbar-custom-menu">
+        <ul class="nav navbar-nav">
+            {% if user.get_full_name %}
+          <!-- User Account: style can be found in dropdown.less -->
+          <li class="dropdown user user-menu">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              <img src="{% static  user.get_avatar  %}" class="user-image" alt="User Image">
+                        <span class="hidden-xs">{{ user.username }}</span>
+            </a>
+            <ul class="dropdown-menu">
+                        <!-- User image -->
+                        <li class="user-header">
+                            <img src="{% static  user.get_avatar  %}" class="img-circle" alt="User Image">
+                            <p id="user_menu_name_role">
+                                {{ user.get_full_name }}
+                                <small id="user_menu_role">{{ user.get_user_role_name }}</small>
+                            </p>
+                        </li>
+                        <!-- Menu Footer-->
+                        <li class="user-footer">
+                            <div class="pull-left">
+                              <a href="#" class="btn btn-default btn-flat" disabled>Settings</a>
+                            </div>
+                            <div class="pull-right">
+                                <a href="/auth" class="btn btn-default btn-flat">Sign out</a>
+                            </div>
+                        </li>
+                    </ul>
+          </li>
+            {% endif %}
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+        <!-- =============================================== -->
+        {% block left_sidebar %}
+
+        {% endblock %}
+
+      <!-- =============================================== -->
+
+      <!-- Content Wrapper. Contains page content -->
+      <div class="content-wrapper">
+          <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <h1 id="title_header">
+                    {% block title_header_big %}
+
+                    {% endblock %}
+                    <small>
+                        {% block title_header_small %}
+
+                        {% endblock %}
+                    </small>
+                </h1>
+                <ol id="breadcrumb" class="breadcrumb">
+                    {% block breadcrumb_body %}
+                        <li><a href='{% url "home" %}'><i class="fa fa-home fa-fw"></i> Home</a></li>
+                    {% endblock %}
+                </ol>
+            </section>
+
+          <!-- Main content -->
+            <section id="main_content" class="content">
+                {% block content_body %}
+
+                {% endblock %}
+            </section>
+          <!-- /.content -->
+        {% include "modals/error_alert.html" %}
+      </div><!-- /.content-wrapper -->
+        {% block footer %}
+            {% include "footer.html" %}
+        {% endblock %}
+
+
+    </div>
+<!-- ./wrapper -->
+
+<!-- jQuery 3 -->
+<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
+<!-- Bootstrap 3.3.7 -->
+<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<!-- FastClick -->
+<script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
+<!-- AdminLTE App -->
+<script src="/static/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
+<!-- iCheck -->
+<script src="/static/bower_components/admin-lte/plugins/iCheck/icheck.min.js"></script>
+<!-- pace -->
+<script src="/static/bower_components/admin-lte/plugins/pace/pace.min.js"></script>
+<!-- bootbox -->
+<script src="/static/bower_components/bootbox.js/bootbox.js"></script>
+<!-- RDCL3D AdminLTE session storage handler -->
+<script src="/static/src/adminlte_session_storage.js"></script>
+<!-- Utility JS -->
+<script src="/static/src/utils.js"></script>
+
+<script>
+    $(document).ready(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    });
+
+</script>
+{% block resource_block %}
+
+{% endblock %}
+</body>
+{% endblock %}
+</html>
diff --git a/template/error.html b/template/error.html
new file mode 100644
index 0000000..a55d97b
--- /dev/null
+++ b/template/error.html
@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block title_header_big %}
+    {{ block.super }}
+    Error Page
+{% endblock %}
+
+{% block content_body %}
+<div class="error-page">
+        <h2 class="headline text-yellow"> Error</h2>
+
+        <div class="error-content">
+          <h3><i class="fa fa-warning text-yellow"></i> {{error_message}}</h3>
+
+          <p>
+            Meanwhile, you may <a href='{% url "home" %}'>return to dashboard</a> .
+          </p>
+
+        </div>
+        <!-- /.error-content -->
+      </div>
+{% endblock %}
+
+{% block resource_block %}
+
+{% endblock %}
+
+
diff --git a/template/footer.html b/template/footer.html
new file mode 100644
index 0000000..e29c9ad
--- /dev/null
+++ b/template/footer.html
@@ -0,0 +1,12 @@
+{% load staticfiles %}
+{% load i18n %}
+
+<footer class="main-footer">
+    <div class="pull-right hidden-xs">
+        <strong>{{ SITE_NAME }}</strong>
+    </div>
+
+    <strong><a href="https://osm.etsi.org">OSM</a></strong>
+
+
+</footer>
diff --git a/template/forbidden.html b/template/forbidden.html
new file mode 100644
index 0000000..4a798c2
--- /dev/null
+++ b/template/forbidden.html
@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block title_header_big %}
+    {{ block.super }}
+    Error Page
+{% endblock %}
+
+{% block content_body %}
+<div class="error-page">
+        <h2 class="headline text-yellow"> Error 403</h2>
+
+        <div class="error-content">
+          <h3><i class="fa fa-warning text-yellow"></i> {{error_message}}</h3>
+
+          <p>
+            Meanwhile, you may <a href='{% url "home" %}'>return to dashboard</a> .
+          </p>
+
+        </div>
+        <!-- /.error-content -->
+      </div>
+{% endblock %}
+
+{% block resource_block %}
+
+{% endblock %}
+
+
diff --git a/template/head.html b/template/head.html
new file mode 100644
index 0000000..44ae00c
--- /dev/null
+++ b/template/head.html
@@ -0,0 +1,26 @@
+{% load staticfiles %}
+{% load i18n %}
+
+  <title>{{ SITE_NAME }}</title>
+
+  <!-- Tell the browser to be responsive to screen width -->
+  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+  <!-- Bootstrap 3.3.7 -->
+  <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
+  <!-- Ionicons -->
+  <link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
+  <!-- Theme style -->
+  <link rel="stylesheet" href="/static/bower_components/admin-lte/dist/css/AdminLTE.min.css">
+  <!-- AdminLTE Skins. Choose a skin from the css/skins
+       folder instead of downloading all of them to reduce the load. -->
+  <link rel="stylesheet" href="/static/bower_components/admin-lte/dist/css/skins/_all-skins.min.css">
+
+  <link rel="stylesheet" href="/static/css/rdcl.css">
+
+  <link rel="stylesheet" href="/static/bower_components/admin-lte/plugins/pace/pace.min.css">
+  <link rel="icon" href="/static/assets/img/favicon.ico">
+
+
+
diff --git a/template/home.html b/template/home.html
new file mode 100644
index 0000000..ac1b2f4
--- /dev/null
+++ b/template/home.html
@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+
+{% load staticfiles %}
+
+{% block head_block %}
+  	{{ block.super }}
+
+{% endblock %}
+
+{% block left_sidebar %}
+    {% include 'left_sidebar_base.html' %}
+{% endblock %}
+
+{% block breadcrumb_body %}
+  	{{ block.super }}
+
+{% endblock %}
+
+{% block content_body %}
+  	{{ block.super }}
+
+    <div class="row">
+    <div class="col-md-5 ">
+
+        <div class="small-box bg-purple">
+            <div class="inner">
+                <h3>{{ projects }}</h3>
+                <h3>Projects</h3>
+                <p></p>
+            </div>
+            <div class="icon">
+                <i class="fa fa-code"></i>
+            </div>
+            <a href="/projects/list" class="small-box-footer">
+                Open list <i class="fa fa-arrow-circle-right"></i>
+            </a>
+        </div>
+    </div>
+    <!--
+    <div class="col-md-6 ">
+        <div class="small-box bg-aqua">
+            <div class="inner">
+                <h3>{{deployments}}</h3>
+                <h3>Deployments</h3>
+                <p></p>
+            </div>
+            <div class="icon">
+                <i class="fa fa-terminal"></i>
+            </div>
+            {% if user.is_guest %}
+            <a href="#" class="small-box-footer">
+                Guest Users don't have permission <i class="fa fa-arrow-circle-right"></i>
+            </a>
+            {% else %}
+            <a href="/deployments/list" class="small-box-footer">
+                Open list <i class="fa fa-arrow-circle-right"></i>
+            </a>
+            {% endif %}
+        </div>
+    </div>
+-->
+</div>
+<div class="row">
+    <img style="display:block; margin:0 auto; width: 60%;" class="pad" src="/static/assets/img/osm_logo.svg" alt="Photo">
+</div>
+{% endblock %}
+
+{% block resource_block %}
+  	{{ block.super }}
+
+
+
+{% endblock %}
diff --git a/template/left_sidebar_base.html b/template/left_sidebar_base.html
new file mode 100644
index 0000000..2ed2e2a
--- /dev/null
+++ b/template/left_sidebar_base.html
@@ -0,0 +1,23 @@
+<!-- Left side column. contains the sidebar -->
+<aside class="main-sidebar" id="globalmenu">
+    <!-- sidebar: style can be found in sidebar.less -->
+    <section class="sidebar">
+        <!-- sidebar menu: : style can be found in sidebar.less -->
+        <ul class="sidebar-menu">
+            <li class="header">MAIN NAVIGATION</li>
+            {% url "home" as  home_url %}
+            <li {% if request.get_full_path == home_url %} class="active" {% endif %} ><a href='{% url "home" %}'><i class="fa fa-home fa-fw"></i><span>Home</span></a></li>
+            {% url "projects:projects_list" as  projects_list_url %}
+            <li {% if request.get_full_path == projects_list_url %} class="active" {% endif %}><a href='{% url "projects:projects_list" %}'><i class="fa fa-code fa-fw"></i><span>Projects</span></a></li>
+            {% url "vim:list" as  vims_list_url %}
+            <li {% if request.get_full_path == vims_list_url %} class="active" {% endif %}><a href='{% url "vim:list" %}'><i class="fa fa-th-list fa-fw"></i><span>VIM Accounts</span></a></li>
+
+
+
+            {% block left_sidebar_base %}
+
+            {% endblock %}
+        </ul>
+    </section>
+    <!-- /.sidebar -->
+</aside>
diff --git a/template/login.html b/template/login.html
new file mode 100644
index 0000000..2323200
--- /dev/null
+++ b/template/login.html
@@ -0,0 +1,51 @@
+{% extends 'base.html' %}
+
+{% block content_body %}
+<div class="login-box">
+    <div class="login-logo">
+        <a href='{% url "home" %}'><b>{{ SITE_NAME }} </b>Login</a>
+    </div>
+    <!-- /.login-logo -->
+    <div class="login-box-body">
+        <p class="login-box-msg">Sign in to start your session</p>
+
+        <form action="../auth/" method="post" onsubmit="">
+            <input id="next_input" type="hidden" name="next" class="form-control">
+            {% csrf_token %}
+            <div class="form-group has-feedback">
+                <input type="username" name="username" class="form-control" placeholder="Username">
+                <span class="glyphicon glyphicon-user form-control-feedback"></span>
+            </div>
+            <div class="form-group has-feedback">
+                <input type="password" name="password" class="form-control" placeholder="Password">
+                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+            </div>
+            <div class="row">
+                <div class="col-xs-8">
+
+                </div>
+                <!-- /.col -->
+                <div class="col-xs-4">
+                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
+                </div>
+                <!-- /.col -->
+            </div>
+        </form>
+
+
+    </div>
+    <!-- /.login-box-body -->
+</div>
+<!-- /.login-box -->
+{% endblock %}
+
+{% block resource_block %}
+<script>
+    $(document).ready(function () {
+        var next_value = getUrlParameter('next');
+        console.log('next_value', next_value);
+        if(next_value)
+            $('#next_input').val(next_value);
+    });
+</script>
+{% endblock %}
diff --git a/template/logo_sidebar.html b/template/logo_sidebar.html
new file mode 100644
index 0000000..916bef9
--- /dev/null
+++ b/template/logo_sidebar.html
@@ -0,0 +1,8 @@
+{% load staticfiles %}
+{% load i18n %}
+<a href="#" class="logo" style="background-color: white !important;">
+        <!-- mini logo for sidebar mini 50x50 pixels -->
+        <span class="logo-mini"><img src="{% static logo_mini|default:"assets/img/osm_small_logo.png" %}" style="height: 40px;margin-top: -10px;"></span>
+        <!-- logo for regular state and mobile devices -->
+        <span class="logo-lg"><img src="{% static logo|default:"assets/img/OSM-logo.png" %}" style="height: 40px;margin-top: -10px;"></span>
+    </a>
diff --git a/template/modals/error_alert.html b/template/modals/error_alert.html
new file mode 100644
index 0000000..89a8ed4
--- /dev/null
+++ b/template/modals/error_alert.html
@@ -0,0 +1,20 @@
+<div class="modal" id="modal_alert" 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" >Warning</h4>
+            </div>
+            <div  class="modal-body">
+                <label id="modal_alert_text"> </label>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">Ok</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
\ No newline at end of file
diff --git a/template/topology_toolbar.html b/template/topology_toolbar.html
new file mode 100644
index 0000000..c5f8baa
--- /dev/null
+++ b/template/topology_toolbar.html
@@ -0,0 +1,38 @@
+<div class="btn-group-vertical left-tool-bar">
+
+    <!-- <button id="topology_zoom_plus" type="button" class="btn btn-default"><i class="fa fa-plus"></i></button> -->
+    <!-- <button id="topology_zoom_minus" type="button" class="btn btn-default"><i class="fa fa-minus"></i></button> -->
+
+    <button id="topology_play" type="button" title="Play force" class="btn btn btn-default" onclick="handleForce(this)"><i
+            class="fa fa-play"></i></button>
+    <button id="topology_pause" type="button" title="Stop force" class="btn btn btn-default active" onclick="handleForce(this)"><i
+            class="fa fa-pause"></i></button>
+    {% block topology_toolbar_buttons %}
+
+    {% endblock %}
+
+    <!-- <button id="topology_settings" type="button" class="btn btn-default"><i class="fa fa-gear"></i></button> -->
+
+    <button id="topology_open_editor" type="button" title="Edit descriptor" class="btn btn-default" onclick="openEditor({{project_id}})"><i
+            class="fa fa-edit"></i></button>
+
+    <button id="topology_save" type="button" title="Save positions" class="btn btn-default" onclick="savePositions(this)"><i
+            class="fa fa-save"></i></button>
+
+    <button id="topology_info_button" type="button" title="Info keyboard" class="btn btn-default" data-toggle="modal"
+            data-target="#modalTopologyInfoButton"><i class="fa fa-keyboard-o"></i></button>
+</div>
+{% block boxes_toolbar %}
+
+{% endblock %}
+
+
+
+<div id="palette" >
+    <div id="palette_status_indicator" class="palette-status-indicator">
+        <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+    </div>
+    <div id="paletteContainer" class="palette-container">
+
+    </div>
+</div>