diff --git a/src/pages/DragonPage/DragonsSyrup.tsx b/src/pages/DragonPage/DragonsSyrup.tsx
index c777169ea..73bbb5be1 100644
--- a/src/pages/DragonPage/DragonsSyrup.tsx
+++ b/src/pages/DragonPage/DragonsSyrup.tsx
@@ -31,7 +31,6 @@ const EARNED_COLUMN = 4;
 const DragonsSyrup: React.FC = () => {
   const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
-  const [pageLoading, setPageLoading] = useState(false); //this is used for not loading syrups immediately when user is on dragons page
   const [isEndedSyrup, setIsEndedSyrup] = useState(false);
   const [pageIndex, setPageIndex] = useState(0);
   const [sortBy, setSortBy] = useState(0);
@@ -49,14 +48,14 @@ const DragonsSyrup: React.FC = () => {
 
   const addedStakingSyrupInfos = useSyrupInfo(
     null,
-    pageLoading || isEndedSyrup ? 0 : undefined,
-    pageLoading || isEndedSyrup ? 0 : undefined,
+    isEndedSyrup ? 0 : undefined,
+    isEndedSyrup ? 0 : undefined,
     { search: syrupSearch, isStaked: stakedOnly },
   );
   const addedOldSyrupInfos = useOldSyrupInfo(
     null,
-    pageLoading || isEndedSyrup ? undefined : 0,
-    pageLoading || isEndedSyrup ? undefined : 0,
+    isEndedSyrup ? undefined : 0,
+    isEndedSyrup ? undefined : 0,
     { search: syrupSearch, isStaked: stakedOnly },
   );
 
@@ -306,7 +305,7 @@ const DragonsSyrup: React.FC = () => {
           ))}
         </Box>
       )}
-      {syrupInfos && !pageLoading ? (
+      {syrupInfos ? (
         syrupInfos.map((syrup, ind) => (
           <SyrupCard key={ind} syrup={syrup} dQUICKAPY={dQUICKAPY} />
         ))
diff --git a/src/state/stake/hooks.ts b/src/state/stake/hooks.ts
index 2a95e72bc..76db08dba 100755
--- a/src/state/stake/hooks.ts
+++ b/src/state/stake/hooks.ts
@@ -1,11 +1,4 @@
-import {
-  CurrencyAmount,
-  JSBI,
-  Token,
-  TokenAmount,
-  Price,
-  Pair,
-} from '@uniswap/sdk';
+import { CurrencyAmount, JSBI, Token, TokenAmount, Pair } from '@uniswap/sdk';
 import dayjs from 'dayjs';
 import { useMemo, useEffect /** , useState */ } from 'react';
 import { usePairs } from 'data/Reserves';
@@ -188,23 +181,22 @@ export function useSyrupInfo(
   filter?: { search: string; isStaked: boolean },
 ): SyrupInfo[] {
   const { chainId, account } = useActiveWeb3React();
+  const currentTimestamp = dayjs().unix();
 
   const info = useMemo(
     () =>
       chainId
         ? returnSyrupInfo()
             [chainId]?.slice(startIndex, endIndex)
-            .filter((stakingRewardInfo) =>
-              tokenToFilterBy === undefined || tokenToFilterBy === null
-                ? getSearchFiltered(
-                    stakingRewardInfo,
-                    filter ? filter.search : '',
-                  )
-                : tokenToFilterBy.equals(stakingRewardInfo.token) &&
-                  tokenToFilterBy.equals(stakingRewardInfo.token),
+            .filter(
+              (syrupInfo) =>
+                syrupInfo.ending > currentTimestamp &&
+                (tokenToFilterBy === undefined || tokenToFilterBy === null
+                  ? getSearchFiltered(syrupInfo, filter ? filter.search : '')
+                  : tokenToFilterBy.equals(syrupInfo.token)),
             ) ?? []
         : [],
-    [chainId, tokenToFilterBy, startIndex, endIndex, filter],
+    [chainId, tokenToFilterBy, startIndex, endIndex, filter, currentTimestamp],
   );
 
   const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
@@ -392,23 +384,31 @@ export function useOldSyrupInfo(
   filter?: { search: string; isStaked: boolean },
 ): SyrupInfo[] {
   const { chainId, account } = useActiveWeb3React();
-  const info = useMemo(
-    () =>
-      chainId
-        ? returnSyrupInfo(true)
-            [chainId]?.slice(startIndex, endIndex)
-            ?.filter((stakingRewardInfo) =>
-              tokenToFilterBy === undefined || tokenToFilterBy === null
-                ? getSearchFiltered(
-                    stakingRewardInfo,
-                    filter ? filter.search : '',
-                  )
-                : tokenToFilterBy.equals(stakingRewardInfo.token) &&
-                  tokenToFilterBy.equals(stakingRewardInfo.token),
-            ) ?? []
-        : [],
-    [chainId, tokenToFilterBy, startIndex, endIndex, filter],
-  );
+  const currentTimestamp = dayjs().unix();
+
+  const info = useMemo(() => {
+    if (!chainId) return [];
+    const endedSyrupInfos =
+      returnSyrupInfo(false)[chainId]?.filter(
+        (syrupInfo) => syrupInfo.ending <= currentTimestamp,
+      ) ?? [];
+    const oldSyrupInfos = returnSyrupInfo(true)[chainId] ?? [];
+    const allOldSyrupInfos = endedSyrupInfos.concat(oldSyrupInfos);
+    return allOldSyrupInfos
+      .slice(startIndex, endIndex)
+      .filter((syrupInfo) =>
+        tokenToFilterBy === undefined || tokenToFilterBy === null
+          ? getSearchFiltered(syrupInfo, filter ? filter.search : '')
+          : tokenToFilterBy.equals(syrupInfo.token),
+      );
+  }, [
+    chainId,
+    tokenToFilterBy,
+    startIndex,
+    endIndex,
+    filter,
+    currentTimestamp,
+  ]);
 
   const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
 
@@ -539,7 +539,7 @@ export function useOldSyrupInfo(
           memo.push({
             stakingRewardAddress: rewardsAddress,
             token: syrupInfo.token,
-            ended: syrupInfo.ended,
+            ended: true,
             name: syrupInfo.name,
             lp: syrupInfo.lp,
             periodFinish: periodFinishMs,