diff --git a/packages/js/email-editor/src/components/template-select/select-modal.tsx b/packages/js/email-editor/src/components/template-select/select-modal.tsx
index e6b41535c4..89475e1c10 100644
--- a/packages/js/email-editor/src/components/template-select/select-modal.tsx
+++ b/packages/js/email-editor/src/components/template-select/select-modal.tsx
@@ -1,4 +1,4 @@
-
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { dispatch } from '@wordpress/data';
 import {
@@ -15,12 +15,39 @@ import { TemplateCategoriesListSidebar } from './template-categories-list-sideba
 
 const BLANK_TEMPLATE = 'email-general';
 
-export function SelectTemplateModal( {
-	onSelectCallback,
-	closeCallback = null,
-	previewContent = '',
+function SelectTemplateBody( {
+	initialCategory,
+	templateCategories,
+	templates,
+	handleTemplateSelection,
 } ) {
-	const [ templates ] = usePreviewTemplates( previewContent );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<TemplateCategoriesListSidebar
+				templateCategories={ templateCategories }
+				selectedCategory={ selectedCategory }
+				onClickCategory={ setSelectedCategory }
+			/>
+
+			<TemplateList
+				templates={ templates }
+				onTemplateSelection={ handleTemplateSelection }
+				selectedCategory={ selectedCategory }
+			/>
+		</div>
+	);
+}
+
+export function SelectTemplateModal( {
+                                       onSelectCallback,
+                                       closeCallback = null,
+                                       previewContent = '',
+                                     } ) {
+  const [ templates ] = usePreviewTemplates( previewContent );
 
 	const hasTemplates = templates?.length > 0;
 
@@ -49,44 +76,43 @@ export function SelectTemplateModal( {
 		handleTemplateSelection( blankTemplate );
 	};
 
-  const dummyTemplateCategories = [
-    {
-      name: 'recent',
-      label: 'Recent'
-    },
-    {
-      name: 'basic',
-      label: 'Basic'
-    }
-  ];
-
-  const onClickCategory = () => {}
+	const dummyTemplateCategories = [
+		{
+			name: 'recent',
+			label: 'Recent',
+		},
+		{
+			name: 'basic',
+			label: 'Basic',
+		},
+	];
 
 	return (
 		<Modal
-			title="Select a template"
-			onRequestClose={ () =>
-				closeCallback ? closeCallback() : handleCloseWithoutSelection()
-			}
+			title={ __( 'Select a template', 'mailpoet' ) }
+      onRequestClose={ () =>
+        closeCallback ? closeCallback() : handleCloseWithoutSelection()
+      }
 			isFullScreen
 		>
-			<div className="block-editor-block-patterns-explorer">
-        <TemplateCategoriesListSidebar templateCategories={dummyTemplateCategories} selectedCategory={dummyTemplateCategories[0].name} onClickCategory={onClickCategory} />
+			<SelectTemplateBody
+				initialCategory={ dummyTemplateCategories[ 0 ] }
+				templateCategories={ dummyTemplateCategories }
+				templates={ templates }
+				handleTemplateSelection={ handleTemplateSelection }
+			/>
 
-        <TemplateList templates={templates} onTemplateSelection={ handleTemplateSelection} />
-
-        <Flex justify="flex-end">
-          <FlexItem>
-            <Button
-              variant="tertiary"
-              onClick={ () => handleCloseWithoutSelection() }
-              isBusy={ ! hasTemplates }
-            >
-              { __( 'Start from scratch', 'mailpoet' ) }
-            </Button>
-          </FlexItem>
-        </Flex>
-			</div>
+      <Flex justify="flex-end">
+        <FlexItem>
+          <Button
+            variant="tertiary"
+            onClick={ () => handleCloseWithoutSelection() }
+            isBusy={ ! hasTemplates }
+          >
+            { __( 'Start from scratch', 'mailpoet' ) }
+          </Button>
+        </FlexItem>
+      </Flex>
 		</Modal>
 	);
 }
diff --git a/packages/js/email-editor/src/components/template-select/template-list.tsx b/packages/js/email-editor/src/components/template-select/template-list.tsx
index 0e39c4f3ac..af56f87ef3 100644
--- a/packages/js/email-editor/src/components/template-select/template-list.tsx
+++ b/packages/js/email-editor/src/components/template-select/template-list.tsx
@@ -1,67 +1,83 @@
+import { useMemo } from '@wordpress/element';
 // @ts-expect-error No types available for this component
 import { BlockPreview } from '@wordpress/block-editor';
 import {
-  __experimentalHStack as HStack, // eslint-disable-line
+	__experimentalHStack as HStack, // eslint-disable-line
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Async } from './async';
 
-export function TemplateList({templates, onTemplateSelection}) {
+function TemplateListBox( { templates, onTemplateSelection } ) {
+	return (
+		<div className="block-editor-block-patterns-list" role="listbox">
+			{ templates.map( ( template ) => (
+				<div
+					key={ template.slug }
+					className="block-editor-block-patterns-list__list-item"
+				>
+					<div
+						className="block-editor-block-patterns-list__item"
+						role="button"
+						tabIndex={ 0 }
+						onClick={ () => {
+							onTemplateSelection( template );
+						} }
+						onKeyPress={ ( event ) => {
+							if ( event.key === 'Enter' || event.key === ' ' ) {
+								onTemplateSelection( template );
+							}
+						} }
+					>
+						<Async
+							placeholder={
+								<p>
+									{ __( 'rendering template', 'mailpoet' ) }
+								</p>
+							}
+						>
+							<BlockPreview
+								blocks={ template.previewContentParsed }
+								viewportWidth={ 900 }
+								minHeight={ 300 }
+								additionalStyles={ [
+									{
+										css: template.template.email_theme_css,
+									},
+								] }
+							/>
 
-  return (
-    <div className="block-editor-block-patterns-explorer__list">
-      <div
-        className="block-editor-block-patterns-list"
-        role="listbox"
-      >
-        {templates.map((template) => (
-          <div
-            key={template.slug}
-            className="block-editor-block-patterns-list__list-item"
-          >
-            <div
-              className="block-editor-block-patterns-list__item"
-              role="button"
-              tabIndex={0}
-              onClick={() => {
-                onTemplateSelection(template);
-              }}
-              onKeyPress={(event) => {
-                if (
-                  event.key === 'Enter' ||
-                  event.key === ' '
-                ) {
-                  onTemplateSelection(template);
-                }
-              }}
-            >
-              <Async
-                placeholder={
-                  <p>rendering template</p>
-                }
-              >
-                <BlockPreview
-                  blocks={template.previewContentParsed}
-                  viewportWidth={900}
-                  minHeight={300}
-                  additionalStyles={[
-                    {
-                      css: template.template.email_theme_css,
-                    },
-                  ]}
-                />
-
-                <HStack className="block-editor-patterns__pattern-details">
-                  <div className="block-editor-block-patterns-list__item-title">
-                    {
-                      template.template.title.rendered
-                    }
-                  </div>
-                </HStack>
-              </Async>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+							<HStack className="block-editor-patterns__pattern-details">
+								<div className="block-editor-block-patterns-list__item-title">
+									{ template.template.title.rendered }
+								</div>
+							</HStack>
+						</Async>
+					</div>
+				</div>
+			) ) }
+		</div>
+	);
+}
+
+export function TemplateList( {
+	templates,
+	onTemplateSelection,
+	selectedCategory,
+} ) {
+	const filteredTemplates = useMemo(
+		() =>
+			templates.filter(
+				( template ) => template.category === selectedCategory
+			),
+		[ selectedCategory, templates ]
+	);
+
+	return (
+		<div className="block-editor-block-patterns-explorer__list">
+			<TemplateListBox
+				templates={ filteredTemplates }
+				onTemplateSelection={ onTemplateSelection }
+			/>
+		</div>
+	);
 }
diff --git a/packages/js/email-editor/src/hooks/use-preview-templates.ts b/packages/js/email-editor/src/hooks/use-preview-templates.ts
index 2132bbf80a..4b4251abb8 100644
--- a/packages/js/email-editor/src/hooks/use-preview-templates.ts
+++ b/packages/js/email-editor/src/hooks/use-preview-templates.ts
@@ -103,6 +103,7 @@ export function usePreviewTemplates(
 						? contentPatternBlocksGeneral
 						: contentPatternBlocks,
 				template,
+				category: 'basic', // TODO: This will be updated once template category is implemented
 			};
 		} ),
 	];
diff --git a/packages/js/email-editor/src/store/types.ts b/packages/js/email-editor/src/store/types.ts
index c032145f9d..801a914f0c 100644
--- a/packages/js/email-editor/src/store/types.ts
+++ b/packages/js/email-editor/src/store/types.ts
@@ -228,8 +228,11 @@ export type TemplatePreview = {
 	previewContentParsed: BlockInstance[];
 	emailParsed: BlockInstance[];
 	template: EmailTemplatePreview;
+	category?: TemplateCategory;
 };
 
+export type TemplateCategory = 'recent' | 'basic';
+
 export type Feature =
 	| 'fullscreenMode'
 	| 'showIconLabels'