diff --git a/packages/documentation/components/YocoPreview.vue b/packages/documentation/components/YocoPreview.vue
index 1f5fa59951..e25cae24a5 100644
--- a/packages/documentation/components/YocoPreview.vue
+++ b/packages/documentation/components/YocoPreview.vue
@@ -95,6 +95,10 @@ export default defineComponent({
 	background: #f8f8f8;
 	box-shadow: 0 2px 2px #ddd;
 
+	.yoco {
+		border: 1px dashed var(--gray-20);
+	}
+
 	.size-1,
 	.size-3 {
 		opacity: 1;
diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
index 4adc4af31e..4c4e04a129 100644
--- a/packages/documentation/pages/usage/components/table.vue
+++ b/packages/documentation/pages/usage/components/table.vue
@@ -61,17 +61,13 @@
 				v-if="booleanFlags.isEmpty && booleanFlags.showEmptySlot"
 				#empty
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-33.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template
 				v-if="booleanFlags.isLoading && booleanFlags.showLoadingSlot"
 				#loading
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-54.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template #expanded-row>
 				<div>Expanded content</div>
@@ -87,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, defineComponent, h, ref, watch } from 'vue'
 
 import {
 	createColumnContext,
@@ -109,6 +105,7 @@ import ComponentInfo from '~/components/ComponentInfo.vue'
 type ColumnId =
 	| 'age'
 	| 'bestSkill'
+	| 'id'
 	| 'isAlive'
 	| 'lifespan'
 	| 'name'
@@ -254,20 +251,27 @@ export default defineComponent({
 			computed(() => ({
 				columns: [
 					createColumn({
-						// display: getCustomDisplay<TableRow>({
-						// 	align: 'left',
-						// 	disableCellClick: true,
-						// 	isNumeric: false,
-						// 	render: (value) => {
-						// 		return h('div', {}, [
-						// 			h('em', { style: { color: 'green' } }, value.id),
-						// 			` ${value.name} is `,
-						// 			h('b', {}, value.age),
-						// 		])
-						// 	},
-						// }),
-						display: getDisplay({ minimumDecimalPlaces: 1, type: 'numerical' }),
-						getData: (row) => row.age,
+						display: getDisplay({ type: 'integer' }),
+						getData: (row) => row.id,
+						id: 'id',
+						isSortable: true,
+						label: '# Id',
+					}),
+					createColumn({
+						display: getCustomDisplay<TableRow>({
+							align: 'left',
+							disableCellClick: true,
+							isNumeric: false,
+							render: (value) => {
+								return h('div', {}, [
+									h('em', { style: { color: 'green' } }, value.id),
+									` ${value.name} is `,
+									h('b', {}, value.age),
+								])
+							},
+							sortBehavior: 'asc-desc',
+						}),
+						getData: (row) => row,
 						id: 'age',
 						isSortable: true,
 						label: 'age (click disabled)',
@@ -282,49 +286,46 @@ export default defineComponent({
 					}),
 					createColumn({
 						display: getCustomDisplay({
-							align: 'right',
+							align: 'center',
 							disableCellClick: false,
 							isNumeric: false,
 							render: (value: string) => value.replaceAll('e', 'x'),
+							sortBehavior: 'asc-desc',
 						}),
 						getData: (row) => row.lifespan,
 						id: 'lifespan',
 						isSortable: true,
 						label: 'Lifespan (click allowed)',
-						maxWidth: '100px',
 					}),
-					...(booleanFlags.value.hasDragAndDrop
-						? [
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.name,
-									id: 'name',
-									isSortable: true,
-									label: 'Name',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.purpose,
-									id: 'purpose',
-									isSortable: true,
-									label: 'Primary Purpose',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.speed,
-									id: 'speed',
-									isSortable: true,
-									label: 'Speed',
-								}),
-								createColumn({
-									display: dateDisplay,
-									getData: (row) => new Date(row.someDate),
-									id: 'randomDate',
-									isSortable: true,
-									label: 'Random Date',
-								}),
-							]
-						: []),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.name,
+						id: 'name',
+						isSortable: true,
+						label: 'Name',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.purpose,
+						id: 'purpose',
+						isSortable: true,
+						label: 'Primary Purpose',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.speed,
+						id: 'speed',
+						isSortable: true,
+						label: 'Speed',
+						maxWidth: '120px',
+					}),
+					createColumn({
+						display: dateDisplay,
+						getData: (row) => new Date(row.someDate),
+						id: 'randomDate',
+						isSortable: true,
+						label: 'Random Date',
+					}),
 					createColumn({
 						display: textDisplay,
 						getData: (row) => row.bestSkill,
@@ -400,6 +401,7 @@ export default defineComponent({
 				age: (mode) => getNumericalSorter<TableRow>((row) => row.age, mode),
 				bestSkill: (mode) =>
 					getTextSorter<TableRow>((row) => row.bestSkill, mode),
+				id: (mode) => getNumericalSorter<TableRow>((row) => row.id, mode),
 				isAlive: (mode) =>
 					getNumericalSorter<TableRow>((row) => (row.isAlive ? 1 : 0), mode),
 				lifespan: (mode) =>
@@ -449,7 +451,6 @@ export default defineComponent({
 					label: 'table has drag and drop',
 				},
 				{
-					isDisabled: booleanFlags.value.isLoading,
 					key: 'isEmpty',
 					label: 'table is empty',
 				},
@@ -462,11 +463,10 @@ export default defineComponent({
 						]
 					: []),
 				{
-					isDisabled: booleanFlags.value.isEmpty,
 					key: 'isLoading',
 					label: 'table is loading',
 				},
-				...(booleanFlags.value.isLoading
+				...(booleanFlags.value.isLoading && booleanFlags.value.isEmpty
 					? [
 							{
 								key: 'showLoadingSlot',
diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index edad173585..863bef532a 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -5,7 +5,7 @@
 	},
 	"dependencies": {
 		"@3yourmind/vue-use-tippy": "3.x",
-		"@3yourmind/yoco": "^2.8.0",
+		"@3yourmind/yoco": "^2.9.0",
 		"@metatypes/typography": "^0.5.0",
 		"@tanstack/table-core": "^8.20.5",
 		"big.js": "^6.2.1",
diff --git a/packages/kotti-ui/source/globals.d.ts b/packages/kotti-ui/source/globals.d.ts
index 81e2d810df..bbfd1c6724 100644
--- a/packages/kotti-ui/source/globals.d.ts
+++ b/packages/kotti-ui/source/globals.d.ts
@@ -18,6 +18,7 @@ declare module '@tanstack/table-core' {
 		cellClasses: Record<string, boolean> | string
 		disableCellClick: boolean
 		headerClasses: Record<string, boolean> | string
+		sortBehavior: 'asc-desc' | 'desc-asc'
 		style?: Record<string, string>
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-style/_loadings.scss b/packages/kotti-ui/source/kotti-style/_loadings.scss
index 35fb528d6f..d324fb63c2 100644
--- a/packages/kotti-ui/source/kotti-style/_loadings.scss
+++ b/packages/kotti-ui/source/kotti-style/_loadings.scss
@@ -14,6 +14,20 @@
 	}
 }
 
+@keyframes skeleton-loading-reduced {
+	0% {
+		background: $lightgray-300;
+	}
+
+	50% {
+		background: $lightgray-400;
+	}
+
+	100% {
+		background: $lightgray-300;
+	}
+}
+
 %skeleton-style {
 	box-sizing: border-box;
 	display: block;
@@ -65,6 +79,12 @@
 	}
 }
 
+@media (prefers-reduced-motion) {
+	.skeleton {
+		animation-name: skeleton-loading-reduced !important;
+	}
+}
+
 // Spin Loading
 
 @keyframes loading {
diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index f5c3b809da..b701f14c48 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -14,14 +14,16 @@
 						:colSpan="header.colSpan"
 						:data-test="header.dataTest"
 						:draggable="header.isDraggable"
+						:style="header.style"
 						@click="(e) => handleHeaderClick(e, header)"
 						@dragenter.prevent
 						@dragleave.prevent
 						@dragover.prevent="(e) => handleCellDragOver(e, header.id)"
 						@dragstart="(e) => handleHeaderDragStart(e, header.id)"
 					>
-						<div class="kt-table-header" :style="header.style">
+						<div class="kt-table-header">
 							<FlexRender
+								class="kt-table-header-content"
 								:props="{ ...header.getContext() }"
 								:render="header.column.columnDef.header"
 							/>
@@ -36,7 +38,10 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-if="isLoading" class="kt-table-row kt-table-row--is-loading">
+				<tr
+					v-if="bodyRows.length === 0 && isLoading"
+					class="kt-table-row kt-table-row--is-loading"
+				>
 					<td :colSpan="tableColSpan">
 						<slot name="loading">
 							<div
@@ -65,6 +70,7 @@
 							:key="cell.key"
 							:class="cell.classes"
 							:data-test="cell.dataTest"
+							:style="cell.style"
 							@dragenter.prevent
 							@dragleave.prevent
 							@dragover.prevent="(e) => handleCellDragOver(e, cell.columnId)"
@@ -73,7 +79,6 @@
 								:is="cell.wrapComponent.component"
 								v-bind="cell.wrapComponent.props"
 								:class="cell.wrapComponent.class"
-								:style="cell.style"
 								v-on="cell.wrapComponent.on"
 							>
 								<FlexRender
@@ -160,6 +165,11 @@ import { KottiTable } from './table/types'
 
 const TRANSFER_TYPE = 'application/move-column'
 
+const SORT_BEHAVIOR_MAP = {
+	'asc-desc': [false, 'asc', 'desc'],
+	'desc-asc': [false, 'desc', 'asc'],
+} as const
+
 export default defineComponent({
 	name: 'KtTable',
 	components: {
@@ -216,6 +226,7 @@ export default defineComponent({
 							'kt-table-row--is-click-disabled': behavior.disable?.click,
 							'kt-table-row--is-interactive':
 								!behavior.disable?.click && behavior.click,
+							'kt-table-row--is-selected': row.getIsSelected(),
 						}),
 						expandedColSpan: row.getAllCells().length,
 						expandedKey: `${row.id}-expanded-row`,
@@ -261,15 +272,26 @@ export default defineComponent({
 
 				const id = header.column.columnDef.id as string
 
-				switch (header.column.getIsSorted()) {
+				const sortBehavior =
+					SORT_BEHAVIOR_MAP[
+						header.column.columnDef.meta.sortBehavior as 'asc-desc' | 'desc-asc'
+					]
+
+				const currentSortIndex = sortBehavior.indexOf(
+					header.column.getIsSorted(),
+				)
+
+				const nextSort = sortBehavior.at((currentSortIndex + 1) % 3)!
+
+				switch (nextSort) {
 					case false:
-						table.value.setSorting([{ desc: true, id }])
+						table.value.setSorting([])
 						break
-					case 'desc':
+					case 'asc':
 						table.value.setSorting([{ desc: false, id }])
 						break
-					case 'asc':
-						table.value.setSorting([])
+					case 'desc':
+						table.value.setSorting([{ desc: true, id }])
 						break
 				}
 			},
@@ -299,9 +321,9 @@ export default defineComponent({
 						isSortable: header.column.getCanSort(),
 						key: `${header.id}-${headerIndex}`,
 						sortIndicatorIcon: {
-							asc: Yoco.Icon.CHEVRON_UP,
-							desc: Yoco.Icon.CHEVRON_DOWN,
-							false: '',
+							asc: Yoco.Icon.ARROW_UP,
+							desc: Yoco.Icon.ARROW_DOWN,
+							false: Yoco.Icon.ARROW_UP_DOWN,
 						}[header.column.getIsSorted() || 'false'],
 						style: header.column.columnDef.meta.style,
 					})),
@@ -313,6 +335,8 @@ export default defineComponent({
 				'kt-table--is-drag-and-drop-active':
 					tableContext.value.internal.isDragAndDropActive,
 				'kt-table--is-scrollable': !props.isNotScrollable,
+				'kt-table--is-loading skeleton rectangle':
+					props.isLoading && table.value.getRowModel().rows.length > 0,
 			})),
 			table,
 			tableContext: computed(() => tableContext.value),
@@ -341,6 +365,20 @@ export default defineComponent({
 		white-space: nowrap;
 	}
 
+	&--is-loading {
+		&.rectangle {
+			height: unset;
+		}
+
+		tbody {
+			mix-blend-mode: multiply;
+
+			tr {
+				border-bottom-color: white !important;
+			}
+		}
+	}
+
 	table {
 		width: 100%;
 		border-collapse: collapse;
@@ -354,12 +392,30 @@ export default defineComponent({
 			background-color: var(--ui-01);
 
 			.kt-table-cell--is-header {
+				height: 28px;
 				font-size: var(--unit-3);
-				color: var(--gray-50);
+				color: var(--text-02);
 				text-transform: uppercase;
 
 				&.kt-table-cell--is-sorted {
-					color: var(--gray-60);
+					color: var(--interactive-01);
+				}
+
+				&:not(.kt-table-cell--is-sorted) {
+					.yoco {
+						opacity: 0;
+					}
+
+					&:hover {
+						.yoco {
+							color: var(--icon-02);
+							opacity: 1;
+
+							&:hover {
+								color: var(--icon-01);
+							}
+						}
+					}
 				}
 
 				&[draggable='true'] {
@@ -368,18 +424,37 @@ export default defineComponent({
 
 				.kt-table-header {
 					display: inline-flex;
+					gap: 2px;
 					align-items: center;
-					justify-content: space-between;
 					width: 100%;
-					padding: 0.4rem 0.3rem;
+					padding: 0.2rem 0.4rem;
 					overflow: hidden;
 
-					.yoco {
-						min-width: 1rem;
-						font-size: 0.9rem;
+					> .yoco {
+						min-width: 0.8rem;
+						font-size: 0.8rem;
 						color: var(--interactive-03);
+						user-select: none;
 					}
 				}
+
+				&.kt-table-cell--is-left-aligned .kt-table-header {
+					justify-content: flex-start;
+				}
+
+				&.kt-table-cell--is-center-aligned .kt-table-header {
+					justify-content: center;
+				}
+
+				&.kt-table-cell--is-right-aligned .kt-table-header {
+					flex-flow: row-reverse;
+					justify-content: flex-start;
+				}
+
+				&.kt-table-cell--is-center-aligned.kt-table-cell--is-sortable
+					.kt-table-header-content {
+					margin-left: 0.9rem;
+				}
 			}
 
 			.kt-table-cell {
@@ -409,6 +484,7 @@ export default defineComponent({
 
 				&:hover .kt-table__actions {
 					display: inline-flex;
+					gap: var(--unit-1);
 					align-items: center;
 					background: var(--white);
 				}
@@ -468,7 +544,7 @@ export default defineComponent({
 				gap: 4px;
 				align-items: center;
 				height: 100%;
-				padding: 0.4rem 0.3rem;
+				padding: 0.4rem;
 				overflow: hidden;
 			}
 
@@ -496,7 +572,7 @@ export default defineComponent({
 			z-index: 400;
 			display: none;
 			min-height: var(--unit-8);
-			padding: 0.25rem;
+			padding: 0 var(--unit-h);
 			margin-top: -0.8rem;
 			font-size: 0.8rem;
 			line-height: 0.8rem;
@@ -517,7 +593,7 @@ export default defineComponent({
 
 			.kt-table__action-icon,
 			.yoco {
-				margin: 0 var(--unit-1);
+				padding: var(--unit-1);
 				font-size: 1rem;
 				cursor: pointer;
 				user-select: none;
@@ -537,15 +613,6 @@ export default defineComponent({
 			}
 		}
 	}
-
-	// disable hover when drag and drop is active, otherwise drag and drop specific styles won't show
-	&:not(.kt-table--is-drag-and-drop-active) thead .kt-table-cell--is-header {
-		&.kt-table-cell--is-sortable:hover,
-		&[draggable='true']:hover {
-			color: var(--gray-60);
-			background-color: var(--ui-02);
-		}
-	}
 }
 
 tr.kt-table-row {
@@ -580,23 +647,13 @@ tr.kt-table-row {
 	&--is-loading {
 		text-align: center;
 	}
-}
 
-.kt-table-cell {
-	height: 44px;
-
-	&--is-left-aligned {
-		text-align: left;
-	}
-
-	&--is-right-aligned {
-		text-align: right;
-	}
-
-	&--is-center-aligned {
-		text-align: center;
+	&--is-selected {
+		background-color: rgb(234 240 250 / 50%); // ~= rgb(--blue-10 / 60%)
 	}
+}
 
+.kt-table-cell {
 	&--was-successfully-dropped {
 		animation: 0.2s ease-in 1 flash-green;
 	}
diff --git a/packages/kotti-ui/source/kotti-table/table/column-helper.ts b/packages/kotti-ui/source/kotti-table/table/column-helper.ts
index 94ce3bb782..9ac5281cfd 100644
--- a/packages/kotti-ui/source/kotti-table/table/column-helper.ts
+++ b/packages/kotti-ui/source/kotti-table/table/column-helper.ts
@@ -93,6 +93,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 						icon,
 					)
 				},
+				sortBehavior: 'desc-asc',
 			} as ResolvedDisplayType<OPTION>
 		}
 		case 'date': {
@@ -104,6 +105,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 					const formatString = param.formatString ?? ISO8601
 					return value === null ? null : dayjs(value).format(formatString)
 				},
+				sortBehavior: 'desc-asc',
 			} as ResolvedDisplayType<OPTION>
 		}
 		case 'date-time': {
@@ -115,6 +117,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 					const formatString = param.formatString ?? ISO8601_SECONDS
 					return value === null ? null : dayjs(value).format(formatString)
 				},
+				sortBehavior: 'desc-asc',
 			} as ResolvedDisplayType<OPTION>
 		}
 		case 'integer': {
@@ -128,6 +131,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 						: numberFormatter
 								.format(Math.round(value))
 								.replaceAll(',', '\u2009'),
+				sortBehavior: 'desc-asc',
 			} as ResolvedDisplayType<OPTION>
 		}
 		case 'numerical': {
@@ -146,6 +150,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 								.format(value)
 								.replaceAll(',', ' ') //'\u2009')
 								.replace('.', i18n.numberFormat.decimalSeparator),
+				sortBehavior: 'desc-asc',
 			} as ResolvedDisplayType<OPTION>
 		}
 		case 'text': {
@@ -154,6 +159,7 @@ export const getDisplay = <OPTION extends DisplayOption = DisplayOption>(
 				disableCellClick: false,
 				isNumeric: false,
 				render: (value: string | null) => value,
+				sortBehavior: 'asc-desc',
 			} as ResolvedDisplayType<OPTION>
 		}
 	}
diff --git a/packages/kotti-ui/source/kotti-table/table/hooks.ts b/packages/kotti-ui/source/kotti-table/table/hooks.ts
index 2457a09b82..f5f3c8b7c3 100644
--- a/packages/kotti-ui/source/kotti-table/table/hooks.ts
+++ b/packages/kotti-ui/source/kotti-table/table/hooks.ts
@@ -69,6 +69,7 @@ export const paramsSchema = z
 							disableCellClick: z.boolean(),
 							isNumeric: z.boolean(),
 							render: z.function(),
+							sortBehavior: z.enum(['asc-desc', 'desc-asc']),
 						})
 						.strict(),
 					getData: z.function(),
@@ -543,12 +544,13 @@ export const useKottiTable = <
 							)
 						},
 						enableSorting: column.isSortable,
-						header: () => h('div', { style: { flex: 1 } }, column.label),
+						header: () => h('div', column.label),
 						id: column.id,
 						meta: {
 							cellClasses: getCellClasses('body'),
 							disableCellClick: column.display.disableCellClick,
 							headerClasses: getCellClasses('header'),
+							sortBehavior: column.display.sortBehavior,
 							style: {
 								'max-width': column.maxWidth,
 								'min-width': column.minWidth,
diff --git a/packages/kotti-ui/source/kotti-table/table/types.ts b/packages/kotti-ui/source/kotti-table/table/types.ts
index 1c66d28025..2a6131483d 100644
--- a/packages/kotti-ui/source/kotti-table/table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/table/types.ts
@@ -62,6 +62,7 @@ export module KottiTable {
 			value: DATA_TYPE,
 			context: { i18n: KottiI18n.ContextInternal },
 		) => VNode | string | null
+		sortBehavior: 'asc-desc' | 'desc-asc'
 	}
 
 	/**
diff --git a/packages/yoco/package.json b/packages/yoco/package.json
index 321a4bbd03..ba5f38b07a 100644
--- a/packages/yoco/package.json
+++ b/packages/yoco/package.json
@@ -70,5 +70,5 @@
 	"style": "./style.css",
 	"type": "module",
 	"types": "./dist/mjs/index.d.ts",
-	"version": "2.8.0"
+	"version": "2.9.0"
 }
diff --git a/packages/yoco/source/index.ts b/packages/yoco/source/index.ts
index 6b6fa17ece..93a800190e 100644
--- a/packages/yoco/source/index.ts
+++ b/packages/yoco/source/index.ts
@@ -4,7 +4,10 @@ export module Yoco {
 	export enum Icon {
 		ADDRESS_BOOK = 'address_book',
 		ANNOUNCE = 'announce',
+		ARROW_DOWN = 'arrow_down',
 		ARROW_LINE = 'arrow_line',
+		ARROW_UP = 'arrow_up',
+		ARROW_UP_DOWN = 'arrow_up_down',
 		ATTACHMENT = 'attachment',
 		ATTENTION = 'attention',
 		BASKET = 'basket',
diff --git a/packages/yoco/svg/arrow_down.svg b/packages/yoco/svg/arrow_down.svg
new file mode 100644
index 0000000000..cadbcdd431
--- /dev/null
+++ b/packages/yoco/svg/arrow_down.svg
@@ -0,0 +1,3 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4746 36.7305L15.3301 29.586C14.9396 29.1954 14.3064 29.1954 13.9159 29.586L12.5016 31.0002C12.1111 31.3907 12.1111 32.0239 12.5016 32.4144L23.8154 43.7281C24.2059 44.1186 24.839 44.1186 25.2296 43.7281L36.5433 32.4144C36.9338 32.0239 36.9338 31.3907 36.5433 31.0002L35.1291 29.586C34.7385 29.1954 34.1054 29.1954 33.7148 29.586L26.4746 36.8262L26.4746 5.00001C26.4746 4.44772 26.0269 4.00001 25.4746 4.00001H23.4746C22.9224 4.00001 22.4746 4.44772 22.4746 5.00001L22.4746 36.7305Z" fill="#393939"/>
+</svg>
diff --git a/packages/yoco/svg/arrow_up.svg b/packages/yoco/svg/arrow_up.svg
new file mode 100644
index 0000000000..4f47ad323a
--- /dev/null
+++ b/packages/yoco/svg/arrow_up.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9522 11.2905L14.8076 18.435C14.4171 18.8256 13.7839 18.8256 13.3934 18.435L11.9792 17.0208C11.5887 16.6303 11.5887 15.9971 11.9792 15.6066L23.2929 4.29289C23.6834 3.90237 24.3166 3.90237 24.7071 4.29289L36.0208 15.6066C36.4113 15.9971 36.4113 16.6303 36.0208 17.0208L34.6066 18.435C34.2161 18.8256 33.5829 18.8256 33.1924 18.435L25.9522 11.1948L25.9522 43.021C25.9522 43.5733 25.5045 44.021 24.9522 44.021H22.9522C22.3999 44.021 21.9522 43.5733 21.9522 43.021L21.9522 11.2905Z" fill="#393939"/>
+</svg>
diff --git a/packages/yoco/svg/arrow_up_down.svg b/packages/yoco/svg/arrow_up_down.svg
new file mode 100644
index 0000000000..42863c3442
--- /dev/null
+++ b/packages/yoco/svg/arrow_up_down.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 38.7556L33.1924 29.5632C33.5829 29.1727 34.2161 29.1727 34.6066 29.5632L36.0208 30.9774C36.4113 31.368 36.4113 32.0011 36.0208 32.3916L24.7071 43.7054C24.3166 44.0959 23.6834 44.0959 23.2929 43.7054L11.9792 32.3916C11.5887 32.0011 11.5887 31.368 11.9792 30.9774L13.3934 29.5632C13.7839 29.1727 14.4171 29.1727 14.8076 29.5632L24 38.7556Z" fill="#393939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 9.24265L14.8076 18.435C14.4171 18.8256 13.7839 18.8256 13.3934 18.435L11.9792 17.0208C11.5887 16.6303 11.5887 15.9971 11.9792 15.6066L23.2929 4.29291C23.6834 3.90238 24.3166 3.90238 24.7071 4.29291L36.0208 15.6066C36.4113 15.9971 36.4113 16.6303 36.0208 17.0208L34.6066 18.435C34.2161 18.8256 33.5829 18.8256 33.1924 18.435L24 9.24265Z" fill="#393939"/>
+</svg>