better not found state in trade page

src/pages/trade/index.tsx

@@ -10,6 +10,7 @@ import { useEffect } from 'react';
 import { lsService } from 'services/localeStorage';
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 import { getLastVisitedPair, useNavigate, useSearch } from 'libs/routing';
+import { NotFound } from 'components/common/NotFound';
 
 export type TradePageProps = { base: Token; quote: Token };
 
@@ -48,7 +49,11 @@ export const TradePage = () => {
           </div>
         </div>
       ) : !pairFound ? (
-        <p>Pair not found</p>
+        <NotFound
+          variant="error"
+          title="We couldn't find any orders for this pair"
+          text="Try selecting a different token pair from the dropdown above."
+        />
       ) : (
         <div className="px-content mt-25 pb-30 xl:px-50 grid grid-cols-1 gap-20 md:grid-cols-12">
           <div className="order-3 md:order-1 md:col-span-4 md:row-span-2">