diff --git a/src/components/ui/drag-and-drop/DragAndDropItem.vue b/src/components/ui/drag-and-drop/DragAndDropItem.vue
index b0f14101e9845ad8b3c2bb24b4b473b81757f66f..eb5de947e4a55ab7ee567ba8587cec2bc0460884 100644
--- a/src/components/ui/drag-and-drop/DragAndDropItem.vue
+++ b/src/components/ui/drag-and-drop/DragAndDropItem.vue
@@ -43,7 +43,7 @@ const onDrop = (evt: DragEvent, anotherItem: Item) => {
 </script>
 <template>
     <div @drop="onDrop($event, props.item)" @dragover.prevent @dragenter.prevent draggable="true" @dragstart="startDrag($event, props.item)"  
-    w-86 h-40 m-t-2 m-b-2 rounded-0.5rem flex flex-col items-center p-4 border-1.5 border-black-500 bg-white>
+    w-86 h-40 m-t-2 m-b-2 rounded-0.5rem flex flex-col items-center p-4 border-1.5 border-black-500 bg-background>
         <div class="w-100% flex flex-row justify-between">
             <div class=" w-60%  flex flex-row justify-between items-center">
                 <Checkbox></Checkbox>