diff --git a/app/javascript/packs/app/action_types.js b/app/javascript/packs/app/action_types.js
index 4a2ee313a..059d8c6a6 100644
--- a/app/javascript/packs/app/action_types.js
+++ b/app/javascript/packs/app/action_types.js
@@ -13,3 +13,12 @@ export const CHANGE_CURRENT_USER_EMAIL = "CHANGE_CURRENT_USER_EMAIL";
 export const CHANGE_CURRENT_USER_PASSWORD = "CHANGE_CURRENT_USER_PASSWORD";
 export const CHANGE_CURRENT_USER_AVATAR = "CHANGE_CURRENT_USER_AVATAR";
 export const CHANGE_CURRENT_USER_TIMEZONE = "CHANGE_CURRENT_USER_TIMEZONE";
+export const CHANGE_ASSIGNMENTS_NOTIFICATION =
+  "CHANGE_ASSIGNMENTS_NOTIFICATION";
+export const CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL =
+  "CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL";
+export const CHANGE_RECENT_NOTIFICATION = "CHANGE_RECENT_NOTIFICATION";
+export const CHANGE_RECENT_NOTIFICATION_EMAIL =
+  "CHANGE_RECENT_NOTIFICATION_EMAIL";
+export const CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL =
+  "CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL";
diff --git a/app/javascript/packs/shared/actions/UsersActions.js b/app/javascript/packs/shared/actions/UsersActions.js
index 4c4ff3b8d..c8ff005db 100644
--- a/app/javascript/packs/shared/actions/UsersActions.js
+++ b/app/javascript/packs/shared/actions/UsersActions.js
@@ -7,7 +7,10 @@ import {
   CHANGE_CURRENT_USER_EMAIL,
   CHANGE_CURRENT_USER_PASSWORD,
   CHANGE_CURRENT_USER_AVATAR,
-  CHANGE_CURRENT_USER_TIMEZONE
+  CHANGE_CURRENT_USER_TIMEZONE,
+  CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+  CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
+  CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION
 } from "../../app/action_types";
 
 function addCurrentUser(data) {
@@ -71,3 +74,36 @@ export function changeTimezone(timezone) {
     payload: timezone
   };
 }
+
+export function changeAssignmentsNotification(status) {
+  return {
+    type: CHANGE_CURRENT_USER_ASSIGNEMENT_NOTIFICATION,
+    payload: status
+  };
+}
+export function changeAssignmentsNotificationEmail(status) {
+  return {
+    type: CHANGE_CURRENT_USER_CHANGES_NOTIFICATION,
+    payload: status
+  };
+}
+export function changeRecentNotification(status) {
+  return {
+    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    payload: status
+  };
+}
+
+export function changeRecentNotificationEmail(status) {
+  return {
+    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    payload: status
+  };
+}
+
+export function changeSystemMessageNotificationEmail(status) {
+  return {
+    type: CHANGE_CURRENT_USER_SYSTEM_NOTIFICATION,
+    payload: status
+  };
+}
diff --git a/app/javascript/packs/shared/reducers/UsersReducer.js b/app/javascript/packs/shared/reducers/UsersReducer.js
index 32a1ca6d5..d2375e110 100644
--- a/app/javascript/packs/shared/reducers/UsersReducer.js
+++ b/app/javascript/packs/shared/reducers/UsersReducer.js
@@ -5,7 +5,12 @@ import {
   CHANGE_CURRENT_USER_EMAIL,
   CHANGE_CURRENT_USER_PASSWORD,
   CHANGE_CURRENT_USER_AVATAR,
-  CHANGE_CURRENT_USER_TIMEZONE
+  CHANGE_CURRENT_USER_TIMEZONE,
+  CHANGE_ASSIGNMENTS_NOTIFICATION,
+  CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL,
+  CHANGE_RECENT_NOTIFICATION,
+  CHANGE_RECENT_NOTIFICATION_EMAIL,
+  CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
 } from "../../app/action_types";
 
 export function currentUser(
@@ -16,7 +21,12 @@ export function currentUser(
     email: "",
     avatarPath: "",
     avatarThumbPath: "",
-    timezone: ""
+    timezone: "",
+    assignmentsNotification: false,
+    assignmentsNotificationEmail: false,
+    recentNotification: false,
+    recentNotificationEmail: false,
+    systemMessageNotificationEmail: false
   },
   action
 ) {
@@ -37,6 +47,24 @@ export function currentUser(
       return Object.assign({}, state, { avatar: action.payload });
     case CHANGE_CURRENT_USER_TIMEZONE:
       return Object.assign({}, state, { timezone: action.payload });
+    case CHANGE_ASSIGNMENTS_NOTIFICATION:
+      return Object.assign({}, state, {
+        assignmentsNotification: action.payload
+      });
+    case CHANGE_ASSIGNMENTS_NOTIFICATION_EMAIL:
+      return Object.assign({}, state, {
+        assignmentsNotificationEmail: action.payload
+      });
+    case CHANGE_RECENT_NOTIFICATION:
+      return Object.assign({}, state, { recentNotification: action.payload });
+    case CHANGE_RECENT_NOTIFICATION_EMAIL:
+      return Object.assign({}, state, {
+        recentNotificationEmail: action.payload
+      });
+    case CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL:
+      return Object.assign({}, state, {
+        systemMessageNotificationEmail: action.payload
+      });
     default:
       return state;
   }
diff --git a/app/javascript/packs/src/settings/components/NotificationsBtnGroup.jsx b/app/javascript/packs/src/settings/components/NotificationsBtnGroup.jsx
new file mode 100644
index 000000000..94d3d1f8c
--- /dev/null
+++ b/app/javascript/packs/src/settings/components/NotificationsBtnGroup.jsx
@@ -0,0 +1,52 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+  changeAssignmentsNotification,
+  changeAssignmentsNotificationEmail,
+  changeRecentNotification,
+  changeRecentNotificationEmail,
+  changeSystemMessageNotificationEmail
+} from "../../../shared/actions/UsersActions";
+
+class NotificationsBtnGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSciNoteSwitchOn: false,
+      isEmailSwitchOn: false
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>tonko</h1>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => state.current_user;
+const mapDispatchToProps = dispatch => ({
+  changeAssignmentsNotification(status) {
+    dispatch(changeAssignmentsNotification(status));
+  },
+  changeAssignmentsNotificationEmail(status) {
+    dispatch(changeAssignmentsNotificationEmail(status));
+  },
+  changeRecentNotification(status) {
+    dispatch(changeRecentNotification(status));
+  },
+  changeRecentNotificationEmail(status) {
+    dispatch(changeRecentNotificationEmail(status));
+  },
+  changeSystemMessageNotificationEmail(status) {
+    dispatch(changeSystemMessageNotificationEmail(status));
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  NotificationsBtnGroup
+);
diff --git a/app/javascript/packs/src/settings/components/NotificationsGroup.jsx b/app/javascript/packs/src/settings/components/NotificationsGroup.jsx
new file mode 100644
index 000000000..0243b2ac9
--- /dev/null
+++ b/app/javascript/packs/src/settings/components/NotificationsGroup.jsx
@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import NotificationsBtnGroup from "./NotificationsBtnGroup";
+
+const Icon = styled.span`
+  background-color: silver;
+  border-radius: 50%;
+  color: #f5f5f5;
+  display: block !important;
+  font-size: 15px;
+  height: 30px;
+  margin-right: 15px;
+  padding: 7px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  width: 30px;
+`;
+
+class NotificationsGroup extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="row">
+          <div className="col-sm-2">
+            <Icon>
+              <i className="fa fa-newspaper-o" />
+            </Icon>
+          </div>
+          <div className="col-sm-10">
+            <h5>
+              {this.props.title}
+            </h5>
+            <p>
+              {this.props.subtitle}
+            </p>
+          </div>
+        </div>
+
+        <NotificationsBtnGroup type={this.props.type} />
+      </div>
+    );
+  }
+}
+
+NotificationsGroup.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
+};
+
+export default NotificationsGroup;
diff --git a/app/javascript/packs/src/settings/components/SettingsPreferences.jsx b/app/javascript/packs/src/settings/components/SettingsPreferences.jsx
index 55b888885..efabf08e2 100644
--- a/app/javascript/packs/src/settings/components/SettingsPreferences.jsx
+++ b/app/javascript/packs/src/settings/components/SettingsPreferences.jsx
@@ -6,13 +6,14 @@ import InputDisabled from "./InputDisabled";
 import InputTimezone from "./InputTimezone";
 
 import { changeTimezone } from "../../../shared/actions/UsersActions";
+import NotificationsGroup from "./NotificationsGroup";
 
 class SettingsPreferences extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      isTimeZoneEditable: true
+      isTimeZoneEditable: false
     };
   }
 
@@ -52,6 +53,14 @@ class SettingsPreferences extends Component {
           Time zone setting affects all time & date fields throughout
           application.
         </small>
+
+        <h3>Notifications</h3>
+        <NotificationsGroup
+          type="assignement"
+          title="Assignement"
+          subtitle="Assignment notifications appear whenever you get assigned to a team, project, task."
+          imageUrl={this.props.avatarPath}
+        />
       </div>
     );
   }
@@ -59,7 +68,8 @@ class SettingsPreferences extends Component {
 
 SettingsPreferences.propTypes = {
   timezone: PropTypes.string.isRequired,
-  changeTimezone: PropTypes.func.isRequired
+  changeTimezone: PropTypes.func.isRequired,
+  avatarPath: PropTypes.string.isRequired
 };
 
 const mapStateToProps = state => state.current_user;
diff --git a/app/views/client_api/users/show.json.jbuilder b/app/views/client_api/users/show.json.jbuilder
index c60f96122..d7be12e49 100644
--- a/app/views/client_api/users/show.json.jbuilder
+++ b/app/views/client_api/users/show.json.jbuilder
@@ -7,4 +7,9 @@ json.user do
   json.avatarThumbPath avatar_path(user, :thumb)
   json.statistics user.statistics
   json.timezone user.time_zone
+  json.assignmentsNotification user.assignments_notification
+  json.assignmentsNotificationEmail user.assignments_notification_email
+  json.recentNotification user.recent_notification
+  json.recentNotificationEmail user.recent_notification_email
+  json.systemMessageNotificationEmail user.system_message_notification_email
 end