diff --git a/packages/messenger-widget/README.md b/packages/messenger-widget/README.md
index da3d62201..efc6e3a0c 100644
--- a/packages/messenger-widget/README.md
+++ b/packages/messenger-widget/README.md
@@ -475,14 +475,17 @@ Example :
          push: false,
       },
       profile: {
-         dm3: boolean | {
+         dm3: {
             cloud: false,
             optimism: true,
          },
-         self: boolean | {
+         self: {
             gnosis: true,
             ens: false,
          }
+      },
+      settings: {
+         messageView: true,
       }
    }
    disableDialogOptions: {
diff --git a/packages/messenger-widget/src/components/Preferences/Preferences.css b/packages/messenger-widget/src/components/Preferences/Preferences.css
index 0a6ea1029..708d46e68 100644
--- a/packages/messenger-widget/src/components/Preferences/Preferences.css
+++ b/packages/messenger-widget/src/components/Preferences/Preferences.css
@@ -35,6 +35,7 @@
     cursor: pointer;
     padding: 0.5rem 1.3rem 0.5rem 1.3rem;
     font-size: 1rem;
+    align-items: center;
 }
 
 .preferences-aside-content {
diff --git a/packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx b/packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx
index 679a25abc..5ab66b17a 100644
--- a/packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx
+++ b/packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx
@@ -1,18 +1,8 @@
-import { useEffect, useState } from 'react';
-import { Heading } from '../Heading/Heading';
 import './Settings.css';
-
-// message view option type ex : OLD/NEW
-export type MsgViewOptionType = {
-    name: string;
-    viewType: string;
-    isEnabled: boolean;
-};
-
-// settings data type to be used to store in local storage
-export type SettingsDataType = {
-    messageView: string;
-};
+import { useContext } from 'react';
+import { Heading } from '../Heading/Heading';
+import { ModalContext } from '../../../context/ModalContext';
+import { SettingsContext } from '../../../context/SettingsContext';
 
 export function Settings() {
     // heading of the page
@@ -21,129 +11,57 @@ export function Settings() {
     // description of the page
     const description = 'Define how you want to enable/disable components';
 
-    // available message view options
-    const msgViewOptions = [
-        {
-            name: 'Old message view',
-            viewType: 'OLD',
-            isEnabled: true,
-        },
-        {
-            name: 'New message view',
-            viewType: 'NEW',
-            isEnabled: true,
-        },
-    ];
-
-    // state to handle current message view type selected to show in chat screen
-    const [msgViewSelected, setMsgViewSelected] = useState<MsgViewOptionType>(
-        msgViewOptions[0],
-    );
-
-    const getSettingsFromLocalStorage = () => {
-        // fetch settings data from local storage
-        const settingsData = localStorage.getItem('settings');
-        // return data if found else return null
-        return settingsData ? JSON.parse(settingsData) : null;
-    };
-
-    const configureMsgView = () => {
-        // fetch message view type from local storage
-        const settingsData: SettingsDataType | null =
-            getSettingsFromLocalStorage();
-        // if message view found in local storage
-        if (settingsData && settingsData.messageView) {
-            // filter out the message type selected from available options
-            const msgViewType = msgViewOptions.filter(
-                (m) => m.viewType === settingsData.messageView,
-            );
-            // set the selected view type
-            setMsgViewSelected(
-                msgViewType.length ? msgViewType[0] : msgViewOptions[0],
-            );
-        }
-    };
-
-    const updateSettingsInLocalStorage = (data: SettingsDataType) => {
-        // convert JSON data of settings into string
-        const settingsData = JSON.stringify(data);
-        // save the data into local storage
-        localStorage.setItem('settings', settingsData);
-    };
-
-    const updateMsgView = (msgView: MsgViewOptionType) => {
-        // get the view type from selected message view type object
-        const { viewType } = msgView;
-
-        // update local state of message view type selected
-        setMsgViewSelected(msgView);
-
-        // fetch local storage data for settings
-        const settingsData: SettingsDataType | null =
-            getSettingsFromLocalStorage();
-
-        // update the property of message view
-        if (settingsData) {
-            settingsData.messageView = viewType;
-        }
-
-        // create a updated object based on the data
-        const updatedSettings = settingsData
-            ? settingsData
-            : {
-                  messageView: viewType,
-              };
-
-        // update the local storage with the new message view type
-        updateSettingsInLocalStorage(updatedSettings);
-    };
-
-    // on screen load, get the settings data from local storage ad update the states
-    useEffect(() => {
-        configureMsgView();
-    }, []);
+    const { disabledOptions } = useContext(ModalContext);
+    const { msgViewOptions, msgViewSelected, updateMsgView } =
+        useContext(SettingsContext);
 
     return (
         <div>
             {/* heading of the page */}
             <Heading heading={heading} description={description} />
 
-            {/* title and description of the property */}
-            <div className="settings-msg-view">
-                <div className="mt-2 font-weight-800 msg-view-heading">
-                    Message View
-                </div>
-                <div className="font-size-14 msg-view-desc">
-                    Select a view how the message should look like
-                </div>
-            </div>
-
-            {/* radio button options to select the message view type */}
-            <div>
-                <div className="settings-option-container">
-                    {msgViewOptions.map((option, index) => (
-                        <div
-                            key={index}
-                            className="radio d-flex mb-3 width-fit"
-                            onClick={() => {
-                                updateMsgView(option);
-                            }}
-                        >
-                            <input
-                                type="radio"
-                                value={option.viewType}
-                                checked={
-                                    option.viewType === msgViewSelected.viewType
-                                }
-                                readOnly
-                            />
-                            <label className="settings-option radio-label">
-                                {option.name}
-                            </label>
+            {/* Show message option selection when option is not disabled */}
+            {!disabledOptions.settings.messageView && (
+                <>
+                    {/* title and description of the property */}
+                    <div className="settings-msg-view">
+                        <div className="mt-2 font-weight-800 msg-view-heading">
+                            Message View
+                        </div>
+                        <div className="font-size-14 msg-view-desc">
+                            Select a view how the message should look like
+                        </div>
+                    </div>
+
+                    {/* radio button options to select the message view type */}
+                    <div>
+                        <div className="settings-option-container">
+                            {msgViewOptions.map((option, index) => (
+                                <div
+                                    key={index}
+                                    className="radio d-flex mb-3 width-fit"
+                                    onClick={() => {
+                                        updateMsgView(option);
+                                    }}
+                                >
+                                    <input
+                                        type="radio"
+                                        value={option.viewType}
+                                        checked={
+                                            option.viewType ===
+                                            msgViewSelected.viewType
+                                        }
+                                        readOnly
+                                    />
+                                    <label className="settings-option radio-label">
+                                        {option.name}
+                                    </label>
+                                </div>
+                            ))}
                         </div>
-                    ))}
-                </div>
-            </div>
+                    </div>
+                </>
+            )}
         </div>
     );
 }
diff --git a/packages/messenger-widget/src/context/ModalContext.tsx b/packages/messenger-widget/src/context/ModalContext.tsx
index 446d846f7..b4fc14360 100644
--- a/packages/messenger-widget/src/context/ModalContext.tsx
+++ b/packages/messenger-widget/src/context/ModalContext.tsx
@@ -94,6 +94,9 @@ export const ModalContext = React.createContext<ModalContextType>({
                 { key: 'gnosis', value: false },
             ],
         },
+        settings: {
+            messageView: false,
+        },
     },
     isProfileDialogDisabled: () => false,
 });
diff --git a/packages/messenger-widget/src/context/SettingsContext.tsx b/packages/messenger-widget/src/context/SettingsContext.tsx
new file mode 100644
index 000000000..15def5fb0
--- /dev/null
+++ b/packages/messenger-widget/src/context/SettingsContext.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+    MSG_VIEW_OPTIONS,
+    MsgViewOptionType,
+    useSettings,
+} from '../hooks/settings/useSettings';
+
+export type SettingsContextType = {
+    msgViewOptions: MsgViewOptionType[];
+    updateMsgView: (msgView: MsgViewOptionType) => void;
+    msgViewSelected: MsgViewOptionType;
+};
+
+export const SettingsContext = React.createContext<SettingsContextType>({
+    msgViewOptions: MSG_VIEW_OPTIONS,
+    updateMsgView: (msgView: MsgViewOptionType) => {},
+    msgViewSelected: MSG_VIEW_OPTIONS[0],
+});
+
+export const SettingsContextProvider = ({ children }: { children?: any }) => {
+    const { msgViewOptions, updateMsgView, msgViewSelected } = useSettings();
+
+    return (
+        <SettingsContext.Provider
+            value={{
+                msgViewOptions,
+                updateMsgView,
+                msgViewSelected,
+            }}
+        >
+            {children}
+        </SettingsContext.Provider>
+    );
+};
diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts
index aad17f4a5..9431be395 100644
--- a/packages/messenger-widget/src/hooks/modals/useModal.ts
+++ b/packages/messenger-widget/src/hooks/modals/useModal.ts
@@ -39,6 +39,9 @@ export type DisabledOptionsType = {
         dm3: { key: string; value: boolean }[];
         own: { key: string; value: boolean }[];
     };
+    settings: {
+        messageView: boolean;
+    };
 };
 
 export const useModal = () => {
@@ -102,6 +105,9 @@ export const useModal = () => {
                     { key: 'gnosis', value: false },
                 ],
             },
+            settings: {
+                messageView: false,
+            },
         },
     );
 
@@ -247,9 +253,30 @@ export const useModal = () => {
                 }
             }
 
+            // update settings dialog
+            const updatedSettingsOptions =
+                dialogDisabled.settings === true
+                    ? updatedProfileOptions.map((pref) => {
+                          return {
+                              ...pref,
+                              isEnabled:
+                                  pref.ticker === PREFERENCES_ITEMS.SETTINGS
+                                      ? false
+                                      : pref.isEnabled,
+                          };
+                      })
+                    : updatedProfileOptions;
+
+            // disable specific settings option
+            if (typeof dialogDisabled.settings === 'object') {
+                optionsToDisable.settings.messageView =
+                    dialogDisabled.settings.messageView ?? false;
+            }
+
+            // update the states for disabled options
             setDisabledOptions(optionsToDisable);
             setPreferencesOptions(
-                updatedProfileOptions as PreferencesOptionType[],
+                updatedSettingsOptions as PreferencesOptionType[],
             );
 
             return;
diff --git a/packages/messenger-widget/src/hooks/settings/useSettings.tsx b/packages/messenger-widget/src/hooks/settings/useSettings.tsx
new file mode 100644
index 000000000..ba4584f04
--- /dev/null
+++ b/packages/messenger-widget/src/hooks/settings/useSettings.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+
+// message view option type ex : OLD/NEW
+export type MsgViewOptionType = {
+    name: string;
+    viewType: string;
+    isEnabled: boolean;
+};
+
+// settings data type to be used to store in local storage
+export type SettingsDataType = {
+    messageView: string;
+};
+
+// available message view options
+export const MSG_VIEW_OPTIONS = [
+    {
+        name: 'Old message view',
+        viewType: 'OLD',
+        isEnabled: true,
+    },
+    {
+        name: 'New message view',
+        viewType: 'NEW',
+        isEnabled: true,
+    },
+];
+
+export const useSettings = () => {
+    const msgViewOptions: MsgViewOptionType[] = MSG_VIEW_OPTIONS;
+
+    // state to handle current message view type selected to show in chat screen
+    const [msgViewSelected, setMsgViewSelected] = useState<MsgViewOptionType>(
+        MSG_VIEW_OPTIONS[0],
+    );
+
+    const getSettingsFromLocalStorage = () => {
+        // fetch settings data from local storage
+        const settingsData = localStorage.getItem('settings');
+        // return data if found else return null
+        return settingsData ? JSON.parse(settingsData) : null;
+    };
+
+    const configureMsgView = () => {
+        // fetch message view type from local storage
+        const settingsData: SettingsDataType | null =
+            getSettingsFromLocalStorage();
+        // if message view found in local storage
+        if (settingsData && settingsData.messageView) {
+            // filter out the message type selected from available options
+            const msgViewType = msgViewOptions.filter(
+                (m) => m.viewType === settingsData.messageView,
+            );
+            // set the selected view type
+            setMsgViewSelected(
+                msgViewType.length ? msgViewType[0] : msgViewOptions[0],
+            );
+        }
+    };
+
+    const updateSettingsInLocalStorage = (data: SettingsDataType) => {
+        // convert JSON data of settings into string
+        const settingsData = JSON.stringify(data);
+        // save the data into local storage
+        localStorage.setItem('settings', settingsData);
+    };
+
+    const updateMsgView = (msgView: MsgViewOptionType) => {
+        // get the view type from selected message view type object
+        const { viewType } = msgView;
+
+        // update local state of message view type selected
+        setMsgViewSelected(msgView);
+
+        // fetch local storage data for settings
+        const settingsData: SettingsDataType | null =
+            getSettingsFromLocalStorage();
+
+        // update the property of message view
+        if (settingsData) {
+            settingsData.messageView = viewType;
+        }
+
+        // create a updated object based on the data
+        const updatedSettings = settingsData
+            ? settingsData
+            : {
+                  messageView: viewType,
+              };
+
+        // update the local storage with the new message view type
+        updateSettingsInLocalStorage(updatedSettings);
+    };
+
+    // on screen load, get the settings data from local storage ad update the states
+    useEffect(() => {
+        configureMsgView();
+    }, []);
+
+    return {
+        msgViewSelected,
+        updateMsgView,
+        msgViewOptions,
+    };
+};
diff --git a/packages/messenger-widget/src/interfaces/config.ts b/packages/messenger-widget/src/interfaces/config.ts
index 0bc7374a7..369bac42c 100644
--- a/packages/messenger-widget/src/interfaces/config.ts
+++ b/packages/messenger-widget/src/interfaces/config.ts
@@ -20,10 +20,15 @@ export type DisableDialogType =
                     self?:
                         | boolean
                         | {
-                              gnosis: boolean;
-                              ens: boolean;
+                              gnosis?: boolean;
+                              ens?: boolean;
                           };
                 };
+          settings?:
+              | boolean
+              | {
+                    messageView?: boolean;
+                };
       };
 
 export interface DM3Configuration {
diff --git a/packages/messenger-widget/src/views/Home/Home.tsx b/packages/messenger-widget/src/views/Home/Home.tsx
index 334e84f63..4636bc2c1 100644
--- a/packages/messenger-widget/src/views/Home/Home.tsx
+++ b/packages/messenger-widget/src/views/Home/Home.tsx
@@ -33,6 +33,7 @@ import { TLDContextProvider } from '../../context/TLDContext';
 import { UiViewContextProvider } from '../../context/UiViewContext';
 import { Dm3Props } from '../../interfaces/config';
 import './Home.css';
+import { SettingsContextProvider } from '../../context/SettingsContext';
 
 export function Home(props: Dm3Props) {
     /**
@@ -101,17 +102,19 @@ export function Home(props: Dm3Props) {
                                 >
                                     <TLDContextProvider>
                                         <AuthContextProvider>
-                                            <DeliveryServiceContextProvider>
-                                                <BackendContextProvider>
-                                                    <StorageContextProvider>
-                                                        <DM3
-                                                            config={
-                                                                props.config
-                                                            }
-                                                        />
-                                                    </StorageContextProvider>
-                                                </BackendContextProvider>
-                                            </DeliveryServiceContextProvider>
+                                            <SettingsContextProvider>
+                                                <DeliveryServiceContextProvider>
+                                                    <BackendContextProvider>
+                                                        <StorageContextProvider>
+                                                            <DM3
+                                                                config={
+                                                                    props.config
+                                                                }
+                                                            />
+                                                        </StorageContextProvider>
+                                                    </BackendContextProvider>
+                                                </DeliveryServiceContextProvider>
+                                            </SettingsContextProvider>
                                         </AuthContextProvider>
                                     </TLDContextProvider>
                                 </MainnetProviderContextProvider>