diff --git a/app/client/src/pages/Templates/Template/SimilarTemplates.tsx b/app/client/src/pages/Templates/Template/SimilarTemplates.tsx
index 14e973eeff..074ba9b01d 100644
--- a/app/client/src/pages/Templates/Template/SimilarTemplates.tsx
+++ b/app/client/src/pages/Templates/Template/SimilarTemplates.tsx
@@ -5,46 +5,34 @@ import {
 } from "@appsmith/constants/messages";
 import type { Template as TemplateInterface } from "api/TemplatesApi";
 import { Text, Link } from "design-system";
-import React from "react";
-import type { MasonryProps } from "react-masonry-css";
-import Masonry from "react-masonry-css";
+import React, { useCallback } from "react";
 import styled from "styled-components";
-import Template from ".";
 import { Section } from "./TemplateDescription";
+import FixedHeightTemplate from "./FixedHeightTemplate";
+import BuildingBlock from "../BuildingBlock";
+import { TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE } from "../constants";
 
-export const SimilarTemplatesWrapper = styled.div`
+const SimilarTemplatesWrapper = styled.div`
   padding-right: 132px;
   padding-left: 132px;
-
-  .grid {
-    display: flex;
-    margin-left: ${(props) => -props.theme.spaces[9]}px;
-    margin-top: ${(props) => props.theme.spaces[12]}px;
-  }
-
-  .grid_column {
-    padding-left: ${(props) => props.theme.spaces[9]}px;
-  }
 `;
 
-export const SimilarTemplatesTitleWrapper = styled.div`
+const SimilarTemplatesTitleWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 
-// const BackButtonWrapper = styled.div<{ width?: number }>`
-//   cursor: pointer;
-//   display: flex;
-//   align-items: center;
-//   gap: ${(props) => props.theme.spaces[2]}px;
-//   ${(props) => props.width && `width: ${props.width};`}
-// `;
+const TemplateGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-gap: 16px;
+  margin-top: ${(props) => props.theme.spaces[12]}px;
+`;
 
 interface SimilarTemplatesProp {
   similarTemplates: TemplateInterface[];
   onBackPress: (e: React.MouseEvent) => void;
-  breakpointCols: MasonryProps["breakpointCols"];
   onClick: (template: TemplateInterface) => void;
   onFork?: (template: TemplateInterface) => void;
   className?: string;
@@ -52,6 +40,13 @@ interface SimilarTemplatesProp {
 }
 
 function SimilarTemplates(props: SimilarTemplatesProp) {
+  const handleClick = useCallback(
+    (template: TemplateInterface) => {
+      props.onClick(template);
+    },
+    [props.onClick],
+  );
+
   if (!props.similarTemplates.length) {
     return null;
   }
@@ -67,21 +62,34 @@ function SimilarTemplates(props: SimilarTemplatesProp) {
             {createMessage(VIEW_ALL_TEMPLATES)}
           </Link>
         </SimilarTemplatesTitleWrapper>
-        <Masonry
-          breakpointCols={props.breakpointCols}
-          className="grid"
-          columnClassName="grid_column"
-        >
-          {props.similarTemplates.map((template) => (
-            <Template
-              hideForkTemplateButton={props.isForkingEnabled}
-              key={template.id}
-              onClick={() => props.onClick(template)}
-              onForkTemplateClick={props.onFork}
-              template={template}
-            />
-          ))}
-        </Masonry>
+        <TemplateGrid>
+          {props.similarTemplates.map((template) => {
+            if (
+              template.functions.includes(
+                TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE,
+              )
+            ) {
+              return (
+                <BuildingBlock
+                  buildingBlock={template}
+                  hideForkTemplateButton={props.isForkingEnabled}
+                  key={template.id}
+                  onClick={() => handleClick(template)}
+                  onForkTemplateClick={props.onFork}
+                />
+              );
+            }
+            return (
+              <FixedHeightTemplate
+                hideForkTemplateButton={props.isForkingEnabled}
+                key={template.id}
+                onClick={() => handleClick(template)}
+                onForkTemplateClick={props.onFork}
+                template={template}
+              />
+            );
+          })}
+        </TemplateGrid>
       </Section>
     </SimilarTemplatesWrapper>
   );
diff --git a/app/client/src/pages/Templates/TemplateView.tsx b/app/client/src/pages/Templates/TemplateView.tsx
index aed16c1f47..9d4476561a 100644
--- a/app/client/src/pages/Templates/TemplateView.tsx
+++ b/app/client/src/pages/Templates/TemplateView.tsx
@@ -25,17 +25,11 @@ import SimilarTemplates from "./Template/SimilarTemplates";
 import { templateIdUrl } from "@appsmith/RouteBuilder";
 import TemplateViewHeader from "./TemplateViewHeader";
 import { registerEditorWidgets } from "utils/editor/EditorUtils";
-const breakpointColumnsObject = {
-  default: 4,
-  3000: 3,
-  1500: 3,
-  1024: 2,
-  800: 1,
-};
 
 const Wrapper = styled.div`
   overflow: auto;
   position: relative;
+  width: 100%;
 `;
 
 const TemplateViewWrapper = styled.div`
@@ -198,7 +192,6 @@ export function TemplateView({
       </TemplateViewWrapper>
       {showSimilarTemplate && (
         <SimilarTemplates
-          breakpointCols={breakpointColumnsObject}
           isForkingEnabled={!!workspaceList.length}
           onBackPress={goToTemplateListView}
           onClick={onSimilarTemplateClick}
diff --git a/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx b/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx
index 9cfb34f065..56386a4de2 100644
--- a/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx
+++ b/app/client/src/pages/Templates/TemplatesModal/TemplateDetailedView.tsx
@@ -29,14 +29,6 @@ import LoadingScreen from "./LoadingScreen";
 import PageSelection from "./PageSelection";
 import { Link } from "design-system";
 
-const breakpointColumns = {
-  default: 4,
-  3000: 3,
-  1500: 3,
-  1024: 2,
-  800: 1,
-};
-
 const Wrapper = styled.div`
   height: 85vh;
   display: flex;
@@ -154,7 +146,6 @@ function TemplateDetailedView(props: TemplateDetailedViewProps) {
             <TemplateDescription template={currentTemplate} />
           </TemplateDescriptionWrapper>
           <StyledSimilarTemplatesWrapper
-            breakpointCols={breakpointColumns}
             isForkingEnabled={false}
             onBackPress={props.onBackPress}
             onClick={onSimilarTemplateClick}