diff --git a/src/components/Form/mocks/form-contributors.js b/src/components/Form/mocks/form-contributors.js
new file mode 100644
index 000000000..1a56f5ecb
--- /dev/null
+++ b/src/components/Form/mocks/form-contributors.js
@@ -0,0 +1,161 @@
+import Form from './form';
+import FieldSelectCountryMock from './field-select-country';
+
+export default {
+	...Form,
+	id: 'contributor',
+	method: 'POST',
+	action: '/submissions/9/publications/__publicationId__/contributors',
+	fields: [
+		{
+			name: 'givenName',
+			component: 'field-text',
+			label: 'Given Name',
+			groupId: 'default',
+			isRequired: true,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'familyName',
+			component: 'field-text',
+			label: 'Family Name',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'preferredPublicName',
+			component: 'field-text',
+			label: 'Preferred Public Name',
+			description:
+				'Please provide the full name as the author should be identified on the published work. Example: Dr. Alan P. Mwandenga',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'email',
+			component: 'field-text',
+			label: 'Email',
+			groupId: 'default',
+			isRequired: true,
+			isMultilingual: false,
+			isInert: false,
+			value: null,
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		FieldSelectCountryMock,
+		{
+			name: 'url',
+			component: 'field-text',
+			label: 'Homepage URL',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: null,
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'biography',
+			component: 'field-rich-textarea',
+			label: 'Bio Statement (e.g., department and rank)',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			plugins: 'paste,link,noneditable',
+			toolbar: 'bold italic superscript subscript | link',
+		},
+		{
+			name: 'affiliation',
+			component: 'field-text',
+			label: 'Affiliation',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: true,
+			isInert: false,
+			value: {en: '', es: '', fr_CA: '', pt: ''},
+			inputType: 'text',
+			optIntoEdit: false,
+			optIntoEditLabel: '',
+			size: 'normal',
+			prefix: '',
+		},
+		{
+			name: 'userGroupId',
+			component: 'field-options',
+			label: "Contributor's role",
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: 14,
+			type: 'radio',
+			isOrderable: false,
+			allowOnlySorting: false,
+			options: [
+				{value: 14, label: 'Author'},
+				{value: 15, label: 'Translator'},
+			],
+		},
+		{
+			name: 'includeInBrowse',
+			component: 'field-options',
+			label: 'Publication Lists',
+			groupId: 'default',
+			isRequired: false,
+			isMultilingual: false,
+			isInert: false,
+			value: true,
+			type: 'checkbox',
+			isOrderable: false,
+			allowOnlySorting: false,
+			options: [
+				{
+					value: true,
+					label:
+						'Include this contributor when identifying authors in lists of publications.',
+				},
+			],
+		},
+	],
+	groups: [{id: 'default', pageId: 'default'}],
+	hiddenFields: {},
+	supportedFormLocales: [
+		{key: 'en', label: 'English'},
+		{key: 'es', label: 'Spanish'},
+		{key: 'fr_CA', label: 'French (Canada)'},
+		{key: 'pt', label: 'Portuguese'},
+	],
+};
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.stories.js b/src/components/ListPanel/contributors/ContributorsListPanel.stories.js
new file mode 100644
index 000000000..02f2a2f6b
--- /dev/null
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.stories.js
@@ -0,0 +1,59 @@
+import ContributorsListPanel from './ContributorsListPanel.vue';
+
+import ContributorMock from '@/mocks/contributor';
+import PublicationMock from '@/mocks/publication';
+import FormContributorsMock from '@/components/Form/mocks/form-contributors';
+
+export default {
+	title: 'ListPanel/ContributorsListPanel',
+	component: ContributorsListPanel,
+};
+
+const contributors = [
+	{
+		...ContributorMock,
+		affiliation: {
+			en: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+		},
+		fullName: 'Clara Mitchell',
+	},
+	{
+		...ContributorMock,
+		affiliation: {
+			en: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+		},
+		fullName: 'Ethan Brooks',
+	},
+	{
+		...ContributorMock,
+		affiliation: {
+			en: ' Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+		},
+		fullName: 'Sophia Reyes',
+	},
+];
+
+export const Base = {
+	render: (args) => ({
+		components: {ContributorsListPanel},
+		setup() {
+			return {args};
+		},
+		template: `
+			<ContributorsListPanel
+				v-bind="args"
+			/>
+		`,
+	}),
+
+	args: {
+		canEditPublication: true,
+		form: {...FormContributorsMock},
+		id: 'contributors',
+		items: [...contributors],
+		publication: PublicationMock,
+		publicationApiUrlFormat: '/submissions/9/publications/__publicationId__',
+		itemsMax: contributors.length,
+		title: 'Contributors',
+	},
+};
diff --git a/src/components/ListPanel/contributors/ContritbutorsListPanel.mdx b/src/components/ListPanel/contributors/ContritbutorsListPanel.mdx
new file mode 100644
index 000000000..6c5619e71
--- /dev/null
+++ b/src/components/ListPanel/contributors/ContritbutorsListPanel.mdx
@@ -0,0 +1,14 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as ContributorsListPanelStories from './ContributorsListPanel.stories.js';
+
+<Meta of={ContributorsListPanelStories} />
+
+# ContributorsListPanel
+
+## Usage
+
+Use this component to view, add, edit and delete contributors.
+
+<Primary />
+<ArgTypes />
diff --git a/src/mocks/contributor.js b/src/mocks/contributor.js
new file mode 100644
index 000000000..bdf84412d
--- /dev/null
+++ b/src/mocks/contributor.js
@@ -0,0 +1,31 @@
+export default {
+	affiliation: {
+		en: 'Test affiliation',
+		es: '',
+		fr_CA: '',
+		pt: '',
+	},
+	country: 'IT',
+	email: 'fpaglieri@mailinator.com',
+	familyName: {en: 'Paglieri', es: '', fr_CA: '', pt: ''},
+	fullName: 'Fabio Paglieri',
+	givenName: {en: 'Fabio', es: '', fr_CA: '', pt: ''},
+	id: 17,
+	includeInBrowse: true,
+	locale: 'en',
+	orcid: null,
+	orcidAccessDenied: null,
+	orcidAccessExpiresOn: null,
+	orcidAccessScope: null,
+	orcidAccessToken: null,
+	orcidEmailToken: null,
+	orcidIsVerified: null,
+	orcidRefreshToken: null,
+	orcidSandbox: null,
+	orcidWorkPutCode: null,
+	preferredPublicName: {en: '', es: '', fr_CA: '', pt: ''},
+	publicationId: 10,
+	seq: 0,
+	userGroupId: 14,
+	userGroupName: {en: 'Author', fr_CA: 'Auteur-e'},
+};