diff --git a/.changeset/four-lions-happen.md b/.changeset/four-lions-happen.md
new file mode 100644
index 00000000000..ef5cad476b6
--- /dev/null
+++ b/.changeset/four-lions-happen.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now you can re-order products within the collection.
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 1f9035102e6..7671ec86b1c 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -5488,6 +5488,9 @@
     "context": "card update success alert title",
     "string": "Successfully updated card balance"
   },
+  "XAvER/": {
+    "string": "Product reordered"
+  },
   "XB2Jj9": {
     "context": "create app button",
     "string": "Create App"
@@ -7897,6 +7900,9 @@
     "context": "label",
     "string": "External app"
   },
+  "nABmvC": {
+    "string": "No. of rows"
+  },
   "nBzIBG": {
     "string": "Delete permission group"
   },
diff --git a/package-lock.json b/package-lock.json
index 11c69bd7d6a..1ddd10ef40e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "BSD-3-Clause",
       "dependencies": {
         "@apollo/client": "3.4.17",
-        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
         "@editorjs/editorjs": "^2.30.7",
@@ -1668,9 +1668,9 @@
       }
     },
     "node_modules/@dnd-kit/accessibility": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
-      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -1679,12 +1679,12 @@
       }
     },
     "node_modules/@dnd-kit/core": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
-      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "dependencies": {
-        "@dnd-kit/accessibility": "^3.0.0",
-        "@dnd-kit/utilities": "^3.2.1",
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
@@ -1706,9 +1706,9 @@
       }
     },
     "node_modules/@dnd-kit/utilities": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
-      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -22466,20 +22466,20 @@
       }
     },
     "@dnd-kit/accessibility": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
-      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@dnd-kit/core": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
-      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "requires": {
-        "@dnd-kit/accessibility": "^3.0.0",
-        "@dnd-kit/utilities": "^3.2.1",
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
         "tslib": "^2.0.0"
       }
     },
@@ -22493,9 +22493,9 @@
       }
     },
     "@dnd-kit/utilities": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
-      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
       "requires": {
         "tslib": "^2.0.0"
       }
diff --git a/package.json b/package.json
index 4d77f5bf6ad..740243a3126 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.17",
-    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@editorjs/editorjs": "^2.30.7",
diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
index d7476afd192..99899edc695 100644
--- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
+++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
@@ -1,8 +1,7 @@
 // @ts-strict-ignore
 import { ChannelCollectionData } from "@dashboard/channels/utils";
-import { collectionListPath } from "@dashboard/collections/urls";
+import { collectionListPath, CollectionUrlQueryParams } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
-import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -21,14 +20,13 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { ChannelProps, ListActions, PageListProps } from "../../../types";
+import { ChannelProps, PageListProps } from "../../../types";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 import CollectionProducts from "../CollectionProducts/CollectionProducts";
 import CollectionUpdateForm, { CollectionUpdateData } from "./form";
 
-export interface CollectionDetailsPageProps extends PageListProps, ListActions, ChannelProps {
-  onAdd: () => void;
+export interface CollectionDetailsPageProps extends PageListProps, ChannelProps {
   channelsCount: number;
   channelsErrors: CollectionChannelListingErrorFragment[];
   collection: CollectionDetailsQuery["collection"];
@@ -38,10 +36,10 @@ export interface CollectionDetailsPageProps extends PageListProps, ListActions,
   onCollectionRemove: () => void;
   onImageDelete: () => void;
   onImageUpload: (file: File) => void;
-  onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
   onSubmit: (data: CollectionUpdateData) => SubmitPromise;
   onChannelsChange: (data: ChannelCollectionData[]) => void;
   openChannelsModal: () => void;
+  params: CollectionUrlQueryParams;
 }
 
 const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
@@ -80,7 +78,6 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
           <TopNav href={collectionListBackLink} title={collection?.name} />
           <DetailPageLayout.Content>
             <CollectionDetails data={data} disabled={disabled} errors={errors} onChange={change} />
-            <CardSpacer />
             <CollectionImage
               data={data}
               image={collection?.backgroundImage}
@@ -88,15 +85,13 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
               onImageUpload={onImageUpload}
               onChange={change}
             />
-            <CardSpacer />
             <Metadata data={data} onChange={handlers.changeMetadata} />
-            <CardSpacer />
             <CollectionProducts
               disabled={disabled}
               collection={collection}
+              currentChannels={currentChannels}
               {...collectionProductsProps}
             />
-            <CardSpacer />
             <SeoForm
               description={data.seoDescription}
               disabled={disabled}
diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
index 3244b20cb9a..cdd9ac40680 100644
--- a/src/collections/components/CollectionProducts/CollectionProducts.tsx
+++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -1,201 +1,256 @@
+import { ChannelCollectionData } from "@dashboard/channels/utils";
+import {
+  collectionUrl,
+  CollectionUrlDialog,
+  CollectionUrlQueryParams,
+} from "@dashboard/collections/urls";
+import {
+  getAssignedProductIdsToCollection,
+  getProductsFromSearchResults,
+} from "@dashboard/collections/utils";
+import ActionDialog from "@dashboard/components/ActionDialog/ActionDialog";
+import { Container } from "@dashboard/components/AssignContainerDialog";
+import AssignProductDialog from "@dashboard/components/AssignProductDialog/AssignProductDialog";
 import { DashboardCard } from "@dashboard/components/Card";
-import { ChannelsAvailabilityDropdown } from "@dashboard/components/ChannelsAvailabilityDropdown";
-import Checkbox from "@dashboard/components/Checkbox";
-import ResponsiveTable from "@dashboard/components/ResponsiveTable";
-import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
-import TableCellAvatar from "@dashboard/components/TableCellAvatar";
-import { AVATAR_MARGIN } from "@dashboard/components/TableCellAvatar/Avatar";
-import TableHead from "@dashboard/components/TableHead";
-import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
-import TableRowLink from "@dashboard/components/TableRowLink";
-import { CollectionDetailsQuery } from "@dashboard/graphql";
-import { productUrl } from "@dashboard/products/urls";
+import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "@dashboard/config";
+import {
+  CollectionDetailsQuery,
+  useCollectionAssignProductMutation,
+  useCollectionProductsQuery,
+  useUnassignCollectionProductMutation,
+} from "@dashboard/graphql";
+import useBulkActions from "@dashboard/hooks/useBulkActions";
+import useListSettings from "@dashboard/hooks/useListSettings";
+import useLocalPaginator, { useLocalPaginationState } from "@dashboard/hooks/useLocalPaginator";
+import useNavigator from "@dashboard/hooks/useNavigator";
+import useNotifier from "@dashboard/hooks/useNotifier";
+import { PaginatorContext } from "@dashboard/hooks/usePaginator";
+import useProductSearch from "@dashboard/searches/useProductSearch";
+import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
-import { TableBody, TableCell, TableFooter } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { Button, Skeleton, TrashBinIcon } from "@saleor/macaw-ui-next";
+import { Button, Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { renderCollection } from "../../../misc";
-import { ListActions, PageListProps } from "../../../types";
+import { ListViews } from "../../../types";
+import { Pagination } from "./Pagination";
+import { ProductsTable } from "./ProductsTable";
+import { ProductTableSkeleton } from "./ProductTableSkeleton";
+import { useCollectionId } from "./useCollectionId";
 
-const useStyles = makeStyles(
-  theme => ({
-    colActions: {
-      width: `calc(76px + ${theme.spacing(1)})`,
-      marginRight: theme.spacing(-2),
-    },
-    colName: {
-      paddingLeft: 0,
-      width: "auto",
-    },
-    colNameLabel: {
-      marginLeft: AVATAR_MARGIN,
-    },
-    colPublished: {
-      width: 200,
-    },
-    colType: {
-      width: 200,
-    },
-    table: {
-      tableLayout: "fixed",
-    },
-    tableRow: {
-      cursor: "pointer",
-    },
-  }),
-  { name: "CollectionProducts" },
-);
-
-export interface CollectionProductsProps extends PageListProps, ListActions {
+export interface CollectionProductsProps {
   collection: CollectionDetailsQuery["collection"];
-  onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
-  onAdd: () => void;
+  params: CollectionUrlQueryParams;
+  currentChannels: ChannelCollectionData[];
+  disabled: boolean;
 }
 
-const CollectionProducts: React.FC<CollectionProductsProps> = props => {
-  const {
-    collection,
-    disabled,
-    onAdd,
-    onProductUnassign,
-    isChecked,
-    selected,
-    toggle,
-    toggleAll,
-    toolbar,
-  } = props;
-  const classes = useStyles(props);
+const CollectionProducts: React.FC<CollectionProductsProps> = ({
+  collection,
+  params,
+  currentChannels,
+  disabled,
+}) => {
+  const navigate = useNavigator();
+  const [openModal, closeModal] = createDialogActionHandlers<
+    CollectionUrlDialog,
+    CollectionUrlQueryParams
+  >(navigate, params => collectionUrl(id, params), params);
+  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(params.ids);
+
   const intl = useIntl();
-  const products = mapEdgesToItems(collection?.products);
+  const id = useCollectionId();
+  const { settings, updateListSettings } = useListSettings(ListViews.COLLECTION_PRODUCTS_LIST);
+  const numberOfRows = settings ? settings.rowNumber : PAGINATE_BY;
+  const [paginationState, setPaginationState] = useLocalPaginationState(numberOfRows);
+  const notify = useNotifier();
+
+  const [assignProduct, assignProductOpts] = useCollectionAssignProductMutation({
+    onCompleted: data => {
+      if (data.collectionAddProducts?.errors.length === 0) {
+        notify({
+          status: "success",
+          text: intl.formatMessage({
+            id: "56vUeQ",
+            defaultMessage: "Added product to collection",
+          }),
+        });
+      }
+    },
+  });
+  const [unassignProduct, unassignProductOpts] = useUnassignCollectionProductMutation({
+    onCompleted: data => {
+      if (data.collectionRemoveProducts?.errors.length === 0) {
+        notify({
+          status: "success",
+          text: intl.formatMessage({
+            id: "WW+Ruy",
+            defaultMessage: "Deleted product from collection",
+          }),
+        });
+        reset();
+        closeModal();
+      }
+    },
+  });
+
+  const { data } = useCollectionProductsQuery({
+    displayLoader: true,
+    variables: { id, ...paginationState },
+  });
+
+  const products = mapEdgesToItems(data?.collection?.products);
   const numberOfColumns = products?.length === 0 ? 4 : 5;
+  const paginate = useLocalPaginator(setPaginationState);
+
+  const { pageInfo, ...paginationValues } = paginate(
+    data?.collection?.products?.pageInfo,
+    paginationState,
+  );
+
+  const { search, loadMore, result } = useProductSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA,
+  });
+
+  const assignedProductDict = getAssignedProductIdsToCollection(collection, result.data?.search);
+
+  const handleProductUnassign = async (productId: string) => {
+    await unassignProduct({
+      variables: {
+        collectionId: id,
+        productIds: [productId],
+        ...paginationState,
+      },
+    });
+    await result.refetch(DEFAULT_INITIAL_SEARCH_DATA);
+  };
+
+  const handleAssignationChange = async (products: Container[]) => {
+    const productIds = products.map(product => product.id);
+    const toUnassignIds = Object.keys(assignedProductDict).filter(
+      s => assignedProductDict[s] && !productIds.includes(s),
+    );
+    const baseVariables = { ...paginationState, collectionId: id };
+
+    if (productIds.length > 0) {
+      await assignProduct({
+        variables: { ...baseVariables, productIds },
+      });
+    }
+
+    if (toUnassignIds.length > 0) {
+      await unassignProduct({
+        variables: { ...baseVariables, productIds: toUnassignIds },
+      });
+    }
+
+    closeModal();
+
+    await result.refetch(DEFAULT_INITIAL_SEARCH_DATA);
+  };
 
   return (
-    <DashboardCard>
-      <DashboardCard.Header>
-        <DashboardCard.Title>
-          {collection ? (
-            intl.formatMessage(
-              {
-                id: "/dnWE8",
-                defaultMessage: "Products in {name}",
-                description: "products in collection",
-              },
-              {
-                name: collection?.name ?? "...",
-              },
-            )
-          ) : (
-            <Skeleton />
-          )}
-        </DashboardCard.Title>
-        <DashboardCard.Toolbar>
-          <Button
-            data-test-id="add-product"
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
+      <DashboardCard paddingBottom={10}>
+        <DashboardCard.Header>
+          <DashboardCard.Title>
+            {collection ? (
+              intl.formatMessage(
+                {
+                  id: "/dnWE8",
+                  defaultMessage: "Products in {name}",
+                  description: "products in collection",
+                },
+                {
+                  name: collection?.name ?? "...",
+                },
+              )
+            ) : (
+              <Skeleton />
+            )}
+          </DashboardCard.Title>
+          <DashboardCard.Toolbar>
+            <Button
+              data-test-id="add-product"
+              disabled={disabled}
+              variant="secondary"
+              onClick={() => openModal("assign")}
+            >
+              <FormattedMessage id="scHVdW" defaultMessage="Assign product" description="button" />
+            </Button>
+          </DashboardCard.Toolbar>
+        </DashboardCard.Header>
+
+        {products ? (
+          <ProductsTable
+            paginationState={paginationState}
+            selected={listElements.length}
+            products={products || []}
+            isChecked={isSelected}
+            toggle={toggle}
+            toggleAll={toggleAll}
             disabled={disabled}
-            variant="secondary"
-            onClick={onAdd}
-          >
-            <FormattedMessage id="scHVdW" defaultMessage="Assign product" description="button" />
-          </Button>
-        </DashboardCard.Toolbar>
-      </DashboardCard.Header>
-      <ResponsiveTable className={classes.table}>
-        <TableHead
-          colSpan={numberOfColumns}
-          selected={selected}
-          disabled={disabled}
-          items={mapEdgesToItems(collection?.products) ?? []}
-          toggleAll={toggleAll}
-          toolbar={toolbar}
-        >
-          <TableCell className={classes.colName}>
-            <span className={classes.colNameLabel}>
-              <FormattedMessage id="6AMFki" defaultMessage="Name" description="product name" />
-            </span>
-          </TableCell>
-          <TableCell className={classes.colType}>
-            <FormattedMessage id="k+HcTv" defaultMessage="Type" description="product type" />
-          </TableCell>
-          <TableCell className={classes.colPublished}>
-            <FormattedMessage
-              id="Oe62bR"
-              defaultMessage="Availability"
-              description="product availability"
-            />
-          </TableCell>
-          <TableCell className={classes.colActions} />
-        </TableHead>
-        <TableFooter>
-          <TableRowLink>
-            <TablePaginationWithContext colSpan={numberOfColumns} />
-          </TableRowLink>
-        </TableFooter>
-        <TableBody>
-          {renderCollection(
-            products,
-            product => {
-              const isSelected = product ? isChecked(product.id) : false;
-
-              return (
-                <TableRowLink
-                  data-test-id="assign-product-table-row"
-                  className={classes.tableRow}
-                  hover={!!product}
-                  href={product && productUrl(product.id)}
-                  key={product ? product.id : "skeleton"}
-                  selected={isSelected}
-                >
-                  <TableCell padding="checkbox">
-                    <Checkbox
-                      checked={isSelected}
-                      disabled={disabled}
-                      disableClickPropagation
-                      onChange={() => product?.id && toggle(product.id)}
-                    />
-                  </TableCell>
-                  <TableCellAvatar className={classes.colName} thumbnail={product?.thumbnail?.url}>
-                    {product?.name ?? <Skeleton />}
-                  </TableCellAvatar>
-                  <TableCell className={classes.colType}>
-                    {product?.productType?.name ?? <Skeleton />}
-                  </TableCell>
-                  <TableCell className={classes.colType}>
-                    {product && !product?.channelListings?.length ? (
-                      "-"
-                    ) : product?.channelListings !== undefined ? (
-                      <ChannelsAvailabilityDropdown channels={product?.channelListings} />
-                    ) : (
-                      <Skeleton />
-                    )}
-                  </TableCell>
-                  <TableCell className={classes.colActions}>
-                    <TableButtonWrapper>
-                      <Button
-                        icon={<TrashBinIcon />}
-                        data-test-id="delete-icon"
-                        variant="secondary"
-                        disabled={!product}
-                        onClick={event => product?.id && onProductUnassign(product.id, event)}
-                      />
-                    </TableButtonWrapper>
-                  </TableCell>
-                </TableRowLink>
-              );
+            onProductUnassign={handleProductUnassign}
+            numberOfColumns={numberOfColumns}
+            onUnassignClick={() =>
+              openModal("unassign", {
+                ids: listElements,
+              })
+            }
+            updateListSettings={updateListSettings}
+            numberOfRows={numberOfRows}
+          />
+        ) : (
+          <ProductTableSkeleton />
+        )}
+        <Pagination numberOfRows={numberOfRows} onUpdateListSettings={updateListSettings} />
+      </DashboardCard>
+      <AssignProductDialog
+        selectedChannels={currentChannels}
+        productUnavailableText={intl.formatMessage({
+          id: "OtMtzH",
+          defaultMessage: "Product unavailable in collection channels",
+        })}
+        selectedIds={assignedProductDict}
+        confirmButtonState={assignProductOpts.status}
+        hasMore={result.data?.search?.pageInfo?.hasNextPage ?? false}
+        open={params.action === "assign"}
+        onFetch={search}
+        onFetchMore={loadMore}
+        loading={result.loading}
+        onClose={closeModal}
+        onSubmit={handleAssignationChange}
+        products={getProductsFromSearchResults(result?.data) ?? []}
+      />
+      <ActionDialog
+        confirmButtonState={unassignProductOpts.status}
+        onClose={closeModal}
+        onConfirm={() =>
+          unassignProduct({
+            variables: {
+              ...paginationState,
+              collectionId: id,
+              productIds: params.ids ?? [],
             },
-            () => (
-              <TableRowLink>
-                <TableCell colSpan={numberOfColumns}>
-                  <FormattedMessage id="Q1Uzbb" defaultMessage="No products found" />
-                </TableCell>
-              </TableRowLink>
-            ),
-          )}
-        </TableBody>
-      </ResponsiveTable>
-    </DashboardCard>
+          })
+        }
+        open={params.action === "unassign"}
+        title={intl.formatMessage({
+          id: "5OtU+V",
+          defaultMessage: "Unassign products from collection",
+          description: "dialog title",
+        })}
+      >
+        <FormattedMessage
+          id="AulH/n"
+          defaultMessage="{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}"
+          values={{
+            counter: params.ids?.length ?? 0,
+            displayQuantity: <strong>{params.ids?.length ?? 0}</strong>,
+          }}
+        />
+      </ActionDialog>
+    </PaginatorContext.Provider>
   );
 };
 
diff --git a/src/collections/components/CollectionProducts/EmptyImage.tsx b/src/collections/components/CollectionProducts/EmptyImage.tsx
new file mode 100644
index 00000000000..a4789456340
--- /dev/null
+++ b/src/collections/components/CollectionProducts/EmptyImage.tsx
@@ -0,0 +1,11 @@
+import { Box, useTheme } from "@saleor/macaw-ui-next";
+import React from "react";
+
+export const EmptyImage = () => {
+  const { theme } = useTheme();
+
+  // Using these colors to match other grid-based lists
+  const bgColor = theme === "defaultLight" ? "hsla(210, 15%, 87%, 1)" : "hsla(210, 32%, 25%, 1)";
+
+  return <Box __width="31px" __height="31px" __backgroundColor={bgColor} borderRadius={2} />;
+};
diff --git a/src/collections/components/CollectionProducts/Pagination.tsx b/src/collections/components/CollectionProducts/Pagination.tsx
new file mode 100644
index 00000000000..3ce72c45074
--- /dev/null
+++ b/src/collections/components/CollectionProducts/Pagination.tsx
@@ -0,0 +1,71 @@
+import { usePaginatorContext } from "@dashboard/hooks/usePaginator";
+import {
+  Box,
+  Button,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Select,
+  Text,
+} from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const ROW_NUMBER_OPTIONS = [
+  { label: "10", value: "10" },
+  { label: "20", value: "20" },
+  { label: "50", value: "50" },
+  { label: "100", value: "100" },
+];
+
+interface PaginationProps {
+  onUpdateListSettings: (key: "rowNumber", value: number) => void;
+  numberOfRows: number;
+}
+
+export const Pagination = ({ onUpdateListSettings, numberOfRows }: PaginationProps) => {
+  const { hasNextPage, hasPreviousPage, loadNextPage, loadPreviousPage } = usePaginatorContext();
+  const currentRowNumber = String(numberOfRows);
+  const currentRowNumberOption = ROW_NUMBER_OPTIONS.find(
+    option => option.value === currentRowNumber,
+  );
+
+  const handleRowNumberChange = ({ value }: { value: string; label: string }) => {
+    onUpdateListSettings("rowNumber", parseInt(value));
+  };
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      gap={2}
+      width="100%"
+      paddingX={6}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        <Text color="default2" size={1}>
+          <FormattedMessage id="nABmvC" defaultMessage="No. of rows" />
+        </Text>
+        <Select
+          options={ROW_NUMBER_OPTIONS}
+          value={currentRowNumberOption ?? ROW_NUMBER_OPTIONS[1]}
+          onChange={handleRowNumberChange}
+        />
+      </Box>
+      <Box display="flex" gap={2}>
+        <Button
+          variant="secondary"
+          disabled={!hasPreviousPage}
+          onClick={loadPreviousPage}
+          icon={<ChevronLeftIcon />}
+        />
+        <Button
+          variant="secondary"
+          disabled={!hasNextPage}
+          onClick={loadNextPage}
+          icon={<ChevronRightIcon />}
+        />
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/collections/components/CollectionProducts/ProductTableItem.tsx b/src/collections/components/CollectionProducts/ProductTableItem.tsx
new file mode 100644
index 00000000000..d7fb337fb58
--- /dev/null
+++ b/src/collections/components/CollectionProducts/ProductTableItem.tsx
@@ -0,0 +1,132 @@
+import { ChannelsAvailabilityDropdown } from "@dashboard/components/ChannelsAvailabilityDropdown";
+import { GridTable } from "@dashboard/components/GridTable";
+import Drag from "@dashboard/icons/Drag";
+import { productUrl } from "@dashboard/products/urls";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Box, Button, Checkbox, Skeleton, Text, TrashBinIcon } from "@saleor/macaw-ui-next";
+import React from "react";
+
+import { EmptyImage } from "./EmptyImage";
+import { Product } from "./types";
+
+interface ItemProps {
+  product: Product;
+  isSelected: boolean;
+  draggable: boolean;
+  toggle: (id: string) => void;
+  onProductUnassign: (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const ProductTableItem = ({
+  product,
+  isSelected,
+  draggable,
+  toggle,
+  onProductUnassign,
+}: ItemProps) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isSorting } = useSortable({
+    id: product.id,
+    disabled: !draggable,
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+  const href = product ? productUrl(product.id) : "";
+  const isSaving = product.id.includes("moved_");
+
+  return (
+    <GridTable.Row
+      __height="1px" // for content inside the row to be full height
+      data-test-id="assign-product-table-row"
+      backgroundColor={{
+        hover: "default1Hovered",
+        default: "default1",
+      }}
+      __opacity={isSaving ? 0.5 : 1}
+      key={product.id}
+      selected={isSelected}
+      ref={setNodeRef}
+      style={style}
+    >
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          height="100%"
+          color="default2"
+          __cursor={isSorting ? "grabbing" : "grab"}
+          {...attributes}
+          {...listeners}
+        >
+          <Drag />
+        </Box>
+      </GridTable.Cell>
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box display="flex" alignItems="center" height="100%">
+          <Checkbox checked={isSelected} onCheckedChange={() => product && toggle(product.id)} />
+        </Box>
+      </GridTable.Cell>
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box
+          as="a"
+          href={href}
+          padding={2}
+          display="flex"
+          alignItems="center"
+          gap={2}
+          height="100%"
+        >
+          {product?.thumbnail ? (
+            <Box borderColor="default1" borderWidth={1} borderRadius={2} borderStyle="solid">
+              <Box
+                as="img"
+                src={product?.thumbnail?.url}
+                alt={product?.name}
+                __width="31px"
+                __height="31px"
+              />
+            </Box>
+          ) : (
+            <EmptyImage />
+          )}
+          <Text>{product?.name}</Text>
+        </Box>
+      </GridTable.Cell>
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box as="a" href={href} padding={2} display="flex" alignItems="center" height="100%">
+          <Text>{product?.productType.name || <Skeleton />}</Text>
+        </Box>
+      </GridTable.Cell>
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box as="a" display="block" height="100%" padding={2}>
+          {product && !product?.channelListings?.length ? (
+            "-"
+          ) : product?.channelListings !== undefined ? (
+            <ChannelsAvailabilityDropdown channels={product?.channelListings} />
+          ) : (
+            <Skeleton />
+          )}
+        </Box>
+      </GridTable.Cell>
+      <GridTable.Cell __height="inherit" padding={0}>
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="flex-end"
+          paddingRight={6}
+          height="100%"
+        >
+          <Button
+            data-test-id="delete-icon"
+            variant="secondary"
+            onClick={event => product && onProductUnassign(product.id, event)}
+            icon={<TrashBinIcon />}
+          />
+        </Box>
+      </GridTable.Cell>
+    </GridTable.Row>
+  );
+};
diff --git a/src/collections/components/CollectionProducts/ProductTableSkeleton.tsx b/src/collections/components/CollectionProducts/ProductTableSkeleton.tsx
new file mode 100644
index 00000000000..395d60095e3
--- /dev/null
+++ b/src/collections/components/CollectionProducts/ProductTableSkeleton.tsx
@@ -0,0 +1,66 @@
+import { GridTable } from "@dashboard/components/GridTable";
+import Drag from "@dashboard/icons/Drag";
+import { Box, Skeleton } from "@saleor/macaw-ui-next";
+import React from "react";
+
+export const ProductTableItemSkeleton = () => (
+  <GridTable.Row __height="50px" backgroundColor="default1">
+    <GridTable.Cell>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        height="100%"
+        color="default2"
+        disabled
+      >
+        <Drag />
+      </Box>
+    </GridTable.Cell>
+    <GridTable.Cell padding={1}>
+      <Box display="flex" alignItems="center" height="100%">
+        <Skeleton />
+      </Box>
+    </GridTable.Cell>
+    <GridTable.Cell>
+      <Skeleton />
+    </GridTable.Cell>
+    <GridTable.Cell>
+      <Skeleton />
+    </GridTable.Cell>
+    <GridTable.Cell>
+      <Box as="a" display="block" height="100%">
+        <Skeleton />
+      </Box>
+    </GridTable.Cell>
+    <GridTable.Cell>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="flex-end"
+        paddingRight={6}
+        height="100%"
+      >
+        <Skeleton />
+      </Box>
+    </GridTable.Cell>
+  </GridTable.Row>
+);
+
+export const ProductTableSkeleton = () => (
+  <GridTable borderWidth={0}>
+    <GridTable.Colgroup>
+      <GridTable.Col __width="40px" />
+      <GridTable.Col __width="20px" />
+      <GridTable.Col />
+      <GridTable.Col />
+      <GridTable.Col />
+      <GridTable.Col __width="100px" />
+    </GridTable.Colgroup>
+    <GridTable.Body>
+      {Array.from({ length: 10 }, (_, index) => (
+        <ProductTableItemSkeleton key={index} />
+      ))}
+    </GridTable.Body>
+  </GridTable>
+);
diff --git a/src/collections/components/CollectionProducts/ProductsTable.tsx b/src/collections/components/CollectionProducts/ProductsTable.tsx
new file mode 100644
index 00000000000..ff46c1789fa
--- /dev/null
+++ b/src/collections/components/CollectionProducts/ProductsTable.tsx
@@ -0,0 +1,169 @@
+import { GridTable } from "@dashboard/components/GridTable";
+import { PaginationState } from "@dashboard/hooks/useLocalPaginator";
+import { renderCollection } from "@dashboard/misc";
+import { Node } from "@dashboard/types";
+import { closestCenter, DndContext } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Box, Button, Checkbox, Text } from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { ProductTableItem } from "./ProductTableItem";
+import { Product } from "./types";
+import { useProductDrag } from "./useProductDrag";
+
+interface ProductsTableProps {
+  products: Product[];
+  isChecked: (id: string) => boolean | undefined;
+  toggle: (id: string) => void;
+  toggleAll: (items: Node[], selected: number) => void;
+  disabled: boolean;
+  onProductUnassign: (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+  numberOfColumns: number;
+  selected: number;
+  onUnassignClick: () => void;
+  paginationState: PaginationState;
+  updateListSettings: (key: "rowNumber", value: number) => void;
+  numberOfRows: number;
+}
+
+const areAllChecked = (products: Product[], selected: number) => {
+  if (products && products.length > selected && selected > 0) {
+    return "indeterminate";
+  }
+
+  return selected !== 0;
+};
+
+export const ProductsTable = ({
+  products,
+  isChecked,
+  toggle,
+  toggleAll,
+  disabled,
+  onProductUnassign,
+  selected,
+  onUnassignClick,
+  paginationState,
+}: ProductsTableProps) => {
+  const allChecked = areAllChecked(products, selected);
+  const { items, sensors, isSaving, handleDragEnd } = useProductDrag({ products, paginationState });
+
+  if (items.length === 0) {
+    return (
+      <Text
+        textAlign="center"
+        width="100%"
+        display="block"
+        paddingY={2}
+        size={2}
+        color="default2"
+        marginBottom={4}
+      >
+        <FormattedMessage id="Q1Uzbb" defaultMessage="No products found" />
+      </Text>
+    );
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <GridTable borderWidth={0}>
+        <GridTable.Colgroup>
+          <GridTable.Col __width="40px" />
+          <GridTable.Col __width="20px" />
+          <GridTable.Col />
+          <GridTable.Col />
+          <GridTable.Col />
+          <GridTable.Col __width="100px" />
+        </GridTable.Colgroup>
+        <GridTable.Body>
+          <GridTable.Row>
+            <GridTable.Cell padding={0} borderWidth={0}></GridTable.Cell>
+            <GridTable.Cell padding={0} borderWidth={0}>
+              <Box display="flex" alignItems="center">
+                <Checkbox
+                  data-test-id="select-all-checkbox"
+                  checked={allChecked}
+                  disabled={disabled}
+                  onCheckedChange={() => toggleAll(products, selected)}
+                />
+              </Box>
+            </GridTable.Cell>
+            <GridTable.Cell borderWidth={0}>
+              {selected ? (
+                <Text data-test-id="SelectedText">
+                  <FormattedMessage
+                    id="qu/hXD"
+                    defaultMessage="Selected {number} items"
+                    values={{
+                      number: selected,
+                    }}
+                  />
+                </Text>
+              ) : (
+                <Text>
+                  <FormattedMessage id="6AMFki" defaultMessage="Name" description="product name" />
+                </Text>
+              )}
+            </GridTable.Cell>
+            <GridTable.Cell borderWidth={0}>
+              {!selected && (
+                <Text>
+                  <FormattedMessage id="k+HcTv" defaultMessage="Type" description="product type" />
+                </Text>
+              )}
+            </GridTable.Cell>
+            <GridTable.Cell borderWidth={0} colSpan={2} padding={0}>
+              {!selected && (
+                <Text>
+                  <FormattedMessage
+                    id="Oe62bR"
+                    defaultMessage="Availability"
+                    description="product availability"
+                  />
+                </Text>
+              )}
+              <Box
+                paddingRight={6}
+                display="flex"
+                alignItems="center"
+                justifyContent="flex-end"
+                gap={2}
+              >
+                {!!selected && (
+                  <Button variant="secondary" size="small" onClick={onUnassignClick}>
+                    <FormattedMessage
+                      id="67V0c0"
+                      defaultMessage="Unassign"
+                      description="unassign product from collection, button"
+                    />
+                  </Button>
+                )}
+              </Box>
+            </GridTable.Cell>
+          </GridTable.Row>
+          <SortableContext items={items} strategy={verticalListSortingStrategy}>
+            {renderCollection(items, product => {
+              if (!product) {
+                return null;
+              }
+
+              const isSelected = isChecked(product.id);
+
+              return (
+                <ProductTableItem
+                  key={product.id}
+                  product={product}
+                  isSelected={isSelected || false}
+                  draggable={!isSaving}
+                  toggle={toggle}
+                  onProductUnassign={onProductUnassign}
+                />
+              );
+            })}
+          </SortableContext>
+        </GridTable.Body>
+      </GridTable>
+    </DndContext>
+  );
+};
diff --git a/src/collections/components/CollectionProducts/keepProductOrder.ts b/src/collections/components/CollectionProducts/keepProductOrder.ts
new file mode 100644
index 00000000000..5c671f69dce
--- /dev/null
+++ b/src/collections/components/CollectionProducts/keepProductOrder.ts
@@ -0,0 +1,35 @@
+import { CollectionProductsQuery } from "@dashboard/graphql";
+
+export type CollectionProducts = NonNullable<
+  NonNullable<CollectionProductsQuery["collection"]>["products"]
+>;
+
+/*
+  The API needs to take items in the same order as they came, and the reversed one when we move items down (negative position).
+  This function is designed to keep that order.
+  
+  Example:
+  list from the API: [1, 2, 3, 4, 5, 6]
+  we change (in order):
+    5 to position 4
+    2 to position 0
+
+    [1, 2, 3, 4, 5, 6]
+
+  The array we get for update is: [{ id: 5, sortOrder: 1 }, { id: 2, sortOrder: 1 }]
+  But instead we should send: [{ id: 2, sortOrder: 1 }, { id: 5, sortOrder: 1 }]
+  2 is first because it came like this from the API
+*/
+export const keepProductOrder =
+  (listElements: string[], products: CollectionProducts) => (position: number) => {
+    const orderedProducts = products.edges
+      .map(edge => edge.node.id)
+      .map(nodeId => listElements.find(id => nodeId == id) || "")
+      .filter(Boolean);
+
+    if (position < 0) {
+      return orderedProducts.reverse();
+    }
+
+    return orderedProducts;
+  };
diff --git a/src/collections/components/CollectionProducts/types.ts b/src/collections/components/CollectionProducts/types.ts
new file mode 100644
index 00000000000..1866acbde8a
--- /dev/null
+++ b/src/collections/components/CollectionProducts/types.ts
@@ -0,0 +1,7 @@
+import { CollectionProductsQuery } from "@dashboard/graphql";
+
+export type Edges = NonNullable<
+  NonNullable<NonNullable<CollectionProductsQuery["collection"]>["products"]>["edges"]
+>;
+
+export type Product = Edges[number]["node"];
diff --git a/src/collections/components/CollectionProducts/useCollectionId.ts b/src/collections/components/CollectionProducts/useCollectionId.ts
new file mode 100644
index 00000000000..61d36e62cbb
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useCollectionId.ts
@@ -0,0 +1,11 @@
+import useRouter from "use-react-router";
+
+export const useCollectionId = () => {
+  const {
+    match: {
+      params: { id: collectionId },
+    },
+  } = useRouter<{ id: string }>();
+
+  return decodeURIComponent(collectionId);
+};
diff --git a/src/collections/components/CollectionProducts/useProductDrag.test.ts b/src/collections/components/CollectionProducts/useProductDrag.test.ts
new file mode 100644
index 00000000000..9d90127d719
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductDrag.test.ts
@@ -0,0 +1,58 @@
+import type { DragEndEvent } from "@dnd-kit/core";
+import { act, renderHook } from "@testing-library/react-hooks";
+
+import { Product } from "./types";
+import { useProductDrag } from "./useProductDrag";
+import { useProductReorder } from "./useProductReorder";
+
+jest.mock("@dnd-kit/core");
+jest.mock("./useProductReorder");
+
+describe("CollectionProducts/useProductDrag", () => {
+  const initialProducts = [
+    { id: "1", name: "Product 1" },
+    { id: "2", name: "Product 2" },
+    { id: "3", name: "Product 3" },
+  ] as Product[];
+
+  it("should reorder items on drag end", () => {
+    // Arrange
+    const move = jest.fn();
+
+    (useProductReorder as jest.Mock).mockReturnValue({
+      move,
+      data: { loading: false },
+    });
+
+    const { result } = renderHook(() =>
+      useProductDrag({ products: initialProducts, paginationState: { first: 10, after: "1" } }),
+    );
+
+    const dragEndEvent = {
+      active: { id: "1" },
+      over: { id: "2" },
+    } as DragEndEvent;
+
+    // Act
+    act(() => {
+      result.current.handleDragEnd(dragEndEvent);
+    });
+
+    // Assert
+    expect(result.current.items).toEqual([
+      { id: "2", name: "Product 2" },
+      { id: "1", name: "Product 1" },
+      { id: "3", name: "Product 3" },
+    ]);
+
+    expect(move).toHaveBeenCalledWith(
+      [
+        { id: "2", name: "Product 2" },
+        { id: "1", name: "Product 1" },
+        { id: "3", name: "Product 3" },
+      ],
+      "1",
+      -1,
+    );
+  });
+});
diff --git a/src/collections/components/CollectionProducts/useProductDrag.ts b/src/collections/components/CollectionProducts/useProductDrag.ts
new file mode 100644
index 00000000000..ac8c1e1310d
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductDrag.ts
@@ -0,0 +1,53 @@
+import { PaginationState } from "@dashboard/hooks/useLocalPaginator";
+import { DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { useEffect, useState } from "react";
+
+import { Product } from "./types";
+import { useProductReorder } from "./useProductReorder";
+
+interface ProductDragProps {
+  products: Product[];
+  paginationState: PaginationState;
+}
+
+export const useProductDrag = ({ products, paginationState }: ProductDragProps) => {
+  const [items, setItems] = useState(products);
+  const { move, data } = useProductReorder({ paginationState });
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  useEffect(() => {
+    setItems(products);
+  }, [products]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (active.id !== over?.id) {
+      setItems(items => {
+        const oldIndex = items.findIndex(item => item.id === active.id);
+        const newIndex = items.findIndex(item => item.id === over?.id);
+        const diff = oldIndex - newIndex;
+        const moved = arrayMove(items, oldIndex, newIndex);
+        const productId = active.id as string;
+
+        move(moved, productId, diff);
+
+        return moved;
+      });
+    }
+  };
+
+  return {
+    isSaving: data?.loading,
+    sensors,
+    items,
+    handleDragEnd,
+  };
+};
diff --git a/src/collections/components/CollectionProducts/useProductEdges.test.ts b/src/collections/components/CollectionProducts/useProductEdges.test.ts
new file mode 100644
index 00000000000..ce1bbeb5f0b
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductEdges.test.ts
@@ -0,0 +1,116 @@
+import { useApolloClient } from "@apollo/client";
+import { PaginationState } from "@dashboard/hooks/usePaginator";
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useCollectionId } from "./useCollectionId";
+import { useProductEdges } from "./useProductEdges";
+
+jest.mock("@apollo/client");
+jest.mock("@dashboard/graphql", () => ({
+  CollectionProductsDocument: "CollectionProductsDocument",
+}));
+jest.mock("./useCollectionId");
+
+describe("CollectionProducts/useProductEdges", () => {
+  const mockCollectionId = "collection-123";
+  const mockPaginationState = {
+    first: 10,
+    after: null,
+  } as unknown as PaginationState;
+
+  const mockProductEdges = [
+    { node: { id: "1", name: "Product 1" } },
+    { node: { id: "2", name: "Product 2" } },
+  ];
+
+  const mockQueryResponse = {
+    collection: {
+      products: {
+        edges: mockProductEdges,
+      },
+    },
+  };
+
+  const mockReadQuery = jest.fn();
+  const mockApolloClient = {
+    readQuery: mockReadQuery,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useApolloClient as jest.Mock).mockReturnValue(mockApolloClient);
+    (useCollectionId as jest.Mock).mockReturnValue(mockCollectionId);
+    mockReadQuery.mockReturnValue(mockQueryResponse);
+  });
+
+  it("should return product edges when query cache exists", () => {
+    // Arrange & Act
+    const { result } = renderHook(() => useProductEdges({ paginationState: mockPaginationState }));
+
+    // Assert
+    expect(mockReadQuery).toHaveBeenCalledWith({
+      query: "CollectionProductsDocument",
+      variables: {
+        id: mockCollectionId,
+        ...mockPaginationState,
+      },
+    });
+
+    expect(result.current.edges).toEqual(mockProductEdges);
+  });
+
+  it("should return empty array when query cache is empty", () => {
+    // Arrange
+    mockReadQuery.mockReturnValue(null);
+
+    // Act
+    const { result } = renderHook(() => useProductEdges({ paginationState: mockPaginationState }));
+
+    // Assert
+    expect(result.current.edges).toEqual([]);
+  });
+
+  it("should return empty array when collection is empty", () => {
+    // Arrange
+    mockReadQuery.mockReturnValue({ collection: null });
+
+    // Act
+    const { result } = renderHook(() => useProductEdges({ paginationState: mockPaginationState }));
+
+    // Assert
+    expect(result.current.edges).toEqual([]);
+  });
+
+  it("should return empty array when there are no products", () => {
+    // Arrange
+    mockReadQuery.mockReturnValue({
+      collection: { products: null },
+    });
+
+    // Act
+    const { result } = renderHook(() => useProductEdges({ paginationState: mockPaginationState }));
+
+    // Assert
+    expect(result.current.edges).toEqual([]);
+  });
+
+  it("should pass pagination state to query", () => {
+    // Arrange
+    const customPaginationState = {
+      first: 20,
+      after: "cursor-123",
+    };
+
+    // Act
+    renderHook(() => useProductEdges({ paginationState: customPaginationState }));
+
+    // Assert
+    expect(mockReadQuery).toHaveBeenCalledWith({
+      query: expect.anything(),
+      variables: {
+        id: mockCollectionId,
+        ...customPaginationState,
+      },
+    });
+  });
+});
diff --git a/src/collections/components/CollectionProducts/useProductEdges.ts b/src/collections/components/CollectionProducts/useProductEdges.ts
new file mode 100644
index 00000000000..440e4569c95
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductEdges.ts
@@ -0,0 +1,26 @@
+import { useApolloClient } from "@apollo/client";
+import { CollectionProductsDocument, CollectionProductsQuery } from "@dashboard/graphql";
+import { PaginationState } from "@dashboard/hooks/useLocalPaginator";
+
+import { useCollectionId } from "./useCollectionId";
+
+interface ProductEdgesProps {
+  paginationState: PaginationState;
+}
+
+export const useProductEdges = ({ paginationState }: ProductEdgesProps) => {
+  const client = useApolloClient();
+  const collectionId = useCollectionId();
+
+  const queryData = client.readQuery<CollectionProductsQuery>({
+    query: CollectionProductsDocument,
+    variables: {
+      id: collectionId,
+      ...paginationState,
+    },
+  });
+
+  const edges = queryData?.collection?.products?.edges || [];
+
+  return { edges };
+};
diff --git a/src/collections/components/CollectionProducts/useProductReorder.test.ts b/src/collections/components/CollectionProducts/useProductReorder.test.ts
new file mode 100644
index 00000000000..02d63032fab
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductReorder.test.ts
@@ -0,0 +1,97 @@
+import { useReorderProductsInCollectionMutation } from "@dashboard/graphql";
+import { useLocalPaginationState } from "@dashboard/hooks/useLocalPaginator";
+import useNotifier from "@dashboard/hooks/useNotifier";
+import { act, renderHook } from "@testing-library/react-hooks";
+
+import { Product } from "./types";
+import { useProductReorder } from "./useProductReorder";
+import { useProductReorderOptimistic } from "./useProductReorderOptimistic";
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: (x: unknown) => x,
+}));
+
+jest.mock("@dashboard/graphql", () => ({
+  useReorderProductsInCollectionMutation: jest.fn(),
+}));
+
+jest.mock("@dashboard/hooks/useLocalPaginator", () => ({
+  useLocalPaginationState: jest.fn(),
+}));
+
+jest.mock("./useProductReorderOptimistic", () => ({
+  useProductReorderOptimistic: jest.fn(),
+}));
+
+jest.mock("./useCollectionId", () => ({
+  useCollectionId: jest.fn(() => "collection-id-1"),
+}));
+
+jest.mock("@dashboard/hooks/useNotifier", () => jest.fn());
+
+describe("CollectionProducts/useProductReorder", () => {
+  const mockReorder = jest.fn();
+  const mockNotifier = jest.fn();
+  const createForDroppedItem = jest.fn(() => "optimistic-response");
+  const mockPaginationState = { page: 1, pageSize: 10 };
+
+  beforeEach(() => {
+    (useReorderProductsInCollectionMutation as jest.Mock).mockReturnValue([mockReorder, {}]);
+    (useLocalPaginationState as jest.Mock).mockReturnValue([mockPaginationState]);
+    (useProductReorderOptimistic as jest.Mock).mockReturnValue({
+      createForDroppedItem: createForDroppedItem,
+    });
+    (useNotifier as jest.Mock).mockReturnValue(mockNotifier);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should call reorder with correct variables when move is called", () => {
+    // Arrange
+    const { result } = renderHook(() =>
+      useProductReorder({ paginationState: { first: 10, after: "1" } }),
+    );
+    const productIds = [
+      { id: "1", name: "Product 1" },
+      { id: "2", name: "Product 2" },
+      { id: "3", name: "Product 3" },
+    ] as Product[];
+    const shift = 1;
+
+    // Act
+    act(() => {
+      result.current.move(productIds, "2", shift);
+    });
+
+    // Assert
+    expect(mockReorder).toHaveBeenCalledWith({
+      variables: {
+        after: "1",
+        collectionId: "collection-id-1",
+        first: 10,
+        moves: [
+          {
+            productId: "2",
+            sortOrder: 1,
+          },
+        ],
+      },
+      optimisticResponse: "optimistic-response",
+    });
+  });
+
+  it("should return data from the mutation", () => {
+    // Arrange & Act
+    const { result } = renderHook(() =>
+      useProductReorder({ paginationState: { first: 10, after: "1" } }),
+    );
+
+    // Assert
+    expect(result.current.data).toEqual({});
+  });
+});
diff --git a/src/collections/components/CollectionProducts/useProductReorder.ts b/src/collections/components/CollectionProducts/useProductReorder.ts
new file mode 100644
index 00000000000..1376cb0653d
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductReorder.ts
@@ -0,0 +1,50 @@
+import { useReorderProductsInCollectionMutation } from "@dashboard/graphql";
+import { PaginationState } from "@dashboard/hooks/useLocalPaginator";
+import useNotifier from "@dashboard/hooks/useNotifier";
+import { useIntl } from "react-intl";
+
+import { Product } from "./types";
+import { useCollectionId } from "./useCollectionId";
+import { useProductReorderOptimistic } from "./useProductReorderOptimistic";
+
+interface ProductReorderProps {
+  paginationState: PaginationState;
+}
+
+export const useProductReorder = ({ paginationState }: ProductReorderProps) => {
+  const collectionId = useCollectionId();
+  const notify = useNotifier();
+  const intl = useIntl();
+  const { createForDroppedItem } = useProductReorderOptimistic({ paginationState });
+
+  const [reorder, data] = useReorderProductsInCollectionMutation();
+
+  const move = async (products: Product[], productId: string, shift: number) => {
+    await reorder({
+      variables: {
+        collectionId,
+        moves: [
+          {
+            productId,
+            sortOrder: shift,
+          },
+        ],
+        ...paginationState,
+      },
+      optimisticResponse: createForDroppedItem(products, productId),
+    });
+
+    notify({
+      text: intl.formatMessage({
+        id: "XAvER/",
+        defaultMessage: "Product reordered",
+      }),
+      status: "success",
+    });
+  };
+
+  return {
+    move,
+    data,
+  };
+};
diff --git a/src/collections/components/CollectionProducts/useProductReorderOptimistic.test.ts b/src/collections/components/CollectionProducts/useProductReorderOptimistic.test.ts
new file mode 100644
index 00000000000..8c3cabcfdbd
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductReorderOptimistic.test.ts
@@ -0,0 +1,202 @@
+import { PaginationState } from "@dashboard/hooks/usePaginator";
+import { renderHook } from "@testing-library/react-hooks";
+
+import { Product } from "./types";
+import { useCollectionId } from "./useCollectionId";
+import { useProductEdges } from "./useProductEdges";
+import { useProductReorderOptimistic } from "./useProductReorderOptimistic";
+
+jest.mock("./useCollectionId");
+jest.mock("./useProductEdges");
+
+const mockCollectionId = "collection-123";
+const mockEdges = [
+  {
+    node: {
+      id: "product-1",
+      name: "Product 1",
+    },
+  },
+  {
+    node: {
+      id: "product-2",
+      name: "Product 2",
+    },
+  },
+  {
+    node: {
+      id: "product-3",
+      name: "Product 3",
+    },
+  },
+];
+
+(useCollectionId as jest.Mock).mockReturnValue(mockCollectionId);
+(useProductEdges as jest.Mock).mockReturnValue({ edges: mockEdges });
+
+describe("CollectionProducts/useProductReorderOptimistic", () => {
+  // Arrange
+  const defaultPaginationState = {
+    first: 10,
+    after: null,
+    last: null,
+    before: null,
+  } as unknown as PaginationState;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useCollectionId as jest.Mock).mockReturnValue(mockCollectionId);
+    (useProductEdges as jest.Mock).mockReturnValue({ edges: mockEdges });
+  });
+
+  it("should create proper optimistic response for reordered products", () => {
+    // Arrange & Act
+    const { result } = renderHook(() =>
+      useProductReorderOptimistic({ paginationState: defaultPaginationState }),
+    );
+
+    const products = [
+      { id: "product-2", name: "Product 2" },
+      { id: "product-1", name: "Product 1" },
+      { id: "product-3", name: "Product 3" },
+    ] as Product[];
+
+    const activeNodeId = "product-1";
+    const response = result.current.createForDroppedItem(products, activeNodeId);
+
+    // Assert
+    expect(response).toEqual({
+      collectionReorderProducts: {
+        __typename: "CollectionReorderProducts",
+        collection: {
+          __typename: "Collection",
+          id: mockCollectionId,
+          products: {
+            __typename: "ProductCountableConnection",
+            edges: [
+              {
+                node: {
+                  id: "product-2",
+                  name: "Product 2",
+                },
+              },
+              {
+                node: {
+                  id: "moved_product-1",
+                  name: "Product 1",
+                },
+              },
+              {
+                node: {
+                  id: "product-3",
+                  name: "Product 3",
+                },
+              },
+            ],
+            pageInfo: {
+              __typename: "PageInfo",
+              endCursor: null,
+              hasNextPage: false,
+              hasPreviousPage: false,
+              startCursor: null,
+            },
+          },
+        },
+        errors: [],
+      },
+      __typename: "Mutation",
+    });
+  });
+
+  it("should handle empty product list", () => {
+    // Arrange & Act
+    const { result } = renderHook(() =>
+      useProductReorderOptimistic({ paginationState: defaultPaginationState }),
+    );
+
+    const products: Product[] = [];
+    const activeNodeId = "product-1";
+    const response = result.current.createForDroppedItem(products, activeNodeId);
+
+    // Assert
+    expect(response.collectionReorderProducts.collection.products.edges).toEqual([]);
+  });
+
+  it("should handle product not found in edges", () => {
+    // Arrange & Act
+    const { result } = renderHook(() =>
+      useProductReorderOptimistic({ paginationState: defaultPaginationState }),
+    );
+
+    const products = [
+      { id: "non-existent", name: "Non Existent Product" },
+      { id: "product-1", name: "Product 1" },
+    ] as Product[];
+
+    const activeNodeId = "product-1";
+    const response = result.current.createForDroppedItem(products, activeNodeId);
+
+    // Assert
+    expect(response.collectionReorderProducts.collection.products.edges).toEqual([
+      {
+        node: {
+          id: "moved_product-1",
+          name: "Product 1",
+        },
+      },
+    ]);
+  });
+
+  it("should use correct collection ID from hook", () => {
+    // Arrange
+    const customCollectionId = "custom-collection-123";
+
+    (useCollectionId as jest.Mock).mockReturnValue(customCollectionId);
+
+    const { result } = renderHook(() =>
+      useProductReorderOptimistic({ paginationState: defaultPaginationState }),
+    );
+
+    const products = [{ id: "product-1", name: "Product 1" }] as Product[];
+    const activeNodeId = "product-1";
+    const response = result.current.createForDroppedItem(products, activeNodeId);
+
+    // Assert
+    expect(response.collectionReorderProducts.collection.id).toBe(customCollectionId);
+  });
+
+  it("should preserve edge properties when creating optimistic response", () => {
+    // Arrange
+    const edgesWithExtraProps = [
+      {
+        node: {
+          id: "product-1",
+          name: "Product 1",
+          extraProp: "extra value",
+        },
+        cursor: "cursor-1",
+      },
+    ];
+
+    // Act
+    (useProductEdges as jest.Mock).mockReturnValue({ edges: edgesWithExtraProps });
+
+    const { result } = renderHook(() =>
+      useProductReorderOptimistic({ paginationState: defaultPaginationState }),
+    );
+
+    const products = [{ id: "product-1", name: "Product 1" }] as Product[];
+    const activeNodeId = "product-1";
+    const response = result.current.createForDroppedItem(products, activeNodeId);
+
+    // Assert
+    expect(response.collectionReorderProducts.collection.products.edges[0]).toMatchObject({
+      node: {
+        id: "moved_product-1",
+        name: "Product 1",
+        extraProp: "extra value",
+      },
+      cursor: "cursor-1",
+    });
+  });
+});
diff --git a/src/collections/components/CollectionProducts/useProductReorderOptimistic.ts b/src/collections/components/CollectionProducts/useProductReorderOptimistic.ts
new file mode 100644
index 00000000000..0bed5bf6b2c
--- /dev/null
+++ b/src/collections/components/CollectionProducts/useProductReorderOptimistic.ts
@@ -0,0 +1,62 @@
+import { PaginationState } from "@dashboard/hooks/useLocalPaginator";
+
+import { Edges, Product } from "./types";
+import { useCollectionId } from "./useCollectionId";
+import { useProductEdges } from "./useProductEdges";
+
+const createOptimisticResponseForEdges = (collectionId: string, edges: Edges) => ({
+  collectionReorderProducts: {
+    __typename: "CollectionReorderProducts" as const,
+    collection: {
+      __typename: "Collection" as const,
+      id: collectionId,
+      products: {
+        __typename: "ProductCountableConnection" as const,
+        edges: edges,
+        pageInfo: {
+          __typename: "PageInfo" as const,
+          endCursor: null,
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: null,
+        },
+      },
+    },
+    errors: [],
+  },
+  __typename: "Mutation" as const,
+});
+
+interface ProductReorderOptimisticProps {
+  paginationState: PaginationState;
+}
+
+export const useProductReorderOptimistic = ({ paginationState }: ProductReorderOptimisticProps) => {
+  const collectionId = useCollectionId();
+  const { edges } = useProductEdges({ paginationState });
+
+  const createForDroppedItem = (listAfterSort: Product[], activeNodeId: string) => {
+    const exceededEdges = listAfterSort
+      .map(product => edges.find(edge => edge?.node?.id === product.id))
+      .filter(Boolean)
+      .map(edge => {
+        const nodeId = edge?.node?.id || "";
+        const isMoved = activeNodeId == nodeId;
+        const newId = isMoved ? "moved_" + nodeId : nodeId;
+
+        return {
+          ...edge,
+          node: {
+            ...edge?.node,
+            id: newId,
+          },
+        };
+      });
+
+    return createOptimisticResponseForEdges(collectionId, exceededEdges as Edges);
+  };
+
+  return {
+    createForDroppedItem,
+  };
+};
diff --git a/src/collections/mutations.ts b/src/collections/mutations.ts
index 0edb43a8f1a..09ee4cc4c42 100644
--- a/src/collections/mutations.ts
+++ b/src/collections/mutations.ts
@@ -25,7 +25,13 @@ export const assignCollectionProduct = gql`
     collectionAddProducts(collectionId: $collectionId, products: $productIds) {
       collection {
         id
-        products(first: $first, after: $after, before: $before, last: $last) {
+        products(
+          first: $first
+          after: $after
+          before: $before
+          last: $last
+          sortBy: { field: COLLECTION, direction: DESC }
+        ) {
           edges {
             node {
               ...CollectionProduct
@@ -81,18 +87,16 @@ export const unassignCollectionProduct = gql`
     collectionRemoveProducts(collectionId: $collectionId, products: $productIds) {
       collection {
         id
-        products(first: $first, after: $after, before: $before, last: $last) {
+        products(
+          first: $first
+          after: $after
+          before: $before
+          last: $last
+          sortBy: { field: COLLECTION, direction: DESC }
+        ) {
           edges {
             node {
-              id
-              name
-              productType {
-                id
-                name
-              }
-              thumbnail {
-                url
-              }
+              ...CollectionProduct
             }
           }
           pageInfo {
@@ -129,3 +133,42 @@ export const collectionChannelListingUpdate = gql`
     }
   }
 `;
+
+export const reorderProductsInCollection = gql`
+  mutation ReorderProductsInCollection(
+    $collectionId: ID!
+    $moves: [MoveProductInput!]!
+    $first: Int
+    $after: String
+    $last: Int
+    $before: String
+  ) {
+    collectionReorderProducts(collectionId: $collectionId, moves: $moves) {
+      collection {
+        id
+        products(
+          first: $first
+          after: $after
+          before: $before
+          last: $last
+          sortBy: { field: COLLECTION, direction: DESC }
+        ) {
+          edges {
+            node {
+              ...CollectionProduct
+            }
+          }
+          pageInfo {
+            endCursor
+            hasNextPage
+            hasPreviousPage
+            startCursor
+          }
+        }
+      }
+      errors {
+        message
+      }
+    }
+  }
+`;
diff --git a/src/collections/queries.ts b/src/collections/queries.ts
index 4fccd237139..d5bc13604aa 100644
--- a/src/collections/queries.ts
+++ b/src/collections/queries.ts
@@ -38,10 +38,24 @@ export const collectionList = gql`
 `;
 
 export const collectionDetails = gql`
-  query CollectionDetails($id: ID!, $first: Int, $after: String, $last: Int, $before: String) {
+  query CollectionDetails($id: ID) {
     collection(id: $id) {
       ...CollectionDetails
-      products(first: $first, after: $after, before: $before, last: $last) {
+    }
+  }
+`;
+
+export const collectionProducts = gql`
+  query CollectionProducts($id: ID!, $first: Int, $after: String, $last: Int, $before: String) {
+    collection(id: $id) {
+      id
+      products(
+        first: $first
+        after: $after
+        before: $before
+        last: $last
+        sortBy: { field: COLLECTION, direction: DESC }
+      ) {
         edges {
           node {
             ...CollectionProduct
diff --git a/src/collections/utils.ts b/src/collections/utils.ts
index 95129d8c467..9b4af6ce15b 100644
--- a/src/collections/utils.ts
+++ b/src/collections/utils.ts
@@ -26,7 +26,7 @@ export const createChannelsChangeHandler =
 
 export const getAssignedProductIdsToCollection = (
   collection: CollectionDetailsQuery["collection"],
-  queryData: SearchProductsQuery["search"],
+  queryData?: SearchProductsQuery["search"],
 ) => {
   if (!queryData || !collection) {
     return {};
diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx
index 060f275c9b5..bef48e65cf4 100644
--- a/src/collections/views/CollectionDetails.tsx
+++ b/src/collections/views/CollectionDetails.tsx
@@ -2,34 +2,24 @@
 import { createCollectionChannels, createCollectionChannelsData } from "@dashboard/channels/utils";
 import ActionDialog from "@dashboard/components/ActionDialog";
 import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext";
-import { Container } from "@dashboard/components/AssignContainerDialog";
-import AssignProductDialog from "@dashboard/components/AssignProductDialog";
-import { Button } from "@dashboard/components/Button";
 import ChannelsAvailabilityDialog from "@dashboard/components/ChannelsAvailabilityDialog";
 import NotFoundPage from "@dashboard/components/NotFoundPage";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
-import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "@dashboard/config";
 import {
   CollectionInput,
   CollectionUpdateMutation,
-  useCollectionAssignProductMutation,
   useCollectionChannelListingUpdateMutation,
   useCollectionDetailsQuery,
   useCollectionUpdateMutation,
   useRemoveCollectionMutation,
-  useUnassignCollectionProductMutation,
   useUpdateMetadataMutation,
   useUpdatePrivateMetadataMutation,
 } from "@dashboard/graphql";
-import useBulkActions from "@dashboard/hooks/useBulkActions";
 import useChannels from "@dashboard/hooks/useChannels";
-import useLocalPaginator, { useLocalPaginationState } from "@dashboard/hooks/useLocalPaginator";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
-import { PaginatorContext } from "@dashboard/hooks/usePaginator";
 import { commonMessages, errorMessages } from "@dashboard/intl";
-import useProductSearch from "@dashboard/searches/useProductSearch";
 import { arrayDiff } from "@dashboard/utils/arrays";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@dashboard/utils/handlers/metadataUpdateHandler";
@@ -46,7 +36,6 @@ import {
   CollectionUrlDialog,
   CollectionUrlQueryParams,
 } from "../urls";
-import { getAssignedProductIdsToCollection, getProductsFromSearchResults } from "../utils";
 import { COLLECTION_DETAILS_FORM_ID } from "./consts";
 
 interface CollectionDetailsProps {
@@ -57,11 +46,7 @@ interface CollectionDetailsProps {
 export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(params.ids);
   const intl = useIntl();
-  const { search, loadMore, result } = useProductSearch({
-    variables: DEFAULT_INITIAL_SEARCH_DATA,
-  });
   const [openModal, closeModal] = createDialogActionHandlers<
     CollectionUrlDialog,
     CollectionUrlQueryParams
@@ -94,35 +79,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
   const [updateCollection, updateCollectionOpts] = useCollectionUpdateMutation({
     onCompleted: handleCollectionUpdate,
   });
-  const [assignProduct, assignProductOpts] = useCollectionAssignProductMutation({
-    onCompleted: data => {
-      if (data.collectionAddProducts.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage({
-            id: "56vUeQ",
-            defaultMessage: "Added product to collection",
-          }),
-        });
-        navigate(collectionUrl(id), { replace: true });
-      }
-    },
-  });
-  const [unassignProduct, unassignProductOpts] = useUnassignCollectionProductMutation({
-    onCompleted: data => {
-      if (data.collectionRemoveProducts.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage({
-            id: "WW+Ruy",
-            defaultMessage: "Deleted product from collection",
-          }),
-        });
-        reset();
-        closeModal();
-      }
-    },
-  });
+
   const [removeCollection, removeCollectionOpts] = useRemoveCollectionMutation({
     onCompleted: data => {
       if (data.collectionDelete.errors.length === 0) {
@@ -137,13 +94,13 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
       }
     },
   });
-  const [paginationState, setPaginationState] = useLocalPaginationState(PAGINATE_BY);
-  const paginate = useLocalPaginator(setPaginationState);
+
   const [selectedChannel] = useLocalStorage("collectionListChannel", "");
   const { data, loading } = useCollectionDetailsQuery({
     displayLoader: true,
-    variables: { id, ...paginationState },
+    variables: { id },
   });
+
   const collection = data?.collection;
   const allChannels = createCollectionChannels(availableChannels)?.sort((channel, nextChannel) =>
     channel.name.localeCompare(nextChannel.name),
@@ -212,45 +169,19 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
     variables => updateMetadata({ variables }),
     variables => updatePrivateMetadata({ variables }),
   );
-  const handleAssignationChange = async (products: Container[]) => {
-    const productIds = products.map(product => product.id);
-    const toUnassignIds = Object.keys(assignedProductDict).filter(
-      s => assignedProductDict[s] && !productIds.includes(s),
-    );
-    const baseVariables = { ...paginationState, collectionId: id };
-
-    if (productIds.length > 0) {
-      await assignProduct({
-        variables: { ...baseVariables, productIds },
-      });
-    }
-
-    if (toUnassignIds.length > 0) {
-      await unassignProduct({
-        variables: { ...baseVariables, productIds: toUnassignIds },
-      });
-    }
 
-    await result.refetch(DEFAULT_INITIAL_SEARCH_DATA);
-  };
   const formTransitionState = getMutationState(
     updateCollectionOpts.called,
     updateCollectionOpts.loading,
     updateCollectionOpts.data?.collectionUpdate.errors,
   );
-  const { pageInfo, ...paginationValues } = paginate(
-    data?.collection?.products?.pageInfo,
-    paginationState,
-  );
 
   if (collection === null) {
     return <NotFoundPage backHref={collectionListUrl()} />;
   }
 
-  const assignedProductDict = getAssignedProductIdsToCollection(collection, result.data?.search);
-
   return (
-    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
+    <>
       <WindowTitle title={data?.collection?.name} />
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
@@ -271,7 +202,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
         />
       )}
       <CollectionDetailsPage
-        onAdd={() => openModal("assign")}
         disabled={loading || updateChannelsOpts.loading}
         collection={data?.collection}
         channelsErrors={updateChannelsOpts?.data?.collectionChannelListingUpdate.errors || []}
@@ -289,59 +219,13 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
           })
         }
         onSubmit={handleSubmit}
-        onProductUnassign={async (productId, event) => {
-          event.stopPropagation();
-          await unassignProduct({
-            variables: {
-              collectionId: id,
-              productIds: [productId],
-              ...paginationState,
-            },
-          });
-          await result.refetch(DEFAULT_INITIAL_SEARCH_DATA);
-        }}
         saveButtonBarState={formTransitionState}
-        toolbar={
-          <Button
-            onClick={() =>
-              openModal("unassign", {
-                ids: listElements,
-              })
-            }
-          >
-            <FormattedMessage
-              id="67V0c0"
-              defaultMessage="Unassign"
-              description="unassign product from collection, button"
-            />
-          </Button>
-        }
-        isChecked={isSelected}
-        selected={listElements.length}
-        toggle={toggle}
-        toggleAll={toggleAll}
         currentChannels={currentChannels}
         channelsCount={availableChannels.length}
         selectedChannelId={selectedChannel}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
-      />
-      <AssignProductDialog
-        selectedChannels={currentChannels}
-        productUnavailableText={intl.formatMessage({
-          id: "OtMtzH",
-          defaultMessage: "Product unavailable in collection channels",
-        })}
-        selectedIds={assignedProductDict}
-        confirmButtonState={assignProductOpts.status}
-        hasMore={result.data?.search?.pageInfo.hasNextPage}
-        open={params.action === "assign"}
-        onFetch={search}
-        onFetchMore={loadMore}
-        loading={result.loading}
-        onClose={closeModal}
-        onSubmit={handleAssignationChange}
-        products={getProductsFromSearchResults(result?.data)}
+        params={params}
       />
 
       <ActionDialog
@@ -368,34 +252,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
           }}
         />
       </ActionDialog>
-      <ActionDialog
-        confirmButtonState={unassignProductOpts.status}
-        onClose={closeModal}
-        onConfirm={() =>
-          unassignProduct({
-            variables: {
-              ...paginationState,
-              collectionId: id,
-              productIds: params.ids,
-            },
-          })
-        }
-        open={params.action === "unassign"}
-        title={intl.formatMessage({
-          id: "5OtU+V",
-          defaultMessage: "Unassign products from collection",
-          description: "dialog title",
-        })}
-      >
-        <FormattedMessage
-          id="AulH/n"
-          defaultMessage="{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}"
-          values={{
-            counter: maybe(() => params.ids.length),
-            displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>,
-          }}
-        />
-      </ActionDialog>
+
       <ActionDialog
         confirmButtonState={updateCollectionOpts.status}
         onClose={closeModal}
@@ -422,7 +279,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({ id, params
           defaultMessage="Are you sure you want to delete collection's image?"
         />
       </ActionDialog>
-    </PaginatorContext.Provider>
+    </>
   );
 };
 export default CollectionDetails;
diff --git a/src/components/Metadata/Metadata.tsx b/src/components/Metadata/Metadata.tsx
index d4a0301d964..677f3509848 100644
--- a/src/components/Metadata/Metadata.tsx
+++ b/src/components/Metadata/Metadata.tsx
@@ -72,7 +72,7 @@ export const Metadata: React.FC<MetadataProps> = memo(
     };
 
     return (
-      <Box display="grid" gap={2} paddingBottom={6}>
+      <Box display="grid" gap={2} paddingBottom={10}>
         {isLoading ? (
           <>
             <MetadataLoadingCard />
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index b654339f702..d6956df139b 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -5424,7 +5424,13 @@ export const CollectionAssignProductDocument = gql`
   collectionAddProducts(collectionId: $collectionId, products: $productIds) {
     collection {
       id
-      products(first: $first, after: $after, before: $before, last: $last) {
+      products(
+        first: $first
+        after: $after
+        before: $before
+        last: $last
+        sortBy: {field: COLLECTION, direction: DESC}
+      ) {
         edges {
           node {
             ...CollectionProduct
@@ -5555,18 +5561,16 @@ export const UnassignCollectionProductDocument = gql`
   collectionRemoveProducts(collectionId: $collectionId, products: $productIds) {
     collection {
       id
-      products(first: $first, after: $after, before: $before, last: $last) {
+      products(
+        first: $first
+        after: $after
+        before: $before
+        last: $last
+        sortBy: {field: COLLECTION, direction: DESC}
+      ) {
         edges {
           node {
-            id
-            name
-            productType {
-              id
-              name
-            }
-            thumbnail {
-              url
-            }
+            ...CollectionProduct
           }
         }
         pageInfo {
@@ -5582,7 +5586,8 @@ export const UnassignCollectionProductDocument = gql`
     }
   }
 }
-    ${CollectionErrorFragmentDoc}`;
+    ${CollectionProductFragmentDoc}
+${CollectionErrorFragmentDoc}`;
 export type UnassignCollectionProductMutationFn = Apollo.MutationFunction<Types.UnassignCollectionProductMutation, Types.UnassignCollectionProductMutationVariables>;
 
 /**
@@ -5685,6 +5690,68 @@ export function useCollectionChannelListingUpdateMutation(baseOptions?: ApolloRe
 export type CollectionChannelListingUpdateMutationHookResult = ReturnType<typeof useCollectionChannelListingUpdateMutation>;
 export type CollectionChannelListingUpdateMutationResult = Apollo.MutationResult<Types.CollectionChannelListingUpdateMutation>;
 export type CollectionChannelListingUpdateMutationOptions = Apollo.BaseMutationOptions<Types.CollectionChannelListingUpdateMutation, Types.CollectionChannelListingUpdateMutationVariables>;
+export const ReorderProductsInCollectionDocument = gql`
+    mutation ReorderProductsInCollection($collectionId: ID!, $moves: [MoveProductInput!]!, $first: Int, $after: String, $last: Int, $before: String) {
+  collectionReorderProducts(collectionId: $collectionId, moves: $moves) {
+    collection {
+      id
+      products(
+        first: $first
+        after: $after
+        before: $before
+        last: $last
+        sortBy: {field: COLLECTION, direction: DESC}
+      ) {
+        edges {
+          node {
+            ...CollectionProduct
+          }
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+          hasPreviousPage
+          startCursor
+        }
+      }
+    }
+    errors {
+      message
+    }
+  }
+}
+    ${CollectionProductFragmentDoc}`;
+export type ReorderProductsInCollectionMutationFn = Apollo.MutationFunction<Types.ReorderProductsInCollectionMutation, Types.ReorderProductsInCollectionMutationVariables>;
+
+/**
+ * __useReorderProductsInCollectionMutation__
+ *
+ * To run a mutation, you first call `useReorderProductsInCollectionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useReorderProductsInCollectionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [reorderProductsInCollectionMutation, { data, loading, error }] = useReorderProductsInCollectionMutation({
+ *   variables: {
+ *      collectionId: // value for 'collectionId'
+ *      moves: // value for 'moves'
+ *      first: // value for 'first'
+ *      after: // value for 'after'
+ *      last: // value for 'last'
+ *      before: // value for 'before'
+ *   },
+ * });
+ */
+export function useReorderProductsInCollectionMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.ReorderProductsInCollectionMutation, Types.ReorderProductsInCollectionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.ReorderProductsInCollectionMutation, Types.ReorderProductsInCollectionMutationVariables>(ReorderProductsInCollectionDocument, options);
+      }
+export type ReorderProductsInCollectionMutationHookResult = ReturnType<typeof useReorderProductsInCollectionMutation>;
+export type ReorderProductsInCollectionMutationResult = Apollo.MutationResult<Types.ReorderProductsInCollectionMutation>;
+export type ReorderProductsInCollectionMutationOptions = Apollo.BaseMutationOptions<Types.ReorderProductsInCollectionMutation, Types.ReorderProductsInCollectionMutationVariables>;
 export const CollectionListDocument = gql`
     query CollectionList($first: Int, $after: String, $last: Int, $before: String, $filter: CollectionFilterInput, $sort: CollectionSortingInput, $channel: String) {
   collections(
@@ -5748,10 +5815,51 @@ export type CollectionListQueryHookResult = ReturnType<typeof useCollectionListQ
 export type CollectionListLazyQueryHookResult = ReturnType<typeof useCollectionListLazyQuery>;
 export type CollectionListQueryResult = Apollo.QueryResult<Types.CollectionListQuery, Types.CollectionListQueryVariables>;
 export const CollectionDetailsDocument = gql`
-    query CollectionDetails($id: ID!, $first: Int, $after: String, $last: Int, $before: String) {
+    query CollectionDetails($id: ID) {
   collection(id: $id) {
     ...CollectionDetails
-    products(first: $first, after: $after, before: $before, last: $last) {
+  }
+}
+    ${CollectionDetailsFragmentDoc}`;
+
+/**
+ * __useCollectionDetailsQuery__
+ *
+ * To run a query within a React component, call `useCollectionDetailsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCollectionDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCollectionDetailsQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useCollectionDetailsQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>(CollectionDetailsDocument, options);
+      }
+export function useCollectionDetailsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>(CollectionDetailsDocument, options);
+        }
+export type CollectionDetailsQueryHookResult = ReturnType<typeof useCollectionDetailsQuery>;
+export type CollectionDetailsLazyQueryHookResult = ReturnType<typeof useCollectionDetailsLazyQuery>;
+export type CollectionDetailsQueryResult = Apollo.QueryResult<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>;
+export const CollectionProductsDocument = gql`
+    query CollectionProducts($id: ID!, $first: Int, $after: String, $last: Int, $before: String) {
+  collection(id: $id) {
+    id
+    products(
+      first: $first
+      after: $after
+      before: $before
+      last: $last
+      sortBy: {field: COLLECTION, direction: DESC}
+    ) {
       edges {
         node {
           ...CollectionProduct
@@ -5766,20 +5874,19 @@ export const CollectionDetailsDocument = gql`
     }
   }
 }
-    ${CollectionDetailsFragmentDoc}
-${CollectionProductFragmentDoc}`;
+    ${CollectionProductFragmentDoc}`;
 
 /**
- * __useCollectionDetailsQuery__
+ * __useCollectionProductsQuery__
  *
- * To run a query within a React component, call `useCollectionDetailsQuery` and pass it any options that fit your needs.
- * When your component renders, `useCollectionDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useCollectionProductsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCollectionProductsQuery` returns an object from Apollo Client that contains loading, error, and data properties
  * you can use to render your UI.
  *
  * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = useCollectionDetailsQuery({
+ * const { data, loading, error } = useCollectionProductsQuery({
  *   variables: {
  *      id: // value for 'id'
  *      first: // value for 'first'
@@ -5789,17 +5896,17 @@ ${CollectionProductFragmentDoc}`;
  *   },
  * });
  */
-export function useCollectionDetailsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>) {
+export function useCollectionProductsQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.CollectionProductsQuery, Types.CollectionProductsQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return ApolloReactHooks.useQuery<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>(CollectionDetailsDocument, options);
+        return ApolloReactHooks.useQuery<Types.CollectionProductsQuery, Types.CollectionProductsQueryVariables>(CollectionProductsDocument, options);
       }
-export function useCollectionDetailsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>) {
+export function useCollectionProductsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.CollectionProductsQuery, Types.CollectionProductsQueryVariables>) {
           const options = {...defaultOptions, ...baseOptions}
-          return ApolloReactHooks.useLazyQuery<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>(CollectionDetailsDocument, options);
+          return ApolloReactHooks.useLazyQuery<Types.CollectionProductsQuery, Types.CollectionProductsQueryVariables>(CollectionProductsDocument, options);
         }
-export type CollectionDetailsQueryHookResult = ReturnType<typeof useCollectionDetailsQuery>;
-export type CollectionDetailsLazyQueryHookResult = ReturnType<typeof useCollectionDetailsLazyQuery>;
-export type CollectionDetailsQueryResult = Apollo.QueryResult<Types.CollectionDetailsQuery, Types.CollectionDetailsQueryVariables>;
+export type CollectionProductsQueryHookResult = ReturnType<typeof useCollectionProductsQuery>;
+export type CollectionProductsLazyQueryHookResult = ReturnType<typeof useCollectionProductsLazyQuery>;
+export type CollectionProductsQueryResult = Apollo.QueryResult<Types.CollectionProductsQuery, Types.CollectionProductsQueryVariables>;
 export const AddressValidationRulesDocument = gql`
     query addressValidationRules($countryCode: CountryCode!) {
   addressValidationRules(countryCode: $countryCode) {
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index d1e421717d7..855631b006e 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -9333,7 +9333,7 @@ export type UnassignCollectionProductMutationVariables = Exact<{
 }>;
 
 
-export type UnassignCollectionProductMutation = { __typename: 'Mutation', collectionRemoveProducts: { __typename: 'CollectionRemoveProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null };
+export type UnassignCollectionProductMutation = { __typename: 'Mutation', collectionRemoveProducts: { __typename: 'CollectionRemoveProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null };
 
 export type CollectionBulkDeleteMutationVariables = Exact<{
   ids: Array<Scalars['ID']> | Scalars['ID'];
@@ -9350,6 +9350,18 @@ export type CollectionChannelListingUpdateMutationVariables = Exact<{
 
 export type CollectionChannelListingUpdateMutation = { __typename: 'Mutation', collectionChannelListingUpdate: { __typename: 'CollectionChannelListingUpdate', errors: Array<{ __typename: 'CollectionChannelListingError', code: ProductErrorCode, field: string | null, message: string | null, channels: Array<string> | null }> } | null };
 
+export type ReorderProductsInCollectionMutationVariables = Exact<{
+  collectionId: Scalars['ID'];
+  moves: Array<MoveProductInput> | MoveProductInput;
+  first?: InputMaybe<Scalars['Int']>;
+  after?: InputMaybe<Scalars['String']>;
+  last?: InputMaybe<Scalars['Int']>;
+  before?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type ReorderProductsInCollectionMutation = { __typename: 'Mutation', collectionReorderProducts: { __typename: 'CollectionReorderProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', message: string | null }> } | null };
+
 export type CollectionListQueryVariables = Exact<{
   first?: InputMaybe<Scalars['Int']>;
   after?: InputMaybe<Scalars['String']>;
@@ -9364,6 +9376,13 @@ export type CollectionListQueryVariables = Exact<{
 export type CollectionListQuery = { __typename: 'Query', collections: { __typename: 'CollectionCountableConnection', edges: Array<{ __typename: 'CollectionCountableEdge', node: { __typename: 'Collection', id: string, name: string, products: { __typename: 'ProductCountableConnection', totalCount: number | null } | null, channelListings: Array<{ __typename: 'CollectionChannelListing', isPublished: boolean, publishedAt: any | null, channel: { __typename: 'Channel', id: string, name: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null };
 
 export type CollectionDetailsQueryVariables = Exact<{
+  id?: InputMaybe<Scalars['ID']>;
+}>;
+
+
+export type CollectionDetailsQuery = { __typename: 'Query', collection: { __typename: 'Collection', slug: string, description: any | null, seoDescription: string | null, seoTitle: string | null, id: string, name: string, backgroundImage: { __typename: 'Image', alt: string | null, url: string } | null, channelListings: Array<{ __typename: 'CollectionChannelListing', isPublished: boolean, publishedAt: any | null, channel: { __typename: 'Channel', id: string, name: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
+
+export type CollectionProductsQueryVariables = Exact<{
   id: Scalars['ID'];
   first?: InputMaybe<Scalars['Int']>;
   after?: InputMaybe<Scalars['String']>;
@@ -9372,7 +9391,7 @@ export type CollectionDetailsQueryVariables = Exact<{
 }>;
 
 
-export type CollectionDetailsQuery = { __typename: 'Query', collection: { __typename: 'Collection', slug: string, description: any | null, seoDescription: string | null, seoTitle: string | null, id: string, name: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null, backgroundImage: { __typename: 'Image', alt: string | null, url: string } | null, channelListings: Array<{ __typename: 'CollectionChannelListing', isPublished: boolean, publishedAt: any | null, channel: { __typename: 'Channel', id: string, name: string } }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
+export type CollectionProductsQuery = { __typename: 'Query', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null };
 
 export type AddressValidationRulesQueryVariables = Exact<{
   countryCode: CountryCode;
diff --git a/src/icons/Drag.tsx b/src/icons/Drag.tsx
new file mode 100644
index 00000000000..c684bd75fa3
--- /dev/null
+++ b/src/icons/Drag.tsx
@@ -0,0 +1,28 @@
+import { createSvgIcon } from "@material-ui/core/utils";
+import React from "react";
+
+const Drag = createSvgIcon(
+  <>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="9" cy="12" r="1" />
+      <circle cx="9" cy="5" r="1" />
+      <circle cx="9" cy="19" r="1" />
+      <circle cx="15" cy="12" r="1" />
+      <circle cx="15" cy="5" r="1" />
+      <circle cx="15" cy="19" r="1" />
+    </svg>
+  </>,
+  "ArrowSort",
+);
+
+export default Drag;
diff --git a/src/types.ts b/src/types.ts
index 29652db8635..7980df13516 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,6 +26,7 @@ export enum ListViews {
   ATTRIBUTE_VALUE_LIST = "ATTRIBUTE_VALUE_LIST",
   CATEGORY_LIST = "CATEGORY_LIST",
   COLLECTION_LIST = "COLLECTION_LIST",
+  COLLECTION_PRODUCTS_LIST = "COLLECTION_PRODUCTS_LIST",
   CUSTOMER_LIST = "CUSTOMER_LIST",
   DRAFT_LIST = "DRAFT_LIST",
   NAVIGATION_LIST = "NAVIGATION_LIST",