diff --git a/src/components/Modals/CollectionsSideBar.vue b/src/components/Modals/CollectionsSideBar.vue
index 0af7b2a3a..72483460b 100644
--- a/src/components/Modals/CollectionsSideBar.vue
+++ b/src/components/Modals/CollectionsSideBar.vue
@@ -37,14 +37,26 @@
               :key="index2"
               class="dropdown-item-content"
             >
-              <course
-                :courseObj="course"
-                :isReqCourse="false"
-                :compact="false"
-                :active="false"
-                :isSemesterCourseCard="false"
-                @delete-course-from-collection="deleteCourseFromCollection(collection, course)"
-              />
+              <draggable
+                :group="{ name: 'draggable-semester-courses', pull: 'clone', put: false }"
+                :modelValue="[course]"
+                :clone="cloneCourse"
+                item-key="code"
+              >
+                <template #item="{ element: templatedCourse }">
+                  <course
+                    :courseObj="templatedCourse"
+                    :isReqCourse="false"
+                    :compact="false"
+                    :active="false"
+                    :isSemesterCourseCard="false"
+                    class="collection-course"
+                    @delete-course-from-collection="
+                      deleteCourseFromCollection(collection, templatedCourse)
+                    "
+                  />
+                </template>
+              </draggable>
             </div>
           </div>
           <div class="separator"></div>
@@ -56,15 +68,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-// import draggable from 'vuedraggable'; // implement later with backend
+import draggable from 'vuedraggable';
 import Course from '@/components/Course/Course.vue';
 import DropDownArrow from '@/components/DropDownArrow.vue';
 import { isPlaceholderCourse, isFirestoreSemesterCourse } from '@/utilities';
 import store from '@/store';
+import { incrementUniqueID } from '@/global-firestore-data';
 
 export default defineComponent({
   components: {
-    // draggable, // implement later with backend
+    draggable,
     Course,
     DropDownArrow,
   },
@@ -129,6 +142,9 @@ export default defineComponent({
     deleteCourseFromCollection(collection: string, course: FirestoreSemesterCourse) {
       this.$emit('delete-course-from-collection', collection, course.code);
     },
+    cloneCourse(courseWithDummyUniqueID: FirestoreSemesterCourse): FirestoreSemesterCourse {
+      return { ...courseWithDummyUniqueID, uniqueID: incrementUniqueID() };
+    },
   },
 });
 </script>
@@ -233,4 +249,14 @@ export default defineComponent({
 :deep(.arrow-up) {
   margin-top: 3px;
 }
+
+.collection-course {
+  touch-action: none;
+  cursor: grab;
+
+  &:active:hover {
+    touch-action: none;
+    cursor: grabbing;
+  }
+}
 </style>
diff --git a/src/components/Modals/SaveCourseModal.scss b/src/components/Modals/SaveCourseModal.scss
index 79ed287c0..2afea4770 100644
--- a/src/components/Modals/SaveCourseModal.scss
+++ b/src/components/Modals/SaveCourseModal.scss
@@ -1,137 +1,85 @@
 @import '@/assets/scss/_variables.scss';
 .saveCourseModal {
-    &-title {
-      display: flex;
-      justify-content: space-between;
-      padding-top: 0.6rem;
-      gap: 0.5rem;
-      img {
-        margin-top: 2%;
-        align-self: flex-start;
-      }
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 0.6rem;
+    gap: 0.5rem;
+    img {
+      margin-top: 2%;
+      align-self: flex-start;
     }
-  
-    &-header {
+  }
+
+  &-header {
+    display: flex;
+    align-self: center;
+    margin-bottom: 0.7rem;
+    width: 112%;
+    height: 2rem;
+    border: 0.3px solid $lightGray;
+    color: $primaryGray;
+    padding: 1rem;
+
+    &-text {
       display: flex;
-      align-self: center;
-      margin-bottom: 0.7rem;
-      width: 112%;
-      height: 2rem;
-      border: 0.3px solid $lightGray;
-      color: $primaryGray;
-      padding: 1rem;
-  
-      &-text {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 13px;
-        font-weight: 900;
-        width: 100%;
-  
-        &-addButton {
-          cursor: pointer;
-          &:hover {
-            opacity: 0.5;
-          }
+      align-items: center;
+      justify-content: space-between;
+      font-size: 13px;
+      font-weight: 900;
+      width: 100%;
+
+      &-addButton {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.5;
         }
       }
     }
-  
-    &-body {
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    color: $primaryGray;
+    width: 100%;
+    position: relative;
+    max-height: 4.5rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    ::-webkit-scrollbar-button {
+      display: none; // Hide the up and down arrows
+    }
+
+    &-content {
       display: flex;
       flex-direction: column;
-      justify-content: flex-start;
+      justify-content: center;
       align-items: flex-start;
-      color: $primaryGray;
+      gap: 0.5rem;
       width: 100%;
-      position: relative;
-      max-height: 4.5rem;
-      overflow-y: auto;
-      overflow-x: hidden;
-      box-sizing: border-box;
-  
-      ::-webkit-scrollbar-button {
-        display: none; // Hide the up and down arrows
-      }
-  
-      &-content {
-        display: flex;
-        flex-direction: column;
+
+      &.default-collection {
         justify-content: center;
-        align-items: flex-start;
-        gap: 0.5rem;
-        width: 100%;
-  
-        &.default-collection {
-          justify-content: center;
-          align-items: center;
-        }
-  
-        &-collection {
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-start;
-          align-items: center;
-          color: $primaryGray;
-          gap: 0.5rem;
-          padding: 0rem;
-  
-          input[type='checkbox'] {
-            margin: 0;
-            padding: 0;
-            appearance: none;
-            width: 12px;
-            height: 12px;
-            border-radius: 10%;
-            border: 1px solid $lightGray;
-            background-color: white;
-            cursor: pointer;
-            position: relative; // For the ::before element positioning
-            user-select: none;
-            outline: none;
-  
-            &:hover {
-              border: 1px solid $emGreen;
-            }
-  
-            &:checked{
-              background-color: $emGreen;
-              border: 1px solid $emGreen;
-            }
-  
-            // Show checkbox vector when checked
-            &:checked::before{
-              content: '';
-              background-image: url('@/assets/images/checkmark-color.svg');
-              background-size: contain;
-              background-repeat: no-repeat;
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-48%, -38%);
-              width: 9px;
-              height: 9px;
-            }
-          }
-  
-          label {
-            cursor: pointer;
-            user-select: none;
-            margin: 0;
-            padding: 0;
-            outline: none;
-          }
-        }
+        align-items: center;
       }
-      &-bottom {
+
+      &-collection {
         display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
         align-items: center;
-        justify-items: center;
-        width: 100%;
-  
+        color: $primaryGray;
+        gap: 0.5rem;
+        padding: 0rem;
+
         input[type='checkbox'] {
-          margin-right: 0.35rem;
+          margin: 0;
+          padding: 0;
           appearance: none;
           width: 12px;
           height: 12px;
@@ -142,16 +90,16 @@
           position: relative; // For the ::before element positioning
           user-select: none;
           outline: none;
-  
+
           &:hover {
             border: 1px solid $emGreen;
           }
-  
+
           &:checked {
             background-color: $emGreen;
             border: 1px solid $emGreen;
           }
-  
+
           // Show checkbox vector when checked
           &:checked::before {
             content: '';
@@ -166,35 +114,87 @@
             height: 9px;
           }
         }
-  
-        .new-collection-label {
-          flex-grow: 1;
-          display: flex;
-          align-items: center;
-          margin-top: 0.3rem;
-  
-          .editable-input {
-            border: 1px solid $lightGray;
-            border-radius: 4px;
-            box-sizing: border-box;
-            transition: border 0.2s ease;
-            width: 80%;
-            padding-left: 0.1rem;
-
-            &:focus {
-              outline: none;
-              border-color: $lightGray;
-              box-shadow: none;
-            }
-          }
+
+        label {
+          cursor: pointer;
+          user-select: none;
+          margin: 0;
+          padding: 0;
+          outline: none;
         }
       }
     }
-    &-divider-line {
+    &-bottom {
       display: flex;
-      align-self: center;
-      width: 112%;
-      height: 0.3px;
-      background-color: $lightGray;
+      align-items: center;
+      justify-items: center;
+      width: 100%;
+
+      input[type='checkbox'] {
+        margin-right: 0.35rem;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        border-radius: 10%;
+        border: 1px solid $lightGray;
+        background-color: white;
+        cursor: pointer;
+        position: relative; // For the ::before element positioning
+        user-select: none;
+        outline: none;
+
+        &:hover {
+          border: 1px solid $emGreen;
+        }
+
+        &:checked {
+          background-color: $emGreen;
+          border: 1px solid $emGreen;
+        }
+
+        // Show checkbox vector when checked
+        &:checked::before {
+          content: '';
+          background-image: url('@/assets/images/checkmark-color.svg');
+          background-size: contain;
+          background-repeat: no-repeat;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-48%, -38%);
+          width: 9px;
+          height: 9px;
+        }
+      }
+
+      .new-collection-label {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        margin-top: 0.3rem;
+
+        .editable-input {
+          border: 1px solid $lightGray;
+          border-radius: 4px;
+          box-sizing: border-box;
+          transition: border 0.2s ease;
+          width: 80%;
+          padding-left: 0.1rem;
+
+          &:focus {
+            outline: none;
+            border-color: $lightGray;
+            box-shadow: none;
+          }
+        }
+      }
     }
-  }
\ No newline at end of file
+  }
+  &-divider-line {
+    display: flex;
+    align-self: center;
+    width: 112%;
+    height: 0.3px;
+    background-color: $lightGray;
+  }
+}