diff --git a/assets/src/dashboard/parts/connected/OptimizationStatus.js b/assets/src/dashboard/parts/connected/OptimizationStatus.js
index 55038278..4f037a56 100644
--- a/assets/src/dashboard/parts/connected/OptimizationStatus.js
+++ b/assets/src/dashboard/parts/connected/OptimizationStatus.js
@@ -1,29 +1,81 @@
-import { Icon } from '@wordpress/components';
+import { Icon, Button } from '@wordpress/components';
 import { closeSmall, check } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { saveSettings } from '../../utils/api';
+
+const OptimizationStatus = ({ settings, setSettings, setCanSave, setTab }) => {
+
+	const { isLoading } = useSelect( select => {
+		const { isLoading } = select( 'optimole' );
+		return {
+			isLoading: isLoading()
+		};
+	}, []);
+
+	const lazyloadEnabled = 'enabled' === settings?.lazyload;
+	const imageHandlingEnabled = 'enabled' === settings?.image_replacer;
+
+	const directUpdate = ( option, value ) => {
+		if ( setCanSave && setSettings ) {
+			setCanSave( true );
+			const data = { ...settings };
+
+			data[ option ] = value ? 'enabled' : 'disabled';
+
+			if ( 'scale' === option && data.scale && 'disabled' === data.scale && 'disabled' === data.lazyload ) {
+				data.lazyload = 'enabled';
+			}
+
+			if ( 'lazyload' === option && data.lazyload && 'disabled' === data.lazyload && 'disabled' === data.scale ) {
+				data.scale = 'enabled';
+			}
+
+			setSettings( data );
+
+			saveSettings(
+				data,
+				false,
+				false,
+				() => {
+					setCanSave( false );
+				}
+			);
+		}
+	};
+
+	const handleSettingsNavigation = ( ) => {
+		if ( setTab ) {
+			setTab( 'settings' );
+		}
+	};
+
+	const {
+		optimization_status
+	} = optimoleDashboardApp.strings;
 
-const OptimizationStatus = ({ settings }) => {
-	const userStatus = optimoleDashboardApp.user_status ? optimoleDashboardApp.user_status : 'inactive';
-	const lazyloadEnabled = 'enabled' === settings?.lazyload  &&  'active' === userStatus  ;
-	const imageHandlingEnabled = 'enabled' === settings?.image_replacer && 'active' === userStatus;
 	const statuses = [
 		{
+			settingType: 'image_replacer',
 			active: imageHandlingEnabled,
-			label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
-			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
+			label: optimization_status.statusTitle1,
+			description: optimization_status.statusSubTitle1,
+			buttonText: imageHandlingEnabled ? optimization_status.manage : optimization_status.enable
 		},
 		{
-			active: lazyloadEnabled,
-			label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
-			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
+			settingType: 'lazyload',
+			active: lazyloadEnabled && imageHandlingEnabled,
+			label: optimization_status.statusTitle2,
+			description: optimization_status.statusSubTitle2,
+			buttonText: imageHandlingEnabled ? ( lazyloadEnabled ? optimization_status.disable : optimization_status.enable ) : ''
 		},
 		{
-			active: lazyloadEnabled && 'disabled' === settings?.scale,
-			label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
-			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
+			settingType: 'scale',
+			active: ( lazyloadEnabled && 'disabled' === settings?.scale ) && imageHandlingEnabled,
+			label: optimization_status.statusTitle3,
+			description: optimization_status.statusSubTitle3,
+			buttonText: imageHandlingEnabled ? ( ( lazyloadEnabled && 'disabled' === settings?.scale ) ? optimization_status.disable : optimization_status.enable ) : ''
 		}
-	].map( el => ({
-		...el, active: imageHandlingEnabled && el.active
-	}) );
+	];
 
 	return (
 		<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
@@ -32,20 +84,47 @@ const OptimizationStatus = ({ settings }) => {
 				{ statuses.map( ( status, index ) => (
 					<li
 						key={index}
-						className="flex items-start gap-2"
+						className="flex items-start gap-2 justify-between"
 					>
-						{status.active ? (
-							<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
-						) : (
-							<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
-						)}
-						<div>
-							<span className='text-gray-700 font-normal font-semibold'>
-								{status.label}
-							</span>
-
-							<p className="m-0">{status.description}</p>
+						<div className="flex items-start gap-2">
+							{status.active ? (
+								<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
+							) : (
+								<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
+							)}
+							<div>
+								<span className='text-gray-700 font-semibold'>
+									{status.label}
+								</span>
+								<p className="m-0">{status.description}</p>
+							</div>
 						</div>
+						<Button
+							variant="link"
+							className="text-info text-sm font-medium"
+							style={{ textDecoration: 'none' }}
+							onClick={() => {
+								if ( 'image_replacer' === status.settingType && status.active ) {
+									handleSettingsNavigation( );
+									return;
+								}
+
+								if ( 'scale' === status.settingType  ) {
+									status.active = ! status.active;
+								}
+
+								if ( 'disabled' === settings?.image_replacer && 'image_replacer' !== status.settingType ) {
+									return;
+								}
+
+								directUpdate( status.settingType, ! status.active );
+							}}
+
+							isBusy={isLoading}
+							disabled={isLoading}
+						>
+							{status.buttonText}
+						</Button>
 					</li>
 				) ) }
 			</ul>
diff --git a/assets/src/dashboard/parts/connected/Sidebar.js b/assets/src/dashboard/parts/connected/Sidebar.js
index ad85c5b9..f1a1893b 100644
--- a/assets/src/dashboard/parts/connected/Sidebar.js
+++ b/assets/src/dashboard/parts/connected/Sidebar.js
@@ -23,7 +23,7 @@ const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_4
 ];
 
-const Sidebar = ({ settings }) => {
+const Sidebar = ({ settings, setSettings, setCanSave, setTab }) => {
 	const {
 		name,
 		domain,
@@ -121,7 +121,12 @@ const Sidebar = ({ settings }) => {
 				</Button>
 			) }
 
-			<OptimizationStatus settings={settings} />
+			<OptimizationStatus
+				settings={settings}
+				setSettings={setSettings}
+				setCanSave={setCanSave}
+				setTab={setTab}
+			/>
 
 			{ showSPCRecommendation && (
 				<SPCRecommendation />
diff --git a/assets/src/dashboard/parts/connected/index.js b/assets/src/dashboard/parts/connected/index.js
index 0ea56cda..bdb8df09 100644
--- a/assets/src/dashboard/parts/connected/index.js
+++ b/assets/src/dashboard/parts/connected/index.js
@@ -121,7 +121,12 @@ const ConnectedLayout = ({
 					{ 'help' === tab && <Help /> }
 				</div>
 
-				<Sidebar settings={settings}/>
+				<Sidebar
+					settings={settings}
+					setSettings={setSettings}
+					setCanSave={setCanSave}
+					setTab={setTab}
+				/>
 			</div>
 		</div>
 	);
diff --git a/inc/admin.php b/inc/admin.php
index b5cabe68..ae393c0b 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -2192,6 +2192,9 @@ private function get_dashboard_strings() {
 				'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
 				'statusTitle3'    => __( 'Image Scalling', 'optimole-wp' ),
 				'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
+				'disable'         => __( 'Disable', 'optimole-wp' ),
+				'enable'          => __( 'Enable', 'optimole-wp' ),
+				'manage'          => __( 'Manage', 'optimole-wp' ),
 			],
 			'optimization_tips'              => sprintf(
 			/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */