diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html
index 40a064fc76..f2f16d8718 100644
--- a/erpnext/templates/generators/item_group.html
+++ b/erpnext/templates/generators/item_group.html
@@ -1,6 +1,12 @@
 {% extends "templates/web.html" %}
 
-{% block header %}<h1>{{ name }}</h1>{% endblock %}
+{% block header %}
+<h2 class="mb-6">{{ name }}</h2>
+{% endblock header %}
+
+{% block script %}
+<script type="text/javascript" src="/all-products/index.js"></script>
+{% endblock %}
 
 {% block page_content %}
 <div class="item-group-content" itemscope itemtype="http://schema.org/Product">
@@ -9,30 +15,118 @@
 		{% include "templates/includes/slideshow.html" %}
 		{% endif %}
 		{% if description %}<!-- description -->
-		<div class="mb-3" itemprop="description">{{ description or ""}}</div>
+		<div class="item-group-description" itemprop="description">{{ description or ""}}</div>
 		{% endif %}
 	</div>
-	<div class="row">
-		<div class="col-md-8">
-			{% if items %}
-			<div id="search-list">
-				{% for i in range(0, page_length) %}
-					{% if items[i] %}
-						{%- set item = items[i] %}
+	<div class="row mt-5">
+		<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+			<div class="row">
+				{% if items %}
+					{% for item in items %}
 						{% include "erpnext/www/all-products/item_row.html" %}
-					{% endif %}
+					{% endfor %}
+				{% else %}
+					{% include "erpnext/www/all-products/not_found.html" %}
+				{% endif %}
+			</div>
+		</div>
+		<div class="col-12 order-1 col-md-3 order-md-1">
+			<div class="collapse d-md-block mr-4 filters-section" id="product-filters">
+				<div class="d-flex justify-content-between align-items-center mb-5 title-section">
+					<div class="mb-4 filters-title" > {{ _('Filters') }} </div>
+					<a class="mb-4 clear-filters" href="/{{ doc.route }}">{{ _('Clear All') }}</a>
+				</div>
+				{% for field_filter in field_filters %}
+					{%- set item_field =  field_filter[0] %}
+					{%- set values =  field_filter[1] %}
+					<div class="mb-4 filter-block pb-5">
+						<div class="filter-label mb-3">{{ item_field.label }}</div>
+
+						{% if values | len > 20 %}
+						<!-- show inline filter if values more than 20 -->
+						<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
+						{% endif %}
+
+						{% if values %}
+						<div class="filter-options">
+							{% for value in values %}
+							<div class="checkbox" data-value="{{ value }}">
+								<label for="{{value}}">
+									<input type="checkbox"
+										class="product-filter field-filter"
+										id="{{value}}"
+										data-filter-name="{{ item_field.fieldname }}"
+										data-filter-value="{{ value }}"
+									>
+									<span class="label-area">{{ value }}</span>
+								</label>
+							</div>
+							{% endfor %}
+						</div>
+						{% else %}
+						<i class="text-muted">{{ _('No values') }}</i>
+						{% endif %}
+					</div>
+				{% endfor %}
+
+				{% for attribute in attribute_filters %}
+					<div class="mb-4 filter-block pb-5">
+						<div class="filter-label mb-3">{{ attribute.name}}</div>
+						{% if values | len > 20 %}
+						<!-- show inline filter if values more than 20 -->
+						<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
+						{% endif %}
+
+						{% if attribute.item_attribute_values %}
+						<div class="filter-options">
+							{% for attr_value in attribute.item_attribute_values %}
+							<div class="checkbox">
+								<label data-value="{{ value }}">
+									<input type="checkbox"
+										class="product-filter attribute-filter"
+										id="{{attr_value.name}}"
+										data-attribute-name="{{ attribute.name }}"
+										data-attribute-value="{{ attr_value.attribute_value }}"
+										{% if attr_value.checked %} checked {% endif %}>
+										<span class="label-area">{{ attr_value.attribute_value }}</span>
+								</label>
+							</div>
+							{% endfor %}
+						</div>
+						{% else %}
+						<i class="text-muted">{{ _('No values') }}</i>
+						{% endif %}
+					</div>
 				{% endfor %}
 			</div>
-			<div class="item-group-nav-buttons">
-				{% if frappe.form_dict.start|int > 0 %}
-				<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</a>
-				{% endif %}
-				{% if items|length > page_length %}
-				<a class="btn btn-outline-secondary" href="/{{ pathname }}?start={{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</a>
-				{% endif %}
-			</div>
-			{% else %}
-			<div class="text-muted">{{ _("No items listed") }}.</div>
+
+			<script>
+				frappe.ready(() => {
+					$('.product-filter-filter').on('keydown', frappe.utils.debounce((e) => {
+						const $input = $(e.target);
+						const keyword = ($input.val() || '').toLowerCase();
+						const $filter_options = $input.next('.filter-options');
+
+						$filter_options.find('.custom-control').show();
+						$filter_options.find('.custom-control').each((i, el) => {
+							const $el = $(el);
+							const value = $el.data('value').toLowerCase();
+							if (!value.includes(keyword)) {
+								$el.hide();
+							}
+						});
+					}, 300));
+				})
+			</script>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			{% if frappe.form_dict.start|int > 0 %}
+			<button class="btn btn-outline-secondary btn-prev" data-start="{{ frappe.form_dict.start|int - page_length }}">{{ _("Prev") }}</button>
+			{% endif %}
+			{% if items|length >= page_length %}
+			<button class="btn btn-outline-secondary btn-next" data-start="{{ frappe.form_dict.start|int + page_length }}">{{ _("Next") }}</button>
 			{% endif %}
 		</div>
 	</div>