diff --git a/apps/red-ui/src/app/models/notification-preferences.ts b/apps/red-ui/src/app/models/notification-preferences.ts
new file mode 100644
index 000000000..f3aad2a88
--- /dev/null
+++ b/apps/red-ui/src/app/models/notification-preferences.ts
@@ -0,0 +1,26 @@
+import { FormControl } from '@angular/forms';
+
+export class NotificationPreferences {
+    //TODO replace hardcoded values with the ones from backend when it will be done
+    readonly isActive: FormControl = new FormControl(true);
+    readonly sendSchedule?: FormControl;
+
+    readonly dossierStatusChanges: FormControl = new FormControl(true);
+    readonly requestToJoinTheDossier: FormControl = new FormControl(true);
+    readonly documentStatusChanges: FormControl = new FormControl(true);
+    readonly documentIsSentForApproval: FormControl = new FormControl(true);
+
+    readonly whenIAmAssignedOnADocument: FormControl = new FormControl(true);
+    readonly whenIAmUnassignedFromADocument: FormControl = new FormControl(true);
+    readonly whenADocumentIsApproved: FormControl = new FormControl(true);
+
+    readonly whenADocumentIsSentForApproval: FormControl = new FormControl(true);
+    readonly whenADocumentIsAssignedToAReviewer: FormControl = new FormControl(true);
+    readonly whenAReviewerIsUnassignedFromADocument: FormControl = new FormControl(true);
+
+    constructor(sendSchedule?: string) {
+        if (sendSchedule) {
+            this.sendSchedule = new FormControl(sendSchedule);
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html
index f132cc2cf..e43fbbcec 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.html
@@ -12,37 +12,120 @@
                         <div class="heading-l" translate="notifications-screen.title"></div>
                     </div>
                     <form (submit)="save()" [formGroup]="formGroup">
-                        <!--                        <div class="dialog-content">-->
-                        <!--                            <div class="dialog-content-left">-->
-                        <!--                                <div class="iqser-input-group required">-->
-                        <!--                                    <label translate="user-profile-screen.form.email"></label>-->
-                        <!--                                    <input formControlName="email" name="email" type="email" />-->
-                        <!--                                </div>-->
+                        <div class="dialog-content">
+                            <div *ngFor="let category of notificationCategories" formGroupName="{{ category }}">
+                                <div class="iqser-input-group header w-full">
+                                    <mat-slide-toggle color="primary" formControlName="isActive">{{
+                                        translations[category] | translate
+                                    }}</mat-slide-toggle>
+                                </div>
 
-                        <!--                                <div class="iqser-input-group">-->
-                        <!--                                    <label translate="user-profile-screen.form.first-name"></label>-->
-                        <!--                                    <input formControlName="firstName" name="firstName" type="text" />-->
-                        <!--                                </div>-->
+                                <div class="options-content" *ngIf="isFormActive(category)">
+                                    <div class="radio-container" *ngIf="getSchedule(category)">
+                                        <div class="radio-button" *ngFor="let schedule of sendSchedules">
+                                            <iqser-round-checkbox
+                                                [active]="getSchedule(category).value === schedule"
+                                                (click)="setSchedule(schedule)"
+                                            >
+                                            </iqser-round-checkbox>
+                                            <span> {{ translations[schedule] | translate }} </span>
+                                        </div>
+                                    </div>
 
-                        <!--                                <div class="iqser-input-group">-->
-                        <!--                                    <label translate="user-profile-screen.form.last-name"></label>-->
-                        <!--                                    <input formControlName="lastName" name="lastName" type="text" />-->
-                        <!--                                </div>-->
-                        <!--                                <div class="iqser-input-group">-->
-                        <!--                                    <label translate="top-bar.navigation-items.my-account.children.language.label"></label>-->
-                        <!--                                    <mat-select formControlName="language">-->
-                        <!--                                        <mat-option *ngFor="let language of languages" [value]="language">-->
-                        <!--                                            {{ translations[language] | translate }}-->
-                        <!--                                        </mat-option>-->
-                        <!--                                    </mat-select>-->
-                        <!--                                </div>-->
-                        <!--                                <div class="iqser-input-group">-->
-                        <!--                                    <a [href]="changePasswordUrl" target="_blank">-->
-                        <!--                                        {{ 'user-profile-screen.actions.change-password' | translate }}</a-->
-                        <!--                                    >-->
-                        <!--                                </div>-->
-                        <!--                            </div>-->
-                        <!--                        </div>-->
+                                    <div class="statement" translate="notifications-screen.options-title"></div>
+
+                                    <div class="group">
+                                        <div class="group-title" translate="notifications-screen.groups.dossiers-you-own"></div>
+                                        <div class="iqser-input-group">
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="dossierStatusChanges"
+                                                name="dossierStatusChanges"
+                                            >
+                                                {{ 'notifications-screen.options.dossier-status-changes' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="requestToJoinTheDossier"
+                                                name="requestToJoinTheDossier"
+                                            >
+                                                {{ 'notifications-screen.options.request-to-join-the-dossier' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="documentStatusChanges"
+                                                name="documentStatusChanges"
+                                            >
+                                                {{ 'notifications-screen.options.document-status-changes' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="documentIsSentForApproval"
+                                                name="documentIsSentForApproval"
+                                            >
+                                                {{ 'notifications-screen.options.document-is-sent-for-approval' | translate }}
+                                            </mat-checkbox>
+                                        </div>
+                                    </div>
+
+                                    <div class="group">
+                                        <div class="group-title" translate="notifications-screen.groups.dossiers-you-are-reviewer-on"></div>
+                                        <div class="iqser-input-group">
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenIAmAssignedOnADocument"
+                                                name="whenIAmAssignedOnADocument"
+                                            >
+                                                {{ 'notifications-screen.options.when-i-am-assigned-on-a-document' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenIAmUnassignedFromADocument"
+                                                name="whenIAmUnassignedFromADocument"
+                                            >
+                                                {{ 'notifications-screen.options.when-i-am-unassigned-from-a-document' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenADocumentIsApproved"
+                                                name="whenADocumentIsApproved"
+                                            >
+                                                {{ 'notifications-screen.options.when-a-document-is-approved' | translate }}
+                                            </mat-checkbox>
+                                        </div>
+                                    </div>
+
+                                    <div class="group">
+                                        <div class="group-title" translate="notifications-screen.groups.dossiers-you-are-approver-on"></div>
+                                        <div class="iqser-input-group">
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenADocumentIsSentForApproval"
+                                                name="whenADocumentIsSentForApproval"
+                                            >
+                                                {{ 'notifications-screen.options.when-a-document-is-sent-for-approval' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenADocumentIsAssignedToAReviewer"
+                                                name="whenADocumentIsAssignedToAReviewer"
+                                            >
+                                                {{ 'notifications-screen.options.when-a-document-is-assigned-to-a-reviewer' | translate }}
+                                            </mat-checkbox>
+                                            <mat-checkbox
+                                                color="primary"
+                                                formControlName="whenAReviewerIsUnassignedFromADocument"
+                                                name="whenAReviewerIsUnassignedFromADocument"
+                                            >
+                                                {{
+                                                    'notifications-screen.options.when-a-reviewer-is-unassigned-from-a-document' | translate
+                                                }}
+                                            </mat-checkbox>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
 
                         <div class="dialog-actions">
                             <button [disabled]="formGroup.invalid" color="primary" mat-flat-button type="submit">
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss
index b4a5b79ac..e541ddbed 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.scss
@@ -1,16 +1,65 @@
 @use 'variables';
 @use 'common-mixins';
 
-.dialog {
-    width: 100%;
-    min-height: unset;
-}
-
 .content-container {
     background-color: variables.$grey-2;
     justify-content: center;
     @include common-mixins.scroll-bar;
     overflow: auto;
+
+    .dialog {
+        width: 100%;
+        min-height: unset;
+
+        .dialog-content {
+            flex-direction: column;
+
+            .header {
+                grid-column: span 2;
+                padding: 10px 10px;
+                margin-bottom: -1px;
+                border-top: 1px solid variables.$separator;
+                border-bottom: 1px solid variables.$separator;
+            }
+
+            .options-content {
+                padding: 10px 48px;
+
+                .statement {
+                    opacity: 0.7;
+                    color: variables.$grey-1;
+                    font-weight: 500;
+                    padding: 10px 0;
+                }
+
+                .radio-container {
+                    display: flex;
+                    padding: 10px 0 10px;
+                    .radio-button {
+                        display: flex;
+                        align-items: center;
+                        padding-right: 30px;
+                        iqser-round-checkbox {
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .group {
+                    padding: 10px 0;
+
+                    .group-title {
+                        color: variables.$grey-1;
+                        font-weight: 600;
+                    }
+
+                    .iqser-input-group {
+                        margin-top: 5px;
+                    }
+                }
+            }
+        }
+    }
 }
 
 .full-height {
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts
index 37017e8b8..cc5ac3434 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen.component.ts
@@ -1,5 +1,13 @@
 import { Component } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { notificationsTranslations } from '../../translations/notifications-translations';
+import { NotificationPreferences } from '../../../../models/notification-preferences';
+
+enum SendSchedule {
+    INSTANT = 'instant',
+    DAILY = 'daily',
+    WEEKLY = 'weekly'
+}
 
 @Component({
     selector: 'redaction-notifications-screen',
@@ -7,10 +15,30 @@ import { FormBuilder, FormGroup } from '@angular/forms';
     styleUrls: ['./notifications-screen.component.scss']
 })
 export class NotificationsScreenComponent {
+    readonly sendSchedules = ['instant', 'daily', 'weekly'];
+    readonly notificationCategories = ['inAppNotifications', 'emailNotifications'];
+
+    readonly translations = notificationsTranslations;
+
     formGroup: FormGroup;
 
     constructor(private readonly _formBuilder: FormBuilder) {
-        this.formGroup = this._formBuilder.group({});
+        this.formGroup = this._formBuilder.group({
+            inAppNotifications: new FormGroup(new NotificationPreferences() as any),
+            emailNotifications: new FormGroup(new NotificationPreferences(SendSchedule.INSTANT) as any)
+        });
+    }
+
+    setSchedule(schedule: string) {
+        this.formGroup.get('emailNotifications').get('sendSchedule').setValue(schedule);
+    }
+
+    isFormActive(category: string) {
+        return this.formGroup.get(category).get('isActive').value;
+    }
+
+    getSchedule(category: string) {
+        return this.formGroup.get(category).get('sendSchedule');
     }
 
     save() {}
diff --git a/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts b/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts
new file mode 100644
index 000000000..425de6942
--- /dev/null
+++ b/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts
@@ -0,0 +1,9 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+export const notificationsTranslations: { [key: string]: string } = {
+    instant: _('notifications-screen.schedule.instant'),
+    daily: _('notifications-screen.schedule.daily'),
+    weekly: _('notifications-screen.schedule.weekly'),
+    inAppNotifications: _('notifications-screen.category.in-app-notifications'),
+    emailNotifications: _('notifications-screen.category.email-notifications')
+} as const;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 8e95d43ce..6eb4ca214 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1235,6 +1235,33 @@
   },
   "notifications": "Notifications",
   "notifications-screen": {
+    "category": {
+      "email-notifications": "Email Notifications",
+      "in-app-notifications": "In-App Notifications"
+    },
+    "groups": {
+      "dossiers-you-are-approver-on": "Dossiers you are approver on",
+      "dossiers-you-are-reviewer-on": "Dossiers you are reviewer on",
+      "dossiers-you-own": "Dossiers you own"
+    },
+    "options-title": "Choose on which category you want to be notified",
+    "options": {
+      "document-is-sent-for-approval": "Document is sent for approval",
+      "document-status-changes": "Document status changes",
+      "dossier-status-changes": "Dossier status changes",
+      "request-to-join-the-dossier": "Request to join the dossier",
+      "when-a-document-is-approved": "When a document is approved",
+      "when-a-document-is-assigned-to-a-reviewer": "When a document is assigned to a reviewer",
+      "when-a-document-is-sent-for-approval": "When a document is sent for approval",
+      "when-a-reviewer-is-unassigned-from-a-document": "When a reviewer is unassigned from a document",
+      "when-i-am-assigned-on-a-document": "When I am assigned on a document",
+      "when-i-am-unassigned-from-a-document": "When I am unassigned from a document"
+    },
+    "schedule": {
+      "daily": "Daily Summary",
+      "instant": "Instant",
+      "weekly": "Weekly Summary"
+    },
     "title": "Notifications Preferences"
   },
   "overwrite-files-dialog": {