diff --git a/.eslintrc b/.eslintrc
index 3f69276..59bbe1a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,16 +10,6 @@
     "babel",
     "react"
   ],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "paths": ["node_modules"]
-      },
-      "webpack": {
-        "config": "webpack.config.js"
-      }
-    }
-  },
   "env": {
     "browser": true,
     "node": true,
@@ -62,5 +52,15 @@
       "count": 1
     }]
   },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["node_modules"]
+      },
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
   "parser": "@babel/eslint-parser"
 }
diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index 8fa3d9b..724999c 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -15,7 +15,7 @@ html:not([dir='rtl']) #ea11y-app {
 html[dir='rtl'] #ea11y-app {
 	margin-right: -20px;
     background: white;
-	height: calc(100vh - 32px);
+	height: calc( 100vh - 32px );
 }
 
 #ea11y-app * {
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 9a6cad7..502d802 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -8,13 +8,17 @@ import {
 	Notifications,
 	MenuItems,
 	AdminTopBar,
-	BottomBar,
 } from '@ea11y/components';
-import { useNotificationSettings, useSettings } from '@ea11y/hooks';
+import {
+	useNotificationSettings,
+	useSettings,
+	useSavedSettings,
+} from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
+	useSavedSettings();
 	const { isConnected } = usePluginSettingsContext();
 	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
@@ -37,10 +41,7 @@ const App = () => {
 						justifyContent="space-between"
 					>
 						<AdminTopBar />
-						<Box p={1} height="100%">
-							{selectedChild ? selectedChild.page : selectedParent?.page}
-						</Box>
-						<BottomBar />
+						{selectedChild ? selectedChild.page : selectedParent?.page}
 					</Box>
 				</Grid>
 				<Notifications message={notificationMessage} type={notificationType} />
diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index ff92671..b92cfd8 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -5,7 +5,7 @@ import Toolbar from '@elementor/ui/Toolbar';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
 
-export const AdminTopBar = () => {
+const AdminTopBar = () => {
 	const toolBarStyle = {
 		justifyContent: 'end',
 		alignItems: 'center',
@@ -30,3 +30,5 @@ export const AdminTopBar = () => {
 		</AppBar>
 	);
 };
+
+export default AdminTopBar;
diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/modules/settings/assets/js/components/alignment-matrix-control/index.js
index feecb05..7186ccf 100644
--- a/modules/settings/assets/js/components/alignment-matrix-control/index.js
+++ b/modules/settings/assets/js/components/alignment-matrix-control/index.js
@@ -2,68 +2,89 @@ import Box from '@elementor/ui/Box';
 import FormControl from '@elementor/ui/FormControl';
 import FormControlLabel from '@elementor/ui/FormControlLabel';
 import FormLabel from '@elementor/ui/FormLabel';
+import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
+import Tooltip from '@elementor/ui/Tooltip';
 import Typography from '@elementor/ui/Typography';
-import { useState } from '@wordpress/element';
+import { useIconPosition } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
-const AlignmentMatrixControl = () => {
-	const [selectedValue, setSelectedValue] = useState('center-right');
+const AlignmentMatrixControl = ({ mode }) => {
+	const { iconPosition, updateIconPosition } = useIconPosition();
 
 	const handleChange = (event) => {
-		setSelectedValue(event.target.value);
+		updateIconPosition(mode, 'position', event.target.value);
 	};
 
+	// Define options based on the mode
 	const options = [
 		{ value: 'top-left', label: __('Top Left', 'pojo-accessibility') },
+		...(mode === 'desktop'
+			? [{ value: 'top-center', label: __('Top Center', 'pojo-accessibility') }]
+			: []),
 		{ value: 'top-right', label: __('Top Right', 'pojo-accessibility') },
 		{ value: 'center-left', label: __('Center Left', 'pojo-accessibility') },
+		...(mode === 'desktop' ? [{ value: 'empty' }] : []),
 		{ value: 'center-right', label: __('Center Right', 'pojo-accessibility') },
 		{ value: 'bottom-left', label: __('Bottom Left', 'pojo-accessibility') },
+		...(mode === 'desktop'
+			? [
+					{
+						value: 'bottom-center',
+						label: __('Bottom Center', 'pojo-accessibility'),
+					},
+				]
+			: []),
 		{ value: 'bottom-right', label: __('Bottom Right', 'pojo-accessibility') },
 	];
 
 	return (
 		<FormControl>
 			<FormLabel id="alignment-matrix-control" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBottom={3} color="text.primary">
 					{__('Default Position', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
-			<Box
-				display="flex"
-				justifyContent="center"
-				padding={2}
-				width="100%"
-				sx={{ backgroundColor: 'divider' }}
-			>
-				<RadioGroup
-					aria-labelledby="alignment-matrix-control"
-					value={selectedValue}
-					onChange={handleChange}
-					name="alignment-matrix-control"
-					sx={{
-						display: 'grid',
-						gridTemplateColumns: 'repeat(2, 1fr)',
-						gap: 1,
-						borderWidth: 5,
-						borderStyle: 'solid',
-						borderColor: 'secondary.main',
-						borderRadius: 1,
-						width: '100px',
-					}}
-				>
-					{options.map((option, i) => (
-						<FormControlLabel
-							sx={{ margin: 0 }}
-							key={i}
-							value={option.value}
-							control={<Radio color="secondary" />}
-						/>
-					))}
-				</RadioGroup>
-			</Box>
+			<Paper color="info" elevation={0}>
+				<Box display="flex" justifyContent="center" padding={4} width="100%">
+					<Paper color="secondary">
+						<RadioGroup
+							aria-labelledby="alignment-matrix-control"
+							value={iconPosition[mode].position}
+							onChange={handleChange}
+							name="alignment-matrix-control"
+							sx={{
+								display: 'grid',
+								gridTemplateColumns:
+									mode === 'desktop' ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
+								gap: 1,
+								columnGap: mode === 'desktop' ? 6 : 1,
+								alignItems: 'center',
+								borderWidth: 5,
+								borderStyle: 'solid',
+								borderColor: 'secondary.main',
+								borderRadius: 1,
+								minWidth: mode === 'desktop' ? 'auto' : '100px',
+							}}
+						>
+							{options.map((option) =>
+								'empty' === option.value ? (
+									<Box key={option.value}></Box>
+								) : (
+									<Tooltip title={option.label} key={option.value}>
+										<FormControlLabel
+											sx={{ justifyContent: 'center', margin: 0 }}
+											value={option.value}
+											control={<Radio color="secondary" />}
+										/>
+									</Tooltip>
+								),
+							)}
+						</RadioGroup>
+					</Paper>
+				</Box>
+			</Paper>
 		</FormControl>
 	);
 };
diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
index 95cca68..02ad052 100644
--- a/modules/settings/assets/js/components/bottom-bar/index.js
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -1,8 +1,35 @@
 import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
+import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
-export const BottomBar = () => {
+const BottomBar = () => {
+	const { selectedMenu, iconDesign, iconPosition, hasChanges, setHasChanges } =
+		useSettings();
+	const { save } = useStorage();
+	const { success, error } = useToastNotification();
+
+	const saveSettings = async () => {
+		if (
+			selectedMenu.parent === 'widget' &&
+			selectedMenu.child === 'iconSettings'
+		) {
+			try {
+				await save({
+					a11y_widget_icon_settings: {
+						style: iconDesign,
+						position: iconPosition,
+					},
+				});
+
+				success('Settings saved!');
+				setHasChanges(false);
+			} catch (e) {
+				error('Failed to save settings!');
+			}
+		}
+	};
+
 	return (
 		<Box
 			display="flex"
@@ -11,9 +38,16 @@ export const BottomBar = () => {
 			width="100%"
 			borderTop="1px solid rgba(0, 0, 0, 0.12)"
 		>
-			<Button variant="contained" color="info">
+			<Button
+				variant="contained"
+				color="info"
+				onClick={saveSettings}
+				disabled={!hasChanges}
+			>
 				{__('Save Changes', 'pojo-accessibility')}
 			</Button>
 		</Box>
 	);
 };
+
+export default BottomBar;
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/modules/settings/assets/js/components/color-picker/index.js
index beecd7a..dcb502d 100644
--- a/modules/settings/assets/js/components/color-picker/index.js
+++ b/modules/settings/assets/js/components/color-picker/index.js
@@ -4,37 +4,36 @@ import FormLabel from '@elementor/ui/FormLabel';
 import Grid from '@elementor/ui/Grid';
 import Typography from '@elementor/ui/Typography';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
-import { useState } from '@wordpress/element';
+import { useIconDesign } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 import './style.css';
 
 const ColorPicker = () => {
-	const [color, setColor] = useState('#2563eb');
+	const { iconDesign, updateIconDesign } = useIconDesign();
 
 	return (
-		<FormControl>
+		<FormControl fullWidth>
 			<FormLabel id="color-picker-label" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBottom={1} color="text.primary">
 					{__('Color', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
 			<Grid padding={1} border={1} borderColor="divider" borderRadius={1}>
 				<HexColorPicker
-					color={color}
-					onChange={setColor}
-					defaultValue="#fff"
+					color={iconDesign.color}
+					onChange={(value) => updateIconDesign({ color: value })}
 					className="widget-settings-color-picker"
 				/>
 				<Grid marginTop={2} display="flex">
 					<Box
 						padding={2}
-						sx={{ backgroundColor: color }}
+						sx={{ backgroundColor: iconDesign.color }}
 						borderRadius={1}
 						marginRight={1}
 					></Box>
 					<HexColorInput
-						color={color}
-						onChange={setColor}
+						color={iconDesign.color}
+						onChange={(value) => updateIconDesign({ color: value })}
 						style={{
 							width: '100%',
 							border: '1px solid rgba(0, 0, 0, 0.12)',
diff --git a/modules/settings/assets/js/components/color-picker/style.css b/modules/settings/assets/js/components/color-picker/style.css
index 3025ab6..05d5733 100644
--- a/modules/settings/assets/js/components/color-picker/style.css
+++ b/modules/settings/assets/js/components/color-picker/style.css
@@ -1,5 +1,5 @@
 .widget-settings-color-picker.react-colorful {
-   min-width: 460px;
+   width: 100%;
   }
 .widget-settings-color-picker .react-colorful__saturation {
 border-radius: 0;
diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
index bf8db60..a025019 100644
--- a/modules/settings/assets/js/components/icon-select/index.js
+++ b/modules/settings/assets/js/components/icon-select/index.js
@@ -4,44 +4,13 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
-import {
-	AccessibilityControlsIcon,
-	AccessibilityEyeIcon,
-	AccessibilityPersonIcon,
-	AccessibilityTextIcon,
-} from '@ea11y/icons';
-import { useState } from '@wordpress/element';
+import { useIconDesign } from '@ea11y/hooks';
+import { cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import options from '../../helpers/accessibility-options';
 
 const IconSelect = (props) => {
-	const [selectedValue, setSelectedValue] = useState('person');
-	const optionStyle = {
-		color: 'info.main',
-		fontSize: 44,
-	};
-
-	const options = [
-		{
-			value: 'person',
-			icon: <AccessibilityPersonIcon sx={optionStyle} />,
-			label: __('Accessibility Person Icon', 'pojo-accessibility'),
-		},
-		{
-			value: 'eye',
-			icon: <AccessibilityEyeIcon sx={optionStyle} />,
-			label: __('Accessibility Eye Icon', 'pojo-accessibility'),
-		},
-		{
-			value: 'text',
-			icon: <AccessibilityTextIcon sx={optionStyle} />,
-			label: __('Accessibility Text Badge Icon', 'pojo-accessibility'),
-		},
-		{
-			value: 'controls',
-			icon: <AccessibilityControlsIcon sx={optionStyle} />,
-			label: __('Accessibility Controls Slider Icon', 'pojo-accessibility'),
-		},
-	];
+	const { iconDesign, updateIconDesign } = useIconDesign();
 
 	return (
 		<FormControl>
@@ -54,10 +23,11 @@ const IconSelect = (props) => {
 				{...props}
 				aria-labelledby="icon-select-radio-buttons-group-label"
 				name="icon-select-radio-buttons-group"
-				value={selectedValue}
+				value={iconDesign.icon}
 				sx={{
 					display: 'flex',
 					flexDirection: 'row',
+					flexWrap: 'nowrap',
 					gap: 2,
 				}}
 			>
@@ -65,7 +35,7 @@ const IconSelect = (props) => {
 					<Paper
 						key={option.value}
 						variant="outlined"
-						onClick={() => setSelectedValue(option.value)}
+						onClick={() => updateIconDesign({ icon: option.value })}
 						sx={{
 							borderRadius: 'md',
 							boxShadow: 'sm',
@@ -76,21 +46,21 @@ const IconSelect = (props) => {
 							justifyContent: 'center',
 							gap: 1.5,
 							p: 2,
-							minWidth: 100,
+							minWidth: 10,
 							minHeight: 100,
 							borderColor:
-								selectedValue === option.value ? 'info.main' : 'divider',
-							borderWidth: selectedValue === option.value ? 2 : 1,
+								iconDesign.icon === option.value ? 'info.main' : 'divider',
+							borderWidth: iconDesign.icon === option.value ? 2 : 1,
 							cursor: 'pointer',
 						}}
 					>
-						{option.icon}
+						{option.icon &&
+							cloneElement(option.icon, {
+								sx: { color: iconDesign.color, fontSize: 44 },
+							})}
 						<Radio
 							value={option.value}
-							sx={{
-								opacity: 0,
-								position: 'absolute',
-							}}
+							sx={{ opacity: 0, position: 'absolute' }}
 						/>
 					</Paper>
 				))}
diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
index b509684..b5b7709 100644
--- a/modules/settings/assets/js/components/icon-size/index.js
+++ b/modules/settings/assets/js/components/icon-size/index.js
@@ -4,48 +4,32 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
-import {
-	AccessibilityEyeIcon,
-	AccessibilityPersonIcon,
-	AccessibilityTextIcon,
-} from '@ea11y/icons';
-import { useState } from '@wordpress/element';
+import { useIconDesign } from '@ea11y/hooks';
+import { cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { getOptionByValue } from '../../helpers/accessibility-options';
 
 const IconSize = (props) => {
-	const [selectedValue, setSelectedValue] = useState('medium');
-	const optionStyle = { color: 'info.main', fontSize: 44 };
+	const { iconDesign, updateIconDesign } = useIconDesign();
+	const icon = getOptionByValue(iconDesign.icon);
 
 	const options = [
-		{
-			value: 'small',
-			icon: <AccessibilityPersonIcon sx={optionStyle} />,
-			label: __('Accessibility Person Icon', 'pojo-accessibility'),
-		},
-		{
-			value: 'medium',
-			icon: <AccessibilityEyeIcon sx={optionStyle} />,
-			label: __('Accessibility Eye Icon', 'pojo-accessibility'),
-		},
-		{
-			value: 'large',
-			icon: <AccessibilityTextIcon sx={optionStyle} />,
-			label: __('Accessibility Text Badge Icon', 'pojo-accessibility'),
-		},
+		{ value: 'large', fontSize: 64 },
+		{ value: 'medium', fontSize: 44 },
+		{ value: 'small', fontSize: 36 },
 	];
-
 	return (
 		<FormControl>
-			<FormLabel id="icon-select-radio-buttons-group-label" color="secondary">
+			<FormLabel id="icon-size-radio-buttons-group-label" color="secondary">
 				<Typography variant="subtitle2" marginBottom={1}>
 					{__('Size', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
 			<RadioGroup
 				{...props}
-				aria-labelledby="icon-select-radio-buttons-group-label"
-				name="icon-select-radio-buttons-group"
-				value={selectedValue}
+				aria-labelledby="icon-size-radio-buttons-group-label"
+				name="icon-size-radio-buttons-group"
+				value={iconDesign.size}
 				sx={{
 					display: 'flex',
 					flexDirection: 'row',
@@ -56,7 +40,7 @@ const IconSize = (props) => {
 					<Paper
 						key={option.value}
 						variant="outlined"
-						onClick={() => setSelectedValue(option.value)}
+						onClick={() => updateIconDesign({ size: option.value })}
 						sx={{
 							borderRadius: 'md',
 							boxShadow: 'sm',
@@ -67,15 +51,18 @@ const IconSize = (props) => {
 							flexGrow: 1,
 							gap: 1.5,
 							p: 2,
-							minWidth: 100,
+							minWidth: 10,
 							minHeight: 100,
 							borderColor:
-								selectedValue === option.value ? 'info.main' : 'divider',
-							borderWidth: selectedValue === option.value ? 2 : 1,
+								iconDesign.size === option.value ? 'info.main' : 'divider',
+							borderWidth: iconDesign.size === option.value ? 2 : 1,
 							cursor: 'pointer',
 						}}
 					>
-						{option.icon}
+						{icon?.icon &&
+							cloneElement(icon.icon, {
+								sx: { color: iconDesign.color, fontSize: option.fontSize },
+							})}
 						<Radio
 							value={option.value}
 							sx={{ opacity: 0, position: 'absolute' }}
diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
index 455679a..7c5d25f 100644
--- a/modules/settings/assets/js/components/index.js
+++ b/modules/settings/assets/js/components/index.js
@@ -3,11 +3,11 @@ export { default as Notifications } from './notifications';
 export { default as MyAccountMenu } from './my-account-menu';
 export { default as SidebarAppBar } from './sidebar-app-bar';
 export { default as SidebarMenu } from './sidebar-menu';
-export { MenuItems } from '../components/sidebar-menu/menu';
-export { AdminTopBar } from './admin-top-bar';
-export { BottomBar } from './bottom-bar';
 export { default as IconSize } from './icon-size';
 export { default as IconSelect } from './icon-select';
 export { default as ColorPicker } from './color-picker';
 export { default as AlignmentMatrixControl } from './alignment-matrix-control';
 export { default as PositionControl } from './position-control';
+export { MenuItems } from '../components/sidebar-menu/menu';
+export { default as AdminTopBar } from './admin-top-bar';
+export { default as BottomBar } from './bottom-bar';
diff --git a/modules/settings/assets/js/components/position-control/index.js b/modules/settings/assets/js/components/position-control/index.js
index eab814a..1f0883d 100644
--- a/modules/settings/assets/js/components/position-control/index.js
+++ b/modules/settings/assets/js/components/position-control/index.js
@@ -11,6 +11,7 @@ import {
 	bindTrigger,
 	bindMenu,
 } from '@elementor/ui/usePopupState';
+import { useIconPosition } from '@ea11y/hooks';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -43,28 +44,49 @@ const StyledTextField = styled(TextField)(() => ({
 	},
 }));
 
-const PositionControl = ({ type, disabled }, props) => {
+const PositionControl = ({ type, disabled, mode }) => {
+	const { iconPosition, updateExactPosition } = useIconPosition();
 	const [unitsIndex, setUnitsIndex] = useState(0);
 	const popupState = usePopupState({
 		variant: 'popover',
-		popupId: 'textfield-inner-selection',
+		popupId: 'position-settings',
 	});
 
 	const handleMenuItemClick = (index) => {
 		setUnitsIndex(index);
+		updateExactPosition(
+			mode,
+			type,
+			iconPosition[mode].exactPosition[type].direction,
+			iconPosition[mode].exactPosition[type].value,
+			units[index],
+		);
 		popupState.close();
 	};
-
-	const [position, setPosition] = useState(10);
-	const handlePositionChange = (event) => setPosition(event.target.value);
-
+	const handlePositionChange = (event) => {
+		updateExactPosition(
+			mode,
+			type,
+			iconPosition[mode].exactPosition[type].direction,
+			event.target.value,
+			iconPosition[mode].exactPosition[type].unit,
+		);
+	};
+	const handlePositionDirection = (event) => {
+		updateExactPosition(
+			mode,
+			type,
+			event.target.value,
+			iconPosition[mode].exactPosition[type].value,
+			iconPosition[mode].exactPosition[type].unit,
+		);
+	};
 	return (
 		<Box display="flex" gap={1} marginTop={2}>
 			<StyledTextField
-				{...props}
 				size="medium"
 				disabled={disabled}
-				value={position}
+				value={iconPosition[mode]?.exactPosition?.[type].value}
 				onChange={handlePositionChange}
 				InputProps={{
 					endAdornment: (
@@ -74,10 +96,10 @@ const PositionControl = ({ type, disabled }, props) => {
 								color="inherit"
 								sx={{ font: 'inherit', minWidth: 'initial' }}
 								{...bindTrigger(popupState)}
+								disabled={disabled}
 							>
 								{units[unitsIndex]}
 							</Button>
-
 							<Menu MenuListProps={{ dense: true }} {...bindMenu(popupState)}>
 								{units.map((unit, index) => (
 									<MenuItem
@@ -93,15 +115,10 @@ const PositionControl = ({ type, disabled }, props) => {
 				}}
 			/>
 			<Select
-				{...props}
 				fullWidth
-				labelId="input-select-label"
+				onChange={handlePositionDirection}
 				disabled={disabled}
-				defaultValue={
-					'horizontal' === type
-						? horizontalOptions[0].value
-						: verticalOptions[0].value
-				}
+				value={iconPosition[mode]?.exactPosition?.[type].direction}
 				MenuProps={{
 					MenuListProps: {
 						sx: {
diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
index 1e226d1..19a4787 100644
--- a/modules/settings/assets/js/components/sidebar-menu/index.js
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -4,9 +4,9 @@ import ListItem from '@elementor/ui/ListItem';
 import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
+import { MenuItems } from '@ea11y/components';
 import { useSettings } from '@ea11y/hooks';
-import { useState } from '@wordpress/element';
-import { MenuItems } from './menu';
+import { useState, Fragment } from '@wordpress/element';
 
 const SidebarMenu = () => {
 	const { openSidebar, selectedMenu, setSelectedMenu } = useSettings();
@@ -29,8 +29,8 @@ const SidebarMenu = () => {
 	return (
 		<List>
 			{Object.entries(MenuItems).map(([key, item]) => (
-				<>
-					<ListItem key={key} disableGutters>
+				<Fragment key={item.key}>
+					<ListItem disableGutters>
 						<ListItemButton
 							onClick={() =>
 								item.children ? handleToggleItem(key) : handleSelectedMenu(key)
@@ -70,7 +70,7 @@ const SidebarMenu = () => {
 							))}
 						</List>
 					)}
-				</>
+				</Fragment>
 			))}
 		</List>
 	);
diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js
index 9f46c05..1b618df 100644
--- a/modules/settings/assets/js/components/sidebar-menu/menu.js
+++ b/modules/settings/assets/js/components/sidebar-menu/menu.js
@@ -1,7 +1,7 @@
 import { PagesIcon } from '@elementor/icons';
 import { WidgetIcon } from '@ea11y/icons';
+import { AccessibilityStatement, Menu, IconSettings } from '@ea11y/pages';
 import { __ } from '@wordpress/i18n';
-import { AccessibilityStatement, Menu, IconSettings } from '../../pages';
 
 export const MenuItems = {
 	widget: {
diff --git a/modules/settings/assets/js/contexts/plugin-settings-context.js b/modules/settings/assets/js/contexts/plugin-settings-context.js
index 60cabe0..e69de29 100644
--- a/modules/settings/assets/js/contexts/plugin-settings-context.js
+++ b/modules/settings/assets/js/contexts/plugin-settings-context.js
@@ -1,50 +0,0 @@
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import API from '../api';
-import { useToastNotification } from '../hooks';
-
-const PluginSettingsContext = createContext({});
-
-export const PluginSettingsProvider = ({ children }) => {
-	const { error } = useToastNotification();
-	const [pluginSettings, setPluginSettings] = useState();
-	const [loaded, setLoaded] = useState(false);
-
-	const refreshPluginSettings = useCallback(() => {
-		API.getPluginSettings()
-			.then((settings) => {
-				if ('isConnected' in settings) {
-					settings.isConnected = Boolean(settings.isConnected);
-				}
-
-				setPluginSettings(settings);
-				setLoaded(true);
-			})
-			.catch(() => {
-				error(__('An error occurred.', 'pojo-accessibility'));
-				setLoaded(true);
-			});
-	}, []);
-
-	useEffect(() => {
-		refreshPluginSettings();
-	}, [refreshPluginSettings]);
-
-	return (
-		<PluginSettingsContext.Provider
-			value={{ ...pluginSettings, loaded, refreshPluginSettings }}
-		>
-			{children}
-		</PluginSettingsContext.Provider>
-	);
-};
-
-export const usePluginSettingsContext = () => {
-	return useContext(PluginSettingsContext);
-};
diff --git a/modules/settings/assets/js/contexts/plugin-settings.js b/modules/settings/assets/js/contexts/plugin-settings.js
index 60cabe0..d668664 100644
--- a/modules/settings/assets/js/contexts/plugin-settings.js
+++ b/modules/settings/assets/js/contexts/plugin-settings.js
@@ -1,3 +1,4 @@
+import { useToastNotification } from '@ea11y/hooks';
 import {
 	createContext,
 	useCallback,
@@ -7,7 +8,6 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import API from '../api';
-import { useToastNotification } from '../hooks';
 
 const PluginSettingsContext = createContext({});
 
diff --git a/modules/settings/assets/js/helpers/accessibility-options.js b/modules/settings/assets/js/helpers/accessibility-options.js
new file mode 100644
index 0000000..8c344db
--- /dev/null
+++ b/modules/settings/assets/js/helpers/accessibility-options.js
@@ -0,0 +1,44 @@
+import { __ } from '@wordpress/i18n';
+import {
+	AccessibilityPersonIcon,
+	AccessibilityTextIcon,
+	AccessibilityEyeIcon,
+	AccessibilityControlsIcon,
+} from '../icons';
+
+const optionStyle = {
+	color: 'info.main',
+	fontSize: 44,
+};
+
+// Define options as an object
+const options = [
+	{
+		value: 'person',
+		icon: <AccessibilityPersonIcon sx={optionStyle} />,
+		label: __('Accessibility Person Icon', 'pojo-accessibility'),
+	},
+	{
+		value: 'eye',
+		icon: <AccessibilityEyeIcon sx={optionStyle} />,
+		label: __('Accessibility Eye Icon', 'pojo-accessibility'),
+	},
+	{
+		value: 'controls',
+		icon: <AccessibilityControlsIcon sx={optionStyle} />,
+		label: __('Accessibility Controls Slider Icon', 'pojo-accessibility'),
+	},
+	{
+		value: 'text',
+		icon: <AccessibilityTextIcon sx={optionStyle} />,
+		label: __('Accessibility Text Badge Icon', 'pojo-accessibility'),
+	},
+];
+
+// Export the options object
+export default options;
+
+// Optionally, export a function to get a specific option by value
+export const getOptionByValue = (value) => {
+	return Object.values(options).find((option) => option.value === value);
+};
diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index 1ae75e2..19a8d4e 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -6,3 +6,6 @@ export { useStorage } from './use-storage';
 export { useToastNotification } from './use-notifications';
 export { NotificationsProvider } from './use-notifications';
 export { useNotificationSettings } from './use-notifications';
+export { useIconPosition } from './use-icon-positioon';
+export { useIconDesign } from './use-icon-design';
+export { useSavedSettings } from './use-saved-settings';
diff --git a/modules/settings/assets/js/hooks/use-icon-design.js b/modules/settings/assets/js/hooks/use-icon-design.js
new file mode 100644
index 0000000..487ab6f
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-icon-design.js
@@ -0,0 +1,16 @@
+import { useSettings } from '@ea11y/hooks';
+
+export const useIconDesign = () => {
+	const { iconDesign, setIconDesign, setHasChanges } = useSettings();
+
+	const updateIconDesign = (newValues) => {
+		setIconDesign((prev) => ({
+			...prev,
+			...newValues,
+		}));
+
+		setHasChanges(true);
+	};
+
+	return { iconDesign, updateIconDesign };
+};
diff --git a/modules/settings/assets/js/hooks/use-icon-positioon.js b/modules/settings/assets/js/hooks/use-icon-positioon.js
new file mode 100644
index 0000000..17cca25
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-icon-positioon.js
@@ -0,0 +1,40 @@
+import { useSettings } from '@ea11y/hooks';
+import { useCallback } from '@wordpress/element';
+
+export const useIconPosition = () => {
+	const { iconPosition, setIconPosition, setHasChanges } = useSettings();
+
+	const updateIconPosition = useCallback(
+		(device, key, value) => {
+			setIconPosition((prevState) => ({
+				...prevState,
+				[device]: {
+					...prevState[device],
+					[key]: value,
+				},
+			}));
+			setHasChanges(true);
+		},
+		[setIconPosition],
+	);
+
+	const updateExactPosition = (device, axis, direction, value, unit) => {
+		setIconPosition((prevState) => ({
+			...prevState,
+			[device]: {
+				...prevState[device],
+				exactPosition: {
+					...prevState[device].exactPosition,
+					[axis]: {
+						direction,
+						value,
+						unit,
+					},
+				},
+			},
+		}));
+		setHasChanges(true);
+	};
+
+	return { iconPosition, updateIconPosition, updateExactPosition };
+};
diff --git a/modules/settings/assets/js/hooks/use-saved-settings.js b/modules/settings/assets/js/hooks/use-saved-settings.js
new file mode 100644
index 0000000..ad6f87f
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-saved-settings.js
@@ -0,0 +1,30 @@
+import { useSettings } from '@ea11y/hooks';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+export const useSavedSettings = () => {
+	const { setIconDesign, setIconPosition } = useSettings();
+
+	const result = useSelect((select) => {
+		return {
+			data: select(coreDataStore).getEntityRecord('root', 'site'),
+			hasFinishedResolution: select(coreDataStore).hasFinishedResolution(
+				'getEntityRecord',
+				['root', 'site'],
+			),
+		};
+	}, []);
+
+	useEffect(() => {
+		if (result.hasFinishedResolution) {
+			if (result?.data?.a11y_widget_icon_settings?.style) {
+				setIconDesign(result.data.a11y_widget_icon_settings.style);
+			}
+
+			if (result?.data?.a11y_widget_icon_settings?.position) {
+				setIconPosition(result.data.a11y_widget_icon_settings.position);
+			}
+		}
+	}, [result.hasFinishedResolution]);
+};
diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
index 700ca92..0fb825b 100644
--- a/modules/settings/assets/js/hooks/use-settings.js
+++ b/modules/settings/assets/js/hooks/use-settings.js
@@ -15,6 +15,56 @@ export const SettingsProvider = ({ children }) => {
 		parent: 'widget',
 		child: 'iconSettings',
 	});
+
+	// Icon Design
+	const [widgetIcon, setWidgetIcon] = useState('person');
+	const [widgetIconSize, setWidgetIconSize] = useState('medium');
+	const [widgetIconColor, setWidgetIconColor] = useState('#2563eb');
+	const [iconDesign, setIconDesign] = useState({
+		icon: 'person',
+		size: 'medium',
+		color: '#2563eb',
+	});
+
+	// Icon Position
+	const [iconPosition, setIconPosition] = useState({
+		desktop: {
+			hidden: false,
+			enableExactPosition: false,
+			exactPosition: {
+				horizontal: {
+					direction: 'to-left',
+					value: 10,
+					unit: 'px',
+				},
+				vertical: {
+					direction: 'higher',
+					value: 10,
+					unit: 'px',
+				},
+			},
+			position: 'top-left',
+		},
+		mobile: {
+			hidden: false,
+			enableExactPosition: false,
+			exactPosition: {
+				horizontal: {
+					direction: 'to-right',
+					value: 10,
+					unit: 'px',
+				},
+				vertical: {
+					direction: 'lower',
+					value: 10,
+					unit: 'px',
+				},
+			},
+			position: 'top-left',
+		},
+	});
+
+	const [hasChanges, setHasChanges] = useState(false);
 	return (
 		<SettingsContext.Provider
 			value={{
@@ -22,6 +72,18 @@ export const SettingsProvider = ({ children }) => {
 				setOpenSidebar,
 				selectedMenu,
 				setSelectedMenu,
+				widgetIcon,
+				setWidgetIcon,
+				widgetIconSize,
+				setWidgetIconSize,
+				widgetIconColor,
+				setWidgetIconColor,
+				iconPosition,
+				setIconPosition,
+				iconDesign,
+				setIconDesign,
+				hasChanges,
+				setHasChanges,
 			}}
 		>
 			{children}
diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
index 437eede..4b22ca4 100644
--- a/modules/settings/assets/js/layouts/icon-design-settings.js
+++ b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -4,9 +4,9 @@ import Typography from '@elementor/ui/Typography';
 import { ColorPicker, IconSelect, IconSize } from '@ea11y/components';
 import { __ } from '@wordpress/i18n';
 
-const IconDesignSettings = () => {
+const IconDesignSettings = (props) => {
 	return (
-		<Grid padding={2} border={1} borderColor="divider">
+		<Grid padding={2} border={1} borderColor="divider" {...props}>
 			<Box marginBottom={2}>
 				<Typography variant="subtitle1">
 					{__('Design', 'pojo-accessibility')}
diff --git a/modules/settings/assets/js/layouts/index.js b/modules/settings/assets/js/layouts/index.js
index 9489550..92f073e 100644
--- a/modules/settings/assets/js/layouts/index.js
+++ b/modules/settings/assets/js/layouts/index.js
@@ -1,3 +1,4 @@
 export { default as IconDesignSettings } from './icon-design-settings';
 export { default as PositionSettings } from './position-settings';
 export { default as PositionSettingsDesktop } from './position-settings-desktop';
+export { default as PositionSettingsMobile } from './position-settings-mobile';
diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js
index b50ea5c..e588dc6 100644
--- a/modules/settings/assets/js/layouts/position-settings-desktop.js
+++ b/modules/settings/assets/js/layouts/position-settings-desktop.js
@@ -3,45 +3,74 @@ import FormControlLabel from '@elementor/ui/FormControlLabel';
 import Switch from '@elementor/ui/Switch';
 import Typography from '@elementor/ui/Typography';
 import { AlignmentMatrixControl, PositionControl } from '@ea11y/components';
-import { useState } from '@wordpress/element';
+import { useIconPosition } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
 const PositionSettingsDesktop = () => {
-	const [hiddenOnDesktop, setHiddenOnDesktop] = useState(false);
-	const [disableExactPosition, setDisableExactPosition] = useState(true);
+	const { iconPosition, updateIconPosition } = useIconPosition();
+
+	const toggleVisibility = (device) => {
+		updateIconPosition(device, 'hidden', !iconPosition[device].hidden);
+	};
+
+	const toggleExactPosition = (device) => {
+		updateIconPosition(
+			device,
+			'enableExactPosition',
+			!iconPosition[device].enableExactPosition,
+		);
+	};
+
+	const hideOnDesktopLabel = (
+		<Typography variant="subtitle2" marginRight={2} color="text.primary">
+			{__('Hide on desktop', 'pojo-accessibility')}
+		</Typography>
+	);
+
+	const exactPositionLabel = (
+		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+			{__('Exact position', 'pojo-accessibility')}
+		</Typography>
+	);
+
 	return (
 		<>
 			<FormControlLabel
-				label={
-					<Typography variant="subtitle2">
-						{__('Hide on desktop', 'pojo-accessibility')}
-					</Typography>
-				}
+				label={hideOnDesktopLabel}
 				labelPlacement="start"
-				control={<Switch color="info" />}
-				sx={{ marginLeft: 0, marginBottom: 3 }}
-				onChange={() => setHiddenOnDesktop(!hiddenOnDesktop)}
+				control={<Switch color="info" size="small" />}
+				sx={{ marginLeft: 2, marginBottom: 3 }}
+				onChange={() => toggleVisibility('desktop')}
+				checked={iconPosition.desktop.hidden}
 			/>
-			{!hiddenOnDesktop && (
-				<Box display="grid" gridTemplateColumns="repeat(2,1fr)" gap={3}>
-					<AlignmentMatrixControl />
+			{!iconPosition.desktop.hidden && (
+				<Box
+					display="grid"
+					gridTemplateColumns="repeat(2,1fr)"
+					justifyContent="space-evenly"
+					padding={2}
+					gap={5}
+				>
+					<AlignmentMatrixControl mode="desktop" />
 					<Box>
 						<FormControlLabel
-							label={
-								<Typography variant="subtitle2">
-									{__('Exact position', 'pojo-accessibility')}
-								</Typography>
-							}
+							label={exactPositionLabel}
 							labelPlacement="start"
-							control={<Switch color="info" />}
+							control={<Switch color="info" size="small" />}
 							sx={{ marginLeft: 0 }}
-							onChange={() => setDisableExactPosition(!disableExactPosition)}
+							onChange={() => toggleExactPosition('desktop')}
+							checked={iconPosition.desktop?.enableExactPosition}
 						/>
 						<PositionControl
 							type="horizontal"
-							disabled={disableExactPosition}
+							mode="desktop"
+							disabled={!iconPosition.desktop?.enableExactPosition}
+						/>
+						<PositionControl
+							type="vertical"
+							mode="desktop"
+							disabled={!iconPosition.desktop?.enableExactPosition}
 						/>
-						<PositionControl type="vertical" disabled={disableExactPosition} />
 					</Box>
 				</Box>
 			)}
diff --git a/modules/settings/assets/js/layouts/position-settings-mobile.js b/modules/settings/assets/js/layouts/position-settings-mobile.js
new file mode 100644
index 0000000..a575985
--- /dev/null
+++ b/modules/settings/assets/js/layouts/position-settings-mobile.js
@@ -0,0 +1,80 @@
+import Box from '@elementor/ui/Box';
+import FormControlLabel from '@elementor/ui/FormControlLabel';
+import Switch from '@elementor/ui/Switch';
+import Typography from '@elementor/ui/Typography';
+import { AlignmentMatrixControl, PositionControl } from '@ea11y/components';
+import { useIconPosition } from '@ea11y/hooks';
+import { __ } from '@wordpress/i18n';
+
+const PositionSettingsMobile = () => {
+	const { iconPosition, updateIconPosition } = useIconPosition();
+
+	const toggleVisibility = (device) => {
+		updateIconPosition(device, 'hidden', !iconPosition[device].hidden);
+	};
+
+	const toggleExactPosition = (device) => {
+		updateIconPosition(
+			device,
+			'enableExactPosition',
+			!iconPosition[device].enableExactPosition,
+		);
+	};
+
+	const hideOnMobileLabel = (
+		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+			{__('Hide on mobile', 'pojo-accessibility')}
+		</Typography>
+	);
+
+	const exactPositionLabel = (
+		<Typography variant="subtitle2" color="text.primary" marginRight={2}>
+			{__('Exact position', 'pojo-accessibility')}
+		</Typography>
+	);
+
+	return (
+		<>
+			<FormControlLabel
+				label={hideOnMobileLabel}
+				labelPlacement="start"
+				control={<Switch color="info" size="small" />}
+				sx={{ marginLeft: 2, marginBottom: 3 }}
+				onChange={() => toggleVisibility('mobile')}
+				checked={iconPosition.mobile.hidden}
+			/>
+			{!iconPosition.mobile.hidden && (
+				<Box
+					display="grid"
+					gridTemplateColumns="repeat(2,1fr)"
+					gap={5}
+					padding={2}
+				>
+					<AlignmentMatrixControl mode="mobile" />
+					<Box>
+						<FormControlLabel
+							label={exactPositionLabel}
+							labelPlacement="start"
+							control={<Switch color="info" size="small" />}
+							sx={{ marginLeft: 0 }}
+							onChange={() => toggleExactPosition('mobile')}
+							checked={iconPosition.mobile?.enableExactPosition}
+						/>
+						<PositionControl
+							type="horizontal"
+							mode="mobile"
+							disabled={!iconPosition.mobile?.enableExactPosition}
+						/>
+						<PositionControl
+							type="vertical"
+							mode="mobile"
+							disabled={!iconPosition.mobile?.enableExactPosition}
+						/>
+					</Box>
+				</Box>
+			)}
+		</>
+	);
+};
+
+export default PositionSettingsMobile;
diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js
index c8f876e..07fdd1a 100644
--- a/modules/settings/assets/js/layouts/position-settings.js
+++ b/modules/settings/assets/js/layouts/position-settings.js
@@ -6,7 +6,10 @@ import TabPanel from '@elementor/ui/TabPanel';
 import Tabs from '@elementor/ui/Tabs';
 import Typography from '@elementor/ui/Typography';
 import useTabs from '@elementor/ui/useTabs';
-import { PositionSettingsDesktop } from '@ea11y/layouts';
+import {
+	PositionSettingsDesktop,
+	PositionSettingsMobile,
+} from '@ea11y/layouts';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -15,7 +18,7 @@ const TABS = {
 	two: 'two',
 };
 
-const PositionSettings = () => {
+export const PositionSettings = (props) => {
 	const [currentTab, setCurrentTab] = useState(TABS.one);
 	const { getTabProps } = useTabs(currentTab);
 
@@ -24,7 +27,7 @@ const PositionSettings = () => {
 	};
 
 	return (
-		<Grid padding={2} border={1} borderColor="divider">
+		<Grid padding={2} border={1} borderColor="divider" {...props}>
 			<Box marginBottom={2}>
 				<Typography variant="subtitle1">
 					{__('Position', 'pojo-accessibility')}
@@ -36,10 +39,10 @@ const PositionSettings = () => {
 					)}
 				</Typography>
 			</Box>
-			<Box>
+			<Box padding={2}>
 				<Tabs
 					value={currentTab}
-					sx={{ borderBottom: 'none' }}
+					sx={{ borderBottom: 'none', height: '65px' }}
 					indicatorColor="secondary"
 					textColor="secondary"
 				>
@@ -65,7 +68,9 @@ const PositionSettings = () => {
 					<PositionSettingsDesktop />
 				</TabPanel>
 			) : (
-				<TabPanel></TabPanel>
+				<TabPanel>
+					<PositionSettingsMobile />
+				</TabPanel>
 			)}
 		</Grid>
 	);
diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js
index e744134..0b9211e 100644
--- a/modules/settings/assets/js/pages/icon-settings.js
+++ b/modules/settings/assets/js/pages/icon-settings.js
@@ -1,5 +1,22 @@
+import Container from '@elementor/ui/Container';
+import Typography from '@elementor/ui/Typography';
+import { BottomBar } from '@ea11y/components';
+import { IconDesignSettings, PositionSettings } from '@ea11y/layouts';
+import { __ } from '@wordpress/i18n';
+
 const IconSettings = () => {
-	return <h1>IconSettings</h1>;
+	return (
+		<>
+			<Container p={1} sx={{ overflow: 'auto', maxHeight: '100%', padding: 4 }}>
+				<Typography variant="h4" fontWeight="400" marginBottom={4}>
+					{__('Icon Settings', 'pojo-accessibility')}
+				</Typography>
+				<IconDesignSettings marginBottom={4} />
+				<PositionSettings />
+			</Container>
+			<BottomBar />
+		</>
+	);
 };
 
 export default IconSettings;
diff --git a/modules/settings/module.php b/modules/settings/module.php
index d44047d..4880108 100644
--- a/modules/settings/module.php
+++ b/modules/settings/module.php
@@ -20,16 +20,6 @@ public function get_name(): string {
 		return 'settings';
 	}
 
-	public function render_top_bar() {
-		if ( 'toplevel_page_accessibility-settings-2' !== get_current_screen()->id ) {
-			return;
-		}
-
-		?>
-		<div id="ea11y-app-top-bar"></div>
-		<?php
-	}
-
 	public function render_app() {
 		?>
 		<!-- The hack required to wrap WP notifications -->
@@ -41,7 +31,7 @@ public function render_app() {
 		<?php
 	}
 
-	public function register_page() {
+	public function register_page() : void {
 		add_menu_page(
 			__( 'Accessibility New', 'pojo-accessibility' ), //TODO: Change this later
 			__( 'Accessibility New', 'pojo-accessibility' ),
@@ -64,7 +54,7 @@ public function register_page() {
 	/**
 	 * Enqueue Scripts and Styles
 	 */
-	public function enqueue_scripts( $hook ) {
+	public function enqueue_scripts( $hook ) : void {
 		if ( 'toplevel_page_accessibility-settings-2' !== $hook ) {
 			return;
 		}
@@ -101,6 +91,39 @@ public static function get_plugin_settings(): array {
 			'isConnected' => Connect::is_connected(),
 		];
 	}
+
+	/**
+	 * Register settings.
+	 *
+	 * Register settings for the plugin.
+	 *
+	 * @return void
+	 * @throws Throwable
+	 */
+	public function register_settings(): void {
+		$settings = [
+			'widget_icon_settings' => [
+				'type' => 'object',
+                'show_in_rest' => [
+                        'schema' => [
+                                'type' => 'object',
+                                'additionalProperties' => true
+                        ],
+                ]
+			],
+			'close_post_connect_modal' => [
+				'type' => 'boolean',
+			],
+		];
+
+		foreach ( $settings as $setting => $args ) {
+			if ( ! isset( $args['show_in_rest'] ) ) {
+				$args['show_in_rest'] = true;
+			}
+			register_setting( 'options', self::SETTING_PREFIX . $setting, $args );
+		}
+	}
+
 	/**
 	 * Module constructor.
 	 */
@@ -108,7 +131,7 @@ public function __construct() {
 		$this->register_routes();
 		$this->register_components();
 		add_action( 'admin_menu', [ $this, 'register_page' ] );
-		add_action( 'in_admin_header', [ $this, 'render_top_bar' ] );
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+		add_action( 'rest_api_init', [ $this, 'register_settings' ] );
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index d6fbf6c..70900e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10945,6 +10945,7 @@
 			"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
 			"integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@rtsao/scc": "^1.1.0",
 				"array-includes": "^3.1.8",