diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts
index 928fcbe07..154ad5abe 100644
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -7,7 +7,7 @@ dotenv.config()
 
 global.React = React
 global.TextEncoder = TextEncoder
-
+global.structuredClone = (val) => JSON.parse(JSON.stringify(val))
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation((...args) => {
     throw new Error(`Console error: ${args.join(' ')}`)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b0d6979e1..0ced32c35 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -46,7 +46,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-gtm-module": "^2.0.11",
-        "react-icons": "^5.3.0",
+        "react-icons": "^5.4.0",
         "react-leaflet": "^5.0.0",
         "react-router-dom": "^7.0.2",
         "react-tooltip": "^5.28.0",
diff --git a/frontend/package.json b/frontend/package.json
index 9fbaf5270..52d58ed42 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -56,7 +56,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-gtm-module": "^2.0.11",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.0.2",
     "react-tooltip": "^5.28.0",
diff --git a/frontend/src/components/SearchPageLayout.tsx b/frontend/src/components/SearchPageLayout.tsx
index c91f54fdc..dd56a377d 100644
--- a/frontend/src/components/SearchPageLayout.tsx
+++ b/frontend/src/components/SearchPageLayout.tsx
@@ -50,7 +50,6 @@ const SearchPageLayout = ({
           initialValue={searchQuery}
           onReady={handleSearchBarReady}
         />
-        <div>{sortChildren}</div>
       </div>
       {!isSearchBarReady || !isLoaded ? (
         <div className="mt-20 flex h-64 w-full items-center justify-center">
@@ -59,6 +58,7 @@ const SearchPageLayout = ({
       ) : (
         <>
           <div>
+            {totalPages !== 0 && <div className="flex justify-end">{sortChildren}</div>}
             {totalPages === 0 && <div className="text bg:text-white m-4 text-xl">{empty}</div>}
             {children}
           </div>
diff --git a/frontend/src/components/SortBy.tsx b/frontend/src/components/SortBy.tsx
index 19974db81..841cdf5b4 100644
--- a/frontend/src/components/SortBy.tsx
+++ b/frontend/src/components/SortBy.tsx
@@ -1,56 +1,103 @@
-import { faCaretDown, faCaretUp, faCheck } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowDownShortWide,
+  faArrowUpWideShort,
+  faCheck,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+import { SortByProps } from 'types/sortBy'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from 'components/ui/dropdownMenu'
-
-interface SortOption {
-  value: string
-  label: string
-}
-
-interface SortByProps {
-  options: SortOption[]
-  selectedOption: string
-  onSortChange: (value: string) => void
-}
-
-const SortBy = ({ options, selectedOption, onSortChange }: SortByProps) => {
-  const [open, setOpen] = useState<boolean>(false)
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen)
-  }
-
-  if (!options || options.length === 0) return null
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from 'components/ui/Select'
+const SortBy = ({
+  sortOptions,
+  selectedSortOption,
+  selectedOrder,
+  onSortChange,
+  onOrderChange,
+}: SortByProps) => {
+  if (!sortOptions || sortOptions.items.length === 0) return null
 
   return (
-    <DropdownMenu open={open} onOpenChange={handleOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className="h-10 w-[100px] justify-between border-2 bg-white text-[#292e36] dark:bg-[#3C3C3C] dark:text-[#D1D5DB]"
+    <div className="flex items-center gap-4">
+      {/* Sort Attribute Dropdown */}
+      <div className="rounded-xl bg-gray-200 px-3 shadow-sm dark:bg-[#323232]">
+        <SelectRoot
+          key={selectedSortOption}
+          collection={sortOptions}
+          size="sm"
+          onValueChange={(e) => {
+            onSortChange(e.value[0])
+          }}
         >
-          <span>Sort By </span>
-          <FontAwesomeIcon icon={open ? faCaretUp : faCaretDown} className="pl-2" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[180px] bg-white text-[#4B5563] dark:bg-[#3C3C3C] dark:text-[#D1D5DB]">
-        {options.map((option) => (
-          <DropdownMenuItem
-            key={option.value}
-            onSelect={() => onSortChange(option.value)}
-            className="justify-between"
+          <div className="flex items-center gap-2">
+            <SelectLabel className="font-small text-sm text-gray-600 dark:text-gray-300">
+              Sort By:
+            </SelectLabel>
+            <SelectTrigger className="width-auto text-sm">
+              <SelectValueText
+                paddingRight={'1.4rem'}
+                width={'auto'}
+                textWrap="nowrap"
+                placeholder={
+                  sortOptions.items.find((item) => item.value === selectedSortOption)?.label
+                }
+              />
+            </SelectTrigger>
+          </div>
+          <SelectContent className="text-md text-md min-w-36 dark:bg-[#323232]">
+            {sortOptions.items.map((attribute) => (
+              <SelectItem
+                item={attribute}
+                key={attribute.value}
+                className="p-1 px-3 hover:bg-[#D1DBE6] dark:hover:bg-[#454545]"
+              >
+                {attribute.label}
+                {attribute.value === selectedSortOption && (
+                  <FontAwesomeIcon
+                    icon={faCheck}
+                    className="text-sm text-blue-500 dark:text-sky-600"
+                  />
+                )}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </SelectRoot>
+      </div>
+
+      {/* Sort Order Dropdown */}
+      {selectedSortOption !== 'default' && (
+        <div className="relative flex items-center">
+          <button
+            data-tooltip-id="sort-order-tooltip"
+            data-tooltip-content={selectedOrder === 'asc' ? 'Ascending Order' : 'Descending Order'}
+            onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
+            className="flex items-center justify-center rounded-lg bg-gray-200 p-2 shadow-sm hover:bg-gray-300 dark:bg-[#323232] dark:text-gray-300 dark:hover:bg-[#454545]"
           >
-            {option.label}
-            {option.value === selectedOption && <FontAwesomeIcon icon={faCheck} />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+            {selectedOrder === 'asc' ? (
+              <FontAwesomeIcon
+                icon={faArrowDownShortWide}
+                className="h-5 w-5 text-gray-600 dark:text-gray-200"
+              />
+            ) : (
+              <FontAwesomeIcon
+                icon={faArrowUpWideShort}
+                className="h-5 w-5 text-gray-600 dark:text-gray-200"
+              />
+            )}
+          </button>
+          <Tooltip
+            id="sort-order-tooltip"
+            className="rounded-lg bg-white px-1 py-0 text-sm text-gray-600 shadow-md"
+          />
+        </div>
+      )}
+    </div>
   )
 }
 
diff --git a/frontend/src/components/ui/CloseButton.tsx b/frontend/src/components/ui/CloseButton.tsx
new file mode 100644
index 000000000..f834ed996
--- /dev/null
+++ b/frontend/src/components/ui/CloseButton.tsx
@@ -0,0 +1,16 @@
+import type { ButtonProps } from '@chakra-ui/react'
+import { IconButton as ChakraIconButton } from '@chakra-ui/react'
+import * as React from 'react'
+import { LuX } from 'react-icons/lu'
+
+export type CloseButtonProps = ButtonProps
+
+export const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
+  function CloseButton(props, ref) {
+    return (
+      <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+        {props.children ?? <LuX />}
+      </ChakraIconButton>
+    )
+  }
+)
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
new file mode 100644
index 000000000..a0bb643ae
--- /dev/null
+++ b/frontend/src/components/ui/Select.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import type { CollectionItem } from '@chakra-ui/react'
+import { Select as ChakraSelect, Portal } from '@chakra-ui/react'
+import * as React from 'react'
+import { CloseButton } from './CloseButton'
+
+interface SelectTriggerProps extends ChakraSelect.ControlProps {
+  clearable?: boolean
+}
+
+export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  function SelectTrigger(props, ref) {
+    const { children, clearable, ...rest } = props
+    return (
+      <ChakraSelect.Control {...rest}>
+        <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
+        <ChakraSelect.IndicatorGroup>
+          {clearable && <SelectClearTrigger />}
+          <ChakraSelect.Indicator />
+        </ChakraSelect.IndicatorGroup>
+      </ChakraSelect.Control>
+    )
+  }
+)
+
+const SelectClearTrigger = React.forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>(
+  function SelectClearTrigger(props, ref) {
+    return (
+      <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
+        <CloseButton
+          size="xs"
+          variant="plain"
+          focusVisibleRing="inside"
+          focusRingWidth="2px"
+          pointerEvents="auto"
+        />
+      </ChakraSelect.ClearTrigger>
+    )
+  }
+)
+
+interface SelectContentProps extends ChakraSelect.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(
+  function SelectContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraSelect.Positioner>
+          <ChakraSelect.Content {...rest} ref={ref} />
+        </ChakraSelect.Positioner>
+      </Portal>
+    )
+  }
+)
+
+export const SelectItem = React.forwardRef<HTMLDivElement, ChakraSelect.ItemProps>(
+  function SelectItem(props, ref) {
+    const { item, children, ...rest } = props
+    return (
+      <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
+        {children}
+        <ChakraSelect.ItemIndicator />
+      </ChakraSelect.Item>
+    )
+  }
+)
+
+interface SelectValueTextProps extends Omit<ChakraSelect.ValueTextProps, 'children'> {
+  children?(items: CollectionItem[]): React.ReactNode
+}
+
+export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueTextProps>(
+  function SelectValueText(props, ref) {
+    const { children, ...rest } = props
+    return (
+      <ChakraSelect.ValueText {...rest} ref={ref}>
+        <ChakraSelect.Context>
+          {(select) => {
+            const items = select.selectedItems
+            if (items.length === 0) return props.placeholder
+            if (children) return children(items)
+            if (items.length === 1) return select.collection.stringifyItem(items[0])
+            return `${items.length} selected`
+          }}
+        </ChakraSelect.Context>
+      </ChakraSelect.ValueText>
+    )
+  }
+)
+
+export const SelectRoot = React.forwardRef<HTMLDivElement, ChakraSelect.RootProps>(
+  function SelectRoot(props, ref) {
+    return (
+      <ChakraSelect.Root
+        {...props}
+        ref={ref}
+        positioning={{ sameWidth: true, ...props.positioning }}
+      >
+        {props.asChild ? (
+          props.children
+        ) : (
+          <>
+            <ChakraSelect.HiddenSelect />
+            {props.children}
+          </>
+        )}
+      </ChakraSelect.Root>
+    )
+  }
+) as ChakraSelect.RootComponent
+
+interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
+  label: React.ReactNode
+}
+
+export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupProps>(
+  function SelectItemGroup(props, ref) {
+    const { children, label, ...rest } = props
+    return (
+      <ChakraSelect.ItemGroup {...rest} ref={ref}>
+        <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
+        {children}
+      </ChakraSelect.ItemGroup>
+    )
+  }
+)
+
+export const SelectLabel = ChakraSelect.Label
+export const SelectItemText = ChakraSelect.ItemText
diff --git a/frontend/src/components/ui/dropdownMenu.tsx b/frontend/src/components/ui/dropdownMenu.tsx
deleted file mode 100644
index a52b7955a..000000000
--- a/frontend/src/components/ui/dropdownMenu.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { faCheck, faChevronRight, faDotCircle } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import * as React from 'react'
-import { cn } from 'utils/utility'
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <FontAwesomeIcon icon={faChevronRight} className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <FontAwesomeIcon icon={faCheck} className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <FontAwesomeIcon icon={faDotCircle} className="h-2 w-2" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
diff --git a/frontend/src/hooks/useSearchPage.ts b/frontend/src/hooks/useSearchPage.ts
index 0348f292c..5e9de339e 100644
--- a/frontend/src/hooks/useSearchPage.ts
+++ b/frontend/src/hooks/useSearchPage.ts
@@ -8,6 +8,7 @@ interface UseSearchPageOptions {
   indexName: string
   pageTitle: string
   defaultSortBy?: string
+  defaultOrder?: string
 }
 
 interface UseSearchPageReturn<T> {
@@ -17,15 +18,18 @@ interface UseSearchPageReturn<T> {
   totalPages: number
   searchQuery: string
   sortBy: string
+  order: string
   handleSearch: (query: string) => void
   handlePageChange: (page: number) => void
   handleSortChange: (sort: string) => void
+  handleOrderChange: (order: string) => void
 }
 
 export function useSearchPage<T>({
   indexName,
   pageTitle,
   defaultSortBy = '',
+  defaultOrder = '',
 }: UseSearchPageOptions): UseSearchPageReturn<T> {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
@@ -33,16 +37,24 @@ export function useSearchPage<T>({
   const [currentPage, setCurrentPage] = useState<number>(parseInt(searchParams.get('page') || '1'))
   const [searchQuery, setSearchQuery] = useState<string>(searchParams.get('q') || '')
   const [sortBy, setSortBy] = useState<string>(searchParams.get('sortBy') || defaultSortBy)
+  const [order, setOrder] = useState<string>(searchParams.get('order') || defaultOrder)
   const [totalPages, setTotalPages] = useState<number>(0)
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
-
   useEffect(() => {
     const params = new URLSearchParams()
     if (searchQuery) params.set('q', searchQuery)
     if (currentPage > 1) params.set('page', currentPage.toString())
-    if (sortBy && sortBy !== 'projects') params.set('sortBy', sortBy)
+
+    if (sortBy && sortBy !== 'default' && sortBy[0] !== 'default' && sortBy !== '') {
+      params.set('sortBy', sortBy)
+    }
+
+    if (sortBy !== 'default' && sortBy[0] !== 'default' && order && order !== '') {
+      params.set('order', order)
+    }
+
     setSearchParams(params)
-  }, [searchQuery, currentPage, sortBy, setSearchParams])
+  }, [searchQuery, order, currentPage, sortBy, setSearchParams])
 
   useEffect(() => {
     document.title = pageTitle
@@ -51,7 +63,9 @@ export function useSearchPage<T>({
     const fetchData = async () => {
       try {
         const data: AlgoliaResponseType<T> = await fetchAlgoliaData<T>(
-          sortBy ? `${indexName}_${sortBy}` : indexName,
+          sortBy && sortBy !== 'default' && sortBy[0] !== 'default'
+            ? `${indexName}_${sortBy}${order && order !== '' ? `_${order}` : ''}`
+            : indexName,
           searchQuery,
           currentPage
         )
@@ -64,7 +78,7 @@ export function useSearchPage<T>({
     }
 
     fetchData()
-  }, [currentPage, searchQuery, sortBy, indexName, pageTitle, navigate])
+  }, [currentPage, searchQuery, order, sortBy, indexName, pageTitle, navigate])
 
   const handleSearch = (query: string) => {
     setSearchQuery(query)
@@ -83,7 +97,10 @@ export function useSearchPage<T>({
     setSortBy(sort)
     setCurrentPage(1)
   }
-
+  const handleOrderChange = (order: string) => {
+    setOrder(order)
+    setCurrentPage(1)
+  }
   return {
     items,
     isLoaded,
@@ -91,8 +108,10 @@ export function useSearchPage<T>({
     totalPages,
     searchQuery,
     sortBy,
+    order,
     handleSearch,
     handlePageChange,
     handleSortChange,
+    handleOrderChange,
   }
 }
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
index 20b8d70c8..dd829bd2d 100644
--- a/frontend/src/pages/Projects.tsx
+++ b/frontend/src/pages/Projects.tsx
@@ -8,7 +8,6 @@ import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import Card from 'components/Card'
 import SearchPageLayout from 'components/SearchPageLayout'
 import SortBy from 'components/SortBy'
-
 const ProjectsPage = () => {
   const {
     items: projects,
@@ -17,13 +16,16 @@ const ProjectsPage = () => {
     totalPages,
     searchQuery,
     sortBy,
+    order,
     handleSearch,
     handlePageChange,
     handleSortChange,
+    handleOrderChange,
   } = useSearchPage<project>({
     indexName: 'projects',
     pageTitle: 'OWASP Projects',
-    defaultSortBy: '',
+    defaultSortBy: 'default',
+    defaultOrder: 'asc',
   })
 
   const navigate = useNavigate()
@@ -68,9 +70,11 @@ const ProjectsPage = () => {
       searchPlaceholder="Search for OWASP projects..."
       sortChildren={
         <SortBy
-          options={sortOptionsProject}
-          selectedOption={sortBy}
+          sortOptions={sortOptionsProject}
+          selectedSortOption={sortBy}
           onSortChange={handleSortChange}
+          selectedOrder={order}
+          onOrderChange={handleOrderChange}
         />
       }
     >
diff --git a/frontend/src/types/sortBy.tsx b/frontend/src/types/sortBy.tsx
new file mode 100644
index 000000000..fc251e08b
--- /dev/null
+++ b/frontend/src/types/sortBy.tsx
@@ -0,0 +1,8 @@
+import { ListCollection } from '@chakra-ui/react'
+export interface SortByProps {
+  sortOptions: ListCollection
+  selectedSortOption: string
+  selectedOrder: string
+  onSortChange: (value: string) => void
+  onOrderChange: (order: string) => void
+}
diff --git a/frontend/src/utils/sortingOptions.ts b/frontend/src/utils/sortingOptions.ts
index 15f63b0e9..817a6be0b 100644
--- a/frontend/src/utils/sortingOptions.ts
+++ b/frontend/src/utils/sortingOptions.ts
@@ -1,11 +1,11 @@
-export const sortOptionsProject = [
-  { label: 'Default', value: '' },
-  { label: 'Name (A-Z)', value: 'name_asc' },
-  { label: 'Name (Z-A)', value: 'name_desc' },
-  { label: 'Stars (Low to High)', value: 'stars_count_asc' },
-  { label: 'Stars (High to Low)', value: 'stars_count_desc' },
-  { label: 'Contributors (Low to High)', value: 'contributors_count_asc' },
-  { label: 'Contributors (High to Low)', value: 'contributors_count_desc' },
-  { label: 'Forks (Low to High)', value: 'forks_count_asc' },
-  { label: 'Forks (High to Low)', value: 'forks_count_desc' },
-]
+import { createListCollection } from '@chakra-ui/react'
+
+export const sortOptionsProject = createListCollection({
+  items: [
+    { label: 'Relevancy', value: 'default' },
+    { label: 'Contributors', value: 'contributors_count' },
+    { label: 'Forks', value: 'forks_count' },
+    { label: 'Name', value: 'name' },
+    { label: 'Stars', value: 'stars_count' },
+  ],
+})
diff --git a/frontend/src/wrappers/testUtil.tsx b/frontend/src/wrappers/testUtil.tsx
index 600789582..7a5114fad 100644
--- a/frontend/src/wrappers/testUtil.tsx
+++ b/frontend/src/wrappers/testUtil.tsx
@@ -1,9 +1,13 @@
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
 import { render } from '@testing-library/react'
 import { ReactNode } from 'react'
 import { BrowserRouter } from 'react-router-dom'
-
 const customRender = (ui: ReactNode) => {
-  return render(<BrowserRouter>{ui}</BrowserRouter>)
+  return render(
+    <BrowserRouter>
+      <ChakraProvider value={defaultSystem}>{ui}</ChakraProvider>
+    </BrowserRouter>
+  )
 }
 
 export * from '@testing-library/react'