diff --git a/static-webapps/slate-portfolio-manager/src/assets/app.scss b/static-webapps/slate-portfolio-manager/src/assets/app.scss
index c2ec8d9ea..9e16b613a 100644
--- a/static-webapps/slate-portfolio-manager/src/assets/app.scss
+++ b/static-webapps/slate-portfolio-manager/src/assets/app.scss
@@ -36,4 +36,14 @@ body {
     position: absolute;
     z-index: 99999;
   }
+}
+
+.level-panel.-drop-zone {
+  .level-panel__delete, .skill-demos {
+    display: none;
+  }
+  &.-drag-source {
+    filter: grayscale(0.75);
+    opacity: 0.5;
+  }
 }
\ No newline at end of file
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
index 9b63f0537..bb5d39ad1 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
+++ b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="`level-panel mb-2 cbl-level-${portfolio.Level}`">
+  <div
+    :class="wrapperClass"
+    @drop="drop"
+    @dragover.prevent
+    @dragenter.prevent
+  >
     <b-container
       v-b-toggle="collapseId"
       class="bg-cbl-level-50"
@@ -59,7 +64,7 @@
       />
       <div
         v-if="canDelete"
-        class="p-3 bg-cbl-level-10"
+        class="p-3 bg-cbl-level-10 level-panel__delete"
       >
         <button
           class="btn btn-danger"
@@ -115,6 +120,19 @@ export default {
   computed: {
     ...mapStores(useStudentCompetency, useUi),
 
+    wrapperClass() {
+      const { Level } = this.portfolio;
+      const { dragging } = this.uiStore;
+      const isDroppable = dragging && dragging.type === 'move-skill-demo';
+      return [
+        `level-panel mb-2 cbl-level-${Level}`,
+        isDroppable && [
+          '-drop-zone',
+          dragging.Level === Level ? '-drag-source' : '-drag-target',
+        ],
+      ];
+    },
+
     stats() {
       const { BaselineRating, demonstrationsAverage, growth } = this.portfolio;
       const format = (value) => {
@@ -192,6 +210,12 @@ export default {
         });
       this.uiStore.confirm(body, action);
     },
+    drop() {
+      const { type, action } = this.uiStore.$state.dragging || {};
+      if (type === 'move-skill-demo') {
+        action(this.portfolio.Level);
+      }
+    },
   },
 };
 </script>
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
index 9b95c811a..36b1faec7 100644
--- a/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
+++ b/static-webapps/slate-portfolio-manager/src/components/sidebar/SkillDemoCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :class="wrapperClass">
+  <div
+    :class="wrapperClass"
+    draggable="true"
+    @drag="drag"
+  >
     <div class="skill-demo__rating py-1 bg-cbl-level">
       <font-awesome-icon
         v-if="demo.Override"
@@ -92,6 +96,10 @@ export default {
 
   methods: {
     setTargetLevel(TargetLevel) {
+      if (TargetLevel === this.level) {
+        // skill demo-card was dropped on current portfolio level
+        return;
+      }
       const { ID } = this.demo;
       const data = [{ ID, TargetLevel }];
       const body = `Are you sure you want to move this to level ${TargetLevel}?`;
@@ -102,6 +110,16 @@ export default {
       };
       this.uiStore.confirm(body, action);
     },
+    drag() {
+      const { ID } = this.demo;
+      const { level } = this;
+      this.uiStore.startDragging({
+        ID,
+        Level: level,
+        type: 'move-skill-demo',
+        action: this.setTargetLevel,
+      });
+    },
   },
 };
 </script>
@@ -143,6 +161,7 @@ export default {
 
     &__grabber {
       background-color: #eee;
+      cursor: pointer;
       flex: 1 1 0;
     }
 
diff --git a/static-webapps/slate-portfolio-manager/src/store/useUi.js b/static-webapps/slate-portfolio-manager/src/store/useUi.js
index 821b13e43..cdf756551 100644
--- a/static-webapps/slate-portfolio-manager/src/store/useUi.js
+++ b/static-webapps/slate-portfolio-manager/src/store/useUi.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 export default defineStore('ui', {
-  state: () => ({ alert: null, confirm: null }),
+  state: () => ({ alert: null, confirm: null, dragging: null }),
   actions: {
     alert(options) {
       if (options && !options.actions) {
@@ -36,5 +36,13 @@ export default defineStore('ui', {
         ],
       });
     },
+    startDragging(options) {
+      this.$state.dragging = options;
+      document.addEventListener(
+        'dragend',
+        () => { this.$state.dragging = null; },
+        { once: true },
+      );
+    },
   },
 });