diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 490b05d88..3366e53ba 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,7 +38,7 @@ module.exports = {
 		'vue/no-undef-components': [
 			'error',
 			{
-				ignorePatterns: [],
+				ignorePatterns: ['.*-.*'],
 			},
 		],
 	},
diff --git a/src/frontend/Comments/BaseCommentsLogInto.vue b/src/frontend/Comments/BaseCommentsLogInto.vue
new file mode 100644
index 000000000..098acbbad
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsLogInto.vue
@@ -0,0 +1,5 @@
+<template><PkpButton>Log in to comment</PkpButton></template>
+
+<script setup>
+import PkpButton from '../components/PkpButton/PkpButton.vue';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessage.vue b/src/frontend/Comments/BaseCommentsMessage.vue
new file mode 100644
index 000000000..7486b5da5
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessage.vue
@@ -0,0 +1,11 @@
+<template>
+	<div>
+		<slot :message="message"></slot>
+	</div>
+</template>
+<script setup>
+import {provide} from 'vue';
+
+const props = defineProps({message: {type: Object, required: true}});
+provide('currentMessage', props.message);
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageActions.vue b/src/frontend/Comments/BaseCommentsMessageActions.vue
new file mode 100644
index 000000000..db7c25d52
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageActions.vue
@@ -0,0 +1,9 @@
+<template>
+	<DropdownActions button-variant="ellipsis" :items="items" />
+</template>
+<script setup>
+import {ref} from 'vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+
+const items = ref([]);
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageAuthor.vue b/src/frontend/Comments/BaseCommentsMessageAuthor.vue
new file mode 100644
index 000000000..89a081813
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageAuthor.vue
@@ -0,0 +1,3 @@
+<template>
+	<div><slot></slot></div>
+</template>
diff --git a/src/frontend/Comments/BaseCommentsMessageAuthorAffiliation.vue b/src/frontend/Comments/BaseCommentsMessageAuthorAffiliation.vue
new file mode 100644
index 000000000..a300a9654
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageAuthorAffiliation.vue
@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.affiliation }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageAuthorName.vue b/src/frontend/Comments/BaseCommentsMessageAuthorName.vue
new file mode 100644
index 000000000..f63a451b8
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageAuthorName.vue
@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.name }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageAuthorOrcid.vue b/src/frontend/Comments/BaseCommentsMessageAuthorOrcid.vue
new file mode 100644
index 000000000..b471b2f78
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageAuthorOrcid.vue
@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.orcid }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageBody.vue b/src/frontend/Comments/BaseCommentsMessageBody.vue
new file mode 100644
index 000000000..673e28f6c
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageBody.vue
@@ -0,0 +1,11 @@
+<template>
+	<span>
+		{{ currentMessage.body }}
+	</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+const currentMessage = inject('currentMessage');
+
+console.log('currentMessage:', currentMessage);
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageDate.vue b/src/frontend/Comments/BaseCommentsMessageDate.vue
new file mode 100644
index 000000000..2b53b323a
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageDate.vue
@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.date }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessageProvider.vue b/src/frontend/Comments/BaseCommentsMessageProvider.vue
new file mode 100644
index 000000000..c89237680
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessageProvider.vue
@@ -0,0 +1,16 @@
+<template>
+	<slot />
+</template>
+
+<script setup>
+import {provide} from 'vue';
+
+const props = defineProps({
+	message: {
+		type: Object,
+		required: true,
+	},
+});
+console.log('providing:', props.message);
+provide('currentMessage', props.message);
+</script>
diff --git a/src/frontend/Comments/BaseCommentsMessages.vue b/src/frontend/Comments/BaseCommentsMessages.vue
new file mode 100644
index 000000000..3000268f5
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsMessages.vue
@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<template v-for="message in messages">
+			<slot name="item" :message="message"></slot>
+		</template>
+	</div>
+</template>
+<script setup>
+const messages = [
+	{
+		id: 1,
+		date: '2023-01-01',
+		body: 'This is a great article!',
+		author: {
+			name: 'John Doe',
+			orcid: '0000-0001-2345-6789',
+			affiliation: 'University of Example',
+		},
+	},
+	{
+		id: 2,
+		date: '2023-01-02',
+		body: 'Interesting points raised here.',
+		author: {
+			name: 'Jane Smith',
+			orcid: '0000-0002-3456-7890',
+			affiliation: 'Research Institute',
+		},
+	},
+];
+</script>
diff --git a/src/frontend/Comments/BaseCommentsNew.vue b/src/frontend/Comments/BaseCommentsNew.vue
new file mode 100644
index 000000000..972c89729
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsNew.vue
@@ -0,0 +1,5 @@
+<template>
+	<div>
+		<slot></slot>
+	</div>
+</template>
diff --git a/src/frontend/Comments/BaseCommentsNewInput.vue b/src/frontend/Comments/BaseCommentsNewInput.vue
new file mode 100644
index 000000000..9d419db01
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsNewInput.vue
@@ -0,0 +1,4 @@
+<template><PkpTextarea /></template>
+<script setup>
+import PkpTextarea from '../components/PkpTextarea/PkpTextarea.vue';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsNewSubmit.vue b/src/frontend/Comments/BaseCommentsNewSubmit.vue
new file mode 100644
index 000000000..08df0a0f0
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsNewSubmit.vue
@@ -0,0 +1,5 @@
+<template><PkpButton>Submit</PkpButton></template>
+
+<script setup>
+import PkpButton from '../components/PkpButton/PkpButton.vue';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsVersion.vue b/src/frontend/Comments/BaseCommentsVersion.vue
new file mode 100644
index 000000000..9312a85d5
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersion.vue
@@ -0,0 +1,6 @@
+<template>
+	<AccordionItem><slot /></AccordionItem>
+</template>
+<script setup>
+import {AccordionItem} from 'reka-ui';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsVersionContent.vue b/src/frontend/Comments/BaseCommentsVersionContent.vue
new file mode 100644
index 000000000..45c0a2a5c
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersionContent.vue
@@ -0,0 +1,6 @@
+<template>
+	<AccordionContent><slot></slot></AccordionContent>
+</template>
+<script setup>
+import {AccordionContent} from 'reka-ui';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsVersionHeader.vue b/src/frontend/Comments/BaseCommentsVersionHeader.vue
new file mode 100644
index 000000000..576f0dae3
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersionHeader.vue
@@ -0,0 +1,8 @@
+<template>
+	<AccordionHeader>
+		<slot></slot>
+	</AccordionHeader>
+</template>
+<script setup>
+import {AccordionHeader} from 'reka-ui';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsVersionHeaderChevron.vue b/src/frontend/Comments/BaseCommentsVersionHeaderChevron.vue
new file mode 100644
index 000000000..da424b0f2
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersionHeaderChevron.vue
@@ -0,0 +1 @@
+<template><span>▼</span></template>
diff --git a/src/frontend/Comments/BaseCommentsVersionHeaderLabel.vue b/src/frontend/Comments/BaseCommentsVersionHeaderLabel.vue
new file mode 100644
index 000000000..bebf61760
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersionHeaderLabel.vue
@@ -0,0 +1 @@
+<template><span>Version N</span></template>
diff --git a/src/frontend/Comments/BaseCommentsVersionHeaderTrigger.vue b/src/frontend/Comments/BaseCommentsVersionHeaderTrigger.vue
new file mode 100644
index 000000000..5c2bd7410
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersionHeaderTrigger.vue
@@ -0,0 +1,8 @@
+<template>
+	<AccordionTrigger>
+		<slot></slot>
+	</AccordionTrigger>
+</template>
+<script setup>
+import {AccordionTrigger} from 'reka-ui';
+</script>
diff --git a/src/frontend/Comments/BaseCommentsVersions.vue b/src/frontend/Comments/BaseCommentsVersions.vue
new file mode 100644
index 000000000..5ffcb9153
--- /dev/null
+++ b/src/frontend/Comments/BaseCommentsVersions.vue
@@ -0,0 +1,6 @@
+<template>
+	<AccordionRoot collapsible type="multiple"><slot></slot></AccordionRoot>
+</template>
+<script setup>
+import {AccordionRoot} from 'reka-ui';
+</script>
diff --git a/src/frontend/Comments/Comments.stories.js b/src/frontend/Comments/Comments.stories.js
new file mode 100644
index 000000000..0745db6a2
--- /dev/null
+++ b/src/frontend/Comments/Comments.stories.js
@@ -0,0 +1,15 @@
+import Comments from './PkpComments.vue';
+
+export default {
+	title: 'Comments',
+	component: Comments,
+	render: (args) => ({
+		components: {Comments},
+		setup() {
+			return {args};
+		},
+		template: '<Comments v-bind="args"></Comments>',
+	}),
+};
+
+export const Primary = {};
diff --git a/src/frontend/Comments/PkpComments copy.vue b/src/frontend/Comments/PkpComments copy.vue
new file mode 100644
index 000000000..9be9b9a51
--- /dev/null
+++ b/src/frontend/Comments/PkpComments copy.vue	
@@ -0,0 +1,59 @@
+<template>
+	<PkpBaseCommentsVersions>
+		<PkpBaseCommentsVersion>
+			<PkpBaseCommentsVersionHeader>
+				<PkpBaseCommentsVersionHeaderTrigger>
+					<PkpBaseCommentsVersionHeaderLabel></PkpBaseCommentsVersionHeaderLabel>
+					<PkpBaseCommentsVersionHeaderChevron></PkpBaseCommentsVersionHeaderChevron>
+				</PkpBaseCommentsVersionHeaderTrigger>
+			</PkpBaseCommentsVersionHeader>
+			<PkpBaseCommentsVersionContent>
+				<PkpBaseCommentsLogInto></PkpBaseCommentsLogInto>
+				<PkpBaseCommentsNew>
+					<PkpBaseCommentsNewInput></PkpBaseCommentsNewInput>
+					<PkpBaseCommentsNewSubmit></PkpBaseCommentsNewSubmit>
+				</PkpBaseCommentsNew>
+				<PkpBaseCommentsMessages>
+					<template #item="data">
+						<PkpBaseCommentsMessage v-bind="data">
+							<PkpBaseCommentsMessageDate></PkpBaseCommentsMessageDate>
+							<PkpBaseCommentsMessageActions></PkpBaseCommentsMessageActions>
+							<PkpBaseCommentsMessageBody></PkpBaseCommentsMessageBody>
+
+							<PkpBaseCommentsMessageAuthor>
+								<PkpBaseCommentsMessageAuthorName></PkpBaseCommentsMessageAuthorName>
+								<PkpBaseCommentsMessageAuthorOrcid></PkpBaseCommentsMessageAuthorOrcid>
+								<PkpBaseCommentsMessageAuthorAffiliation></PkpBaseCommentsMessageAuthorAffiliation>
+							</PkpBaseCommentsMessageAuthor>
+						</PkpBaseCommentsMessage>
+					</template>
+				</PkpBaseCommentsMessages>
+			</PkpBaseCommentsVersionContent>
+		</PkpBaseCommentsVersion>
+	</PkpBaseCommentsVersions>
+</template>
+
+<script setup>
+import PkpBaseCommentsVersions from './PkpBaseCommentsVersions.vue';
+import PkpBaseCommentsVersion from './PkpBaseCommentsVersion.vue';
+import PkpBaseCommentsNew from './PkpBaseCommentsNew.vue';
+import PkpBaseCommentsNewInput from './PkpBaseCommentsNewInput.vue';
+import PkpBaseCommentsNewSubmit from './PkpBaseCommentsNewSubmit.vue';
+import PkpBaseCommentsVersionHeader from './PkpBaseCommentsVersionHeader.vue';
+import PkpBaseCommentsVersionHeaderTrigger from './PkpBaseCommentsVersionHeaderTrigger.vue';
+import PkpBaseCommentsVersionHeaderLabel from './PkpBaseCommentsVersionHeaderLabel.vue';
+import PkpBaseCommentsVersionHeaderChevron from './PkpBaseCommentsVersionHeaderChevron.vue';
+
+import PkpBaseCommentsVersionContent from './PkpBaseCommentsVersionContent.vue';
+
+import PkpBaseCommentsLogInto from './PkpBaseCommentsLogInto.vue';
+import PkpBaseCommentsMessages from './PkpBaseCommentsMessages.vue';
+import PkpBaseCommentsMessage from './PkpBaseCommentsMessage.vue';
+import PkpBaseCommentsMessageDate from './PkpBaseCommentsMessageDate.vue';
+import PkpBaseCommentsMessageActions from './PkpBaseCommentsMessageActions.vue';
+import PkpBaseCommentsMessageBody from './PkpBaseCommentsMessageBody.vue';
+import PkpBaseCommentsMessageAuthor from './PkpBaseCommentsMessageAuthor.vue';
+import PkpBaseCommentsMessageAuthorName from './PkpBaseCommentsMessageAuthorName.vue';
+import PkpBaseCommentsMessageAuthorOrcid from './PkpBaseCommentsMessageAuthorOrcid.vue';
+import PkpBaseCommentsMessageAuthorAffiliation from './PkpBaseCommentsMessageAuthorAffiliation.vue';
+</script>
diff --git a/src/frontend/Comments/PkpComments.vue b/src/frontend/Comments/PkpComments.vue
new file mode 100644
index 000000000..4a7ea3244
--- /dev/null
+++ b/src/frontend/Comments/PkpComments.vue
@@ -0,0 +1,78 @@
+<template>
+	<PkpBaseCommentsVersions>
+		<PkpBaseCommentsVersion class="w-96">
+			<PkpBaseCommentsVersionHeader>
+				<PkpBaseCommentsVersionHeaderTrigger
+					class="group flex w-full justify-between"
+				>
+					<PkpBaseCommentsVersionHeaderLabel></PkpBaseCommentsVersionHeaderLabel>
+					<PkpBaseCommentsVersionHeaderChevron
+						class="inline-block transition-transform duration-300 group-data-[state=open]:rotate-180"
+					></PkpBaseCommentsVersionHeaderChevron>
+				</PkpBaseCommentsVersionHeaderTrigger>
+			</PkpBaseCommentsVersionHeader>
+			<PkpBaseCommentsVersionContent>
+				<PkpBaseCommentsLogInto></PkpBaseCommentsLogInto>
+				<PkpBaseCommentsNew>
+					<PkpBaseCommentsNewInput></PkpBaseCommentsNewInput>
+					<PkpBaseCommentsNewSubmit class="my-2"></PkpBaseCommentsNewSubmit>
+				</PkpBaseCommentsNew>
+				<PkpBaseCommentsMessages class="flex flex-col gap-y-2">
+					<template #item="item">
+						<PkpBaseCommentsMessage
+							v-bind="item"
+							class="rounded bg-default p-4"
+						>
+							<div class="flex justify-between">
+								<PkpBaseCommentsMessageDate
+									class="text-sm-light"
+								></PkpBaseCommentsMessageDate>
+								<PkpBaseCommentsMessageActions></PkpBaseCommentsMessageActions>
+							</div>
+							<PkpBaseCommentsMessageBody
+								class="mt-2 block text-lg-normal"
+							></PkpBaseCommentsMessageBody>
+
+							<PkpBaseCommentsMessageAuthor class="mt-2 flex flex-col">
+								<PkpBaseCommentsMessageAuthorName
+									class="text-base-bold"
+								></PkpBaseCommentsMessageAuthorName>
+								<PkpBaseCommentsMessageAuthorOrcid
+									class="text-xs-normal"
+								></PkpBaseCommentsMessageAuthorOrcid>
+								<PkpBaseCommentsMessageAuthorAffiliation
+									class="text-sm-light"
+								></PkpBaseCommentsMessageAuthorAffiliation>
+							</PkpBaseCommentsMessageAuthor>
+						</PkpBaseCommentsMessage>
+					</template>
+				</PkpBaseCommentsMessages>
+			</PkpBaseCommentsVersionContent>
+		</PkpBaseCommentsVersion>
+	</PkpBaseCommentsVersions>
+</template>
+
+<script setup>
+import PkpBaseCommentsVersions from './PkpBaseCommentsVersions.vue';
+import PkpBaseCommentsVersion from './PkpBaseCommentsVersion.vue';
+import PkpBaseCommentsNew from './PkpBaseCommentsNew.vue';
+import PkpBaseCommentsNewInput from './PkpBaseCommentsNewInput.vue';
+import PkpBaseCommentsNewSubmit from './PkpBaseCommentsNewSubmit.vue';
+import PkpBaseCommentsVersionHeader from './PkpBaseCommentsVersionHeader.vue';
+import PkpBaseCommentsVersionHeaderTrigger from './PkpBaseCommentsVersionHeaderTrigger.vue';
+import PkpBaseCommentsVersionHeaderLabel from './PkpBaseCommentsVersionHeaderLabel.vue';
+import PkpBaseCommentsVersionHeaderChevron from './PkpBaseCommentsVersionHeaderChevron.vue';
+
+import PkpBaseCommentsVersionContent from './PkpBaseCommentsVersionContent.vue';
+
+import PkpBaseCommentsLogInto from './PkpBaseCommentsLogInto.vue';
+import PkpBaseCommentsMessages from './PkpBaseCommentsMessages.vue';
+import PkpBaseCommentsMessage from './PkpBaseCommentsMessage.vue';
+import PkpBaseCommentsMessageDate from './PkpBaseCommentsMessageDate.vue';
+import PkpBaseCommentsMessageActions from './PkpBaseCommentsMessageActions.vue';
+import PkpBaseCommentsMessageBody from './PkpBaseCommentsMessageBody.vue';
+import PkpBaseCommentsMessageAuthor from './PkpBaseCommentsMessageAuthor.vue';
+import PkpBaseCommentsMessageAuthorName from './PkpBaseCommentsMessageAuthorName.vue';
+import PkpBaseCommentsMessageAuthorOrcid from './PkpBaseCommentsMessageAuthorOrcid.vue';
+import PkpBaseCommentsMessageAuthorAffiliation from './PkpBaseCommentsMessageAuthorAffiliation.vue';
+</script>
diff --git a/src/frontend/Comments/usePkpCommentsStore.js b/src/frontend/Comments/usePkpCommentsStore.js
new file mode 100644
index 000000000..05a539953
--- /dev/null
+++ b/src/frontend/Comments/usePkpCommentsStore.js
@@ -0,0 +1,20 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+export const usePkpCommentsStore = defineStore('comments', () => {
+	const messages = ref([
+		{
+			body: 'blabla',
+			author: {name: 'name author', affiliation: 'affiliation', orcid: null},
+		},
+		{
+			body: 'blabla 2',
+			author: {
+				name: 'name author 2',
+				affiliation: 'affiliation 2',
+				orcid: null,
+			},
+		},
+	]);
+
+	return {messages};
+});
diff --git a/src/frontend/components/PkpButton/BaseButton.vue b/src/frontend/components/PkpButton/BaseButton.vue
new file mode 100644
index 000000000..09e2a0686
--- /dev/null
+++ b/src/frontend/components/PkpButton/BaseButton.vue
@@ -0,0 +1,14 @@
+<template>
+	<button v-bind="$attrs" :data-type="isSecondary ? 'secondary' : 'primary'">
+		<slot />
+	</button>
+</template>
+
+<script setup>
+defineProps({
+	isSecondary: {
+		type: Boolean,
+		default: false,
+	},
+});
+</script>
diff --git a/src/frontend/components/PkpButton/PkpButton.vue b/src/frontend/components/PkpButton/PkpButton.vue
index f0d58f61c..62b824b82 100644
--- a/src/frontend/components/PkpButton/PkpButton.vue
+++ b/src/frontend/components/PkpButton/PkpButton.vue
@@ -1,26 +1,9 @@
 <template>
-	<button :class="buttonClass" v-bind="$attrs">
-		<slot name="left-icon" />
-		<slot />
-	</button>
+	<BaseButton class="pkpButton" v-bind="$attrs"><slot /></BaseButton>
 </template>
 
 <script setup>
-import {computed} from 'vue';
-
-const props = defineProps({
-	isSecondary: {
-		type: Boolean,
-		default: false,
-	},
-});
-
-const buttonClass = computed(() => {
-	return [
-		'pkpButton',
-		props.isSecondary ? 'pkpButton--secondary' : 'pkpButton--primary',
-	];
-});
+import BaseButton from './BaseButton.vue';
 </script>
 
 <style>
@@ -43,34 +26,35 @@ const buttonClass = computed(() => {
 	border-color: var(--pkp-color-transparent);
 }
 
-.pkpButton--primary {
+.pkpButton[data-type='primary'] {
 	background-color: var(--pkp-color-primary);
 	color: var(--pkp-text-color-on-dark);
 }
 
-.pkpButton--primary:hover {
+.pkpButton[data-type='primary']:hover {
 	background-color: var(--pkp-color-hover);
 }
 
-.pkpButton--primary:disabled {
+.pkpButton[data-type='primary']:disabled {
 	background-color: var(--pkp-background-color-disabled);
 }
 
-.pkpButton--secondary {
+.pkpButton[data-type='secondary'] {
 	background-color: var(--pkp-color-transparent);
 	border-color: var(--pkp-color-primary);
 	color: var(--pkp-color-primary);
 }
 
-.pkpButton--secondary:hover {
+.pkpButton[data-type='secondary']:hover {
 	background-color: var(--pkp-color-primary);
 	border-color: var(--pkp-color-primary);
 	color: var(--pkp-text-color-on-dark);
 }
 
-.pkpButton--secondary:disabled {
+.pkpButton[data-type='secondary']:disabled {
 	background-color: var(--pkp-color-transparent);
 	border-color: var(--pkp-text-color-disabled);
 	color: var(--pkp-text-color-disabled);
 }
 </style>
+./BaseButton.vue
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialog.vue b/src/frontend/components/PkpDialog/PkpBaseDialog.vue
new file mode 100644
index 000000000..2e13bf750
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialog.vue
@@ -0,0 +1,42 @@
+<template>
+	<DialogRoot :open="opened">
+		<DialogPortal><slot></slot></DialogPortal>
+	</DialogRoot>
+</template>
+
+<script setup>
+import {ref, provide} from 'vue';
+import {DialogRoot, DialogPortal} from 'reka-ui';
+
+const props = defineProps({
+	/** Used only internally, don't pass this prop via openDialog */
+	opened: {type: Boolean, default: false},
+	/** Title of the dialog */
+	title: {type: String, required: false, default: ''},
+	/** Message to be displayed, for more complex messages use bodyComponent&bodyProps */
+	message: {type: String, default: null},
+	/** For more complex messages Vue.js component can be passed */
+	bodyComponent: {type: Object, default: null},
+	/** Props to be passed to bodyComponent */
+	bodyProps: {type: Object, default: null},
+	/** Array of button props to display actions, following props are passed to button component: label, element, href, isPrimary, isWarnable, callback */
+	actions: {type: Array, default: () => []},
+});
+
+const emit = defineEmits(['close']);
+
+// for components that doesn't manually handle loading state
+const isDialogLoading = ref(props.isLoading);
+
+function fireCallback(callback) {
+	isDialogLoading.value = true;
+	if (typeof callback === 'function') {
+		callback(() => {
+			emit('close');
+		});
+	}
+}
+
+provide('dialogProps', props);
+provide('fireCallback', fireCallback);
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialogActionButtons.vue b/src/frontend/components/PkpDialog/PkpBaseDialogActionButtons.vue
new file mode 100644
index 000000000..b14d26fd1
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialogActionButtons.vue
@@ -0,0 +1,21 @@
+<template>
+	<div>
+		<PkpButton
+			v-for="action in dialogProps.actions"
+			:key="action.label"
+			:href="action.href || null"
+			:is-primary="action.isPrimary || null"
+			:is-secondary="action.isSecondary || null"
+			@click="action.callback ? fireCallback(action.callback) : null"
+		>
+			{{ action.label }}
+		</PkpButton>
+	</div>
+</template>
+<script setup>
+import {inject} from 'vue';
+import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
+
+const dialogProps = inject('dialogProps');
+const fireCallback = inject('fireCallback');
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialogBody.vue b/src/frontend/components/PkpDialog/PkpBaseDialogBody.vue
new file mode 100644
index 000000000..b3c1789a1
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialogBody.vue
@@ -0,0 +1,20 @@
+<template>
+	<DialogDescription as-child>
+		<component
+			:is="dialogProps.bodyComponent"
+			v-if="dialogProps.bodyComponent"
+			v-bind="{...dialogProps.bodyProps, message, onClose}"
+		/>
+		<div
+			v-else
+			v-strip-unsafe-html="dialogProps.message"
+			class="pkpDialogBody__message"
+		/>
+	</DialogDescription>
+</template>
+<script setup>
+import {inject} from 'vue';
+import {DialogDescription} from 'reka-ui';
+
+const dialogProps = inject('dialogProps');
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialogContent.vue b/src/frontend/components/PkpDialog/PkpBaseDialogContent.vue
new file mode 100644
index 000000000..5611286f1
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialogContent.vue
@@ -0,0 +1,9 @@
+<template>
+	<DialogContent>
+		<slot></slot>
+	</DialogContent>
+</template>
+
+<script setup>
+import {DialogContent} from 'reka-ui';
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialogOverlay.vue b/src/frontend/components/PkpDialog/PkpBaseDialogOverlay.vue
new file mode 100644
index 000000000..0c6e07aac
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialogOverlay.vue
@@ -0,0 +1,9 @@
+<template>
+	<DialogOverlay>
+		<slot></slot>
+	</DialogOverlay>
+</template>
+
+<script setup>
+import {DialogOverlay} from 'reka-ui';
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpBaseDialogTitle.vue b/src/frontend/components/PkpDialog/PkpBaseDialogTitle.vue
new file mode 100644
index 000000000..8677e1959
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpBaseDialogTitle.vue
@@ -0,0 +1,9 @@
+<template>
+	<DialogTitle>{{ dialogProps.title }}</DialogTitle>
+</template>
+<script setup>
+import {inject} from 'vue';
+import {DialogTitle} from 'reka-ui';
+
+const dialogProps = inject('dialogProps');
+</script>
diff --git a/src/frontend/components/PkpDialog/PkpDialog.stories.js b/src/frontend/components/PkpDialog/PkpDialog.stories.js
new file mode 100644
index 000000000..1d47ff605
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpDialog.stories.js
@@ -0,0 +1,39 @@
+import PkpDialog from './PkpDialog.vue';
+
+export default {
+	title: 'PkpDialog',
+	component: PkpDialog,
+	render: (args) => ({
+		components: {PkpDialog},
+		setup() {
+			return {args};
+		},
+		template: '<PkpDialog v-bind="args"></PkpDialog>',
+	}),
+};
+
+export const Primary = {
+	args: {
+		open: true,
+		buttonName: 'Basic Example',
+		name: 'basic',
+		title: 'Submit Article',
+		message: 'Are you sure you want to submit this article?',
+		actions: [
+			{
+				label: 'Confirm',
+				isPrimary: true,
+				callback: (close) => {
+					// Simulate a server request
+					setTimeout(() => close(), 2000);
+				},
+			},
+			{
+				label: 'Cancel',
+				isSeconadary: true,
+				callback: (close) => close(),
+			},
+		],
+		modalStyle: 'basic',
+	},
+};
diff --git a/src/frontend/components/PkpDialog/PkpDialog.vue b/src/frontend/components/PkpDialog/PkpDialog.vue
new file mode 100644
index 000000000..ebc65b414
--- /dev/null
+++ b/src/frontend/components/PkpDialog/PkpDialog.vue
@@ -0,0 +1,79 @@
+<template>
+	<PkpBaseDialog v-bind="$attrs">
+		<PkpBaseDialogOverlay class="dialog-overlay"></PkpBaseDialogOverlay>
+		<PkpBaseDialogContent class="dialog-content">
+			<PkpBaseDialogTitle></PkpBaseDialogTitle>
+			<PkpBaseDialogBody></PkpBaseDialogBody>
+			<PkpBaseDialogActionButtons></PkpBaseDialogActionButtons>
+		</PkpBaseDialogContent>
+	</PkpBaseDialog>
+</template>
+
+<script setup>
+import PkpBaseDialog from './PkpBaseDialog.vue';
+import PkpBaseDialogContent from './PkpBaseDialogContent.vue';
+import PkpBaseDialogOverlay from './PkpBaseDialogOverlay.vue';
+import PkpBaseDialogTitle from './PkpBaseDialogTitle.vue';
+import PkpBaseDialogBody from './PkpBaseDialogBody.vue';
+import PkpBaseDialogActionButtons from './PkpBaseDialogActionButtons.vue';
+
+//defineProps({title: {type: String, required: true}});
+</script>
+
+<style scoped>
+.dialog-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 30;
+	background-color: var(--bg-tertiary, rgba(0, 0, 0, 0.5));
+}
+
+.dialog-overlay[data-state='open'] {
+	animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dialog-content {
+	background-color: white;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 100;
+	max-height: 85vh;
+	width: 90vw;
+	max-width: 450px;
+	transform: translate(-50%, -50%);
+	border-radius: 6px;
+	padding: 25px;
+	box-shadow:
+		hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+}
+
+.dialog-content:focus {
+	outline: none;
+}
+
+.dialog-content[data-state='open'] {
+	animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes overlayShow {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes contentShow {
+	from {
+		opacity: 0;
+		transform: translate(-50%, -48%) scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+</style>
diff --git a/src/frontend/components/PkpDropdownActions/PkpDropdownActions.vue b/src/frontend/components/PkpDropdownActions/PkpDropdownActions.vue
deleted file mode 100644
index ebd47f4cd..000000000
--- a/src/frontend/components/PkpDropdownActions/PkpDropdownActions.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-	<DropdownMenuRoot>
-		<DropdownMenuTrigger as-child>
-			<button class="pkpDropdownActions__trigger">
-				<PkpIcon class="pkpDropdownActions__triggerIcon" icon="MoreOptions" />
-			</button>
-		</DropdownMenuTrigger>
-		<DropdownMenuPortal>
-			<DropdownMenuContent class="pkpDropdownActions__content">
-				<DropdownMenuItem
-					v-for="item in props.items"
-					:key="item.label"
-					class="pkpDropdownActions__item"
-					:disabled="item.disabled"
-					@click="handleClick(item)"
-				>
-					{{ item.label }}
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenuPortal>
-	</DropdownMenuRoot>
-</template>
-
-<script setup>
-import {
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuPortal,
-} from 'reka-ui';
-import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
-import {defineProps, defineEmits} from 'vue';
-
-const props = defineProps({
-	items: {
-		type: Array,
-		default: () => [
-			{
-				label: 'Edit',
-				name: 'edit',
-				disabled: false,
-			},
-			{
-				label: 'Notify',
-				name: 'notify',
-				disabled: false,
-			},
-			{
-				label: 'Login As',
-				name: 'login_as',
-				disabled: false,
-			},
-			{
-				label: 'Remove',
-				name: 'remove',
-				disabled: false,
-			},
-		],
-	},
-});
-
-const emit = defineEmits(['select']);
-
-const handleClick = (item) => {
-	if (item.disabled) return;
-	if (item.actionFn) {
-		item.actionFn();
-	} else {
-		emit('select', item.name || item.label);
-	}
-};
-</script>
-
-<style>
-.pkpDropdownActions__trigger {
-	background-color: var(--pkp-background-color-transparent);
-	border: var(--pkp-border-color-transparent);
-	cursor: pointer;
-	color: var(--pkp-text-color-secondary);
-	padding: var(--pkp-spacing-2);
-	border-radius: var(--pkp-radius);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.pkpDropdownActions__triggerIcon {
-	height: calc(
-		1.5 * var(--pkp-text-base-size)
-	); /* Adjust for typical close X size, e.g., 24px */
-	width: calc(1.5 * var(--pkp-text-base-size));
-}
-
-.pkpDropdownActions__trigger:hover {
-	background-color: var(--pkp-background-color-tertiary);
-}
-
-.pkpDropdownActions__content {
-	background-color: var(--pkp-background-color-secondary);
-	border-radius: var(--pkp-radius);
-	box-shadow: var(--pkp-shadow);
-	padding: var(--pkp-spacing-1);
-	min-width: 160px;
-	z-index: 50;
-}
-
-.pkpDropdownActions__item {
-	display: flex;
-	align-items: center;
-	padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
-	cursor: pointer;
-	font: var(--pkp-font-base-normal);
-	color: var(--pkp-text-color-default);
-	border-radius: var(--pkp-radius);
-}
-
-.pkpDropdownActions__item:hover:not([data-disabled]) {
-	background-color: var(--pkp-background-color-selection-light);
-}
-
-.pkpDropdownActions__item[data-disabled] {
-	color: var(--pkp-text-color-disabled);
-	cursor: not-allowed;
-}
-</style>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenu.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenu.vue
new file mode 100644
index 000000000..0b3892407
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenu.vue
@@ -0,0 +1,52 @@
+<template>
+	<DropdownMenuRoot>
+		<slot />
+	</DropdownMenuRoot>
+</template>
+
+<script setup>
+import {DropdownMenuRoot} from 'reka-ui';
+import {provide} from 'vue';
+
+const props = defineProps({
+	items: {
+		type: Array,
+		default: () => [
+			{
+				label: 'Edit',
+				name: 'edit',
+				disabled: false,
+			},
+			{
+				label: 'Notify',
+				name: 'notify',
+				disabled: false,
+			},
+			{
+				label: 'Login As',
+				name: 'login_as',
+				disabled: false,
+			},
+			{
+				label: 'Remove',
+				name: 'remove',
+				disabled: false,
+			},
+		],
+	},
+});
+
+const emit = defineEmits(['select']);
+
+const handleClick = (item) => {
+	if (item.disabled) return;
+	if (item.actionFn) {
+		item.actionFn();
+	} else {
+		emit('select', item.name || item.label);
+	}
+};
+
+provide('items', props.items);
+provide('handleClick', handleClick);
+</script>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItem.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItem.vue
new file mode 100644
index 000000000..8028a55f7
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItem.vue
@@ -0,0 +1,14 @@
+<template>
+	<DropdownMenuItem :disabled="item.disabled" @click="handleClick(item)">
+		<slot />
+	</DropdownMenuItem>
+</template>
+<script setup>
+import {provide, inject} from 'vue';
+import {DropdownMenuItem} from 'reka-ui';
+
+const props = defineProps({item: {type: Object, required: true}});
+console.log('item:', props.item);
+provide('item', props.item);
+const handleClick = inject('handleClick');
+</script>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItemLabel.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItemLabel.vue
new file mode 100644
index 000000000..fbe7bd8c5
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItemLabel.vue
@@ -0,0 +1,8 @@
+<template>
+	<span>{{ item.label }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const item = inject('item');
+</script>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItems.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItems.vue
new file mode 100644
index 000000000..d876de4ad
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuItems.vue
@@ -0,0 +1,17 @@
+<template>
+	<DropdownMenuPortal>
+		<DropdownMenuContent v-bind="$attrs">
+			<template v-for="item in items" :key="item.name">
+				<slot :item="item" />
+			</template>
+		</DropdownMenuContent>
+	</DropdownMenuPortal>
+</template>
+<script setup>
+defineOptions({
+	inheritAttrs: false, // Disable attribute inheritance for the root element
+});
+import {inject} from 'vue';
+import {DropdownMenuContent, DropdownMenuPortal} from 'reka-ui';
+const items = inject('items');
+</script>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuLabel.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuLabel.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTrigger.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTrigger.vue
new file mode 100644
index 000000000..cfdc9fdd6
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTrigger.vue
@@ -0,0 +1,10 @@
+<template>
+	<DropdownMenuTrigger as-child>
+		<button class="pkpDropdownActions__trigger">
+			<slot />
+		</button>
+	</DropdownMenuTrigger>
+</template>
+<script setup>
+import {DropdownMenuTrigger} from 'reka-ui';
+</script>
diff --git a/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTriggerIcon.vue b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTriggerIcon.vue
new file mode 100644
index 000000000..b61c45030
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/BaseDropdownMenuTriggerIcon.vue
@@ -0,0 +1,3 @@
+<template>
+	<PkpIcon class="pkpDropdownActions__triggerIcon" icon="MoreOptions" />
+</template>
diff --git a/src/frontend/components/PkpDropdownMenu/PkpDropdownMenu.vue b/src/frontend/components/PkpDropdownMenu/PkpDropdownMenu.vue
new file mode 100644
index 000000000..d31e2e623
--- /dev/null
+++ b/src/frontend/components/PkpDropdownMenu/PkpDropdownMenu.vue
@@ -0,0 +1,77 @@
+<template>
+	<BaseDropdownMenu v-bind="$attrs">
+		<BaseDropdownMenuTrigger class="pkpDropdownActions__trigger">
+			<BaseDropdownMenuTriggerIcon class="pkpDropdownActions__triggerIcon" />
+		</BaseDropdownMenuTrigger>
+		<BaseDropdownMenuItems
+			v-slot="slotProps"
+			class="pkpDropdownActions__content"
+		>
+			<BaseDropdownMenuItem v-bind="slotProps" class="pkpDropdownActions__item">
+				<BaseDropdownMenuItemLabel />
+			</BaseDropdownMenuItem>
+		</BaseDropdownMenuItems>
+	</BaseDropdownMenu>
+</template>
+
+<script setup>
+import BaseDropdownMenu from './BaseDropdownMenu.vue';
+import BaseDropdownMenuTrigger from './BaseDropdownMenuTrigger.vue';
+import BaseDropdownMenuTriggerIcon from './BaseDropdownMenuTriggerIcon.vue';
+import BaseDropdownMenuItems from './BaseDropdownMenuItems.vue';
+import BaseDropdownMenuItem from './BaseDropdownMenuItem.vue';
+import BaseDropdownMenuItemLabel from './BaseDropdownMenuItemLabel.vue';
+</script>
+
+<style>
+.pkpDropdownActions__trigger {
+	background-color: var(--pkp-background-color-transparent);
+	border: var(--pkp-border-color-transparent);
+	cursor: pointer;
+	color: var(--pkp-text-color-secondary);
+	padding: var(--pkp-spacing-2);
+	border-radius: var(--pkp-radius);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pkpDropdownActions__triggerIcon {
+	height: calc(
+		1.5 * var(--pkp-text-base-size)
+	); /* Adjust for typical close X size, e.g., 24px */
+	width: calc(1.5 * var(--pkp-text-base-size));
+}
+
+.pkpDropdownActions__trigger:hover {
+	background-color: var(--pkp-background-color-tertiary);
+}
+
+.pkpDropdownActions__content {
+	background-color: var(--pkp-background-color-secondary);
+	border-radius: var(--pkp-radius);
+	box-shadow: var(--pkp-shadow);
+	padding: var(--pkp-spacing-1);
+	min-width: 160px;
+	z-index: 50;
+}
+
+.pkpDropdownActions__item {
+	display: flex;
+	align-items: center;
+	padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
+	cursor: pointer;
+	font: var(--pkp-font-base-normal);
+	color: var(--pkp-text-color-default);
+	border-radius: var(--pkp-radius);
+}
+
+.pkpDropdownActions__item:hover:not([data-disabled]) {
+	background-color: var(--pkp-background-color-selection-light);
+}
+
+.pkpDropdownActions__item[data-disabled] {
+	color: var(--pkp-text-color-disabled);
+	cursor: not-allowed;
+}
+</style>
diff --git a/src/frontend/components/PkpHelloWorld/PkpHelloWorld.vue b/src/frontend/components/PkpHelloWorld/PkpHelloWorld.vue
index 200e60e4d..cf401698b 100644
--- a/src/frontend/components/PkpHelloWorld/PkpHelloWorld.vue
+++ b/src/frontend/components/PkpHelloWorld/PkpHelloWorld.vue
@@ -5,13 +5,23 @@
 		<div>
 			<PkpButton @click="openDialog1">open dialog</PkpButton>
 		</div>
+		<div>
+			<PkpButton @click="openDialog2">open dialog 2</PkpButton>
+		</div>
+
 		<div>
 			<PkpButton is-secondary @click="openModal1">open modal</PkpButton>
 		</div>
 		<div>
 			<PkpAccordion title="Version 2">content</PkpAccordion>
 		</div>
-		<div><PkpDropdownActions :items="dropdownItems"></PkpDropdownActions></div>
+		<div>
+			<PkpDropdownMenu
+				:items="dropdownItems"
+				@select="handleSelect"
+			></PkpDropdownMenu>
+		</div>
+
 		<div>
 			<PkpTextarea
 				v-model="textAreaValue"
@@ -22,10 +32,11 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
 import PkpAccordion from '@/frontend/components/PkpAccordion/PkpAccordion.vue';
-import PkpDropdownActions from '@/frontend/components/PkpDropdownActions/PkpDropdownActions.vue';
+import PkpDropdownMenu from '@/frontend/components/PkpDropdownMenu/PkpDropdownMenu.vue';
+
 import {usePkpModal} from '@/frontend/composables/usePkpModal';
 import PkpHelloWorldModal from '@/frontend/components/PkpHelloWorld/PkpHelloWorldModal.vue';
 import PkpTextarea from '@/frontend/components/PkpTextarea/PkpTextarea.vue';
@@ -43,6 +54,20 @@ function openDialog1() {
 		title: 'DialogTitle',
 		message: 'Testing dialog',
 		isDismissible: false,
+		actions: [
+			{
+				label: 'Ok',
+				callback: (close) => openDialog2(),
+			},
+		],
+	});
+}
+
+function openDialog2() {
+	openDialog({
+		title: 'DialogTitle2',
+		message: 'Testing dialog2',
+		isDismissible: false,
 		actions: [
 			{
 				label: 'Ok',
@@ -56,7 +81,12 @@ function openModal1() {
 	openModal(PkpHelloWorldModal);
 }
 
+function handleSelect(item) {
+	console.log('selecting stuff', item);
+}
+
 const textAreaValue = ref('');
+watch(textAreaValue, (newValue) => console.log('newValue:', newValue));
 </script>
 
 <style>
diff --git a/src/frontend/components/PkpModal/PkpDialog.vue b/src/frontend/components/PkpModal/PkpDialog.vue
index 4bac55330..0030e22fd 100644
--- a/src/frontend/components/PkpModal/PkpDialog.vue
+++ b/src/frontend/components/PkpModal/PkpDialog.vue
@@ -93,17 +93,6 @@ const props = defineProps({
 		validator: (value) =>
 			['primary', 'negative', 'success', 'basic'].includes(value),
 	},
-	/** Defines if clicking outside the modal should close it */
-	isDismissible: {
-		type: Boolean,
-		default: () => true,
-	},
-	/** Defines if the close button (x) should be shown */
-	/** If not set, the close button will be shown if there are no actions */
-	showCloseButton: {
-		type: Boolean,
-		default: undefined,
-	},
 });
 
 const shouldShowCloseButton = computed(() => {
diff --git a/src/frontend/components/PkpModal/PkpModalManager.vue b/src/frontend/components/PkpModal/PkpModalManager.vue
index bce4288b4..a7a0a9dcc 100644
--- a/src/frontend/components/PkpModal/PkpModalManager.vue
+++ b/src/frontend/components/PkpModal/PkpModalManager.vue
@@ -1,150 +1,39 @@
 <template>
-	<PkpModal
+	<pkp-dialog
+		v-if="modal1?.props"
 		:key="modal1?.modalId"
-		:data-cy="activeModalId === modal1?.modalId ? 'active-modal' : undefined"
 		close-label="Close"
 		:open="modal1?.opened || false"
-		:modal-level="1"
+		v-bind="modal1?.props"
 		@close="(returnData) => close(modal1?.modalId, returnData)"
-	>
-		<component :is="component1" v-bind="modal1?.props" />
-		<PkpDialog
-			:key="JSON.stringify(dialogProps)"
-			:opened="dialogOpened && dialogLevel === 1"
-			v-bind="dialogProps"
-			@close="closeDialog"
-		></PkpDialog>
-
-		<PkpModal
-			:key="modal2?.modalId"
-			close-label="Close"
-			:data-cy="activeModalId === modal2?.modalId ? 'active-modal' : undefined"
-			:modal-level="2"
-			:open="modal2?.opened || false"
-			@close="(returnData) => close(modal2?.modalId, returnData)"
-		>
-			<component
-				:is="component2"
-				:key="modal2?.modalId"
-				v-bind="modal2?.props"
-			/>
-			<PkpDialog
-				:key="JSON.stringify(dialogProps)"
-				:opened="dialogOpened && dialogLevel === 2"
-				v-bind="dialogProps"
-				@close="closeDialog"
-			></PkpDialog>
-			<PkpModal
-				:data-cy="
-					activeModalId === modal3?.modalId ? 'active-modal' : undefined
-				"
-				close-label="Close"
-				:modal-level="3"
-				:open="modal3?.opened || false"
-				@close="(returnData) => close(modal3?.modalId, returnData)"
-			>
-				<component
-					:is="component3"
-					:key="modal3?.modalId"
-					v-bind="modal3?.props"
-				/>
-				<PkpDialog
-					:key="JSON.stringify(dialogProps)"
-					:opened="dialogOpened && dialogLevel === 3"
-					v-bind="dialogProps"
-					@close="closeDialog"
-				></PkpDialog>
-				<PkpModal
-					:data-cy="
-						activeModalId === modal4?.modalId ? 'active-modal' : undefined
-					"
-					close-label="Close"
-					:modal-level="4"
-					:open="modal4?.opened || false"
-					@close="(returnData) => close(modal4?.modalId, returnData)"
-				>
-					<component
-						:is="component4"
-						:key="modal4?.modalId"
-						v-bind="modal4?.props"
-					/>
-					<PkpDialog
-						:key="JSON.stringify(dialogProps)"
-						:opened="dialogOpened && dialogLevel === 4"
-						v-bind="dialogProps"
-						@close="closeDialog"
-					></PkpDialog>
-				</PkpModal>
-			</PkpModal>
-		</PkpModal>
-	</PkpModal>
-	<PkpDialog
-		:key="JSON.stringify(dialogProps)"
-		:opened="dialogOpened && dialogLevel === 0"
-		v-bind="dialogProps"
-		@close="closeDialog"
-	></PkpDialog>
+	></pkp-dialog>
+	<pkp-dialog
+		v-if="modal2?.props"
+		:key="modal2?.modalId"
+		close-label="Close"
+		:open="modal2?.opened || false"
+		v-bind="modal2?.props"
+		@close="(returnData) => close(modal2?.modalId, returnData)"
+	></pkp-dialog>
+	<pkp-dialog
+		v-if="modal3?.props"
+		:key="modal3?.modalId"
+		close-label="Close"
+		:open="modal3?.opened || false"
+		v-bind="modal3?.props"
+		@close="(returnData) => close(modal3?.modalId, returnData)"
+	></pkp-dialog>
 </template>
 
 <script setup>
-import {computed} from 'vue';
 import {usePkpModalStore} from '@/frontend/stores/pkpModalStore';
 import {storeToRefs} from 'pinia';
-import PkpModal from '@/frontend/components/PkpModal/PkpModal.vue';
-import PkpDialog from '@/frontend/components/PkpModal/PkpDialog.vue';
 
 const modalStore = usePkpModalStore();
-const {modal1, modal2, modal3, modal4, dialogProps, dialogOpened, dialogLevel} =
-	storeToRefs(usePkpModalStore());
-
-const activeModalId = computed(() => {
-	if (modal4.value?.opened) {
-		return modal4.value.modalId;
-	} else if (modal3.value?.opened) {
-		return modal3.value.modalId;
-	} else if (modal2.value?.opened) {
-		return modal2.value.modalId;
-	} else if (modal1.value?.opened) {
-		return modal1.value.modalId;
-	}
-
-	return null;
-});
-
-// Component can be either string or vue component
-const component1 = computed(() => {
-	if (!modal1.value?.component) {
-		return null;
-	}
-	return modal1.value.component;
-});
-
-const component2 = computed(() => {
-	if (!modal2.value?.component) {
-		return null;
-	}
-	return modal2.value.component;
-});
-
-const component3 = computed(() => {
-	if (!modal3.value?.component) {
-		return null;
-	}
-	return modal3.value.component;
-});
-
-const component4 = computed(() => {
-	if (!modal4.value?.component) {
-		return null;
-	}
-	return modal4.value.component;
-});
+const {modal1, modal2, modal3} = storeToRefs(usePkpModalStore());
 
 function close(modalId, returnData) {
+	console.log('close manager triggered');
 	modalStore.closeModalById(modalId, returnData);
 }
-
-function closeDialog() {
-	modalStore.closeDialog();
-}
 </script>
diff --git a/src/frontend/components/PkpTextarea/BaseTextarea.vue b/src/frontend/components/PkpTextarea/BaseTextarea.vue
new file mode 100644
index 000000000..306a70247
--- /dev/null
+++ b/src/frontend/components/PkpTextarea/BaseTextarea.vue
@@ -0,0 +1,31 @@
+<template>
+	<div><slot></slot></div>
+</template>
+<script setup>
+import {provide, useId} from 'vue';
+const props = defineProps({
+	label: {
+		type: String,
+		default: '',
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	placeholder: {
+		type: String,
+		default: '',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+const textAreaId = useId();
+
+provide('textAreaProps', props);
+provide('textAreaEmit', emit);
+provide('textAreaId', textAreaId);
+</script>
diff --git a/src/frontend/components/PkpTextarea/BaseTextareaInput.vue b/src/frontend/components/PkpTextarea/BaseTextareaInput.vue
new file mode 100644
index 000000000..12b8f396c
--- /dev/null
+++ b/src/frontend/components/PkpTextarea/BaseTextareaInput.vue
@@ -0,0 +1,17 @@
+<template>
+	<textarea
+		:id="textAreaId"
+		class="pkpTextarea__element"
+		:value="props.modelValue"
+		:placeholder="props.placeholder"
+		:disabled="props.disabled"
+		@input="emit('update:modelValue', $event.target.value)"
+	/>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const props = inject('textAreaProps');
+const emit = inject('textAreaEmit');
+const textAreaId = inject('textAreaId');
+</script>
diff --git a/src/frontend/components/PkpTextarea/BaseTextareaLabel.vue b/src/frontend/components/PkpTextarea/BaseTextareaLabel.vue
new file mode 100644
index 000000000..e8e4531c6
--- /dev/null
+++ b/src/frontend/components/PkpTextarea/BaseTextareaLabel.vue
@@ -0,0 +1,13 @@
+<template>
+	<Label class="pkpTextarea__label" :for="textAreaId">
+		{{ props.label }}
+	</Label>
+</template>
+<script setup>
+import {Label} from 'reka-ui';
+
+import {inject} from 'vue';
+
+const props = inject('textAreaProps');
+const textAreaId = inject('textAreaId');
+</script>
diff --git a/src/frontend/components/PkpTextarea/PkpTextarea.vue b/src/frontend/components/PkpTextarea/PkpTextarea.vue
index 8667f0e9e..9b1174f31 100644
--- a/src/frontend/components/PkpTextarea/PkpTextarea.vue
+++ b/src/frontend/components/PkpTextarea/PkpTextarea.vue
@@ -1,56 +1,14 @@
 <template>
-	<div class="pkpTextarea">
-		<Label
-			class="pkpTextarea__label"
-			:class="{'-screenReader': isLabelSrOnly}"
-			:for="textareaId"
-		>
-			{{ props.label }}
-		</Label>
-		<textarea
-			:id="textareaId"
-			class="pkpTextarea__element"
-			:value="props.modelValue"
-			:placeholder="props.placeholder"
-			:disabled="props.disabled"
-			@input="$emit('update:modelValue', $event.target.value)"
-		/>
-	</div>
+	<BaseTextarea v-bind="$attrs" class="pkpTextarea">
+		<BaseTextareaLabel class="pkpTextarea__label" />
+		<BaseTextareaInput class="pkpTextarea__element" />
+	</BaseTextarea>
 </template>
-
 <script setup>
-import {Label} from 'reka-ui';
-import {defineProps, defineEmits, useId} from 'vue';
-
-const props = defineProps({
-	label: {
-		type: String,
-		default: '',
-	},
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	placeholder: {
-		type: String,
-		default: '',
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	// Whether the label should be visually hidden but still accessible to screen readers
-	isLabelSrOnly: {
-		type: Boolean,
-		default: false,
-	},
-});
-
-defineEmits(['update:modelValue']);
-
-const textareaId = useId();
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaLabel from './BaseTextareaLabel.vue';
+import BaseTextareaInput from './BaseTextareaInput.vue';
 </script>
-
 <style>
 .pkpTextarea {
 	display: flex;
diff --git a/src/frontend/composables/usePkpFetch.js b/src/frontend/composables/usePkpFetch.js
index a89967666..e652aa4a9 100644
--- a/src/frontend/composables/usePkpFetch.js
+++ b/src/frontend/composables/usePkpFetch.js
@@ -1,6 +1,7 @@
 import {ref, unref} from 'vue';
 import {ofetch, createFetch} from 'ofetch';
 import {useDebounceFn} from '@vueuse/core';
+import {usePkpModal} from '@/frontend/composables/usePkpModal';
 
 let ofetchInstance = ofetch;
 
@@ -86,6 +87,7 @@ export function usePkpFetch(url, options = {}) {
 	const query = ref(_query || {});
 	const body = ref(_body || undefined);
 
+	const {openModalNetworkError} = usePkpModal();
 	const isLoading = ref(false);
 	const data = ref(null);
 	const isSuccess = ref(null);
@@ -150,8 +152,7 @@ export function usePkpFetch(url, options = {}) {
 				data.value = null;
 				return;
 			}
-			// replace some other option
-			// modalStore.openDialogNetworkError(e);
+			openModalNetworkError(e);
 		} finally {
 			isLoading.value = false;
 		}
diff --git a/src/frontend/composables/usePkpModal.js b/src/frontend/composables/usePkpModal.js
index 86d06f4ea..2cdc27a3c 100644
--- a/src/frontend/composables/usePkpModal.js
+++ b/src/frontend/composables/usePkpModal.js
@@ -6,40 +6,24 @@ import {usePkpModalStore} from '@/frontend/stores/pkpModalStore';
 export function usePkpModal() {
 	const modalStore = usePkpModalStore();
 
-	/**
-	 * Open a dialog modal
-	 * @param {Object} props - Properties for the dialog
-	 * @param {string} props.title - Dialog title
-	 * @param {string} [props.message] - Dialog message
-	 * @param {Object} [props.actions] - Actions configuration for the dialog
-	 */
-	function openDialog(props) {
-		modalStore.openDialog(props);
-	}
-
-	/**
-	 * Close the currently opened dialog modal
-	 */
-	function closeDialog() {
-		modalStore.closeDialog();
-	}
-
 	/**
 	 * Open a side modal component
-	 * @param {Object|string} component - The component to render in the side modal
 	 * @param {Object} [props] - Properties to pass to the component
+ 	 * @param {string} [props.message] - message
+	 * @param {Object} [props.actions] - Actions configuration
+
 	 * @param {Object} [opts] - Additional options for the side modal
 	 */
-	function openModal(component, props, opts) {
-		modalStore.openModal(component, props, opts);
+	function openModal(props, opts) {
+		modalStore.openModal(props, opts);
 	}
 
 	/**
 	 * Open a network error dialog
 	 * @param {Object} fetchError - The error object from a failed fetch operation
 	 */
-	function openDialogNetworkError(fetchError) {
-		modalStore.openDialogNetworkError(fetchError);
+	function openModalNetworkError(fetchError) {
+		modalStore.openModalNetworkError(fetchError);
 	}
 
 	/**
@@ -60,10 +44,8 @@ export function usePkpModal() {
 	}
 
 	return {
-		openDialog,
-		closeDialog,
 		openModal,
-		openDialogNetworkError,
+		openModalNetworkError,
 		closeModal,
 		isModalOpened,
 	};
diff --git a/src/frontend/stores/pkpModalStore.js b/src/frontend/stores/pkpModalStore.js
index f2aa39840..eaf3db5a6 100644
--- a/src/frontend/stores/pkpModalStore.js
+++ b/src/frontend/stores/pkpModalStore.js
@@ -1,54 +1,15 @@
 import {defineStore} from 'pinia';
-import {ref, markRaw, computed} from 'vue';
+import {ref} from 'vue';
 import {t} from '@/utils/i18n';
 export const usePkpModalStore = defineStore('pkpModal', () => {
-	/**
-	 * Dialog Level
-	 *
-	 * Because Modal from headlessui requires to be correctly nested
-	 * Dialog is also available inside ModalBody and level helps to track
-	 * which of the existing dialogs should open
-	 */
-
-	const dialogLevel = computed(() => {
-		if (modal4?.value?.opened) {
-			return 4;
-		} else if (modal3?.value?.opened) {
-			return 3;
-		} else if (modal2?.value?.opened) {
-			return 2;
-		} else if (modal1?.value?.opened) {
-			return 1;
-		}
-		return 0;
-	});
-	/** dialogProps coming from openDialog */
-	const dialogProps = ref({});
-	const dialogOpened = ref(false);
-
-	function openDialog(_dialogProps) {
-		if (_dialogProps.bodyComponent) {
-			_dialogProps.bodyComponent = markRaw(_dialogProps.bodyComponent);
-		}
-		dialogProps.value = _dialogProps;
-		dialogOpened.value = true;
-	}
-	function closeDialog(triggerLegacyCloseHandler = true) {
-		if (triggerLegacyCloseHandler && dialogProps.value.closeLegacyHandler) {
-			dialogProps.value.closeLegacyHandler();
-		}
-		dialogProps.value = {};
-		dialogOpened.value = false;
-	}
-
 	/** Default network error */
-	function openDialogNetworkError(fetchError) {
+	function openModalNetworkError(fetchError) {
 		const msg =
 			fetchError?.data?.errorMessage ||
 			fetchError?.data?.error ||
 			t('common.unknownError');
 
-		openDialog({
+		openModal({
 			name: 'ajaxError',
 			title: t('common.error'),
 			message: msg,
@@ -84,19 +45,11 @@ export const usePkpModalStore = defineStore('pkpModal', () => {
 
 	/**
 	 *
-	 * @param {*} _component
 	 * @param {*} props
 	 * @param {*} options - modalId: explicit ID coming from legacy stack, onClose: function to be called after modal is closed
 	 */
-	function openModal(_component, props = {}, options = {}) {
+	function openModal(props = {}, options = {}) {
 		modalIdCounter++;
-		let component = null;
-		if (typeof _component !== 'string') {
-			// avoid making vue component object reactive which would be unnecessary performance hit
-			component = markRaw(_component);
-		} else {
-			component = _component;
-		}
 
 		// modalId is either calculated internally or its comming from the legacy handler if its legacy modal
 		const modalId = options?.modalId ? options?.modalId : modalIdCounter;
@@ -104,7 +57,6 @@ export const usePkpModalStore = defineStore('pkpModal', () => {
 		const opts = {
 			modalId,
 			opened: true,
-			component,
 			props,
 			onClose: options.onClose,
 		};
@@ -181,18 +133,12 @@ export const usePkpModalStore = defineStore('pkpModal', () => {
 			if (!modalToClose.value?.opened) {
 				modalToClose.value = null;
 			}
-		}, 450);
+		}, 700);
 	}
 
 	return {
-		/** dialog level */
-		dialogLevel,
 		/** opening dialog */
-		dialogProps,
-		dialogOpened,
-		openDialogNetworkError,
-		openDialog,
-		closeDialog,
+		openModalNetworkError,
 		openModal,
 		closeModal,
 		closeModalById,
diff --git a/src/styles/_global.less b/src/styles/_global.less
index c3e283632..c6f40f8e2 100644
--- a/src/styles/_global.less
+++ b/src/styles/_global.less
@@ -84,3 +84,192 @@
 @import 'variables';
 @import 'helpers';
 @import 'elements/screen-reader';
+
+:root {
+	--pkp-spacing: 0.25rem;
+	--pkp-text-base-size: 1rem;
+	--pkp-color-primary: #006798;
+	--pkp-color-hover: #0082bf;
+	--pkp-color-attention: #d00a0a;
+	--pkp-color-success: #00b24e;
+	--pkp-color-negative: #d00a6c;
+	--pkp-color-transparent: transparent;
+	--pkp-background-color-default: #eaedee;
+	--pkp-background-color-secondary: #ffffff;
+	--pkp-background-color-tertiary: rgba(234, 237, 238, 0.3);
+	--pkp-background-color-blur: rgba(0, 0, 0, 0.5);
+	--pkp-background-color-selection-light: #d5e9f2;
+	--pkp-background-color-selection-dark: #002c40;
+	--pkp-background-color-disabled: rgba(28, 27, 31, 0.1);
+	--pkp-text-color-default: #222222;
+	--pkp-text-color-secondary: #505050;
+	--pkp-text-color-heading: #01354f;
+	--pkp-text-color-disabled: #4e4f4f;
+	--pkp-text-color-on-dark: #ffffff;
+	--pkp-border-color-dark: #696969;
+	--pkp-border-color-light: #bbbbbb;
+	--pkp-border-color-form-fields: #777777;
+	--pkp-border-color-transparent: transparent;
+	--pkp-radius: 4px;
+	--pkp-radius-full: 9999px;
+	--pkp-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+	--pkp-font:
+		'Noto Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	/** 10px */
+	--pkp-text-xs-normal: calc(0.625 * var(--pkp-text-base-size));
+	--pkp-text-xs-normal--line-height: calc(0.75 * var(--pkp-text-base-size));
+	--pkp-text-xs-normal--font-weight: 400;
+	/** 11px */
+	--pkp-text-sm-light: calc(0.6875 * var(--pkp-text-base-size));
+	--pkp-text-sm-light--line-height: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-sm-light--font-weight: 300;
+	--pkp-text-sm-normal: calc(0.6875 * var(--pkp-text-base-size));
+	--pkp-text-sm-normal--line-height: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-sm-normal--font-weight: 400;
+	/** 12px */
+	--pkp-text-base-light: calc(0.75 * var(--pkp-text-base-size));
+	--pkp-text-base-light--line-height: calc(1 * var(--pkp-text-base-size));
+	--pkp-text-base-light--font-weight: 300;
+	--pkp-text-base-normal: calc(0.75 * var(--pkp-text-base-size));
+	--pkp-text-base-normal--line-height: calc(1 * var(--pkp-text-base-size));
+	--pkp-text-base-normal--font-weight: 400;
+	--pkp-text-base-bold: calc(0.75 * var(--pkp-text-base-size));
+	--pkp-text-base-bold--line-height: calc(1 * var(--pkp-text-base-size));
+	--pkp-text-base-bold--font-weight: 700;
+	/** 14px */
+	--pkp-text-lg-normal: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-lg-normal--line-height: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-lg-normal--font-weight: 400;
+	--pkp-text-lg-medium: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-lg-medium--line-height: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-lg-medium--font-weight: 500;
+	--pkp-text-lg-semibold: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-lg-semibold--line-height: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-lg-semibold--font-weight: 600;
+	--pkp-text-lg-bold: calc(0.875 * var(--pkp-text-base-size));
+	--pkp-text-lg-bold--line-height: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-lg-bold--font-weight: 700;
+	/** 16px */
+	--pkp-text-xl-bold: calc(1 * var(--pkp-text-base-size));
+	--pkp-text-xl-bold--line-height: calc(1.5 * var(--pkp-text-base-size));
+	--pkp-text-xl-bold--font-weight: 700;
+	/** 18px */
+	--pkp-text-2xl-bold: calc(1.125 * var(--pkp-text-base-size));
+	--pkp-text-2xl-bold--line-height: calc(1.75 * var(--pkp-text-base-size));
+	--pkp-text-2xl-bold--font-weight: 700;
+	/** 20px */
+	--pkp-text-3xl-normal: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-3xl-normal--line-height: calc(1.75 * var(--pkp-text-base-size));
+	--pkp-text-3xl-normal--font-weight: 400;
+	--pkp-text-3xl-medium: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-3xl-medium--line-height: calc(1.75 * var(--pkp-text-base-size));
+	--pkp-text-3xl-medium--font-weight: 500;
+	--pkp-text-3xl-bold: calc(1.25 * var(--pkp-text-base-size));
+	--pkp-text-3xl-bold--line-height: calc(1.75 * var(--pkp-text-base-size));
+	--pkp-text-3xl-bold--font-weight: 700;
+	/** 24px */
+	--pkp-text-4xl-bold: calc(1.5 * var(--pkp-text-base-size));
+	--pkp-text-4xl-bold--line-height: calc(2 * var(--pkp-text-base-size));
+	--pkp-text-4xl-bold--font-weight: 700;
+	/** 36px */
+	--pkp-text-5xl-bold: calc(2.25 * var(--pkp-text-base-size));
+	--pkp-text-5xl-bold--line-height: calc(2.5 * var(--pkp-text-base-size));
+	--pkp-text-5xl-bold--font-weight: 700;
+	/* Additional css variables to make easier to use them in plugins*/
+	/* 10px */
+	--pkp-font-xs-normal: var(--pkp-text-xs-normal--font-weight)
+		var(--pkp-text-xs-normal) / var(--pkp-text-xs-normal--line-height)
+		var(--pkp-font);
+	/* 11px */
+	--pkp-font-sm-light: var(--pkp-text-sm-light--font-weight)
+		var(--pkp-text-sm-light) / var(--pkp-text-sm-light--line-height)
+		var(--pkp-font);
+	--pkp-font-sm-normal: var(--pkp-text-sm-normal--font-weight)
+		var(--pkp-text-sm-normal) / var(--pkp-text-sm-normal--line-height)
+		var(--pkp-font);
+	/* 12px */
+	--pkp-font-base-light: var(--pkp-text-base-light--font-weight)
+		var(--pkp-text-base-light) / var(--pkp-text-base-light--line-height)
+		var(--pkp-font);
+	--pkp-font-base-normal: var(--pkp-text-base-normal--font-weight)
+		var(--pkp-text-base-normal) / var(--pkp-text-base-normal--line-height)
+		var(--pkp-font);
+	--pkp-font-base-bold: var(--pkp-text-base-bold--font-weight)
+		var(--pkp-text-base-bold) / var(--pkp-text-base-bold--line-height)
+		var(--pkp-font);
+	/* 14px */
+	--pkp-font-lg-normal: var(--pkp-text-lg-normal--font-weight)
+		var(--pkp-text-lg-normal) / var(--pkp-text-lg-normal--line-height)
+		var(--pkp-font);
+	--pkp-font-lg-medium: var(--pkp-text-lg-medium--font-weight)
+		var(--pkp-text-lg-medium) / var(--pkp-text-lg-medium--line-height)
+		var(--pkp-font);
+	--pkp-font-lg-semibold: var(--pkp-text-lg-semibold--font-weight)
+		var(--pkp-text-lg-semibold) / var(--pkp-text-lg-semibold--line-height)
+		var(--pkp-font);
+	--pkp-font-lg-bold: var(--pkp-text-lg-bold--font-weight)
+		var(--pkp-text-lg-bold) / var(--pkp-text-lg-bold--line-height)
+		var(--pkp-font);
+	/* 16px */
+	--pkp-font-xl-bold: var(--pkp-text-xl-bold--font-weight)
+		var(--pkp-text-xl-bold) / var(--pkp-text-xl-bold--line-height)
+		var(--pkp-font);
+	/* 18px */
+	--pkp-font-2xl-bold: var(--pkp-text-2xl-bold--font-weight)
+		var(--pkp-text-2xl-bold) / var(--pkp-text-2xl-bold--line-height)
+		var(--pkp-font);
+	/* 20px */
+	--pkp-font-3xl-normal: var(--pkp-text-3xl-normal--font-weight)
+		var(--pkp-text-3xl-normal) / var(--pkp-text-3xl-normal--line-height)
+		var(--pkp-font);
+	--pkp-font-3xl-medium: var(--pkp-text-3xl-medium--font-weight)
+		var(--pkp-text-3xl-medium) / var(--pkp-text-3xl-medium--line-height)
+		var(--pkp-font);
+	--pkp-font-3xl-bold: var(--pkp-text-3xl-bold--font-weight)
+		var(--pkp-text-3xl-bold) / var(--pkp-text-3xl-bold--line-height)
+		var(--pkp-font);
+	/* 24px */
+	--pkp-font-4xl-bold: var(--pkp-text-4xl-bold--font-weight)
+		var(--pkp-text-4xl-bold) / var(--pkp-text-4xl-bold--line-height)
+		var(--pkp-font);
+	/* 36px */
+	--pkp-font-5xl-bold: var(--pkp-text-5xl-bold--font-weight)
+		var(--pkp-text-5xl-bold) / var(--pkp-text-5xl-bold--line-height)
+		var(--pkp-font);
+	--pkp-spacing-0: 0px;
+	--pkp-spacing-px: calc(var(--pkp-spacing) / 4);
+	--pkp-spacing-0-5: calc(0.5 * var(--pkp-spacing)); /* 2px */
+	--pkp-spacing-1: calc(1 * var(--pkp-spacing)); /* 4px */
+	--pkp-spacing-1-5: calc(1.5 * var(--pkp-spacing)); /* 6px */
+	--pkp-spacing-2: calc(2 * var(--pkp-spacing)); /* 8px */
+	--pkp-spacing-2-5: calc(2.5 * var(--pkp-spacing)); /* 10px */
+	--pkp-spacing-3: calc(3 * var(--pkp-spacing)); /* 12px */
+	--pkp-spacing-3-5: calc(3.5 * var(--pkp-spacing)); /* 14px */
+	--pkp-spacing-4: calc(4 * var(--pkp-spacing)); /* 16px */
+	--pkp-spacing-5: calc(5 * var(--pkp-spacing)); /* 20px */
+	--pkp-spacing-6: calc(6 * var(--pkp-spacing)); /* 24px */
+	--pkp-spacing-7: calc(7 * var(--pkp-spacing)); /* 28px */
+	--pkp-spacing-8: calc(8 * var(--pkp-spacing)); /* 32px */
+	--pkp-spacing-9: calc(9 * var(--pkp-spacing)); /* 36px */
+	--pkp-spacing-10: calc(10 * var(--pkp-spacing)); /* 40px */
+	--pkp-spacing-11: calc(11 * var(--pkp-spacing)); /* 44px */
+	--pkp-spacing-12: calc(12 * var(--pkp-spacing)); /* 48px */
+	--pkp-spacing-14: calc(14 * var(--pkp-spacing)); /* 56px */
+	--pkp-spacing-16: calc(16 * var(--pkp-spacing)); /* 64px */
+	--pkp-spacing-20: calc(20 * var(--pkp-spacing)); /* 80px */
+	--pkp-spacing-24: calc(24 * var(--pkp-spacing)); /* 96px */
+	--pkp-spacing-28: calc(28 * var(--pkp-spacing)); /* 112px */
+	--pkp-spacing-32: calc(32 * var(--pkp-spacing)); /* 128px */
+	--pkp-spacing-36: calc(36 * var(--pkp-spacing)); /* 144px */
+	--pkp-spacing-40: calc(40 * var(--pkp-spacing)); /* 160px */
+	--pkp-spacing-44: calc(44 * var(--pkp-spacing)); /* 176px */
+	--pkp-spacing-48: calc(48 * var(--pkp-spacing)); /* 192px */
+	--pkp-spacing-52: calc(52 * var(--pkp-spacing)); /* 208px */
+	--pkp-spacing-56: calc(56 * var(--pkp-spacing)); /* 224px */
+	--pkp-spacing-60: calc(60 * var(--pkp-spacing)); /* 240px */
+	--pkp-spacing-64: calc(64 * var(--pkp-spacing)); /* 256px */
+	--pkp-spacing-72: calc(72 * var(--pkp-spacing)); /* 288px */
+	--pkp-spacing-80: calc(80 * var(--pkp-spacing)); /* 320px */
+	--pkp-spacing-96: calc(96 * var(--pkp-spacing)); /* 384px */
+}