diff --git a/markdownblog/markdownblog/static/order_style.css b/markdownblog/markdownblog/static/order_style.css
index aae99da..defd8ee 100644
--- a/markdownblog/markdownblog/static/order_style.css
+++ b/markdownblog/markdownblog/static/order_style.css
@@ -6,6 +6,6 @@
     box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
     -webkit-box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
     -moz-box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
-    padding: 0.5em;
-    margin: 0.5em;
+    padding: 0.5em 0.5em 0.5em 1em;
+    margin: 0.5em 0.5em 0.5em 0;
 }
\ No newline at end of file
diff --git a/markdownblog/markdownblog/templates/base/base.html b/markdownblog/markdownblog/templates/base/base.html
index c128845..d28dd7d 100644
--- a/markdownblog/markdownblog/templates/base/base.html
+++ b/markdownblog/markdownblog/templates/base/base.html
@@ -15,7 +15,7 @@
 </head>
 <body>
 <header>
-    <nav class="top-nav">
+    <nav class="top-nav" style="background-color: #22db90">
         <a href="#" data-target="slide-out" class="sidenav-trigger full hide-on-large-only" id="open-sidenav-toggle">
             <i class="material-icons">menu</i>
         </a>
diff --git a/markdownblog/markdownblog/templates/blog/order.html b/markdownblog/markdownblog/templates/blog/order.html
index 894c862..5730be6 100644
--- a/markdownblog/markdownblog/templates/blog/order.html
+++ b/markdownblog/markdownblog/templates/blog/order.html
@@ -7,9 +7,39 @@
     <link rel="stylesheet" href="{% static 'order_style.css' %}">
 {% endblock %}
 {% block content %}
-    <ul>
-        {% for topic in roottopics %}
-            {% include "blog/tree_view_template.html" %}
-        {% endfor %}
-    </ul>
+    <div class="col s8 offset-s2">
+        <ul id="root_list" class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)"
+            ondragleave="resetbgColor(event)">
+            {% for topic in roottopics %}
+                {% include "blog/tree_view_template.html" %}
+            {% endfor %}
+        </ul>
+    </div>
+    <script type="text/javascript">
+
+        function resetbgColor(ev) {
+            ev.preventDefault();
+            ev.target.style.backgroundColor = "";
+        }
+
+        function allowDrop(ev) {
+            ev.preventDefault();
+            ev.target.style.backgroundColor = "#37FF3733";
+            Array.from(ev.target.children).forEach(elem => {
+                    elem.style.backgroundColor = "white";
+                }
+            );
+        }
+
+        function drag(ev) {
+            ev.dataTransfer.setData("targetObject", ev.target.id);
+        }
+
+        function drop(ev) {
+            ev.preventDefault();
+            var targetOject = ev.dataTransfer.getData("targetObject");
+            ev.target.appendChild(document.getElementById(targetOject));
+            ev.target.style.backgroundColor = "";
+        }
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/markdownblog/markdownblog/templates/blog/tree_view_template.html b/markdownblog/markdownblog/templates/blog/tree_view_template.html
index aebe994..960f07b 100644
--- a/markdownblog/markdownblog/templates/blog/tree_view_template.html
+++ b/markdownblog/markdownblog/templates/blog/tree_view_template.html
@@ -1,7 +1,8 @@
 {% load tree_utils %}
-<li class="topic_list_element"> {{ topic.name }}
+<li class="topic_list_element" draggable="true" ondragstart="drag(event)"
+    id="list_elem_{{ topic.id }}"> {{ topic.name }}
     {% if topic|has_children %}
-        <ul class="topic_list">
+        <ul class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)" id="list_{{ topic.id }}">
             {% for child in topic|all_children %}
                 {% with topic=child template_name="blog/tree_view_template.html" %}
                     {% include template_name %}
