diff --git a/ref-test/app/editor/static/css/editor.css b/ref-test/app/editor/static/css/editor.css
index eee5d22..77588ad 100644
--- a/ref-test/app/editor/static/css/editor.css
+++ b/ref-test/app/editor/static/css/editor.css
@@ -17,18 +17,32 @@
     z-index: 10;
 }
 
-.accordion-button div {
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
+.editor-controls a i {
+    font-size: larger;
+    margin: 2px;
 }
 
-.accordion-button a {
-    transform: translate(-50%, -50%);
+.option-controls, .block-controls {
+    width: fit-content;
+    display: block;
+    margin: 10px auto;
+}
+
+.option-controls a, .block-controls a {
+    margin: 0 10px;
+    z-index: 10;
+}
+
+.option-controls a i, .block-controls a i {
+    font-size: larger;
+    margin: 2px;
+}
+
+.accordion-button div {
+    margin: 0;
+    position: relative;
     top: 50%;
-    right: 0%;
-    position: absolute;
+    transform: translate(0, -50%);
 }
 
 .accordion-button::after {
@@ -43,4 +57,13 @@
 .accordion-error:not(.collapsed) {
     background-color: #bb2d3b;
     color: white;
+}
+
+.panel-button {
+    padding: 6px;
+    margin: 0px 2px;
+}
+
+.panel-button i {
+    font-size: larger;
 }
\ No newline at end of file
diff --git a/ref-test/app/editor/templates/editor/components/base.html b/ref-test/app/editor/templates/editor/components/base.html
index a4f4498..c8fdb06 100644
--- a/ref-test/app/editor/templates/editor/components/base.html
+++ b/ref-test/app/editor/templates/editor/components/base.html
@@ -48,6 +48,7 @@
         <script>
             window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
         </script>
+        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
         <script
             src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
             integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
diff --git a/ref-test/app/editor/templates/editor/index.html b/ref-test/app/editor/templates/editor/index.html
index 8fed972..e61bf08 100644
--- a/ref-test/app/editor/templates/editor/index.html
+++ b/ref-test/app/editor/templates/editor/index.html
@@ -11,123 +11,22 @@
     <h1>Editor</h1>
     <div class="container editor-panel" id="editor" tabindex="-1">
         <div class="accordion" id="editor-root">
-            <div class="accordion-item" id="i0">
-                <h2 class="accordion-header" id="h0">
-                    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c0" aria-expanded="true" aria-controls="c0">
-                        <div class="float-start">Question 1</div>
-                        <a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
-                    </div>
-                </h2>
-                <div id="c0" class="accordion-collapse collapse" aria-labelledby="h0" data-bs-parent="#editor-root">
-                    <div class="accordion-body">
-                        <div class="question-text">
-                            <div class="input-group mb-3">
-                                <span class="input-group-text">Question 1</span>
-                                <textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
-                            </div>
-                            <div class="input-group mb-3">
-                                <span class="input-group-text">Question Type</span>
-                                <select id="q0-type" class="form-select">
-                                    <option value ="Multiple Choice">Multiple Choice</option>
-                                    <option value="Yes/No">Yes/No</option>
-                                    <option value="List">Ordered List</option>
-                                </select>
-                            </div>
-                            <label for="q0-options" class="form-label">Options</label>
-                            <ul class="options" id="q0-options">
-                                <div class="input-group mb-3">
-                                    <span class="input-group-text" id="q0-options-0-caption">0</span>
-                                    <input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
-                                </div>
-                                <div class="input-group mb-3">
-                                    <span class="input-group-text" id="q0-options-1-caption">1</span>
-                                    <input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
-                                </div>
-                            </ul>
-                            <div class="editor-controls">
-                                <a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
-                                <a href="" class="btn btn-success" data-action="Done">Done</a>
-                            </div>
-                            <div class="input-group mb-3">
-                                <span class="input-group-text" id="q0-correct-caption">Correct</span>
-                                <input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
-                            </div>
-                            <div class="input-group mb-3">
-                                <span class="input-group-text" id="q0-tags-caption">Tags</span>
-                                <textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags&#010;List of tags</textarea>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="accordion-item" id="i1">
-                <h2 class="accordion-header" id="h1">
-                    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c1" aria-expanded="true" aria-controls="c1">
-                        <div class="float-start">Block 1</div>
-                        <a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
-                    </div>
-                </h2>
-                <div id="c1" class="accordion-collapse collapse" aria-labelledby="h1" data-bs-parent="#editor-root">
-                    <div class="accordion-body">
-                        <div class="accordion" id="b1">
-                            <div class="accordion-item" id="b1-item">
-                                <h2 class="accordion-header" id="h2">
-                                    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c2" aria-expanded="true" aria-controls="c2">
-                                        <div class="float-start">Question 1</div>
-                                        <a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
-                                    </div>
-                                </h2>
-                                <div id="c2" class="accordion-collapse collapse" aria-labelledby="h2" data-bs-parent="#b1">
-                                    <div class="accordion-body">
-                                        <div class="question-text">
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text">Question 1</span>
-                                                <textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
-                                            </div>
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text">Question Type</span>
-                                                <select id="q0-type" class="form-select">
-                                                    <option value ="Multiple Choice">Multiple Choice</option>
-                                                    <option value="Yes/No">Yes/No</option>
-                                                    <option value="List">Ordered List</option>
-                                                </select>
-                                            </div>
-                                            <label for="q1-options" class="form-label">Options</label>
-                                            <ul class="options" id="q1-options">
-                                                <div class="input-group mb-3">
-                                                    <span class="input-group-text" id="q0-options-0-caption">0</span>
-                                                    <input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
-                                                </div>
-                                                <div class="input-group mb-3">
-                                                    <span class="input-group-text" id="q0-options-1-caption">1</span>
-                                                    <input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
-                                                </div>
-                                            </ul>
-                                            <div class="editor-controls">
-                                                <a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
-                                                <a href="" class="btn btn-success" data-action="Done">Done</a>
-                                            </div>
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text" id="q0-correct-caption">Correct</span>
-                                                <input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
-                                            </div>
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text" id="q0-tags-caption">Tags</span>
-                                                <textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags&#010;List of tags</textarea>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
         {% include "editor/components/client-alerts.html" %}
         <div class="editor-controls">
-            <a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
-            <a href="" class="btn btn-success" data-action="Done">Done</a>
+            <a href="javascript:void(0);" class="btn btn-primary" data-action="add-block" title="Add Block" aria-title="Add Block">
+                <i class="bi bi-folder-plus"></i>
+                Add Block
+            </a>
+            <a href="javascript:void(0);" class="btn btn-primary" data-action="add-question" title="Add Question" aria-title="Add Question">
+                <i class="bi bi-file-plus-fill"></i>
+                Add Question
+            </a>
+        </div>
+
+        <div class="editor-controls">
+            <a href="javascript:void(0);" class="btn btn-danger" data-action="cancel">Cancel</a>
+            <a href="javascript:void(0);" class="btn btn-success" data-action="done">Done</a>
         </div>
     </div>
 {% endblock %}