diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index d388cb2..19c7721 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -17,6 +17,18 @@ const HomePage = () => {
 
   const createSections = (key: string, route: string) => {
     const data = t(key, { returnObjects: true }) as IImageContent[];
+
+    if (route === 'survivalProgress') {
+      const sliceIndex = Math.max(data.length - 3, 0);
+      return data
+        .slice(sliceIndex)
+        .reverse()
+        .map((item, index) => ({
+          ...item,
+          clickEvent: () => navigate(`/${route}?index=${index}`),
+        }));
+    }
+
     const sliceIndex = Math.max(data.length - 3, 0);
     return data.slice(sliceIndex).map((item, index) => ({
       ...item,
diff --git a/src/pages/SurvivalProgress.tsx b/src/pages/SurvivalProgress.tsx
index 8055b7f..6506b22 100644
--- a/src/pages/SurvivalProgress.tsx
+++ b/src/pages/SurvivalProgress.tsx
@@ -19,9 +19,9 @@ const SurvivalProgress = () => {
         subHeaderContentArray={[t('survivalProgress.description')]}
       />
       <Timeline
-        items={
+        items={(
           t('survivalProgress.data', { returnObjects: true }) as IImageContent[]
-        }
+        ).reverse()}
         activeIndex={shareIndex}
       />
     </>