diff --git a/src/webapp/features/cards/components/cardsFilters/CardsFilters.tsx b/src/webapp/features/cards/components/cardsFilters/CardsFilters.tsx
new file mode 100644
index 00000000..907db9f6
--- /dev/null
+++ b/src/webapp/features/cards/components/cardsFilters/CardsFilters.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { Select } from '@mantine/core';
+import { CardSortField } from '@semble/types';
+
+interface Props {
+  value: CardSortField;
+  onChange: (value: CardSortField) => void;
+}
+
+export default function CardsFilters(props: Props) {
+  return (
+    <Select
+      allowDeselect={false}
+      variant="filled"
+      size="sm"
+      value={props.value}
+      onChange={(option) => props.onChange(option as CardSortField)}
+      data={[
+        {
+          value: CardSortField.UPDATED_AT,
+          label: 'Newest',
+        },
+        {
+          value: CardSortField.CREATED_AT,
+          label: 'Oldest',
+        },
+        {
+          value: CardSortField.LIBRARY_COUNT,
+          label: 'Most Popular',
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx b/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
index c86505be..1abab20c 100644
--- a/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
+++ b/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
@@ -2,56 +2,34 @@
 
 import { Button, Container, Group, Select, Stack } from '@mantine/core';
 import { Suspense, useState } from 'react';
-import { SortOrder, CardSortField } from '@semble/types';
 import CardsContainerContent from '../cardsContainerContent/CardsContainerContent';
 import CardsContainerContentSkeleton from '../cardsContainerContent/Skeleton.CardsContainerContent';
 import { BsFillGridFill, BsListTask } from 'react-icons/bs';
 import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
+import CardsFilters from '../../components/cardsFilters/CardsFilters';
+import { CardSortField, SortOrder } from '@semble/types';
 
 interface Props {
   handle: string;
 }
 
-type SortOption = 'newest' | 'oldest' | 'most-popular';
-
 export default function CardsContainer(props: Props) {
   const { settings, updateSetting } = useUserSettings();
-  const [sortOption, setSortOption] = useState<SortOption>('newest');
-
-  const getSortParams = (option: SortOption) => {
-    switch (option) {
-      case 'newest':
-        return { sortBy: CardSortField.UPDATED_AT, sortOrder: SortOrder.DESC };
-      case 'oldest':
-        return { sortBy: CardSortField.UPDATED_AT, sortOrder: SortOrder.ASC };
-      case 'most-popular':
-        return {
-          sortBy: CardSortField.LIBRARY_COUNT,
-          sortOrder: SortOrder.DESC,
-        };
-      default:
-        return { sortBy: CardSortField.UPDATED_AT, sortOrder: SortOrder.DESC };
-    }
+  const [sortField, setSortField] = useState<CardSortField>(
+    CardSortField.UPDATED_AT,
+  );
+  const sortOrderMap: Record<CardSortField, SortOrder> = {
+    [CardSortField.UPDATED_AT]: SortOrder.DESC,
+    [CardSortField.CREATED_AT]: SortOrder.ASC,
+    [CardSortField.LIBRARY_COUNT]: SortOrder.DESC,
   };
 
-  const { sortBy, sortOrder } = getSortParams(sortOption);
-
   return (
     <Container p="xs" size="xl">
       <Stack>
         <Group gap={'xs'} justify="space-between">
-          <Select
-            allowDeselect={false}
-            variant="filled"
-            size="sm"
-            value={sortOption}
-            onChange={(value) => setSortOption(value as SortOption)}
-            data={[
-              { value: 'newest', label: 'Newest' },
-              { value: 'oldest', label: 'Oldest' },
-              { value: 'most-popular', label: 'Most Popular' },
-            ]}
-          />
+          <CardsFilters value={sortField} onChange={setSortField} />
+
           <Button
             variant="light"
             color="gray"
@@ -71,8 +49,8 @@ export default function CardsContainer(props: Props) {
         <Suspense fallback={<CardsContainerContentSkeleton />}>
           <CardsContainerContent
             handle={props.handle}
-            sortBy={sortBy}
-            sortOrder={sortOrder}
+            sortBy={sortField}
+            sortOrder={sortOrderMap[sortField]}
           />
         </Suspense>
       </Stack>
diff --git a/src/webapp/features/cards/lib/utils/index.ts b/src/webapp/features/cards/lib/utils/index.ts
new file mode 100644
index 00000000..27d5354c
--- /dev/null
+++ b/src/webapp/features/cards/lib/utils/index.ts
@@ -0,0 +1,29 @@
+import { CardSortField, SortOrder } from '@semble/types';
+
+export const getCardsSortParams = (field: CardSortField) => {
+  switch (field) {
+    case CardSortField.UPDATED_AT:
+      return {
+        sortBy: CardSortField.UPDATED_AT,
+        sortOrder: SortOrder.DESC,
+      };
+
+    case CardSortField.CREATED_AT:
+      return {
+        sortBy: CardSortField.CREATED_AT,
+        sortOrder: SortOrder.ASC,
+      };
+
+    case CardSortField.LIBRARY_COUNT:
+      return {
+        sortBy: CardSortField.LIBRARY_COUNT,
+        sortOrder: SortOrder.DESC,
+      };
+
+    default:
+      return {
+        sortBy: CardSortField.UPDATED_AT,
+        sortOrder: SortOrder.DESC,
+      };
+  }
+};