diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
new file mode 100644
index 00000000..001330ce
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
@@ -0,0 +1,13 @@
+
+
+
+ {{ pullRequest().repository.name }} #{{ pullRequest().id }} on {{ pullRequest().createdAt }}
+
+ +{{ pullRequest().additions }}
+ -{{ pullRequest().deletions }}
+
+
+
+
+
{{ pullRequest().title }}
+
diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts
new file mode 100644
index 00000000..6eac1057
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.ts
@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+import { PullRequest } from '@app/core/modules/openapi';
+
+@Component({
+ selector: 'app-pull-request-widget',
+ templateUrl: './pull-request-widget.component.html',
+ standalone: true
+})
+export class PullRequestWidgetComponent {
+ pullRequest = input.required();
+}
diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
new file mode 100644
index 00000000..2f2583f5
--- /dev/null
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { PullRequestWidgetComponent } from './pull-request-widget.component';
+import { PullRequest, Repository } from '@app/core/modules/openapi';
+
+const meta: Meta = {
+ title: 'Components/PullRequestCard',
+ component: PullRequestWidgetComponent,
+ tags: ['autodocs'] // Auto-generate docs if enabled
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const repo: Repository = {
+ name: 'Artemis',
+ nameWithOwner: 'artemis-education/artemis',
+ defaultBranch: 'master',
+ visibility: 'PUBLIC',
+ url: 'http://example.com'
+};
+
+const pullRequest: PullRequest = {
+ title: 'Add feature X',
+ additions: 10,
+ deletions: 5,
+ url: 'http://example.com',
+ state: 'OPEN',
+ repository: repo,
+ createdAt: 'Jan 1',
+ id: 12
+};
+
+export const Default: Story = {
+ args: { pullRequest }
+};