diff --git a/frontend/src/components/FilesUploader/FilesUploaderArea.vue b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
index 8768f4e8..85689909 100644
--- a/frontend/src/components/FilesUploader/FilesUploaderArea.vue
+++ b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
@@ -13,7 +13,7 @@
   </div>
   <div v-else>
     <div
-      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-ink-gray-5"
+      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-outline-gray-modals min-h-64 text-ink-gray-5"
       @dragover.prevent="dragover"
       @dragleave.prevent="dragleave"
       @drop.prevent="dropfiles"
@@ -128,7 +128,7 @@ import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
 import { createToast, formatDate, convertSize } from '@/utils'
 import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -383,6 +383,12 @@ function fileIcon(type) {
   return FileTextIcon
 }
 
+watch(showCamera, (value) => {
+  if (!value) stopStream()
+})
+
+onUnmounted(() => stopStream())
+
 defineExpose({
   showFileBrowser,
   showWebLink,