diff --git a/ui/pages/settings/settings.stories.js b/ui/pages/settings/settings.stories.js
new file mode 100644
index 000000000..c05953a76
--- /dev/null
+++ b/ui/pages/settings/settings.stories.js
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { withRouter, MemoryRouter } from 'react-router-dom';
+import {
+ ABOUT_US_ROUTE,
+ ADVANCED_ROUTE,
+ ALERTS_ROUTE,
+ CONTACT_LIST_ROUTE,
+ CONTACT_ADD_ROUTE,
+ CONTACT_EDIT_ROUTE,
+ CONTACT_VIEW_ROUTE,
+ GENERAL_ROUTE,
+ NETWORKS_FORM_ROUTE,
+ NETWORKS_ROUTE,
+ SECURITY_ROUTE,
+ SETTINGS_ROUTE,
+} from '../../helpers/constants/routes';
+import SettingsPage from './settings.component';
+
+export default {
+ title: 'SettingPage',
+ id: __filename,
+ decorators: [
+ (story) => (
+
+ {story()}
+
+ ),
+ ],
+};
+
+const ROUTES_TO_I18N_KEYS = {
+ [ABOUT_US_ROUTE]: 'about',
+ [ADVANCED_ROUTE]: 'advanced',
+ [ALERTS_ROUTE]: 'alerts',
+ [GENERAL_ROUTE]: 'general',
+ [CONTACT_ADD_ROUTE]: 'newContact',
+ [CONTACT_EDIT_ROUTE]: 'editContact',
+ [CONTACT_LIST_ROUTE]: 'contacts',
+ [CONTACT_VIEW_ROUTE]: 'viewContact',
+ [NETWORKS_ROUTE]: 'networks',
+ [NETWORKS_FORM_ROUTE]: 'networks',
+ [SECURITY_ROUTE]: 'securityAndPrivacy',
+};
+
+global.platform = {
+ getVersion: () => 'V3.14.159',
+};
+
+const Settings = ({ history }) => {
+ const { location } = history;
+ const pathname =
+ location.pathname === '/iframe.html'
+ ? '/settings/general'
+ : location.pathname;
+
+ const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname];
+ const backRoute = SETTINGS_ROUTE;
+
+ return (
+
+
+
+ );
+};
+
+Settings.propTypes = {
+ history: PropTypes.object,
+};
+
+export const SettingsPageComponent = withRouter(Settings);