diff --git a/packages/documentation/pages/usage/components/pagination.vue b/packages/documentation/pages/usage/components/pagination.vue
index 2e36cd6b29..588bc146bb 100644
--- a/packages/documentation/pages/usage/components/pagination.vue
+++ b/packages/documentation/pages/usage/components/pagination.vue
@@ -93,17 +93,6 @@
 
 ## Usage
 
-### Props
-
-| Attribute        | Description                                  | Type      | Accepted Values              | Default    |
-| :--------------- | :------------------------------------------- | :-------- | :--------------------------- | :--------- |
-| `adjacentAmount` | number of pairs of adjacent pages to display | `Number`  | --                           | `1`        |
-| `fixedWidth`     | set width based on max number of elements    | `Boolean` | `True`, `False`              | `False`    |
-| `page`           | the default page to show                     | `Number`  | --                           | --         |
-| `pageSize`       | amount of items each page                    | `Number`  | --                           | `10`       |
-| `pagingStyle`    | style of the pagination                      | `String`  | `expand`, `flex`, `fraction` | `expand`   |
-| `total`          | total amount of items                        | `Number`  | --                           | `Required` |
-
 ### Events
 
 | Event Name            | Description                               | Parameters                             |
diff --git a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue
index 51f04f778e..7f2b8cb3d6 100644
--- a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue
+++ b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue
@@ -1,163 +1,139 @@
 <template>
 	<div>
-		<ul class="pagination">
-			<li :class="paginatorClasses(0, 'disabled')" @click="previousPage">
-				<i class="yoco page-button">chevron_left</i>
+		<ul class="kt-pagination">
+			<li :class="paginatorClasses(0)" @click="previousPage">
+				<i
+					class="yoco kt-pagination__page-button"
+					v-text="Yoco.Icon.CHEVRON_LEFT"
+				/>
 			</li>
 			<component
-				:is="component"
-				v-bind="bound"
+				:is="paginationComponent"
+				v-bind="paginationProps"
 				@setPage="setCurrentPage($event)"
 			/>
-			<li :class="paginatorClasses(maximumPage, 'disabled')" @click="nextPage">
-				<i class="yoco page-button">chevron_right</i>
+			<li :class="paginatorClasses(maximumPage)" @click="nextPage">
+				<i
+					class="yoco kt-pagination__page-button"
+					v-text="Yoco.Icon.CHEVRON_RIGHT"
+				/>
 			</li>
 		</ul>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { Yoco } from '@3yourmind/yoco'
+import { computed, defineComponent, ref } from '@vue/composition-api'
+
+import { makeProps } from '../make-props'
+
 import PaginationExpanded from './components/PaginationExpanded.vue'
 import PaginationFlexible from './components/PaginationFlexible.vue'
 import PaginationFractionated from './components/PaginationFractionated.vue'
+import { KottiPagination } from './types'
 
-export default {
+export default defineComponent<KottiPagination.PropsInternal>({
 	name: 'KtPagination',
 	components: {
 		PaginationExpanded,
 		PaginationFlexible,
 		PaginationFractionated,
 	},
-	props: {
-		adjacentAmount: { type: Number, default: 1 },
-		fixedWidth: { type: Boolean, default: false },
-		page: { type: Number, default: 1 },
-		pageSize: { type: Number, default: 10 },
-		pagingStyle: { type: String, default: 'expand' },
-		total: { type: Number, required: true },
+	props: makeProps(KottiPagination.propsSchema),
+	setup(props, { emit }) {
+		const currentPage = ref(props.page - 1)
+		const pageAmount = computed(() => Math.ceil(props.total / props.pageSize))
+		const maximumPage = computed(() => pageAmount.value - 1)
 
-		/**
-		 * @deprecated
-		 * Use :pagingStyle='fraction' instead
-		 */
-		fractionStyle: { type: Boolean, default: false },
-	},
-	data() {
 		return {
-			currentPage: this.page - 1,
+			paginationComponent: computed(() => {
+				const isFlexLogical = 2 * (props.adjacentAmount + 1) < pageAmount.value
+				switch (props.pagingStyle) {
+					case 'flex':
+						return !isFlexLogical || pageAmount.value < 2
+							? PaginationExpanded.name
+							: PaginationFlexible.name
+					case 'fraction':
+						return PaginationFractionated.name
+					default:
+						return PaginationExpanded.name
+				}
+			}),
+			currentPage,
+			maximumPage,
+			nextPage: () => {
+				if (currentPage.value === maximumPage.value) return
+				currentPage.value += 1
+				emit('nextPageClicked', currentPage.value + 1)
+			},
+			paginatorClasses: (page) => ({
+				'kt-pagination__page-item': true,
+				'kt-pagination__page-item--is-disabled': currentPage.value === page,
+			}),
+			paginationProps: computed(() => ({
+				adjacentAmount: props.adjacentAmount,
+				currentPage: currentPage.value,
+				fixedWidth: props.fixedWidth,
+				maximumPage: maximumPage.value,
+				pageSize: props.pageSize,
+				total: props.total,
+			})),
+			previousPage: () => {
+				if (currentPage.value === 0) return
+				currentPage.value -= 1
+				emit('previousPageClicked', currentPage.value + 1)
+			},
+			setCurrentPage: (page) => {
+				if (page === currentPage.value) return
+				currentPage.value = page
+				emit('currentPageChange', currentPage.value + 1)
+			},
+			Yoco,
 		}
 	},
-	computed: {
-		bound() {
-			return {
-				adjacentAmount: this.adjacentAmount,
-				currentPage: this.currentPage,
-				fixedWidth: this.fixedWidth,
-				maximumPage: this.maximumPage,
-				pageSize: this.pageSize,
-				total: this.total,
-				totalPages: this.totalPages,
-			}
-		},
-		component() {
-			const isFlexLogical = 2 * (this.adjacentAmount + 1) < this.pageAmount
-			if (!isFlexLogical || this.pageAmount < 2) return 'PaginationExpanded'
-
-			if (this.fractionStyle) {
-				// eslint-disable-next-line no-console
-				console.warn(
-					"<KtPagination>: fractionStyle is deprecated, please use :pagingStyle='fraction' instead",
-				)
-				return PaginationFractionated.name
-			}
-
-			switch (this.pagingStyle) {
-				case 'flex':
-					return PaginationFlexible.name
-				case 'fraction':
-					return PaginationFractionated.name
-				default:
-					return PaginationExpanded.name
-			}
-		},
-		maximumPage() {
-			return Math.ceil(this.total / this.pageSize) - 1
-		},
-		pageAmount() {
-			return Math.ceil(this.total / this.pageSize)
-		},
-	},
-	methods: {
-		paginatorClasses(page, className) {
-			return {
-				'page-item': true,
-				[className]: this.currentPage === page,
-			}
-		},
-		setCurrentPage(page) {
-			if (page === this.currentPage) return
-			this.currentPage = page
-			this.eventEmitter('currentPageChange')
-		},
-		nextPage() {
-			if (this.currentPage === this.maximumPage) return
-			this.currentPage += 1
-			this.eventEmitter('nextPageClicked')
-		},
-		previousPage() {
-			if (this.currentPage === 0) return
-			this.currentPage -= 1
-			this.eventEmitter('previousPageClicked')
-		},
-		eventEmitter(eventName) {
-			this.$emit(eventName, this.currentPage + 1)
-		},
-	},
-}
+})
 </script>
 
 <style lang="scss">
-@import '../kotti-style/_variables.scss';
-
 :root {
-	--pagination-color-active: var(--interactive-03);
+	--kt-pagination-color-active: var(--interactive-03);
 }
-.pagination {
+</style>
+
+<style lang="scss" scoped>
+.kt-pagination {
 	margin: 0;
 	list-style: none;
 	user-select: none;
-	.page-button {
+	&__page-button {
 		display: inline-block;
 		padding: var(--unit-1);
-		background: $lightgray-300;
+		background: var(--gray-10);
 		border-radius: var(--border-radius);
 		&:hover {
 			cursor: pointer;
-			background: $lightgray-400;
+			background: var(--gray-20);
 		}
 	}
-	.fraction {
-		display: inline-block;
-	}
-	.page-item {
+	::v-deep &__page-item {
 		display: inline-block;
 		padding: var(--unit-2);
 		line-height: 24px;
 		text-align: center;
-		&--active {
-			color: var(--pagination-color-active);
+		&--is-active {
+			color: var(--kt-pagination-color-active);
+		}
+		&--is-disabled {
+			cursor: not-allowed;
+
+			.kt-pagination__page-button {
+				opacity: 0.46;
+			}
 		}
 		&:hover {
 			cursor: pointer;
 		}
 	}
-
-	.disabled {
-		cursor: not-allowed;
-
-		.page-button {
-			opacity: 0.46;
-		}
-	}
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-pagination/components/PaginationExpanded.vue b/packages/kotti-ui/source/kotti-pagination/components/PaginationExpanded.vue
index ea7ea47569..ecfa73cebf 100644
--- a/packages/kotti-ui/source/kotti-pagination/components/PaginationExpanded.vue
+++ b/packages/kotti-ui/source/kotti-pagination/components/PaginationExpanded.vue
@@ -1,47 +1,46 @@
 <template>
-	<div class="inline-container">
+	<div class="kt-pagination__inline-container">
 		<li
 			v-for="(page, index) in totalPages"
 			:key="index"
-			:class="paginatorClasses(page, 'page-item--active')"
+			:class="paginatorClasses(page)"
 			@click="$emit('setPage', page)"
 			v-text="humanReadablePageNumber(page)"
 		/>
 	</div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+import range from 'lodash/range'
+
+export default defineComponent<{
+	currentPage: number
+	pageSize: number
+	total: number
+}>({
 	name: 'PaginationExpanded',
 	props: {
 		currentPage: { type: Number, required: true },
 		pageSize: { type: Number, required: true },
 		total: { type: Number, required: true },
 	},
-	computed: {
-		pageAmount() {
-			return Math.ceil(this.total / this.pageSize)
-		},
-		totalPages() {
-			return [...Array(this.pageAmount).keys()]
-		},
-	},
-	methods: {
-		humanReadablePageNumber(page) {
-			return page + 1
-		},
-		paginatorClasses(page, className) {
-			return {
-				'page-item': true,
-				[className]: this.currentPage === page,
-			}
-		},
+	setup(props) {
+		const pageAmount = computed(() => Math.ceil(props.total / props.pageSize))
+		return {
+			humanReadablePageNumber: (page: number) => page + 1,
+			paginatorClasses: (page: number) => ({
+				'kt-pagination__page-item': true,
+				'kt-pagination__page-item--is-active': props.currentPage === page,
+			}),
+			totalPages: computed(() => range(pageAmount.value)),
+		}
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
-.inline-container {
+.kt-pagination__inline-container {
 	display: inline;
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-pagination/components/PaginationFlexible.vue b/packages/kotti-ui/source/kotti-pagination/components/PaginationFlexible.vue
index e3bf782eb6..1172b37281 100644
--- a/packages/kotti-ui/source/kotti-pagination/components/PaginationFlexible.vue
+++ b/packages/kotti-ui/source/kotti-pagination/components/PaginationFlexible.vue
@@ -1,41 +1,52 @@
 <template>
-	<div class="inline-container" :style="containerStyle">
+	<div class="kt-pagination__inline-container" :style="containerStyle">
 		<li
 			v-if="showFirstPage"
-			:class="paginatorClasses(0, 'page-item--active')"
+			:class="paginatorClasses(0)"
 			@click="$emit('setPage', 0)"
 			v-text="humanReadablePageNumber(0)"
 		/>
-		<li v-if="showLeftDots" class="c-auto-important page-item" v-text="'...'" />
+		<li
+			v-if="showLeftDots"
+			class="c-auto-important kt-pagination__page-item"
+			v-text="'...'"
+		/>
 		<li
 			v-for="(page, index) in neighborValues"
 			:key="index"
-			:class="paginatorClasses(page, 'page-item--active')"
+			:class="paginatorClasses(page)"
 			@click="$emit('setPage', page)"
 			v-text="humanReadablePageNumber(page)"
 		/>
 		<li
 			v-if="showRightDots"
-			class="c-auto-important page-item"
+			class="c-auto-important kt-pagination__page-item"
 			v-text="'...'"
 		/>
 		<li
 			v-if="showLastPage"
-			:class="paginatorClasses(maximumPage, 'page-item--active')"
+			:class="paginatorClasses(maximumPage)"
 			@click="$emit('setPage', maximumPage)"
 			v-text="humanReadablePageNumber(maximumPage)"
 		/>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+import range from 'lodash/range'
 const ADJACENT_MULTIPLIER = 20
 const BASE_NUMBER_WIDTH = 24.5
 const BASE_OFFSET = 3
 const MAX_NUMBER_OF_ELEMENTS = 5
 const PIXEL_MULTIPLIER = 2.8
 
-export default {
+export default defineComponent<{
+	adjacentAmount: number
+	currentPage: number
+	fixedWidth: boolean
+	maximumPage: number
+}>({
 	name: 'PaginationFlexible',
 	props: {
 		adjacentAmount: { type: Number, required: true },
@@ -43,79 +54,61 @@ export default {
 		fixedWidth: { type: Boolean, required: true },
 		maximumPage: { type: Number, required: true },
 	},
-	computed: {
-		pixelMargin() {
-			const digitWidth = this.maximumPage.toString().length - 1
+	setup(props) {
+		const pixelMargin = computed(() => {
+			const digitWidth = props.maximumPage.toString().length - 1
 			const numberWidth = BASE_NUMBER_WIDTH + digitWidth * PIXEL_MULTIPLIER
 			const baseElementsWidth =
-				(2 * this.adjacentAmount + MAX_NUMBER_OF_ELEMENTS) * numberWidth
-			const adjacentPagesOffset = this.adjacentAmount * ADJACENT_MULTIPLIER
+				(2 * props.adjacentAmount + MAX_NUMBER_OF_ELEMENTS) * numberWidth
+			const adjacentPagesOffset = props.adjacentAmount * ADJACENT_MULTIPLIER
 			return baseElementsWidth + BASE_OFFSET * 2 + adjacentPagesOffset
-		},
-		containerStyle() {
-			return this.fixedWidth ? { width: `${this.pixelMargin}px` } : {}
-		},
-		showFirstPage() {
-			return !this.neighborValues.includes(0)
-		},
-		showLeftDots() {
-			return this.showFirstPage && !this.neighborValues.includes(1)
-		},
-		showRightDots() {
-			return (
-				this.showLastPage && !this.neighborValues.includes(this.maximumPage - 1)
-			)
-		},
-		showLastPage() {
-			return !this.neighborValues.includes(this.maximumPage)
-		},
-		neighborValues() {
-			let min = this.currentPage
-			let max = this.currentPage
-
-			for (let i = 0; i < this.adjacentAmount; i++) {
-				const canJumpLeft = min > 0
-				const canJumpRight = max < this.maximumPage
+		})
 
-				if (canJumpLeft) min -= 1
-				else if (canJumpRight) max += 1
-				else break
+		const neighborValues = computed(() => {
+			const center = ((): number => {
+				if (props.currentPage - props.adjacentAmount < 1)
+					return props.adjacentAmount + 1
+				if (props.currentPage + props.adjacentAmount > props.maximumPage - 2)
+					return props.maximumPage - props.adjacentAmount - 1
+				return props.currentPage
+			})()
+			const start = Math.max(0, center - props.adjacentAmount)
+			const end = Math.min(props.maximumPage, center + props.adjacentAmount)
+			return range(start, end + 1)
+		})
 
-				if (canJumpRight) max += 1
-				else if (canJumpLeft) min -= 1
-				else break
-			}
+		const showFirstPage = computed(() => !neighborValues.value.includes(0))
+		const showLastPage = computed(
+			() => !neighborValues.value.includes(props.maximumPage),
+		)
 
-			const values = []
-			for (let i = min; i <= max; i++) values.push(i)
-
-			/**
-			 * Snippet to reduce width variations around edges
-			 */
-			if (this.currentPage >= this.maximumPage - this.adjacentAmount)
-				values.unshift(this.maximumPage - 2 * this.adjacentAmount - 1)
-			if (this.currentPage <= this.adjacentAmount)
-				values.push(2 * this.adjacentAmount + 1)
-
-			return values
-		},
+		return {
+			containerStyle: computed(
+				() => props.fixedWidth && { width: `${pixelMargin.value}px` },
+			),
+			humanReadablePageNumber: (page: number) => page + 1,
+			neighborValues,
+			paginatorClasses: (page: number) => ({
+				'kt-pagination__page-item': true,
+				'kt-pagination__page-item--is-active': props.currentPage === page,
+			}),
+			showFirstPage,
+			showLastPage,
+			showLeftDots: computed(
+				() => showFirstPage.value && !neighborValues.value.includes(1),
+			),
+			showRightDots: computed(
+				() =>
+					showLastPage.value &&
+					!neighborValues.value.includes(props.maximumPage - 1),
+			),
+		}
 	},
-	methods: {
-		paginatorClasses(page, className) {
-			return {
-				'page-item': true,
-				[className]: this.currentPage === page,
-			}
-		},
-		humanReadablePageNumber(page) {
-			return page + 1
-		},
-	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
-.inline-container {
+.kt-pagination__inline-container {
 	display: inline-flex;
 	justify-content: center;
 }
diff --git a/packages/kotti-ui/source/kotti-pagination/components/PaginationFractionated.vue b/packages/kotti-ui/source/kotti-pagination/components/PaginationFractionated.vue
index 3089bfca80..eeace6d494 100644
--- a/packages/kotti-ui/source/kotti-pagination/components/PaginationFractionated.vue
+++ b/packages/kotti-ui/source/kotti-pagination/components/PaginationFractionated.vue
@@ -1,20 +1,31 @@
 <template>
-	<li class="fraction" v-text="fractionRep" />
+	<li class="kt-pagination__fractionated" v-text="fractionRep" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+
+export default defineComponent<{
+	currentPage: number
+	maximumPage: number
+}>({
 	name: 'PaginationFractionated',
 	props: {
 		currentPage: { type: Number, required: true },
 		maximumPage: { type: Number, required: true },
 	},
-	computed: {
-		fractionRep() {
-			return [this.currentPage, this.maximumPage]
-				.map((page) => page + 1)
-				.join(' / ')
-		},
+	setup(props) {
+		return {
+			fractionRep: computed(
+				() => `${props.currentPage + 1} / ${props.maximumPage + 1}`,
+			),
+		}
 	},
-}
+})
 </script>
+
+<style lang="scss" scoped>
+.kt-pagination__fractionated {
+	display: inline-block;
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-pagination/index.ts b/packages/kotti-ui/source/kotti-pagination/index.ts
index 57ab2cd6e0..4ad4b3858c 100644
--- a/packages/kotti-ui/source/kotti-pagination/index.ts
+++ b/packages/kotti-ui/source/kotti-pagination/index.ts
@@ -2,6 +2,7 @@ import { MetaDesignType } from '../types/kotti'
 import { attachMeta, makeInstallable } from '../utilities'
 
 import KtPaginationVue from './KtPagination.vue'
+import { KottiPagination } from './types'
 
 export const KtPagination = attachMeta(makeInstallable(KtPaginationVue), {
 	addedVersion: '0.0.6',
@@ -11,5 +12,8 @@ export const KtPagination = attachMeta(makeInstallable(KtPaginationVue), {
 		url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=101%3A1106',
 	},
 	slots: {},
-	typeScript: null,
+	typeScript: {
+		namespace: 'KottiPagination',
+		schema: KottiPagination.propsSchema,
+	},
 })
diff --git a/packages/kotti-ui/source/kotti-pagination/types.ts b/packages/kotti-ui/source/kotti-pagination/types.ts
new file mode 100644
index 0000000000..bc2f8040b9
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-pagination/types.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod'
+
+export namespace KottiPagination {
+	export enum PagingStyle {
+		EXPAND = 'expand',
+		FLEX = 'flex',
+		FRACTION = 'fraction',
+	}
+
+	export const propsSchema = z.object({
+		adjacentAmount: z.number().default(1),
+		fixedWidth: z.boolean().default(false),
+		page: z.number().default(1),
+		pageSize: z.number().default(10),
+		pagingStyle: z.nativeEnum(PagingStyle).default(PagingStyle.EXPAND),
+		total: z.number(),
+	})
+
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
+}
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index f7878d7e00..2998b87399 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -46,6 +46,7 @@ export { KottiI18n as I18n } from '../kotti-i18n/types'
 export { KottiLine as Line } from '../kotti-line/types'
 export { KottiModal as Modal } from '../kotti-modal/types'
 export { KottiNavbar as Navbar } from '../kotti-navbar/types'
+export { KottiPagination as Pagination } from '../kotti-pagination/types'
 export { KottiPopover as Popover } from '../kotti-popover/types'
 export { KottiRow as Row } from '../kotti-row/types'
 export { KottiUserMenu as UserMenu } from '../kotti-user-menu/types'