diff --git a/src/App.vue b/src/App.vue
index 0d08b4d637..16c566ba37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -129,8 +129,6 @@ onUnmounted(() => {
 .app-content {
 	display: flex;
 	flex-direction: column;
-	padding: 0px 8px;
-	row-gap: 8px;
 
 	.clamped {
 		display: -webkit-box !important;
diff --git a/src/components/Base/modules/HeaderBar.vue b/src/components/Base/modules/HeaderBar.vue
index f241d900c5..c647c0e3a2 100644
--- a/src/components/Base/modules/HeaderBar.vue
+++ b/src/components/Base/modules/HeaderBar.vue
@@ -43,7 +43,6 @@ function toggleClamp() {
 }
 
 .header_bar {
-	margin-inline: -8px;
 	padding-inline: 56px 8px;
 	background-color: var(--color-main-background);
 	transition: all var(--animation-slow) linear;
@@ -88,7 +87,7 @@ function toggleClamp() {
 	}
 
 	.header_bar_bottom {
-		margin-bottom: 1rem;
+		padding-bottom: 1rem;
 	}
 
 	[class*='bar_'] {
diff --git a/src/components/Base/modules/IntersectionObserver.vue b/src/components/Base/modules/IntersectionObserver.vue
index 067b39c98e..790a0fd034 100644
--- a/src/components/Base/modules/IntersectionObserver.vue
+++ b/src/components/Base/modules/IntersectionObserver.vue
@@ -8,6 +8,12 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
 // const model = ref(false)
+interface Props {
+	orientation?: 'horizontal' | 'vertical'
+	loading?: boolean
+}
+const { orientation = 'horizontal', loading = false } = defineProps<Props>()
+
 const model = defineModel<boolean>()
 
 const observer = ref<null | IntersectionObserver>(null)
@@ -15,8 +21,6 @@ const observer = ref<null | IntersectionObserver>(null)
 const observerTarget = ref<null | Element>(null)
 const emit = defineEmits(['visible', 'invisible'])
 
-const { loading = false } = defineProps<{ loading?: boolean }>()
-
 onMounted(() => {
 	const observer = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
@@ -41,8 +45,26 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<div ref="observerTarget">
+	<div
+		ref="observerTarget"
+		:class="{
+			'horizontal-fixed': orientation === 'horizontal',
+			'vertical-fixed': orientation === 'vertical',
+		}">
 		<NcLoadingIcon v-if="loading" :size="15" />
 		<slot v-else :in-viewport="model" />
 	</div>
 </template>
+
+<style lang="css" scoped>
+.vertical-fixed {
+	position: sticky;
+	top: 0;
+	height: 100%;
+}
+.horizontal-fixed {
+	position: sticky;
+	left: 0;
+	width: 100%;
+}
+</style>
diff --git a/src/components/Base/modules/StickyDiv.vue b/src/components/Base/modules/StickyDiv.vue
index 2c5b10833d..e14b7f9a5d 100644
--- a/src/components/Base/modules/StickyDiv.vue
+++ b/src/components/Base/modules/StickyDiv.vue
@@ -7,19 +7,48 @@
 import { computed } from 'vue'
 
 interface Props {
-	stickyTop?: boolean
-	stickyLeft?: boolean
 	activateBottomShadow?: boolean
 	activateRightShadow?: boolean
+	stickyTop?: boolean
+	stickyLeft?: boolean
+	zIndex?: number
 }
 
 const {
-	stickyTop = false,
-	stickyLeft = false,
 	activateBottomShadow = false,
 	activateRightShadow = false,
+	stickyTop = false,
+	stickyLeft = false,
+	zIndex = undefined,
 } = defineProps<Props>()
 
+const style = computed(() => {
+	if (zIndex !== undefined && zIndex !== null) {
+		return {
+			'z-index': zIndex,
+		}
+	}
+	if (stickyTop && stickyLeft) {
+		return {
+			'z-index': 6,
+		}
+	}
+
+	if (stickyLeft) {
+		return {
+			'z-index': 5,
+		}
+	}
+
+	if (stickyTop) {
+		return {
+			'z-index': 4,
+		}
+	}
+
+	return {}
+})
+
 const stickyClass = computed(() => ({
 	container: true,
 	'sticky-top': stickyTop,
@@ -30,7 +59,7 @@ const stickyClass = computed(() => ({
 </script>
 
 <template>
-	<div :class="stickyClass">
+	<div :class="stickyClass" :style="style">
 		<slot name="default">
 			<div class="inner"></div>
 		</slot>
@@ -51,14 +80,12 @@ const stickyClass = computed(() => ({
 .sticky-left {
 	position: sticky;
 	left: 0;
-	z-index: 5;
 }
 
 .sticky-top {
 	--shadow-height: 10px;
 	position: sticky;
 	top: 0;
-	z-index: 4;
 	padding-bottom: 0px;
 	padding-bottom: var(--shadow-height);
 
@@ -89,10 +116,6 @@ const stickyClass = computed(() => ({
 	}
 }
 
-.sticky-top.sticky-left {
-	z-index: 7;
-}
-
 /* TODO: Implement sticky right shadow
 	An Alternative could be using a grid instead of ::after
 	to be able to position multiple shadows in all directions */
diff --git a/src/components/VoteTable/VoteColumn.vue b/src/components/VoteTable/VoteColumn.vue
index d04eecb0b4..9303b4a8b5 100644
--- a/src/components/VoteTable/VoteColumn.vue
+++ b/src/components/VoteTable/VoteColumn.vue
@@ -12,6 +12,7 @@ import OptionItem from '../Options/OptionItem.vue'
 import VoteItem from './VoteItem.vue'
 import CalendarPeek from '../Calendar/CalendarPeek.vue'
 import { usePollStore } from '../../stores/poll.ts'
+import { useVotesStore } from '../../stores/votes.ts'
 import { usePreferencesStore } from '../../stores/preferences.ts'
 import { Option } from '../../stores/options.ts'
 import OptionMenu from '../Options/OptionMenu.vue'
@@ -19,6 +20,7 @@ import OptionMenu from '../Options/OptionMenu.vue'
 const { option } = defineProps<{ option: Option }>()
 
 const pollStore = usePollStore()
+const votesStore = useVotesStore()
 const preferencesStore = usePreferencesStore()
 
 const componentClass = computed(() => {
@@ -65,7 +67,7 @@ const showCalendarPeek = computed(
 		</div>
 
 		<VoteItem
-			v-for="participant in pollStore.safeParticipants"
+			v-for="participant in votesStore.getChunkedParticipants"
 			:key="participant.id"
 			:user="participant"
 			:option="option" />
diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue
index 4424a86ff1..17c6e34f21 100644
--- a/src/components/VoteTable/VoteTable.vue
+++ b/src/components/VoteTable/VoteTable.vue
@@ -39,7 +39,7 @@ const { downPage = false } = defineProps<{ downPage: boolean }>()
 const chunksLoading = ref(false)
 
 const tableStyle = computed(() => ({
-	'--participants-count': `${pollStore.safeParticipants.length}`,
+	'--participants-count': `${votesStore.getChunkedParticipants.length}`,
 	'--options-count': `${optionsStore.options.length}`,
 }))
 
@@ -73,7 +73,7 @@ function isVotable(participant: User, option: Option) {
 		class="vote-table"
 		:style="tableStyle">
 		<StickyDiv
-			v-if="pollStore.viewMode === 'table-view'"
+			v-show="pollStore.viewMode === 'table-view'"
 			key="grid-info"
 			sticky-left
 			class="grid-info">
@@ -90,7 +90,7 @@ function isVotable(participant: User, option: Option) {
 		</StickyDiv>
 
 		<StickyDiv
-			v-if="pollStore.viewMode === 'table-view'"
+			v-show="pollStore.viewMode === 'table-view'"
 			:id="`option-item-spacer`"
 			class="option-item-spacer"
 			sticky-top
@@ -100,11 +100,12 @@ function isVotable(participant: User, option: Option) {
 
 		<StickyDiv
 			v-if="pollStore.permissions.seeResults"
+			v-show="pollStore.viewMode === 'table-view'"
 			sticky-left
 			class="counter-spacer" />
 
 		<StickyDiv
-			v-for="participant in pollStore.safeParticipants"
+			v-for="participant in votesStore.getChunkedParticipants"
 			:key="participant.id"
 			class="participant"
 			sticky-left>
@@ -112,7 +113,9 @@ function isVotable(participant: User, option: Option) {
 		</StickyDiv>
 
 		<template v-for="option in optionsStore.orderedOptions" :key="option.id">
-			<div v-if="pollStore.viewMode === 'table-view'" class="option-menu-grid">
+			<div
+				v-show="pollStore.viewMode === 'table-view'"
+				class="option-menu-grid">
 				<CalendarPeek
 					v-if="showCalendarPeek"
 					:id="`peek-${option.id}`"
@@ -131,7 +134,7 @@ function isVotable(participant: User, option: Option) {
 			<StickyDiv
 				:id="`option-item-${option.id}`"
 				class="option-item"
-				sticky-top
+				:sticky-top="pollStore.viewMode === 'table-view'"
 				:activate-bottom-shadow="!downPage">
 				<OptionItem :option="option" />
 			</StickyDiv>
@@ -144,7 +147,7 @@ function isVotable(participant: User, option: Option) {
 				:option="option" />
 
 			<div
-				v-for="participant in pollStore.safeParticipants"
+				v-for="participant in votesStore.getChunkedParticipants"
 				:key="participant.id"
 				class="vote-cell"
 				:class="{ 'current-user': isCurrentUser(participant) }">
@@ -175,6 +178,7 @@ function isVotable(participant: User, option: Option) {
 	grid-auto-rows: auto;
 	grid-auto-flow: column;
 	overflow: scroll;
+	margin: auto;
 
 	.vote-cell {
 		padding: 0.4rem;
@@ -192,6 +196,11 @@ function isVotable(participant: User, option: Option) {
 			visibility: hidden;
 		}
 
+		&.sticky-left {
+			left: -8px;
+			padding-left: 8px;
+		}
+
 		&:hover {
 			background: var(--color-background-hover);
 
@@ -223,7 +232,6 @@ function isVotable(participant: User, option: Option) {
 		overflow: visible;
 		min-width: min-content;
 		max-width: max-content;
-		margin: auto;
 		.grid-info {
 			grid-row: 1;
 			grid-column: 1;
@@ -295,14 +303,15 @@ function isVotable(participant: User, option: Option) {
 	}
 
 	&.list-view {
-		grid-template-columns: auto 5rem 5rem;
+		row-gap: 8px;
+		grid-template-columns:
+			minmax(11rem, max-content)
+			minmax(4rem, max-content)
+			minmax(4rem, max-content);
 		max-width: var(--cap-width);
+		width: fit-content;
 
-		.grid-info,
-		.option-spacer,
-		.counter-spacer,
-		.participant,
-		.option-menu-grid {
+		.participant {
 			display: none;
 		}
 
diff --git a/src/stores/poll.ts b/src/stores/poll.ts
index a529a84b4d..40cc726852 100644
--- a/src/stores/poll.ts
+++ b/src/stores/poll.ts
@@ -263,15 +263,6 @@ export const usePollStore = defineStore('poll', {
 			return [noString, 'yes']
 		},
 
-		safeParticipants(): User[] {
-			const sessionStore = useSessionStore()
-			const votesStore = useVotesStore()
-			if (this.viewMode === 'list-view') {
-				return [sessionStore.currentUser]
-			}
-			return votesStore.getChunkedParticipants
-		},
-
 		getProposalsOptions(): {
 			value: AllowProposals
 			label: string
diff --git a/src/stores/votes.ts b/src/stores/votes.ts
index f96c1651bf..477396a9c3 100644
--- a/src/stores/votes.ts
+++ b/src/stores/votes.ts
@@ -94,6 +94,12 @@ export const useVotesStore = defineStore('votes', {
 		 * @return
 		 */
 		getChunkedParticipants(state): User[] {
+			const sessionStore = useSessionStore()
+			const pollStore = usePollStore()
+			if (pollStore.viewMode === 'list-view') {
+				return [sessionStore.currentUser]
+			}
+
 			if (
 				this.participants.length > state.meta.chunks.size
 				&& this.participants.length
diff --git a/src/views/Vote.vue b/src/views/Vote.vue
index c36bc1d8de..10cb3787e5 100644
--- a/src/views/Vote.vue
+++ b/src/views/Vote.vue
@@ -42,9 +42,9 @@ const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const preferencesStore = usePreferencesStore()
 const votesStore = useVotesStore()
-const voteMainId = 'watched-scroll-area'
+const voteMainId = 'vote-view'
 const topObserverVisible = ref(false)
-const tableSticky = ref(false)
+const tableObserverVisible = ref(false)
 const chunksLoading = ref(false)
 
 const loadingOverlayProps = {
@@ -112,7 +112,19 @@ const collapsibleProps = computed<CollapsibleProps>(() => ({
 	initialState: pollStore.currentUserStatus.countVotes === 0 ? 'max' : 'min',
 }))
 
-const scrolled = computed(() => !topObserverVisible.value && tableSticky.value)
+/*
+ * In table-view, the sticky header bar and the vote header should merge
+ * to a single header bar, once the vote header reaches it's sticky position ,too
+ */
+const mergeHeaders = computed(
+	() => pollStore.viewMode === 'table-view' && !tableObserverVisible.value,
+)
+
+/*
+ * Report scrolled, if the table observer is not visible except the headers
+ * are merged
+ */
+const scrolled = computed(() => !topObserverVisible.value && !mergeHeaders.value)
 
 const showBottomObserver = computed(
 	() =>
@@ -152,7 +164,7 @@ const appClass = computed(() => [
 
 <template>
 	<NcAppContent :class="appClass">
-		<StickyDiv sticky-top :activate-bottom-shadow="scrolled">
+		<StickyDiv :z-index="9" sticky-top :activate-bottom-shadow="scrolled">
 			<HeaderBar>
 				<template #title>
 					{{ pollStore.configuration.title }}
@@ -166,32 +178,30 @@ const appClass = computed(() => [
 			</HeaderBar>
 		</StickyDiv>
 
-		<div class="vote_main">
+		<div class="vote-main">
 			<IntersectionObserver id="top-observer" v-model="topObserverVisible" />
-
 			<Collapsible
 				v-if="pollStore.configuration.description"
-				class="sticky-left"
+				class="sticky-left area__top"
 				v-bind="collapsibleProps">
 				<MarkDownDescription />
 			</Collapsible>
 
-			<VoteInfoCards class="sticky-left" />
+			<VoteInfoCards class="sticky-left area__top" />
 
 			<IntersectionObserver
 				v-if="pollStore.viewMode === 'table-view'"
 				id="table-observer"
-				v-model="tableSticky"
-				class="sticky-left" />
+				v-model="tableObserverVisible" />
 
 			<VoteTable
 				v-show="optionsStore.options.length"
-				:down-page="tableSticky" />
+				class="area__vote"
+				:down-page="tableObserverVisible" />
 
 			<IntersectionObserver
 				v-if="showBottomObserver"
 				id="bottom-observer"
-				class="sticky-left"
 				:loading="chunksLoading"
 				@visible="loadChunks">
 				<div class="clickable_load_more" @click="loadChunks">
@@ -242,13 +252,13 @@ const appClass = computed(() => [
 	left: 70px;
 }
 
-.table-view .vote_main {
+.vote-main {
 	flex: 1;
 	overflow: auto;
 	overscroll-behavior-inline: contain;
-}
+	position: relative;
+	top: -8px;
 
-.vote_main {
 	.markdown-description {
 		margin: auto;
 		max-width: var(--cap-width);
@@ -257,23 +267,11 @@ const appClass = computed(() => [
 	& > * {
 		margin-top: 0.5rem;
 	}
-}
 
-.vote_head {
-	display: flex;
-	flex-wrap: wrap-reverse;
-	justify-content: flex-end;
-	.poll-title {
-		flex: 1 270px;
-	}
-}
-
-.top_area {
-	display: flex;
-	flex-wrap: wrap-reverse;
-	.description_container,
-	.cards_container {
-		flex: 1 50rem;
+	.area__footer,
+	.area__top,
+	.list-view.area__vote {
+		padding: 0 8px;
 	}
 }
 
@@ -283,12 +281,6 @@ const appClass = computed(() => [
 	height: 44px;
 }
 
-.card-with-action {
-	display: flex;
-	align-items: center;
-	column-gap: 8px;
-}
-
 .left-card-side {
 	flex: 1;
 }