diff --git a/client-portal/modules/appContext.tsx b/client-portal/modules/appContext.tsx
index 4ed6dbcee74..f4c22681601 100644
--- a/client-portal/modules/appContext.tsx
+++ b/client-portal/modules/appContext.tsx
@@ -27,7 +27,11 @@ function AppProvider({ children }: Props) {
   const [currentUser, setCurrentUser] = React.useState(null);
   const [notificationsCount, setNotificationsCount] = React.useState(0);
 
-  const userQuery = useQuery<UserQueryResponse>(gql(queries.currentUser));
+  const { data: userData, loading: userLoading } = useQuery<UserQueryResponse>(
+    gql(queries.currentUser)
+  );
+
+  const response: any = useQuery(gql(clientPortalGetConfig), {});
 
   const notificationsCountQry = useQuery<NotificationsCountQueryResponse>(
     gql(queries.notificationsCountQuery),
@@ -37,8 +41,8 @@ function AppProvider({ children }: Props) {
   );
 
   useEffect(() => {
-    if (userQuery.data && userQuery.data.clientPortalCurrentUser) {
-      setCurrentUser(userQuery.data.clientPortalCurrentUser);
+    if (userData && userData.clientPortalCurrentUser) {
+      setCurrentUser(userData.clientPortalCurrentUser);
     }
 
     if (
@@ -87,15 +91,13 @@ function AppProvider({ children }: Props) {
       unsubscribe2();
     };
   }, [
-    userQuery,
+    userData,
     currentUser,
     notificationsCountQry,
     notificationsCount,
     setNotificationsCount,
   ]);
 
-  const response: any = useQuery(gql(clientPortalGetConfig), {});
-
   const config: Config = response.data
     ? response.data.clientPortalGetConfigByDomain
     : {};
@@ -107,12 +109,16 @@ function AppProvider({ children }: Props) {
     skip: !config.knowledgeBaseTopicId,
   });
 
+  if (userLoading || response.loading || topicResponse.loading) {
+    return null;
+  }
+
   const topic =
     (topicResponse.data
       ? topicResponse.data.clientPortalKnowledgeBaseTopicDetail
       : {}) || {};
 
-  if (userQuery.loading || response.loading) {
+  if (response.loading) {
     return null;
   }
 
diff --git a/client-portal/modules/card/components/ListHeader.tsx b/client-portal/modules/card/components/ListHeader.tsx
index b9f46107984..debd33df82e 100644
--- a/client-portal/modules/card/components/ListHeader.tsx
+++ b/client-portal/modules/card/components/ListHeader.tsx
@@ -1,7 +1,7 @@
+import { CardTab, FilterGroup } from "../../styles/cards";
 import { typeFilters, viewModes } from "../../main/constants";
 
 import Button from "../../common/Button";
-import { CardTab } from "../../styles/cards";
 import { Dropdown } from "react-bootstrap";
 import DropdownToggle from "../../common/DropdownToggle";
 import { HeaderWrapper } from "../../styles/main";
@@ -23,16 +23,7 @@ type Props = {
 
 export default class ListHeader extends React.Component<Props> {
   renderFilters() {
-    const {
-      mode,
-      setMode,
-      baseColor,
-      setShowForm,
-      setViewType,
-      viewType,
-      type,
-      hideHeader,
-    } = this.props;
+    const { mode, setMode, setViewType, viewType, hideHeader } = this.props;
 
     if (hideHeader) {
       return null;
@@ -40,33 +31,22 @@ export default class ListHeader extends React.Component<Props> {
 
     return (
       <>
-        <CardTab baseColor={baseColor} className="d-flex align-items-center">
-          {viewModes.map((item) => (
-            <span
-              className={`d-flex align-items-center justify-content-center ${
-                item.type === viewType ? "active" : ""
-              }`}
-              key={item.type}
-              onClick={() => setViewType(item.type)}
-            >
-              <Icon icon={item.icon} size={15} /> &nbsp; {item.label}
-            </span>
-          ))}
-        </CardTab>
-
         {viewType !== "board" && (
           <Dropdown>
             <Dropdown.Toggle
               as={DropdownToggle}
-              id="dropdown-custom-components"
+              id="dropdown-filter-components"
             >
-              <CardTab>
-                <span
-                  className={`d-flex align-items-center justify-content-center`}
-                >
-                  <Icon icon="filter" size={15} /> &nbsp; {mode}
-                </span>
-              </CardTab>
+              <FilterGroup className="d-flex align-items-center">
+                <label>Filter by</label> &nbsp;
+                <CardTab>
+                  <span
+                    className={`d-flex align-items-center justify-content-center`}
+                  >
+                    <Icon icon="filter" size={15} /> &nbsp; {mode}
+                  </span>
+                </CardTab>
+              </FilterGroup>
             </Dropdown.Toggle>
 
             <Dropdown.Menu>
@@ -85,6 +65,36 @@ export default class ListHeader extends React.Component<Props> {
             </Dropdown.Menu>
           </Dropdown>
         )}
+
+        <Dropdown>
+          <Dropdown.Toggle as={DropdownToggle} id="dropdown-view-components">
+            <FilterGroup className="d-flex align-items-center">
+              <label>View by</label> &nbsp;
+              <CardTab>
+                <span
+                  className={`d-flex align-items-center justify-content-center`}
+                >
+                  <Icon icon="layers-1" size={15} /> &nbsp; {viewType}
+                </span>
+              </CardTab>
+            </FilterGroup>
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu>
+            {viewModes.map((item) => (
+              <Dropdown.Item
+                key={item.type}
+                className="d-flex align-items-center justify-content-between"
+                eventKey="1"
+                onClick={() => {
+                  setViewType(item.type);
+                }}
+              >
+                {item.label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
       </>
     );
   }
diff --git a/client-portal/modules/common/Button.tsx b/client-portal/modules/common/Button.tsx
index 8afcd25f327..c42f08a5186 100644
--- a/client-portal/modules/common/Button.tsx
+++ b/client-portal/modules/common/Button.tsx
@@ -60,7 +60,7 @@ const ButtonStyled = styledTS<{
   block?: boolean;
   uppercase?: boolean;
 }>(styled.button)`
-  border-radius: 30px;
+  border-radius: 8px;
   position: relative;
   transition: all 0.3s ease;
   outline: 0;
diff --git a/client-portal/modules/main/components/SettingsLayout.tsx b/client-portal/modules/main/components/SettingsLayout.tsx
index cbdaf766752..15e7afdc6b6 100644
--- a/client-portal/modules/main/components/SettingsLayout.tsx
+++ b/client-portal/modules/main/components/SettingsLayout.tsx
@@ -1,11 +1,10 @@
 import { Config, IUser } from "../../types";
 import { LeftContent, LeftSidebar } from "../../styles/profile";
-import React, { useState } from "react";
 
 import Dropdown from "react-bootstrap/Dropdown";
 import Icon from "../../common/Icon";
-import Link from "next/link";
 import NameCard from "../../common/nameCard/NameCard";
+import React from "react";
 import { getConfigColor } from "../../common/utils";
 import { renderUserFullName } from "../../utils";
 import { useRouter } from "next/router";
diff --git a/client-portal/modules/styles/cards.ts b/client-portal/modules/styles/cards.ts
index 4b150fcd780..05f7707d98d 100644
--- a/client-portal/modules/styles/cards.ts
+++ b/client-portal/modules/styles/cards.ts
@@ -308,7 +308,7 @@ const CardTab = styledTS<{baseColor?: string}>(styled.div)`
   font-size: 13px;
   background: #f4f4f4;
   border: 1px solid ${colors.borderPrimary};
-  border-radius: ${dimensions.unitSpacing}px;
+  border-radius: ${dimensions.unitSpacing - 2}px;
   color: ${colors.colorCoreGray};
   overflow: hidden;
 
@@ -345,6 +345,13 @@ const FlexRow = styled.div`
   }
 `;
 
+const FilterGroup = styled.div`
+  label {
+    font-size: 14px;
+    margin: 0 5px 0 0;
+  }
+`;
+
 export {
   TicketRow,
   TicketLabel,
@@ -352,6 +359,7 @@ export {
   Table,
   Label,
   DetailHeader,
+  FilterGroup,
   ListHead,
   ListBody,
   ListRow,
diff --git a/client-portal/modules/styles/main.ts b/client-portal/modules/styles/main.ts
index 975d0059230..93991610ffa 100644
--- a/client-portal/modules/styles/main.ts
+++ b/client-portal/modules/styles/main.ts
@@ -100,8 +100,10 @@ const SupportMenus = styledTS<{ color?: string, baseColor?: string }>(styled.div
 
   .dropdown-menu {
     width: 210px;
-    right: 0px;
+    right: -50px;
     left: auto !important;
+    top: 35px !important;
+    transform: none !important;
   }
 
   > button {
@@ -537,6 +539,8 @@ const NotificationList = styled.ul`
   margin: 0;
   padding: 0;
   list-style: none;
+  max-height: 450px;
+  overflow: auto;
 
   li {
     padding: ${dimensions.unitSpacing}px ${dimensions.coreSpacing}px;
diff --git a/client-portal/modules/styles/notifications.ts b/client-portal/modules/styles/notifications.ts
index 3716573f9cc..8c077e699a8 100644
--- a/client-portal/modules/styles/notifications.ts
+++ b/client-portal/modules/styles/notifications.ts
@@ -86,9 +86,25 @@ const TabCaption = styled.span`
   }
 `;
 
+const NotificationSettingsRow = styled.div`
+  font-size: 13px;
+  color: #666;
+  margin-bottom: ${dimensions.coreSpacing}px;
+
+  p {
+    margin-bottom: ${dimensions.unitSpacing - 2}px;
+  }
+
+  .react-toggle {
+    margin-right: ${dimensions.unitSpacing}px;
+  }
+`;
+
+
 export {
   NotificationWrapper,
   NotificationFooter,
+  NotificationSettingsRow,
   CreatedUser,
   AvatarSection,
   TabCaption,
diff --git a/client-portal/modules/user/components/Profile.tsx b/client-portal/modules/user/components/Profile.tsx
index 21f8494ca09..22e03e274c9 100644
--- a/client-portal/modules/user/components/Profile.tsx
+++ b/client-portal/modules/user/components/Profile.tsx
@@ -5,7 +5,6 @@ import { IFormProps } from "../../common/types";
 import { IUser } from "../../types";
 import { ModalFooter } from "../../common/form/styles";
 import React from "react";
-import { useRouter } from "next/router";
 
 type Props = {
   currentUser: IUser;
@@ -99,7 +98,7 @@ function Profile({ currentUser, renderButton }: Props) {
                   {...formProps}
                   name="companyName"
                   type="number"
-                  defaultValue={object.phone}
+                  defaultValue={object.companyName}
                 />
               </div>
             )}
diff --git a/client-portal/modules/user/components/Register.tsx b/client-portal/modules/user/components/Register.tsx
index 95b398573f6..286b46922e1 100644
--- a/client-portal/modules/user/components/Register.tsx
+++ b/client-portal/modules/user/components/Register.tsx
@@ -1,13 +1,13 @@
-import { LoginFormWrapper, WithIconFormControl } from '../../styles/form';
-import React, { useState } from 'react';
+import { LoginFormWrapper, WithIconFormControl } from "../../styles/form";
+import React, { useState } from "react";
 
-import { Config } from '../../types';
-import Form from '../../common/form/Form';
-import FormControl from '../../common/form/Control';
-import FormGroup from '../../common/form/Group';
-import { IButtonMutateProps } from '../../common/types';
-import Icon from '../../common/Icon';
-import { LOGIN_TYPES } from '../types';
+import { Config } from "../../types";
+import Form from "../../common/form/Form";
+import FormControl from "../../common/form/Control";
+import FormGroup from "../../common/form/Group";
+import { IButtonMutateProps } from "../../common/types";
+import Icon from "../../common/Icon";
+import { LOGIN_TYPES } from "../types";
 
 type Props = {
   config: Config;
@@ -22,11 +22,11 @@ function Register({
   renderButton,
   hasCompany,
   setRegister,
-  setLogin
+  setLogin,
 }: Props) {
   const [type, changeType] = useState(LOGIN_TYPES.CUSTOMER);
 
-  const onChange = e => {
+  const onChange = (e) => {
     changeType(e.target.value);
     e.isDefaultPrevented();
   };
@@ -36,7 +36,7 @@ function Register({
     setLogin(true);
   };
 
-  const renderForm = formProps => {
+  const renderForm = (formProps) => {
     if (type === LOGIN_TYPES.CUSTOMER) {
       return (
         <>
@@ -46,7 +46,7 @@ function Register({
               <FormControl
                 {...formProps}
                 name="firstName"
-                placeholder={'Enter your first name'}
+                placeholder={"First name"}
                 required={true}
               />
             </WithIconFormControl>
@@ -58,7 +58,7 @@ function Register({
               <FormControl
                 {...formProps}
                 name="lastName"
-                placeholder={'Enter your last name'}
+                placeholder={"Last name"}
                 required={true}
               />
             </WithIconFormControl>
@@ -70,7 +70,7 @@ function Register({
               <FormControl
                 {...formProps}
                 name="companyName"
-                placeholder={'Enter your company name'}
+                placeholder={"Company name"}
                 required={true}
               />
             </WithIconFormControl>
@@ -82,7 +82,7 @@ function Register({
               <FormControl
                 {...formProps}
                 name="phone"
-                placeholder={'Enter your phone number'}
+                placeholder={"Phone number"}
               />
             </WithIconFormControl>
           </FormGroup>
@@ -98,7 +98,7 @@ function Register({
             <FormControl
               {...formProps}
               name="companyName"
-              placeholder={'Enter your company name'}
+              placeholder={"Company name"}
               required={true}
             />
           </WithIconFormControl>
@@ -110,7 +110,7 @@ function Register({
             <FormControl
               {...formProps}
               name="companyRegistrationNumber"
-              placeholder={'Company registration number'}
+              placeholder={"Company registration number"}
               required={true}
               type="number"
             />
@@ -120,7 +120,7 @@ function Register({
     );
   };
 
-  const renderContent = formProps => {
+  const renderContent = (formProps) => {
     const { values, isSubmitted } = formProps;
 
     return (
@@ -142,7 +142,7 @@ function Register({
             <FormControl
               {...formProps}
               name="email"
-              placeholder={'Enter your email'}
+              placeholder={"Enter your email"}
               required={true}
             />
           </WithIconFormControl>
@@ -155,7 +155,7 @@ function Register({
               {...formProps}
               name="password"
               type="password"
-              placeholder={'Enter your password'}
+              placeholder={"Enter your password"}
               required={true}
             />
           </WithIconFormControl>
@@ -164,14 +164,14 @@ function Register({
         <FormGroup>
           {renderButton({
             values: { ...values, type, clientPortalId: config._id },
-            isSubmitted
+            isSubmitted,
           })}
         </FormGroup>
 
         <div className="auth-divider" />
 
         <div className="text-center">
-          Already have an account?{' '}
+          Already have an account?{" "}
           <span className="text-link" onClick={onSignin}>
             Sign in
           </span>
@@ -182,8 +182,8 @@ function Register({
 
   return (
     <LoginFormWrapper>
-      <h2>{'Sign up'}</h2>
-      <p>{'Free forever. No credit card needed'}</p>
+      <h2>{"Sign up"}</h2>
+      <p>{"Free forever. No credit card needed"}</p>
       <Form renderContent={renderContent} />
     </LoginFormWrapper>
   );
diff --git a/client-portal/modules/user/components/Settings.tsx b/client-portal/modules/user/components/Settings.tsx
index 9af4d53ac7d..0c261ab2d15 100644
--- a/client-portal/modules/user/components/Settings.tsx
+++ b/client-portal/modules/user/components/Settings.tsx
@@ -1,11 +1,12 @@
-import { ControlLabel, FormGroup } from "../../common/form";
 import { SettingsContent, SettingsTitle } from "../../styles/profile";
 
 import Button from "../../common/Button";
+import { ControlLabel } from "../../common/form";
 import { IUser } from "../../types";
 import { ModalFooter } from "../../common/form/styles";
+import { NotificationSettingsRow } from "../../styles/notifications";
 import React from "react";
-import ToggleButton from "react-bootstrap/ToggleButton";
+import Toggle from "react-toggle";
 
 type Props = {
   currentUser: IUser;
@@ -13,10 +14,12 @@ type Props = {
 };
 
 function Settings({ currentUser = {} as IUser, onSave }: Props) {
-  const notificationSettings = currentUser.notificationSettings || {
-    receiveByEmail: false,
-    receiveBySms: false,
-  };
+  const notificationSettings = currentUser
+    ? currentUser.notificationSettings
+    : {
+        receiveByEmail: false,
+        receiveBySms: false,
+      };
 
   const [receiveByEmail, setReceiveByEmail] = React.useState(
     notificationSettings.receiveByEmail
@@ -37,31 +40,28 @@ function Settings({ currentUser = {} as IUser, onSave }: Props) {
       <SettingsTitle>User Settings</SettingsTitle>
       <SettingsContent>
         <ControlLabel>{"Notification settings"}</ControlLabel>
-        <FormGroup horizontal={true}>
-          <ToggleButton
-            id="toggle-check"
-            type="checkbox"
-            variant="outline-primary"
-            checked={receiveByEmail}
-            value="1"
-            onChange={(e) => setReceiveByEmail(e.currentTarget.checked)}
-            color="white"
-          >
-            {"  Receive by mail"}
-          </ToggleButton>
-
-          <ToggleButton
-            id="toggle-check"
-            type="checkbox"
-            variant="outline-primary"
-            checked={receiveBySms}
-            value="1"
-            onChange={(e) => setreceiveBySms(e.currentTarget.checked)}
-            color="white"
-          >
-            {"  Receive by SMS"}
-          </ToggleButton>
-        </FormGroup>
+        <NotificationSettingsRow>
+          <p>Receive notification by email</p>
+          <div className="d-flex align-items-center">
+            <Toggle
+              defaultChecked={receiveByEmail}
+              aria-label="No label tag"
+              onChange={() => setReceiveByEmail(!receiveByEmail)}
+            />
+            {receiveByEmail ? "On" : "Off"}
+          </div>
+        </NotificationSettingsRow>
+        <NotificationSettingsRow>
+          <p>Receive notification by SMS</p>
+          <div className="d-flex align-items-center">
+            <Toggle
+              defaultChecked={receiveBySms}
+              aria-label="No label tag"
+              onChange={() => setreceiveBySms(!receiveBySms)}
+            />
+            {receiveBySms ? "On" : "Off"}
+          </div>
+        </NotificationSettingsRow>
         <ModalFooter>
           <Button
             btnStyle="success"
diff --git a/client-portal/package.json b/client-portal/package.json
index 94a314e4f60..653939e03ba 100644
--- a/client-portal/package.json
+++ b/client-portal/package.json
@@ -48,6 +48,7 @@
     "react-scrollspy": "^3.4.3",
     "react-select-plus": "^1.0.0-rc.5",
     "react-social-login-buttons": "^3.6.1",
+    "react-toggle": "^4.1.3",
     "reactjs-popup": "^2.0.5",
     "sass": "^1.32.5",
     "simple-react-modal": "^0.5.1",
diff --git a/client-portal/styles/globals.css b/client-portal/styles/globals.css
index 116ab88482e..39a35e6da58 100644
--- a/client-portal/styles/globals.css
+++ b/client-portal/styles/globals.css
@@ -73,7 +73,7 @@ hr {
 .dropdown-menu {
   width: 100%;
   top: 5px !important;
-  border-radius: 16px;
+  border-radius: 8px;
   overflow: hidden;
 }
 
@@ -86,6 +86,137 @@ hr {
   margin-right: 10px;
 }
 
+/* react-toggle */
+.react-toggle {
+  touch-action: pan-x;
+
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4D4D4D;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: #19AB27;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #128D15;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4D4D4D;
+  border-radius: 50%;
+  background-color: #FAFAFA;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: all 0.25s ease;
+  -moz-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: #19AB27;
+}
+
 @keyframes searchIcon {
   0% {
     transform: translateX(10px);
diff --git a/client-portal/yarn.lock b/client-portal/yarn.lock
index 131c29eaa44..bbc55961e29 100644
--- a/client-portal/yarn.lock
+++ b/client-portal/yarn.lock
@@ -5794,6 +5794,13 @@ react-social-login-buttons@^3.6.1:
   resolved "https://registry.yarnpkg.com/react-social-login-buttons/-/react-social-login-buttons-3.6.1.tgz#77e5c33ac6610a29071e2ad688ef585871120763"
   integrity sha512-DIz30W+C147s7wxwt8zgwjx5pE+gTJwtUzTNKpKZO3bEY06eLjcY1zvZ8h35hQd1Yjd7b4rLkeuZBwlLURYIfg==
 
+react-toggle@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.3.tgz#99193392cca8e495710860c49f55e74c4e6cf452"
+  integrity sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==
+  dependencies:
+    classnames "^2.2.5"
+
 react-transition-group@^4.0.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"