diff --git a/common/helpers/__tests__/interpolation.spec.js b/common/helpers/__tests__/interpolation.spec.js
new file mode 100644
index 0000000000..71a20bc76c
--- /dev/null
+++ b/common/helpers/__tests__/interpolation.spec.js
@@ -0,0 +1,65 @@
+import { lerp, clamp, invlerp, range } from '../interpolation.js'
+
+describe('lerp', () => {
+  it.each([
+    [[0, 50, 0.5], 25],
+    [[1, 3, 0.5], 2],
+    [[0, 5, 0.2], 1],
+    [[2, 7, 1], 7],
+    [[8, 4, 0.5], 6],
+    [[5, 4, 1], 4],
+    [[3, 7, 2], 11],
+    [[2, 3, 3], 5],
+    [[-8, -4, 0.5], -6],
+    [[-2, -4, 0.25], -2.5],
+    [[0, 10, 0.1], 1],
+    [[10, 50, 1], 50],
+  ])('maps %p to %p', (input, expected) => {
+    expect(lerp(...input)).toEqual(expected)
+  })
+})
+
+describe('clamp', () => {
+  it.each([
+    [[0.5, 0, 50], 0.5],
+    [[3, 0, 5], 3],
+    [[2, -5, 10], 2],
+    [[8, 1, 3], 3],
+    [[5, -1, 2], 2],
+    [[3, 5, 10], 5],
+    [[1, 2, 3], 2],
+    [[11, 0, 10], 10],
+    [[1, 10, 50], 10],
+  ])('maps %p to %p', (input, expected) => {
+    expect(clamp(...input)).toEqual(expected)
+  })
+})
+
+describe('invlerp', () => {
+  it.each([
+    [[0, 2, 1], 0.5],
+    [[-10, 0, -5], 0.5],
+    [[-10, 10, 8], 0.9],
+    [[3, 7, 5], 0.5],
+    [[-1, 1, 10], 1],
+    [[99, 101, 42], 0],
+    [[-100, 100, -100], 0],
+  ])('maps %p to %p', (input, expected) => {
+    expect(invlerp(...input)).toEqual(expected)
+  })
+})
+
+describe('range', () => {
+  it.each([
+    [[0, 1, 10, 20, 0.5], 15],
+    [[10, 0, 20, 40, 7.5], 25],
+    [[-10, 10, 8, 96, 5], 74],
+    [[16, 32, 8, 14, 24], 11],
+    [[-100, 100, 0, 100, 0], 50],
+    [[-100, 100, 0, 100, 50], 75],
+    [[42, 42, 0, 100, 42], NaN],
+    [[1337, 50, 0, 100, 42], 100],
+  ])('maps %p to %p', (input, expected) => {
+    expect(range(...input)).toEqual(expected)
+  })
+})
diff --git a/common/helpers/interpolation.js b/common/helpers/interpolation.js
new file mode 100644
index 0000000000..5ea4f7bb09
--- /dev/null
+++ b/common/helpers/interpolation.js
@@ -0,0 +1,39 @@
+/**
+ * Curve fitting
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const lerp = (x, y, a) => x * (1 - a) + y * a
+
+/**
+ * Clamps value between min and max
+ * @param a
+ * @param min
+ * @param max
+ * @returns {number}
+ */
+export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a))
+
+/**
+ * Inverse curve fitting function
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const invlerp = (x, y, a) => clamp((a - x) / (y - x))
+
+/**
+ * Maps input to output range
+ * @param inputStart
+ * @param inputEnd
+ * @param outputStart
+ * @param outputEnd
+ * @param input
+ * @returns number
+ */
+export function range(inputStart, inputEnd, outputStart, outputEnd, input) {
+  return lerp(outputStart, outputEnd, invlerp(inputStart, inputEnd, input))
+}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ed9027f5f7..5328f1db8a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,7 +10,7 @@
     </v-main>
 
     <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.smAndUp" app color="grey lighten-5">
+    <v-footer v-if="$vuetify.breakpoint.mdAndUp" app color="grey lighten-5">
       <small
         >eCamp
         <a v-if="version" :href="versionLink" target="_blank">
diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
index 93f0194726..8a297b2f0f 100644
--- a/frontend/src/components/activity/ActivityResponsibles.vue
+++ b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -14,16 +14,30 @@
     small-chips
     v-bind="$attrs"
     @input="onInput"
-  />
+  >
+    <template #selection="{ item }">
+      <v-chip :key="item.value" small class="mx-0">
+        <UserAvatar
+          :camp-collaboration="item.campCollaboration"
+          left
+          size="20"
+          class="ml-n3"
+        />
+        <span>{{ item.text }}</span>
+      </v-chip>
+    </template>
+  </e-select>
 </template>
 
 <script>
 import { serverErrorToString } from '@/helpers/serverError.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { isEqual, sortBy } from 'lodash'
+import UserAvatar from '@/components/user/UserAvatar.vue'
 
 export default {
   name: 'ActivityResponsibles',
+  components: { UserAvatar },
   props: {
     activity: {
       type: Object,
@@ -57,6 +71,7 @@ export default {
           // following structure is defined by vuetify v-select items property
           return {
             value: value._meta.self,
+            campCollaboration: value,
             text: campCollaborationDisplayName(value, this.$tc.bind(this)),
           }
         })
@@ -159,3 +174,14 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep(.v-select__selections) {
+  gap: 4px;
+  padding-top: 8px !important;
+
+  & input {
+    padding: 0;
+  }
+}
+</style>
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index b936cca699..9095134c73 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -17,20 +17,20 @@
     <td style="width: 100%" class="contentrow">
       <router-link
         :to="routerLink"
-        class="text-decoration-none text-decoration-hover-underline black--text"
+        class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium d-block"
       >
         {{ title }}<br />
       </router-link>
       <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
-      <AvatarRow :camp-collaborations="collaborators" size="28" class="ml-auto" />
+      <AvatarRow :camp-collaborations="collaborators" max-size="28" class="ml-auto" />
     </td>
   </tr>
 </template>
 
 <script>
-import AvatarRow from './AvatarRow.vue'
+import AvatarRow from '@/components/generic/AvatarRow.vue'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'
 import TextAlignBaseline from '@/components/layout/TextAlignBaseline.vue'
@@ -97,10 +97,9 @@ tr + tr :is(td, th) {
 }
 
 .contentrow {
-  max-width: 100px;
+  max-width: 64px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .avatarrow {
diff --git a/frontend/src/components/dashboard/AvatarRow.vue b/frontend/src/components/generic/AvatarRow.vue
similarity index 50%
rename from frontend/src/components/dashboard/AvatarRow.vue
rename to frontend/src/components/generic/AvatarRow.vue
index db92f4ac60..6a875b9d2c 100644
--- a/frontend/src/components/dashboard/AvatarRow.vue
+++ b/frontend/src/components/generic/AvatarRow.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="avatarrow" :style="avatarrow">
+  <div class="e-avatarrow" :class="{ 'e-avatarrow--narrow': narrow }" :style="styles">
     <div
       v-for="campCollaboration in campCollaborations"
       :key="campCollaboration && campCollaboration._meta.self"
-      class="avataritem"
+      class="e-avataritem"
     >
-      <UserAvatar :size="Number(size)" :camp-collaboration="campCollaboration" />
+      <UserAvatar :size="size" :camp-collaboration="campCollaboration" />
     </div>
   </div>
 </template>
@@ -18,46 +18,59 @@ export default {
   components: { UserAvatar },
   props: {
     campCollaborations: { type: Array, default: () => [] },
-    size: { type: [Number, String], default: 20 },
+    maxSize: { type: [Number, String], default: 20 },
   },
+  data: () => ({
+    maxHeight: 1000,
+  }),
   computed: {
+    size() {
+      return Math.min(Number(this.maxSize), this.maxHeight)
+    },
     maxWidth() {
-      return (
-        (this.campCollaborations?.length - 1) * (Number(this.size) * 0.25) +
-        Number(this.size)
-      )
+      return this.campCollaborations?.length * (this.size * 0.5) + this.size
+    },
+    narrow() {
+      return this.campCollaborations?.length > 3
     },
-    avatarrow() {
+    styles() {
       return {
         'max-width': `${this.maxWidth}px`,
         'font-size': `${this.size}px`,
       }
     },
   },
+  mounted() {
+    this.maxHeight = this.$el.getBoundingClientRect().height
+  },
 }
 </script>
 
 <style scoped lang="scss">
-.avatarrow {
+.e-avatarrow {
   display: flex;
   flex-direction: row-reverse;
-  gap: 0.75em;
+  gap: 0.8em;
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    gap: 1.1em;
+  }
+
   padding-left: 0.5em;
   padding-right: 0.5em;
   transition: gap 0.25s ease;
 }
 
-@media #{map-get($display-breakpoints, 'md-and-up')} {
-  .avatarrow {
-    gap: 1.1em;
+.e-avatarrow--narrow {
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    gap: 0.8em;
   }
 }
 
-.avatarrow:hover {
+.e-avatarrow:hover {
   gap: 1.1em;
 }
 
-.avataritem {
+.e-avataritem {
   display: grid;
   width: 0;
   place-content: center;
diff --git a/frontend/src/components/generic/LockIcon.vue b/frontend/src/components/generic/LockIcon.vue
index d14881de9c..e81845aef8 100644
--- a/frontend/src/components/generic/LockIcon.vue
+++ b/frontend/src/components/generic/LockIcon.vue
@@ -4,7 +4,14 @@
       <v-icon v-if="value" small v-on="{ dblclick: iconDblClick, ...on }">
         mdi-lock-open-variant
       </v-icon>
-      <v-icon v-else small color="grey" v-on="{ dblclick: iconDblClick, ...on }">
+      <v-icon
+        v-else
+        small
+        color="grey"
+        :title="$tc('components.generic.lockIcon.doubleClickToUnlock')"
+        :class="{ 'e-shake-lock': shake }"
+        v-on="{ dblclick: iconDblClick, ...on }"
+      >
         mdi-lock
       </v-icon>
     </template>
@@ -30,6 +37,10 @@ export default {
       required: false,
       default: false,
     },
+    shake: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     iconDblClick() {
@@ -43,4 +54,32 @@ export default {
 .v-icon {
   cursor: pointer;
 }
+
+.e-shake-lock {
+  animation: horizontal-shaking 0.5s linear 1;
+}
+
+@keyframes horizontal-shaking {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(5px);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  45% {
+    transform: translateX(4px);
+  }
+  65% {
+    transform: translateX(-4px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index 546ca3d414..5ff011af82 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -10,8 +10,8 @@
 
     <v-btn
       v-if="showButton"
-      :fixed="$vuetify.breakpoint.xs"
-      :absolute="!$vuetify.breakpoint.xs"
+      :fixed="$vuetify.breakpoint.mdAndUp"
+      :absolute="!$vuetify.breakpoint.mdAndUp"
       dark
       fab
       style="z-index: 3"
@@ -103,7 +103,7 @@ export default {
 .fab--bottom_nav {
   position: fixed;
   bottom: calc(16px + 56px + env(safe-area-inset-bottom)) !important;
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
     bottom: calc(16px + 36px + env(safe-area-inset-bottom)) !important;
   }
 }
diff --git a/frontend/src/components/program/picasso/DayResponsibles.vue b/frontend/src/components/program/picasso/DayResponsibles.vue
index 39be01eff3..c734c58285 100644
--- a/frontend/src/components/program/picasso/DayResponsibles.vue
+++ b/frontend/src/components/program/picasso/DayResponsibles.vue
@@ -21,7 +21,7 @@
     persistent-placeholder
     v-bind="$attrs"
     :readonly="readonly"
-    :class="{ 'ec-day-responsible--readonly': readonly }"
+    :class="{ 'e-day-responsible--readonly': readonly }"
     @input="onInput"
   >
     <template #prepend-item>
@@ -81,10 +81,13 @@ export default {
         })
     },
     currentCampCollaborationIRIs() {
-      return this.dayResponsibles.items.map((item) => item.campCollaboration()._meta.self)
+      return (
+        this.dayResponsibles?.items.map((item) => item.campCollaboration()._meta.self) ??
+        []
+      )
     },
     dayResponsibles() {
-      return this.day.dayResponsibles()
+      return this.day?.dayResponsibles()
     },
     campCollaborations() {
       return this.period.camp().campCollaborations()
@@ -170,7 +173,20 @@ export default {
   padding-top: 0;
 }
 
-.ec-day-responsible--readonly:deep(.v-input__append-inner) {
+.e-day-responsible--readonly {
+  &:deep(.v-input__append-inner) {
+    display: none;
+  }
+
+  &:deep(.v-select__selections) {
+    justify-content: center;
+  }
+  &:deep(.v-chip--clickable) {
+    cursor: auto;
+  }
+}
+
+:deep(.v-select__selections) input {
   display: none;
 }
 </style>
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index fcb26d8304..697e20cadc 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -8,12 +8,11 @@ Listing all given activity schedule entries in a calendar view.
       ref="calendar"
       v-model="value"
       v-resize="resize"
-      :class="editable ? 'ec-picasso-editable' : 'ec-picasso'"
+      :class="['e-picasso', editable && 'e-picasso--editable']"
       :events="events"
-      :event-name="getActivityName"
-      :event-color="getActivityColor"
       event-start="startTimestamp"
       event-end="endTimestamp"
+      event-color="transparent"
       :interval-height="computedIntervalHeight"
       interval-width="46"
       :interval-format="intervalFormat"
@@ -38,74 +37,33 @@ Listing all given activity schedule entries in a calendar view.
     >
       <!-- day header -->
       <template #day-label-header="{ date }">
-        <div class="ec-daily_head-day-label">
-          <span v-if="widthPluralization > 0" class="d-block">
-            {{ $date.utc(date).format('dddd') }}
-          </span>
+        <div class="e-picasso-daily_head-day-label">
           {{
-            $date
-              .utc(date)
-              .format(
-                $tc(
-                  'components.program.picasso.picasso.datetime.date',
-                  widthPluralization
-                )
-              )
+            entryWidth > 140
+              ? $date
+                  .utc(date)
+                  .format($tc('components.program.picasso.picasso.datetime.fullDate'))
+              : $date
+                  .utc(date)
+                  .format(
+                    $tc(
+                      'components.program.picasso.picasso.datetime.smallDate',
+                      widthPluralization
+                    )
+                  )
           }}
         </div>
         <day-responsibles :date="date" :period="period" :readonly="!editable" />
       </template>
 
       <!-- template for single scheduleEntry -->
-      <template #event="{ event, timed }">
-        <!-- edit button & dialog -->
-        <dialog-activity-edit
-          v-if="editable && !event.tmpEvent"
-          :ref="`editDialog-${event.id}`"
+      <template #event="{ event }">
+        <PicassoEntry
           :schedule-entry="event"
-          @activityUpdated="reloadScheduleEntries()"
-          @error="reloadScheduleEntries()"
-        >
-          <template #activator="{ on }">
-            <v-btn
-              absolute
-              top
-              right
-              x-small
-              dark
-              text
-              class="ec-event--btn rounded-sm"
-              @click.prevent="on.click"
-              @mousedown.stop=""
-              @mouseup.stop=""
-            >
-              <v-icon x-small>mdi-pencil</v-icon>
-            </v-btn>
-          </template>
-        </dialog-activity-edit>
-
-        <!-- readonly mode: complete div is a HTML link -->
-        <router-link v-if="!editable && !event.tmpEvent" :to="scheduleEntryRoute(event)">
-          <div class="readonlyEntry">
-            <h4 class="v-event-title" :style="{ color: getActivityTextColor(event) }">
-              {{ getActivityName(event) }}
-            </h4>
-          </div>
-        </router-link>
-
-        <!-- edit mode: normal div with drag & drop -->
-        <div v-if="editable" class="editableEntry">
-          <h4 class="v-event-title" :style="{ color: getActivityTextColor(event) }">
-            {{ getActivityName(event) }}
-          </h4>
-
-          <!-- resize handle -->
-          <div
-            v-if="editable && timed"
-            class="v-event-drag-bottom"
-            @mousedown.stop="startResize(event)"
-          />
-        </div>
+          :editable="editable"
+          @startResize="startResize(event)"
+          @finishEdit="reloadScheduleEntries"
+        />
       </template>
     </v-calendar>
 
@@ -116,30 +74,26 @@ Listing all given activity schedule entries in a calendar view.
   </div>
 </template>
 <script>
-import { toRefs, ref, watch, reactive } from 'vue'
-import useDragAndDropMove from './useDragAndDropMove.js'
-import useDragAndDropResize from './useDragAndDropResize.js'
-import useDragAndDropNew from './useDragAndDropNew.js'
-import useClickDetector from './useClickDetector.js'
-import { isCssColor } from 'vuetify/lib/util/colorUtils'
+import Vue, { reactive, ref, toRefs, watch } from 'vue'
+import { useDragAndDropMove } from './useDragAndDropMove.js'
+import { useDragAndDropResize } from './useDragAndDropResize.js'
+import { useDragAndDropNew } from './useDragAndDropNew.js'
+import { useDragAndDropReminder } from './useDragAndDropReminder.js'
 import { apiStore as api } from '@/plugins/store'
-import { scheduleEntryRoute } from '@/router.js'
 import mergeListeners from '@/helpers/mergeListeners.js'
-import { contrastColor } from '@/common/helpers/colors.js'
 import {
   timestampToUtcString,
   utcStringToTimestamp,
 } from '@/common/helpers/dateHelperVCalendar.js'
-
-import DialogActivityEdit from '../DialogActivityEdit.vue'
 import DayResponsibles from './DayResponsibles.vue'
+import { ONE_DAY } from '@/helpers/vCalendarDragAndDrop.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
-import Vue from 'vue'
+import PicassoEntry from './PicassoEntry.vue'
 
 export default {
   name: 'Picasso',
   components: {
-    DialogActivityEdit,
+    PicassoEntry,
     DayResponsibles,
   },
   props: {
@@ -192,10 +146,11 @@ export default {
   // emitted events
   emits: [
     'newEntry', // triggered once when a new entry was created via drag & drop (parameters: startTimestamp, endTimestamp)
+    'unlockReminder', // triggered when we think someone is trying to create/move in non-editable mode
   ],
 
   // composition API setup
-  setup(props, { emit, refs }) {
+  setup(props, { emit }) {
     const { editable, scheduleEntries } = toRefs(props)
 
     const isSaving = ref(false)
@@ -239,13 +194,12 @@ export default {
       }
     }
 
-    // open edit dialog
-    const onClick = (scheduleEntry) => {
-      refs[`editDialog-${scheduleEntry.id}`].open()
+    const showReminder = (move) => {
+      emit('unlockReminder', move)
     }
 
     const calenderStartTimestamp = utcStringToTimestamp(props.start)
-    const calendarEndTimestamp = utcStringToTimestamp(props.end) + 24 * 60 * 60 * 1000
+    const calendarEndTimestamp = utcStringToTimestamp(props.end) + ONE_DAY
 
     const dragAndDropMove = useDragAndDropMove(
       editable,
@@ -261,7 +215,7 @@ export default {
       calendarEndTimestamp
     )
     const dragAndDropNew = useDragAndDropNew(editable, createEntry)
-    const clickDetector = useClickDetector(editable, 5, onClick)
+    const dragAndDropReminder = useDragAndDropReminder(editable, showReminder)
 
     // merge mouseleave handlers
     // this is needed, because .native modifiers doesn't work with v-on property
@@ -277,7 +231,7 @@ export default {
       dragAndDropMove.vCalendarListeners,
       dragAndDropResize.vCalendarListeners,
       dragAndDropNew.vCalendarListeners,
-      clickDetector.vCalendarListeners,
+      dragAndDropReminder.vCalendarListeners,
     ])
 
     // make events a reactive array + load event array from schedule entries
@@ -332,9 +286,9 @@ export default {
   },
   computed: {
     widthPluralization() {
-      if (this.entryWidth < 81) {
+      if (this.entryWidth < 86) {
         return 0
-      } else if (this.entryWidth < 85) {
+      } else if (this.entryWidth < 89) {
         return 1
       } else {
         return 2
@@ -373,52 +327,7 @@ export default {
       this.entryWidth = Math.max(
         (this.$refs.calendar.$el.offsetWidth - widthIntervals) /
           this.$refs.calendar.days.length,
-        80
-      )
-    },
-    getActivityName(scheduleEntry, _) {
-      if (scheduleEntry.tmpEvent) return this.$tc('entity.activity.new')
-
-      if (this.isActivityLoading(scheduleEntry)) return this.$tc('global.loading')
-
-      return (
-        (scheduleEntry.number ? scheduleEntry.number + ' ' : '') +
-        (scheduleEntry.activity().category().short
-          ? scheduleEntry.activity().category().short + ': '
-          : '') +
-        scheduleEntry.activity().title
-      )
-    },
-    getActivityTextColor(scheduleEntry) {
-      if (scheduleEntry.tmpEvent) return '#000'
-      if (this.isCategoryLoading(scheduleEntry)) return '#000'
-
-      const category = scheduleEntry.activity().category()
-      return contrastColor(category.color)
-    },
-    getActivityColor(scheduleEntry, _) {
-      if (scheduleEntry.tmpEvent) return 'grey elevation-4 v-event--temporary'
-
-      if (this.isCategoryLoading(scheduleEntry)) return 'grey lighten-1'
-
-      const color = scheduleEntry.activity().category().color
-      return isCssColor(color) ? color : color + ' elevation-4 v-event--temporary'
-    },
-    isActivityLoading(scheduleEntry) {
-      return (
-        !scheduleEntry.tmpEvent &&
-        (this.activitiesLoading ||
-          this.categoriesLoading ||
-          scheduleEntry.activity()._meta.loading)
-      )
-    },
-    isCategoryLoading(scheduleEntry) {
-      return (
-        !scheduleEntry.tmpEvent &&
-        (this.categoriesLoading ||
-          this.activitiesLoading ||
-          scheduleEntry.activity()._meta.loading ||
-          scheduleEntry.activity().category()._meta.loading)
+        85
       )
     },
     intervalFormat(time) {
@@ -436,15 +345,12 @@ export default {
     weekdayFormat() {
       return ''
     },
-
-    scheduleEntryRoute,
   },
 }
 </script>
 
 <style scoped lang="scss">
-.ec-picasso,
-.ec-picasso-editable {
+.e-picasso {
   border: none;
   overflow: auto;
 
@@ -458,7 +364,7 @@ export default {
   }
 
   @media #{map-get($display-breakpoints, 'sm-and-up')} {
-    height: calc(100vh - 136px);
+    height: calc(100vh - 106px);
   }
 
   @media #{map-get($display-breakpoints, 'md-and-up')} {
@@ -466,129 +372,78 @@ export default {
   }
 
   :deep {
+    .v-event-timed-container {
+      margin-right: 3px;
+      @media #{map-get($display-breakpoints, 'sm-and-up')} {
+        margin-right: 5px;
+      }
+      @media #{map-get($display-breakpoints, 'md-and-up')} {
+        margin-right: 6px;
+      }
+    }
+
     .v-calendar-daily_head-day,
     .v-calendar-daily__day {
       min-width: 80px;
     }
 
     .v-event-timed {
-      padding: 0px;
-      font-size: 11px !important;
+      padding: 0;
       white-space: normal;
-      line-height: 1.15;
-      user-select: none;
-      -webkit-user-select: none;
-
-      // full size div within v-calendar event
-      div.readonlyEntry,
-      div.editableEntry {
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        padding: 1px;
-        overflow: hidden;
-
-        @media #{map-get($display-breakpoints, 'sm-and-up')} {
-          padding: 3px;
-        }
-      }
+      border: none !important;
     }
-  }
-}
 
-/**
- * entry styling in edit mode
- */
-.editableEntry {
-  cursor: move; /* fallback if grab cursor is unsupported */
-  cursor: grab;
-  cursor: -moz-grab;
-  cursor: -webkit-grab;
-  border: 1px black dashed;
-  border-radius: 4px;
-
-  &:active {
-    cursor: move;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-  }
-}
+    .v-calendar-daily__day-container {
+      width: initial;
+    }
 
-.ec-picasso-editable {
-  :deep(.v-event-timed) {
-    transition: transform 0.1s; /* Animation */
-  }
+    .v-calendar-daily__head,
+    .v-calendar-daily__intervals-body {
+      position: sticky;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(4px);
+    }
 
-  :deep(.v-event-timed:hover) {
-    z-index: 999;
-    transform: scale(
-      1.02
-    ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-  }
-}
+    .v-calendar-daily__head {
+      top: 0;
+      z-index: 2;
+      min-width: fit-content;
+      overflow: hidden;
+      box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
+    }
 
-.ec-picasso-editable:deep,
-.ec-picasso:deep {
-  .v-calendar-daily__day-container {
-    width: initial;
-  }
+    .v-calendar-daily__pane,
+    .v-calendar-daily__body {
+      overflow: visible;
+    }
 
-  .v-calendar-daily__head,
-  .v-calendar-daily__intervals-body {
-    position: sticky;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(4px);
-  }
+    .v-calendar-daily__intervals-body {
+      left: 0;
+      z-index: 1;
+    }
 
-  .v-calendar-daily__head {
-    top: 0;
-    z-index: 2;
-    min-width: fit-content;
-    overflow: hidden;
+    .v-calendar-daily__scroll-area {
+      overflow-y: visible;
+    }
   }
 
-  .v-calendar-daily__pane,
-  .v-calendar-daily__body {
-    overflow: visible;
-  }
+  &:not(.e-picasso-entry--editable) {
+    &:deep(.v-calendar-daily_head-day-label) {
+      cursor: auto;
 
-  .v-calendar-daily__intervals-body {
-    left: 0;
-    z-index: 1;
-  }
+      .theme--light.v-text-field > .v-input__control > .v-input__slot {
+        cursor: auto;
 
-  .v-calendar-daily__scroll-area {
-    overflow-y: visible;
+        &:before {
+          border: none !important;
+        }
+      }
+    }
   }
 }
 
-// entry edit button
-.ec-event--btn {
-  padding: 0 !important;
-  min-width: 20px !important;
-  top: 0 !important;
-  right: 0 !important;
-  display: block;
-}
-
-// event title text
-.v-event-title {
-  hyphens: auto;
-  hyphenate-limit-chars: 6 3 3;
-  hyphenate-limit-lines: 2;
-  hyphenate-limit-last: always;
-  hyphenate-limit-zone: 8%;
-}
-
-.readonlyEntry .v-event-title {
-  color: white;
-  text-decoration: none;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-}
-
 // day title
-.ec-daily_head-day-label {
+.e-picasso-daily_head-day-label {
   font-size: 11px;
   font-feature-settings: 'tnum';
   letter-spacing: -0.1px;
@@ -598,6 +453,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 0;
 
   .v-text-field .v-label {
     text-align: center;
@@ -625,10 +481,12 @@ export default {
 
   .v-select__selections {
     gap: 4px;
-    padding: 4px 2px;
+    padding: 2px;
+    @media #{map-get($display-breakpoints, 'md-and-up')} {
+      padding: 4px 2px;
+    }
     width: 100%;
     min-width: initial;
-    justify-content: center;
 
     .v-chip {
       margin: 0;
@@ -643,41 +501,4 @@ export default {
     }
   }
 }
-
-// temporary placeholder (crate new event)
-:deep(.v-event-timed.v-event--temporary) {
-  border-style: dashed !important;
-  opacity: 0.8;
-}
-
-// resize handle
-.v-event-drag-bottom {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 4px;
-  height: 4px;
-  cursor: ns-resize;
-
-  &::after {
-    display: none;
-    position: absolute;
-    left: 50%;
-    height: 4px;
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
-    width: 16px;
-    margin-left: -8px;
-    opacity: 0.8;
-    content: '';
-  }
-}
-
-@media #{map-get($display-breakpoints, 'sm-and-up')} {
-  .v-event-timed {
-    &:hover .v-event-drag-bottom::after {
-      display: block; // resize handle not visible on mobile
-    }
-  }
-}
 </style>
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
new file mode 100644
index 0000000000..708a8a4bc0
--- /dev/null
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -0,0 +1,369 @@
+<template>
+  <!-- edit mode: normal div with drag & drop -->
+  <div
+    v-if="editable"
+    class="e-picasso-entry e-picasso-entry--editable"
+    :class="{
+      'e-picasso-entry--temporary elevation-4 v-event--temporary': scheduleEntry.tmpEvent,
+    }"
+    :style="colorStyles"
+    v-on="listeners"
+  >
+    <!-- edit button & dialog -->
+    <dialog-activity-edit
+      v-if="editable && !scheduleEntry.tmpEvent"
+      ref="editDialog"
+      :schedule-entry="scheduleEntry"
+      @activityUpdated="$emit('finishEdit')"
+      @error="$emit('finishEdit')"
+    >
+      <template #activator="{ on }">
+        <v-btn
+          x-small
+          text
+          class="e-picasso-entry__quickedit rounded-sm pr-0"
+          @click.prevent="on.click"
+          @mousedown.stop=""
+          @mouseup.stop=""
+        >
+          <v-icon x-small color="white">mdi-pencil</v-icon>
+        </v-btn>
+      </template>
+    </dialog-activity-edit>
+
+    <h4 class="e-picasso-entry__title">
+      {{ activityName }}
+    </h4>
+
+    <template v-if="location">
+      <br v-if="!isTinyDuration" />
+      <small
+        ><span class="d-sr-only">{{
+          $tc('components.program.picasso.picassoEntry.location')
+        }}</span>
+        {{ location }}
+      </small>
+    </template>
+    <template v-if="campCollaborationText">
+      <template v-if="clientWidth < 200">
+        <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
+        <br v-if="isLongDuration" />
+        <small
+          ><span class="d-sr-only">{{
+            $tc('components.program.picasso.picassoEntry.responsible')
+          }}</span
+          >{{ campCollaborationText }}</small
+        >
+      </template>
+      <AvatarRow v-else :camp-collaborations="campCollaborations" />
+    </template>
+
+    <!-- resize handle -->
+    <div
+      v-if="editable"
+      class="e-picasso-entry__drag-bottom"
+      @mousedown.stop="$emit('startResize')"
+    />
+  </div>
+
+  <!-- readonly mode: component is a HTML link -->
+  <router-link
+    v-else
+    class="e-picasso-entry e-piasso-entry--link"
+    :to="scheduleEntryRoute"
+    :style="colorStyles"
+  >
+    <h4 class="e-picasso-entry__title">
+      {{ activityName }}
+    </h4>
+    <template v-if="location">
+      <br v-if="!isTinyDuration" />
+      <small
+        ><span class="d-sr-only">{{
+          $tc('components.program.picasso.picassoEntry.location')
+        }}</span>
+        {{ location }}
+      </small>
+    </template>
+    <template v-if="campCollaborationText">
+      <template v-if="clientWidth < 200">
+        <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
+        <br v-if="isLongDuration" />
+        <small
+          ><span class="d-sr-only">{{
+            $tc('components.program.picasso.picassoEntry.responsible')
+          }}</span
+          >{{ campCollaborationText }}</small
+        >
+      </template>
+      <AvatarRow v-else :camp-collaborations="campCollaborations" />
+    </template>
+  </router-link>
+</template>
+<script>
+import { ref, toRefs } from 'vue'
+import DialogActivityEdit from '../DialogActivityEdit.vue'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+import { scheduleEntryRoute } from '@/router.js'
+import { contrastColor } from '@/common/helpers/colors.js'
+import { useClickDetector } from './useClickDetector.js'
+import AvatarRow from '@/components/generic/AvatarRow.vue'
+import { ONE_MINUTE } from '@/helpers/vCalendarDragAndDrop.js'
+
+export default {
+  name: 'PicassoEntry',
+  components: { AvatarRow, DialogActivityEdit },
+  props: {
+    editable: { type: Boolean, required: true },
+    scheduleEntry: { type: Object, required: true },
+  },
+  emits: ['startResize', 'finishEdit'],
+  setup(props) {
+    const { editable } = toRefs(props)
+    const editDialog = ref(null)
+
+    // open edit dialog when clicking, but only if it wasn't a drag motion
+    const { listeners } = useClickDetector(editable, 5, () => {
+      editDialog.value.open()
+    })
+
+    return { listeners, editDialog }
+  },
+  data: () => ({
+    clientWidth: 0,
+    scrollHeight: 0,
+    clientHeight: 0,
+  }),
+  computed: {
+    activity() {
+      return this.scheduleEntry.activity()
+    },
+    category() {
+      return this.activity.category()
+    },
+    activityName() {
+      if (this.scheduleEntry.tmpEvent) return this.$tc('entity.activity.new')
+
+      if (this.activityLoading) return this.$tc('global.loading')
+
+      return (
+        (this.scheduleEntry.number ? this.scheduleEntry.number + ' ' : '') +
+        (this.category.short ? this.category.short + ': ' : '') +
+        this.activity.title
+      )
+    },
+    activityResponsibles() {
+      if (this.scheduleEntry.tmpEvent) return []
+      return this.activity.activityResponsibles().items
+    },
+    campCollaborations() {
+      return this.activityResponsibles.map((item) => item.campCollaboration())
+    },
+    campCollaborationText() {
+      if (this.campCollaborations.length === 0) return ''
+      return this.campCollaborations
+        .map((item) => campCollaborationDisplayName(item))
+        .join(', ')
+    },
+    duration() {
+      return this.scheduleEntry.endTimestamp - this.scheduleEntry.startTimestamp
+    },
+    isTinyDuration() {
+      return this.duration <= 40 * ONE_MINUTE
+    },
+    isLongDuration() {
+      return this.scrollHeight <= this.clientHeight
+    },
+    location() {
+      if (this.scheduleEntry.tmpEvent) return ''
+      return this.activity.location
+    },
+    activityLoading() {
+      return (
+        !this.scheduleEntry.tmpEvent &&
+        (this.activity._meta.loading || this.category._meta.loading)
+      )
+    },
+    activityColor() {
+      if (this.scheduleEntry.tmpEvent) return '#9e9e9e'
+      if (this.category._meta.loading) return '#bdbdbd'
+
+      return this.category.color
+    },
+    activityTextColor() {
+      if (this.scheduleEntry.tmpEvent) return '#000'
+      if (this.category._meta.loading) return '#000'
+
+      return contrastColor(this.category.color)
+    },
+    colorStyles() {
+      return {
+        color: this.activityTextColor,
+        backgroundColor: this.activityColor,
+      }
+    },
+    scheduleEntryRoute() {
+      if (this.scheduleEntry.tmpEvent) return {}
+      return scheduleEntryRoute(this.scheduleEntry)
+    },
+  },
+  mounted() {
+    this.clientWidth = this.$el.clientWidth
+    this.clientHeight = this.$el.clientHeight
+    this.scrollHeight = this.$el.scrollHeight
+    window.addEventListener('resize', this.onResize)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    onResize() {
+      this.clientWidth = this.$el.clientWidth
+      this.clientHeight = this.$el.clientHeight
+      this.scrollHeight = this.$el.scrollHeight
+      this.$nextTick(() => {
+        this.clientHeight = this.$el.clientHeight
+        this.scrollHeight = this.$el.scrollHeight
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.e-picasso-entry {
+  display: block;
+  height: 100%;
+  padding: 1px;
+  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+    padding: 1px 2px;
+  }
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    padding: 2px 3px;
+    line-height: normal;
+  }
+  overflow: hidden;
+  overflow-wrap: break-word;
+  position: relative;
+  border-width: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-radius: 3px;
+  outline: 1px solid white;
+
+  &:hover {
+    z-index: 999;
+  }
+}
+
+@media #{map-get($display-breakpoints, 'sm-and-up')} {
+  .e-picasso-entry {
+    font-size: 12px;
+  }
+}
+
+.e-picasso-entry--editable {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  border-color: black;
+  border-style: dashed;
+  transition: transform 0.1s;
+
+  &:hover {
+    transform: scale(
+      1.02
+    ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+
+  &:active {
+    cursor: move;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+  }
+}
+
+.e-piasso-entry--link {
+  color: currentColor;
+  text-decoration-color: transparent;
+  transition: text-decoration 0.1s ease;
+
+  &:hover {
+    text-decoration-color: currentColor;
+  }
+}
+
+.e-picasso-entry__quickedit {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  max-height: calc(100% + 4px);
+  padding: 0 !important;
+  min-width: 20px !important;
+  border-radius: 0 3px 0 4px !important;
+  z-index: 100;
+}
+
+.e-picasso-entry:hover .e-picasso-entry__quickedit {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.75);
+  &:hover {
+    background-color: black;
+  }
+}
+
+// event title text
+.e-picasso-entry__title {
+  display: inline;
+  hyphens: auto;
+  hyphenate-limit-chars: 6 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 8%;
+}
+
+// resize handle
+.e-picasso-entry__drag-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 8px;
+  max-height: 40%;
+  cursor: ns-resize;
+
+  &::after {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    height: 4px;
+    border-top: 1px solid currentColor;
+    border-bottom: 1px solid currentColor;
+    width: 16px;
+    margin-left: -8px;
+    opacity: 0.8;
+    content: '';
+  }
+}
+
+.e-picasso-entry small {
+  opacity: 0.7;
+  font-size: 11px;
+}
+
+@media #{map-get($display-breakpoints, 'sm-and-up')} {
+  .e-picasso-entry:hover .e-picasso-entry__drag-bottom::after {
+    display: block; // resize handle not visible on mobile
+  }
+}
+
+:deep .e-avatarrow {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  max-height: calc(100% - 4px);
+}
+</style>
diff --git a/frontend/src/components/program/picasso/useClickDetector.js b/frontend/src/components/program/picasso/useClickDetector.js
index dd5463d274..ec25a21f00 100644
--- a/frontend/src/components/program/picasso/useClickDetector.js
+++ b/frontend/src/components/program/picasso/useClickDetector.js
@@ -1,10 +1,11 @@
 /**
  *
- * @param ref(bool) enabled   false disables click detection
- * @param int threshold       max. mouse movement to still detect as a click
+ * @param enabled {Ref<boolean>} false disables click detection
+ * @param threshold {number}     max. mouse movement to still detect as a click
+ * @param onClick {() => void}   run function on click
  * @returns
  */
-export default function useClickDetector(enabled = true, threshold = 5, onClick = null) {
+export function useClickDetector(enabled, threshold = 5, onClick = null) {
   /**
    * internal data (not exposed)
    */
@@ -32,7 +33,7 @@ export default function useClickDetector(enabled = true, threshold = 5, onClick
   /**
    * exposed methods
    */
-  const entryMouseDown = ({ nativeEvent }) => {
+  const entryMouseDown = (nativeEvent) => {
     if (!enabled.value) {
       return
     }
@@ -41,7 +42,7 @@ export default function useClickDetector(enabled = true, threshold = 5, onClick
     startY = nativeEvent.y
   }
 
-  const entryMouseMove = ({ nativeEvent }) => {
+  const entryMouseMove = (nativeEvent) => {
     if (startX === null) {
       return
     }
@@ -52,7 +53,7 @@ export default function useClickDetector(enabled = true, threshold = 5, onClick
     }
   }
 
-  const entryMouseUp = ({ event, nativeEvent }) => {
+  const entryMouseUp = (nativeEvent) => {
     if (startX === null) {
       return
     }
@@ -75,7 +76,7 @@ export default function useClickDetector(enabled = true, threshold = 5, onClick
 
       // onClick callback
       if (onClick !== null) {
-        onClick(event)
+        onClick()
       }
     }
 
@@ -83,10 +84,10 @@ export default function useClickDetector(enabled = true, threshold = 5, onClick
   }
 
   return {
-    vCalendarListeners: {
-      'mousedown:event': entryMouseDown,
-      'mousemove:event': entryMouseMove,
-      'mouseup:event': entryMouseUp,
+    listeners: {
+      mousedown: entryMouseDown,
+      mousemove: entryMouseMove,
+      mouseup: entryMouseUp,
     },
   }
 }
diff --git a/frontend/src/components/program/picasso/useDragAndDropMove.js b/frontend/src/components/program/picasso/useDragAndDropMove.js
index a97d02a126..28bf7c4063 100644
--- a/frontend/src/components/program/picasso/useDragAndDropMove.js
+++ b/frontend/src/components/program/picasso/useDragAndDropMove.js
@@ -1,15 +1,14 @@
 import { toTime, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
- *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
- * @param update function     callback for update actions
- * @param minTimestamp        minimum allowed start timestamp (calendar start)
- * @param maxTimestamp        maximum allowed end timestamp (calender end)
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param threshold {number}     min. mouse movement needed to detect drag & drop
+ * @param update {(scheduleEntry: object, startTime: number, endTime: number) => void} callback for update actions
+ * @param minTimestamp {number}  minimum allowed start timestamp (calendar start)
+ * @param maxTimestamp {number}  maximum allowed end timestamp (calendar end)
  * @returns
  */
-export default function useDragAndDrop(
+export function useDragAndDropMove(
   enabled,
   threshold,
   update,
diff --git a/frontend/src/components/program/picasso/useDragAndDropNew.js b/frontend/src/components/program/picasso/useDragAndDropNew.js
index de9c400b05..e102cc9514 100644
--- a/frontend/src/components/program/picasso/useDragAndDropNew.js
+++ b/frontend/src/components/program/picasso/useDragAndDropNew.js
@@ -1,12 +1,12 @@
-import { toTime, roundTimeUp, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
+import { toTime, roundTimeDown, minMaxTime } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
  *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param createEntry {(startTime:number, endTime:number, finished:boolean) => void}
  * @returns
  */
-export default function useDragAndDrop(enabled, createEntry) {
+export function useDragAndDropNew(enabled, createEntry) {
   /**
    * internal data (not exposed)
    */
@@ -40,9 +40,7 @@ export default function useDragAndDrop(enabled, createEntry) {
 
   // resize placeholder entry
   const resizeEntry = (entry, mouse) => {
-    const mouseRounded = roundTimeUp(mouse)
-    const min = Math.min(mouseRounded, roundTimeDown(mouseStartTimestamp))
-    const max = Math.max(mouseRounded, roundTimeDown(mouseStartTimestamp))
+    const { min, max } = minMaxTime(mouse, mouseStartTimestamp)
 
     entry.startTimestamp = min
     entry.endTimestamp = max
diff --git a/frontend/src/components/program/picasso/useDragAndDropReminder.js b/frontend/src/components/program/picasso/useDragAndDropReminder.js
new file mode 100644
index 0000000000..fe57aba1a8
--- /dev/null
+++ b/frontend/src/components/program/picasso/useDragAndDropReminder.js
@@ -0,0 +1,94 @@
+import { toTime, minMaxTime, ONE_HOUR } from '@/helpers/vCalendarDragAndDrop.js'
+
+/**
+ *
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param showReminder {(move?: boolean) => void} function to show the reminder
+ * @returns
+ */
+export function useDragAndDropReminder(enabled, showReminder) {
+  /**
+   * internal data (not exposed)
+   */
+
+  // temporary placeholder for new schedule entry, when created via drag & drop
+  let mouseStartTimestamp = null
+
+  // true if mousedown event was detected on an entry/event
+  let entryWasClicked = false
+
+  /**
+   * internal methods
+   */
+
+  const clear = () => {
+    mouseStartTimestamp = null
+    entryWasClicked = false
+  }
+
+  /**
+   * exposed methods
+   */
+
+  // triggered with MouseDown event on a calendar entry
+  const entryMouseDown = ({ event: entry, timed, nativeEvent }) => {
+    if (enabled.value) {
+      return
+    }
+
+    // cancel drag & drop if button is not left button
+    if (nativeEvent.button !== 0) {
+      return
+    }
+
+    if (entry && timed) {
+      entryWasClicked = true
+    }
+  }
+
+  // triggered with MouseDown event anywhere on the calendar (independent of clicking on entry or not)
+  const timeMouseDown = (tms, nativeEvent) => {
+    if (enabled.value) {
+      return
+    }
+
+    // cancel drag & drop if button is not left button
+    if (nativeEvent.button !== 0) {
+      return
+    }
+
+    mouseStartTimestamp = toTime(tms)
+  }
+
+  // triggered when mouse is being moved in calendar (independent whether drag & drop is ongoing or not)
+  const timeMouseMove = (tms) => {
+    if (enabled.value || mouseStartTimestamp == null) {
+      return
+    }
+
+    const { min, max } = minMaxTime(mouseStartTimestamp, toTime(tms))
+
+    if (max - min >= ONE_HOUR) {
+      showReminder(entryWasClicked)
+    }
+  }
+
+  // triggered with MouseUp Event anywhere in the calendar
+  const timeMouseUp = () => {
+    if (enabled.value) {
+      return
+    }
+
+    clear()
+  }
+
+  return {
+    vCalendarListeners: {
+      'mousedown:event': entryMouseDown,
+      'mousedown:time': timeMouseDown,
+      'mousemove:time': timeMouseMove,
+      'mouseup:time': timeMouseUp,
+    },
+    nativeMouseLeave: clear,
+  }
+}
diff --git a/frontend/src/components/program/picasso/useDragAndDropResize.js b/frontend/src/components/program/picasso/useDragAndDropResize.js
index 2abca2d648..9f4e319f7d 100644
--- a/frontend/src/components/program/picasso/useDragAndDropResize.js
+++ b/frontend/src/components/program/picasso/useDragAndDropResize.js
@@ -1,14 +1,14 @@
-import { toTime, roundTimeUp, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
+import { toTime, minMaxTime } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
  *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
- * @param minTimestamp        minimum allowed start timestamp (calendar start)
- * @param maxTimestamp        maximum allowed end timestamp (calender end)
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param update {(scheduleEntry: object, startTime: number, endTime: number) => void} callback for update actions
+ * @param minTimestamp {number}  minimum allowed start timestamp (calendar start)
+ * @param maxTimestamp {number}  maximum allowed end timestamp (calendar end)
  * @returns
  */
-export default function useDragAndDrop(enabled, update, minTimestamp, maxTimestamp) {
+export function useDragAndDropResize(enabled, update, minTimestamp, maxTimestamp) {
   /**
    * internal data (not exposed)
    */
@@ -28,9 +28,7 @@ export default function useDragAndDrop(enabled, update, minTimestamp, maxTimesta
 
   // resize an entry (existing or new placeholder)
   const resizeEntry = (entry, mouse) => {
-    const mouseRounded = roundTimeUp(mouse)
-    const newStart = Math.min(mouseRounded, roundTimeDown(originalStartTimestamp))
-    const newEnd = Math.max(mouseRounded, roundTimeDown(originalStartTimestamp))
+    const { min: newStart, max: newEnd } = minMaxTime(originalStartTimestamp, mouse)
 
     if (newStart >= minTimestamp && newEnd <= maxTimestamp && newEnd - newStart > 0) {
       // TODO review: Here we're changing the store value directly.
diff --git a/frontend/src/components/user/UserAvatar.vue b/frontend/src/components/user/UserAvatar.vue
index 8b2259f75d..246cf2df0f 100644
--- a/frontend/src/components/user/UserAvatar.vue
+++ b/frontend/src/components/user/UserAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :size="size" :color="color">
+  <v-avatar :size="size" :color="color" :title="displayName" v-bind="$attrs">
     <span class="d-sr-only">{{ displayName }}</span>
     <span aria-hidden="true" :style="style">{{ initials }}</span>
   </v-avatar>
@@ -12,6 +12,7 @@ import {
   campCollaborationColor,
   defaultColor,
 } from '@/common/helpers/colors.js'
+import { range } from '@/common/helpers/interpolation.js'
 import userInitials from '@/common/helpers/userInitials.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import userDisplayName from '@/common/helpers/userDisplayName.js'
@@ -51,10 +52,18 @@ export default {
         ? userDisplayName(this.user)
         : campCollaborationDisplayName(this.campCollaboration, this.$tc.bind(this))
     },
+    /**
+     * Font size of small avatars should be half the size,
+     * bigger avatars should have more visual padding
+     */
+    fontSize() {
+      const ratio = range(16, 32, 2, 2.3, Number(this.size))
+      return Number(this.size) / ratio
+    },
     style() {
       return {
         color: contrastColor(this.color),
-        fontSize: Number(this.size) / 2.4 + 'px',
+        fontSize: `${this.fontSize}px`,
         fontWeight: Number(this.size) > 44 ? 450 : Number(this.size) > 24 ? 500 : 600,
         letterSpacing: Number(this.size) < 24 ? '.05em' : 0,
         marginRight: Number(this.size) < 24 ? '-.125em' : 0,
diff --git a/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
new file mode 100644
index 0000000000..525cfcef46
--- /dev/null
+++ b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
@@ -0,0 +1,100 @@
+import {
+  toTime,
+  roundTimeDown,
+  roundTimeUp,
+  minMaxTime,
+} from '@/helpers/vCalendarDragAndDrop.js'
+
+describe('toTime', () => {
+  it.each([
+    [
+      {
+        date: '2023-05-08',
+        time: '14:13',
+        year: 2023,
+        month: 5,
+        day: 8,
+        weekday: 1,
+        hour: 14,
+        minute: 13,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1683555180000,
+    ],
+    [
+      {
+        date: '2023-05-07',
+        time: '10:20',
+        year: 2023,
+        month: 5,
+        day: 7,
+        weekday: 0,
+        hour: 10,
+        minute: 20,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1683454800000,
+    ],
+    [
+      {
+        date: '2022-04-05',
+        time: '22:22',
+        year: 2022,
+        month: 4,
+        day: 5,
+        weekday: 5,
+        hour: 22,
+        minute: 22,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1649197320000,
+    ],
+  ])('maps %p to %p', (input, expected) => {
+    expect(toTime(input)).toEqual(expected)
+  })
+})
+
+describe('roundTimeDown', () => {
+  it.each([
+    [1649190120000, 1649189700000],
+    [1683447600000, 1683447300000],
+    [1683543980000, 1683543600000],
+    [1683547980999, 1683547200000],
+  ])('maps %p to %p', (input, expected) => {
+    expect(roundTimeDown(input)).toEqual(expected)
+  })
+})
+
+describe('roundTimeUp', () => {
+  it.each([
+    [1649190120000, 1649190600000],
+    [1683447600000, 1683448200000],
+    [1683543980000, 1683544500000],
+    [1683547980999, 1683548100000],
+  ])('maps %p to %p', (input, expected) => {
+    expect(roundTimeUp(input)).toEqual(expected)
+  })
+})
+
+describe('minMaxTime', () => {
+  it.each([
+    [[1649190120000, 1639190120000], { min: 1639190700000, max: 1649189700000 }],
+    [[1683447600000, 1683427600000], { min: 1683428400000, max: 1683447300000 }],
+    [[1683543980000, 1683546980000], { min: 1683543600000, max: 1683547200000 }],
+    [[1683547980999, 1683597980999], { min: 1683547200000, max: 1683598500000 }],
+  ])('maps %p to %p', (input, expected) => {
+    expect(minMaxTime(...input)).toEqual(expected)
+  })
+})
diff --git a/frontend/src/helpers/vCalendarDragAndDrop.js b/frontend/src/helpers/vCalendarDragAndDrop.js
index c8f1864d8f..6418f82923 100644
--- a/frontend/src/helpers/vCalendarDragAndDrop.js
+++ b/frontend/src/helpers/vCalendarDragAndDrop.js
@@ -21,4 +21,16 @@ const roundTimeUp = (time) => {
   return time + (roundDownTime - (time % roundDownTime))
 }
 
-export { toTime, roundTimeDown, roundTimeUp }
+const minMaxTime = (start, end) => {
+  const startCeil = roundTimeUp(end)
+  return {
+    min: Math.min(startCeil, roundTimeDown(start)),
+    max: Math.max(startCeil, roundTimeDown(start)),
+  }
+}
+
+const ONE_MINUTE = 60 * 1000
+const ONE_HOUR = 60 * ONE_MINUTE
+const ONE_DAY = 24 * ONE_HOUR
+
+export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_MINUTE, ONE_HOUR, ONE_DAY }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index c1e7160ce2..92484a6036 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -131,7 +131,8 @@
     },
     "generic": {
       "lockIcon": {
-        "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff"
+        "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff",
+        "doubleClickToUnlock": "Doppelklick um zu entsperren"
       }
     },
     "layout": {
@@ -244,8 +245,13 @@
       "picasso": {
         "picasso": {
           "datetime": {
-            "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
+            "fullDate": "dd, DD. MMMM YYYY",
+            "smallDate": "dd, D.MM. | dd, D. MMM | dd, D. MMM YY"
           }
+        },
+        "picassoEntry": {
+          "location": "Ort:",
+          "responsible": "Verantwortlich: "
         }
       }
     },
@@ -398,6 +404,12 @@
         "collaborators": "Team verwalten",
         "title": "Admin"
       },
+      "campProgram": {
+        "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
+        "reminderLockedCreate": "Ziehen zum Erstellen ist nur im entsperrten Modus möglich.",
+        "reminderLockedMove": "Ziehen zum Verschieben ist nur im entsperrten Modus möglich.",
+        "title": "Grobprogramm"
+      },
       "collaborators": {
         "email": "E-Mail-Adresse",
         "inactiveCollaborators": "Inaktiv",
@@ -485,10 +497,6 @@
           }
         }
       },
-      "campProgram": {
-        "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
-        "title": "Grobprogramm"
-      },
       "print": {
         "title": "Lager drucken"
       },
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c8fdb8e8bb..bec7c87976 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -79,11 +79,11 @@
       "dialogMaterialListCreate": {
         "title": "Create material list"
       },
-      "dialogPeriodEdit": {
-        "moveScheduleEntries": "Move schedule entries"
-      },
       "dialogPeriodCreate": {
         "title": "Create period"
+      },
+      "dialogPeriodEdit": {
+        "moveScheduleEntries": "Move schedule entries"
       }
     },
     "collaborator": {
@@ -131,6 +131,7 @@
     },
     "generic": {
       "lockIcon": {
+        "doubleClickToUnlock": "Double click to unlock",
         "guestsCannotEdit": "Guests have no permission to edit"
       }
     },
@@ -229,8 +230,13 @@
       "picasso": {
         "picasso": {
           "datetime": {
-            "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
+            "fullDate": "ddd, DD. MMMM YYYY",
+            "smallDate": "dd, D.MM. | dd, D. MMM | ddd, D. MMM YY"
           }
+        },
+        "picassoEntry": {
+          "location": "Location:",
+          "responsible": "Responsible: "
         }
       }
     },
@@ -383,6 +389,12 @@
         "collaborators": "Manage Team",
         "title": "Admin"
       },
+      "campProgram": {
+        "guestsCannotEdit": "A guest cannot edit the picasso",
+        "reminderLockedCreate": "Drag to create is only possible in unlocked mode.",
+        "reminderLockedMove": "Drag to move is only possible in unlocked mode.",
+        "title": "Picasso"
+      },
       "collaborators": {
         "email": "Email address",
         "inactiveCollaborators": "Inactive",
@@ -470,10 +482,6 @@
           }
         }
       },
-      "campProgram": {
-        "guestsCannotEdit": "A guest cannot edit the picasso",
-        "title": "Picasso"
-      },
       "print": {
         "title": "Print camp"
       },
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index bb30f0971b..e10b7e9135 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -57,6 +57,12 @@
       },
       "formScheduleEntryList": {
         "name": "Prévu"
+      },
+      "picasso": {
+        "picassoEntry": {
+          "location": "Location:",
+          "responsible": "Responsabile:"
+        }
       }
     },
     "toast": {
@@ -89,8 +95,8 @@
       "content": "Contenu",
       "create": "Créer",
       "delete": "Effacer",
-      "login": "Se connecter",
       "edit": "Éditer",
+      "login": "Se connecter",
       "ok": "D'accord",
       "open": "Ouvrir",
       "save": "Sauvegarder",
@@ -121,6 +127,7 @@
         "beta": {
           "notice": "Voici le site du nouveau eCamp.<br>IMPORTANT : Ce site est en construction. Cela signifie que toutes les données sont publiques et seront supprimées périodiquement !"
         },
+        "email": "Courriel",
         "loginCallback": {
           "loginInProgress": "Vous serez connecté"
         },
@@ -133,8 +140,7 @@
           "jubladb": "Jubla",
           "midata": "MiData"
         },
-        "registernow": "Inscrivez-vous maintenant",
-        "email": "Courriel"
+        "registernow": "Inscrivez-vous maintenant"
       },
       "register": {
         "acceptTermsOfUse": "Accepter les conditions d'utilisation",
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index 4b6b118c99..bc7740a3c3 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -57,6 +57,12 @@
       },
       "formScheduleEntryList": {
         "name": "Programmato"
+      },
+      "picasso": {
+        "picassoEntry": {
+          "location": "Luogo:",
+          "responsible": "Responsable:"
+        }
       }
     },
     "toast": {
@@ -121,6 +127,7 @@
         "beta": {
           "notice": "Questo è il sito del nuovo eCamp.<br>IMPORTANTE: Questo sito è in costruzione. Ciò significa che tutti i dati sono pubblici e verranno periodicamente cancellati!"
         },
+        "email": "Indirizzo e-mail",
         "loginCallback": {
           "loginInProgress": "Sarai loggato"
         },
@@ -133,8 +140,7 @@
           "jubladb": "JublaDB",
           "midata": "MiData"
         },
-        "registernow": "Iscriviti ora",
-        "email": "Indirizzo e-mail"
+        "registernow": "Iscriviti ora"
       },
       "register": {
         "acceptTermsOfUse": "Accettare le condizioni di utilizzo",
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index a4fcdf374b..7baef63c96 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -99,6 +99,10 @@ body {
   display: flow-root;
 }
 
+.currentColor--text {
+  color: currentColor !important;
+}
+
 .e-button-container {
   display: flex;
   flex-wrap: wrap;
diff --git a/frontend/src/views/NavigationDefault.vue b/frontend/src/views/NavigationDefault.vue
index b569a97963..017e0771c9 100644
--- a/frontend/src/views/NavigationDefault.vue
+++ b/frontend/src/views/NavigationDefault.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app-bar
-    v-if="$vuetify.breakpoint.smAndUp"
+    v-if="$vuetify.breakpoint.mdAndUp"
     app
     clipped-left
     color="blue-grey darken-4"
diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
index b3e80909ad..94398f7c69 100644
--- a/frontend/src/views/camp/CampProgram.vue
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -9,6 +9,7 @@ Show all activity schedule entries of a single period.
       <v-spacer />
       <LockIcon
         v-model="editMode"
+        :shake="showReminder"
         :hide-tooltip="isContributor"
         :message="$tc('views.camp.campProgram.guestsCannotEdit')"
         @dblclick="editMode = !editMode"
@@ -44,10 +45,15 @@ Show all activity schedule entries of a single period.
             :end="period().end"
             :editable="editMode"
             @newEntry="slotProps.on.newEntry"
+            @unlockReminder="showUnlockReminder"
           />
         </template>
       </template>
     </schedule-entries>
+    <v-snackbar v-model="showReminder" light class="mb-12">
+      <v-icon>mdi-lock</v-icon>
+      {{ reminderText }}
+    </v-snackbar>
   </content-card>
 </template>
 <script>
@@ -80,6 +86,8 @@ export default {
   data() {
     return {
       editMode: false,
+      showReminder: false,
+      reminderText: null,
     }
   },
   computed: {
@@ -103,5 +111,13 @@ export default {
       }
     },
   },
+  methods: {
+    showUnlockReminder(move) {
+      this.reminderText = move
+        ? this.$tc('views.camp.campProgram.reminderLockedMove')
+        : this.$tc('views.camp.campProgram.reminderLockedCreate')
+      this.showReminder = true
+    },
+  },
 }
 </script>
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 11784ec52b..536ec29693 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -19,11 +19,12 @@
             :label="$tc('views.camp.dashboard.responsible')"
           >
             <template #item="{ item }">
-              <UserAvatar
-                :camp-collaboration="campCollaborations[item.value]"
-                size="18"
-                class="mr-1"
-              />
+              <TextAlignBaseline class="mr-1">
+                <UserAvatar
+                  :camp-collaboration="campCollaborations[item.value]"
+                  size="20"
+                />
+              </TextAlignBaseline>
               {{ item.text }}
             </template>
           </SelectFilter>
@@ -182,6 +183,7 @@ import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 import { keyBy, groupBy, mapValues } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'
+import TextAlignBaseline from '@/components/layout/TextAlignBaseline.vue'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
@@ -190,6 +192,7 @@ function filterEquals(arr1, arr2) {
 export default {
   name: 'Dashboard',
   components: {
+    TextAlignBaseline,
     FilterDivider,
     ActivityRow,
     SelectFilter,
diff --git a/frontend/src/views/camp/navigation/NavigationCamp.vue b/frontend/src/views/camp/navigation/NavigationCamp.vue
index bd15178105..16112f7a16 100644
--- a/frontend/src/views/camp/navigation/NavigationCamp.vue
+++ b/frontend/src/views/camp/navigation/NavigationCamp.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavTopbar v-if="$vuetify.breakpoint.smAndUp" :camp="camp" />
+  <NavTopbar v-if="$vuetify.breakpoint.mdAndUp" :camp="camp" />
   <div v-else>
     <NavBottombar :camp="camp" @input="open = $event" />
     <NavSidebar v-model="open" :camp="camp" />