diff --git a/docs/coding-best-practices.md b/docs/coding-best-practices.md
index f61f4e82b..158bd6014 100644
--- a/docs/coding-best-practices.md
+++ b/docs/coding-best-practices.md
@@ -101,4 +101,6 @@ In this project, we do not have cases when the code must do a lot of things at a
 
 The challenge in this project is to extend the code to support more features. The more we have, the harder it will be to maintain the code. Fancy tricks without a good reason are not good.
 
-A piece code that is performant, easy to read and understand, and easy to maintain is the best. [But sometime you can not have it all](https://www.youtube.com/watch?v=hFDcoX7s6rE). So, you need to choose what is more important for your case.
\ No newline at end of file
+A piece code that is performant, easy to read and understand, and easy to maintain is the best. [But sometime you can not have it all](https://www.youtube.com/watch?v=hFDcoX7s6rE). So, you need to choose what is more important for your case.
+
+If you are using filters or HOC to add, for example, a Toolbar to all Blocks, it's recommended that you make useSelect or other requests inside child components to avoid them being triggered when they're not needed. An example of what type of issues it can cause: https://github.com/Codeinwp/otter-blocks/pull/1974
\ No newline at end of file
diff --git a/plugins/blocks-animation/readme.txt b/plugins/blocks-animation/readme.txt
index ec12d1e2a..dd300426d 100644
--- a/plugins/blocks-animation/readme.txt
+++ b/plugins/blocks-animation/readme.txt
@@ -1,7 +1,7 @@
 === Blocks Animation: CSS Animations for Gutenberg Blocks ===
 Contributors: themeisle, hardeepasrani, mariamunteanu1
 Tags: gutenberg, block, block editor, editor, animation, animations, animate, styles, block animations
-Requires at least: 5.9
+Requires at least: 6.2
 Tested up to: 6.4
 Requires PHP: 5.4
 Stable tag: trunk
diff --git a/plugins/blocks-css/readme.txt b/plugins/blocks-css/readme.txt
index 403b63c28..9a842ca7b 100644
--- a/plugins/blocks-css/readme.txt
+++ b/plugins/blocks-css/readme.txt
@@ -1,7 +1,7 @@
 === Blocks CSS: CSS Editor for Gutenberg Blocks ===
 Contributors: themeisle, hardeepasrani
 Tags: gutenberg, block, css, css editor, blocks css
-Requires at least: 5.9    
+Requires at least: 6.2    
 Tested up to: 6.4
 Requires PHP: 5.4  
 Stable tag: trunk
diff --git a/plugins/blocks-export-import/readme.txt b/plugins/blocks-export-import/readme.txt
index b413e7fd8..93797a203 100644
--- a/plugins/blocks-export-import/readme.txt
+++ b/plugins/blocks-export-import/readme.txt
@@ -1,7 +1,7 @@
 === Blocks Export Import ===
 Contributors: themeisle, hardeepasrani
 Tags: gutenberg, block, blocks, export, import, exporter, importer, block exporter, block export, block import, block importer
-Requires at least: 5.9    
+Requires at least: 6.2    
 Tested up to: 6.4
 Requires PHP: 5.4  
 Stable tag: trunk
diff --git a/readme.txt b/readme.txt
index b87bea6e7..1bf9aefc5 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,7 +1,7 @@
 === Otter Blocks - Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE ===
 Contributors: themeisle, hardeepasrani, soarerobertdaniel7, mariamunteanu1, arinat, uriahs-victor, john_pixle, wildmisha, irinelenache
 Tags: block, blocks, gutenberg, gutenberg blocks, wordPress blocks, editor, block Editor, page Builder, post blocks, post grids
-Requires at least: 5.9
+Requires at least: 6.2
 Tested up to: 6.4
 Requires PHP: 5.6
 Stable tag: trunk
diff --git a/src/blocks/helpers/use-settings.js b/src/blocks/helpers/use-settings.js
index 85e89959e..710bda3de 100644
--- a/src/blocks/helpers/use-settings.js
+++ b/src/blocks/helpers/use-settings.js
@@ -5,15 +5,15 @@ import api from '@wordpress/api';
 
 import { __ } from '@wordpress/i18n';
 
-import { dispatch } from '@wordpress/data';
-
 import {
-	useEffect,
-	useState
-} from '@wordpress/element';
+	dispatch,
+	useSelect
+} from '@wordpress/data';
+
+import { useState } from '@wordpress/element';
 
 /**
- * useSettings Hook.
+ * useSettings Hook, modifed for Otter usage.
  *
  * useSettings hook to get/update WordPress' settings database.
  *
@@ -29,29 +29,28 @@ import {
  * @returns {[(optionName: string) => any, (option: string, value: any, success?: string, noticeId?: string, onSuccess: Function) => void, 'loading' | 'loaded' | 'error' | 'saving']} [ getOption, updateOption, status ]
  *
  */
+let updatedSettings = {};
 const useSettings = () => {
 	const { createNotice } = dispatch( 'core/notices' );
 
-	const [ settings, setSettings ] = useState({});
 	const [ status, setStatus ] = useState( 'loading' );
+	const [ settings, setSettings ] = useState({});
 
-	const getSettings = () => {
-		api.loadPromise.then( async() => {
-			try {
-				const settings = new api.models.Settings();
-				const response = await settings.fetch();
-				setSettings( response );
-			} catch ( error ) {
-				setStatus( 'error' );
-			} finally {
-				setStatus( 'loaded' );
-			}
-		});
-	};
+	useSelect( select => {
+		const { getEntityRecord } = select( 'core' );
+
+		// Bail out if settings are already loaded.
+		if ( Object.keys( settings ).length ) {
+			return;
+		}
+
+		const request = getEntityRecord( 'root', 'site' );
 
-	useEffect( () => {
-		getSettings();
-	}, []);
+		if ( request ) {
+			setStatus( 'loaded' );
+			setSettings( request );
+		}
+	}, [ settings ]);
 
 	/**
 	 * Get the value of the given option.
@@ -60,7 +59,7 @@ const useSettings = () => {
 	 * @returns {any} Option value.
 	 */
 	const getOption = option => {
-		return settings?.[option];
+		return updatedSettings?.[option] || settings?.[option];
 	};
 
 	/**
@@ -107,7 +106,8 @@ const useSettings = () => {
 				);
 			}
 
-			getSettings();
+			updatedSettings = response;
+			setSettings( response );
 			onSuccess?.( response );
 		});
 
diff --git a/src/blocks/plugins/ai-content/index.tsx b/src/blocks/plugins/ai-content/index.tsx
index b4fd6a280..e638cdff9 100644
--- a/src/blocks/plugins/ai-content/index.tsx
+++ b/src/blocks/plugins/ai-content/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 
-// @ts-ignore
+
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -18,12 +18,9 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 
 import { Fragment, useEffect, useState } from '@wordpress/element';
 
-import {
-	addFilter,
-	applyFilters
-} from '@wordpress/hooks';
+import { addFilter } from '@wordpress/hooks';
 
-import { useDispatch, useSelect, dispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { rawHandler, createBlock } from '@wordpress/blocks';
 import { BlockControls } from '@wordpress/block-editor';
 
@@ -74,161 +71,249 @@ const extractContent = ( source: BlockProps<unknown> | BlockProps<unknown>[]): s
 
 let embeddedPromptsCache: PromptsData|null = null;
 
-const withConditions = createHigherOrderComponent( BlockEdit => {
-	return props => {
-		const [ getOption, _, status ] = useSettings();
-		const [ hasAPIKey, setHasAPIKey ] = useState<boolean>( false );
-		const [ isProcessing, setIsProcessing ] = useState<Record<string, boolean>>({});
-		const [ displayError, setDisplayError ] = useState<string|undefined>( undefined );
+const AIToolbar = ({
+	props,
+	onClose
+}) => {
+	const [ getOption, _, status ] = useSettings();
+	const [ hasAPIKey, setHasAPIKey ] = useState<boolean>( false );
+	const [ isProcessing, setIsProcessing ] = useState<Record<string, boolean>>({});
+	const [ displayError, setDisplayError ] = useState<string|undefined>( undefined );
+
+	// Get the create notice function from the hooks api.
+	const { createNotice } = useDispatch( 'core/notices' );
+
+	const {
+		isMultipleSelection,
+		selectedBlocks
+	} = useSelect( ( select ) => {
+		const selectedBlocks = select( 'core/block-editor' ).getMultiSelectedBlocks();
+
+		return {
+			isMultipleSelection: 1 < selectedBlocks.length,
+			selectedBlocks
+		};
+	}, []);
+
+	useEffect( () => {
+		if ( 'loading' === status ) {
+			return;
+		}
+
+		if ( 'loaded' === status && ! hasAPIKey ) {
+			const key = getOption( openAiAPIKeyName ) as string;
+			setHasAPIKey(  Boolean( key ) && 0 < key.length );
+		}
+	}, [ status, getOption ]);
+
+	useEffect( () => {
+		if ( ! displayError ) {
+			return;
+		}
+
+		createNotice(
+			'error',
+			displayError,
+			{
+				type: 'snackbar',
+				isDismissible: true
+			}
+		);
 
-		// Get the create notice function from the hooks api.
-		const { createNotice } = useDispatch( 'core/notices' );
+		setDisplayError( undefined );
+	}, [ displayError ]);
 
-		const {
-			isMultipleSelection,
-			areValidBlocks,
-			selectedBlocks,
-			isHidden
-		} = useSelect( ( select ) => {
-			const selectedBlocks = select( 'core/block-editor' ).getMultiSelectedBlocks();
-			const hiddenBlocks = select( 'core/preferences' )?.get( 'core/edit-post', 'hiddenBlockTypes' ) || [];
-
-			return {
-				isMultipleSelection: 1 < selectedBlocks.length,
-				areValidBlocks: selectedBlocks.every( ( block ) => isValidBlock( block.name ) ),
-				selectedBlocks,
-				isHidden: hiddenBlocks.find( ( blockName: string ) => 'themeisle-blocks/content-generator' === blockName ) ?? false
-			};
-		}, []);
+	const generateContent = async( content: string, actionKey: string, callback: Function = () =>{}) => {
 
-		useEffect( () => {
-			if ( 'loading' === status ) {
-				return;
-			}
+		if ( ! content ) {
+			setDisplayError( __( 'No content detected in selected block.', 'otter-blocks' ) );
+			return;
+		}
 
-			if ( 'loaded' === status && ! hasAPIKey ) {
-				const key = getOption( openAiAPIKeyName ) as string;
-				setHasAPIKey(  Boolean( key ) && 0 < key.length );
-			}
-		}, [ status, getOption ]);
+		if ( ! embeddedPromptsCache ) {
+			const response = await retrieveEmbeddedPrompt( 'textTransformation' );
+			embeddedPromptsCache = response?.prompts ?? [];
+		}
 
-		useEffect( () => {
-			if ( ! displayError ) {
-				return;
-			}
+		const embeddedPrompt = embeddedPromptsCache?.find( ( prompt ) => 'textTransformation' === prompt.otter_name );
 
-			createNotice(
-				'error',
-				displayError,
-				{
-					type: 'snackbar',
-					isDismissible: true
-				}
-			);
+		if ( ! embeddedPrompt ) {
+			setDisplayError( __( 'Something when wrong retrieving the prompts.', 'otter-blocks' ) );
+			return;
+		}
 
-			setDisplayError( undefined );
-		}, [ displayError ]);
+		const action: undefined | string = embeddedPrompt?.[actionKey];
 
-		const generateContent = async( content: string, actionKey: string, callback: Function = () =>{}) => {
+		if ( ! action ) {
+			setDisplayError( __( 'The action is not longer available.', 'otter-blocks' ) );
+			return;
+		}
 
-			if ( ! content ) {
-				setDisplayError( __( 'No content detected in selected block.', 'otter-blocks' ) );
-				return;
-			}
+		if ( ! hasAPIKey ) {
+			setDisplayError( __( 'No Open API key detected. Please add your key.', 'otter-blocks' ) );
+			return;
+		}
 
-			if ( ! embeddedPromptsCache ) {
-				const response = await retrieveEmbeddedPrompt( 'textTransformation' );
-				embeddedPromptsCache = response?.prompts ?? [];
-			}
+		setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: true }) );
 
-			const embeddedPrompt = embeddedPromptsCache?.find( ( prompt ) => 'textTransformation' === prompt.otter_name );
+		window.oTrk?.add({ feature: 'ai-generation', featureComponent: 'ai-toolbar', featureValue: actionKey }, { consent: true });
 
-			if ( ! embeddedPrompt ) {
-				setDisplayError( __( 'Something when wrong retrieving the prompts.', 'otter-blocks' ) );
+		sendPromptToOpenAI(
+			content,
+			injectActionIntoPrompt(
+				embeddedPrompt,
+				action
+			),
+			{
+				'otter_used_action': `textTransformation::${ actionKey }`,
+				'otter_user_content': content
+			}
+		).then( ( response ) => {
+			if ( response.error ) {
+				setDisplayError( response.error?.message ?? response.error );
 				return;
 			}
 
-			const action: undefined | string = embeddedPrompt?.[actionKey];
+			const blockContentRaw = response?.choices?.[0]?.message.content;
 
-			if ( ! action ) {
-				setDisplayError( __( 'The action is not longer available.', 'otter-blocks' ) );
+			if ( ! blockContentRaw ) {
 				return;
 			}
 
-			if ( ! hasAPIKey ) {
-				setDisplayError( __( 'No Open API key detected. Please add your key.', 'otter-blocks' ) );
-				return;
-			}
+			const newBlocks = rawHandler({
+				HTML: blockContentRaw
+			});
 
-			setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: true }) );
+			const aiBlock = createBlock(
+				'themeisle-blocks/content-generator',
+				{
+					promptID: 'textTransformation',
+					resultHistory: [{
+						result: response?.choices?.[0]?.message.content ?? '',
+						meta: {
+							usedToken: response?.usage.total_tokens,
+							prompt: ''
+						}
+					}]
+				},
+				newBlocks
+			);
 
-			window.oTrk?.add({ feature: 'ai-generation', featureComponent: 'ai-toolbar', featureValue: actionKey }, { consent: true });
+			insertBlockBelow( props.clientId, aiBlock );
 
-			sendPromptToOpenAI(
-				content,
-				injectActionIntoPrompt(
-					embeddedPrompt,
-					action
-				),
-				{
-					'otter_used_action': `textTransformation::${ actionKey }`,
-					'otter_user_content': content
-				}
-			).then( ( response ) => {
-				if ( response.error ) {
-					setDisplayError( response.error?.message ?? response.error );
-					return;
-				}
-
-				const blockContentRaw = response?.choices?.[0]?.message.content;
-
-				if ( ! blockContentRaw ) {
-					return;
-				}
-
-				const newBlocks = rawHandler({
-					HTML: blockContentRaw
-				});
-
-				const aiBlock = createBlock(
-					'themeisle-blocks/content-generator',
-					{
-						promptID: 'textTransformation',
-						resultHistory: [{
-							result: response?.choices?.[0]?.message.content ?? '',
-							meta: {
-								usedToken: response?.usage.total_tokens,
-								prompt: ''
+			setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: false }) );
+			callback?.();
+		}).catch( ( error ) => {
+			setDisplayError( error.message );
+			setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: false }) );
+		});
+	};
+
+	const ActionMenuItem = ( args: { actionKey: string, children: React.ReactNode, callback: Function }) => {
+		return (
+			<Disabled isDisabled={Object.values( isProcessing ).some( x => x )}>
+				<MenuItem
+					onClick={ () => {
+						generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), args.actionKey, () => args.callback?.( args.actionKey ) );
+					}}
+				>
+					{ args.children }
+					{ isProcessing?.[args.actionKey] && <Spinner /> }
+				</MenuItem>
+			</Disabled>
+		);
+	};
+
+	return (
+		<Fragment>
+			{
+				( ! hasAPIKey ) && (
+					<MenuGroup>
+						<span className='o-menu-item-alignment' style={{ display: 'block', marginBottom: '10px' }}>
+							{ __( 'Please add your OpenAI API key in Integrations.', 'otter-blocks' ) }
+						</span>
+						<ExternalLink className='o-menu-item-alignment' href={window.themeisleGutenberg.optionsPath} target="_blank" rel="noopener noreferrer">
+							{
+								__( 'Go to Dashboard', 'otter-blocks' )
 							}
-						}]
-					},
-					newBlocks
-				);
-
-				insertBlockBelow( props.clientId, aiBlock );
-
-				setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: false }) );
-				callback?.();
-			}).catch( ( error ) => {
-				setDisplayError( error.message );
-				setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: false }) );
-			});
-		};
+						</ExternalLink>
+					</MenuGroup>
+				)
+			}
+			<MenuGroup>
+				<span className="o-menu-item-header o-menu-item-alignment">{__( 'Writing', 'otter-blocks' )}</span>
+				<ActionMenuItem actionKey='otter_action_generate_title' callback={onClose}>
+					{ __( 'Generate a heading', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_continue_writing' callback={onClose}>
+					{ __( 'Continue writing', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_summarize' callback={onClose}>
+					{ __( 'Summarize it', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_make_shorter' callback={onClose}>
+					{ __( 'Make it shorter', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_make_longer' callback={onClose}>
+					{ __( 'Make it longer', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_make_descriptive' callback={onClose}>
+					{ __( 'Make it more descriptive', 'otter-blocks' ) }
+				</ActionMenuItem>
+			</MenuGroup>
+			<MenuGroup>
+				<span className="o-menu-item-header o-menu-item-alignment">{__( 'Tone', 'otter-blocks' )}</span>
+				<ActionMenuItem actionKey='otter_action_tone_professional' callback={onClose}>
+					{ __( 'Professional', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_tone_friendly' callback={onClose}>
+					{ __( 'Friendly', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_tone_humorous' callback={onClose}>
+					{ __( 'Humorous', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_tone_confident' callback={onClose}>
+					{ __( 'Confident', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_tone_persuasive' callback={onClose}>
+					{ __( 'Persuasive', 'otter-blocks' ) }
+				</ActionMenuItem>
+				<ActionMenuItem actionKey='otter_action_tone_casual' callback={onClose}>
+					{ __( 'Casual', 'otter-blocks' ) }
+				</ActionMenuItem>
+			</MenuGroup>
+			<MenuGroup>
+				<ActionMenuItem actionKey='otter_action_prompt' callback={onClose}>
+					{ __( 'Use as prompt', 'otter-blocks' ) }
+				</ActionMenuItem>
+			</MenuGroup>
+			<MenuGroup>
+				<ExternalLink className='o-menu-item-alignment' href="https://docs.themeisle.com/collection/1563-otter---page-builder-blocks-extensions" target="_blank" rel="noopener noreferrer">
+					{
+						__( 'Go to docs', 'otter-blocks' )
+					}
+				</ExternalLink>
+			</MenuGroup>
+		</Fragment>
+	);
+};
 
-		const ActionMenuItem = ( args: { actionKey: string, children: React.ReactNode, callback: Function }) => {
-			return (
-				<Disabled isDisabled={Object.values( isProcessing ).some( x => x )}>
-					<MenuItem
-						onClick={ () => {
-							generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), args.actionKey, () => args.callback?.( args.actionKey ) );
-						}}
-					>
-						{ args.children }
-						{ isProcessing?.[args.actionKey] && <Spinner /> }
-					</MenuItem>
-				</Disabled>
-			);
-		};
+const withConditions = createHigherOrderComponent( BlockEdit => {
+	return props => {
+		const {
+			isMultipleSelection,
+			areValidBlocks,
+			isHidden
+		} = useSelect( ( select ) => {
+			const selectedBlocks = select( 'core/block-editor' ).getMultiSelectedBlocks();
+			const hiddenBlocks = select( 'core/preferences' )?.get( 'core/edit-post', 'hiddenBlockTypes' ) || [];
+
+			return {
+				isMultipleSelection: 1 < selectedBlocks.length,
+				areValidBlocks: selectedBlocks.every( ( block ) => isValidBlock( block.name ) ),
+				isHidden: hiddenBlocks.find( ( blockName: string ) => 'themeisle-blocks/content-generator' === blockName ) ?? false
+			};
+		}, []);
 
 		return (
 			<Fragment>
@@ -244,81 +329,12 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 						<BlockControls>
 							<Toolbar>
 								<DropdownMenu
-									icon={aiGeneration}
+									icon={ aiGeneration }
 									label={ __( 'Otter AI Content' ) }
 								>
 									{
 										({ onClose }) => (
-											<Fragment>
-												{
-													( ! hasAPIKey ) && (
-														<MenuGroup>
-															<span className='o-menu-item-alignment' style={{ display: 'block', marginBottom: '10px' }}>
-																{ __( 'Please add your OpenAI API key in Integrations.', 'otter-blocks' ) }
-															</span>
-															<ExternalLink className='o-menu-item-alignment' href={window.themeisleGutenberg.optionsPath} target="_blank" rel="noopener noreferrer">
-																{
-																	__( 'Go to Dashboard', 'otter-blocks' )
-																}
-															</ExternalLink>
-														</MenuGroup>
-													)
-												}
-												<MenuGroup>
-													<span className="o-menu-item-header o-menu-item-alignment">{__( 'Writing', 'otter-blocks' )}</span>
-													<ActionMenuItem actionKey='otter_action_generate_title' callback={onClose}>
-														{ __( 'Generate a heading', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_continue_writing' callback={onClose}>
-														{ __( 'Continue writing', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_summarize' callback={onClose}>
-														{ __( 'Summarize it', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_make_shorter' callback={onClose}>
-														{ __( 'Make it shorter', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_make_longer' callback={onClose}>
-														{ __( 'Make it longer', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_make_descriptive' callback={onClose}>
-														{ __( 'Make it more descriptive', 'otter-blocks' ) }
-													</ActionMenuItem>
-												</MenuGroup>
-												<MenuGroup>
-													<span className="o-menu-item-header o-menu-item-alignment">{__( 'Tone', 'otter-blocks' )}</span>
-													<ActionMenuItem actionKey='otter_action_tone_professional' callback={onClose}>
-														{ __( 'Professional', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_tone_friendly' callback={onClose}>
-														{ __( 'Friendly', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_tone_humorous' callback={onClose}>
-														{ __( 'Humorous', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_tone_confident' callback={onClose}>
-														{ __( 'Confident', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_tone_persuasive' callback={onClose}>
-														{ __( 'Persuasive', 'otter-blocks' ) }
-													</ActionMenuItem>
-													<ActionMenuItem actionKey='otter_action_tone_casual' callback={onClose}>
-														{ __( 'Casual', 'otter-blocks' ) }
-													</ActionMenuItem>
-												</MenuGroup>
-												<MenuGroup>
-													<ActionMenuItem actionKey='otter_action_prompt' callback={onClose}>
-														{ __( 'Use as prompt', 'otter-blocks' ) }
-													</ActionMenuItem>
-												</MenuGroup>
-												<MenuGroup>
-													<ExternalLink className='o-menu-item-alignment' href="https://docs.themeisle.com/collection/1563-otter---page-builder-blocks-extensions" target="_blank" rel="noopener noreferrer">
-														{
-															__( 'Go to docs', 'otter-blocks' ) // TODO: Add link to docs & CSS styling
-														}
-													</ExternalLink>
-												</MenuGroup>
-											</Fragment>
+											<AIToolbar props={ props } onClose={ onClose } />
 										)
 									}
 								</DropdownMenu>
diff --git a/src/blocks/plugins/options/index.js b/src/blocks/plugins/options/index.js
index 8d20a02a0..3cb12cd26 100644
--- a/src/blocks/plugins/options/index.js
+++ b/src/blocks/plugins/options/index.js
@@ -89,7 +89,7 @@ export let NavigatorButton = ({
 	);
 };
 
-const Options = () => {
+const Sidebar = () => {
 	const { isOnboardingVisible, get } = useSelect( select => {
 		const { isOnboardingVisible } = select( 'themeisle-gutenberg/data' );
 		const get = select( 'core/preferences' )?.get;
@@ -273,14 +273,198 @@ const Options = () => {
 		Controls = globalControls.find( item => item.name === selectedBlock ).control;
 	}
 
-	const navigator = useNavigator();
-
 	const enabledModules = {
 		'css': Boolean( getOption( 'themeisle_blocks_settings_css_module' ) ),
 		'animation': Boolean( getOption( 'themeisle_blocks_settings_blocks_animation' ) ),
 		'condition': Boolean( getOption( 'themeisle_blocks_settings_block_conditions' ) )
 	};
 
+	return (
+		<NavigatorProvider
+			initialPath="/"
+		>
+			<NavigatorScreen path="/">
+				<PanelBody className="o-options-general">
+					<PanelRow>
+						<Button
+							icon={ otterIconColored }
+							onClick={ () => showOnboarding( ! isOnboardingVisible ) }
+							className="o-onboarding-button"
+						>
+							{ __( 'Show Onboarding Modal', 'otter-blocks' ) }
+						</Button>
+					</PanelRow>
+				</PanelBody>
+
+				{
+					canUser && (
+						<Fragment>
+							<PanelBody
+								title={__( 'Block Tools Defaults', 'otter-blocks' )}
+								initialOpen={true}
+							>
+								<p>
+									{
+										__( 'Make those features to be shown by default in Block Tools.', 'otter-blocks' )
+									}
+								</p>
+
+								{
+									'loading' === status && (
+										<p>
+											<Spinner />
+											{ __( 'Checking optional module...', 'otter-blocks' ) }
+										</p>
+									)
+								}
+
+								{
+									enabledModules?.css && (
+										<PanelRow>
+											<ToggleControl
+												className="o-sidebar-toggle"
+												label={__( 'Custom CSS', 'otter-blocks' )}
+												checked={get?.( 'themeisle/otter-blocks', 'show-custom-css' )}
+												disabled={'loading' === preferenceStatus}
+												onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-custom-css', value ) )}
+											/>
+										</PanelRow>
+									)
+								}
+
+								{
+									enabledModules?.animation && (
+										<PanelRow>
+											<ToggleControl
+												className="o-sidebar-toggle"
+												label={__( 'Animation', 'otter-blocks' )}
+												checked={get?.( 'themeisle/otter-blocks', 'show-animations' ) ?? false}
+												disabled={'loading' === preferenceStatus}
+												onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-animations', value ) )}
+											/>
+										</PanelRow>
+									)
+								}
+
+								{
+									enabledModules?.condition && (
+										<PanelRow>
+											<ToggleControl
+												className="o-sidebar-toggle"
+												label={__( 'Visibility Condition', 'otter-blocks' )}
+												checked={get?.( 'themeisle/otter-blocks', 'show-block-conditions' ) ?? false }
+												disabled={'loading' === preferenceStatus}
+												onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-block-conditions', value ) )}
+											/>
+										</PanelRow>
+									)
+								}
+							</PanelBody>
+
+							<NavigatorButton
+								path="/block-settings"
+								icon={ chevronRightSmall }
+								className="o-navi-button"
+							>
+								{ __( 'Block Settings', 'otter-blocks' ) }
+							</NavigatorButton>
+						</Fragment>
+					)
+				}
+
+				{ applyFilters( 'otter.feedback', '', 'otter-menu-editor', __( 'Help us improve Otter Blocks', 'otter-blocks' ) ) }
+			</NavigatorScreen>
+
+			<NavigatorScreen
+				path="/block-settings"
+				className="o-options-global-defaults"
+			>
+				<NavigatorButton
+					path="/"
+					icon={ chevronLeftSmall }
+					className="o-navi-button o-navi-button-back"
+				>
+					{ __( 'Settings', 'otter-blocks' ) }
+				</NavigatorButton>
+
+				<GlobalDefaults
+					isAPILoaded={ isAPILoaded }
+					globalControls={ globalControls }
+					blockDefaults={ blockDefaults }
+					setSelectedBlock={ setSelectedBlock}
+				/>
+			</NavigatorScreen>
+
+			<NavigatorScreen
+				path="/block-settings/global-defaults"
+				className="o-options-global-defaults-modal"
+			>
+				<NavigatorButton
+					path="/block-settings"
+					icon={ chevronLeftSmall }
+					className="o-navi-button o-navi-button-back"
+				>
+					{ __( 'Blocks', 'otter-blocks' ) }
+				</NavigatorButton>
+
+				{ selectedBlock && (
+					<Fragment>
+						<Controls
+							blockName={ selectedBlock }
+							defaults={ blockDefaults[ selectedBlock ] }
+							changeConfig={ changeConfig }
+						/>
+
+						<div className="o-options-global-defaults-actions">
+							<Button
+								isDestructive
+								onClick={ () => resetConfig( selectedBlock ) }
+							>
+								{ __( 'Reset', 'otter-blocks' ) }
+							</Button>
+
+							<Button
+								isBusy={ isLoading }
+								onClick={ async() => {
+									setLoading( true );
+									await saveConfig();
+									setLoading( false );
+								} }
+							>
+								{ __( 'Save', 'otter-blocks' ) }
+							</Button>
+						</div>
+					</Fragment>
+				)}
+			</NavigatorScreen>
+		</NavigatorProvider>
+	);
+};
+
+const Options = () => {
+	useEffect( () => {
+		let isMounted = true;
+
+		const fetchData = async() => {
+			const data = await apiFetch({ path: 'wp/v2/users/me?context=edit' });
+
+			if ( data.capabilities.manage_options && isMounted ) {
+				setCanUser( true );
+			} else {
+				setCanUser( false );
+				setAPILoaded( true );
+			}
+		};
+
+		fetchData();
+
+		return () => {
+			isMounted = false;
+		};
+	}, []);
+
+	const [ canUser, setCanUser ] = useState( false );
+
 	return (
 		<Fragment>
 			{ ( canUser ) && (
@@ -295,164 +479,7 @@ const Options = () => {
 				title={ __( 'Otter Options', 'otter-blocks' ) }
 				name="otter-options"
 			>
-				<NavigatorProvider
-					initialPath="/"
-				>
-					<NavigatorScreen path="/">
-						<PanelBody className="o-options-general">
-							<PanelRow>
-								<Button
-									icon={ otterIconColored }
-									onClick={ () => showOnboarding( ! isOnboardingVisible ) }
-									className="o-onboarding-button"
-								>
-									{ __( 'Show Onboarding Modal', 'otter-blocks' ) }
-								</Button>
-							</PanelRow>
-						</PanelBody>
-
-						{
-							canUser && (
-								<Fragment>
-									<PanelBody
-										title={__( 'Block Tools Defaults', 'otter-blocks' )}
-										initialOpen={true}
-									>
-										<p>
-											{
-												__( 'Make those features to be shown by default in Block Tools.', 'otter-blocks' )
-											}
-										</p>
-
-										{
-											'loading' === status && (
-												<p>
-													<Spinner />
-													{ __( 'Checking optional module...', 'otter-blocks' ) }
-												</p>
-											)
-										}
-
-										{
-											enabledModules?.css && (
-												<PanelRow>
-													<ToggleControl
-														className="o-sidebar-toggle"
-														label={__( 'Custom CSS', 'otter-blocks' )}
-														checked={get?.( 'themeisle/otter-blocks', 'show-custom-css' )}
-														disabled={'loading' === preferenceStatus}
-														onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-custom-css', value ) )}
-													/>
-												</PanelRow>
-											)
-										}
-
-										{
-											enabledModules?.animation && (
-												<PanelRow>
-													<ToggleControl
-														className="o-sidebar-toggle"
-														label={__( 'Animation', 'otter-blocks' )}
-														checked={get?.( 'themeisle/otter-blocks', 'show-animations' ) ?? false}
-														disabled={'loading' === preferenceStatus}
-														onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-animations', value ) )}
-													/>
-												</PanelRow>
-											)
-										}
-
-										{
-											enabledModules?.condition && (
-												<PanelRow>
-													<ToggleControl
-														className="o-sidebar-toggle"
-														label={__( 'Visibility Condition', 'otter-blocks' )}
-														checked={get?.( 'themeisle/otter-blocks', 'show-block-conditions' ) ?? false }
-														disabled={'loading' === preferenceStatus}
-														onChange={( value ) => updatedWithStatus( dispatch( 'core/preferences' )?.set( 'themeisle/otter-blocks', 'show-block-conditions', value ) )}
-													/>
-												</PanelRow>
-											)
-										}
-									</PanelBody>
-
-									<NavigatorButton
-										path="/block-settings"
-										icon={ chevronRightSmall }
-										className="o-navi-button"
-									>
-										{ __( 'Block Settings', 'otter-blocks' ) }
-									</NavigatorButton>
-								</Fragment>
-							)
-						}
-
-						{ applyFilters( 'otter.feedback', '', 'otter-menu-editor', __( 'Help us improve Otter Blocks', 'otter-blocks' ) ) }
-					</NavigatorScreen>
-
-					<NavigatorScreen
-						path="/block-settings"
-						className="o-options-global-defaults"
-					>
-						<NavigatorButton
-							path="/"
-							icon={ chevronLeftSmall }
-							className="o-navi-button o-navi-button-back"
-						>
-							{ __( 'Settings', 'otter-blocks' ) }
-						</NavigatorButton>
-
-						<GlobalDefaults
-							isAPILoaded={ isAPILoaded }
-							globalControls={ globalControls }
-							blockDefaults={ blockDefaults }
-							setSelectedBlock={ setSelectedBlock}
-						/>
-					</NavigatorScreen>
-
-					<NavigatorScreen
-						path="/block-settings/global-defaults"
-						className="o-options-global-defaults-modal"
-					>
-						<NavigatorButton
-							path="/block-settings"
-							icon={ chevronLeftSmall }
-							className="o-navi-button o-navi-button-back"
-						>
-							{ __( 'Blocks', 'otter-blocks' ) }
-						</NavigatorButton>
-
-						{ selectedBlock && (
-							<Fragment>
-								<Controls
-									blockName={ selectedBlock }
-									defaults={ blockDefaults[ selectedBlock ] }
-									changeConfig={ changeConfig }
-								/>
-
-								<div className="o-options-global-defaults-actions">
-									<Button
-										isDestructive
-										onClick={ () => resetConfig( selectedBlock ) }
-									>
-										{ __( 'Reset', 'otter-blocks' ) }
-									</Button>
-
-									<Button
-										isBusy={ isLoading }
-										onClick={ async() => {
-											setLoading( true );
-											await saveConfig();
-											setLoading( false );
-										} }
-									>
-										{ __( 'Save', 'otter-blocks' ) }
-									</Button>
-								</div>
-							</Fragment>
-						)}
-					</NavigatorScreen>
-				</NavigatorProvider>
+				<Sidebar />
 			</PluginSidebar>
 		</Fragment>
 	);