diff --git a/ui/graphql/queries.graphql b/ui/graphql/queries.graphql
index 60fe637..beb654a 100644
--- a/ui/graphql/queries.graphql
+++ b/ui/graphql/queries.graphql
@@ -1,9 +1,15 @@
-query lastNFAsPaginated($pageSize: Int, $skip: Int, $searchValue: String) {
+query lastNFAsPaginated(
+  $pageSize: Int
+  $skip: Int
+  $orderBy: Token_orderBy
+  $orderDirection: OrderDirection
+  $searchValue: String
+) {
   tokens(
     first: $pageSize
     skip: $skip
-    orderDirection: desc
-    orderBy: tokenId
+    orderDirection: $orderDirection
+    orderBy: $orderBy
     where: { name_contains_nocase: $searchValue }
   ) {
     id
diff --git a/ui/src/providers/apollo-provider.tsx b/ui/src/providers/apollo-provider.tsx
index 1ab36f7..77d2d5b 100644
--- a/ui/src/providers/apollo-provider.tsx
+++ b/ui/src/providers/apollo-provider.tsx
@@ -43,7 +43,7 @@ const client = new ApolloClient({
       Query: {
         fields: {
           tokens: {
-            keyArgs: ['where'],
+            keyArgs: ['where', 'orderBy', 'orderDirection'],
             merge: mergeByKey('id'),
           },
         },
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
index e0a3409..6f74413 100644
--- a/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
@@ -19,8 +19,15 @@ const LoadingSkeletons: React.FC = () => (
 );
 
 export const NFAListFragment: React.FC = () => {
-  const { endReached, pageNumber, search, setEndReached, setPageNumber } =
-    Explore.useContext();
+  const {
+    endReached,
+    orderBy,
+    orderDirection,
+    pageNumber,
+    search,
+    setEndReached,
+    setPageNumber,
+  } = Explore.useContext();
 
   const {
     data: { tokens } = { tokens: [] },
@@ -31,6 +38,8 @@ export const NFAListFragment: React.FC = () => {
     variables: {
       pageSize,
       searchValue: search,
+      orderBy,
+      orderDirection,
       skip: pageNumber * pageSize, //skip is for the pagination
     },
     onCompleted: (data) => {
diff --git a/ui/src/views/explore/explore-list/nfa-search.tsx b/ui/src/views/explore/explore-list/nfa-search.tsx
index 82f32d2..d68fe85 100644
--- a/ui/src/views/explore/explore-list/nfa-search.tsx
+++ b/ui/src/views/explore/explore-list/nfa-search.tsx
@@ -7,15 +7,50 @@ import { Explore } from '../explore.context';
 import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
 
 const orderResults: DropdownItem[] = [
-  { value: 'a-z', label: 'Sort A-Z' },
-  { value: 'z-a', label: 'Sort Z-A' },
+  { value: 'newest', label: 'Newest' },
+  { value: 'oldest', label: 'Oldest' },
+  { value: 'a-z', label: 'Name A-Z' },
+  { value: 'z-a', label: 'Name Z-A' },
 ];
 
 export const NFASearchFragment: React.FC = () => {
-  const { setSearch } = Explore.useContext();
+  const {
+    setEndReached,
+    setOrderBy,
+    setOrderDirection,
+    setSearch,
+    setPageNumber,
+  } = Explore.useContext();
   const [selectedValue, setSelectedValue] = useState<DropdownItem>(
     orderResults[0]
-  ); //TODO replace for context
+  );
+
+  const handleSortChange = (item: DropdownItem): void => {
+    setSelectedValue(item);
+    setPageNumber(0);
+    setEndReached(false);
+
+    switch (item.value) {
+      case 'newest':
+        setOrderBy('tokenId');
+        setOrderDirection('desc');
+        break;
+      case 'oldest':
+        setOrderBy('tokenId');
+        setOrderDirection('asc');
+        break;
+      case 'a-z':
+        setOrderBy('name');
+        setOrderDirection('asc');
+        break;
+      case 'z-a':
+        setOrderBy('name');
+        setOrderDirection('desc');
+        break;
+      default:
+        break;
+    }
+  };
 
   const handleSearch = useDebounce(
     (searchValue: string) => setSearch(searchValue),
@@ -42,7 +77,7 @@ export const NFASearchFragment: React.FC = () => {
         <Dropdown
           items={orderResults}
           selectedValue={selectedValue}
-          onChange={setSelectedValue}
+          onChange={handleSortChange}
           backgroundColor="slate4"
           textColor="slate11"
           optionsWidth="40"
diff --git a/ui/src/views/explore/explore.context.tsx b/ui/src/views/explore/explore.context.tsx
index 2103097..a02d2e2 100644
--- a/ui/src/views/explore/explore.context.tsx
+++ b/ui/src/views/explore/explore.context.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
-import { OrderDirection } from '@/../.graphclient';
+import { OrderDirection, Token_orderBy } from '@/graphclient';
 import { createContext } from '@/utils';
 
 export type ExploreContext = {
   search: string;
-  orderBy: string;
+  orderBy: Token_orderBy;
   orderDirection: OrderDirection;
   pageNumber: number;
   endReached: boolean;
@@ -29,7 +29,7 @@ export abstract class Explore {
     children,
   }: Explore.ProviderProps) => {
     const [search, setSearch] = useState('');
-    const [orderBy, setOrderBy] = useState('');
+    const [orderBy, setOrderBy] = useState('tokenId');
     const [orderDirection, setOrderDirection] =
       useState<OrderDirection>('desc');
     const [pageNumber, setPageNumber] = useState(0);