diff --git a/CHANGELOG.md b/CHANGELOG.md
index c672b14cd6..507e26a312 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
  - Add forced display mode to poll configuration
 ### Changed
  - Updated job control for the administration
+ - Refactored some elements flex to grid
 
 ## [8.5.0] - 2025-10-03
 ### Fixed
diff --git a/src/components/Base/modules/ConfigBox.vue b/src/components/Base/modules/ConfigBox.vue
index f8545cf5ae..5090c80d80 100644
--- a/src/components/Base/modules/ConfigBox.vue
+++ b/src/components/Base/modules/ConfigBox.vue
@@ -17,14 +17,12 @@ const { name, info = '', indented = false } = defineProps<Props>()
 
 <template>
 	<div class="config-box">
-		<div class="config-box__header">
-			<slot name="icon" />
-			<div :title="info" :class="['config-box__title', { indented }]">
-				{{ name }}
-				<InformationIcon v-if="info" />
-			</div>
-			<slot name="actions" />
+		<slot name="icon" />
+		<div :title="info" :class="['config-box__title', { indented }]">
+			{{ name }}
+			<InformationIcon v-if="info" />
 		</div>
+		<slot name="actions" />
 		<div class="config-box__container">
 			<slot />
 		</div>
@@ -32,38 +30,31 @@ const { name, info = '', indented = false } = defineProps<Props>()
 </template>
 
 <style lang="scss">
-.config-box__header {
-	display: flex;
-	align-content: center;
-	align-items: center;
-	gap: 5px;
-	margin: 8px 0 8px 0;
-}
-
 .config-box {
-	display: flex;
-	flex-direction: column;
-	padding: 8px 0;
-	.icon-container {
-		width: 20px;
-	}
-
-	.config-box__title {
-		display: flex;
-		flex: 1;
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		'icon title actions'
+		'. container container';
+	column-gap: 0.5rem;
+	margin: 1rem 0;
+
+	&__title {
+		grid-area: title;
 		opacity: 0.7;
 		font-weight: bold;
-		margin: 0;
+		margin: 0.5rem 0;
 	}
 
-	.config-box__container {
-		display: flex;
-		flex-direction: column;
-		padding-inline-start: 24px;
+	&__container {
+		grid-area: container;
+		& > * {
+			width: 100%;
+		}
 	}
-}
 
-.indented {
-	margin-inline-start: 24px !important;
+	.indented {
+		margin-inline-start: 1.6rem !important;
+	}
 }
 </style>
diff --git a/src/components/Base/modules/FlexSettings.vue b/src/components/Base/modules/FlexSettings.vue
index e38a366511..31240a0fd7 100644
--- a/src/components/Base/modules/FlexSettings.vue
+++ b/src/components/Base/modules/FlexSettings.vue
@@ -4,22 +4,15 @@
 -->
 
 <template>
-	<div class="flex_settings">
+	<div class="grid_settings">
 		<slot name="default" />
 	</div>
 </template>
 
 <style lang="scss">
-.flex_settings {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-
-	.settings-section {
-		flex: 1 0 480px;
-		margin-bottom: 0;
-		border-bottom: 1px solid var(--color-border);
-	}
+.grid_settings {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(var(--cap-width), 1fr));
 }
 
 .settings-description {
diff --git a/src/components/Base/modules/StickyDiv.vue b/src/components/Base/modules/StickyDiv.vue
index 30bd36b80d..a2ac16fab3 100644
--- a/src/components/Base/modules/StickyDiv.vue
+++ b/src/components/Base/modules/StickyDiv.vue
@@ -59,36 +59,17 @@ const stickyClass = computed(() => ({
 
 <template>
 	<div :class="['sticky-div', stickyClass]" :style="style">
-		<div class="top-left-corner"></div>
-		<div class="top"></div>
-		<div class="top-right-corner"></div>
-
-		<div class="left"></div>
 		<div class="stage" :style="style">
 			<slot name="default">
 				<div class="inner"></div>
 			</slot>
 		</div>
-		<div class="right"></div>
-
-		<div class="bottom-right-corner"></div>
-		<div class="bottom"></div>
-		<div class="bottom-left-corner"></div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.sticky-div {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	grid-template-rows: auto 1fr auto;
-	grid-template-areas:
-		'top-left-corner top top-right-corner'
-		'left center right'
-		'bottom-left-corner bottom bottom-right-corner';
-}
-
 .stage {
+	display: grid;
 	padding: 0.3rem;
 	grid-area: center;
 	width: 100%;
@@ -96,50 +77,6 @@ const stickyClass = computed(() => ({
 	background-color: var(--color-main-background);
 }
 
-.top-left-corner {
-	grid-area: top-left-corner;
-	height: 0;
-	width: 0;
-}
-
-.top {
-	grid-area: top;
-	height: 0;
-}
-
-.top-right-corner {
-	grid-area: top-right-corner;
-	height: 0;
-	width: 0;
-}
-
-.right {
-	grid-area: right;
-	width: 0;
-}
-
-.bottom-right-corner {
-	grid-area: bottom-right-corner;
-	height: 0;
-	width: 0;
-}
-
-.bottom {
-	grid-area: bottom;
-	height: 0;
-}
-
-.bottom-left-corner {
-	grid-area: bottom-left-corner;
-	height: 0;
-	width: 0;
-}
-
-.left {
-	grid-area: left;
-	width: 0;
-}
-
 .sticky-left {
 	position: sticky;
 	inset-inline-start: 0;
@@ -150,20 +87,35 @@ const stickyClass = computed(() => ({
 	top: 0;
 }
 
-.bottom-right-corner,
-.bottom,
-.bottom-left-corner {
+.sticky-div.sticky-bottom-shadow::after {
+	content: '';
 	background: linear-gradient(
 		to bottom,
 		rgba(var(--color-box-shadow-rgb), 0.3),
 		rgba(var(--color-box-shadow-rgb), 0)
 	);
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 6px;
+	bottom: -6px;
+	left: 0px;
+	z-index: -1;
+}
 
-	transition:
-		all var(--animation-slow) linear,
-		border 1ms;
-	.sticky-bottom-shadow & {
-		height: var(--shadow-height);
-	}
+.sticky-div.sticky-right-shadow::after {
+	content: '';
+	background: linear-gradient(
+		to right,
+		rgba(var(--color-box-shadow-rgb), 0.3),
+		rgba(var(--color-box-shadow-rgb), 0)
+	);
+	content: '';
+	position: absolute;
+	height: 100%;
+	width: 6px;
+	right: -6px;
+	top: 0px;
+	z-index: -1;
 }
 </style>
diff --git a/src/components/Cards/VoteInfoCards.vue b/src/components/Cards/VoteInfoCards.vue
index 2a5e2b8909..1823800a79 100644
--- a/src/components/Cards/VoteInfoCards.vue
+++ b/src/components/Cards/VoteInfoCards.vue
@@ -78,21 +78,13 @@ const showRegisterCard = computed(
 
 <style lang="scss" scoped>
 .vote-info-cards {
-	// margin: auto;
-	display: flex;
+	display: grid;
 	gap: 1rem;
-	flex-wrap: wrap;
-	justify-content: center;
+	grid-template-columns: repeat(auto-fit, minmax(calc(var(--cap-width) / 2), 1fr));
 
-	& > * {
-		flex: 1;
-	}
-
-	// remove margin from notecard in favor of flexbox gap
+	// remove margin from notecard in favor of gap
 	.notecard {
 		margin: unset;
-		flex: 1 calc(var(--cap-width) / 2);
-		max-width: var(--cap-width);
 	}
 }
 </style>
diff --git a/src/components/Configuration/ConfigDangerArea.vue b/src/components/Configuration/ConfigDangerArea.vue
index 593b0fe121..99cbb1b1ba 100644
--- a/src/components/Configuration/ConfigDangerArea.vue
+++ b/src/components/Configuration/ConfigDangerArea.vue
@@ -96,9 +96,8 @@ function routeAway() {
 
 <style lang="scss">
 .delete-area {
-	display: flex;
+	display: grid;
 	gap: 8px;
-	justify-content: space-between;
-	flex-wrap: wrap;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }
 </style>
diff --git a/src/components/Options/OptionItem.vue b/src/components/Options/OptionItem.vue
index 24603ad864..ff5758034f 100644
--- a/src/components/Options/OptionItem.vue
+++ b/src/components/Options/OptionItem.vue
@@ -69,6 +69,7 @@ const pollStore = usePollStore()
 	display: grid;
 	grid-template-columns: auto 1fr auto auto;
 	grid-template-areas: 'drag option owner actions';
+	align-items: center;
 	position: relative;
 	padding: 8px 0;
 	background-color: var(--color-main-background);
diff --git a/src/components/Options/OptionItemOwner.vue b/src/components/Options/OptionItemOwner.vue
index 4732f81570..d841c80ecd 100644
--- a/src/components/Options/OptionItemOwner.vue
+++ b/src/components/Options/OptionItemOwner.vue
@@ -33,7 +33,7 @@ const showDelete = computed(
 </script>
 
 <template>
-	<div class="option-item-owner blabla">
+	<div class="option-item-owner">
 		<ActionDelete
 			v-if="showDelete"
 			:name="
@@ -50,6 +50,7 @@ const showDelete = computed(
 			v-else-if="option.owner"
 			:user="option.owner"
 			:icon-size="avatarSize"
+			condensed
 			hide-names
 			:tooltip-message="
 				t('polls', '{displayName}\'s proposal', {
diff --git a/src/components/Options/OptionMenu.vue b/src/components/Options/OptionMenu.vue
index c6b2a0b693..5fb4a96aeb 100644
--- a/src/components/Options/OptionMenu.vue
+++ b/src/components/Options/OptionMenu.vue
@@ -10,6 +10,7 @@ import { t } from '@nextcloud/l10n'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcModal from '@nextcloud/vue/components/NcModal'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
 
 import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -55,6 +56,17 @@ const cloneAllowed = computed(
 		&& !pollStore.isClosed
 		&& pollStore.permissions.edit,
 )
+const proposalHint = computed(() => {
+	if (!option.owner || option.isOwner) {
+		return null
+	}
+
+	return option.owner
+		? t('polls', "{displayName}'s proposal", {
+				displayName: option.owner.displayName,
+			})
+		: ''
+})
 
 /**
  *
@@ -84,6 +96,8 @@ function confirmOption() {
 
 <template>
 	<NcActions class="option-menu">
+		<NcActionText v-if="proposalHint" :name="proposalHint" />
+
 		<NcActionButton
 			v-if="deleteAllowed"
 			:name="deleteOrRestoreStaticText"
diff --git a/src/components/PollList/PollItem.vue b/src/components/PollList/PollItem.vue
index 6ff2726a8d..f51cbcd816 100644
--- a/src/components/PollList/PollItem.vue
+++ b/src/components/PollList/PollItem.vue
@@ -292,11 +292,13 @@ const descriptionLine = computed(() => {
 
 <style lang="scss">
 .poll-item {
-	display: flex;
-	column-gap: 0.3rem;
+	display: grid;
+	grid-template-columns: subgrid;
+	column-gap: 1rem;
 	align-items: center;
 	padding: 0.3rem 0;
 	border-bottom: 1px solid var(--color-border-dark);
+	grid-column: 1 / 5;
 
 	&.active {
 		background-color: var(--color-primary-element-light);
@@ -306,29 +308,14 @@ const descriptionLine = computed(() => {
 		background-color: var(--color-background-hover);
 	}
 
-	.item__type {
-		flex: 0 0 3rem;
-	}
-
-	.item__title {
-		flex: 4 0 11.3rem;
+	.item__title * {
 		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	.title_line,
-	.description_line {
-		display: flex;
-		gap: 0.5rem;
-		.title,
-		.description {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-		.title {
-			flex: 1;
-			font-weight: 600;
-		}
+	.title {
+		font-weight: 600;
 	}
 
 	.title-line {
@@ -339,7 +326,6 @@ const descriptionLine = computed(() => {
 	}
 	.badges {
 		display: flex;
-		flex: 1 0 10rem;
 		gap: 0.25rem;
 		flex-wrap: wrap;
 		justify-content: flex-end;
@@ -350,10 +336,5 @@ const descriptionLine = computed(() => {
 			min-height: 1.4rem;
 		}
 	}
-	.actions {
-		display: flex;
-		flex: 0 0 2.7rem;
-		justify-content: center;
-	}
 }
 </style>
diff --git a/src/components/Shares/ShareItem.vue b/src/components/Shares/ShareItem.vue
index e328b939bb..41c7168950 100644
--- a/src/components/Shares/ShareItem.vue
+++ b/src/components/Shares/ShareItem.vue
@@ -86,19 +86,17 @@ onMounted(() => {
 		:description="userDescription"
 		:label="share.label">
 		<template #status>
-			<div v-if="share.groupId || ['public', 'group'].includes(share.type)">
-				<div class="vote-status empty" />
-			</div>
-			<div v-else-if="share.voted">
-				<VotedIcon
-					class="vote-status voted"
-					:name="t('polls', 'Has voted')" />
-			</div>
-			<div v-else>
-				<UnvotedIcon
-					class="vote-status unvoted"
-					:name="t('polls', 'Has not voted')" />
-			</div>
+			<div
+				v-if="share.groupId || ['public', 'group'].includes(share.type)"
+				class="vote-status empty" />
+			<VotedIcon
+				v-else-if="share.voted"
+				class="vote-status voted"
+				:name="t('polls', 'Has voted')" />
+			<UnvotedIcon
+				v-else
+				class="vote-status unvoted"
+				:name="t('polls', 'Has not voted')" />
 		</template>
 
 		<ShareMenu :share="share" @show-qr-code="emit('showQrCode')" />
@@ -111,7 +109,6 @@ onMounted(() => {
 }
 
 .vote-status {
-	margin-inline-start: 8px;
 	width: 32px;
 
 	&.voted {
diff --git a/src/components/Shares/ShareMenu.vue b/src/components/Shares/ShareMenu.vue
index 05510b3294..b7baab4ada 100644
--- a/src/components/Shares/ShareMenu.vue
+++ b/src/components/Shares/ShareMenu.vue
@@ -402,17 +402,4 @@ async function submitLabel() {
 .deleted .user-item .description {
 	color: var(--color-error-text);
 }
-
-.vote-status {
-	margin-inline-start: 8px;
-	width: 32px;
-
-	&.voted {
-		color: var(--color-polls-foreground-yes);
-	}
-
-	&.unvoted {
-		color: var(--color-polls-foreground-no);
-	}
-}
 </style>
diff --git a/src/components/SideBar/SideBarTabOptions.vue b/src/components/SideBar/SideBarTabOptions.vue
index 09a78992c4..2aebc79059 100644
--- a/src/components/SideBar/SideBarTabOptions.vue
+++ b/src/components/SideBar/SideBarTabOptions.vue
@@ -88,7 +88,7 @@ onUnmounted(() => {
 			<DateOptionsIcon />
 		</template>
 
-		<OptionsDate v-if="optionsStore.options.length" />
+		<OptionsDate v-if="optionsStore.options.length" class="options-list" />
 
 		<NcEmptyContent
 			v-else
@@ -113,7 +113,7 @@ onUnmounted(() => {
 
 		<OptionsTextAdd v-if="!pollStore.isClosed" />
 
-		<OptionsText v-if="optionsStore.options.length" />
+		<OptionsText v-if="optionsStore.options.length" class="options-list" />
 
 		<NcEmptyContent
 			v-else
@@ -129,3 +129,16 @@ onUnmounted(() => {
 		</template>
 	</ConfigBox>
 </template>
+
+<style lang="scss">
+.options-list {
+	display: grid;
+	grid-template-columns: auto 1fr auto auto;
+	place-items: center;
+
+	.option-item {
+		grid-template-columns: subgrid;
+		grid-column: 1 / 5;
+	}
+}
+</style>
diff --git a/src/components/User/UserItem.vue b/src/components/User/UserItem.vue
index 9e90bdf9f1..6e5f2fd870 100644
--- a/src/components/User/UserItem.vue
+++ b/src/components/User/UserItem.vue
@@ -148,15 +148,18 @@ const componentClass = computed(() => [
 }
 
 .user-item {
-	position: relative;
-	display: flex;
+	display: grid;
+	grid-template-columns: auto auto 1fr auto;
 	align-items: center;
-	justify-content: space-around;
-	padding: 4px;
-	max-width: 100%;
+	column-gap: 8px;
+	margin: 8px 0;
 	&.disabled {
 		opacity: 0.6;
 	}
+	&.condensed {
+		grid-template-columns: 1fr;
+		justify-items: center;
+	}
 }
 
 .hover-menu {
@@ -176,27 +179,18 @@ const componentClass = computed(() => [
 }
 
 .user-item__name {
-	flex: 1;
-	min-width: 50px;
-	padding-inline-start: 8px;
 	white-space: nowrap;
 	> div {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
 	.description {
 		color: var(--color-text-maxcontrast);
 		font-size: 0.7em;
 	}
-}
 
-.condensed {
-	&.user-item {
-		flex-direction: column;
-		justify-content: center;
-		max-width: 70px;
-	}
-	.user-item__name {
+	.condensed & {
 		font-size: 0.7em;
 		text-align: center;
 		width: 70px;
diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue
index 7285ea8b63..d441fa1aff 100644
--- a/src/components/VoteTable/VoteTable.vue
+++ b/src/components/VoteTable/VoteTable.vue
@@ -192,6 +192,7 @@ function isVotable(participant: User, option: Option) {
 	grid-auto-flow: column;
 	overflow: scroll;
 	margin: auto;
+
 	&.table-view > div {
 		border-inline-start: 1px solid var(--color-border);
 		&.participant {
@@ -206,7 +207,6 @@ function isVotable(participant: User, option: Option) {
 
 	.participant {
 		grid-column: 1;
-		place-self: center;
 		inset-inline-start: 0;
 		background-color: var(--color-main-background);
 
@@ -250,12 +250,14 @@ function isVotable(participant: User, option: Option) {
 			grid-column: 1;
 			inset-inline-start: 0;
 			background-color: var(--color-main-background);
+			border-inline-start: none;
 		}
 
 		.option-item-spacer {
 			grid-row: 2;
 			grid-column: 1;
 			inset-inline-start: 0;
+			border-inline-start: none;
 		}
 
 		.counter-spacer {
@@ -263,6 +265,7 @@ function isVotable(participant: User, option: Option) {
 			grid-column: 1;
 			inset-inline-start: 0;
 			background-color: var(--color-main-background);
+			border-inline-start: none;
 		}
 
 		.option-menu-grid {
diff --git a/src/views/AdminSettingsPage.vue b/src/views/AdminSettingsPage.vue
index 017d95fd9b..147241e94c 100644
--- a/src/views/AdminSettingsPage.vue
+++ b/src/views/AdminSettingsPage.vue
@@ -30,6 +30,7 @@ import AdminUnrescrictedOwners from '../components/Settings/AdminSettings/AdminU
 
 import { useAppSettingsStore } from '../stores/appSettings'
 import '../assets/scss/markdown.scss'
+import '../assets/scss/vars.scss'
 
 const appSettingsStore = useAppSettingsStore()
 
diff --git a/src/views/PollList.vue b/src/views/PollList.vue
index 3d965d47ee..01a5473031 100644
--- a/src/views/PollList.vue
+++ b/src/views/PollList.vue
@@ -193,18 +193,17 @@ onMounted(() => {
 
 <style lang="scss">
 .poll-list__list {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: scroll;
-	padding-bottom: 14px;
+	display: grid;
+	grid-auto-rows: 1fr;
+	margin: 0 0.5rem 1rem;
+	grid-template-columns: auto minmax(13.3rem, 1fr) auto auto;
 }
 
 .observer_section {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 14px 0;
+	padding: 1rem 0;
 }
 
 .clickable_load_more {
diff --git a/src/views/UserSettingsPage.vue b/src/views/UserSettingsPage.vue
index 77b6abe432..408331c92a 100644
--- a/src/views/UserSettingsPage.vue
+++ b/src/views/UserSettingsPage.vue
@@ -13,6 +13,7 @@ import FlexSettings from '../components/Base/modules/FlexSettings.vue'
 import CalendarSettings from '../components/Settings/UserSettings/CalendarSettings.vue'
 import FeatureSettings from '../components/Settings/UserSettings/FeatureSettings.vue'
 import StyleSettings from '../components/Settings/UserSettings/StyleSettings.vue'
+import '../assets/scss/vars.scss'
 
 import { usePreferencesStore } from '../stores/preferences'
 
diff --git a/src/views/Vote.vue b/src/views/Vote.vue
index d103b47c9e..10287ce491 100644
--- a/src/views/Vote.vue
+++ b/src/views/Vote.vue
@@ -316,10 +316,6 @@ const appClass = computed(() => [
 		max-width: var(--cap-width);
 	}
 
-	& > * {
-		margin-top: 0.5rem;
-	}
-
 	.area__footer,
 	.area__top,
 	.list-view.area__vote {