diff --git a/app/Classes/Modules/MilestoneTasks/DataTransferObjects/MilestoneTaskObject.php b/app/Classes/Modules/MilestoneTasks/DataTransferObjects/MilestoneTaskObject.php
index 8123802..5b0115e 100644
--- a/app/Classes/Modules/MilestoneTasks/DataTransferObjects/MilestoneTaskObject.php
+++ b/app/Classes/Modules/MilestoneTasks/DataTransferObjects/MilestoneTaskObject.php
@@ -16,17 +16,17 @@ class MilestoneTaskObject implements DataTransferObject
     /** @var string */
     private $title;
 
-    /** @var string */
+    /** @var string|null */
     private $description;
 
     /**
      * MilestoneTaskObject constructor.
      * @param int $milestoneId
-        * @param int $typeId
-        * @param string $title
-        * @param string $description
+     * @param int $typeId
+     * @param string $title
+     * @param null|string $description
      */
-    public function __construct(int $milestoneId, int $typeId, string $title, string $description)
+    public function __construct(int $milestoneId, int $typeId, string $title, ?string $description)
     {
         $this->milestoneId = $milestoneId;
         $this->typeId = $typeId;
@@ -59,13 +59,12 @@ class MilestoneTaskObject implements DataTransferObject
     }
 
     /**
-     * @return string
+     * @return null|string
      */
-    public function getDescription(): string
+    public function getDescription(): ?string
     {
         return $this->description;
     }
 
 
-
 }
\ No newline at end of file
diff --git a/app/Http/Resources/CommentResource.php b/app/Http/Resources/CommentResource.php
index eb47668..ec65f73 100644
--- a/app/Http/Resources/CommentResource.php
+++ b/app/Http/Resources/CommentResource.php
@@ -18,7 +18,7 @@ class CommentResource extends JsonResource
         return [
             'id' => $this->id,
             'user' => new UserResource($this),
-            'comment' => $this->pivot->comment,
+            'comment' => nl2br($this->pivot->comment),
             'created_at' => carbon::parse($this->pivot->created_at)->diffForHumans()
         ];
     }
diff --git a/app/Models/MilestoneTask.php b/app/Models/MilestoneTask.php
index cb16c21..2f8a744 100644
--- a/app/Models/MilestoneTask.php
+++ b/app/Models/MilestoneTask.php
@@ -3,6 +3,8 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Spatie\EloquentSortable\Sortable;
+use Spatie\EloquentSortable\SortableTrait;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
 
@@ -18,9 +20,16 @@ use Illuminate\Database\Eloquent\SoftDeletes;
  * @property string title
  * @property string description
  */
-class MilestoneTask extends AbstractModel
+class MilestoneTask extends AbstractModel implements Sortable
 {
 
+    use SortableTrait;
+
+    public $sortable = [
+        'order_column_name' => 'order',
+        'sort_when_creating' => true,
+    ];
+
     use SoftDeletes;
 
 
@@ -60,6 +69,11 @@ class MilestoneTask extends AbstractModel
         'title' => 'required'
     ];
 
+    public function buildSortQuery()
+    {
+        return static::query()->where('milestone_id', $this->milestone_id);
+    }
+
     /**
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
      **/
@@ -73,7 +87,7 @@ class MilestoneTask extends AbstractModel
      */
     public function taskType(): BelongsTo
     {
-        return $this->BelongsTo(ModularType::class, 'type_id', 'id');
+        return $this->BelongsTo(ModularType::class, 'type_id', 'id')->withTrashed();
     }
 
     public function departments(){
diff --git a/database/migrations/2020_05_05_083641_create_milestone_tasks_table.php b/database/migrations/2020_05_05_083641_create_milestone_tasks_table.php
index ac78987..0cbe693 100644
--- a/database/migrations/2020_05_05_083641_create_milestone_tasks_table.php
+++ b/database/migrations/2020_05_05_083641_create_milestone_tasks_table.php
@@ -20,6 +20,7 @@ class CreateMilestoneTasksTable extends Migration
             $table->unsignedBigInteger('type_id');
             $table->string('title');
             $table->string('description')->nullable();
+            $table->integer('order');
             $table->timestamps();
             $table->softDeletes();
             $table->foreign('milestone_id')->references('id')->on('milestones');
diff --git a/package.json b/package.json
index fbca25a..d7e804c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
         "select2": "^4.0.13",
         "vue": "^2.6.10",
         "vue-avatar": "^2.2.0",
+        "vue-sortable": "^0.1.3",
         "vue-template-compiler": "^2.6.10",
         "vuelidate": "^0.7.4",
         "vuex": "^3.1.3"
diff --git a/resources/assets/vue/app.js b/resources/assets/vue/app.js
index 010449c..a7d2fec 100644
--- a/resources/assets/vue/app.js
+++ b/resources/assets/vue/app.js
@@ -11,6 +11,9 @@ import Avatar from 'vue-avatar';
 import Vuelidate from 'vuelidate'
 import request from './mixins/requestMixin'
 import crud from './mixins/crudMixin'
+import Sortable from 'vue-sortable'
+
+Vue.use(Sortable)
 
 Vue.use(Vuelidate);
 Vue.component('avatar', Avatar);
diff --git a/resources/assets/vue/components/comment/forms/CommentFormComponent.vue b/resources/assets/vue/components/comment/forms/CommentFormComponent.vue
index 7f09a3e..3639fc6 100644
--- a/resources/assets/vue/components/comment/forms/CommentFormComponent.vue
+++ b/resources/assets/vue/components/comment/forms/CommentFormComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="row" v-on:keyup.enter="submitForm()">
+    <div class="row">
         <div class="col">
             <div class="row">
                 <div class="col">
diff --git a/resources/assets/vue/components/department/elements/DepartmentComponent.vue b/resources/assets/vue/components/department/elements/DepartmentComponent.vue
index c91ea4a..516ea80 100644
--- a/resources/assets/vue/components/department/elements/DepartmentComponent.vue
+++ b/resources/assets/vue/components/department/elements/DepartmentComponent.vue
@@ -30,7 +30,7 @@
                         <div class="row">
                             <div class="col">
                                 <div class="text-small mb-0 w-xs-100 mt-0">
-                                    <span class="align-middle d-inline-block">{{department.manager.name}}</span>
+                                    <span class="align-middle d-inline-block">{{department.manager ? department.manager.name:''}}</span>
                                 </div>
                             </div>
                         </div>
diff --git a/resources/assets/vue/components/general/Form/SelectableComponent.vue b/resources/assets/vue/components/general/Form/SelectableComponent.vue
index 204a9d8..51747d2 100644
--- a/resources/assets/vue/components/general/Form/SelectableComponent.vue
+++ b/resources/assets/vue/components/general/Form/SelectableComponent.vue
@@ -26,6 +26,7 @@
             }
         },
         created(){
+            console.log(this)
             if(!this.$store.getters.isInQueue(this.section)){
                 this.$store.dispatch('updateListQueue', {name: this.section});
                 this.$store.dispatch('crudRequest', {endpoint: this.endpoint, method: 'get'}).then(response => {
diff --git a/resources/assets/vue/components/milestone/elements/MilestoneListComponent.vue b/resources/assets/vue/components/milestone/elements/MilestoneListComponent.vue
new file mode 100644
index 0000000..c953a8c
--- /dev/null
+++ b/resources/assets/vue/components/milestone/elements/MilestoneListComponent.vue
@@ -0,0 +1,104 @@
+<template>
+    <transition-component group enter-class="animated fadeInRightBig delay-1 faster" leave-class="animated fadeOutRightBig faster">
+        <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+        <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
+            <div class="col">
+                <div class="row">
+                    <div class="col">
+                        <div class="row align-items-center justify-content-center pt-5 pb-5" v-if="!$store.getters.getListData(section).length">
+                            <div class="col-10 pt-5">
+                                <div class="row align-items-center justify-content-center">
+                                    <div class="col-9 text-center mb-5">
+                                        <i class="iconsminds-folder-open" style="font-size: 50px;"></i>
+                                    </div>
+                                </div>
+                                <div class="row text-center">
+                                    <div class="col">
+                                        <div class="row mb-3">
+                                            <div class="col">
+                                                <p class="text-uppercase m-0" style="letter-spacing: 2px;">No Results Found</p>
+                                            </div>
+                                        </div>
+                                        <div class="row align-items-center justify-content-center">
+                                            <div class="col">
+                                                <small class="text-uppercase" style="letter-spacing: 2px">Try adjusting your filters to find what you are looking for.</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <div class="list disable-text-selection" data-check-all="checkAll">
+                                    <div class="row" v-for="item in $store.getters.getListData(section)" v-bind:key="item.id" :data="item">
+                                        <div class="col">
+                                            <slot name="list" :data="item"></slot>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition-component>
+</template>
+
+<script>
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            },
+            endpoint: {
+                type: String,
+                required: true
+            },
+            options: {
+                default () {
+                    return {}
+                }
+            }
+        },
+        data(){
+            return {
+                filters: this.options
+            }
+        },
+        validations: {},
+        created(){
+            this.setDecoratorDefault();
+            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
+        },
+        computed: {
+            pendingList () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            }
+        },
+        watch: {
+            pendingList(inComplete){
+                if(inComplete){
+                    this.fetchList();
+                }
+            }
+        },
+        methods: {
+            fetchList(){
+                let listDecorators = this.$store.getters.getListDetails(this.section);
+                this.submit(this.endpoint + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
+                this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/vue/components/task/elements/TaskDetailsComponent.vue b/resources/assets/vue/components/task/elements/TaskDetailsComponent.vue
index b7827fc..3adc9a3 100644
--- a/resources/assets/vue/components/task/elements/TaskDetailsComponent.vue
+++ b/resources/assets/vue/components/task/elements/TaskDetailsComponent.vue
@@ -69,7 +69,7 @@
                                                             </div>
                                                             <div class="col">
                                                                 <p class="font-weight-medium mb-1">{{comment.user.name}}</p>
-                                                                <p class="text-semi-muted text-small mb-1">{{comment.comment}}</p>
+                                                                <p class="text-semi-muted text-small mb-1" v-html="comment.comment"></p>
                                                                 <p class="text-muted mb-0 text-small">{{comment.created_at}}</p>
                                                             </div>
                                                         </div>