diff --git a/lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.ts b/lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.ts
index 41d6ad69..b9b26d1b 100644
--- a/lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -20,6 +20,8 @@ export class CopyToClipboardComponent {
   public readonly value =
     input.required<HTMLCgCopyToClipboardElement['value']>();
 
+  public readonly type = input<HTMLCgCopyToClipboardElement['type']>();
+
   constructor(
     private readonly ngZone: NgZone,
     private readonly elementRef: ElementRef<HTMLCgCopyToClipboardElement>,
@@ -31,5 +33,17 @@ export class CopyToClipboardComponent {
         this.elementRef.nativeElement.value = value;
       });
     });
+
+    effect(() => {
+      const type = this.type();
+      // [TODO]: use `isNil` from `@cg/utils` package
+      if (!type) {
+        return;
+      }
+
+      this.ngZone.runOutsideAngular(() => {
+        this.elementRef.nativeElement.type = type;
+      });
+    });
   }
 }
diff --git a/lib/styles/common.scss b/lib/styles/common.scss
index 1f50ca19..5a9538b7 100644
--- a/lib/styles/common.scss
+++ b/lib/styles/common.scss
@@ -4,6 +4,7 @@
 @forward 'common/dropdown';
 @forward 'common/effects';
 @forward 'common/elevation';
+@forward 'common/forms';
 @forward 'common/icons';
 @forward 'common/responsiveness';
 @forward 'common/sizing';
diff --git a/lib/styles/common/forms.scss b/lib/styles/common/forms.scss
new file mode 100644
index 00000000..9a7a76fc
--- /dev/null
+++ b/lib/styles/common/forms.scss
@@ -0,0 +1,40 @@
+@use 'sizing';
+@use 'colors';
+@use 'dark-mode';
+@use 'effects';
+
+@mixin input-common {
+  display: block;
+  width: 100%;
+
+  border-radius: sizing.$border-sm-radius;
+  border: sizing.$border-md-size solid colors.$slate-400;
+  padding: sizing.size(2.5);
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  color: colors.$slate-900;
+  background-color: colors.$white;
+  outline: none;
+
+  &:focus {
+    border-color: colors.$primary;
+    @include effects.ring(colors.$primary-400);
+
+    @include dark-mode.dark {
+      @include effects.ring(colors.$primary-800);
+    }
+  }
+
+  @include dark-mode.dark {
+    color: colors.$slate-200;
+    background-color: colors.$slate-950;
+    border-color: colors.$slate-500;
+  }
+}
+
+@mixin text-area {
+  height: sizing.size(24);
+  resize: vertical;
+}
diff --git a/lib/styles/global/buttons.scss b/lib/styles/global/buttons.scss
index 6864d6d9..c5c3dd9f 100644
--- a/lib/styles/global/buttons.scss
+++ b/lib/styles/global/buttons.scss
@@ -1,24 +1,19 @@
-@use '../common/colors';
-@use '../common/dark-mode';
-@use '../common/effects';
-@use '../common/icons';
-@use '../common/sizing';
-@use '../common/utils';
+@use '../common';
 
-$btn-color: colors.$primary;
-$bn-hover-color: colors.$primary-600;
-$btn-disabled-color: rgba(colors.$primary, 0.45);
+$btn-color: common.$primary;
+$bn-hover-color: common.$primary-600;
+$btn-disabled-color: rgba(common.$primary, 0.45);
 
 .btn {
-  @include sizing.px(4);
-  @include sizing.py(1);
-  @include utils.no-underline;
+  @include common.px(4);
+  @include common.py(1);
+  @include common.no-underline;
 
-  border: sizing.$border-md-size solid transparent;
-  border-radius: sizing.$border-sm-radius;
+  border: common.$border-md-size solid transparent;
+  border-radius: common.$border-sm-radius;
   outline: none;
 
-  color: colors.$white;
+  color: common.$white;
   background-color: $btn-color;
   position: relative;
 
@@ -28,10 +23,10 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
   }
 
   &:focus:not(:disabled) {
-    @include effects.ring(colors.$primary-400);
+    @include common.ring(common.$primary-400);
 
-    @include dark-mode.dark {
-      @include effects.ring(colors.$primary-800);
+    @include common.dark {
+      @include common.ring(common.$primary-800);
     }
   }
 
@@ -50,7 +45,7 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
   background-color: transparent;
 
   &:hover:not(:disabled) {
-    color: colors.$white;
+    color: common.$white;
   }
 
   &:disabled {
@@ -60,22 +55,22 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
   }
 
   &.btn--success {
-    color: colors.$success;
-    border-color: colors.$success;
+    color: common.$success;
+    border-color: common.$success;
 
     &:hover:not(:disabled) {
-      background-color: colors.$success;
-      border-color: colors.$success;
+      background-color: common.$success;
+      border-color: common.$success;
     }
   }
 
   &.btn--error {
-    color: colors.$error;
-    border-color: colors.$error;
+    color: common.$error;
+    border-color: common.$error;
 
     &:hover:not(:disabled) {
-      background-color: colors.$error;
-      border-color: colors.$error;
+      background-color: common.$error;
+      border-color: common.$error;
     }
   }
 }
@@ -85,10 +80,10 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
   flex-direction: row;
   justify-content: end;
   align-items: center;
-  margin-top: sizing.size(4);
+  margin-top: common.size(4);
 
   > :not(:last-child) {
-    margin-right: sizing.size(2);
+    margin-right: common.size(2);
   }
 }
 
@@ -96,6 +91,6 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
   position: absolute;
   left: 50%;
   top: 50%;
-  @include icons.icon-xxl;
+  @include common.icon-xxl;
   transform: translate(-50%, -50%);
 }
diff --git a/lib/styles/global/forms.scss b/lib/styles/global/forms.scss
index 6e14af4f..8070a960 100644
--- a/lib/styles/global/forms.scss
+++ b/lib/styles/global/forms.scss
@@ -1,58 +1,27 @@
-@use '../common/colors';
-@use '../common/dark-mode';
-@use '../common/effects';
-@use '../common/sizing';
+@use '../common';
 
 .input {
-  display: block;
-  width: 100%;
-
-  border-radius: sizing.$border-sm-radius;
-  border: sizing.$border-md-size solid colors.$slate-400;
-  padding: sizing.size(2.5);
-
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-
-  color: colors.$slate-900;
-  background-color: colors.$white;
-  outline: none;
-
-  &:focus {
-    border-color: colors.$primary;
-    @include effects.ring(colors.$primary-400);
-
-    @include dark-mode.dark {
-      @include effects.ring(colors.$primary-800);
-    }
-  }
-
-  @include dark-mode.dark {
-    color: colors.$slate-200;
-    background-color: colors.$slate-950;
-    border-color: colors.$slate-500;
-  }
+  @include common.input-common;
 }
 
 .input--invalid {
-  border-color: colors.$error;
+  border-color: common.$error;
 
   &:focus {
-    border-color: colors.$error;
+    border-color: common.$error;
 
-    @include effects.ring(colors.$error);
+    @include common.ring(common.$error);
   }
 }
 
 .input--textarea {
-  height: sizing.size(24);
-  resize: vertical;
+  @include common.text-area;
 }
 
 .label {
-  color: colors.$black;
+  color: common.$black;
 
-  @include dark-mode.dark {
-    color: colors.$white;
+  @include common.dark {
+    color: common.$white;
   }
 }
diff --git a/lib/styles/global/icons.scss b/lib/styles/global/icons.scss
index 9442a8a8..e2c9b3a6 100644
--- a/lib/styles/global/icons.scss
+++ b/lib/styles/global/icons.scss
@@ -1,4 +1,4 @@
-@use '../common/icons';
+@use '../common';
 
 .icon {
   width: 100%;
@@ -8,25 +8,25 @@
 }
 
 .icon-xs {
-  @include icons.icon-xs;
+  @include common.icon-xs;
 }
 
 .icon-sm {
-  @include icons.icon-sm;
+  @include common.icon-sm;
 }
 
 .icon-md {
-  @include icons.icon-md;
+  @include common.icon-md;
 }
 
 .icon-lg {
-  @include icons.icon-lg;
+  @include common.icon-lg;
 }
 
 .icon-xl {
-  @include icons.icon-xl;
+  @include common.icon-xl;
 }
 
 .icon-xxl {
-  @include icons.icon-xxl;
+  @include common.icon-xxl;
 }
diff --git a/lib/styles/global/overlays.scss b/lib/styles/global/overlays.scss
index 9c6debfc..86aab5ed 100644
--- a/lib/styles/global/overlays.scss
+++ b/lib/styles/global/overlays.scss
@@ -1,12 +1,11 @@
-@use '../common/colors';
-@use '../common/elevation';
+@use '../common';
 
 .backdrop {
-  @include elevation.layer-40;
+  @include common.layer-40;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(colors.$slate-800, 0.8);
+  background-color: rgba(common.$slate-800, 0.8);
 }
diff --git a/lib/styles/global/typography.scss b/lib/styles/global/typography.scss
index 5647fb2a..eb06b4da 100644
--- a/lib/styles/global/typography.scss
+++ b/lib/styles/global/typography.scss
@@ -1,53 +1,50 @@
-@use '../common/colors';
-@use '../common/dark-mode';
-@use '../common/sizing';
-@use '../common/typography';
+@use '../common';
 
 %heading {
   margin-top: 0;
-  margin-bottom: sizing.size(3);
-  font-weight: typography.$font-weight-semibold;
+  margin-bottom: common.size(3);
+  font-weight: common.$font-weight-semibold;
 }
 
 h1,
 .h1 {
   @extend %heading;
-  @include typography.text-xxxxl;
+  @include common.text-xxxxl;
 }
 
 h2,
 .h2 {
   @extend %heading;
-  @include typography.text-xxxl;
+  @include common.text-xxxl;
 }
 
 h3,
 .h3 {
   @extend %heading;
-  @include typography.text-xxl;
+  @include common.text-xxl;
 }
 
 h4,
 .h4 {
   @extend %heading;
-  @include typography.text-xl;
+  @include common.text-xl;
 }
 
 h5,
 .h5 {
   @extend %heading;
-  @include typography.text-lg;
+  @include common.text-lg;
 }
 
 h6,
 .h6 {
   @extend %heading;
-  @include typography.text-md;
+  @include common.text-md;
 }
 
 p {
   margin-top: 0;
-  margin-bottom: sizing.size(3);
+  margin-bottom: common.size(3);
 
   a {
     text-decoration-line: underline;
@@ -61,7 +58,7 @@ p {
 
 a {
   outline: none;
-  color: colors.$primary;
+  color: common.$primary;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
   text-decoration: none;
@@ -75,8 +72,8 @@ a {
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: sizing.size(3);
-  padding-left: sizing.size(8);
+  margin-bottom: common.size(3);
+  padding-left: common.size(8);
 }
 
 ul {
@@ -95,16 +92,16 @@ li {
 }
 
 blockquote {
-  @include sizing.mx(0);
-  @include sizing.my(4);
-  padding: sizing.size(4);
+  @include common.mx(0);
+  @include common.my(4);
+  padding: common.size(4);
 
-  border-left: sizing.$border-lg-size solid colors.$slate-500;
-  background-color: colors.$slate-200;
+  border-left: common.$border-lg-size solid common.$slate-500;
+  background-color: common.$slate-200;
 
-  @include dark-mode.dark {
-    color: colors.$slate-300;
-    background-color: colors.$slate-900;
+  @include common.dark {
+    color: common.$slate-300;
+    background-color: common.$slate-900;
   }
 
   & > p {
@@ -113,31 +110,31 @@ blockquote {
 }
 
 hr {
-  margin-top: sizing.size(8);
-  margin-bottom: sizing.size(8);
+  margin-top: common.size(8);
+  margin-bottom: common.size(8);
 
   border: none;
-  background-color: colors.$slate-200;
-  height: sizing.$border-lg-size;
+  background-color: common.$slate-200;
+  height: common.$border-lg-size;
 
-  @include dark-mode.dark {
-    background-color: colors.$slate-900;
+  @include common.dark {
+    background-color: common.$slate-900;
   }
 }
 
 code {
-  font-family: typography.$font-family-monospace;
-  font-size: typography.$font-size-base;
+  font-family: common.$font-family-monospace;
+  font-size: common.$font-size-base;
 
   display: block;
   width: 100%;
   overflow-x: auto;
-  padding: sizing.size(4);
-  border-radius: sizing.$border-sm-radius;
+  padding: common.size(4);
+  border-radius: common.$border-sm-radius;
 
-  background-color: colors.$slate-200;
-  @include dark-mode.dark {
-    background-color: colors.$slate-900;
+  background-color: common.$slate-200;
+  @include common.dark {
+    background-color: common.$slate-900;
   }
 }
 
@@ -146,7 +143,7 @@ code {
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-right: sizing.size(4);
+  margin-right: common.size(4);
 }
 
 .page-heading {
@@ -154,7 +151,7 @@ code {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: sizing.size(4);
+  margin-bottom: common.size(4);
 
   > * {
     margin-bottom: 0;
diff --git a/lib/ui/src/components/atoms/overlay/overlay.tsx b/lib/ui/src/components/atoms/overlay/overlay.tsx
index 094bb65f..6c42fd9f 100644
--- a/lib/ui/src/components/atoms/overlay/overlay.tsx
+++ b/lib/ui/src/components/atoms/overlay/overlay.tsx
@@ -19,7 +19,7 @@ const overlayAnimation: PropertyIndexedKeyframes = {
   scoped: true,
 })
 export class OverlayComponent implements ComponentInterface {
-  @Prop()
+  @Prop({ reflect: true })
   public isOpen = false;
 
   @Element()
diff --git a/lib/ui/src/components/atoms/text-area/text-area.scss b/lib/ui/src/components/atoms/text-area/text-area.scss
new file mode 100644
index 00000000..7b1f9543
--- /dev/null
+++ b/lib/ui/src/components/atoms/text-area/text-area.scss
@@ -0,0 +1,11 @@
+@use '~@cg/styles/common';
+
+:host-context(.text-area) {
+  position: relative;
+  border-radius: common.$border-sm-radius;
+}
+
+.text-area__input {
+  @include common.input-common;
+  @include common.text-area;
+}
diff --git a/lib/ui/src/components/atoms/text-area/text-area.tsx b/lib/ui/src/components/atoms/text-area/text-area.tsx
new file mode 100644
index 00000000..741a3588
--- /dev/null
+++ b/lib/ui/src/components/atoms/text-area/text-area.tsx
@@ -0,0 +1,103 @@
+import {
+  AttachInternals,
+  Component,
+  ComponentInterface,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+  h,
+} from '@stencil/core';
+
+@Component({
+  tag: 'cg-text-area',
+  styleUrl: 'text-area.scss',
+  formAssociated: true,
+  scoped: true,
+})
+export class TextArea implements ComponentInterface {
+  @Prop({ reflect: true })
+  public value?: string;
+
+  @Prop({ reflect: true })
+  public placeholder?: string;
+
+  @Prop({ reflect: true })
+  public readonly = false;
+
+  @State()
+  private isFocused = false;
+
+  @AttachInternals()
+  private internals!: ElementInternals;
+
+  private inputElem!: HTMLTextAreaElement;
+
+  @Watch('value')
+  public valueChanged(): void {
+    this.setTextAreaHeight();
+  }
+
+  @Method()
+  public async select(): Promise<void> {
+    this.inputElem.select();
+  }
+
+  public componentWillLoad() {
+    this.internals.setFormValue(this.value ?? null);
+  }
+
+  public componentDidLoad() {
+    this.setTextAreaHeight();
+  }
+
+  public render() {
+    return (
+      <Host class="text-area">
+        <cg-focus-ring isFocused={this.isFocused} />
+
+        <textarea
+          class="text-area__input"
+          value={this.value}
+          placeholder={this.placeholder}
+          readOnly={this.readonly}
+          ref={elem => this.setInputElem(elem)}
+          onInput={event => this.handleChange(event)}
+          onFocus={() => this.onFocused()}
+          onBlur={() => this.onBlurred()}
+        />
+      </Host>
+    );
+  }
+
+  private onFocused(): void {
+    this.isFocused = true;
+  }
+
+  private onBlurred(): void {
+    this.isFocused = false;
+  }
+
+  private setInputElem(elem?: HTMLTextAreaElement): void {
+    if (!elem) {
+      throw new Error('Input element not found');
+    }
+
+    if (elem !== this.inputElem) {
+      this.inputElem = elem;
+    }
+  }
+
+  private handleChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement | null;
+
+    this.value = target?.value;
+    this.internals.setFormValue(this.value ?? null);
+  }
+
+  private setTextAreaHeight(): void {
+    this.inputElem.style.height = 'auto';
+    this.inputElem.style.height = `${this.inputElem.scrollHeight}px`;
+  }
+}
diff --git a/lib/ui/src/components/atoms/text-area/text-input.stories.ts b/lib/ui/src/components/atoms/text-area/text-input.stories.ts
new file mode 100644
index 00000000..c86d31a3
--- /dev/null
+++ b/lib/ui/src/components/atoms/text-area/text-input.stories.ts
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta: Meta = {
+  title: 'Atoms/Text Areas',
+  argTypes: {
+    content: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    content: '',
+  },
+  render: args => `
+    <cg-text-area placeholder="Write something here" value="${args.content}" />
+  `,
+};
+
+export default meta;
+
+export const Default: StoryObj = {};
diff --git a/lib/ui/src/components/atoms/text-input/text-input.scss b/lib/ui/src/components/atoms/text-input/text-input.scss
index a79e2682..2db1836c 100644
--- a/lib/ui/src/components/atoms/text-input/text-input.scss
+++ b/lib/ui/src/components/atoms/text-input/text-input.scss
@@ -6,32 +6,5 @@
 }
 
 .text-input__input {
-  display: block;
-  width: 100%;
-
-  border-radius: common.$border-sm-radius;
-  border: common.$border-md-size solid common.$slate-400;
-  padding: common.size(2.5);
-
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-
-  color: common.$slate-900;
-  background-color: common.$white;
-  outline: none;
-
-  &:focus {
-    border-color: common.$primary;
-    @include common.ring(common.$primary-400);
-
-    @include common.dark {
-      @include common.ring(common.$primary-800);
-    }
-  }
-
-  @include common.dark {
-    color: common.$slate-200;
-    background-color: common.$slate-950;
-    border-color: common.$slate-500;
-  }
+  @include common.input-common;
 }
diff --git a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.scss b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.scss
index 23f7f57f..16f969e4 100644
--- a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.scss
+++ b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.scss
@@ -5,7 +5,12 @@
   align-items: center;
 }
 
+:host-context(.copy-to-clipboard--textarea) {
+  align-items: flex-start;
+}
+
 .copy-to-clipboard__input {
+  flex: 1;
   margin-right: common.size(3);
 }
 
diff --git a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
index 0bab0be4..6147a909 100644
--- a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
+++ b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -4,15 +4,24 @@ const meta: Meta = {
   title: 'Molecules/Copy To Clipboard',
   argTypes: {
     content: {
+      name: 'Content',
       value: { type: 'text' },
     },
+    type: {
+      name: 'Type',
+      control: { type: 'select' },
+      options: ['text', 'textarea'],
+    },
   },
   args: {
-    value: 'Super secret code',
+    content: 'Super secret code',
+    inputType: 'text',
   },
   render: args => `
-    <cg-copy-to-clipboard value="${args.value}">
-    </cg-copy-to-clipboard>
+    <cg-copy-to-clipboard
+      value="${args.content}"
+      type="${args.type ?? 'text'}"
+    ></cg-copy-to-clipboard>
   `,
 };
 
diff --git a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.tsx b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.tsx
index 7d029aba..98cd8402 100644
--- a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.tsx
@@ -6,23 +6,43 @@ import { Component, Host, Prop, State, h } from '@stencil/core';
   scoped: true,
 })
 export class CopyToClipboardComponent {
-  @Prop()
+  @Prop({ reflect: true })
   public value!: string;
 
+  @Prop({ reflect: true })
+  public type: 'text' | 'textarea' = 'text';
+
   @State()
   private isCopied = false;
   private inputElem!: HTMLCgTextInputElement;
   private timeoutId: number | undefined;
 
   public render() {
+    const isTextArea = this.type === 'textarea';
+
     return (
-      <Host class="copy-to-clipboard" aria-live="polite">
-        <cg-text-input
-          class="copy-to-clipboard__input"
-          value={this.value}
-          readonly
-          ref={elem => this.setInputElem(elem)}
-        />
+      <Host
+        class={{
+          'copy-to-clipboard': true,
+          'copy-to-clipboard--textarea': isTextArea,
+        }}
+        aria-live="polite"
+      >
+        {isTextArea ? (
+          <cg-text-area
+            class="copy-to-clipboard__input"
+            value={this.value}
+            readonly
+            ref={elem => this.setInputElem(elem)}
+          />
+        ) : (
+          <cg-text-input
+            class="copy-to-clipboard__input"
+            value={this.value}
+            readonly
+            ref={elem => this.setInputElem(elem)}
+          />
+        )}
 
         <cg-text-btn onClick={() => this.onClicked()}>
           {this.isCopied ? (
diff --git a/lib/ui/src/components/molecules/dropdown/dropdown-link-menu-item/dropdown-link-menu-item.tsx b/lib/ui/src/components/molecules/dropdown/dropdown-link-menu-item/dropdown-link-menu-item.tsx
index d29be34f..46a80f02 100644
--- a/lib/ui/src/components/molecules/dropdown/dropdown-link-menu-item/dropdown-link-menu-item.tsx
+++ b/lib/ui/src/components/molecules/dropdown/dropdown-link-menu-item/dropdown-link-menu-item.tsx
@@ -14,10 +14,10 @@ import {
   scoped: true,
 })
 export class DropdownLinkMenuItemComponent {
-  @Prop()
+  @Prop({ reflect: true })
   public href!: string;
 
-  @Prop()
+  @Prop({ reflect: true })
   public isExternal? = false;
 
   @Event()
diff --git a/lib/ui/src/components/molecules/dropdown/dropdown-menu/dropdown-menu.tsx b/lib/ui/src/components/molecules/dropdown/dropdown-menu/dropdown-menu.tsx
index 5c28457c..da06a6c9 100644
--- a/lib/ui/src/components/molecules/dropdown/dropdown-menu/dropdown-menu.tsx
+++ b/lib/ui/src/components/molecules/dropdown/dropdown-menu/dropdown-menu.tsx
@@ -6,10 +6,10 @@ import { Component, Host, Prop, h } from '@stencil/core';
   scoped: true,
 })
 export class MenuComponent {
-  @Prop()
+  @Prop({ reflect: true })
   public menuId?: string;
 
-  @Prop()
+  @Prop({ reflect: true })
   public triggerId?: string;
 
   public render() {
diff --git a/lib/ui/src/components/molecules/dropdown/dropdown-trigger/dropdown-trigger.tsx b/lib/ui/src/components/molecules/dropdown/dropdown-trigger/dropdown-trigger.tsx
index cc6189cf..9fd970b7 100644
--- a/lib/ui/src/components/molecules/dropdown/dropdown-trigger/dropdown-trigger.tsx
+++ b/lib/ui/src/components/molecules/dropdown/dropdown-trigger/dropdown-trigger.tsx
@@ -16,19 +16,19 @@ import {
   scoped: true,
 })
 export class DropdownTriggerComponent implements ComponentInterface {
-  @Prop()
+  @Prop({ reflect: true })
   public menuId?: string;
 
-  @Prop()
+  @Prop({ reflect: true })
   public triggerId?: string;
 
-  @Prop()
+  @Prop({ reflect: true })
   public isOpen?: boolean;
 
-  @Prop()
+  @Prop({ reflect: true })
   public isIconBtn?: boolean;
 
-  @Prop()
+  @Prop({ reflect: true })
   public btnLabel?: string;
 
   @Watch('menuId')
diff --git a/lib/ui/src/components/molecules/dropdown/dropdown.tsx b/lib/ui/src/components/molecules/dropdown/dropdown.tsx
index 08aade38..3fd904be 100644
--- a/lib/ui/src/components/molecules/dropdown/dropdown.tsx
+++ b/lib/ui/src/components/molecules/dropdown/dropdown.tsx
@@ -24,7 +24,7 @@ const menuContainerAnimation: PropertyIndexedKeyframes = {
   scoped: true,
 })
 export class DropdownComponent implements ComponentInterface {
-  @Prop()
+  @Prop({ reflect: true })
   public anchorAlign: 'left' | 'right' = 'left';
 
   @Element()
diff --git a/lib/ui/src/components/organisms/footer/footer.tsx b/lib/ui/src/components/organisms/footer/footer.tsx
index 71dd041e..40e5ec94 100644
--- a/lib/ui/src/components/organisms/footer/footer.tsx
+++ b/lib/ui/src/components/organisms/footer/footer.tsx
@@ -7,7 +7,7 @@ import { NavLinkCategory } from '../../../types';
   scoped: true,
 })
 export class FooterComponent {
-  @Prop()
+  @Prop({ reflect: true })
   public links!: NavLinkCategory[];
 
   public currentYear = new Date().getFullYear();
diff --git a/lib/ui/src/components/organisms/navbar/navbar.tsx b/lib/ui/src/components/organisms/navbar/navbar.tsx
index 890cc684..b69c6be9 100644
--- a/lib/ui/src/components/organisms/navbar/navbar.tsx
+++ b/lib/ui/src/components/organisms/navbar/navbar.tsx
@@ -7,10 +7,10 @@ import { NavLink, NavLinkCategory, isLinkCategory } from '../../../types';
   scoped: true,
 })
 export class Navbar {
-  @Prop()
+  @Prop({ reflect: true })
   public homeUrl = '/';
 
-  @Prop()
+  @Prop({ reflect: true })
   public links: Array<NavLink | NavLinkCategory> = [];
 
   render() {
diff --git a/lib/ui/src/components/organisms/sidenav/sidenav.tsx b/lib/ui/src/components/organisms/sidenav/sidenav.tsx
index 71abb9ae..a1000892 100644
--- a/lib/ui/src/components/organisms/sidenav/sidenav.tsx
+++ b/lib/ui/src/components/organisms/sidenav/sidenav.tsx
@@ -21,10 +21,10 @@ const sidenavAnimation: PropertyIndexedKeyframes = {
   scoped: true,
 })
 export class SidenavComponent implements ComponentInterface {
-  @Prop()
+  @Prop({ reflect: true })
   public homeUrl = '/';
 
-  @Prop()
+  @Prop({ reflect: true })
   public links: Array<NavLink | NavLinkCategory> = [];
 
   @State()
diff --git a/src/frontend/src/app/core/api/review/review-api.mapper.ts b/src/frontend/src/app/core/api/review/review-api.mapper.ts
index dd7ddbd2..69a6d05f 100644
--- a/src/frontend/src/app/core/api/review/review-api.mapper.ts
+++ b/src/frontend/src/app/core/api/review/review-api.mapper.ts
@@ -2,6 +2,7 @@ import {
   fromCandidDate,
   fromCandidOpt,
   fromCandidOptDate,
+  Ok,
   toCandidOpt,
 } from '../../utils';
 import { mapGetProposalReviewCommitResponse } from '../commit-review/commit-review-api.mapper';
@@ -15,6 +16,8 @@ import {
   GetMyProposalReviewRequest as GetMyProposalReviewApiRequest,
   ProposalReviewStatus as ProposalReviewStatusApi,
   ProposalVote as ApiProposalVote,
+  GetMyProposalReviewSummaryRequest as GetMyProposalReviewSummaryApiRequest,
+  GetMyProposalReviewSummaryResponse as GetMyProposalReviewSummaryApiResponse,
 } from '@cg/backend';
 import {
   GetProposalReviewResponse,
@@ -24,6 +27,7 @@ import {
   ListProposalReviewsRequest,
   GetProposalReviewRequest,
   ProposalReviewStatus,
+  GetMyProposalReviewSummaryResponse,
 } from './review-api.model';
 
 export function mapCreateProposalReviewRequest(
@@ -97,6 +101,22 @@ export function mapGetProposalReviewResponse(
   };
 }
 
+export function mapGetMyProposalReviewSummaryRequest(
+  req: GetMyProposalReviewRequest,
+): GetMyProposalReviewSummaryApiRequest {
+  return {
+    proposal_id: req.proposalId,
+  };
+}
+
+export function mapGetMyProposalReviewSummaryResponse(
+  res: Ok<GetMyProposalReviewSummaryApiResponse>,
+): GetMyProposalReviewSummaryResponse {
+  return {
+    summaryMarkdown: res.summary_markdown,
+  };
+}
+
 function mapProposalReviewStatusRequest(
   status?: ProposalReviewStatus | null,
 ): ProposalReviewStatusApi | null {
diff --git a/src/frontend/src/app/core/api/review/review-api.model.ts b/src/frontend/src/app/core/api/review/review-api.model.ts
index 516ed9ca..6b0b9a26 100644
--- a/src/frontend/src/app/core/api/review/review-api.model.ts
+++ b/src/frontend/src/app/core/api/review/review-api.model.ts
@@ -43,6 +43,14 @@ export interface GetProposalReviewResponse {
   commits: GetProposalReviewCommitResponse[];
 }
 
+export interface GetMyProposalReviewSummaryRequest {
+  proposalId: string;
+}
+
+export interface GetMyProposalReviewSummaryResponse {
+  summaryMarkdown: string;
+}
+
 export enum ProposalReviewStatus {
   Draft = 'Draft',
   Published = 'Published',
diff --git a/src/frontend/src/app/core/api/review/review-api.service.ts b/src/frontend/src/app/core/api/review/review-api.service.ts
index c51812a0..e8205aef 100644
--- a/src/frontend/src/app/core/api/review/review-api.service.ts
+++ b/src/frontend/src/app/core/api/review/review-api.service.ts
@@ -5,6 +5,8 @@ import { ApiError, handleErr } from '../../utils';
 import {
   mapCreateProposalReviewRequest,
   mapGetMyProposalReviewRequest,
+  mapGetMyProposalReviewSummaryRequest,
+  mapGetMyProposalReviewSummaryResponse,
   mapGetProposalReviewRequest,
   mapGetProposalReviewResponse,
   mapListProposalReviewsRequest,
@@ -13,6 +15,8 @@ import {
 import {
   CreateProposalReviewRequest,
   GetMyProposalReviewRequest,
+  GetMyProposalReviewSummaryRequest,
+  GetMyProposalReviewSummaryResponse,
   GetProposalReviewRequest,
   GetProposalReviewResponse,
   ListProposalReviewsRequest,
@@ -80,6 +84,17 @@ export class ReviewApiService {
     return mapGetProposalReviewResponse(okRes);
   }
 
+  public async getMyProposalReviewSummary(
+    req: GetMyProposalReviewSummaryRequest,
+  ): Promise<GetMyProposalReviewSummaryResponse> {
+    const apiReq = mapGetMyProposalReviewSummaryRequest(req);
+
+    const res = await this.actorService.get_my_proposal_review_summary(apiReq);
+    const okRes = handleErr(res);
+
+    return mapGetMyProposalReviewSummaryResponse(okRes);
+  }
+
   public async getOrCreateMyProposalReview(
     req: CreateProposalReviewRequest,
   ): Promise<GetProposalReviewResponse> {
diff --git a/src/frontend/src/app/core/state/review/review.service.ts b/src/frontend/src/app/core/state/review/review.service.ts
index c79bc334..d71ff8a4 100644
--- a/src/frontend/src/app/core/state/review/review.service.ts
+++ b/src/frontend/src/app/core/state/review/review.service.ts
@@ -1,7 +1,11 @@
 import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-import { GetProposalReviewResponse, ReviewApiService } from '~core/api';
+import {
+  GetMyProposalReviewSummaryResponse,
+  GetProposalReviewResponse,
+  ReviewApiService,
+} from '~core/api';
 
 @Injectable({
   providedIn: 'root',
@@ -18,11 +22,15 @@ export class ReviewService {
     new BehaviorSubject<GetProposalReviewResponse | null>(null);
   public readonly currentReview$ = this.currentReviewSubject.asObservable();
 
-  private readonly userReviewListSubject = new BehaviorSubject<
+  private readonly userReviewsSubject = new BehaviorSubject<
     GetProposalReviewResponse[]
   >([]);
-  public readonly currentUserReviews$ =
-    this.userReviewListSubject.asObservable();
+  public readonly currentUserReviews$ = this.userReviewsSubject.asObservable();
+
+  private readonly currentUserReviewSummarySubject =
+    new BehaviorSubject<GetMyProposalReviewSummaryResponse | null>(null);
+  public readonly currentUserReviewSummary$ =
+    this.currentUserReviewSummarySubject.asObservable();
 
   public async loadReviewsByProposalId(proposalId: string): Promise<void> {
     const getResponse = await this.reviewApiService.listProposalReviews({
@@ -37,7 +45,7 @@ export class ReviewService {
       userId,
     });
 
-    this.userReviewListSubject.next(getResponse);
+    this.userReviewsSubject.next(getResponse);
   }
 
   public async loadReview(proposalReviewId: string): Promise<void> {
@@ -47,4 +55,12 @@ export class ReviewService {
 
     this.currentReviewSubject.next(getResponse);
   }
+
+  public async loadReviewSummary(proposalId: string): Promise<void> {
+    const getResponse = await this.reviewApiService.getMyProposalReviewSummary({
+      proposalId,
+    });
+
+    this.currentUserReviewSummarySubject.next(getResponse);
+  }
 }
diff --git a/src/frontend/src/app/pages/proposal-review/proposal-review.component.spec.ts b/src/frontend/src/app/pages/proposal-review/proposal-review.component.spec.ts
index 8c766c05..dee70a15 100644
--- a/src/frontend/src/app/pages/proposal-review/proposal-review.component.spec.ts
+++ b/src/frontend/src/app/pages/proposal-review/proposal-review.component.spec.ts
@@ -33,6 +33,7 @@ describe('ProposalReviewComponent', () => {
   beforeEach(async () => {
     reviewServiceMock = reviewServiceMockFactory();
     defineProp(reviewServiceMock, 'currentReview$', of(null));
+    defineProp(reviewServiceMock, 'currentUserReviewSummary$', of(null));
 
     proposalServiceMock = proposalServiceMockFactory();
     defineProp(proposalServiceMock, 'currentProposal$', of(null));
diff --git a/src/frontend/src/app/pages/proposal-review/proposal-review.component.ts b/src/frontend/src/app/pages/proposal-review/proposal-review.component.ts
index e3404653..eb3e14cf 100644
--- a/src/frontend/src/app/pages/proposal-review/proposal-review.component.ts
+++ b/src/frontend/src/app/pages/proposal-review/proposal-review.component.ts
@@ -8,10 +8,13 @@ import {
   OnInit,
   signal,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 
-import { BadgeComponent, CardComponent } from '@cg/angular-ui';
+import {
+  BadgeComponent,
+  CardComponent,
+  CopyToClipboardComponent,
+} from '@cg/angular-ui';
 import { ProposalReviewStatus, ProposalState } from '~core/api';
 import { ProfileService, ProposalService, ReviewService } from '~core/state';
 import {
@@ -19,7 +22,7 @@ import {
   KeyValueGridComponent,
   ValueColComponent,
 } from '~core/ui';
-import { isNil, isNotNil, routeParamSignal } from '~core/utils';
+import { isNil, isNotNil, routeParamSignal, toSyncSignal } from '~core/utils';
 
 @Component({
   selector: 'app-proposal-review',
@@ -28,6 +31,7 @@ import { isNil, isNotNil, routeParamSignal } from '~core/utils';
     RouterLink,
     CardComponent,
     BadgeComponent,
+    CopyToClipboardComponent,
     KeyValueGridComponent,
     ValueColComponent,
     KeyColComponent,
@@ -61,146 +65,153 @@ import { isNil, isNotNil, routeParamSignal } from '~core/utils';
     `,
   ],
   template: `
-    @if (currentReview(); as review) {
-      @if (currentProposal(); as proposal) {
-        @if (currentReviewer(); as reviewer) {
-          @let ProposalReviewStatus = proposalReviewStatus();
-
-          <div class="page-heading">
-            <h1 class="h3">
-              Review for proposal {{ proposal.nsProposalId }} by
-              {{ reviewer.username }}
-            </h1>
-
-            @if (review.status === ProposalReviewStatus.Published) {
-              <cg-badge theme="success">Published</cg-badge>
-            } @else {
-              <cg-badge theme="error">Draft</cg-badge>
+    @let review = this.currentReview();
+    @let proposal = this.currentProposal();
+    @let reviewer = this.currentReviewer();
+    @let ProposalReviewStatus = this.ProposalReviewStatus();
+    @let ProposalState = this.ProposalState();
+    @let isReviewOwner = this.isReviewOwner();
+    @let currentReviewSummary = this.currentReviewSummary();
+
+    @if (review && proposal && reviewer) {
+      <div class="page-heading">
+        <h1 class="h3">
+          Review for proposal {{ proposal.nsProposalId }} by
+          {{ reviewer.username }}
+        </h1>
+
+        @if (review.status === ProposalReviewStatus.Published) {
+          <cg-badge theme="success">Published</cg-badge>
+        } @else {
+          <cg-badge theme="error">Draft</cg-badge>
+        }
+      </div>
+
+      <cg-card class="review__details">
+        <div slot="cardContent">
+          <app-key-value-grid [columnNumber]="1">
+            <app-key-col id="proposal-title">Proposal title</app-key-col>
+            <app-value-col aria-labelledby="proposal-title">
+              <a [routerLink]="['/', proposal.id]">
+                {{ proposal.title }}
+              </a>
+            </app-value-col>
+
+            <app-key-col id="review-summary">Summary</app-key-col>
+            <app-value-col aria-labelledby="review-summary">
+              {{ review.summary }}
+            </app-value-col>
+
+            <app-key-col id="review-vote">Reviewer vote</app-key-col>
+            <app-value-col aria-labelledby="review-vote">
+              @switch (review.vote) {
+                @case (true) {
+                  <span class="answer--positive">Adopt</span>
+                }
+                @case (false) {
+                  <span class="answer--negative">Reject</span>
+                }
+                @default {
+                  No vote
+                }
+              }
+            </app-value-col>
+
+            <app-key-col id="review-build">Build reproduction</app-key-col>
+            <app-value-col aria-labelledby="review-build">
+              @switch (review.buildReproduced) {
+                @case (true) {
+                  <span class="answer--positive">Successful</span>
+                }
+                @case (false) {
+                  <span class="answer--negative">Unsuccessful</span>
+                }
+                @default {
+                  Not applicable
+                }
+              }
+            </app-value-col>
+
+            <app-key-col id="review-images">
+              Build verification images
+            </app-key-col>
+            <app-value-col aria-labelledby="review-mages">
+              @for (
+                image of review.reproducedBuildImageId;
+                track image.sm.url
+              ) {
+                <a [href]="image.xxl.url" target="_blank">
+                  <img [src]="image.sm.url" class="review__image" />
+                </a>
+              } @empty {
+                No build verification images were provided for this review.
+              }
+            </app-value-col>
+          </app-key-value-grid>
+
+          <div class="btn-group">
+            @if (isReviewOwner && proposal.state === ProposalState.InProgress) {
+              <a
+                class="btn btn--outline"
+                [routerLink]="['/review', proposal.id, 'edit']"
+              >
+                Edit review
+              </a>
             }
           </div>
+        </div>
+      </cg-card>
 
-          <cg-card class="review__details">
-            <div slot="cardContent">
-              <app-key-value-grid [columnNumber]="1">
-                <app-key-col id="proposal-title">Proposal title</app-key-col>
-                <app-value-col aria-labelledby="proposal-title">
-                  <a [routerLink]="['/', proposal.id]">
-                    {{ proposal.title }}
-                  </a>
-                </app-value-col>
-
-                <app-key-col id="review-summary">Summary</app-key-col>
-                <app-value-col aria-labelledby="review-summary">
-                  {{ review.summary }}
-                </app-value-col>
+      <h2 class="h4">Commits</h2>
+      @for (commit of review.commits; track commit.id; let i = $index) {
+        <cg-card class="review__commit">
+          <div slot="cardContent">
+            <app-key-value-grid [columnNumber]="1">
+              <app-key-col [id]="'commit-id-' + i">ID</app-key-col>
+              <app-value-col [attr.labelledby]="'commit-id-' + i">
+                <a
+                  [href]="
+                    'https://github.com/dfinity/ic/commit/' + commit.commitSha
+                  "
+                  target="_blank"
+                  rel="nofollow noreferrer"
+                >
+                  {{ commit.commitSha }}
+                </a>
+              </app-value-col>
 
-                <app-key-col id="review-vote">Reviewer vote</app-key-col>
-                <app-value-col aria-labelledby="review-vote">
-                  @switch (review.vote) {
-                    @case (true) {
-                      <span class="answer--positive">Adopt</span>
-                    }
-                    @case (false) {
-                      <span class="answer--negative">Reject</span>
-                    }
-                    @default {
-                      No vote
-                    }
-                  }
-                </app-value-col>
+              <app-key-col [id]="'reviewed-' + i">Reviewed</app-key-col>
+              <app-value-col [attr.labelledby]="'reviewed-' + i">
+                {{ commit.details.reviewed ? 'Yes' : 'No' }}
+              </app-value-col>
 
-                <app-key-col id="review-build">Build reproduction</app-key-col>
-                <app-value-col aria-labelledby="review-build">
-                  @switch (review.buildReproduced) {
-                    @case (true) {
-                      <span class="answer--positive">Successful</span>
-                    }
-                    @case (false) {
-                      <span class="answer--negative">Unsuccessful</span>
-                    }
-                    @default {
-                      Not applicable
-                    }
-                  }
+              @if (commit.details.reviewed) {
+                <app-key-col [id]="'matches-descr-id-' + i">
+                  Matches description
+                </app-key-col>
+                <app-value-col [attr.labelledby]="'matches-descr-id-' + i">
+                  {{ commit.details.matchesDescription ? 'Yes' : 'No' }}
                 </app-value-col>
 
-                <app-key-col id="review-images">
-                  Build verification images
+                <app-key-col [id]="'summary-id-' + i">
+                  Commit summary
                 </app-key-col>
-                <app-value-col aria-labelledby="review-mages">
-                  @for (
-                    image of review.reproducedBuildImageId;
-                    track image.sm.url
-                  ) {
-                    <a [href]="image.xxl.url" target="_blank">
-                      <img [src]="image.sm.url" class="review__image" />
-                    </a>
-                  } @empty {
-                    No build verification images were provided for this review.
-                  }
+                <app-value-col [attr.labelledby]="'summary-id-' + i">
+                  {{ commit.details.comment }}
                 </app-value-col>
-              </app-key-value-grid>
-
-              <div class="btn-group">
-                @if (
-                  isReviewOwner() &&
-                  proposal.state === ProposalState().InProgress
-                ) {
-                  <a
-                    class="btn btn--outline"
-                    [routerLink]="['/review', proposal.id, 'edit']"
-                  >
-                    Edit review
-                  </a>
-                }
-              </div>
-            </div>
-          </cg-card>
-
-          <h2 class="h4">Commits</h2>
-          @for (commit of review.commits; track commit.id; let i = $index) {
-            <cg-card class="review__commit">
-              <div slot="cardContent">
-                <app-key-value-grid [columnNumber]="1">
-                  <app-key-col [id]="'commit-id-' + i">ID</app-key-col>
-                  <app-value-col [attr.labelledby]="'commit-id-' + i">
-                    <a
-                      [href]="
-                        'https://github.com/dfinity/ic/commit/' +
-                        commit.commitSha
-                      "
-                      target="_blank"
-                      rel="nofollow noreferrer"
-                    >
-                      {{ commit.commitSha }}
-                    </a>
-                  </app-value-col>
-
-                  <app-key-col [id]="'reviewed-' + i">Reviewed</app-key-col>
-                  <app-value-col [attr.labelledby]="'reviewed-' + i">
-                    {{ commit.details.reviewed ? 'Yes' : 'No' }}
-                  </app-value-col>
-
-                  @if (commit.details.reviewed) {
-                    <app-key-col [id]="'matches-descr-id-' + i">
-                      Matches description
-                    </app-key-col>
-                    <app-value-col [attr.labelledby]="'matches-descr-id-' + i">
-                      {{ commit.details.matchesDescription ? 'Yes' : 'No' }}
-                    </app-value-col>
-
-                    <app-key-col [id]="'summary-id-' + i">
-                      Commit summary
-                    </app-key-col>
-                    <app-value-col [attr.labelledby]="'summary-id-' + i">
-                      {{ commit.details.comment }}
-                    </app-value-col>
-                  }
-                </app-key-value-grid>
-              </div>
-            </cg-card>
-          }
-        }
+              }
+            </app-key-value-grid>
+          </div>
+        </cg-card>
+      }
+
+      @if (isReviewOwner && currentReviewSummary) {
+        <h2 class="h4">Proposal summary markdown</h2>
+
+        <cg-copy-to-clipboard
+          type="textarea"
+          [value]="currentReviewSummary.summaryMarkdown"
+        />
       }
     }
   `,
@@ -210,37 +221,71 @@ export class ProposalReviewComponent implements OnInit {
   private readonly proposalService = inject(ProposalService);
   private readonly profileService = inject(ProfileService);
 
-  public readonly proposalReviewStatus = signal(ProposalReviewStatus);
+  public readonly ProposalReviewStatus = signal(ProposalReviewStatus);
   public readonly ProposalState = signal(ProposalState);
 
-  public readonly userProfile = toSignal(this.profileService.currentUser$);
-  public readonly isReviewOwner = computed(() => {
-    const userId = this.currentReview()?.userId;
-
-    return isNotNil(userId) && userId === this.currentReviewerId();
-  });
-
   public readonly currentReviewId = routeParamSignal('reviewId');
-  public readonly currentReview = toSignal(this.reviewService.currentReview$);
 
-  public readonly currentProposalId = computed(
-    () => this.currentReview()?.proposalId ?? null,
+  public readonly currentReview = toSyncSignal(
+    this.reviewService.currentReview$,
+  );
+  public readonly currentReviewSummary = toSyncSignal(
+    this.reviewService.currentUserReviewSummary$,
   );
-  public readonly currentProposal = toSignal(
+  private readonly currentUser$ = toSyncSignal(
+    this.profileService.currentUser$,
+  );
+  public readonly currentProposal = toSyncSignal(
     this.proposalService.currentProposal$,
   );
+  private readonly reviewers = toSyncSignal(this.profileService.reviewers$);
 
-  public readonly reviewers = toSignal(this.profileService.reviewers$);
-  public readonly currentReviewerId = computed(
-    () => this.currentReview()?.userId ?? null,
-  );
   public readonly currentReviewer = computed(() => {
-    const reviewerId = this.currentReviewerId();
-    if (isNil(reviewerId)) {
+    const reviewerId = this.reviewOwnerId();
+    const reviewers = this.reviewers();
+    if (isNil(reviewerId) || isNil(reviewers)) {
+      return null;
+    }
+
+    return reviewers[reviewerId] ?? null;
+  });
+
+  public readonly isReviewOwner = computed(() => {
+    const reviewOwnerId = this.reviewOwnerId();
+    const currentUserId = this.currentUserId();
+
+    if (isNil(reviewOwnerId) || isNil(currentUserId)) {
+      return false;
+    }
+
+    return reviewOwnerId === currentUserId;
+  });
+
+  private readonly reviewOwnerId = computed(() => {
+    const review = this.currentReview();
+    if (isNil(review)) {
       return null;
     }
 
-    return this.reviewers()?.[reviewerId] ?? null;
+    return review.userId;
+  });
+
+  private readonly currentUserId = computed(() => {
+    const user = this.currentUser$();
+    if (isNil(user)) {
+      return null;
+    }
+
+    return user.id;
+  });
+
+  private readonly currentProposalId = computed(() => {
+    const currentReview = this.currentReview();
+    if (isNil(currentReview)) {
+      return null;
+    }
+
+    return currentReview.proposalId;
   });
 
   constructor() {
@@ -252,6 +297,15 @@ export class ProposalReviewComponent implements OnInit {
       }
     });
 
+    effect(() => {
+      const isReviewOwner = this.isReviewOwner();
+      const currentProposalId = this.currentProposalId();
+
+      if (isReviewOwner && isNotNil(currentProposalId)) {
+        this.reviewService.loadReviewSummary(currentProposalId);
+      }
+    });
+
     effect(() => {
       const proposalId = this.currentProposalId();