diff --git a/packages/snap-preact/components/.storybook/preview.tsx b/packages/snap-preact/components/.storybook/preview.tsx
index 591313117..5b998c134 100644
--- a/packages/snap-preact/components/.storybook/preview.tsx
+++ b/packages/snap-preact/components/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 import { ThemeProvider } from '../src/providers/theme';
-import { bocachica, pike } from '../src/themes';
+import { bocachica } from '../src/themes';
 
 // custom styles for storybook
 import './styles.scss';
@@ -11,7 +11,6 @@ export const decorators = [
 	withThemeFromJSXProvider({
 		themes: {
 			bocachica: bocachica,
-			pike: pike,
 			none: {},
 		},
 		defaultTheme: 'bocachica',
diff --git a/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx b/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx
index 42b1153cb..bcac7a8ab 100644
--- a/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx
+++ b/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx
@@ -3,7 +3,7 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks';
 
 import { Icon, IconProps } from './Icon';
-import { iconPaths } from './paths';
+import { iconPaths, IconType } from './paths';
 import { componentArgs, highlightedCode } from '../../../utilities';
 import Readme from '../Icon/readme.md';
 
@@ -150,7 +150,7 @@ export const Gallery = (): JSX.Element => {
 			{Object.keys(iconPaths).map((icon) => {
 				return (
 					<div style={{ marginBottom: '40px' }}>
-						<Icon icon={icon as keyof typeof iconPaths} size="40px" style={{ padding: '20px' }} />
+						<Icon icon={icon as IconType} size="40px" style={{ padding: '20px' }} />
 						<div style={{ textAlign: 'center' }}>{icon}</div>
 					</div>
 				);
diff --git a/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx b/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx
index 9c4c70851..d3674431d 100644
--- a/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx
+++ b/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx
@@ -3,7 +3,7 @@ import { h } from 'preact';
 import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks';
 
 import { Carousel, CarouselProps } from './Carousel';
-import { Icon, iconPaths } from '../../Atoms/Icon';
+import { Icon, iconPaths, IconType } from '../../Atoms/Icon';
 import { componentArgs, shiftColor, highlightedCode } from '../../../utilities';
 import Readme from './readme.md';
 
@@ -204,12 +204,7 @@ export const Icons = (props: CarouselProps) => {
 			{Object.keys(iconPaths).map((icon, index) => {
 				return (
 					<div style={{ margin: '0 auto', textAlign: 'center' }}>
-						<Icon
-							icon={icon as keyof typeof iconPaths}
-							color={shiftColor('#3a23ad', (index + '111').padStart(6, '1'))}
-							size="80px"
-							style={{ padding: '20px' }}
-						/>
+						<Icon icon={icon as IconType} color={shiftColor('#3a23ad', (index + '111').padStart(6, '1'))} size="80px" style={{ padding: '20px' }} />
 						<div style={{ textAlign: 'center' }}>{icon}</div>
 					</div>
 				);
diff --git a/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx b/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx
index ea8c12f75..22c0d08ea 100644
--- a/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx
+++ b/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx
@@ -499,5 +499,5 @@ export interface FacetLang {
 }
 
 type FieldProps = {
-	[variable: string]: FacetProps;
+	[variable: string]: Omit<FacetProps, 'facet'>;
 };
diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx
similarity index 87%
rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx
rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx
index 4229c19e9..79af070b5 100644
--- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx
+++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx
@@ -2,16 +2,16 @@ import { h } from 'preact';
 
 import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks';
 
-import { HorizontalFacets, HorizontalFacetsProps } from './HorizontalFacets';
+import { FacetsHorizontal, FacetsHorizontalProps } from './FacetsHorizontal';
 import { componentArgs, highlightedCode } from '../../../utilities';
 import { Snapify } from '../../../utilities/snapify';
 import { iconPaths } from '../../Atoms/Icon';
-import Readme from '../HorizontalFacets/readme.md';
+import Readme from '../FacetsHorizontal/readme.md';
 import type { SearchController } from '@searchspring/snap-controller';
 
 export default {
-	title: 'Organisms/HorizontalFacets',
-	component: HorizontalFacets,
+	title: 'Organisms/FacetsHorizontal',
+	component: FacetsHorizontal,
 	tags: ['autodocs'],
 	parameters: {
 		docs: {
@@ -118,10 +118,10 @@ export default {
 	},
 };
 
-const snapInstance = Snapify.search({ id: 'HorizontalFacets', globals: { siteId: '8uyt2m' } });
+const snapInstance = Snapify.search({ id: 'FacetsHorizontal', globals: { siteId: '8uyt2m' } });
 
-export const Default = (args: HorizontalFacetsProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
-	return <HorizontalFacets {...args} controller={controller} />;
+export const Default = (args: FacetsHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
+	return <FacetsHorizontal {...args} controller={controller} />;
 };
 
 Default.loaders = [
diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx
similarity index 68%
rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx
rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx
index 59c1e50c3..6c98accca 100644
--- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx
+++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { render } from '@testing-library/preact';
-import { HorizontalFacets } from './HorizontalFacets';
+import { FacetsHorizontal } from './FacetsHorizontal';
 import { IndividualFacetType } from '../Facets/Facets';
 import { ThemeProvider } from '../../../providers';
 import userEvent from '@testing-library/user-event';
@@ -11,14 +11,14 @@ import { SearchResponseModel } from '@searchspring/snapi-types';
 const mockData = new MockData();
 const searchResponse: SearchResponseModel = mockData.search();
 
-describe('HorizontalFacets Component', () => {
+describe('FacetsHorizontal Component', () => {
 	it('renders', () => {
 		const args = {
 			facets: searchResponse.facets as IndividualFacetType[],
 		};
-		const rendered = render(<HorizontalFacets {...args} />);
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
+		const rendered = render(<FacetsHorizontal {...args} />);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toBeInTheDocument();
 	});
 
 	it('limits number of facets and displays sidebar overflow', () => {
@@ -26,11 +26,11 @@ describe('HorizontalFacets Component', () => {
 			facets: searchResponse.facets as IndividualFacetType[],
 			limit: 2,
 		};
-		const rendered = render(<HorizontalFacets {...args} />);
-		const facetsDropdown = rendered.container.querySelectorAll('.ss__horizontal-facets__header__dropdown');
+		const rendered = render(<FacetsHorizontal {...args} />);
+		const facetsDropdown = rendered.container.querySelectorAll('.ss__facets-horizontal__header__dropdown');
 		expect(facetsDropdown).toHaveLength(args.limit);
 
-		const mobileSidebar = rendered.container.querySelector('.ss__horizontal-facets__header__mobile-sidebar');
+		const mobileSidebar = rendered.container.querySelector('.ss__facets-horizontal__header__mobile-sidebar');
 		expect(mobileSidebar).toBeInTheDocument();
 	});
 
@@ -39,9 +39,9 @@ describe('HorizontalFacets Component', () => {
 			facets: searchResponse.facets as IndividualFacetType[],
 			alwaysShowFiltersButton: true,
 		};
-		const rendered = render(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		const mobileSidebar = rendered.container.querySelector('.ss__horizontal-facets__header__mobile-sidebar');
+		const mobileSidebar = rendered.container.querySelector('.ss__facets-horizontal__header__mobile-sidebar');
 		expect(mobileSidebar).toBeInTheDocument();
 	});
 
@@ -50,10 +50,10 @@ describe('HorizontalFacets Component', () => {
 			facets: searchResponse.facets as IndividualFacetType[],
 			overlay: true,
 		};
-		const rendered = render(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
 		const facetElement = rendered.container.querySelector(
-			`.ss__horizontal-facets--overlay .ss__horizontal-facets__header .ss__horizontal-facets__header__dropdown--${args.facets[0].field} .ss__facet__options`
+			`.ss__facets-horizontal--overlay .ss__facets-horizontal__header .ss__facets-horizontal__header__dropdown--${args.facets[0].field} .ss__facet__options`
 		);
 		expect(facetElement).toBeInTheDocument();
 	});
@@ -64,10 +64,10 @@ describe('HorizontalFacets Component', () => {
 			className: 'classy',
 		};
 
-		const rendered = render(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toHaveClass(args.className);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toHaveClass(args.className);
 	});
 
 	it('disableStyles', () => {
@@ -76,18 +76,18 @@ describe('HorizontalFacets Component', () => {
 			disableStyles: true,
 		};
 
-		const rendered = render(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement?.classList).toHaveLength(1);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement?.classList).toHaveLength(1);
 	});
 
-	describe('HorizontalFacets lang works', () => {
+	describe('FacetsHorizontal lang works', () => {
 		const args = {
 			facets: searchResponse.facets as IndividualFacetType[],
 		};
 
-		const selector = '.ss__horizontal-facets';
+		const selector = '.ss__facets-horizontal';
 
 		it('immediately available lang options', async () => {
 			const langOptions = ['dropdownButton'];
@@ -148,7 +148,7 @@ describe('HorizontalFacets Component', () => {
 					let titleSatisfied = false;
 
 					// @ts-ignore
-					const rendered = render(<HorizontalFacets {...args} lang={lang} />);
+					const rendered = render(<FacetsHorizontal {...args} lang={lang} />);
 					const element = rendered.container.querySelector(selector);
 					expect(element).toBeInTheDocument();
 
@@ -206,19 +206,19 @@ describe('HorizontalFacets Component', () => {
 		};
 		const globalTheme = {
 			components: {
-				horizontalFacets: {
+				facetsHorizontal: {
 					className: 'classy',
 				},
 			},
 		};
 		const rendered = render(
 			<ThemeProvider theme={globalTheme}>
-				<HorizontalFacets {...args} />
+				<FacetsHorizontal {...args} />
 			</ThemeProvider>
 		);
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
-		expect(horizontalFacetsElement).toHaveClass(globalTheme.components.horizontalFacets.className);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toBeInTheDocument();
+		expect(facetsHorizontalElement).toHaveClass(globalTheme.components.facetsHorizontal.className);
 	});
 
 	it('is themeable with theme prop', () => {
@@ -227,15 +227,15 @@ describe('HorizontalFacets Component', () => {
 		};
 		const propTheme = {
 			components: {
-				horizontalFacets: {
+				facetsHorizontal: {
 					className: 'classy',
 				},
 			},
 		};
-		const rendered = render(<HorizontalFacets {...args} theme={propTheme} />);
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
-		expect(horizontalFacetsElement).toHaveClass(propTheme.components.horizontalFacets.className);
+		const rendered = render(<FacetsHorizontal {...args} theme={propTheme} />);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toBeInTheDocument();
+		expect(facetsHorizontalElement).toHaveClass(propTheme.components.facetsHorizontal.className);
 	});
 
 	it('is theme prop overrides ThemeProvider', () => {
@@ -244,27 +244,27 @@ describe('HorizontalFacets Component', () => {
 		};
 		const globalTheme = {
 			components: {
-				horizontalFacets: {
+				facetsHorizontal: {
 					className: 'notClassy',
 				},
 			},
 		};
 		const propTheme = {
 			components: {
-				horizontalFacets: {
+				facetsHorizontal: {
 					className: 'classy',
 				},
 			},
 		};
 		const rendered = render(
 			<ThemeProvider theme={globalTheme}>
-				<HorizontalFacets {...args} theme={propTheme} />
+				<FacetsHorizontal {...args} theme={propTheme} />
 			</ThemeProvider>
 		);
 
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
-		expect(horizontalFacetsElement).toHaveClass(propTheme.components.horizontalFacets.className);
-		expect(horizontalFacetsElement).not.toHaveClass(globalTheme.components.horizontalFacets.className);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toBeInTheDocument();
+		expect(facetsHorizontalElement).toHaveClass(propTheme.components.facetsHorizontal.className);
+		expect(facetsHorizontalElement).not.toHaveClass(globalTheme.components.facetsHorizontal.className);
 	});
 });
diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx
similarity index 86%
rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx
rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx
index 1ac223e6f..2d451761a 100644
--- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx
+++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx
@@ -18,9 +18,9 @@ import { Dropdown, DropdownProps } from '../../Atoms/Dropdown';
 import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 
 const CSS = {
-	facets: ({ theme }: Partial<HorizontalFacetsProps>) =>
+	facets: ({ theme }: Partial<FacetsHorizontalProps>) =>
 		css({
-			'& .ss__horizontal-facets__header': {
+			'& .ss__facets-horizontal__header': {
 				display: 'flex',
 				flexWrap: 'wrap',
 
@@ -28,7 +28,7 @@ const CSS = {
 					margin: '0 10px',
 				},
 
-				'& .ss__horizontal-facets__header__dropdown': {
+				'& .ss__facets-horizontal__header__dropdown': {
 					flex: '0 0 0%',
 					margin: '0 0 10px 0',
 					boxSizing: 'border-box',
@@ -58,8 +58,8 @@ const CSS = {
 					},
 				},
 			},
-			'&.ss__horizontal-facets--overlay': {
-				'& .ss__horizontal-facets__header__dropdown': {
+			'&.ss__facets-horizontal--overlay': {
+				'& .ss__facets-horizontal__header__dropdown': {
 					'&.ss__dropdown--open': {
 						'& .ss__dropdown__content': {
 							border: `1px solid ${theme?.variables?.colors?.active?.background || '#ccc'}`,
@@ -78,17 +78,17 @@ const CSS = {
 		}),
 };
 
-export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JSX.Element => {
+export const FacetsHorizontal = observer((properties: FacetsHorizontalProps): JSX.Element => {
 	const globalTheme: Theme = useTheme();
 
-	const defaultProps: Partial<HorizontalFacetsProps> = {
+	const defaultProps: Partial<FacetsHorizontalProps> = {
 		limit: 6,
 		iconCollapse: 'angle-up',
 		iconExpand: 'angle-down',
 		facets: properties.controller?.store?.facets,
 	};
 
-	let props = mergeProps('horizontalFacets', globalTheme, defaultProps, properties);
+	let props = mergeProps('facetsHorizontal', globalTheme, defaultProps, properties);
 
 	const {
 		facets,
@@ -143,10 +143,10 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 		facetsToShow = facets.slice(0, +limit);
 	}
 
-	const subProps: HorizontalFacetsSubProps = {
+	const subProps: FacetsHorizontalSubProps = {
 		dropdown: {
 			// default props
-			className: 'ss__horizontal-facets__header__dropdown',
+			className: 'ss__facets-horizontal__header__dropdown',
 			disableClickOutside: true,
 			disableOverlay: true,
 			disableA11y: true,
@@ -175,7 +175,7 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 		},
 		facet: {
 			// default props
-			className: `ss__horizontal-facets__content__facet`,
+			className: `ss__facets-horizontal__content__facet`,
 			justContent: true,
 			horizontal: true,
 			// global theme
@@ -191,7 +191,7 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 		},
 		MobileSidebar: {
 			// default props
-			className: 'ss__horizontal-facets__header__mobile-sidebar',
+			className: 'ss__facets-horizontal__header__mobile-sidebar',
 			hidePerPage: true,
 			hideSortBy: true,
 			// global theme
@@ -226,11 +226,11 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 	return facetsToShow && facetsToShow?.length > 0 ? (
 		<CacheProvider>
 			<div
-				className={classnames('ss__horizontal-facets', { 'ss__horizontal-facets--overlay': overlay }, className)}
+				className={classnames('ss__facets-horizontal', { 'ss__facets-horizontal--overlay': overlay }, className)}
 				ref={innerRef as React.LegacyRef<HTMLDivElement>}
 				{...styling}
 			>
-				<div className="ss__horizontal-facets__header">
+				<div className="ss__facets-horizontal__header">
 					{facetsToShow.map((facet: IndividualFacetType) => {
 						//initialize lang
 						const defaultLang = {
@@ -255,8 +255,8 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 								{...subProps.dropdown}
 								className={classnames(
 									subProps.dropdown.className,
-									`ss__horizontal-facets__header__dropdown--${facet.display}`,
-									`ss__horizontal-facets__header__dropdown--${facet.field}`
+									`ss__facets-horizontal__header__dropdown--${facet.display}`,
+									`ss__facets-horizontal__header__dropdown--${facet.field}`
 								)}
 								open={selectedFacet?.field === facet.field}
 								onClick={() => {
@@ -293,9 +293,9 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 				{!overlay && selectedFacet && (
 					<div
 						className={classnames(
-							'ss__horizontal-facets__content',
-							`ss__horizontal-facets__content--${selectedFacet.display}`,
-							`ss__horizontal-facets__content--${selectedFacet.field}`
+							'ss__facets-horizontal__content',
+							`ss__facets-horizontal__content--${selectedFacet.display}`,
+							`ss__facets-horizontal__content--${selectedFacet.field}`
 						)}
 					>
 						<Facet {...subProps.facet} facet={facets?.find((facet) => facet.field === selectedFacet.field)!} />
@@ -308,14 +308,14 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 	);
 });
 
-interface HorizontalFacetsSubProps {
+interface FacetsHorizontalSubProps {
 	dropdown: Partial<DropdownProps>;
 	icon: Partial<IconProps>;
 	facet: Partial<FacetProps>;
 	MobileSidebar: Partial<MobileSidebarProps>;
 }
 
-export interface HorizontalFacetsProps extends ComponentProps {
+export interface FacetsHorizontalProps extends ComponentProps {
 	facets?: IndividualFacetType[];
 	limit?: number;
 	overlay?: boolean;
@@ -324,10 +324,10 @@ export interface HorizontalFacetsProps extends ComponentProps {
 	iconExpand?: IconType | Partial<IconProps>;
 	controller?: SearchController | AutocompleteController;
 	onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
-	lang?: Partial<HorizontalFacetsLang>;
+	lang?: Partial<FacetsHorizontalLang>;
 }
 
-export interface HorizontalFacetsLang {
+export interface FacetsHorizontalLang {
 	dropdownButton: Lang<{
 		selectedFacet: IndividualFacetType;
 		facet: IndividualFacetType;
diff --git a/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts
new file mode 100644
index 000000000..2a3051ba3
--- /dev/null
+++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts
@@ -0,0 +1 @@
+export * from './FacetsHorizontal';
diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md
similarity index 72%
rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md
rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md
index cd4a744cd..9eb80ae34 100644
--- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md
+++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md
@@ -1,4 +1,4 @@
-# HorizontalFacets
+# FacetsHorizontal
 
 Renders all facets in a horizontal display. Also incluses MobileSidebar.
 
@@ -13,47 +13,47 @@ Renders all facets in a horizontal display. Also incluses MobileSidebar.
 The `controller` prop specifies a reference to the search controller.
 
 ```jsx
-<HorizontalFacets controller={controller} />
+<FacetsHorizontal controller={controller} />
 ```
 
 ### facets
 The optional`facets` prop specifies a reference to the facets store array. If no facets prop is passed in, the component will default to using the facets in controller.store. 
 
 ```jsx
-<HorizontalFacets facets={facets} />
+<FacetsHorizontal facets={facets} />
 ```
 
 ### iconExpand
 The `iconExpand` prop is the name of the icon to render when the facet is in its collapsed state.
 
 ```jsx
-<HorizontalFacets facets={facets} iconExpand={'angle-down'} />
+<FacetsHorizontal facets={facets} iconExpand={'angle-down'} />
 ```
 
 ### iconCollapse
 The `iconCollapse` prop is the name of the icon to render when the facet is in its open state.
 
 ```jsx
-<HorizontalFacets facets={facets} iconCollapse={'angle-up'} />
+<FacetsHorizontal facets={facets} iconCollapse={'angle-up'} />
 ```
 
 ### limit
 The `limit` prop will limit the maximum number of facets to display before displaying the overflow button and MobidleSidebar.
 
 ```jsx
-<HorizontalFacets controller={controller} limit={6}/>
+<FacetsHorizontal controller={controller} limit={6}/>
 ```
 
 ### alwaysShowFiltersButton
 The `alwaysShowFiltersButton` prop will always render the button and MobileSidebar.
 
 ```jsx
-<HorizontalFacets controller={controller} alwaysShowFiltersButton={true} />
+<FacetsHorizontal controller={controller} alwaysShowFiltersButton={true} />
 ```
 
 ### overlay
 The `overlay` prop will render the facet options in a dropdown overlay.
 
 ```jsx
-<HorizontalFacets controller={controller} overlay={true}/>
+<FacetsHorizontal controller={controller} overlay={true}/>
 ```
\ No newline at end of file
diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts b/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts
deleted file mode 100644
index cbba3a3af..000000000
--- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HorizontalFacets';
diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts b/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts
deleted file mode 100644
index a683f94e8..000000000
--- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HorizontalSearch';
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleCTA.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleCTA.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleSelector.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleSelector.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleSelector.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleSelector.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx
similarity index 99%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx
index f5973a491..d1ca09d6a 100644
--- a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx
+++ b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx
@@ -14,7 +14,7 @@ import { iconPaths } from '../../Atoms/Icon';
 import type { RecommendationControllerConfig } from '@searchspring/snap-controller';
 
 export default {
-	title: 'Organisms/RecommendationBundle',
+	title: 'Templates/RecommendationBundle',
 	component: RecommendationBundle,
 	parameters: {
 		docs: {
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.test.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.test.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.test.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.test.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/index.ts b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/index.ts
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/index.ts
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/index.ts
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/readme.md b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/readme.md
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/readme.md
rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/readme.md
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx
similarity index 98%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx
index b41c63a8e..7a02e245e 100644
--- a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx
+++ b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx
@@ -10,7 +10,7 @@ import Readme from './readme.md';
 import type { RecommendationController } from '@searchspring/snap-controller';
 
 export default {
-	title: 'Organisms/RecommendationGrid',
+	title: 'Templates/RecommendationGrid',
 	component: RecommendationGrid,
 	tags: ['autodocs'],
 	parameters: {
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.test.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.test.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.test.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.test.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.tsx
rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/index.ts b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/index.ts
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/index.ts
rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/index.ts
diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/readme.md b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/readme.md
similarity index 100%
rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/readme.md
rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/readme.md
diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx
similarity index 88%
rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx
rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx
index 77763ced0..ac5dff316 100644
--- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx
+++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx
@@ -6,11 +6,11 @@ import { componentArgs, highlightedCode } from '../../../utilities';
 import { Snapify } from '../../../utilities/snapify';
 import Readme from './readme.md';
 import type { SearchController } from '@searchspring/snap-controller';
-import { HorizontalSearch, HorizontalSearchProps } from './HorizontalSearch';
+import { SearchHorizontal, SearchHorizontalProps } from './SearchHorizontal';
 
 export default {
-	title: 'Templates/HorizontalSearch',
-	component: HorizontalSearch,
+	title: 'Templates/SearchHorizontal',
+	component: SearchHorizontal,
 	tags: ['autodocs'],
 	parameters: {
 		docs: {
@@ -128,8 +128,8 @@ const noresultsInstance = Snapify.search({
 	},
 });
 
-export const Default = (args: HorizontalSearchProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
-	return <HorizontalSearch {...args} controller={controller} />;
+export const Default = (args: SearchHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
+	return <SearchHorizontal {...args} controller={controller} />;
 };
 
 Default.loaders = [
@@ -141,8 +141,8 @@ Default.loaders = [
 	},
 ];
 
-export const NoResults = (args: HorizontalSearchProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
-	return <HorizontalSearch {...args} controller={controller} />;
+export const NoResults = (args: SearchHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
+	return <SearchHorizontal {...args} controller={controller} />;
 };
 
 NoResults.loaders = [
diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx
similarity index 65%
rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx
rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx
index 1a09e5f45..d3753394d 100644
--- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx
+++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx
@@ -10,7 +10,7 @@ import { Logger } from '@searchspring/snap-logger';
 import { Tracker } from '@searchspring/snap-tracker';
 import { MockClient } from '@searchspring/snap-shared';
 import { QueryStringTranslator, UrlManager, reactLinker } from '@searchspring/snap-url-manager';
-import { HorizontalSearch } from './HorizontalSearch';
+import { SearchHorizontal } from './SearchHorizontal';
 import userEvent from '@testing-library/user-event';
 
 const globals = { siteId: '8uyt2m' };
@@ -30,7 +30,7 @@ let controller: SearchController;
 
 const mockClient = new MockClient(globals, {});
 
-describe('HorizontalSearch Template Component', () => {
+describe('SearchHorizontal Template Component', () => {
 	beforeEach(async () => {
 		searchConfig = { ...searchConfigDefault };
 		searchConfig.id = uuidv4().split('-').join('');
@@ -49,31 +49,31 @@ describe('HorizontalSearch Template Component', () => {
 	});
 
 	it('renders', () => {
-		const rendered = render(<HorizontalSearch controller={controller} />);
-		const element = rendered.container.querySelector('.ss__horizontal-search');
+		const rendered = render(<SearchHorizontal controller={controller} />);
+		const element = rendered.container.querySelector('.ss__search-horizontal');
 		expect(element).toBeInTheDocument();
 	});
 
 	it('renders expected sub components', () => {
-		const rendered = render(<HorizontalSearch controller={controller} />);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
+		const rendered = render(<SearchHorizontal controller={controller} />);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
 
 		const searchHeader = rendered.container.querySelector('.ss__search-header');
-		const horizontalFacets = rendered.container.querySelector('.ss__horizontal-facets');
+		const facetsHorizontal = rendered.container.querySelector('.ss__facets-horizontal');
 
 		const results = rendered.container.querySelector('.ss__results');
 		const noResults = rendered.container.querySelector('.ss__no-results');
 
-		const topToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--top-toolbar');
-		const bottomToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--bottom-toolbar');
+		const topToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--top-toolbar');
+		const bottomToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--bottom-toolbar');
 
-		const toggleFiltersButton = rendered.container.querySelector('.ss__horizontal-search__sidebar-wrapper-toggle');
+		const toggleFiltersButton = rendered.container.querySelector('.ss__search-horizontal__sidebar-wrapper-toggle');
 		const mobileSidebar = rendered.container.querySelector('.ss__mobile-sidebar__slideout');
-		const dropdown = rendered.container.querySelector('.ss__horizontal-search__sidebar-wrapper-toggle');
+		const dropdown = rendered.container.querySelector('.ss__search-horizontal__sidebar-wrapper-toggle');
 
 		expect(element).toBeInTheDocument();
 		expect(searchHeader).toBeInTheDocument();
-		expect(horizontalFacets).toBeInTheDocument();
+		expect(facetsHorizontal).toBeInTheDocument();
 		expect(results).toBeInTheDocument();
 		expect(noResults).not.toBeInTheDocument();
 		expect(topToolBar).toBeInTheDocument();
@@ -87,9 +87,9 @@ describe('HorizontalSearch Template Component', () => {
 		mockClient.mockData.updateConfig({ search: 'merchandising' });
 		await controller.search();
 
-		const rendered = render(<HorizontalSearch controller={controller} />);
+		const rendered = render(<SearchHorizontal controller={controller} />);
 
-		const element = rendered.container.querySelector('.ss__horizontal-search');
+		const element = rendered.container.querySelector('.ss__search-horizontal');
 		const banners = rendered.container.querySelectorAll('.ss__banner');
 		const headerBanner = rendered.container.querySelector('.ss__banner--header');
 		const leftBanner = rendered.container.querySelector('.ss__banner--left');
@@ -110,8 +110,8 @@ describe('HorizontalSearch Template Component', () => {
 		mockClient.mockData.updateConfig({ search: 'merchandising' });
 		await controller.search();
 
-		const rendered = render(<HorizontalSearch controller={controller} hideSearchHeader />);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
+		const rendered = render(<SearchHorizontal controller={controller} hideSearchHeader />);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
 		const header = rendered.container.querySelector('.ss__search-header');
 
 		expect(element).toBeInTheDocument();
@@ -122,9 +122,9 @@ describe('HorizontalSearch Template Component', () => {
 		mockClient.mockData.updateConfig({ search: 'merchandising' });
 		await controller.search();
 
-		const rendered = render(<HorizontalSearch controller={controller} hideTopToolbar />);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
-		const topToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--topToolBar');
+		const rendered = render(<SearchHorizontal controller={controller} hideTopToolbar />);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
+		const topToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--topToolBar');
 
 		expect(element).toBeInTheDocument();
 		expect(topToolBar).not.toBeInTheDocument();
@@ -134,9 +134,9 @@ describe('HorizontalSearch Template Component', () => {
 		mockClient.mockData.updateConfig({ search: 'merchandising' });
 		await controller.search();
 
-		const rendered = render(<HorizontalSearch controller={controller} hideBottomToolBar />);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
-		const bottomToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--bottomToolBar');
+		const rendered = render(<SearchHorizontal controller={controller} hideBottomToolBar />);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
+		const bottomToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--bottomToolBar');
 
 		expect(element).toBeInTheDocument();
 		expect(bottomToolBar).not.toBeInTheDocument();
@@ -146,9 +146,9 @@ describe('HorizontalSearch Template Component', () => {
 		mockClient.mockData.updateConfig({ search: 'merchandising' });
 		await controller.search();
 
-		const rendered = render(<HorizontalSearch controller={controller} hideMerchandisingBanners />);
+		const rendered = render(<SearchHorizontal controller={controller} hideMerchandisingBanners />);
 
-		const element = rendered.container.querySelector('.ss__horizontal-search');
+		const element = rendered.container.querySelector('.ss__search-horizontal');
 		const banners = rendered.container.querySelectorAll('.ss__banner');
 
 		expect(element).toBeInTheDocument();
@@ -157,17 +157,17 @@ describe('HorizontalSearch Template Component', () => {
 
 	it('renders with classname', () => {
 		const className = 'classy';
-		const rendered = render(<HorizontalSearch controller={controller} className={className} />);
+		const rendered = render(<SearchHorizontal controller={controller} className={className} />);
 
-		const element = rendered.container.querySelector('.ss__horizontal-search');
+		const element = rendered.container.querySelector('.ss__search-horizontal');
 		expect(element).toBeInTheDocument();
 		expect(element).toHaveClass(className);
 	});
 
 	it('can disable styles', () => {
-		const rendered = render(<HorizontalSearch controller={controller} disableStyles />);
+		const rendered = render(<SearchHorizontal controller={controller} disableStyles />);
 
-		const element = rendered.container.querySelector('.ss__horizontal-search');
+		const element = rendered.container.querySelector('.ss__search-horizontal');
 
 		expect(element?.classList).toHaveLength(1);
 	});
@@ -175,37 +175,37 @@ describe('HorizontalSearch Template Component', () => {
 	it('is themeable with ThemeProvider', () => {
 		const theme = {
 			components: {
-				horizontalSearch: {
+				searchHorizontal: {
 					className: 'classy',
 				},
 			},
 		};
 		const rendered = render(
 			<ThemeProvider theme={theme}>
-				<HorizontalSearch controller={controller} />
+				<SearchHorizontal controller={controller} />
 			</ThemeProvider>
 		);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
-		expect(element).toHaveClass(theme.components.horizontalSearch.className);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
+		expect(element).toHaveClass(theme.components.searchHorizontal.className);
 	});
 
 	it('is themeable with theme prop', () => {
 		const theme = {
 			components: {
-				horizontalSearch: {
+				searchHorizontal: {
 					className: 'classy',
 				},
 			},
 		};
-		const rendered = render(<HorizontalSearch controller={controller} theme={theme} />);
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
-		expect(element).toHaveClass(theme.components.horizontalSearch.className);
+		const rendered = render(<SearchHorizontal controller={controller} theme={theme} />);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
+		expect(element).toHaveClass(theme.components.searchHorizontal.className);
 	});
 
 	it('is themeable with theme prop overrides ThemeProvider', () => {
 		const theme = {
 			components: {
-				horizontalSearch: {
+				searchHorizontal: {
 					className: 'notClassy',
 				},
 			},
@@ -213,7 +213,7 @@ describe('HorizontalSearch Template Component', () => {
 
 		const componentTheme = {
 			components: {
-				horizontalSearch: {
+				searchHorizontal: {
 					className: 'classy',
 				},
 			},
@@ -221,12 +221,12 @@ describe('HorizontalSearch Template Component', () => {
 
 		const rendered = render(
 			<ThemeProvider theme={theme}>
-				<HorizontalSearch controller={controller} theme={componentTheme} />
+				<SearchHorizontal controller={controller} theme={componentTheme} />
 			</ThemeProvider>
 		);
 
-		const element = rendered.container.querySelector('.ss__horizontal-search')!;
-		expect(element).toHaveClass(componentTheme.components.horizontalSearch.className);
-		expect(element).not.toHaveClass(theme.components.horizontalSearch.className);
+		const element = rendered.container.querySelector('.ss__search-horizontal')!;
+		expect(element).toHaveClass(componentTheme.components.searchHorizontal.className);
+		expect(element).not.toHaveClass(theme.components.searchHorizontal.className);
 	});
 });
diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx
similarity index 81%
rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx
rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx
index 0f4f9ae28..927cf6e54 100644
--- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx
+++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx
@@ -12,18 +12,18 @@ import { SearchHeader, SearchHeaderProps } from '../../Atoms/SearchHeader';
 import { NoResults, NoResultsProps } from '../../Atoms/NoResults';
 import { Banner, BannerProps } from '../../Atoms/Merchandising';
 import { ContentType } from '@searchspring/snap-store-mobx';
-import { HorizontalFacets, HorizontalFacetsProps } from '../../Organisms/HorizontalFacets';
+import { FacetsHorizontal, FacetsHorizontalProps } from '../../Organisms/FacetsHorizontal';
 
 const CSS = {
-	HorizontalSearch: ({}: Partial<HorizontalSearchProps>) => css({}),
+	SearchHorizontal: ({}: Partial<SearchHorizontalProps>) => css({}),
 };
 
-export const HorizontalSearch = observer((properties: HorizontalSearchProps): JSX.Element => {
+export const SearchHorizontal = observer((properties: SearchHorizontalProps): JSX.Element => {
 	const globalTheme: Theme = useTheme();
 
-	const defaultProps: Partial<HorizontalSearchProps> = {};
+	const defaultProps: Partial<SearchHorizontalProps> = {};
 
-	const props = mergeProps('horizontalSearch', globalTheme, defaultProps, properties);
+	const props = mergeProps('searchHorizontal', globalTheme, defaultProps, properties);
 
 	const {
 		disableStyles,
@@ -41,8 +41,8 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
 	} = props;
 	const store = controller.store;
 
-	const subProps: HorizontalSearchSubProps = {
-		HorizontalFacets: {
+	const subProps: SearchHorizontalSubProps = {
+		FacetsHorizontal: {
 			// default props
 			// inherited props
 			...defined({
@@ -139,7 +139,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
 	if (styleScript && !disableStyles) {
 		styling.css = [styleScript(stylingProps), style];
 	} else if (!disableStyles) {
-		styling.css = [CSS.HorizontalSearch(stylingProps), style];
+		styling.css = [CSS.SearchHorizontal(stylingProps), style];
 	} else if (style) {
 		styling.css = [style];
 	}
@@ -173,20 +173,20 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
 
 	return (
 		<CacheProvider>
-			<div {...styling} className={classnames('ss__horizontal-search', className)}>
+			<div {...styling} className={classnames('ss__search-horizontal', className)}>
 				{!hideSearchHeader && <SearchHeader {...subProps.SearchHeader} controller={controller} />}
 
 				{!hideTopToolbar && store.pagination.totalResults > 0 && (
-					<Toolbar {...subProps.TopToolbar} className="ss__horizontal-search__content__toolbar--top-toolbar" controller={controller} />
+					<Toolbar {...subProps.TopToolbar} className="ss__search-horizontal__content__toolbar--top-toolbar" controller={controller} />
 				)}
-				<HorizontalFacets {...subProps.HorizontalFacets} facets={store.facets} controller={controller} />
+				<FacetsHorizontal {...subProps.FacetsHorizontal} facets={store.facets} controller={controller} />
 
-				<div className={classnames('ss__horizontal-search__content')}>
+				<div className={classnames('ss__search-horizontal__content')}>
 					{!hideHeaderBanner && <Banner {...subProps.Banner} content={merchandising.content} type={ContentType.HEADER} name={'header'} />}
 					{!hideBannerBanner && <Banner {...subProps.Banner} content={merchandising.content} type={ContentType.BANNER} name={'banner'} />}
 
 					{!hideMiddleToolbar && store.pagination.totalResults > 0 && (
-						<Toolbar {...subProps.MiddleToolbar} className="ss__horizontal-search__content__toolbar--middle-toolbar" controller={controller} />
+						<Toolbar {...subProps.MiddleToolbar} className="ss__search-horizontal__content__toolbar--middle-toolbar" controller={controller} />
 					)}
 
 					<div className="clear"></div>
@@ -202,7 +202,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
 					<div className="clear"></div>
 
 					{!hideBottomToolBar && store.pagination.totalResults > 0 && (
-						<Toolbar {...subProps.BottomToolbar} className="ss__horizontal-search__content__toolbar--bottom-toolbar" controller={controller} />
+						<Toolbar {...subProps.BottomToolbar} className="ss__search-horizontal__content__toolbar--bottom-toolbar" controller={controller} />
 					)}
 				</div>
 			</div>
@@ -211,7 +211,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
 });
 
 //todo improve the controller spreading here..
-export interface HorizontalSearchProps extends ComponentProps {
+export interface SearchHorizontalProps extends ComponentProps {
 	controller: SearchController;
 	resultComponent?: ResultComponent;
 	hideSearchHeader?: boolean;
@@ -221,8 +221,8 @@ export interface HorizontalSearchProps extends ComponentProps {
 	hideMerchandisingBanners?: boolean | string[];
 }
 
-interface HorizontalSearchSubProps {
-	HorizontalFacets: Partial<HorizontalFacetsProps>;
+interface SearchHorizontalSubProps {
+	FacetsHorizontal: Partial<FacetsHorizontalProps>;
 	Banner: Partial<BannerProps>;
 	TopToolbar: Partial<ToolbarProps>;
 	MiddleToolbar: Partial<ToolbarProps>;
diff --git a/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts
new file mode 100644
index 000000000..0b5d3bbf1
--- /dev/null
+++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts
@@ -0,0 +1 @@
+export * from './SearchHorizontal';
diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md
similarity index 80%
rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md
rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md
index e51aaa896..fa986107a 100644
--- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md
+++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md
@@ -1,10 +1,10 @@
-# HorizontalSearch Template
+# SearchHorizontal Template
 
 Renders a Search Results Page.
 
 ## Sub-components
 
-- HorizontalFacets
+- FacetsHorizontal
 - LayoutSelector
 - Results
 - NoResults
@@ -18,28 +18,28 @@ Renders a Search Results Page.
 The required `controller` prop specifies a reference to the search controller.
 
 ```jsx
-<HorizontalSearch controller={controller} />
+<SearchHorizontal controller={controller} />
 ```
 
 ### hideSearchHeader
 The `hideSearchHeader` prop specifies if the SearchHeader component should be rendered.  
 
 ```jsx
-<HorizontalSearch controller={controller} hideSearchHeader={true} />
+<SearchHorizontal controller={controller} hideSearchHeader={true} />
 ```
 
 ### hidetopToolBar
 The `hidetopToolBar` prop specifies if the top ToolBar component should be rendered.  
 
 ```jsx
-<HorizontalSearch controller={controller} hidetopToolBar={true} />
+<SearchHorizontal controller={controller} hidetopToolBar={true} />
 ```
 
 ### hideBottomToolBar
 The `hideBottomToolBar` prop specifies if the bottom ToolBar component should be rendered.  
 
 ```jsx
-<HorizontalSearch controller={controller} hideBottomToolBar={true} />
+<SearchHorizontal controller={controller} hideBottomToolBar={true} />
 ```
 
 
@@ -47,19 +47,19 @@ The `hideBottomToolBar` prop specifies if the bottom ToolBar component should be
 The `hideMerchandisingBanners` prop specifies if merchandising banners should render. This can take a boolean to hide all banners, or an array of specific banner types you wish to hide. 
 
 ```jsx
-<HorizontalSearch controller={controller} hideMerchandisingBanners={true} />
+<SearchHorizontal controller={controller} hideMerchandisingBanners={true} />
 ```
 or
 
 ```jsx
-<HorizontalSearch controller={controller} hideMerchandisingBanners={["Footer", "Header", "Banner", "left"]} />
+<SearchHorizontal controller={controller} hideMerchandisingBanners={["Footer", "Header", "Banner", "left"]} />
 ```
 
 ### hideLayoutSelector
 The `hideLayoutSelector` prop specifies if the layoutSelector component should be rendered. 
 
 ```jsx
-<HorizontalSearch controller={controller} hideLayoutSelector={true} />
+<SearchHorizontal controller={controller} hideLayoutSelector={true} />
 ```
 
 ### layoutConfig
@@ -119,5 +119,5 @@ const layoutConfig = {
     ]	
 }
 
-<HorizontalSearch controller={controller} layoutConfig={layoutConfig} />
+<SearchHorizontal controller={controller} layoutConfig={layoutConfig} />
 ```
\ No newline at end of file
diff --git a/packages/snap-preact/components/src/index.ts b/packages/snap-preact/components/src/index.ts
index e9a17bd5e..23661a482 100644
--- a/packages/snap-preact/components/src/index.ts
+++ b/packages/snap-preact/components/src/index.ts
@@ -56,20 +56,20 @@ export * from './components/Molecules/VariantSelection';
 export * from './components/Organisms/BranchOverride';
 export * from './components/Organisms/Facet';
 export * from './components/Organisms/Facets';
-export * from './components/Organisms/HorizontalFacets';
+export * from './components/Organisms/FacetsHorizontal';
 export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/MobileSidebar';
-export * from './components/Organisms/RecommendationBundle';
-export * from './components/Organisms/RecommendationGrid';
 export * from './components/Organisms/Results';
 export * from './components/Organisms/Sidebar';
 export * from './components/Organisms/Toolbar';
 
-// TEMAPLTES
+// TEMPLATES
 export * from './components/Templates/Autocomplete';
 export * from './components/Templates/Recommendation';
+export * from './components/Templates/RecommendationBundle';
+export * from './components/Templates/RecommendationGrid';
 export * from './components/Templates/Search';
-export * from './components/Templates/HorizontalSearch';
+export * from './components/Templates/SearchHorizontal';
 
 // TRACKERS
 export * from './components/Trackers/Recommendation/ProfileTracker';
diff --git a/packages/snap-preact/components/src/providers/langComponents.ts b/packages/snap-preact/components/src/providers/langComponents.ts
index 131166171..bc4feb6f3 100644
--- a/packages/snap-preact/components/src/providers/langComponents.ts
+++ b/packages/snap-preact/components/src/providers/langComponents.ts
@@ -44,10 +44,10 @@ import type { SortByLang } from '../components/Molecules/SortBy';
 // import type { SwatchesLang } from '../components/Molecules/Swatches';
 // import type { VariantSelectionLang } from '../components/Molecules/VariantSelection';
 import type { FacetLang } from '../components/Organisms/Facet';
-import type { HorizontalFacetsLang } from '../components/Organisms/HorizontalFacets';
+import type { FacetsHorizontalLang } from '../components/Organisms/FacetsHorizontal';
 // import type { FacetsLang } from '../components/Organisms/Facets';
 import type { FilterSummaryLang } from '../components/Organisms/FilterSummary';
-import type { RecommendationBundleLang } from '../components/Organisms/RecommendationBundle';
+import type { RecommendationBundleLang } from '../components/Templates/RecommendationBundle';
 // import type { ResultsLang } from '../components/Organisms/Results';
 import type { SearchHeaderLang } from '../components/Atoms/SearchHeader';
 import type { SidebarLang } from '../components/Organisms/Sidebar';
@@ -55,7 +55,7 @@ import type { SidebarLang } from '../components/Organisms/Sidebar';
 import type { AutocompleteLang } from '../components/Templates/Autocomplete';
 import type { RecommendationLang } from '../components/Templates/Recommendation';
 import type { SearchLang } from '../components/Templates/Search';
-// import type { HorizontalSearchLang } from '../components/Templates/HorizontalSearch';
+// import type { SearchHorizontalLang } from '../components/Templates/SearchHorizontal';
 import type { NoResultsLang } from '../components/Atoms/NoResults';
 import type { MobileSidebarLang } from '../components/Organisms/MobileSidebar';
 
@@ -115,7 +115,7 @@ export type LangComponentOverrides = {
 	/* ORGANISMS */
 	facet?: Partial<FacetLang>;
 	// facets?: Partial<FacetsLang>
-	horizontalFacets?: Partial<HorizontalFacetsLang>;
+	facetsHorizontal?: Partial<FacetsHorizontalLang>;
 	filterSummary?: Partial<FilterSummaryLang>;
 	noResults?: Partial<NoResultsLang>;
 	recommendationBundle?: Partial<RecommendationBundleLang>;
@@ -128,7 +128,7 @@ export type LangComponentOverrides = {
 	autocomplete?: Partial<AutocompleteLang>;
 	recommendation?: Partial<RecommendationLang>;
 	search?: Partial<SearchLang>;
-	// horizontalSearch?: Partial<HorizontalSearchLang>
+	// searchHorizontal?: Partial<SearchHorizontalLang>
 };
 
 export type LangComponents = {
@@ -185,7 +185,7 @@ export type LangComponents = {
 	/* ORGANISMS */
 	facet: FacetLang;
 	// facets: FacetsLang
-	horizontalFacets: HorizontalFacetsLang;
+	facetsHorizontal: FacetsHorizontalLang;
 	filterSummary: FilterSummaryLang;
 	noResults: NoResultsLang;
 	recommendationBundle: RecommendationBundleLang;
@@ -198,5 +198,5 @@ export type LangComponents = {
 	autocomplete: AutocompleteLang;
 	recommendation: RecommendationLang;
 	search: SearchLang;
-	// horizontalSearch: HorizontalSearchLang
+	// searchHorizontal: SearchHorizontalLang
 };
diff --git a/packages/snap-preact/components/src/providers/theme.ts b/packages/snap-preact/components/src/providers/theme.ts
index 486f67ee7..a6ac81bdf 100644
--- a/packages/snap-preact/components/src/providers/theme.ts
+++ b/packages/snap-preact/components/src/providers/theme.ts
@@ -1,4 +1,4 @@
-import { ThemeComponents } from './themeComponents';
+import { ThemeComponentOverrides } from './themeComponents';
 import { ListOption } from '../types';
 import type { DeepPartial } from '../../../src/types';
 
@@ -56,11 +56,11 @@ export type Theme = {
 	name?: string; // Used as a flag in components to provide backwards compatability
 	variables?: ThemeVariables;
 	responsive?: [ThemeResponsive, ThemeResponsive, ThemeResponsive, ThemeResponsive];
-	components?: ThemeComponents;
+	components?: ThemeComponentOverrides;
 	layoutOptions?: ListOption[];
 };
 
-type ThemeResponsive = Pick<Theme, 'components' | 'layoutOptions'>;
+export type ThemeResponsive = Pick<Theme, 'components' | 'layoutOptions'>;
 export type ThemePartial = Omit<Theme, 'variables' | 'name'> & { variables?: ThemeVariablesPartial };
 export type ThemeOverrides = Pick<Theme, 'components' | 'layoutOptions' | 'responsive'>;
 export type ThemeMinimal = Pick<Theme, 'components'>;
diff --git a/packages/snap-preact/components/src/providers/themeComponents.ts b/packages/snap-preact/components/src/providers/themeComponents.ts
index be48fa6d6..1cf51ebd7 100644
--- a/packages/snap-preact/components/src/providers/themeComponents.ts
+++ b/packages/snap-preact/components/src/providers/themeComponents.ts
@@ -45,19 +45,19 @@ import type { SwatchesProps } from '../components/Molecules/Swatches';
 import type { VariantSelectionProps } from '../components/Molecules/VariantSelection';
 import type { BranchOverrideProps } from '../components/Organisms/BranchOverride';
 import type { FacetProps } from '../components/Organisms/Facet';
-import type { HorizontalFacetsProps } from '../components/Organisms/HorizontalFacets';
+import type { FacetsHorizontalProps } from '../components/Organisms/FacetsHorizontal';
 import type { FacetsProps } from '../components/Organisms/Facets';
 import type { FilterSummaryProps } from '../components/Organisms/FilterSummary';
-import type { RecommendationBundleProps } from '../components/Organisms/RecommendationBundle';
-import type { RecommendationGridProps } from '../components/Organisms/RecommendationGrid';
 import type { ResultsProps } from '../components/Organisms/Results';
 import type { SearchHeaderProps } from '../components/Atoms/SearchHeader';
 import type { SidebarProps } from '../components/Organisms/Sidebar';
 import type { ToolbarProps, ToolbarNames } from '../components/Organisms/Toolbar';
 import type { AutocompleteProps } from '../components/Templates/Autocomplete';
 import type { RecommendationProps } from '../components/Templates/Recommendation';
+import type { RecommendationBundleProps } from '../components/Templates/RecommendationBundle';
+import type { RecommendationGridProps } from '../components/Templates/RecommendationGrid';
 import type { SearchProps } from '../components/Templates/Search';
-import type { HorizontalSearchProps } from '../components/Templates/HorizontalSearch';
+import type { SearchHorizontalProps } from '../components/Templates/SearchHorizontal';
 import type { NoResultsProps } from '../components/Atoms/NoResults';
 import type { MobileSidebarProps } from '../components/Organisms/MobileSidebar';
 
@@ -72,6 +72,76 @@ type UnNamedThemeComponentSelectors<ComponentType extends string> = ComponentTyp
 type GenericComponentProps<Props> = Partial<Omit<Props, 'breakpoints'>>;
 
 export type ThemeComponents = {
+	/* ATOMS */
+	badgeImage: GenericComponentProps<BadgeImageProps>;
+	badgePill: GenericComponentProps<BadgePillProps>;
+	badgeRectangle: GenericComponentProps<BadgeRectangleProps>;
+	badgeText: GenericComponentProps<BadgeTextProps>;
+	breadcrumbs: GenericComponentProps<BreadcrumbsProps>;
+	button: GenericComponentProps<ButtonProps>;
+	dropdown: GenericComponentProps<DropdownProps>;
+	formattedNumber: GenericComponentProps<FormattedNumberProps>;
+	icon: GenericComponentProps<IconProps>;
+	image: GenericComponentProps<ImageProps>;
+	loadingBar: GenericComponentProps<LoadingBarProps>;
+	banner: GenericComponentProps<BannerProps>;
+	inlineBanner: GenericComponentProps<InlineBannerProps>;
+	overlay: GenericComponentProps<OverlayProps>;
+	price: GenericComponentProps<PriceProps>;
+	skeleton: GenericComponentProps<SkeletonProps>;
+	terms: GenericComponentProps<TermsProps>;
+	toggle: GenericComponentProps<ToggleProps>;
+	/* MOLECULES */
+	calloutBadge: GenericComponentProps<CalloutBadgeProps>;
+	carousel: GenericComponentProps<CarouselProps>;
+	checkbox: GenericComponentProps<CheckboxProps>;
+	grid: GenericComponentProps<GridProps>;
+	layoutSelector: GenericComponentProps<LayoutSelectorProps>;
+	list: GenericComponentProps<ListProps>;
+	radio: GenericComponentProps<RadioProps>;
+	errorHandler: GenericComponentProps<ErrorHandlerProps>;
+	facetGridOptions: GenericComponentProps<FacetGridOptionsProps>;
+	facetHierarchyOptions: GenericComponentProps<FacetHierarchyOptionsProps>;
+	facetListOptions: GenericComponentProps<FacetListOptionsProps>;
+	facetPaletteOptions: GenericComponentProps<FacetPaletteOptionsProps>;
+	facetSlider: GenericComponentProps<FacetSliderProps>;
+	facetToggle: GenericComponentProps<FacetToggleProps>;
+	filter: GenericComponentProps<FilterProps>;
+	loadMore: GenericComponentProps<LoadMoreProps>;
+	overlayBadge: GenericComponentProps<OverlayBadgeProps>;
+	pagination: GenericComponentProps<PaginationProps>;
+	perPage: GenericComponentProps<PerPageProps>;
+	radioList: GenericComponentProps<RadioListProps>;
+	rating: GenericComponentProps<RatingProps>;
+	result: GenericComponentProps<ResultProps>;
+	searchInput: GenericComponentProps<SearchInputProps>;
+	select: GenericComponentProps<SelectProps>;
+	slideout: GenericComponentProps<SlideoutProps>;
+	sortBy: GenericComponentProps<SortByProps>;
+	swatches: GenericComponentProps<SwatchesProps>;
+	variantSelection: GenericComponentProps<VariantSelectionProps>;
+	/* ORGANISMS */
+	branchOverride: GenericComponentProps<BranchOverrideProps>;
+	facet: GenericComponentProps<FacetProps>;
+	facets: GenericComponentProps<FacetsProps>;
+	facetsHorizontal: GenericComponentProps<FacetsHorizontalProps>;
+	filterSummary: GenericComponentProps<FilterSummaryProps>;
+	noResults: GenericComponentProps<NoResultsProps>;
+	results: GenericComponentProps<ResultsProps>;
+	searchHeader: GenericComponentProps<SearchHeaderProps>;
+	sidebar: GenericComponentProps<SidebarProps>;
+	mobileSidebar: GenericComponentProps<MobileSidebarProps>;
+	toolbar: GenericComponentProps<ToolbarProps>;
+	/* TEMPLATES */
+	autocomplete: GenericComponentProps<AutocompleteProps>;
+	recommendation: GenericComponentProps<RecommendationProps>;
+	recommendationBundle: GenericComponentProps<RecommendationBundleProps>;
+	recommendationGrid: GenericComponentProps<RecommendationGridProps>;
+	search: GenericComponentProps<SearchProps>;
+	searchHorizontal: GenericComponentProps<SearchHorizontalProps>;
+};
+
+export type ThemeComponentOverrides = {
 	/* ATOMS */
 	[K in UnNamedThemeComponentSelectors<'badgeImage'>]?: GenericComponentProps<BadgeImageProps>;
 } & { [K in UnNamedThemeComponentSelectors<'badgePill'>]?: GenericComponentProps<BadgePillProps> } & {
@@ -123,19 +193,19 @@ export type ThemeComponents = {
 } /* ORGANISMS */ & { [K in UnNamedThemeComponentSelectors<'branchOverride'>]?: GenericComponentProps<BranchOverrideProps> } & {
 	[K in UnNamedThemeComponentSelectors<'facet'>]?: GenericComponentProps<FacetProps>;
 } & { [K in UnNamedThemeComponentSelectors<'facets'>]?: GenericComponentProps<FacetsProps> } & {
-	[K in UnNamedThemeComponentSelectors<'horizontalFacets'>]?: GenericComponentProps<HorizontalFacetsProps>;
+	[K in UnNamedThemeComponentSelectors<'facetsHorizontal'>]?: GenericComponentProps<FacetsHorizontalProps>;
 } & { [K in UnNamedThemeComponentSelectors<'filterSummary'>]?: GenericComponentProps<FilterSummaryProps> } & {
 	[K in UnNamedThemeComponentSelectors<'noResults'>]?: GenericComponentProps<NoResultsProps>;
-} & { [K in UnNamedThemeComponentSelectors<'recommendationBundle'>]?: GenericComponentProps<RecommendationBundleProps> } & {
+} & {
 	[K in UnNamedThemeComponentSelectors<'results'>]?: GenericComponentProps<ResultsProps>;
 } & { [K in UnNamedThemeComponentSelectors<'searchHeader'>]?: GenericComponentProps<SearchHeaderProps> } & {
 	[K in UnNamedThemeComponentSelectors<'sidebar'>]?: GenericComponentProps<SidebarProps>;
 } & { [K in UnNamedThemeComponentSelectors<'mobileSidebar'>]?: GenericComponentProps<MobileSidebarProps> } & {
 	[K in NamedThemeComponentSelectors<'toolbar', ToolbarNames>]?: GenericComponentProps<ToolbarProps>;
-} & {
-	[K in UnNamedThemeComponentSelectors<'recommendationGrid'>]?: GenericComponentProps<RecommendationGridProps>;
 } /* TEMPLATES */ & { [K in UnNamedThemeComponentSelectors<'autocomplete'>]?: GenericComponentProps<AutocompleteProps> } & {
 	[K in UnNamedThemeComponentSelectors<'recommendation'>]?: GenericComponentProps<RecommendationProps>;
+} & { [K in UnNamedThemeComponentSelectors<'recommendationBundle'>]?: GenericComponentProps<RecommendationBundleProps> } & {
+	[K in UnNamedThemeComponentSelectors<'recommendationGrid'>]?: GenericComponentProps<RecommendationGridProps>;
 } & { [K in UnNamedThemeComponentSelectors<'search'>]?: GenericComponentProps<SearchProps> } & {
-	[K in UnNamedThemeComponentSelectors<'horizontalSearch'>]?: GenericComponentProps<HorizontalSearchProps>;
+	[K in UnNamedThemeComponentSelectors<'searchHorizontal'>]?: GenericComponentProps<SearchHorizontalProps>;
 };
diff --git a/packages/snap-preact/components/src/themes/bocachica/bocachica.ts b/packages/snap-preact/components/src/themes/bocachica/bocachica.ts
new file mode 100644
index 000000000..2106f6157
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/bocachica.ts
@@ -0,0 +1,31 @@
+import { Theme, ThemeVariables } from '../../providers';
+import { components } from './components';
+import { layoutOptions } from './layoutOptions';
+import { responsive } from './responsive';
+
+const bocachicaVariables: ThemeVariables = {
+	breakpoints: [0, 767, 999, 1299],
+	colors: {
+		primary: '#202223',
+		secondary: '#6d7175',
+		accent: '#6d7175',
+		active: {
+			foreground: '#ffffff',
+			background: '#6d7175',
+			accent: '#ffffff',
+		},
+		hover: {
+			foreground: '#ffffff',
+			background: '#000000',
+			accent: '#ffffff',
+		},
+	},
+};
+
+export const bocachica: Theme = {
+	name: 'bocachica',
+	variables: bocachicaVariables,
+	components,
+	layoutOptions,
+	responsive,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts
new file mode 100644
index 000000000..3b63bccc1
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts
@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import type { BadgeImageProps } from '../../../../components/Atoms/BadgeImage';
+
+// CSS in JS style script for the BadgeImage component
+const badgeImageStyleScript = () => {
+	return css({
+		maxHeight: '90%',
+		maxWidth: '90%',
+	});
+};
+
+// BadgeImage component props
+export const badgeImage: Partial<BadgeImageProps> = {
+	styleScript: badgeImageStyleScript,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts
similarity index 88%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts
index 9508f2a13..8eeb46a54 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BadgePillProps } from '../../../../../components/Atoms/BadgePill';
+import type { BadgePillProps } from '../../../../components/Atoms/BadgePill';
 
 // CSS in JS style script for the BadgePill component
 const badgePillStyleScript = ({ color, colorText, theme }: BadgePillProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts
index 9c805ca79..712488220 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BadgeRectangleProps } from '../../../../../components/Atoms/BadgeRectangle';
+import type { BadgeRectangleProps } from '../../../../components/Atoms/BadgeRectangle';
 
 // CSS in JS style script for the BadgeRectangle component
 const badgeRectangleStyleScript = ({ color, colorText, theme }: BadgeRectangleProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts
similarity index 88%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts
index eba5d7a98..d7ea0ea51 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BadgeTextProps } from '../../../../../components/Atoms/BadgeText';
+import type { BadgeTextProps } from '../../../../components/Atoms/BadgeText';
 
 // CSS in JS style script for the BadgeText component
 const badgeTextStyleScript = ({ colorText, theme }: BadgeTextProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts
similarity index 83%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts
index 02c96acec..677dc75f5 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BannerProps } from '../../../../../components/Atoms/Merchandising/Banner';
+import type { BannerProps } from '../../../../components/Atoms/Merchandising/Banner';
 
 // CSS in JS style script for the Banner component
 const bannerStyleScript = ({ theme }: BannerProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts
index 3eec7fe43..b387554ac 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BreadcrumbsProps } from '../../../../../components/Atoms/Breadcrumbs';
+import type { BreadcrumbsProps } from '../../../../components/Atoms/Breadcrumbs';
 
 // CSS in JS style script for the Breadcrumbs component
 const breadcrumbsStyleScript = ({ theme }: BreadcrumbsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts
similarity index 93%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts
index 3c4091e50..a9a30a747 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ButtonProps } from '../../../../../components/Atoms/Button';
+import type { ButtonProps } from '../../../../components/Atoms/Button';
 
 // CSS in JS style script for the Button component
 const buttonStyleScript = ({ color, backgroundColor, borderColor, theme }: ButtonProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts
similarity index 92%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts
index 1c3b37ebf..70ca705c9 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { DropdownProps } from '../../../../../components/Atoms/Dropdown';
+import type { DropdownProps } from '../../../../components/Atoms/Dropdown';
 
 // CSS in JS style script for the Dropdown component
 const dropdownStyleScript = ({ disableOverlay, theme }: DropdownProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts
index 66570c777..214172d27 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FormattedNumberProps } from '../../../../../components/Atoms/FormattedNumber';
+import type { FormattedNumberProps } from '../../../../components/Atoms/FormattedNumber';
 
 // CSS in JS style script for the FormattedNumber component
 const formattedNumberStyleScript = ({ theme }: FormattedNumberProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts
index 1b371f712..7bab7d129 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { IconProps } from '../../../../../components/Atoms/Icon';
+import type { IconProps } from '../../../../components/Atoms/Icon';
 
 // CSS in JS style script for the Icon component
 const iconStyleScript = ({ color, height, width, size, theme }: IconProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts
similarity index 90%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts
index 28f039d54..dfbf4633f 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ImageProps } from '../../../../../components/Atoms/Image';
+import type { ImageProps } from '../../../../components/Atoms/Image';
 
 // CSS in JS style script for the Image component
 const imageStyleScript = ({ visibility, theme }: ImageProps & { visibility: React.CSSProperties['visibility'] }) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts
new file mode 100644
index 000000000..80c598b3c
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts
@@ -0,0 +1,21 @@
+// ATOMS
+export { badgeImage } from './badgeImage';
+export { badgePill } from './badgePill';
+export { badgeRectangle } from './badgeRectangle';
+export { badgeText } from './badgeText';
+export { banner } from './banner';
+export { breadcrumbs } from './breadcrumbs';
+export { button } from './button';
+export { dropdown } from './dropdown';
+export { formattedNumber } from './formattedNumber';
+export { icon } from './icon';
+export { image } from './image';
+export { inlineBanner } from './inlineBanner';
+export { loadingBar } from './loadingBar';
+export { noResults } from './noResults';
+export { overlay } from './overlay';
+export { price } from './price';
+export { searchHeader } from './searchHeader';
+export { skeleton } from './skeleton';
+export { terms } from './terms';
+export { toggle } from './toggle';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts
similarity index 88%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts
index da950bee5..28e29249c 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { InlineBannerProps } from '../../../../../components/Atoms/Merchandising/InlineBanner';
+import type { InlineBannerProps } from '../../../../components/Atoms/Merchandising/InlineBanner';
 
 // CSS in JS style script for the InlineBanner component
 const inlineBannerStyleScript = ({ width, theme }: InlineBannerProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts
similarity index 92%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts
index 11a508d74..3f1c68c91 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts
@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import type { LoadingBarProps } from '../../../../../components/Atoms/Loading';
+import type { LoadingBarProps } from '../../../../components/Atoms/Loading';
 
 // CSS in JS style script for the LoadingBar component
 const loadingBarStyleScript = ({ color, height, backgroundColor, theme }: LoadingBarProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts
similarity index 84%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts
index d16641304..f4064ac7e 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { NoResultsProps } from '../../../../../components/Atoms/NoResults';
+import type { NoResultsProps } from '../../../../components/Atoms/NoResults';
 
 // CSS in JS style script for the NoResults component
 const noResultsStyleScript = ({ theme }: NoResultsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts
similarity index 90%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts
index 67e65ee40..948d520f2 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { OverlayProps } from '../../../../../components/Atoms/Overlay';
+import type { OverlayProps } from '../../../../components/Atoms/Overlay';
 
 // CSS in JS style script for the Overlay component
 const overlayStyleScript = ({ color, transitionSpeed, theme }: OverlayProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts
index db30bce07..2489ad976 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { PriceProps } from '../../../../../components/Atoms/Price';
+import type { PriceProps } from '../../../../components/Atoms/Price';
 
 // CSS in JS style script for the Price component
 const priceStyleScript = ({ theme }: PriceProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts
similarity index 84%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts
index a388b91b9..2ae8cc307 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SearchHeaderProps } from '../../../../../components/Atoms/SearchHeader';
+import type { SearchHeaderProps } from '../../../../components/Atoms/SearchHeader';
 
 // CSS in JS style script for the SearchHeader component
 const searchHeaderStyleScript = ({ theme }: SearchHeaderProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts
similarity index 94%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts
index 36a0072f0..2e4c99d70 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts
@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import type { SkeletonProps } from '../../../../../components/Atoms/Skeleton';
+import type { SkeletonProps } from '../../../../components/Atoms/Skeleton';
 
 // CSS in JS style script for the Skeleton component
 const skeletonStyleScript = ({ width, height, round, backgroundColor, animatedColor, theme }: SkeletonProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts
similarity index 83%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts
index c201121c8..a57b6b47e 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { TermsProps } from '../../../../../components/Atoms/Terms';
+import type { TermsProps } from '../../../../components/Atoms/Terms';
 
 // CSS in JS style script for the Terms component
 const termsStyleScript = ({ theme }: TermsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts
similarity index 96%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts
index 2af7fc71c..63eb748da 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ToggleProps } from '../../../../../components/Atoms/Toggle';
+import type { ToggleProps } from '../../../../components/Atoms/Toggle';
 
 // CSS in JS style script for the Toggle component
 const toggleStyleScript = ({ activeColor, inactiveColor: deActiveColor, buttonColor, size, theme }: ToggleProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/index.ts
new file mode 100644
index 000000000..3a73bac8a
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/index.ts
@@ -0,0 +1,13 @@
+import * as atoms from './atoms';
+import * as molecules from './molecules';
+import * as organisms from './organisms';
+import * as templates from './templates';
+
+import type { ThemeComponents } from '../../../providers';
+
+export const components: ThemeComponents = {
+	...atoms,
+	...molecules,
+	...organisms,
+	...templates,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts
new file mode 100644
index 000000000..a7f807e15
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts
@@ -0,0 +1,4 @@
+import type { CalloutBadgeProps } from '../../../../components/Molecules/CalloutBadge';
+
+// CalloutBadge component props
+export const calloutBadge: Partial<CalloutBadgeProps> = {};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts
similarity index 97%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts
index f768088d4..e448c20f1 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { CarouselProps } from '../../../../../components/Molecules/Carousel';
+import type { CarouselProps } from '../../../../components/Molecules/Carousel';
 
 // CSS in JS style script for the Carousel component
 const carouselStyleScript = ({ vertical, theme }: CarouselProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts
similarity index 90%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts
index eb0fd9ee6..218cf5e6a 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { CheckboxProps } from '../../../../../components/Molecules/Checkbox';
+import type { CheckboxProps } from '../../../../components/Molecules/Checkbox';
 
 // CSS in JS style script for the Checkbox component
 const checkboxStyleScript = ({ size, color, theme }: CheckboxProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts
similarity index 91%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts
index 0ea650d51..3383ecb3b 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import type { ErrorHandlerProps } from '../../../../../components/Molecules/ErrorHandler';
-import { lightenDarkenColor } from '../../../../../utilities';
+import type { ErrorHandlerProps } from '../../../../components/Molecules/ErrorHandler';
+import { lightenDarkenColor } from '../../../../utilities';
 
 // CSS in JS style script for the ErrorHandler component
 const errorHandlerStyleScript = ({ theme }: ErrorHandlerProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts
similarity index 95%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts
index 1ee50e495..fad3ebc3d 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetGridOptionsProps } from '../../../../../components/Molecules/FacetGridOptions';
+import type { FacetGridOptionsProps } from '../../../../components/Molecules/FacetGridOptions';
 
 // CSS in JS style script for the FacetGridOptions component
 const facetGridOptionsStyleScript = ({ columns, gapSize, gridSize, theme }: FacetGridOptionsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts
similarity index 95%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts
index 31074be1c..6b85b801f 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetHierarchyOptionsProps } from '../../../../../components/Molecules/FacetHierarchyOptions';
+import type { FacetHierarchyOptionsProps } from '../../../../components/Molecules/FacetHierarchyOptions';
 
 // CSS in JS style script for the FacetHierarchyOptions component
 const facetHierarchyOptionsStyleScript = ({ horizontal, theme }: FacetHierarchyOptionsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts
similarity index 92%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts
index b37db560a..6ea03f557 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetListOptionsProps } from '../../../../../components/Molecules/FacetListOptions';
+import type { FacetListOptionsProps } from '../../../../components/Molecules/FacetListOptions';
 
 // CSS in JS style script for the FacetListOptions component
 const facetListOptionsStyleScript = ({ hideCheckbox, horizontal, theme }: FacetListOptionsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts
similarity index 95%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts
index 27717cdf7..05a57278d 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetPaletteOptionsProps } from '../../../../../components/Molecules/FacetPaletteOptions';
+import type { FacetPaletteOptionsProps } from '../../../../components/Molecules/FacetPaletteOptions';
 
 // CSS in JS style script for the FacetPaletteOptions component
 const facetPaletteStyleScript = ({ columns, gapSize, theme }: FacetPaletteOptionsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts
similarity index 97%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts
index 95097488f..b9fdc75ff 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetSliderProps } from '../../../../../components/Molecules/FacetSlider';
+import type { FacetSliderProps } from '../../../../components/Molecules/FacetSlider';
 
 // CSS in JS style script for the FacetSlider component
 const facetSliderStyleScript = ({
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts
index 9d966b2f7..28ecc3ac5 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetToggleProps } from '../../../../../components/Molecules/FacetToggle';
+import type { FacetToggleProps } from '../../../../components/Molecules/FacetToggle';
 
 // CSS in JS style script for the FacetToggle component
 const facetToggleStyleScript = ({ theme }: FacetToggleProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts
similarity index 88%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts
index d87862348..66c96fdca 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FilterProps } from '../../../../../components/Molecules/Filter';
+import type { FilterProps } from '../../../../components/Molecules/Filter';
 
 // CSS in JS style script for the Filter component
 const filterStyleScript = ({ theme }: FilterProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts
new file mode 100644
index 000000000..9b0845625
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts
@@ -0,0 +1,4 @@
+import type { GridProps } from '../../../../components/Molecules/Grid';
+
+// Grid component props
+export const grid: Partial<GridProps> = {};
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts
new file mode 100644
index 000000000..d5854e0a1
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts
@@ -0,0 +1,29 @@
+// MOLECULES
+export { calloutBadge } from './calloutBadge';
+export { carousel } from './carousel';
+export { checkbox } from './checkbox';
+export { errorHandler } from './errorHandler';
+export { facetGridOptions } from './facetGridOptions';
+export { facetHierarchyOptions } from './facetHierarchyOptions';
+export { facetListOptions } from './facetListOptions';
+export { facetPaletteOptions } from './facetPaletteOptions';
+export { facetSlider } from './facetSlider';
+export { facetToggle } from './facetToggle';
+export { filter } from './filter';
+export { grid } from './grid';
+export { layoutSelector } from './layoutSelector';
+export { list } from './list';
+export { loadMore } from './loadMore';
+export { overlayBadge } from './overlayBadge';
+export { pagination } from './pagination';
+export { radio } from './radio';
+export { radioList } from './radioList';
+export { result } from './result';
+export { searchInput } from './searchInput';
+export { select } from './select';
+export { slideout } from './slideout';
+export { perPage } from './perPage';
+export { rating } from './rating';
+export { sortBy } from './sortBy';
+export { swatches } from './swatches';
+export { variantSelection } from './variantSelection';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts
index 76f2793bc..55f7380e8 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { LayoutSelectorProps } from '../../../../../components/Molecules/LayoutSelector';
+import type { LayoutSelectorProps } from '../../../../components/Molecules/LayoutSelector';
 
 // CSS in JS style script for the LayoutSelector component
 const layoutSelectorStyleScript = ({ theme }: LayoutSelectorProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts
similarity index 94%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts
index 239cf3d41..3443e469c 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ListProps } from '../../../../../components/Molecules/List';
+import type { ListProps } from '../../../../components/Molecules/List';
 
 // CSS in JS style script for the List component
 const listStyleScript = ({ horizontal, theme }: ListProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts
similarity index 98%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts
index e77ac2550..fcf47a2ac 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts
@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import type { LoadMoreProps } from '../../../../../components/Molecules/LoadMore';
+import type { LoadMoreProps } from '../../../../components/Molecules/LoadMore';
 
 // CSS in JS style script for the LoadMore component
 const loadMoreStyleScript = ({
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts
new file mode 100644
index 000000000..9ed97d3e9
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts
@@ -0,0 +1,4 @@
+import type { OverlayBadgeProps } from '../../../../components/Molecules/OverlayBadge';
+
+// OverlayBadge component props
+export const overlayBadge: Partial<OverlayBadgeProps> = {};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts
index 50833ba7b..8885389c5 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { PaginationProps } from '../../../../../components/Molecules/Pagination';
+import type { PaginationProps } from '../../../../components/Molecules/Pagination';
 
 // CSS in JS style script for the Pagination component
 const paginationStyleScript = ({ theme }: PaginationProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts
index cc43eaa64..47f90e1c4 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { PerPageProps } from '../../../../../components/Molecules/PerPage';
+import type { PerPageProps } from '../../../../components/Molecules/PerPage';
 
 // CSS in JS style script for the PerPage component
 const perPageStyleScript = ({ theme }: PerPageProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts
similarity index 91%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts
index dbf016679..08e6937d9 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { RadioProps } from '../../../../../components/Molecules/Radio';
+import type { RadioProps } from '../../../../components/Molecules/Radio';
 
 // CSS in JS style script for the Radio component
 const radioStyleScript = ({ size, native, theme }: RadioProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts
similarity index 92%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts
index 6bf0cb50e..379e01e35 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { RadioListProps } from '../../../../../components/Molecules/RadioList';
+import type { RadioListProps } from '../../../../components/Molecules/RadioList';
 
 // CSS in JS style script for the RadioList component
 const radioListStyleScript = ({ theme }: RadioListProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts
similarity index 93%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts
index f7a0c0d0c..c89046ab5 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { RatingProps } from '../../../../../components/Molecules/Rating';
+import type { RatingProps } from '../../../../components/Molecules/Rating';
 
 // CSS in JS style script for the Rating component
 const ratingStyleScript = ({ emptyRatingSrc, fullRatingSrc, theme }: RatingProps & { emptyRatingSrc?: string; fullRatingSrc?: string }) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts
similarity index 94%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts
index 04a26d27f..f89960036 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ResultProps } from '../../../../../components/Molecules/Result';
+import type { ResultProps } from '../../../../components/Molecules/Result';
 
 // CSS in JS style script for the Result component
 const resultStyleScript = ({ theme }: ResultProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts
index 2b37dde57..2dc512686 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SearchInputProps } from '../../../../../components/Molecules/SearchInput';
+import type { SearchInputProps } from '../../../../components/Molecules/SearchInput';
 
 // CSS in JS style script for the SearchInput component
 const searchInputStyleScript = ({ theme }: SearchInputProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts
similarity index 95%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts
index cabff505d..6faa2d800 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SelectProps } from '../../../../../components/Molecules/Select';
+import type { SelectProps } from '../../../../components/Molecules/Select';
 
 // CSS in JS style script for the Select component
 const selectStyleScript = ({ color, backgroundColor, borderColor, theme }: SelectProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts
similarity index 93%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts
index 655d40bf5..8fac24237 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SlideoutProps } from '../../../../../components/Molecules/Slideout';
+import type { SlideoutProps } from '../../../../components/Molecules/Slideout';
 
 // CSS in JS style script for the Slideout component
 const slideoutStyleScript = ({ isActive, width, transitionSpeed, slideDirection, theme }: SlideoutProps & { isActive: boolean }) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts
index f4668220a..9465876b7 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SortByProps } from '../../../../../components/Molecules/SortBy';
+import type { SortByProps } from '../../../../components/Molecules/SortBy';
 
 // CSS in JS style script for the SortBy component
 const sortByStyleScript = ({ theme }: SortByProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts
new file mode 100644
index 000000000..699ac4b7b
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts
@@ -0,0 +1,4 @@
+import type { SwatchesProps } from '../../../../components/Molecules/Swatches';
+
+// Swatches component props
+export const swatches: Partial<SwatchesProps> = {};
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts
new file mode 100644
index 000000000..b09f143b3
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts
@@ -0,0 +1,4 @@
+import type { VariantSelectionProps } from '../../../../components/Molecules/VariantSelection';
+
+// VariantSelection component props
+export const variantSelection: Partial<VariantSelectionProps> = {};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts
similarity index 98%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts
index 248f69fec..75ca5598a 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { BranchOverrideProps, BranchOverrideTheme } from '../../../../../components/Organisms/BranchOverride';
+import type { BranchOverrideProps, BranchOverrideTheme } from '../../../../components/Organisms/BranchOverride';
 
 const darkTheme: BranchOverrideTheme = {
 	class: 'ss__branch-override--dark',
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts
similarity index 95%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts
index d34407ecc..18fcd1bdc 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetProps } from '../../../../../components/Organisms/Facet';
+import type { FacetProps } from '../../../../components/Organisms/Facet';
 
 // CSS in JS style script for the Facet component
 const facetStyleScript = ({ color, theme }: FacetProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts
similarity index 82%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts
index 70988eaad..e68e0bf1f 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FacetsProps } from '../../../../../components/Organisms/Facets';
+import type { FacetsProps } from '../../../../components/Organisms/Facets';
 
 // CSS in JS style script for the Facets component
 const facetsStyleScript = ({ theme }: FacetsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts
similarity index 77%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts
index 7bcedf872..16ac740d8 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts
@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
-import type { HorizontalFacetsProps } from '../../../../../components/Organisms/HorizontalFacets';
+import type { FacetsHorizontalProps } from '../../../../components/Organisms/FacetsHorizontal';
 
 // CSS in JS style script for the Facets component
-const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => {
+const facetsHorizontalStyleScript = ({ theme }: FacetsHorizontalProps) => {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const variables = theme?.variables;
 
 	return css({
-		'& .ss__horizontal-facets__header': {
+		'& .ss__facets-horizontal__header': {
 			display: 'flex',
 			flexWrap: 'wrap',
 
@@ -15,7 +15,7 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => {
 				margin: '0 10px',
 			},
 
-			'& .ss__horizontal-facets__header__dropdown': {
+			'& .ss__facets-horizontal__header__dropdown': {
 				flex: '0 0 0%',
 				margin: '0 0 10px 0',
 				boxSizing: 'border-box',
@@ -53,8 +53,8 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => {
 				},
 			},
 		},
-		'&.ss__horizontal-facets--overlay': {
-			'& .ss__horizontal-facets__header__dropdown': {
+		'&.ss__facets-horizontal--overlay': {
+			'& .ss__facets-horizontal__header__dropdown': {
 				'&.ss__dropdown--open': {
 					'& .ss__dropdown__content': {
 						border: `1px solid ${variables?.colors?.active?.background || '#ccc'}`,
@@ -74,7 +74,7 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => {
 };
 
 // Facets component props
-export const horizontalFacets: Partial<HorizontalFacetsProps> = {
-	styleScript: horizontalFacetsStyleScript,
+export const facetsHorizontal: Partial<FacetsHorizontalProps> = {
+	styleScript: facetsHorizontalStyleScript,
 	iconCollapse: 'angle-down',
 };
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts
similarity index 90%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts
index 867235fac..9162ce0db 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { FilterSummaryProps } from '../../../../../components/Organisms/FilterSummary';
+import type { FilterSummaryProps } from '../../../../components/Organisms/FilterSummary';
 
 // CSS in JS style script for the FilterSummary component
 const filterSummaryStyleScript = ({ theme }: FilterSummaryProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts
new file mode 100644
index 000000000..3f0c66cd7
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts
@@ -0,0 +1,10 @@
+// ORGANISMS
+export { branchOverride } from './branchOverride';
+export { facet } from './facet';
+export { facets } from './facets';
+export { facetsHorizontal } from './facetsHorizontal';
+export { filterSummary } from './filterSummary';
+export { mobileSidebar } from './mobileSidebar';
+export { results } from './results';
+export { sidebar } from './sidebar';
+export { toolbar } from './toolbar';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts
similarity index 89%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts
index d3256b59c..192fd755a 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { MobileSidebarProps } from '../../../../../components/Organisms/MobileSidebar';
+import type { MobileSidebarProps } from '../../../../components/Organisms/MobileSidebar';
 
 // CSS in JS style script for the MobileSidebar component
 const mobileSidebarStyleScript = ({ theme }: MobileSidebarProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts
similarity index 93%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts
index 1116cff6d..68a571bb0 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ResultsProps } from '../../../../../components/Organisms/Results';
+import type { ResultsProps } from '../../../../components/Organisms/Results';
 
 // CSS in JS style script for the Results component
 const resultsStyleScript = ({ columns, gapSize, theme }: ResultsProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts
similarity index 85%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts
index 9b32645ae..6b88fdb49 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SidebarProps } from '../../../../../components/Organisms/Sidebar';
+import type { SidebarProps } from '../../../../components/Organisms/Sidebar';
 
 // CSS in JS style script for the Sidebar component
 const sidebarStyleScript = ({ theme }: SidebarProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts
index 6b722f45b..e20f94d65 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ToolbarProps } from '../../../../../components/Organisms/Toolbar';
+import type { ToolbarProps } from '../../../../components/Organisms/Toolbar';
 
 // CSS in JS style script for the Toolbar component
 const toolbarStyleScript = ({ theme }: ToolbarProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts
similarity index 98%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts
index da24e03af..c36332840 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { AutocompleteProps } from '../../../../../components/Templates/Autocomplete';
+import type { AutocompleteProps } from '../../../../components/Templates/Autocomplete';
 
 // CSS in JS style script for the Autocomplete component
 const autocompleteStyleScript = ({
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts
new file mode 100644
index 000000000..9c232f073
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts
@@ -0,0 +1,7 @@
+// TEMPLATES
+export { autocomplete } from './autocomplete';
+export { recommendation } from './recommendation';
+export { recommendationBundle } from './recommendationBundle';
+export { recommendationGrid } from './recommendationGrid';
+export { search } from './search';
+export { searchHorizontal } from './searchHorizontal';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts
similarity index 87%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts
index 198084468..13eef82ea 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { RecommendationProps } from '../../../../../components/Templates/Recommendation';
+import type { RecommendationProps } from '../../../../components/Templates/Recommendation';
 
 // CSS in JS style script for the Recommendation component
 const recommendationStyleScript = ({ vertical, theme }: RecommendationProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts
new file mode 100644
index 000000000..27b244531
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts
@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import type { RecommendationBundleProps } from '../../../../components/Templates/RecommendationBundle';
+
+// CSS in JS style script for the RecommendationBundle component
+const recommendationBundleStyleScript = () => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+	return css();
+};
+
+// RecommendationBundle component props
+export const recommendationBundle: Partial<RecommendationBundleProps> = {
+	styleScript: recommendationBundleStyleScript,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts
new file mode 100644
index 000000000..39d7f5371
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts
@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import type { RecommendationGridProps } from '../../../../components/Templates/RecommendationGrid';
+
+// CSS in JS style script for the RecommendationGrid component
+const recommendationGridStyleScript = () => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+	return css();
+};
+
+// RecommendationGrid component props
+export const recommendationGrid: Partial<RecommendationGridProps> = {
+	styleScript: recommendationGridStyleScript,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts
similarity index 93%
rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts
rename to packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts
index c84873547..fcda74291 100644
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { SearchProps } from '../../../../../components/Templates/Search';
+import type { SearchProps } from '../../../../components/Templates/Search';
 
 // CSS in JS style script for the Search component
 const searchStyleScript = ({ mobileSidebarDisplayAt, theme }: SearchProps) => {
diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts
new file mode 100644
index 000000000..946f2dacf
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts
@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import type { SearchHorizontalProps } from '../../../../components/Templates/SearchHorizontal';
+
+// CSS in JS style script for the SearchHorizontal component
+const searchHorizontalStyleScript = ({ theme }: SearchHorizontalProps) => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const variables = theme?.variables;
+
+	return css({});
+};
+
+// SearchHorizontal component props
+export const searchHorizontal: Partial<SearchHorizontalProps> = {
+	styleScript: searchHorizontalStyleScript,
+};
diff --git a/packages/snap-preact/components/src/themes/bocachica/index.ts b/packages/snap-preact/components/src/themes/bocachica/index.ts
deleted file mode 100644
index c7617ea51..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/index.ts
+++ /dev/null
@@ -1,350 +0,0 @@
-import { Theme, ThemeVariables } from '../../providers';
-import * as style from './styles/styles';
-
-const bocachicaVariables: ThemeVariables = {
-	breakpoints: [0, 767, 999, 1299],
-	colors: {
-		primary: '#202223',
-		secondary: '#6d7175',
-		accent: '#6d7175',
-		active: {
-			foreground: '#ffffff',
-			background: '#6d7175',
-			accent: '#ffffff',
-		},
-		hover: {
-			foreground: '#ffffff',
-			background: '#000000',
-			accent: '#ffffff',
-		},
-	},
-};
-
-export const bocachica: Theme = {
-	name: 'bocachica',
-	variables: bocachicaVariables,
-	layoutOptions: [
-		{
-			value: 1,
-			icon: 'square',
-			// overrides: {
-			// 	components: {
-			// 		results: {
-			// 			named: {
-			// 				searchResults: { columns: 1 },
-			// 			},
-			// 		},
-			// 	},
-			// },
-		},
-		{
-			value: 2,
-			default: true,
-			icon: 'layout-large',
-			// overrides: {
-			// 	components: {
-			// 		results: {
-			// 			named: {
-			// 				searchResults: { columns: 2 },
-			// 			},
-			// 		},
-			// 	},
-			// },
-		},
-	],
-	components: {
-		// component theme prop overrides
-		// ATOMS
-		badgeImage: {
-			...style.components.badgeImage,
-		},
-		badgePill: {
-			...style.components.badgePill,
-		},
-		badgeRectangle: {
-			...style.components.badgeRectangle,
-		},
-		badgeText: {
-			...style.components.badgeText,
-		},
-		banner: {
-			...style.components.banner,
-		},
-		breadcrumbs: {
-			...style.components.breadcrumbs,
-		},
-		button: {
-			...style.components.button,
-		},
-		dropdown: {
-			...style.components.dropdown,
-		},
-		formattedNumber: {
-			...style.components.formattedNumber,
-		},
-		icon: {
-			...style.components.icon,
-		},
-		image: {
-			...style.components.image,
-		},
-		inlineBanner: {
-			...style.components.inlineBanner,
-		},
-		loadingBar: {
-			...style.components.loadingBar,
-		},
-		noResults: {
-			...style.components.noResults,
-		},
-		overlay: {
-			...style.components.overlay,
-		},
-		price: {
-			...style.components.price,
-		},
-		searchHeader: {
-			...style.components.searchHeader,
-		},
-		skeleton: {
-			...style.components.skeleton,
-		},
-		terms: {
-			...style.components.terms,
-		},
-		toggle: {
-			...style.components.toggle,
-		},
-		// MOLECULES
-		carousel: {
-			...style.components.carousel,
-		},
-		checkbox: {
-			...style.components.checkbox,
-		},
-		errorHandler: {
-			...style.components.errorHandler,
-		},
-		facetGridOptions: {
-			...style.components.facetGridOptions,
-		},
-		facetHierarchyOptions: {
-			...style.components.facetHierarchyOptions,
-		},
-		facetListOptions: {
-			...style.components.facetListOptions,
-		},
-		facetPaletteOptions: {
-			...style.components.facetPaletteOptions,
-		},
-		facetSlider: {
-			...style.components.facetSlider,
-		},
-		facetToggle: {
-			...style.components.facetToggle,
-		},
-		filter: {
-			...style.components.filter,
-		},
-		layoutSelector: {
-			...style.components.layoutSelector,
-		},
-		list: {
-			...style.components.list,
-		},
-		loadMore: {
-			...style.components.loadMore,
-		},
-		pagination: {
-			...style.components.pagination,
-		},
-		perPage: {
-			...style.components.perPage,
-		},
-		radio: {
-			...style.components.radio,
-		},
-		radioList: {
-			...style.components.radioList,
-		},
-		rating: {
-			...style.components.rating,
-		},
-		result: {
-			...style.components.result,
-		},
-		searchInput: {
-			...style.components.searchInput,
-		},
-		select: {
-			...style.components.select,
-		},
-		slideout: {
-			...style.components.slideout,
-		},
-		sortBy: {
-			...style.components.sortBy,
-		},
-		// ORGANISMS
-		branchOverride: {
-			...style.components.branchOverride,
-		},
-		facet: {
-			...style.components.facet,
-		},
-		facets: {
-			...style.components.facets,
-		},
-		horizontalFacets: {
-			...style.components.horizontalFacets,
-		},
-		filterSummary: {
-			...style.components.filterSummary,
-		},
-		mobileSidebar: {
-			...style.components.mobileSidebar,
-		},
-		results: {
-			...style.components.results,
-		},
-		sidebar: {
-			...style.components.sidebar,
-		},
-		toolbar: {
-			...style.components.toolbar,
-		},
-		// TEMPLATES
-		autocomplete: {
-			...style.components.autocomplete,
-		},
-		recommendation: {
-			...style.components.recommendation,
-		},
-		search: {
-			...style.components.search,
-		},
-		horizontalSearch: {
-			...style.components.horizontalSearch,
-		},
-	},
-	responsive: [
-		{
-			components: {
-				results: {
-					columns: 2,
-				},
-				// toolbar: {
-				// 	named: {
-				// 		topToolBar: {
-				// 			hidePagination: true,
-				// 			hideSortBy: true,
-				// 			hidePerPage: true,
-				// 		},
-				// 	},
-				// },
-				autocomplete: {
-					hideFacets: true,
-					vertical: true,
-					horizontalTerms: true,
-					theme: {
-						components: {
-							results: {
-								rows: 1,
-								columns: 2,
-							},
-						},
-					},
-				},
-			},
-		},
-		{
-			components: {
-				results: {
-					columns: 2,
-				},
-				// toolbar: {
-				// 	named: {
-				// 		topToolBar: {
-				// 			hidePagination: true,
-				// 		},
-				// 	},
-				// },
-				autocomplete: {
-					hideFacets: true,
-					vertical: true,
-					horizontalTerms: true,
-					theme: {
-						components: {
-							results: {
-								rows: 1,
-								columns: 3,
-							},
-						},
-					},
-				},
-			},
-		},
-		{
-			layoutOptions: [],
-			components: {
-				results: {
-					columns: 3,
-				},
-				// toolbar: {
-				// 	named: {
-				// 		topToolBar: {
-				// 			hidePagination: true,
-				// 		},
-				// 	},
-				// },
-				autocomplete: {
-					vertical: true,
-					horizontalTerms: true,
-					theme: {
-						components: {
-							results: {
-								rows: 1,
-								columns: 4,
-							},
-							facets: {
-								style: {
-									// horizontal facets
-									width: '100%',
-									display: 'flex',
-								},
-							},
-							facet: {
-								limit: 4,
-							},
-						},
-					},
-				},
-			},
-		},
-		{
-			layoutOptions: [],
-			components: {
-				results: {
-					columns: 4,
-				},
-				// toolbar: {
-				// 	named: {
-				// 		topToolBar: {
-				// 			hidePagination: true,
-				// 		},
-				// 	},
-				// },
-				autocomplete: {
-					theme: {
-						components: {
-							results: {
-								rows: 2,
-								columns: 2,
-							},
-						},
-					},
-				},
-			},
-		},
-	],
-};
diff --git a/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts b/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts
new file mode 100644
index 000000000..4f9e3ca74
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts
@@ -0,0 +1,31 @@
+import { ListOption } from '../../types';
+
+export const layoutOptions: ListOption[] = [
+	{
+		value: 1,
+		icon: 'square',
+		// overrides: {
+		// 	components: {
+		// 		results: {
+		// 			named: {
+		// 				searchResults: { columns: 1 },
+		// 			},
+		// 		},
+		// 	},
+		// },
+	},
+	{
+		value: 2,
+		default: true,
+		icon: 'layout-large',
+		// overrides: {
+		// 	components: {
+		// 		results: {
+		// 			named: {
+		// 				searchResults: { columns: 2 },
+		// 			},
+		// 		},
+		// 	},
+		// },
+	},
+];
diff --git a/packages/snap-preact/components/src/themes/bocachica/responsive.ts b/packages/snap-preact/components/src/themes/bocachica/responsive.ts
new file mode 100644
index 000000000..a62963712
--- /dev/null
+++ b/packages/snap-preact/components/src/themes/bocachica/responsive.ts
@@ -0,0 +1,130 @@
+import { ThemeResponsive } from '../../providers/theme';
+
+const mobileOverrides: ThemeResponsive = {
+	components: {
+		results: {
+			columns: 2,
+		},
+		// toolbar: {
+		// 	named: {
+		// 		topToolBar: {
+		// 			hidePagination: true,
+		// 			hideSortBy: true,
+		// 			hidePerPage: true,
+		// 		},
+		// 	},
+		// },
+		autocomplete: {
+			hideFacets: true,
+			vertical: true,
+			horizontalTerms: true,
+			theme: {
+				components: {
+					results: {
+						rows: 1,
+						columns: 2,
+					},
+				},
+			},
+		},
+	},
+};
+
+const tabletOverrides: ThemeResponsive = {
+	components: {
+		results: {
+			columns: 2,
+		},
+		// toolbar: {
+		// 	named: {
+		// 		topToolBar: {
+		// 			hidePagination: true,
+		// 		},
+		// 	},
+		// },
+		autocomplete: {
+			hideFacets: true,
+			vertical: true,
+			horizontalTerms: true,
+			theme: {
+				components: {
+					results: {
+						rows: 1,
+						columns: 3,
+					},
+				},
+			},
+		},
+	},
+};
+
+const desktopOverrides: ThemeResponsive = {
+	layoutOptions: [],
+	components: {
+		results: {
+			columns: 3,
+		},
+		// toolbar: {
+		// 	named: {
+		// 		topToolBar: {
+		// 			hidePagination: true,
+		// 		},
+		// 	},
+		// },
+		autocomplete: {
+			vertical: true,
+			horizontalTerms: true,
+			theme: {
+				components: {
+					results: {
+						rows: 1,
+						columns: 4,
+					},
+					facets: {
+						style: {
+							// horizontal facets
+							width: '100%',
+							display: 'flex',
+						},
+					},
+					facet: {
+						limit: 4,
+					},
+				},
+			},
+		},
+	},
+};
+
+const widescreenOverrides: ThemeResponsive = {
+	layoutOptions: [],
+	components: {
+		results: {
+			columns: 4,
+		},
+		// toolbar: {
+		// 	named: {
+		// 		topToolBar: {
+		// 			hidePagination: true,
+		// 		},
+		// 	},
+		// },
+		autocomplete: {
+			theme: {
+				components: {
+					results: {
+						rows: 2,
+						columns: 2,
+					},
+				},
+			},
+		},
+	},
+};
+
+export const responsive: [ThemeResponsive, ThemeResponsive, ThemeResponsive, ThemeResponsive] = [
+	mobileOverrides,
+	tabletOverrides,
+	desktopOverrides,
+	widescreenOverrides,
+];
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts
deleted file mode 100644
index 23ae368fc..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// ATOMS
-export { badgeImage } from './badgeimage';
-export { badgePill } from './badgepill';
-export { badgeRectangle } from './badgerectangle';
-export { badgeText } from './badgetext';
-export { banner } from './banner';
-export { breadcrumbs } from './breadcrumbs';
-export { button } from './button';
-export { dropdown } from './dropdown';
-export { formattedNumber } from './formattednumber';
-export { icon } from './icon';
-export { image } from './image';
-export { inlineBanner } from './inlinebanner';
-export { loadingBar } from './loadingbar';
-export { noResults } from './noresults';
-export { overlay } from './overlay';
-export { price } from './price';
-export { searchHeader } from './searchheader';
-export { skeleton } from './skeleton';
-export { terms } from './terms';
-export { toggle } from './toggle';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts
deleted file mode 100644
index b8c27bad4..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from '@emotion/react';
-import type { BadgeImageProps } from '../../../../../components/Atoms/BadgeImage';
-
-// CSS in JS style script for the BadgeImage component
-const badgeImageStyleScript = ({ theme }: BadgeImageProps) => {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const variables = theme?.variables;
-
-	return css({
-		maxHeight: '100%',
-		maxWidth: '100%',
-	});
-};
-
-// BadgeImage component props
-export const badgeImage: Partial<BadgeImageProps> = {
-	styleScript: badgeImageStyleScript,
-};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts
deleted file mode 100644
index dac77b512..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// MOLECULES
-export { carousel } from './carousel';
-export { checkbox } from './checkbox';
-export { errorHandler } from './errorhandler';
-export { facetGridOptions } from './facetgridoptions';
-export { facetHierarchyOptions } from './facethierarchyoptions';
-export { facetListOptions } from './facetlistoptions';
-export { facetPaletteOptions } from './facetpaletteoptions';
-export { facetSlider } from './facetslider';
-export { facetToggle } from './facettoggle';
-export { filter } from './filter';
-export { layoutSelector } from './layoutselector';
-export { list } from './list';
-export { loadMore } from './loadmore';
-export { pagination } from './pagination';
-export { radio } from './radio';
-export { radioList } from './radiolist';
-export { result } from './result';
-export { searchInput } from './searchinput';
-export { select } from './select';
-export { slideout } from './slideout';
-export { perPage } from './perpage';
-export { rating } from './rating';
-export { sortBy } from './sortby';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts
deleted file mode 100644
index 815790ea8..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// ORGANISMS
-export { branchOverride } from './branchoverride';
-export { facet } from './facet';
-export { facets } from './facets';
-export { horizontalFacets } from './horizontalfacets';
-export { filterSummary } from './filtersummary';
-export { mobileSidebar } from './mobilesidebar';
-export { results } from './results';
-export { sidebar } from './sidebar';
-export { toolbar } from './toolbar';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts
deleted file mode 100644
index 3d0d0b7cc..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { css } from '@emotion/react';
-import type { HorizontalSearchProps } from '../../../../../components/Templates/HorizontalSearch';
-
-// CSS in JS style script for the HorizontalSearch component
-const horizontalSearchStyleScript = ({ theme }: HorizontalSearchProps) => {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const variables = theme?.variables;
-
-	return css({});
-};
-
-// HorizontalSearch component props
-export const horizontalSearch: Partial<HorizontalSearchProps> = {
-	styleScript: horizontalSearchStyleScript,
-};
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts
deleted file mode 100644
index 591be4a87..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// TEMPLATES
-export { autocomplete } from './autocomplete';
-export { recommendation } from './recommendation';
-export { search } from './search';
-export { horizontalSearch } from './horizontalsearch';
diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts b/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts
deleted file mode 100644
index 4e2a7dd19..000000000
--- a/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as atoms from './components/atoms/atoms';
-import * as molecules from './components/molecules/molecules';
-import * as organisms from './components/organisms/organisms';
-import * as templates from './components/templates/templates';
-
-export const components = {
-	...atoms,
-	...molecules,
-	...organisms,
-	...templates,
-};
diff --git a/packages/snap-preact/components/src/themes/index.ts b/packages/snap-preact/components/src/themes/index.ts
index cbdbee176..ba7e9bf20 100644
--- a/packages/snap-preact/components/src/themes/index.ts
+++ b/packages/snap-preact/components/src/themes/index.ts
@@ -1,2 +1 @@
-export * from './pike';
-export * from './bocachica';
+export * from './bocachica/bocachica';
diff --git a/packages/snap-preact/components/src/themes/pike/index.ts b/packages/snap-preact/components/src/themes/pike/index.ts
deleted file mode 100644
index e8cc31d4c..000000000
--- a/packages/snap-preact/components/src/themes/pike/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Theme, ThemeVariables } from '../../providers';
-import * as style from './styles/styles';
-
-const pikeVariables: ThemeVariables = {
-	breakpoints: [0, 540, 767, 1200],
-	colors: {
-		primary: 'blue',
-		secondary: 'blue',
-		accent: 'blue',
-		active: {
-			foreground: '',
-			background: '',
-			accent: '',
-		},
-		hover: {
-			foreground: '',
-			background: '',
-			accent: '',
-		},
-	},
-};
-
-export const pike: Theme = {
-	variables: pikeVariables,
-	components: {
-		button: {
-			...style.components.button,
-			// component theme prop overrides
-		},
-	},
-	responsive: [{}, {}, {}, {}],
-};
diff --git a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts b/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts
deleted file mode 100644
index 1733efc0d..000000000
--- a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// COMPONENTS
-export { button } from './button';
diff --git a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts b/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts
deleted file mode 100644
index 63b8fcc0b..000000000
--- a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { css } from '@emotion/react';
-import type { ButtonProps } from '../../../../../components/Atoms/Button';
-
-// CSS in JS style script for the Button component
-const buttonStyleScript = ({ color, backgroundColor, borderColor, theme }: ButtonProps) => {
-	return css({
-		display: 'inline-flex',
-		padding: '5px 10px',
-		position: 'relative',
-		color: color || theme?.variables?.colors?.primary,
-		outline: 0,
-		backgroundColor: backgroundColor || '#fff',
-		border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`,
-		borderRadius: '3px',
-		'&:hover': {
-			cursor: 'pointer',
-			backgroundColor: theme?.variables?.colors?.hover?.background || '#f8f8f8',
-		},
-		'&.ss__button--disabled': {
-			opacity: 0.7,
-			borderColor: 'rgba(51,51,51,0.7)',
-			backgroundColor: 'initial',
-			'&:hover': {
-				cursor: 'default',
-			},
-		},
-	});
-};
-
-// Button component props
-// https://searchspring.github.io/snap/packages/snap-preact-components/docs/?path=/docs/atoms-button--default
-export const button: ButtonProps = {
-	styleScript: buttonStyleScript,
-};
diff --git a/packages/snap-preact/components/src/themes/pike/styles/styles.ts b/packages/snap-preact/components/src/themes/pike/styles/styles.ts
deleted file mode 100644
index 934255f3e..000000000
--- a/packages/snap-preact/components/src/themes/pike/styles/styles.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// ATOMS
-export * as components from './components/atoms/atoms';
diff --git a/packages/snap-preact/components/src/utilities/mergeProps.ts b/packages/snap-preact/components/src/utilities/mergeProps.ts
index 4a3a92c42..6e0f0f112 100644
--- a/packages/snap-preact/components/src/utilities/mergeProps.ts
+++ b/packages/snap-preact/components/src/utilities/mergeProps.ts
@@ -1,5 +1,5 @@
 import type { ComponentProps } from '../types';
-import type { Theme, ThemeComponents } from '../providers';
+import type { Theme, ThemeComponentOverrides } from '../providers';
 
 export function mergeProps<GenericComponentProps = ComponentProps>(
 	componentType: string,
@@ -128,7 +128,7 @@ export function sortSelectors(a: string, b: string): number {
 	return aWeight - bWeight;
 }
 
-export function filterSelectors(themeComponents: ThemeComponents, treePath: string): string[] {
+export function filterSelectors(themeComponents: ThemeComponentOverrides, treePath: string): string[] {
 	const selectors = Object.keys(themeComponents);
 
 	const paths = treePath.split(' ');
diff --git a/packages/snap-preact/src/Templates/SnapTemplate.tsx b/packages/snap-preact/src/Templates/SnapTemplate.tsx
index 3d67ce5f7..e447ff7e3 100644
--- a/packages/snap-preact/src/Templates/SnapTemplate.tsx
+++ b/packages/snap-preact/src/Templates/SnapTemplate.tsx
@@ -21,7 +21,7 @@ export const THEME_EDIT_COOKIE = 'ssThemeEdit';
 export type SearchTargetConfig = {
 	selector: string;
 	theme?: string;
-	component: 'Search' | 'HorizontalSearch'; // various component (template) types allowed
+	component: 'Search' | 'SearchHorizontal'; // various component (template) types allowed
 	resultComponent?: string;
 };
 
@@ -34,7 +34,7 @@ export type AutocompleteTargetConfig = {
 
 export type RecommendationDefaultTargetConfig = {
 	theme?: string;
-	component: 'Recommendation'; // various components (templates) available
+	component: 'Recommendation' | 'RecommendationGrid'; // various components (templates) available
 	resultComponent?: string;
 };
 export type RecommendationEmailTargetConfig = {
diff --git a/packages/snap-preact/src/Templates/Stores/LibraryStore.ts b/packages/snap-preact/src/Templates/Stores/LibraryStore.ts
index ce8bac4ea..fab6900ee 100644
--- a/packages/snap-preact/src/Templates/Stores/LibraryStore.ts
+++ b/packages/snap-preact/src/Templates/Stores/LibraryStore.ts
@@ -79,9 +79,6 @@ export class LibraryStore {
 
 	import: LibraryImports = {
 		theme: {
-			pike: async () => {
-				return this.themes.pike || (this.themes.pike = (await import('./library/themes/pike')).pike);
-			},
 			bocachica: async () => {
 				return this.themes.bocachica || (this.themes.bocachica = (await import('./library/themes/bocachica')).bocachica);
 			},
@@ -99,10 +96,10 @@ export class LibraryStore {
 				Search: async () => {
 					return this.components.search.Search || (this.components.search.Search = (await import('./library/components/Search')).Search);
 				},
-				HorizontalSearch: async () => {
+				SearchHorizontal: async () => {
 					return (
-						this.components.search.HorizontalSearch ||
-						(this.components.search.HorizontalSearch = (await import('./library/components/HorizontalSearch')).HorizontalSearch)
+						this.components.search.SearchHorizontal ||
+						(this.components.search.SearchHorizontal = (await import('./library/components/SearchHorizontal')).SearchHorizontal)
 					);
 				},
 			},
@@ -124,6 +121,14 @@ export class LibraryStore {
 							(this.components.recommendation.default.Recommendation = (await import('./library/components/Recommendation')).Recommendation)
 						);
 					},
+					RecommendationGrid: async () => {
+						return (
+							this.components.recommendation.default.RecommendationGrid ||
+							(this.components.recommendation.default.RecommendationGrid = (
+								await import('./library/components/RecommendationGrid')
+							).RecommendationGrid)
+						);
+					},
 				},
 				email: {},
 			},
diff --git a/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts b/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts
deleted file mode 100644
index 4763ad881..000000000
--- a/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { HorizontalSearch } from '../../../../../components/src/components/Templates/HorizontalSearch';
diff --git a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts
index ad3bc8d28..46d7be507 100644
--- a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts
+++ b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts
@@ -1 +1 @@
-export { RecommendationBundle } from '../../../../../components/src/components/Organisms/RecommendationBundle';
+export { RecommendationBundle } from '../../../../../components/src/components/Templates/RecommendationBundle';
diff --git a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts
new file mode 100644
index 000000000..883a4d85a
--- /dev/null
+++ b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts
@@ -0,0 +1 @@
+export { RecommendationGrid } from '../../../../../components/src/components/Templates/RecommendationGrid';
diff --git a/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts b/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts
new file mode 100644
index 000000000..74d0daf90
--- /dev/null
+++ b/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts
@@ -0,0 +1 @@
+export { SearchHorizontal } from '../../../../../components/src/components/Templates/SearchHorizontal';
diff --git a/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts b/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts
index 7660720b8..1c7a17471 100644
--- a/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts
+++ b/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts
@@ -1 +1 @@
-export { bocachica } from '../../../../../components/src/themes/bocachica';
+export { bocachica } from '../../../../../components/src/themes/bocachica/bocachica';
diff --git a/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts b/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts
deleted file mode 100644
index 3702894cc..000000000
--- a/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { pike } from '../../../../../components/src/themes/pike';
diff --git a/packages/snap-preact/translations/en_translation.ts b/packages/snap-preact/translations/en_translation.ts
index 977f7546f..f4f5e7e89 100644
--- a/packages/snap-preact/translations/en_translation.ts
+++ b/packages/snap-preact/translations/en_translation.ts
@@ -97,7 +97,7 @@ export const en_translation: LangComponents = {
 			value: (data) => `${data}`,
 		},
 	},
-	horizontalFacets: {
+	facetsHorizontal: {
 		dropdownButton: {
 			attributes: {
 				'aria-label': (data) =>