diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0317cc74fb..7c1eb01707 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,11 +9,12 @@
       "version": "2.0.0",
       "license": "Apache 2.0",
       "dependencies": {
-        "@cloudscape-design/chat-components": "^1.0.19",
-        "@cloudscape-design/collection-hooks": "^1.0.56",
-        "@cloudscape-design/components": "^3.0.856",
-        "@cloudscape-design/design-tokens": "^3.0.51",
-        "@cloudscape-design/global-styles": "^1.0.33",
+        "@cloudscape-design/chat-components": "^1.0.62",
+        "@cloudscape-design/collection-hooks": "^1.0.74",
+        "@cloudscape-design/component-toolkit": "^1.0.0-beta.120",
+        "@cloudscape-design/components": "^3.0.1091",
+        "@cloudscape-design/design-tokens": "^3.0.60",
+        "@cloudscape-design/global-styles": "^1.0.45",
         "@hookform/resolvers": "^2.9.10",
         "@reduxjs/toolkit": "^1.9.1",
         "ace-builds": "^1.36.3",
@@ -2069,9 +2070,10 @@
       }
     },
     "node_modules/@cloudscape-design/chat-components": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/chat-components/-/chat-components-1.0.19.tgz",
-      "integrity": "sha512-0fjmOQ1Pnw6YW+xVF9ULgTd4bxPZN0tMonHB1yLZ6uq7gMvdHYnvn4DfZUSHBGAgMQgza5bAnNqoDo7eoODUxw==",
+      "version": "1.0.62",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/chat-components/-/chat-components-1.0.62.tgz",
+      "integrity": "sha512-8Tqc5JqLmSMQe2nG0q1I7Q8m08kfuLJCFhTqgfYZDKu9g/HVP8d8Q42FPCcHesGWq1xM+S1wSioxJ5uhdzWE8A==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@cloudscape-design/component-toolkit": "^1.0.0-beta",
         "@cloudscape-design/test-utils-core": "^1.0.0",
@@ -2079,32 +2081,33 @@
       },
       "peerDependencies": {
         "@cloudscape-design/components": "^3",
-        "@cloudscape-design/design-tokens": "^3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": ">=18.2.0"
       }
     },
     "node_modules/@cloudscape-design/collection-hooks": {
-      "version": "1.0.56",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/collection-hooks/-/collection-hooks-1.0.56.tgz",
-      "integrity": "sha512-1nDayJZTXMwb/MDcPzmfr12t423V+leKQI+apA0rb5j19SJhqz9AMUYF9QWBGmHsTV2FlKZI6yghbZBkVWDL6Q==",
+      "version": "1.0.74",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/collection-hooks/-/collection-hooks-1.0.74.tgz",
+      "integrity": "sha512-yAcD7vjFqbwqMCamUcKRXp403u8RcmC9izyPEYiWod9elt7x0GT1ypPyo9ZRyQuFrBsv2nwubBUrChcYaWooZw==",
+      "license": "Apache-2.0",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.8.0"
       }
     },
     "node_modules/@cloudscape-design/component-toolkit": {
-      "version": "1.0.0-beta.79",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/component-toolkit/-/component-toolkit-1.0.0-beta.79.tgz",
-      "integrity": "sha512-gNc71f/tFW83vjGM11w5YO1LiyW6M1U/vRAYMqbbq71EFIw+JeJDwYBddiy2d/jkBHkCtJt/RL2TVH5YqPOMow==",
+      "version": "1.0.0-beta.120",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/component-toolkit/-/component-toolkit-1.0.0-beta.120.tgz",
+      "integrity": "sha512-QQfquFjubZvDpJ+Tlt3UHI3KWGvMhwoksY6tG7E41qOrS9y+YbDJuJyiqaCbm5S2PzZ33JBL0bWsXrJesZu6tA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
         "tslib": "^2.3.1"
       }
     },
     "node_modules/@cloudscape-design/components": {
-      "version": "3.0.856",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/components/-/components-3.0.856.tgz",
-      "integrity": "sha512-e0dK7mibvvdsJOppuCCe29XJzsYcTCDqiuf8bXCafDgaomsgTahPA8TXj3aQyC3rZwEjuLbFj0Uil407mfALIw==",
+      "version": "3.0.1091",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/components/-/components-3.0.1091.tgz",
+      "integrity": "sha512-ESV83m/laX9OkuITjeucYRBi4WQSu9w8yniRZjRapiTH+zTlBxQv8Gcnvr9UYPo3cbYyig2HIdbAlOagDplgfA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@cloudscape-design/collection-hooks": "^1.0.0",
         "@cloudscape-design/component-toolkit": "^1.0.0-beta",
@@ -2113,7 +2116,6 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@juggle/resize-observer": "^3.3.1",
         "ace-builds": "^1.34.0",
         "balanced-match": "^1.0.2",
         "clsx": "^1.1.0",
@@ -2121,25 +2123,26 @@
         "date-fns": "^2.25.0",
         "intl-messageformat": "^10.3.1",
         "mnth": "^2.0.0",
-        "react-keyed-flatten-children": "^1.3.0",
+        "react-keyed-flatten-children": "^2.2.1",
         "react-transition-group": "^4.4.2",
         "tslib": "^2.4.0",
         "weekstart": "^1.1.0"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": ">=16.8.0"
       }
     },
     "node_modules/@cloudscape-design/design-tokens": {
-      "version": "3.0.51",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/design-tokens/-/design-tokens-3.0.51.tgz",
-      "integrity": "sha512-s+qNFxw/FfdMCky86nz6xSIQV4UugRkNQYcT3h/EJAak3PUL37nE3tiPnV5OqOU6ZWfg4dcQMdQ+P1ohBnw9eQ=="
+      "version": "3.0.60",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/design-tokens/-/design-tokens-3.0.60.tgz",
+      "integrity": "sha512-ybj8FfjdhuHZflVDA//ooHJdwc+vny9MESvB95AJpVDhf6PXoaOpWAObn4hkMC770Wk/YwXtKXbx7rjJJQr6ZA==",
+      "license": "Apache-2.0"
     },
     "node_modules/@cloudscape-design/global-styles": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/@cloudscape-design/global-styles/-/global-styles-1.0.33.tgz",
-      "integrity": "sha512-6bg18XIxkRS2ojMNGxVA8mV35rqkiHDXwOJjfHhYPzg6LjFagZWyg/hRRGuP5MExszB748m2HYYdXT0EejxiPA=="
+      "version": "1.0.45",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/global-styles/-/global-styles-1.0.45.tgz",
+      "integrity": "sha512-fSrbVpK9W+bg8tmUYqU9Wh2JGciUCGEByVUQDbgMY6feXtYEUKRP2MBL6kEHvoJB7lssZbHdh5/gYaiyxg+P5w==",
+      "license": "Apache-2.0"
     },
     "node_modules/@cloudscape-design/test-utils-core": {
       "version": "1.0.44",
@@ -20779,21 +20782,17 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/react-keyed-flatten-children": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/react-keyed-flatten-children/-/react-keyed-flatten-children-1.3.0.tgz",
-      "integrity": "sha512-qB7A6n+NHU0x88qTZGAJw6dsqwI941jcRPBB640c/CyWqjPQQ+YUmXOuzPziuHb7iqplM3xksWAbGYwkQT0tXA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-keyed-flatten-children/-/react-keyed-flatten-children-2.2.1.tgz",
+      "integrity": "sha512-6yBLVO6suN8c/OcJk1mzIrUHdeEzf5rtRVBhxEXAHO49D7SlJ70cG4xrSJrBIAG7MMeQ+H/T151mM2dRDNnFaA==",
+      "license": "MIT",
       "dependencies": {
-        "react-is": "^16.8.6"
+        "react-is": "^18.2.0"
       },
       "peerDependencies": {
         "react": ">=15.0.0"
       }
     },
-    "node_modules/react-keyed-flatten-children/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/react-redux": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f3b7069248..a4d4d18be3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -96,11 +96,12 @@
     "webpack-nano": "^1.1.1"
   },
   "dependencies": {
-    "@cloudscape-design/chat-components": "^1.0.19",
-    "@cloudscape-design/collection-hooks": "^1.0.56",
-    "@cloudscape-design/components": "^3.0.856",
-    "@cloudscape-design/design-tokens": "^3.0.51",
-    "@cloudscape-design/global-styles": "^1.0.33",
+    "@cloudscape-design/chat-components": "^1.0.62",
+    "@cloudscape-design/collection-hooks": "^1.0.74",
+    "@cloudscape-design/component-toolkit": "^1.0.0-beta.120",
+    "@cloudscape-design/components": "^3.0.1091",
+    "@cloudscape-design/design-tokens": "^3.0.60",
+    "@cloudscape-design/global-styles": "^1.0.45",
     "@hookform/resolvers": "^2.9.10",
     "@reduxjs/toolkit": "^1.9.1",
     "ace-builds": "^1.36.3",
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index e24d6bd3ee..049aff7b0b 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -13,6 +13,7 @@ export { default as SpaceBetween } from '@cloudscape-design/components/space-bet
 export { default as Container } from '@cloudscape-design/components/container';
 export { default as Spinner } from '@cloudscape-design/components/spinner';
 export { default as Cards } from '@cloudscape-design/components/cards';
+export type { CardsProps } from '@cloudscape-design/components/cards';
 export { default as Header } from '@cloudscape-design/components/header';
 export { default as Link } from '@cloudscape-design/components/link';
 export type { LinkProps } from '@cloudscape-design/components/link';
@@ -32,6 +33,8 @@ export { default as CheckboxCSD } from '@cloudscape-design/components/checkbox';
 export { default as InputCSD } from '@cloudscape-design/components/input';
 export { default as SelectCSD } from '@cloudscape-design/components/select';
 export type { SelectProps as SelectCSDProps } from '@cloudscape-design/components/select';
+export { default as MultiselectCSD } from '@cloudscape-design/components/multiselect';
+export type { MultiselectProps } from '@cloudscape-design/components/multiselect';
 export { default as StatusIndicator } from '@cloudscape-design/components/status-indicator';
 export type { StatusIndicatorProps } from '@cloudscape-design/components/status-indicator';
 export { default as Popover } from '@cloudscape-design/components/popover';
diff --git a/frontend/src/libs/filters.ts b/frontend/src/libs/filters.ts
index d3f06c98df..7546f8d821 100644
--- a/frontend/src/libs/filters.ts
+++ b/frontend/src/libs/filters.ts
@@ -101,3 +101,23 @@ export const requestParamsToTokens = <RequestParamsKeys extends string>({
         tokens,
     };
 };
+
+export const requestParamsToArray = <Key extends string>({
+    searchParams,
+    paramName,
+}: {
+    searchParams: URLSearchParams;
+    paramName: Key;
+}) => {
+    const paramValues: string[] = [];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+
+    for (const [paramKey, paramValue] of searchParams.entries()) {
+        if (paramKey === paramName) {
+            paramValues.push(paramValue);
+        }
+    }
+
+    return paramValues;
+};
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 7c40a16bd9..8f6f95ba31 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -364,7 +364,7 @@
       "quickstart_message_text": "Check out the quickstart guide to get started with dstack",
       "nomatch_message_title": "No matches",
       "nomatch_message_text": "We can't find a match. Try to change project or clear filter",
-      "filter_property_placeholder": "Filter runs by properties",
+      "filter_property_placeholder": "Filter by properties",
       "project": "Project",
       "project_placeholder": "Filtering by project",
       "repo": "Repository",
@@ -449,11 +449,11 @@
   },
   "offer": {
     "title": "Offers",
-    "filter_property_placeholder": "Filter offers by properties",
+    "filter_property_placeholder": "Filter by properties",
     "backend": "Backend",
     "backend_plural": "Backends",
     "availability": "Availability",
-    "groupBy": "Group by",
+    "groupBy": "Group by properties",
     "region": "Region",
     "count": "Count",
     "price": "$/GPU",
@@ -461,6 +461,8 @@
     "spot": "Spot policy",
     "empty_message_title_select_project": "Select a project",
     "empty_message_text_select_project": "Use the filter above to select a project",
+    "empty_message_title_select_groupBy": "Select a group by",
+    "empty_message_text_select_groupBy": "Use the field above to select a group by",
     "empty_message_title": "No offers",
     "empty_message_text": "No offers to display.",
     "nomatch_message_title": "No matches",
@@ -509,7 +511,7 @@
     "nomatch_message_text": "We can't find a match.",
     "nomatch_message_button_label": "Clear filter",
     "active_only": "Active fleets",
-    "filter_property_placeholder": "Filter fleets by properties",
+    "filter_property_placeholder": "Filter by properties",
     "statuses": {
       "active": "Active",
       "submitted": "Submitted",
@@ -519,7 +521,7 @@
     },
     "instances": {
       "active_only": "Active instances",
-      "filter_property_placeholder": "Filter instances by properties",
+      "filter_property_placeholder": "Filter by properties",
       "title": "Instances",
       "empty_message_title": "No instances",
       "empty_message_text": "No instances to display.",
@@ -557,7 +559,7 @@
     "delete_volumes_confirm_title": "Delete volumes",
     "delete_volumes_confirm_message": "Are you sure you want to delete these volumes?",
     "active_only": "Active volumes",
-    "filter_property_placeholder": "Filter volumes by properties",
+    "filter_property_placeholder": "Filter by properties",
 
     "name": "Name",
     "project": "Project name",
diff --git a/frontend/src/pages/Offers/List/hooks/useEmptyMessages.tsx b/frontend/src/pages/Offers/List/hooks/useEmptyMessages.tsx
index f978b8bc69..1d6ba07efb 100644
--- a/frontend/src/pages/Offers/List/hooks/useEmptyMessages.tsx
+++ b/frontend/src/pages/Offers/List/hooks/useEmptyMessages.tsx
@@ -7,10 +7,12 @@ export const useEmptyMessages = ({
     clearFilter,
     isDisabledClearFilter,
     projectNameSelected,
+    groupBySelected,
 }: {
     clearFilter?: () => void;
     isDisabledClearFilter?: boolean;
     projectNameSelected?: boolean;
+    groupBySelected?: boolean;
 }) => {
     const { t } = useTranslation();
 
@@ -24,6 +26,15 @@ export const useEmptyMessages = ({
             );
         }
 
+        if (!groupBySelected) {
+            return (
+                <ListEmptyMessage
+                    title={t('offer.empty_message_title_select_groupBy')}
+                    message={t('offer.empty_message_text_select_groupBy')}
+                ></ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('offer.empty_message_title')} message={t('offer.empty_message_text')}>
                 <Button disabled={isDisabledClearFilter} onClick={clearFilter}>
diff --git a/frontend/src/pages/Offers/List/hooks/useFilters.ts b/frontend/src/pages/Offers/List/hooks/useFilters.ts
index c3dadccfd9..3270bce334 100644
--- a/frontend/src/pages/Offers/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Offers/List/hooks/useFilters.ts
@@ -1,18 +1,24 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import type { PropertyFilterProps } from 'components';
+import type { MultiselectProps, PropertyFilterProps } from 'components';
 
-import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import { useProjectFilter } from 'hooks/useProjectFilter';
+import {
+    EMPTY_QUERY,
+    requestParamsToArray,
+    requestParamsToTokens,
+    tokensToRequestParams,
+    tokensToSearchParams,
+} from 'libs/filters';
 
-import { useProjectFilter } from '../../../../hooks/useProjectFilter';
 import { getPropertyFilterOptions } from '../helpers';
 
 type Args = {
     gpus: IGpu[];
 };
 
-type RequestParamsKeys = 'project_name' | 'gpu_name' | 'gpu_count' | 'gpu_memory' | 'backend' | 'spot_policy';
+type RequestParamsKeys = 'project_name' | 'gpu_name' | 'gpu_count' | 'gpu_memory' | 'backend' | 'spot_policy' | 'group_by';
 
 export const filterKeys: Record<string, RequestParamsKeys> = {
     PROJECT_NAME: 'project_name',
@@ -40,6 +46,12 @@ const spotPolicyOptions = [
     },
 ];
 
+const gpuFilterOption = { label: 'GPU', value: 'gpu' };
+
+const defaultGroupByOptions = [{ ...gpuFilterOption }, { label: 'Backend', value: 'backend' }];
+
+const groupByRequestParamName: RequestParamsKeys = 'group_by';
+
 export const useFilters = ({ gpus }: Args) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { projectOptions } = useProjectFilter({ localStorePrefix: 'offers-list-projects' });
@@ -49,9 +61,23 @@ export const useFilters = ({ gpus }: Args) => {
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
     );
 
+    const [groupBy, setGroupBy] = useState<MultiselectProps.Options>(() => {
+        const selectedGroupBy = requestParamsToArray<RequestParamsKeys>({
+            searchParams,
+            paramName: groupByRequestParamName,
+        });
+
+        if (selectedGroupBy.length) {
+            return defaultGroupByOptions.filter(({ value }) => selectedGroupBy.includes(value));
+        }
+
+        return [gpuFilterOption];
+    });
+
     const clearFilter = () => {
         setSearchParams({});
         setPropertyFilterQuery(EMPTY_QUERY);
+        setGroupBy([]);
     };
 
     const filteringOptions = useMemo(() => {
@@ -84,6 +110,40 @@ export const useFilters = ({ gpus }: Args) => {
         return options;
     }, [gpus]);
 
+    const groupByOptions: MultiselectProps.Options = useMemo(() => {
+        return defaultGroupByOptions.map((option) => {
+            if (option.value === 'gpu' && groupBy.some(({ value }) => value === 'backend')) {
+                return {
+                    ...option,
+                    disabled: true,
+                };
+            }
+
+            if (option.value === 'backend' && !groupBy.some(({ value }) => value === 'gpu')) {
+                return {
+                    ...option,
+                    disabled: true,
+                };
+            }
+
+            return option;
+        });
+    }, [groupBy]);
+
+    const setSearchParamsHandle = ({
+        tokens,
+        groupBy,
+    }: {
+        tokens: PropertyFilterProps.Query['tokens'];
+        groupBy: MultiselectProps.Options;
+    }) => {
+        const searchParams = tokensToSearchParams<RequestParamsKeys>(tokens);
+
+        groupBy.forEach(({ value }) => searchParams.append(groupByRequestParamName, value as string));
+
+        setSearchParams(searchParams);
+    };
+
     const filteringProperties = [
         {
             key: filterKeys.PROJECT_NAME,
@@ -125,7 +185,10 @@ export const useFilters = ({ gpus }: Args) => {
             );
         });
 
-        setSearchParams(tokensToSearchParams<RequestParamsKeys>(filteredTokens));
+        setSearchParamsHandle({
+            tokens: filteredTokens,
+            groupBy: [...groupBy],
+        });
 
         setPropertyFilterQuery({
             operation,
@@ -137,9 +200,24 @@ export const useFilters = ({ gpus }: Args) => {
         onChangePropertyFilterHandle(detail);
     };
 
-    const filteringRequestParams = useMemo(() => {
-        console.log({ tokens: propertyFilterQuery.tokens });
+    const onChangeGroupBy: MultiselectProps['onChange'] = ({ detail }) => {
+        const selectedGpu = detail.selectedOptions.some(({ value }) => value === 'gpu');
 
+        let tempSelectedOptions: MultiselectProps.Options = detail.selectedOptions;
+
+        if (!selectedGpu) {
+            tempSelectedOptions = detail.selectedOptions.filter(({ value }) => value !== 'backend');
+        }
+
+        setSearchParamsHandle({
+            tokens: propertyFilterQuery.tokens,
+            groupBy: tempSelectedOptions,
+        });
+
+        setGroupBy(tempSelectedOptions);
+    };
+
+    const filteringRequestParams = useMemo(() => {
         const params = tokensToRequestParams<RequestParamsKeys>({
             tokens: propertyFilterQuery.tokens,
             arrayFieldKeys: multipleChoiseKeys,
@@ -177,5 +255,8 @@ export const useFilters = ({ gpus }: Args) => {
         onChangePropertyFilter,
         filteringOptions,
         filteringProperties,
+        groupBy,
+        groupByOptions,
+        onChangeGroupBy,
     } as const;
 };
diff --git a/frontend/src/pages/Offers/List/index.tsx b/frontend/src/pages/Offers/List/index.tsx
index f6e9bfb477..eef6204594 100644
--- a/frontend/src/pages/Offers/List/index.tsx
+++ b/frontend/src/pages/Offers/List/index.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Cards, Header, Link, PropertyFilter, SelectCSD, StatusIndicator } from 'components';
+import { Cards, CardsProps, Header, Link, MultiselectCSD, PropertyFilter, StatusIndicator } from 'components';
 
-import { useCollection } from 'hooks';
+import { useBreadcrumbs, useCollection } from 'hooks';
 import { useGetGpusListQuery } from 'services/gpu';
 
 import { useEmptyMessages } from './hooks/useEmptyMessages';
 import { useFilters } from './hooks/useFilters';
+import { ROUTES } from '../../../routes';
 import { convertMiBToGB, rangeToObject, renderRange, round } from './helpers';
 
 import styles from './styles.module.scss';
 
-const gpusFilterOption = { label: 'GPU', value: 'gpu' };
-
 const getRequestParams = ({
     project_name,
     gpu_name,
@@ -21,6 +20,7 @@ const getRequestParams = ({
     gpu_count,
     gpu_memory,
     spot_policy,
+    group_by,
 }: {
     project_name: string;
     gpu_name?: string[];
@@ -28,12 +28,14 @@ const getRequestParams = ({
     gpu_count?: string;
     gpu_memory?: string;
     spot_policy?: TSpot;
+    group_by?: TGpuGroupBy[];
 }): TGpusListQueryParams => {
     const gpuCountMinMax = rangeToObject(gpu_count ?? '');
     const gpuMemoryMinMax = rangeToObject(gpu_memory ?? '');
 
     return {
-        project_name: project_name,
+        project_name,
+        group_by,
         run_spec: {
             configuration: {
                 nodes: 1,
@@ -69,12 +71,19 @@ export const OfferList = () => {
     const { t } = useTranslation();
     const [requestParams, setRequestParams] = useState<TGpusListQueryParams | undefined>();
 
+    useBreadcrumbs([
+        {
+            text: t('offer.title'),
+            href: ROUTES.OFFERS.LIST,
+        },
+    ]);
+
     const { data, isLoading, isFetching } = useGetGpusListQuery(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         requestParams,
         {
-            skip: !requestParams || !requestParams['project_name'],
+            skip: !requestParams || !requestParams['project_name'] || !requestParams['group_by']?.length,
         },
     );
 
@@ -85,26 +94,96 @@ export const OfferList = () => {
         onChangePropertyFilter,
         filteringOptions,
         filteringProperties,
+        groupBy,
+        groupByOptions,
+        onChangeGroupBy,
     } = useFilters({ gpus: data?.gpus ?? [] });
 
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        setRequestParams(getRequestParams(filteringRequestParams));
-    }, [JSON.stringify(filteringRequestParams)]);
+        setRequestParams(
+            getRequestParams({
+                ...filteringRequestParams,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                group_by: groupBy.map(({ value }) => value),
+            }),
+        );
+    }, [JSON.stringify(filteringRequestParams), groupBy]);
 
     const { renderEmptyMessage, renderNoMatchMessage } = useEmptyMessages({
         clearFilter,
         projectNameSelected: Boolean(requestParams?.['project_name']),
+        groupBySelected: Boolean(requestParams?.['group_by']?.length),
     });
 
-    const { items, collectionProps } = useCollection(requestParams?.['project_name'] ? (data?.gpus ?? []) : [], {
-        filtering: {
-            empty: renderEmptyMessage(),
-            noMatch: renderNoMatchMessage(),
+    const { items, collectionProps } = useCollection(
+        requestParams?.['project_name'] && requestParams?.['group_by']?.length ? (data?.gpus ?? []) : [],
+        {
+            filtering: {
+                empty: renderEmptyMessage(),
+                noMatch: renderNoMatchMessage(),
+            },
+            selection: {},
+        },
+    );
+
+    const groupByBackend = groupBy.some(({ value }) => value === 'backend');
+
+    const sections = [
+        {
+            id: 'memory_mib',
+            header: t('offer.memory_mib'),
+            content: (gpu: IGpu) => `${round(convertMiBToGB(gpu.memory_mib))}GB`,
+            width: 50,
         },
-        selection: {},
-    });
+        {
+            id: 'price',
+            header: t('offer.price'),
+            content: (gpu: IGpu) => <span className={styles.greenText}>{renderRange(gpu.price) ?? '-'}</span>,
+            width: 50,
+        },
+        {
+            id: 'count',
+            header: t('offer.count'),
+            content: (gpu: IGpu) => renderRange(gpu.count) ?? '-',
+            width: 50,
+        },
+        !groupByBackend && {
+            id: 'backends',
+            header: t('offer.backend_plural'),
+            content: (gpu: IGpu) => gpu.backends?.join(', ') ?? '-',
+            width: 50,
+        },
+        groupByBackend && {
+            id: 'backend',
+            header: t('offer.backend'),
+            content: (gpu: IGpu) => gpu.backend ?? '-',
+            width: 50,
+        },
+        // {
+        //     id: 'region',
+        //     header: t('offer.region'),
+        //     content: (gpu) => gpu.region ?? gpu.regions?.join(', ') ?? '-',
+        //     width: 50,
+        // },
+        {
+            id: 'spot',
+            header: t('offer.spot'),
+            content: (gpu: IGpu) => gpu.spot.join(', ') ?? '-',
+            width: 50,
+        },
+        {
+            id: 'availability',
+            content: (gpu: IGpu) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                if (gpu.availability === 'not_available') {
+                    return <StatusIndicator type="warning">Not Available</StatusIndicator>;
+                }
+            },
+            width: 50,
+        },
+    ].filter(Boolean) as CardsProps.CardDefinition<IGpu>['sections'];
 
     return (
         <Cards
@@ -112,55 +191,7 @@ export const OfferList = () => {
             items={items}
             cardDefinition={{
                 header: (gpu) => <Link>{gpu.name}</Link>,
-                sections: [
-                    {
-                        id: 'memory_mib',
-                        header: t('offer.memory_mib'),
-                        content: (gpu) => `${round(convertMiBToGB(gpu.memory_mib))}GB`,
-                        width: 50,
-                    },
-                    {
-                        id: 'price',
-                        header: t('offer.price'),
-                        content: (gpu) => <span className={styles.greenText}>{renderRange(gpu.price) ?? '-'}</span>,
-                        width: 50,
-                    },
-                    {
-                        id: 'count',
-                        header: t('offer.count'),
-                        content: (gpu) => renderRange(gpu.count) ?? '-',
-                        width: 50,
-                    },
-                    {
-                        id: 'backends',
-                        header: t('offer.backend_plural'),
-                        content: (gpu) => gpu.backends?.join(', ') ?? '-',
-                        width: 50,
-                    },
-                    // {
-                    //     id: 'region',
-                    //     header: t('offer.region'),
-                    //     content: (gpu) => gpu.region ?? gpu.regions?.join(', ') ?? '-',
-                    //     width: 50,
-                    // },
-                    {
-                        id: 'spot',
-                        header: t('offer.spot'),
-                        content: (gpu) => gpu.spot.join(', ') ?? '-',
-                        width: 50,
-                    },
-                    {
-                        id: 'availability',
-                        content: (gpu) => {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-expect-error
-                            if (gpu.availability === 'not_available') {
-                                return <StatusIndicator type="warning">Not Available</StatusIndicator>;
-                            }
-                        },
-                        width: 50,
-                    },
-                ],
+                sections,
             }}
             loading={isLoading || isFetching}
             loadingText={t('common.loading')}
@@ -188,12 +219,13 @@ export const OfferList = () => {
                     </div>
 
                     <div className={styles.filterField}>
-                        <SelectCSD
-                            inlineLabelText={t('offer.groupBy')}
-                            options={[gpusFilterOption]}
-                            selectedOption={gpusFilterOption}
+                        <MultiselectCSD
+                            placeholder={t('offer.groupBy')}
+                            onChange={onChangeGroupBy}
+                            options={groupByOptions}
+                            selectedOptions={groupBy}
                             expandToViewport={true}
-                            disabled
+                            disabled={isLoading || isFetching}
                         />
                     </div>
                 </div>
diff --git a/frontend/src/pages/Offers/List/styles.module.scss b/frontend/src/pages/Offers/List/styles.module.scss
index 090ba3dbd6..903ae05f73 100644
--- a/frontend/src/pages/Offers/List/styles.module.scss
+++ b/frontend/src/pages/Offers/List/styles.module.scss
@@ -8,7 +8,6 @@
   .filterField {
     flex-shrink: 0;
     width: 240px;
-    margin-top: -10px;
   }
 
   .propertyFilter {
diff --git a/frontend/src/services/gpu.ts b/frontend/src/services/gpu.ts
index ecb5a60a74..9050d19be2 100644
--- a/frontend/src/services/gpu.ts
+++ b/frontend/src/services/gpu.ts
@@ -14,6 +14,10 @@ export const gpuApi = createApi({
     endpoints: (builder) => ({
         getGpusList: builder.query<TGpusListQueryResponse, TGpusListQueryParams>({
             query: ({ project_name, ...body }) => {
+                if (body?.group_by?.length) {
+                    body.group_by = body.group_by.filter((g) => g !== 'gpu');
+                }
+
                 return {
                     url: API.PROJECTS.GPUS_LIST(project_name),
                     method: 'POST',
diff --git a/frontend/src/types/gpu.ts b/frontend/src/types/gpu.ts
index d46dac4447..4ee39a34d2 100644
--- a/frontend/src/types/gpu.ts
+++ b/frontend/src/types/gpu.ts
@@ -1,6 +1,7 @@
 declare type TAvailability = 'unknown' | 'available' | 'not_available' | 'no_quota' | 'no_balance' | 'idle' | 'busy';
 
 declare type TSpot = 'spot' | 'on-demand' | 'auto';
+declare type TGpuGroupBy = 'gpu' | 'backend' | 'region' | 'count';
 
 declare type TRange = {
     min: number;
@@ -73,6 +74,7 @@ declare interface IGpu {
 
 declare type TGpusListQueryParams = {
     project_name: string;
+    group_by?: TGpuGroupBy[];
     run_spec: {
         group_gy?: string;
         spot?: string | boolean;