diff --git a/apps/client/app/components/layout/header/index.tsx b/apps/client/app/components/layout/header/index.tsx
index 8305bb83..44b05b7d 100644
--- a/apps/client/app/components/layout/header/index.tsx
+++ b/apps/client/app/components/layout/header/index.tsx
@@ -9,6 +9,7 @@ import { UserAccountMobileNav, UserAccountNav } from './user-account/index.tsx'
 import { Button } from '@/components/button/index.tsx'
 import { APP_NAME, PAGES } from '@/constants/index.ts'
 import useScroll from '@/hooks/use-scroll.ts'
+import { classNames } from '@/lib/classNames.ts'
 import { useAuth } from '@/providers/auth/index.tsx'
 
 const navigation = (isLoggedIn: boolean) => [
@@ -26,27 +27,28 @@ const navigation = (isLoggedIn: boolean) => [
 interface Props {
 	isHeroSearchInVisible: boolean
 	shouldHeaderBlur?: boolean
+	searchQuery?: string
 }
 
 export const Header = ({
 	isHeroSearchInVisible,
 	shouldHeaderBlur = true,
+	searchQuery,
 }: Props) => {
 	const { isLoggedIn } = useAuth()
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 	const scrolled = useScroll(50)
 
 	const headerBlurred = shouldHeaderBlur
-		? 'bg-white/95 backdrop-blur-xl sticky top-0 z-50'
-		: 'sticky top-0 z-50 bg-white'
+		? 'bg-white/95 backdrop-blur-xl sticky top-0 z-50 shadow-lg'
+		: 'sticky top-0 z-50 bg-white '
 
 	return (
 		<header
-			className={
-				isHeroSearchInVisible
-					? undefined
-					: `${scrolled ? headerBlurred : 'sticky top-0 z-50 bg-white'}`
-			}
+			className={classNames({
+				[headerBlurred]: !isHeroSearchInVisible && scrolled,
+				'z sticky top-0 z-50 bg-white': !isHeroSearchInVisible && !scrolled,
+			})}
 		>
 			<NoticeBanner />
 			<nav
@@ -62,7 +64,9 @@ export const Header = ({
 					</div>
 				</Link>
 				<div className="mx-8 hidden h-11 flex-grow md:flex">
-					{isHeroSearchInVisible ? null : <SearchPhotos />}
+					{isHeroSearchInVisible ? null : (
+						<SearchPhotos searchQuery={searchQuery} />
+					)}
 				</div>
 				<div className="flex lg:hidden">
 					<button
@@ -103,7 +107,7 @@ export const Header = ({
 			</nav>
 			{isHeroSearchInVisible ? null : (
 				<div className="mx-4 pb-4 md:pb-0">
-					<SearchPhotosForMobile />
+					<SearchPhotosForMobile searchQuery={searchQuery} />
 				</div>
 			)}
 			<Dialog
diff --git a/apps/client/app/components/layout/header/search-for-mobile/index.tsx b/apps/client/app/components/layout/header/search-for-mobile/index.tsx
index 810890be..cf0f3a34 100644
--- a/apps/client/app/components/layout/header/search-for-mobile/index.tsx
+++ b/apps/client/app/components/layout/header/search-for-mobile/index.tsx
@@ -1,16 +1,17 @@
-import { Transition, Dialog } from '@headlessui/react'
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import {
 	MagnifyingGlassIcon,
 	ViewfinderCircleIcon,
 } from '@heroicons/react/24/outline'
-import { XMarkIcon } from '@heroicons/react/24/solid'
-import { Fragment, useState } from 'react'
-import { TextSearch } from '../search/text/index.tsx'
+import { useState } from 'react'
+import { SearchPalette } from '../search/search-palette/index.tsx'
 import { VisualSearch } from '../search/visual/index.tsx'
 import { Button } from '@/components/button/index.tsx'
 
 interface Props {
 	onClose: VoidFunction
+	isOpened: boolean
+	searchQuery?: string
 }
 
 const MENUS = {
@@ -18,97 +19,104 @@ const MENUS = {
 	VISUAL_SEARCH: 'VISUAL_SEARCH',
 }
 
-const SearchModal = ({ onClose }: Props) => {
-	const [activeMenu, setActiveMenu] = useState(MENUS.TEXT_SEARCH)
+const SearchModal = ({ isOpened, onClose, searchQuery }: Props) => {
+	const [activeMenu, setActiveMenu] = useState<string>('')
 
 	return (
-		<div className="py-2">
-			<div className="flex flex-row items-center justify-between px-3">
-				<div />
-				<div>
-					<div className="flex flex-row items-center rounded-lg bg-zinc-100">
-						<button
-							onClick={() => setActiveMenu(MENUS.TEXT_SEARCH)}
-							type="button"
-							className={`p-4 ${
-								activeMenu === MENUS.TEXT_SEARCH
-									? 'rounded-l-lg bg-zinc-300'
-									: ''
-							} `}
+		<Dialog
+			className="relative z-50"
+			open={isOpened}
+			onClose={() => {
+				onClose()
+				setActiveMenu('')
+			}}
+		>
+			<DialogBackdrop
+				transition
+				className="fixed inset-0 bg-black/20 backdrop-blur-sm transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+			/>
+
+			<div className="fixed inset-0 z-10 flex w-screen flex-col justify-center overflow-y-auto p-4 sm:p-6 md:p-20">
+				{activeMenu === MENUS.VISUAL_SEARCH ? (
+					<DialogPanel
+						transition
+						className="mx-auto w-auto transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-zinc-100 p-3 shadow-2xl ring-1 ring-black/5 transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+					>
+						<VisualSearch />
+					</DialogPanel>
+				) : null}
+
+				{activeMenu === MENUS.TEXT_SEARCH ? (
+					<SearchPalette
+						isOpened={true}
+						onClose={() => {
+							onClose()
+							setActiveMenu('')
+						}}
+						searchQuery={searchQuery}
+					/>
+				) : null}
+
+				{activeMenu === '' ? (
+					<>
+						<DialogPanel
+							transition
+							className="mx-auto flex w-auto transform items-center justify-center divide-y divide-gray-100 overflow-hidden rounded-xl bg-zinc-100 shadow-2xl ring-1 ring-black/5 transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
 						>
-							<MagnifyingGlassIcon className="h-5 w-5" />
-						</button>
-						<button
-							onClick={() => setActiveMenu(MENUS.VISUAL_SEARCH)}
-							type="button"
-							className={`p-4 ${
-								activeMenu === MENUS.VISUAL_SEARCH
-									? 'rounded-r-lg bg-zinc-300'
-									: ''
-							} `}
+							<button
+								onClick={() => setActiveMenu(MENUS.TEXT_SEARCH)}
+								type="button"
+								className={`mx-10 p-4`}
+							>
+								<MagnifyingGlassIcon className="size-32 text-zinc-400" />
+								<h1 className="text-lg font-bold">Textual Search</h1>
+							</button>
+						</DialogPanel>
+						<DialogPanel
+							transition
+							className="mx-auto mt-5 flex w-auto transform items-center justify-center divide-y divide-gray-100 overflow-hidden rounded-xl bg-zinc-100 shadow-2xl ring-1 ring-black/5 transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
 						>
-							<ViewfinderCircleIcon className="h-5 w-5" />
-						</button>
-					</div>
-				</div>
-				<Button onClick={onClose} variant="unstyled">
-					<XMarkIcon className="h-7 w-7 text-zinc-600" />
-				</Button>
+							<button
+								onClick={() => setActiveMenu(MENUS.VISUAL_SEARCH)}
+								type="button"
+								className={`mx-10 p-4`}
+							>
+								<ViewfinderCircleIcon className="size-32 text-zinc-400" />
+								<h1 className="text-lg font-bold">Visual Search</h1>
+							</button>
+						</DialogPanel>
+					</>
+				) : null}
 			</div>
-
-			{activeMenu === MENUS.TEXT_SEARCH ? (
-				<>
-					<div className="mt-5">
-						<input
-							type="text"
-							className="w-full rounded-md border-none bg-zinc-100 py-3 text-gray-900 placeholder:text-gray-500 focus:ring-0"
-							placeholder="Search for photos"
-						/>
-					</div>
-					<div className="-mx-2 mt-5 h-[58vh] overflow-y-scroll px-2">
-						<TextSearch />
-					</div>
-				</>
-			) : null}
-
-			{activeMenu === MENUS.VISUAL_SEARCH ? <VisualSearch /> : null}
-		</div>
+		</Dialog>
 	)
 }
 
-export const SearchPhotosForMobile = () => {
+interface SearchPhotosForMobileProps {
+	searchQuery?: string
+}
+
+export const SearchPhotosForMobile = ({
+	searchQuery,
+}: SearchPhotosForMobileProps) => {
 	const [isSearchFocused, setIsSearchFocused] = useState(false)
 
 	return (
 		<>
 			<div className="flex md:hidden">
 				<Button
-					variant="unstyled"
+					variant="outlined"
 					onClick={() => setIsSearchFocused(true)}
-					className="flex-start block flex w-full items-center rounded-full border border-zinc-400 bg-white px-5 py-2 text-base font-medium text-gray-400"
+					className="flex-start flex w-full items-center justify-start rounded-full px-5 py-3 text-base font-medium text-gray-400"
 				>
 					<MagnifyingGlassIcon className="mr-3 h-5 w-5 text-zinc-400" />
-					Search for photos
+					{searchQuery ?? 'Search for photos'}
 				</Button>
 			</div>
-			<Transition show={isSearchFocused} as={Fragment}>
-				<Dialog onClose={() => setIsSearchFocused(false)} className="">
-					<div className="fixed inset-0 bg-black/50" aria-hidden="true" />
-					<Transition.Child
-						as={Fragment}
-						enter="transition ease-out duration-200"
-						enterFrom="opacity-0 translate-y-1"
-						enterTo="opacity-100 translate-y-0"
-						leave="transition ease-in duration-150"
-						leaveFrom="opacity-100 translate-y-0"
-						leaveTo="opacity-0 translate-y-1"
-					>
-						<div className="absolute bottom-0 z-50 mt-2 h-[80vh] w-screen overflow-hidden rounded-lg rounded-t-xl border border-zinc-200 bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
-							<SearchModal onClose={() => setIsSearchFocused(false)} />
-						</div>
-					</Transition.Child>
-				</Dialog>
-			</Transition>
+			<SearchModal
+				isOpened={isSearchFocused}
+				onClose={() => setIsSearchFocused(false)}
+			/>
 		</>
 	)
 }
diff --git a/apps/client/app/components/layout/header/search/index.tsx b/apps/client/app/components/layout/header/search/index.tsx
index 9d95770b..4769510c 100644
--- a/apps/client/app/components/layout/header/search/index.tsx
+++ b/apps/client/app/components/layout/header/search/index.tsx
@@ -1,20 +1,21 @@
 import { Transition, Popover } from '@headlessui/react'
 import {
 	MagnifyingGlassIcon,
-	XMarkIcon,
 	ViewfinderCircleIcon,
 } from '@heroicons/react/24/outline'
 import { Fragment, useState } from 'react'
-import { TextSearch } from './text/index.tsx'
+import { SearchPalette } from './search-palette/index.tsx'
 import { VisualSearch } from './visual/index.tsx'
-import { Button } from '@/components/button/index.tsx'
 
 interface Props {
 	isSittingOnADarkBackground?: true
+	searchQuery?: string
 }
 
-export const SearchPhotos = ({ isSittingOnADarkBackground }: Props) => {
-	const [query, setQuery] = useState('')
+export const SearchPhotos = ({
+	isSittingOnADarkBackground,
+	searchQuery,
+}: Props) => {
 	const [isSearchFocused, setIsSearchFocused] = useState(false)
 
 	return (
@@ -33,45 +34,22 @@ export const SearchPhotos = ({ isSittingOnADarkBackground }: Props) => {
 					/>
 				</div>
 				<div className="flex-grow">
-					<input
-						type="text"
-						onFocus={() => setIsSearchFocused(true)}
-						onBlur={() => setIsSearchFocused(false)}
-						value={query}
-						onChange={(e) => setQuery(e.target.value)}
-						className="w-full border-none bg-transparent py-2.5 text-gray-900 placeholder:text-gray-500 focus:ring-0"
-						placeholder="Search for photos"
-					/>
-					<Transition
-						as={Fragment}
-						show={isSearchFocused}
-						enter="transition ease-out duration-200"
-						enterFrom="opacity-0 translate-y-1"
-						enterTo="opacity-100 translate-y-0"
-						leave="transition ease-in duration-150"
-						leaveFrom="opacity-100 translate-y-0"
-						leaveTo="opacity-0 translate-y-1"
+					<div
+						onClick={() => setIsSearchFocused(true)}
+						className="flex h-11 w-full cursor-text items-center border-none bg-transparent py-2.5 pl-3 text-gray-900 placeholder:text-gray-500 focus:ring-0"
 					>
-						<div className="absolute left-2 top-full z-40 mt-2 w-[45vw] overflow-hidden rounded-lg bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
-							<TextSearch />
-						</div>
-					</Transition>
+						<span className="text-zinc-500">
+							{searchQuery ?? 'Search for photos'}
+						</span>
+					</div>
+					<SearchPalette
+						searchQuery={searchQuery}
+						isOpened={isSearchFocused}
+						onClose={() => setIsSearchFocused(false)}
+					/>
 				</div>
 
 				<div className="inset-y-0 right-0 flex items-center pr-6">
-					{query.length ? (
-						<Button
-							variant="unstyled"
-							type="button"
-							onClick={() => setQuery('')}
-							className="mr-4 border-r border-zinc-400"
-						>
-							<XMarkIcon
-								className="h-5 w-5 cursor-pointer text-gray-600"
-								aria-hidden="true"
-							/>
-						</Button>
-					) : null}
 					<Popover className="relative">
 						<Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900 outline-none ring-0">
 							<ViewfinderCircleIcon
@@ -89,7 +67,7 @@ export const SearchPhotos = ({ isSittingOnADarkBackground }: Props) => {
 							leaveFrom="opacity-100 translate-y-0"
 							leaveTo="opacity-0 translate-y-1"
 						>
-							<Popover.Panel className="absolute right-1 top-full z-30 mt-5 w-screen max-w-md overflow-hidden rounded-lg bg-white p-3 shadow-lg ring-1 ring-gray-900/5">
+							<Popover.Panel className="absolute right-1 top-full z-30 mt-5 w-screen max-w-md overflow-hidden rounded-lg bg-white p-5 shadow-lg ring-1 ring-gray-900/5">
 								<VisualSearch />
 							</Popover.Panel>
 						</Transition>
diff --git a/apps/client/app/components/layout/header/search/search-palette/index.tsx b/apps/client/app/components/layout/header/search/search-palette/index.tsx
new file mode 100644
index 00000000..fc8c04b0
--- /dev/null
+++ b/apps/client/app/components/layout/header/search/search-palette/index.tsx
@@ -0,0 +1,231 @@
+import {
+	Combobox,
+	ComboboxInput,
+	Dialog,
+	DialogPanel,
+	DialogBackdrop,
+} from '@headlessui/react'
+import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import * as outline from '@heroicons/react/24/outline'
+import { useNavigate } from '@remix-run/react'
+import { useState } from 'react'
+import { Button } from '@/components/button/index.tsx'
+import { classNames } from '@/lib/classNames.ts'
+
+interface Props {
+	isOpened: boolean
+	onClose: () => void
+	searchQuery?: string
+}
+
+export function SearchPalette({ isOpened, onClose, searchQuery }: Props) {
+	const [rawQuery, setRawQuery] = useState(() => searchQuery ?? '')
+	const navigate = useNavigate()
+
+	return (
+		<Dialog
+			className="relative z-50"
+			open={isOpened}
+			onClose={() => {
+				onClose()
+				setRawQuery('')
+			}}
+		>
+			<DialogBackdrop
+				transition
+				className="fixed inset-0 bg-black/20 backdrop-blur-sm transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+			/>
+
+			<div className="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
+				<div className="my-3 flex justify-center md:hidden">
+					<Button
+						onClick={() => {
+							onClose()
+							setRawQuery('')
+						}}
+						variant="unstyled"
+						className="rounded-full bg-gray-100 p-2 outline outline-white"
+					>
+						<XMarkIcon className="h-6 w-6" />
+					</Button>
+				</div>
+				<DialogPanel
+					transition
+					className="mx-auto transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl outline outline-2 outline-offset-1 outline-blue-300 ring-1 ring-black/5 transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in md:w-5/6 lg:w-4/6"
+				>
+					<Combobox>
+						<div className="m-1 grid grid-cols-1">
+							<ComboboxInput
+								autoFocus
+								className="col-start-1 row-start-1 h-12 w-full border-0 pl-11 pr-4 text-base text-gray-900 outline-none outline-0 placeholder:text-gray-400 sm:text-sm"
+								placeholder="Search..."
+								value={rawQuery}
+								onChange={(event) => setRawQuery(event.target.value)}
+								onKeyUp={(event) => {
+									event.preventDefault()
+									if (event.key === 'Escape') {
+										onClose()
+									}
+									if (event.key === 'Enter' && rawQuery.trim().length) {
+										onClose()
+										navigate(`/search/photos/${rawQuery}`)
+									}
+								}}
+								onBlur={() => setRawQuery('')}
+							/>
+							<MagnifyingGlassIcon
+								className="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
+								aria-hidden="true"
+							/>
+						</div>
+
+						{rawQuery === '?' && (
+							<div className="px-6 py-14 text-center text-sm sm:px-14">
+								<outline.LifebuoyIcon
+									className="mx-auto size-6 text-gray-400"
+									aria-hidden="true"
+								/>
+								<p className="mt-4 font-semibold text-gray-900">
+									Help with searching
+								</p>
+								<p className="mt-2 text-gray-500">
+									Use this tool to quickly search for photos, collections and
+									creators across our entire platform. The search modifiers
+									found in the footer below will help you to navigate how to
+									make use of this search tool.
+								</p>
+							</div>
+						)}
+
+						<div className="flex flex-wrap items-center bg-blue-50 px-4 py-2.5 text-xs text-gray-700">
+							Type{' '}
+							<kbd
+								className={classNames(
+									'mx-1 flex size-5 items-center justify-center rounded border bg-white font-semibold sm:mx-2',
+									rawQuery === '?'
+										? 'border-indigo-600 text-indigo-600'
+										: 'border-gray-400 text-gray-900',
+								)}
+							>
+								?
+							</kbd>{' '}
+							for help,
+							<kbd
+								className={classNames(
+									'mx-1 flex h-5 w-8 items-center justify-center rounded border bg-white font-semibold sm:mx-2',
+									rawQuery.startsWith('#')
+										? 'border-indigo-600 text-indigo-600'
+										: 'border-gray-400 text-gray-900',
+								)}
+							>
+								Esc
+							</kbd>{' '}
+							<span>to close and</span>
+							<kbd
+								className={classNames(
+									'mx-1 flex h-5 w-11 items-center justify-center rounded border bg-white font-semibold sm:mx-2',
+									rawQuery.startsWith('>')
+										? 'border-indigo-600 text-indigo-600'
+										: 'border-gray-400 text-gray-900',
+								)}
+							>
+								Enter
+							</kbd>{' '}
+							to initiate search.
+						</div>
+					</Combobox>
+				</DialogPanel>
+				<DialogPanel
+					transition
+					className="mx-auto mt-5 transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white p-3 shadow-2xl ring-1 ring-black/5 transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in md:w-5/6 lg:w-4/6"
+				>
+					<div>
+						<div className="flex flex-row items-center justify-between">
+							<h1 className="text-base font-bold md:text-lg">
+								Recent Searches
+							</h1>
+							<Button
+								variant="unstyled"
+								className="text-sm text-zinc-400 hover:underline"
+							>
+								Clear
+							</Button>
+						</div>
+						<div className="mt-4 flex flex-row flex-wrap items-center gap-3">
+							{[
+								'Nature',
+								'People',
+								'Food',
+								'Animals',
+								'Architecture',
+								'Interiors',
+								'Current Events',
+								'Business & Work',
+							].map((item, index) => (
+								<Button size="sm" key={index} variant="outlined">
+									<div className="font-base flex flex-row items-center text-gray-600">
+										{' '}
+										<MagnifyingGlassIcon className="mr-2 h-3 w-3" /> {item}
+									</div>
+								</Button>
+							))}
+						</div>
+					</div>
+					<div className="mt-5">
+						<div className="mt-5 flex flex-row items-center justify-between">
+							<h1 className="text-base font-bold md:text-lg">
+								🚀 Trending Collections
+							</h1>
+						</div>
+						<div className="mt-4 flex flex-row flex-wrap items-center gap-3">
+							{[
+								'Nature',
+								'People',
+								'Food',
+								'Animals',
+								'Architecture',
+								'Interiors',
+								'Current Events',
+								'Business & Work',
+							].map((item, index) => (
+								<Button size="sm" key={index} variant="outlined">
+									<div className="flex flex-row items-center">
+										{' '}
+										<outline.ArrowTrendingUpIcon className="mr-2 h-5 w-5" />{' '}
+										{item}
+									</div>
+								</Button>
+							))}
+						</div>
+					</div>
+					<div className="mt-5">
+						<div className="mt-5 flex flex-row items-center justify-between">
+							<h1 className="text-base font-bold md:text-lg">
+								Popular Tags 🔥
+							</h1>
+						</div>
+						<div className="mt-4 flex flex-row flex-wrap items-center gap-3">
+							{[
+								'Nature',
+								'People',
+								'Food',
+								'Animals',
+								'Architecture',
+								'Interiors',
+								'Current Events',
+								'Business & Work',
+							].map((item, index) => (
+								<Button key={index} variant="outlined">
+									<div className="flex flex-row items-center">
+										<outline.RectangleGroupIcon className="mr-2 h-5 w-5" />{' '}
+										{item}
+									</div>
+								</Button>
+							))}
+						</div>
+					</div>
+				</DialogPanel>
+			</div>
+		</Dialog>
+	)
+}
diff --git a/apps/client/app/components/layout/header/search/visual/index.tsx b/apps/client/app/components/layout/header/search/visual/index.tsx
index d0bbe99e..d87a36d3 100644
--- a/apps/client/app/components/layout/header/search/visual/index.tsx
+++ b/apps/client/app/components/layout/header/search/visual/index.tsx
@@ -30,7 +30,7 @@ export const VisualSearch = () => {
 					<span>Need Help?</span>
 				</Button>
 			</div>
-			<div className="lg:[44vh] 2xl:[15vh] relative h-[55vh] bg-gray-50 p-3 md:h-[48vh]">
+			<div className="h-full bg-gray-50 p-3">
 				<div className="rounded-md p-1">
 					{imgSrc ? (
 						<Image
@@ -49,25 +49,17 @@ export const VisualSearch = () => {
 							/>
 						</Fragment>
 					)}
-					{imgSrc ? (
-						<Button
-							variant="solid"
-							type="button"
-							onClick={handleRetake}
-							className="absolute bottom-0 z-30 mt-2"
-						>
-							Retake
-						</Button>
-					) : (
-						<Button
-							variant="solid"
-							type="button"
-							onClick={handleCapture}
-							className="absolute bottom-0 z-30 mt-2"
-						>
-							Capture
-						</Button>
-					)}
+					<div className="mt-5">
+						{imgSrc ? (
+							<Button variant="solid" type="button" onClick={handleRetake}>
+								Retake
+							</Button>
+						) : (
+							<Button variant="solid" type="button" onClick={handleCapture}>
+								Capture
+							</Button>
+						)}
+					</div>
 				</div>
 			</div>
 		</>
diff --git a/apps/client/app/modules/landing-page/components/hero-section/index.tsx b/apps/client/app/modules/landing-page/components/hero-section/index.tsx
index 3eb20540..49f87a05 100644
--- a/apps/client/app/modules/landing-page/components/hero-section/index.tsx
+++ b/apps/client/app/modules/landing-page/components/hero-section/index.tsx
@@ -15,7 +15,7 @@ export const HeroSection = () => {
 				backgroundSize: 'cover',
 				backgroundPosition: 'left',
 			}}
-			className="h-[60vh] bg-gradient-to-r from-sky-500 to-indigo-500"
+			className="h-[40vh] bg-gradient-to-r from-sky-500 to-indigo-500 lg:h-[30vh] xl:h-[50vh]"
 		>
 			<Header isHeroSearchInVisible={true} />
 			<FadeIn className="px-6 pt-14 lg:px-8">
diff --git a/apps/client/app/modules/search/creators/index.tsx b/apps/client/app/modules/search/creators/index.tsx
index 1a19c37d..c57da230 100644
--- a/apps/client/app/modules/search/creators/index.tsx
+++ b/apps/client/app/modules/search/creators/index.tsx
@@ -1,20 +1,50 @@
 import { useParams } from '@remix-run/react'
+import { useGetCollectionContentsBySlug } from '@/api/collections/index.ts'
 import { EmptyState } from '@/components/empty-state/index.tsx'
 import { NoSearchResultLottie } from '@/components/lotties/no-search-results.tsx'
+import { CreatorSection } from '@/modules/explore/components/section/creator-section.tsx'
 
 export function SearchCreatorsModule() {
 	const { query: queryParam } = useParams()
+
+	const { data: featuredCreators } = useGetCollectionContentsBySlug({
+		slug: 'featured_creators',
+		query: {
+			pagination: { page: 0, per: 10 },
+			filters: {},
+			populate: ['creator'],
+		},
+	})
+
 	return (
-		<div className="flex h-[50vh] flex-1 items-center justify-center">
-			<EmptyState
-				message={`There are no creators found under "${queryParam}". Adjust your search query.`}
-				title="Search results is empty"
-				svg={
-					<div className="mb-5">
-						<NoSearchResultLottie />
+		<div className="mt-5">
+			{featuredCreators?.total ? (
+				<>
+					<div className="flex flex-row items-center justify-between gap-x-2">
+						<h2 className="flex items-center text-xl font-bold">Featured</h2>
 					</div>
-				}
-			/>
+					<div className="no-scrollbar mt-3 flex w-full items-center gap-8 overflow-x-auto">
+						{featuredCreators.rows.map((collectionContent) => (
+							<CreatorSection
+								key={collectionContent.id}
+								data={collectionContent.creator as EnhancedCreator}
+							/>
+						))}
+					</div>
+				</>
+			) : null}
+
+			<div className="flex h-[40vh] flex-1 items-center justify-center">
+				<EmptyState
+					message={`There are no creators found under "${queryParam}". Adjust your search query.`}
+					title="Search results is empty"
+					svg={
+						<div className="mb-5">
+							<NoSearchResultLottie />
+						</div>
+					}
+				/>
+			</div>
 		</div>
 	)
 }
diff --git a/apps/client/app/modules/search/index.tsx b/apps/client/app/modules/search/index.tsx
index 8e9edc3b..c6e5714d 100644
--- a/apps/client/app/modules/search/index.tsx
+++ b/apps/client/app/modules/search/index.tsx
@@ -33,8 +33,9 @@ export function SearchModule() {
 				href: PAGES.SEARCH.PHOTOS.replace(':query', safeString(queryParam)),
 				icon: PhotoIcon,
 				current:
-					PAGES.SEARCH.PHOTOS.replace(':query', safeString(queryParam)) ===
-					location.pathname,
+					encodeURI(
+						PAGES.SEARCH.PHOTOS.replace(':query', safeString(queryParam)),
+					) === location.pathname,
 			},
 			{
 				name: 'Collections',
@@ -44,16 +45,18 @@ export function SearchModule() {
 				),
 				icon: FolderIcon,
 				current:
-					PAGES.SEARCH.COLLECTIONS.replace(':query', safeString(queryParam)) ===
-					location.pathname,
+					encodeURI(
+						PAGES.SEARCH.COLLECTIONS.replace(':query', safeString(queryParam)),
+					) === location.pathname,
 			},
 			{
 				name: 'Creators',
 				href: PAGES.SEARCH.CREATORS.replace(':query', safeString(queryParam)),
 				icon: UsersIcon,
 				current:
-					PAGES.SEARCH.CREATORS.replace(':query', safeString(queryParam)) ===
-					location.pathname,
+					encodeURI(
+						PAGES.SEARCH.CREATORS.replace(':query', safeString(queryParam)),
+					) === location.pathname,
 			},
 		],
 		[location.pathname, queryParam],
@@ -72,7 +75,7 @@ export function SearchModule() {
 
 	return (
 		<>
-			<Header isHeroSearchInVisible={false} />
+			<Header isHeroSearchInVisible={false} searchQuery={queryParam} />
 			<div className="max-w-8xl mx-auto px-4 lg:px-8">
 				<div>
 					<div className="">
@@ -101,7 +104,7 @@ export function SearchModule() {
 											)}
 										/>
 										<span>{tab.name}</span>
-										<span
+										{/* <span
 											className={classNames(
 												tab.current
 													? 'bg-blue-100 text-blue-600'
@@ -110,7 +113,7 @@ export function SearchModule() {
 											)}
 										>
 											1k
-										</span>
+										</span> */}
 									</Link>
 								))}
 							</nav>
@@ -132,19 +135,19 @@ export function SearchModule() {
 						</div>
 					</div>
 				</div>
-				<div className="mt-5 flex justify-end lg:hidden">
-					<Button
-						onClick={filterModalState.onOpen}
-						size="sm"
-						color="secondaryGhost"
-					>
-						<AdjustmentsHorizontalIcon className="mr-2 h-auto w-5" /> Filters{' '}
-						{searchParams.size > 0 ? `(${searchParams.size})` : ''}
-					</Button>
-				</div>
-				<div className="mt-3">
-					<h1 className="text-2xl font-black">{queryParam}</h1>
-				</div>
+				{activeTab === 'Photos' ? (
+					<div className="mt-5 flex justify-end lg:hidden">
+						<Button
+							onClick={filterModalState.onOpen}
+							size="sm"
+							color="secondaryGhost"
+						>
+							<AdjustmentsHorizontalIcon className="mr-2 h-auto w-5" /> Filters{' '}
+							{searchParams.size > 0 ? `(${searchParams.size})` : ''}
+						</Button>
+					</div>
+				) : null}
+
 				<Outlet />
 			</div>
 			<Footer />
diff --git a/apps/client/app/routes/search.creators.$query.ts b/apps/client/app/routes/search.creators.$query.ts
index 1dd8f7f9..fbcd0f0c 100644
--- a/apps/client/app/routes/search.creators.$query.ts
+++ b/apps/client/app/routes/search.creators.$query.ts
@@ -1,4 +1,10 @@
-import { type MetaFunction } from '@remix-run/node'
+import { type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node'
+import { dehydrate, QueryClient } from '@tanstack/react-query'
+import { getCollectionContentsBySlug } from '@/api/collections/index.ts'
+import { QUERY_KEYS } from '@/constants/index.ts'
+import { environmentVariables } from '@/lib/actions/env.server.ts'
+import { extractAuthCookie } from '@/lib/actions/extract-auth-cookie.ts'
+import { jsonWithCache } from '@/lib/actions/json-with-cache.server.ts'
 import { SearchCreatorsModule } from '@/modules/index.ts'
 
 export const meta: MetaFunction = () => {
@@ -12,4 +18,39 @@ export const meta: MetaFunction = () => {
 	]
 }
 
+export async function loader(loaderArgs: LoaderFunctionArgs) {
+	const queryClient = new QueryClient()
+
+	const authCookie = await extractAuthCookie(
+		loaderArgs.request.headers.get('cookie'),
+	)
+
+	const baseUrl = `${environmentVariables().API_ADDRESS}/api`
+
+	const query = {
+		pagination: { page: 0, per: 10 },
+		filters: {},
+		populate: ['creator'],
+	}
+
+	await queryClient.prefetchQuery({
+		queryKey: [
+			QUERY_KEYS.COLLECTIONS,
+			'featured_creators',
+			'slug-contents',
+			query,
+		],
+		queryFn: () =>
+			getCollectionContentsBySlug('featured_creators', query, {
+				authToken: authCookie?.token,
+				baseUrl,
+			}),
+	})
+
+	const dehydratedState = dehydrate(queryClient)
+	return jsonWithCache({
+		dehydratedState,
+	})
+}
+
 export default SearchCreatorsModule