diff --git a/packages/web/src/components/basic/SelectedFilters.js b/packages/web/src/components/basic/SelectedFilters.js
index a49e2bdb8..18a8a3dc3 100644
--- a/packages/web/src/components/basic/SelectedFilters.js
+++ b/packages/web/src/components/basic/SelectedFilters.js
@@ -13,7 +13,7 @@ import { getClassName, handleA11yAction } from '@appbaseio/reactivecore/lib/util
 import Button, { Filter } from '../../styles/Button';
 import Container from '../../styles/Container';
 import Title from '../../styles/Title';
-import { connect, decodeHtml } from '../../utils';
+import { connect, decodeHtml, sanitizeImageUrl } from '../../utils';
 
 class SelectedFilters extends Component {
 	constructor(props) {
@@ -141,7 +141,7 @@ class SelectedFilters extends Component {
 							<Filter.Value title={decodeHtml(valueToRender)}>{
 								selectedValues[component].label}: {decodeHtml(valueToRender)}
 							</Filter.Value>
-							{imageValue ? <Filter.ImageValue><img width="30px" alt="thumbnail" src={imageValue} /> </Filter.ImageValue> : null}
+							{imageValue ? <Filter.ImageValue><img width="30px" alt="thumbnail" src={sanitizeImageUrl(imageValue)} /> </Filter.ImageValue> : null}
 							<Filter.CloseIcon>&#x2715;</Filter.CloseIcon>
 						</Button>
 					);
@@ -155,7 +155,7 @@ class SelectedFilters extends Component {
 							tabIndex="0"
 						>
 							<Filter.Value>{selectedValues[component].label}:</Filter.Value>
-							<Filter.ImageValue><img width="30px" alt="thumbnail" src={imageValue} /></Filter.ImageValue>
+							<Filter.ImageValue><img width="30px" alt="thumbnail" src={sanitizeImageUrl(imageValue)} /></Filter.ImageValue>
 							<Filter.CloseIcon>&#x2715;</Filter.CloseIcon>
 						</Button>
 					);
diff --git a/packages/web/src/components/search/AIAnswer/Chat.js b/packages/web/src/components/search/AIAnswer/Chat.js
index 5d9944482..72277d855 100644
--- a/packages/web/src/components/search/AIAnswer/Chat.js
+++ b/packages/web/src/components/search/AIAnswer/Chat.js
@@ -31,6 +31,7 @@ import Mic from '../addons/Mic';
 import Button from '../../../styles/Button';
 import AIFeedback from '../../shared/AIFeedback';
 import { Footer, SourceTags } from '../../../styles/SearchBoxAI';
+import { sanitizeImageUrl } from '../../../utils';
 
 const md = new Remarkable();
 
@@ -76,7 +77,7 @@ const Chat = (props) => {
 			}
 			if (props.iconURL) {
 				return (
-					<img style={{ maxHeight: '25px' }} src={xss(props.iconURL)} alt="search-icon" />
+					<img style={{ maxHeight: '25px' }} src={sanitizeImageUrl(props.iconURL)} alt="search-icon" />
 				);
 			}
 			return <SearchSvg />;
diff --git a/packages/web/src/components/search/AISection.js b/packages/web/src/components/search/AISection.js
new file mode 100644
index 000000000..c30c53176
--- /dev/null
+++ b/packages/web/src/components/search/AISection.js
@@ -0,0 +1,182 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Remarkable } from 'remarkable';
+import { getClassName } from '@appbaseio/reactivecore/lib/utils/helper';
+import { SearchBoxAISection, Answer } from '../../styles/SearchBoxAI';
+import TypingEffect from '../shared/TypingEffect';
+import AIFeedback from '../shared/AIFeedback';
+
+const md = new Remarkable();
+md.set({
+	html: true,
+	breaks: true,
+	xhtmlOut: true,
+	linkify: true,
+	linkTarget: '_blank',
+});
+
+const AISection = ({
+	showAIScreen,
+	themePreset,
+	renderAIAnswer,
+	mergedAIQuestion,
+	mergedAIAnswer,
+	AIResponse,
+	isAIResponseLoading,
+	isLoading,
+	getAISourceObjects,
+	AIResponseError,
+	renderAIScreenLoader,
+	currentValue,
+	prevPropsRefIsAITyping,
+	setShowAIScreenFooter,
+	AIUIConfig,
+	showTypingEffect,
+	setShowFeedbackComponent,
+	setShowTypingEffect,
+	_dropdownULRef,
+	isUserScrolling,
+	setLastScrollTop,
+	renderAIScreenFooter,
+	showFeedbackComponent,
+	innerClass,
+	feedbackState,
+	sessionIdFromStore,
+	setFeedbackState,
+	trackUsefullness,
+	renderError,
+	isTypingAIAnswer,
+}) => {
+	if (!showAIScreen) return null;
+
+	return (
+		<SearchBoxAISection themePreset={themePreset}>
+			{typeof renderAIAnswer === 'function' ? (
+				renderAIAnswer({
+					question: mergedAIQuestion,
+					answer: mergedAIAnswer,
+					documentIds:
+						(AIResponse
+							&& AIResponse.response
+							&& AIResponse.response.answer
+							&& AIResponse.response.answer.documentIds)
+						|| [],
+					loading: isAIResponseLoading || isLoading,
+					sources: getAISourceObjects(),
+					error: AIResponseError,
+				})
+			) : (
+				<Fragment>
+					{isAIResponseLoading || isLoading ? (
+						renderAIScreenLoader()
+					) : (
+						<Fragment>
+							<Answer>
+								<TypingEffect
+									key={currentValue}
+									message={md.render(mergedAIAnswer || '')}
+									speed={5}
+									onTypingComplete={() => {
+										if (prevPropsRefIsAITyping.current === undefined) {
+											setShowAIScreenFooter(true);
+										}
+										if (
+											(AIUIConfig
+												&& typeof AIUIConfig.showFeedback === 'boolean'
+												? AIUIConfig.showFeedback
+												: true) &&
+											showTypingEffect
+										) {
+											setShowFeedbackComponent(true);
+										}
+
+										if (mergedAIAnswer) {
+											setShowTypingEffect(false);
+										}
+
+										setTimeout(() => {
+											if (_dropdownULRef.current) {
+												_dropdownULRef.current.scrollTo({
+													top: _dropdownULRef.current.scrollHeight,
+													behavior: 'smooth',
+												});
+											}
+										}, 100);
+									}}
+									onWhileTyping={() => {
+										if (!isUserScrolling && _dropdownULRef.current) {
+											_dropdownULRef.current.scrollTo({
+												top: _dropdownULRef.current.scrollHeight,
+												behavior: 'smooth',
+											});
+											setLastScrollTop(_dropdownULRef.current.scrollHeight);
+										}
+									}}
+									showTypingEffect={isTypingAIAnswer}
+								/>
+							</Answer>
+							{renderAIScreenFooter()}
+
+							{showFeedbackComponent && (
+								<div className={`${getClassName(innerClass, 'ai-feedback') || ''}`}>
+									{' '}
+									<AIFeedback
+										overrideState={feedbackState}
+										hideUI={isAIResponseLoading || isLoading || !sessionIdFromStore}
+										key={sessionIdFromStore}
+										onFeedbackSubmit={(useful, reason) => {
+											setFeedbackState({
+												isRecorded: true,
+												feedbackType: useful ? 'positive' : 'negative',
+											});
+											trackUsefullness(sessionIdFromStore, {
+												useful,
+												reason,
+											});
+										}}
+									/>
+								</div>
+							)}
+						</Fragment>
+					)}
+				</Fragment>
+			)}
+			{renderError(true)}
+		</SearchBoxAISection>
+	);
+};
+
+AISection.propTypes = {
+	showAIScreen: PropTypes.bool.isRequired,
+	themePreset: PropTypes.string,
+	renderAIAnswer: PropTypes.func,
+	mergedAIQuestion: PropTypes.string,
+	mergedAIAnswer: PropTypes.string,
+	AIResponse: PropTypes.object,
+	isAIResponseLoading: PropTypes.bool,
+	isLoading: PropTypes.bool,
+	getAISourceObjects: PropTypes.func.isRequired,
+	AIResponseError: PropTypes.object,
+	renderAIScreenLoader: PropTypes.func.isRequired,
+	currentValue: PropTypes.string,
+	prevPropsRefIsAITyping: PropTypes.object.isRequired,
+	setShowAIScreenFooter: PropTypes.func.isRequired,
+	AIUIConfig: PropTypes.object,
+	showTypingEffect: PropTypes.bool.isRequired,
+	setShowFeedbackComponent: PropTypes.func.isRequired,
+	setShowTypingEffect: PropTypes.func.isRequired,
+	_dropdownULRef: PropTypes.object.isRequired,
+	isUserScrolling: PropTypes.bool.isRequired,
+	setLastScrollTop: PropTypes.func.isRequired,
+	renderAIScreenFooter: PropTypes.func.isRequired,
+	showFeedbackComponent: PropTypes.bool.isRequired,
+	innerClass: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+	feedbackState: PropTypes.object,
+	sessionIdFromStore: PropTypes.string,
+	setFeedbackState: PropTypes.func.isRequired,
+	trackUsefullness: PropTypes.func.isRequired,
+	renderError: PropTypes.func.isRequired,
+	isTypingAIAnswer: PropTypes.bool.isRequired,
+};
+
+export default AISection;
diff --git a/packages/web/src/components/search/SearchBox.js b/packages/web/src/components/search/SearchBox.js
index 9af1f5eb9..b72b6cb9f 100644
--- a/packages/web/src/components/search/SearchBox.js
+++ b/packages/web/src/components/search/SearchBox.js
@@ -63,6 +63,7 @@ import {
 	extractModifierKeysFromFocusShortcuts,
 	isEmpty,
 	parseFocusShortcuts,
+	sanitizeImageUrl,
 } from '../../utils';
 import Mic from './addons/Mic';
 import CancelSvg from '../shared/CancelSvg';
@@ -80,6 +81,9 @@ import { innerText } from '../shared/innerText';
 import TextWithTooltip from './addons/TextWithTooltip';
 import { Thumbnail, CameraIcon } from './addons/CameraIcon';
 import { FallbackRender } from './addons/FallbackRender';
+import AISection from './AISection';
+import SuggestionsSection from './SuggestionsSection';
+import SearchInput from './SearchInput';
 
 const md = new Remarkable();
 
@@ -1156,7 +1160,7 @@ const SearchBox = (props) => {
 			}
 			if (props.iconURL) {
 				return (
-					<img style={{ maxHeight: '25px' }} src={XSS(props.iconURL)} alt="search-icon" />
+					<img style={{ maxHeight: '25px' }} src={sanitizeImageUrl(props.iconURL)} alt="search-icon" />
 				);
 			}
 			return <SearchSvg />;
@@ -1771,7 +1775,7 @@ const SearchBox = (props) => {
 										return (
 											<img
 												style={{ maxHeight: '25px' }}
-												src={XSS(item.iconURL)}
+												src={sanitizeImageUrl(item.iconURL)}
 												alt={item.value}
 											/>
 										);
@@ -1839,410 +1843,54 @@ const SearchBox = (props) => {
 											ref={_dropdownULRef}
 											className={`${getClassName(props.innerClass, 'list')}`}
 										>
-											{showAIScreen ? (
-												<SearchBoxAISection themePreset={props.themePreset}>
-													{typeof props.renderAIAnswer === 'function' ? (
-														props.renderAIAnswer({
-															question: mergedAIQuestion,
-															answer: mergedAIAnswer,
-															documentIds:
-																(props.AIResponse
-																	&& props.AIResponse.response
-																	&& props.AIResponse.response
-																		.answer
-																	&& props.AIResponse.response.answer
-																		.documentIds)
-																|| [],
-															loading:
-																props.isAIResponseLoading
-																|| props.isLoading,
-															sources: getAISourceObjects(),
-															error: props.AIResponseError,
-														})
-													) : (
-														<Fragment>
-															{props.isAIResponseLoading
-															|| props.isLoading ? (
-																	renderAIScreenLoader()
-																) : (
-																	<Fragment>
-																		<Answer>
-																			<TypingEffect
-																				key={currentValue}
-																				message={md.render(
-																					mergedAIAnswer,
-																				)}
-																				speed={5}
-																				onTypingComplete={() => {
-																					if (
-																						prevPropsRefIsAITyping.current
-																					=== undefined
-																					) {
-																						setShowAIScreenFooter(
-																							true,
-																						);
-																					}
-																					if (
-																						(props.AIUIConfig
-																					&& typeof props
-																						.AIUIConfig
-																						.showFeedback
-																						=== 'boolean'
-																							? props
-																								.AIUIConfig
-																								.showFeedback
-																							: true)
-																					&& showTypingEffect
-																					) {
-																						setShowFeedbackComponent(
-																							true,
-																						);
-																					}
-
-																					if (
-																						mergedAIAnswer
-																					) {
-																						setShowTypingEffect(
-																							false,
-																						);
-																					}
-
-																					setTimeout(() => {
-																						_dropdownULRef.current.scrollTo(
-																							{
-																								top:
-																								_dropdownULRef
-																									.current
-																									.scrollHeight,
-																								behavior:
-																								'smooth',
-																							},
-																						);
-																					}, 100);
-																				}}
-																				onWhileTyping={() => {
-																					if (!isUserScrolling) {
-																						_dropdownULRef.current.scrollTo({
-																							top: _dropdownULRef.current.scrollHeight,
-																							behavior: 'smooth',
-																						});
-																						setLastScrollTop(_dropdownULRef.current.scrollHeight);
-																					}
-																				}}
-																				showTypingEffect={
-																					isTypingAIAnswer
-																				}
-																			/>
-																		</Answer>
-																		{renderAIScreenFooter()}
-
-																		{showFeedbackComponent && (
-																			<div
-																				className={`${getClassName(
-																					props.innerClass,
-																					'ai-feedback',
-																				) || ''}`}
-																			>
-																				{' '}
-																				<AIFeedback
-																					overrideState={
-																						feedbackState
-																					}
-																					hideUI={
-																						props.isAIResponseLoading
-																					|| props.isLoading
-																					|| !props.sessionIdFromStore
-																					}
-																					key={
-																						props.sessionIdFromStore
-																					}
-																					onFeedbackSubmit={(
-																						useful,
-																						reason,
-																					) => {
-																						setFeedbackState(
-																							{
-																								isRecorded: true,
-																								feedbackType: useful
-																									? 'positive'
-																									: 'negative',
-																							},
-																						);
-																						props.trackUsefullness(
-																							props.sessionIdFromStore,
-																							{
-																								useful,
-																								reason,
-																							},
-																						);
-																					}}
-																				/>
-																			</div>
-																		)}
-																	</Fragment>
-																)}
-														</Fragment>
-													)}
-													{renderError(true)}
-												</SearchBoxAISection>
-											) : null}
-											{!showAIScreen ? (
-												<Fragment>
-													{parsedSuggestions().map((item, itemIndex) => {
-														const index = indexOffset + itemIndex;
-														if (Array.isArray(item)) {
-															const sectionHtml = XSS(
-																item[0].sectionLabel,
-															);
-															indexOffset += item.length - 1;
-															return (
-																<div
-																	className="section-container"
-																	key={`${item[0].sectionId}`}
-																>
-																	{sectionHtml && (
-																		<div
-																			className={`section-header ${getClassName(
-																				props.innerClass,
-																				'section-label',
-																			)}`}
-																			dangerouslySetInnerHTML={{
-																				__html: sectionHtml,
-																			}}
-																		/>
-																	)}
-																	<ul className="section-list">
-																		{item.map(
-																			(
-																				sectionItem,
-																				sectionIndex,
-																			) => (
-																				<li
-																					{...getItemProps(
-																						{
-																							item: sectionItem,
-																						},
-																					)}
-																					key={`${sectionItem.sectionId
-																						+ sectionIndex}-${
-																						sectionItem.value
-																					}`}
-																					style={{
-																						justifyContent:
-																							'flex-start',
-																						alignItems:
-																							'center',
-																					}}
-																					className={`${
-																						highlightedIndex
-																						=== index
-																							+ sectionIndex
-																							? `active-li-item ${getClassName(
-																								props.innerClass,
-																								'active-suggestion-item',
-																							  )}`
-																							: `li-item ${getClassName(
-																								props.innerClass,
-																								'suggestion-item',
-																							  )}`
-																					}`}
-																				>
-																					<FallbackRender
-																						item={typeof props.renderItem === 'function' ? (
-																							props.renderItem(
-																								sectionItem,
-																							)
-																						) : null}
-																					>
-																						<React.Fragment>
-																							<div
-																								style={{
-																									padding:
-																										'0 10px 0 0',
-																									display:
-																										'flex',
-																								}}
-																							>
-																								<CustomSvg
-																									iconId={`${sectionIndex
-																										+ index
-																										+ 1}-${
-																										sectionItem.value
-																									}-icon`}
-																									className={
-																										getClassName(
-																											props.innerClass,
-																											`${sectionItem._suggestion_type}-search-icon`,
-																										)
-																										|| null
-																									}
-																									icon={getIcon(
-																										sectionItem._suggestion_type,
-																										sectionItem,
-																									)}
-																									type={`${sectionItem._suggestion_type}-search-icon`}
-																								/>
-																							</div>
-																							<Suggestion direction="column">
-																								{sectionItem.label && (
-																									<TextWithTooltip
-																										title={sectionItem.label}
-																										className="section-list-item__label"
-																										innerHTML={
-																											sectionItem.label
-																										}
-																									/>
-																								)}
-																								{sectionItem.description && (
-																									<SuggestionDescription
-																										lines={1}
-																										className="section-list-item__description"
-																										dangerouslySetInnerHTML={{
-																											__html: XSS(
-																												sectionItem.description,
-																											),
-																										}}
-																									/>
-																								)}
-																							</Suggestion>
-																							{getActionIcon(
-																								sectionItem,
-																							)}
-																						</React.Fragment>
-																					</FallbackRender>
-																				</li>
-																			),
-																		)}
-																	</ul>
-																</div>
-															);
-														}
-
-														if (
-															item._suggestion_type
-															=== '_internal_a_i_trigger'
-														) {
-															return (
-																<li
-																	{...getItemProps({ item })}
-																	key={`${index + 1}-${
-																		item.value
-																	}`}
-																	style={{
-																		justifyContent:
-																			'flex-start',
-																		alignItems: 'center',
-																	}}
-																	className={`${
-																		highlightedIndex === index
-																			? `active-li-item ${getClassName(
-																				props.innerClass,
-																				'active-suggestion-item',
-																			  )}`
-																			: `li-item ${getClassName(
-																				props.innerClass,
-																				'suggestion-item',
-																			  )}`
-																	}`}
-																>
-																	<FallbackRender
-																		item={typeof props.renderItem === 'function' ? (
-																			props.renderItem(
-																				item,
-																			)
-																		) : null}
-																	>
-																		<React.Fragment>
-																			<SuggestionItem
-																				currentValue={
-																					currentValue
-																					|| ''
-																				}
-																				suggestion={item}
-																			/>
-																		</React.Fragment>
-																	</FallbackRender>
-																</li>
-															);
-														}
-														return (
-															<li
-																{...getItemProps({ item })}
-																key={`${index + 1}-${item.value}`}
-																style={{
-																	justifyContent: 'flex-start',
-																	alignItems: 'center',
-																}}
-																className={`${
-																	highlightedIndex === index
-																		? `active-li-item ${getClassName(
-																			props.innerClass,
-																			'active-suggestion-item',
-																		  )}`
-																		: `li-item ${getClassName(
-																			props.innerClass,
-																			'suggestion-item',
-																		  )}`
-																}`}
-															>
-																<FallbackRender
-																	item={typeof props.renderItem === 'function' ? (
-																		props.renderItem(
-																			item,
-																		)
-																	) : null}
-																>
-																	<React.Fragment>
-																		{/* eslint-disable */}
-
-																		<div
-																			style={{
-																				padding:
-																					'0 10px 0 0',
-																				display: 'flex',
-																			}}
-																		>
-																			<CustomSvg
-																				iconId={`${index +
-																					1}-${
-																					item.value
-																				}-icon`}
-																				className={
-																					getClassName(
-																						props.innerClass,
-																						`${item._suggestion_type}-search-icon`,
-																					) || null
-																				}
-																				icon={getIcon(
-																					item._suggestion_type,
-																					item,
-																				)}
-																				type={`${item._suggestion_type}-search-icon`}
-																			/>
-																		</div>
-																		{/* eslint-enable */}
-																		<SuggestionItem
-																			currentValue={
-																				currentValue || ''
-																			}
-																			suggestion={item}
-																		/>
-
-																		{getActionIcon(item)}
-																	</React.Fragment>
-																</FallbackRender>
-															</li>
-														);
-													})}
-
-													{showSuggestionsFooter ? (
-														<SuggestionsFooter />
-													) : null}
-												</Fragment>
-											) : null}
-											{!showAIScreen && !hasSuggestions()
-												? renderNoSuggestion(parsedSuggestions()) : null
-											}
+											<AISection
+												showAIScreen={showAIScreen}
+												themePreset={props.themePreset}
+												renderAIAnswer={props.renderAIAnswer}
+												mergedAIQuestion={mergedAIQuestion}
+												mergedAIAnswer={mergedAIAnswer}
+												AIResponse={props.AIResponse}
+												isAIResponseLoading={props.isAIResponseLoading}
+												isLoading={props.isLoading}
+												getAISourceObjects={getAISourceObjects}
+												AIResponseError={props.AIResponseError}
+												renderAIScreenLoader={renderAIScreenLoader}
+												currentValue={currentValue}
+												prevPropsRefIsAITyping={prevPropsRefIsAITyping}
+												setShowAIScreenFooter={setShowAIScreenFooter}
+												AIUIConfig={props.AIUIConfig}
+												showTypingEffect={showTypingEffect}
+												setShowFeedbackComponent={setShowFeedbackComponent}
+												setShowTypingEffect={setShowTypingEffect}
+												_dropdownULRef={_dropdownULRef}
+												isUserScrolling={isUserScrolling}
+												setLastScrollTop={setLastScrollTop}
+												renderAIScreenFooter={renderAIScreenFooter}
+												showFeedbackComponent={showFeedbackComponent}
+												innerClass={props.innerClass}
+												feedbackState={feedbackState}
+												sessionIdFromStore={props.sessionIdFromStore}
+												setFeedbackState={setFeedbackState}
+												trackUsefullness={props.trackUsefullness}
+												renderError={renderError}
+												isTypingAIAnswer={isTypingAIAnswer}
+											/>
+											<SuggestionsSection
+												showAIScreen={showAIScreen}
+												parsedSuggestions={parsedSuggestions}
+												indexOffset={0}
+												innerClass={props.innerClass}
+												getItemProps={getItemProps}
+												highlightedIndex={highlightedIndex}
+												renderItem={props.renderItem}
+												getIcon={getIcon}
+												getActionIcon={getActionIcon}
+												currentValue={currentValue}
+												showSuggestionsFooter={showSuggestionsFooter}
+												SuggestionsFooter={SuggestionsFooter}
+												hasSuggestions={hasSuggestions}
+												renderNoSuggestion={renderNoSuggestion}
+											/>
 										</ul>
 									) : null}
 								</React.Fragment>
@@ -2256,69 +1904,54 @@ const SearchBox = (props) => {
 									{ suppressRefError: true },
 								)}
 							>
-								<InputGroup
-									searchBox
-									ref={_inputGroupRef}
+								<SearchInput
+									inputGroupRef={_inputGroupRef}
 									isOpen={isOpen || showImageDropdown}
-								>
-									<ActionContainer>
-										{renderLeftIcons()}
-										{renderInputAddonBefore()}
-									</ActionContainer>
-									<InputWrapper>
-										<TextArea
-											showFocusShortcutsIcon={props.showFocusShortcutsIcon}
-											showVoiceSearch={props.showVoiceSearch}
-											aria-label={props.componentId}
-											id={`${props.componentId}-input`}
-											showIcon={props.showIcon}
-											showClear={props.showClear}
-											iconPosition={props.iconPosition}
-											ref={_inputRef}
-											{...getInputProps({
-												className: getClassName(props.innerClass, 'input'),
-												placeholder: props.placeholder,
-												// When props.value is defined,
-												// it means SearchBox is used as a controlled component
-												value: Object.hasOwn(props, 'value')
-													? props.value
-													: currentValue || '',
-												onChange: onInputChange,
-												onBlur: withTriggerQuery(props.onBlur),
-												onFocus: handleFocus,
-												onClick: () => {
-													// clear highlighted index
-													setHighlightedIndex(null);
-												},
-												onKeyPress: withTriggerQuery(props.onKeyPress),
-												onKeyDown: e => handleKeyDown(e, highlightedIndex),
-												onKeyUp: withTriggerQuery(props.onKeyUp),
-												autoFocus: props.autoFocus,
-											})}
-											themePreset={props.themePreset}
-											type={props.type}
-											searchBox // a prop specific to Input styled-component
-											// Used to modify styles, is dropdown open or not.
-											isOpen={isOpen || showImageDropdown}
-										/>
-										{!props.expandSuggestionsContainer
-											&& renderSuggestionsDropdown(
-												getRootProps,
-												getInputProps,
-												getItemProps,
-												isOpen,
-												highlightedIndex,
-												setHighlightedIndex,
-												...rest,
-											)}
-									</InputWrapper>
-									<ActionContainer>
-										{renderRightIcons()}
-										{renderInputAddonAfter()}
-										{renderAskButtonElement()}
-										{renderEnterButtonElement()}
-									</ActionContainer>
-								</InputGroup>
+									inputRef={_inputRef}
+									inputProps={getInputProps({
+										className: getClassName(props.innerClass, 'input'),
+										placeholder: props.placeholder,
+										value: Object.hasOwn(props, 'value')
+											? props.value
+											: currentValue || '',
+										onChange: onInputChange,
+										onBlur: withTriggerQuery(props.onBlur),
+										onFocus: handleFocus,
+										onClick: () => {
+											setHighlightedIndex(null);
+										},
+										onKeyPress: withTriggerQuery(props.onKeyPress),
+										onKeyDown: e => handleKeyDown(e, highlightedIndex),
+										onKeyUp: withTriggerQuery(props.onKeyUp),
+										autoFocus: props.autoFocus,
+										id: `${props.componentId}-input`,
+									})}
+									renderLeftIcons={renderLeftIcons}
+									renderInputAddonBefore={renderInputAddonBefore}
+									renderRightIcons={renderRightIcons}
+									renderInputAddonAfter={renderInputAddonAfter}
+									renderAskButtonElement={renderAskButtonElement}
+									renderEnterButtonElement={renderEnterButtonElement}
+									themePreset={props.themePreset}
+									type={props.type}
+									showFocusShortcutsIcon={props.showFocusShortcutsIcon}
+									showVoiceSearch={props.showVoiceSearch}
+									iconPosition={props.iconPosition}
+									showIcon={props.showIcon}
+									showClear={props.showClear}
+									expandSuggestionsContainer={props.expandSuggestionsContainer}
+									renderSuggestionsDropdown={() =>
+										renderSuggestionsDropdown(
+											getRootProps,
+											getInputProps,
+											getItemProps,
+											isOpen,
+											highlightedIndex,
+											setHighlightedIndex,
+											...rest,
+										)
+									}
+								/>
 
 								{showImageDropdown ? (
 									<ImageDropdown
@@ -2355,48 +1988,37 @@ const SearchBox = (props) => {
 				/>
 			) : (
 				<div css={suggestionsContainer}>
-					<InputGroup searchBox ref={_inputGroupRef} isOpen={showImageDropdown}>
-
-						<ActionContainer>
-							{renderLeftIcons()}
-							{renderInputAddonBefore()}
-						</ActionContainer>
-						<InputWrapper>
-							<TextArea
-								aria-label={props.componentId}
-								className={getClassName(props.innerClass, 'input') || null}
-								placeholder={props.placeholder}
-								value={
-									Object.hasOwn(props, 'value') ? props.value : currentValue || ''
-								}
-								ref={_inputRef}
-								onChange={onInputChange}
-								onBlur={withTriggerQuery(props.onBlur)}
-								onFocus={withTriggerQuery(props.onFocus)}
-								onKeyPress={withTriggerQuery(props.onKeyPress)}
-								onKeyDown={handleKeyDown}
-								onKeyUp={withTriggerQuery(props.onKeyUp)}
-								autoFocus={props.autoFocus}
-								iconPosition={props.iconPosition}
-								showIcon={props.showIcon}
-								showClear={props.showClear}
-								themePreset={props.themePreset}
-								type={props.type}
-								showFocusShortcutsIcon={props.showFocusShortcutsIcon}
-								showVoiceSearch={props.showVoiceSearch}
-
-								// Props used to modify styles
-								searchBox
-								isOpen={showImageDropdown}
-							/>
-						</InputWrapper>
-						<ActionContainer>
-							{renderRightIcons()}
-							{renderInputAddonAfter()}
-							{renderAskButtonElement()}
-							{renderEnterButtonElement()}
-						</ActionContainer>
-					</InputGroup>
+					<SearchInput
+						inputGroupRef={_inputGroupRef}
+						isOpen={showImageDropdown}
+						inputRef={_inputRef}
+						inputProps={{
+							'aria-label': props.componentId,
+							className: getClassName(props.innerClass, 'input') || null,
+							placeholder: props.placeholder,
+							value: Object.hasOwn(props, 'value') ? props.value : currentValue || '',
+							onChange: onInputChange,
+							onBlur: withTriggerQuery(props.onBlur),
+							onFocus: withTriggerQuery(props.onFocus),
+							onKeyPress: withTriggerQuery(props.onKeyPress),
+							onKeyDown: handleKeyDown,
+							onKeyUp: withTriggerQuery(props.onKeyUp),
+							autoFocus: props.autoFocus,
+						}}
+						renderLeftIcons={renderLeftIcons}
+						renderInputAddonBefore={renderInputAddonBefore}
+						renderRightIcons={renderRightIcons}
+						renderInputAddonAfter={renderInputAddonAfter}
+						renderAskButtonElement={renderAskButtonElement}
+						renderEnterButtonElement={renderEnterButtonElement}
+						themePreset={props.themePreset}
+						type={props.type}
+						showFocusShortcutsIcon={props.showFocusShortcutsIcon}
+						showVoiceSearch={props.showVoiceSearch}
+						iconPosition={props.iconPosition}
+						showIcon={props.showIcon}
+						showClear={props.showClear}
+					/>
 
 					{showImageDropdown ? <ImageDropdown
 						imageValue={currentImageValue}
diff --git a/packages/web/src/components/search/SearchInput.js b/packages/web/src/components/search/SearchInput.js
new file mode 100644
index 000000000..336f8bc3b
--- /dev/null
+++ b/packages/web/src/components/search/SearchInput.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InputGroup from '../../styles/InputGroup';
+import InputWrapper from '../../styles/InputWrapper';
+import { Actions as ActionContainer, TextArea } from '../../styles/Input';
+
+const SearchInput = ({
+	inputGroupRef,
+	isOpen,
+	inputRef,
+	inputProps,
+	renderLeftIcons,
+	renderInputAddonBefore,
+	renderRightIcons,
+	renderInputAddonAfter,
+	renderAskButtonElement,
+	renderEnterButtonElement,
+	themePreset,
+	type,
+	showFocusShortcutsIcon,
+	showVoiceSearch,
+	iconPosition,
+	showIcon,
+	showClear,
+	renderSuggestionsDropdown,
+	expandSuggestionsContainer,
+}) => (
+	<InputGroup searchBox ref={inputGroupRef} isOpen={isOpen}>
+		<ActionContainer>
+			{renderLeftIcons()}
+			{renderInputAddonBefore()}
+		</ActionContainer>
+		<InputWrapper>
+			<TextArea
+				showFocusShortcutsIcon={showFocusShortcutsIcon}
+				showVoiceSearch={showVoiceSearch}
+				showIcon={showIcon}
+				showClear={showClear}
+				iconPosition={iconPosition}
+				ref={inputRef}
+				themePreset={themePreset}
+				type={type}
+				searchBox
+				isOpen={isOpen}
+				{...inputProps}
+			/>
+			{!expandSuggestionsContainer && renderSuggestionsDropdown && renderSuggestionsDropdown()}
+		</InputWrapper>
+		<ActionContainer>
+			{renderRightIcons()}
+			{renderInputAddonAfter()}
+			{renderAskButtonElement()}
+			{renderEnterButtonElement()}
+		</ActionContainer>
+	</InputGroup>
+);
+
+SearchInput.propTypes = {
+	inputGroupRef: PropTypes.object,
+	isOpen: PropTypes.bool,
+	inputRef: PropTypes.object,
+	inputProps: PropTypes.object.isRequired,
+	renderLeftIcons: PropTypes.func.isRequired,
+	renderInputAddonBefore: PropTypes.func.isRequired,
+	renderRightIcons: PropTypes.func.isRequired,
+	renderInputAddonAfter: PropTypes.func.isRequired,
+	renderAskButtonElement: PropTypes.func.isRequired,
+	renderEnterButtonElement: PropTypes.func.isRequired,
+	themePreset: PropTypes.string,
+	type: PropTypes.string,
+	showFocusShortcutsIcon: PropTypes.bool,
+	showVoiceSearch: PropTypes.bool,
+	iconPosition: PropTypes.string,
+	showIcon: PropTypes.bool,
+	showClear: PropTypes.bool,
+	renderSuggestionsDropdown: PropTypes.func,
+	expandSuggestionsContainer: PropTypes.bool,
+};
+
+export default SearchInput;
diff --git a/packages/web/src/components/search/SuggestionsSection.js b/packages/web/src/components/search/SuggestionsSection.js
new file mode 100644
index 000000000..983dd5006
--- /dev/null
+++ b/packages/web/src/components/search/SuggestionsSection.js
@@ -0,0 +1,221 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import XSS from 'xss';
+import { getClassName } from '@appbaseio/reactivecore/lib/utils/helper';
+import CustomSvg from '../shared/CustomSvg';
+import SuggestionItem from './addons/SuggestionItem';
+import TextWithTooltip from './addons/TextWithTooltip';
+import { FallbackRender } from './addons/FallbackRender';
+import { Suggestion, SuggestionDescription } from '../../styles/Input';
+
+const SuggestionsSection = ({
+	showAIScreen,
+	parsedSuggestions,
+	indexOffset = 0,
+	innerClass,
+	getItemProps,
+	highlightedIndex,
+	renderItem,
+	getIcon,
+	getActionIcon,
+	currentValue,
+	showSuggestionsFooter,
+	SuggestionsFooter,
+	hasSuggestions,
+	renderNoSuggestion,
+}) => {
+	if (showAIScreen) return null;
+
+	const suggestionsList = parsedSuggestions();
+
+	if (!hasSuggestions()) {
+		return renderNoSuggestion(suggestionsList);
+	}
+
+	let localIndexOffset = indexOffset;
+
+	return (
+		<Fragment>
+			{suggestionsList.map((item, itemIndex) => {
+				const index = localIndexOffset + itemIndex;
+				if (Array.isArray(item)) {
+					const sectionHtml = XSS(item[0].sectionLabel);
+					localIndexOffset += item.length - 1;
+					return (
+						<div className="section-container" key={`${item[0].sectionId}`}>
+							{sectionHtml && (
+								<div
+									className={`section-header ${getClassName(
+										innerClass,
+										'section-label',
+									)}`}
+									dangerouslySetInnerHTML={{
+										__html: sectionHtml,
+									}}
+								/>
+							)}
+							<ul className="section-list">
+								{item.map((sectionItem, sectionIndex) => (
+									<li
+										{...getItemProps({
+											item: sectionItem,
+										})}
+										key={`${sectionItem.sectionId + sectionIndex}-${sectionItem.value}`}
+										style={{
+											justifyContent: 'flex-start',
+											alignItems: 'center',
+										}}
+										className={`${
+											highlightedIndex === index + sectionIndex
+												? `active-li-item ${getClassName(
+														innerClass,
+														'active-suggestion-item',
+												  )}`
+												: `li-item ${getClassName(innerClass, 'suggestion-item')}`
+										}`}
+									>
+										<FallbackRender
+											item={typeof renderItem === 'function' ? renderItem(sectionItem) : null}
+										>
+											<React.Fragment>
+												<div
+													style={{
+														padding: '0 10px 0 0',
+														display: 'flex',
+													}}
+												>
+													<CustomSvg
+														iconId={`${sectionIndex + index + 1}-${sectionItem.value}-icon`}
+														className={
+															getClassName(
+																innerClass,
+																`${sectionItem._suggestion_type}-search-icon`,
+															) || null
+														}
+														icon={getIcon(sectionItem._suggestion_type, sectionItem)}
+														type={`${sectionItem._suggestion_type}-search-icon`}
+													/>
+												</div>
+												<Suggestion direction="column">
+													{sectionItem.label && (
+														<TextWithTooltip
+															title={sectionItem.label}
+															className="section-list-item__label"
+															innerHTML={sectionItem.label}
+														/>
+													)}
+													{sectionItem.description && (
+														<SuggestionDescription
+															lines={1}
+															className="section-list-item__description"
+															dangerouslySetInnerHTML={{
+																__html: XSS(sectionItem.description),
+															}}
+														/>
+													)}
+												</Suggestion>
+												{getActionIcon(sectionItem)}
+											</React.Fragment>
+										</FallbackRender>
+									</li>
+								))}
+							</ul>
+						</div>
+					);
+				}
+
+				if (item._suggestion_type === '_internal_a_i_trigger') {
+					return (
+						<li
+							{...getItemProps({ item })}
+							key={`${index + 1}-${item.value}`}
+							style={{
+								justifyContent: 'flex-start',
+								alignItems: 'center',
+							}}
+							className={`${
+								highlightedIndex === index
+									? `active-li-item ${getClassName(
+											innerClass,
+											'active-suggestion-item',
+									  )}`
+									: `li-item ${getClassName(innerClass, 'suggestion-item')}`
+							}`}
+						>
+							<FallbackRender
+								item={typeof renderItem === 'function' ? renderItem(item) : null}
+							>
+								<React.Fragment>
+									<SuggestionItem currentValue={currentValue || ''} suggestion={item} />
+								</React.Fragment>
+							</FallbackRender>
+						</li>
+					);
+				}
+				return (
+					<li
+						{...getItemProps({ item })}
+						key={`${index + 1}-${item.value}`}
+						style={{
+							justifyContent: 'flex-start',
+							alignItems: 'center',
+						}}
+						className={`${
+							highlightedIndex === index
+								? `active-li-item ${getClassName(
+										innerClass,
+										'active-suggestion-item',
+								  )}`
+								: `li-item ${getClassName(innerClass, 'suggestion-item')}`
+						}`}
+					>
+						<FallbackRender
+							item={typeof renderItem === 'function' ? renderItem(item) : null}
+						>
+							<React.Fragment>
+								<div
+									style={{
+										padding: '0 10px 0 0',
+										display: 'flex',
+									}}
+								>
+									<CustomSvg
+										iconId={`${index + 1}-${item.value}-icon`}
+										className={
+											getClassName(innerClass, `${item._suggestion_type}-search-icon`) || null
+										}
+										icon={getIcon(item._suggestion_type, item)}
+										type={`${item._suggestion_type}-search-icon`}
+									/>
+								</div>
+								<SuggestionItem currentValue={currentValue || ''} suggestion={item} />
+								{getActionIcon(item)}
+							</React.Fragment>
+						</FallbackRender>
+					</li>
+				);
+			})}
+
+			{showSuggestionsFooter ? <SuggestionsFooter /> : null}
+		</Fragment>
+	);
+};
+
+SuggestionsSection.propTypes = {
+	showAIScreen: PropTypes.bool.isRequired,
+	parsedSuggestions: PropTypes.func.isRequired,
+	indexOffset: PropTypes.number,
+	innerClass: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+	getItemProps: PropTypes.func.isRequired,
+	highlightedIndex: PropTypes.number,
+	renderItem: PropTypes.func,
+	getIcon: PropTypes.func.isRequired,
+	getActionIcon: PropTypes.func.isRequired,
+	currentValue: PropTypes.string,
+	showSuggestionsFooter: PropTypes.bool.isRequired,
+	SuggestionsFooter: PropTypes.func.isRequired,
+	hasSuggestions: PropTypes.func.isRequired,
+	renderNoSuggestion: PropTypes.func.isRequired,
+};
+
+export default SuggestionsSection;
diff --git a/packages/web/src/utils/index.js b/packages/web/src/utils/index.js
index 7e58cce37..99d3368af 100644
--- a/packages/web/src/utils/index.js
+++ b/packages/web/src/utils/index.js
@@ -231,3 +231,17 @@ export function useAnalytics() {
 	const ctx = useContext(ReactReduxContext);
 	return ctx && ctx.storeState.analyticsRef;
 }
+
+export function sanitizeImageUrl(url) {
+	if (!url) return null;
+	try {
+		const parsed = new URL(url, 'http://localhost');
+		if (parsed.protocol === 'http:' || parsed.protocol === 'https:' || parsed.protocol === 'data:') {
+			return url;
+		}
+	} catch (e) {
+		/* invalid URL */
+	}
+	return null;
+}
+