diff --git a/blotztask-ui/package-lock.json b/blotztask-ui/package-lock.json
index 6215277d..7500c318 100644
--- a/blotztask-ui/package-lock.json
+++ b/blotztask-ui/package-lock.json
@@ -52,6 +52,7 @@
         "next-auth": "^4.24.10",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
+        "react-countup": "^6.5.3",
         "react-day-picker": "^8.7.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.44.3",
@@ -3229,6 +3230,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6495,6 +6502,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-countup": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
+      "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
+      "license": "MIT",
+      "dependencies": {
+        "countup.js": "^2.8.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-day-picker": {
       "version": "8.10.1",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
diff --git a/blotztask-ui/package.json b/blotztask-ui/package.json
index 31fa20e9..404149da 100644
--- a/blotztask-ui/package.json
+++ b/blotztask-ui/package.json
@@ -54,6 +54,7 @@
     "next-auth": "^4.24.10",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
+    "react-countup": "^6.5.3",
     "react-day-picker": "^8.7.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.44.3",
@@ -77,4 +78,4 @@
     "tailwindcss": "^3.4.6",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file
diff --git a/blotztask-ui/public/assets/images/homePageNewPicture.png b/blotztask-ui/public/assets/images/homePageNewPicture.png
new file mode 100644
index 00000000..36345801
Binary files /dev/null and b/blotztask-ui/public/assets/images/homePageNewPicture.png differ
diff --git a/blotztask-ui/public/assets/images/profileImage.png b/blotztask-ui/public/assets/images/profileImage.png
new file mode 100644
index 00000000..6d30b4cf
Binary files /dev/null and b/blotztask-ui/public/assets/images/profileImage.png differ
diff --git a/blotztask-ui/src/app/monthly-stats/page.tsx b/blotztask-ui/src/app/monthly-stats/page.tsx
new file mode 100644
index 00000000..5d4e5c3a
--- /dev/null
+++ b/blotztask-ui/src/app/monthly-stats/page.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import Image from 'next/image';
+import CountUp from 'react-countup';
+export default function Monthlystats() {
+  const mockTasks = [
+    {
+      id: 1,
+      title: 'Complete project report',
+      description: 'Finalize the project report and submit it to the manager.',
+      isDone: false,
+      createdAt: '2024-07-20T08:30:00Z',
+      updatedAt: '2024-07-20T08:30:00Z',
+    },
+    {
+      id: 2,
+      title: 'Meeting with the team',
+      description:
+        'Discuss the project milestones and deadlines with the team.',
+      isDone: false,
+      createdAt: '2024-07-21T10:00:00Z',
+      updatedAt: '2024-07-21T10:00:00Z',
+    },
+  ];
+
+  const taskCount = mockTasks.length;
+  return (
+    <>
+      <div className="flex flex-col gap-5 md:items-center md:p-10">
+        <div className="mt-1">
+          <Image
+            src="/assets/images/profileImage.png"
+            alt="an incredable image"
+            width={150}
+            height={150}
+          />
+        </div>
+        <div>
+          <p className="pl-20 font-arial font-bold text-[40px] leading-[100px] tracking-[-0.41px] text-center text-secondary">
+            You planned{' '}
+            <span className="font-arial font-bold text-[120px] leading-[100px] tracking-[-0.41px] text-center text-secondary">
+              <CountUp end={taskCount} />{' '}
+            </span>
+            tasks this month
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/blotztask-ui/src/app/navbar/main-nav.tsx b/blotztask-ui/src/app/navbar/main-nav.tsx
index 543c9189..407fdc2b 100644
--- a/blotztask-ui/src/app/navbar/main-nav.tsx
+++ b/blotztask-ui/src/app/navbar/main-nav.tsx
@@ -1,9 +1,6 @@
 'use client';
 
-import {
-  signOut,
-  useSession,
-} from 'next-auth/react';
+import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import styles from './main-nav.module.css';
 
@@ -29,36 +26,19 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
       <div className="sm:flex hidden justify-end">
         {session?.user ? (
           <div className="flex gap-6">
-            <Link
-              href="/task-dayview"
-              className={styles['nav-btn']}
-            >
+            <Link href="/task-dayview" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>Day View</span>
             </Link>
-            <Link
-              href="/task-list"
-              className={styles['nav-btn']}
-            >
+            {/* Add the link to the Monthly view page */}
+            <Link href="/monthly-stats" className={styles['nav-btn']}>
+              <span className={styles['link-underline']}>Monthly Summary</span>
+            </Link>
+            <Link href="/task-list" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>All Task</span>
             </Link>
-            {/* <Link
-              href="/tasks"
-              className={styles['nav-btn']}
-            >
-              <span className={styles['link-underline']}>New Task List</span>
-            </Link> */}
-            <Link
-              href="/test-connection"
-              className={styles['nav-btn']}
-            >
+            <Link href="/test-connection" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>Test Connection</span>
             </Link>
-            <Link
-              href="/profile"
-              className={styles['nav-btn']}
-            >
-              <span className={styles['link-underline']}>Profile</span>
-            </Link>
             <button
               type="button"
               onClick={() => signOut()}
@@ -69,25 +49,15 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
           </div>
         ) : (
           <div className="flex gap-6">
-            <Link
-              href="/signIn"
-            >
-            <button
-              type="button"
-              className={styles['nav-secondary-btn']}
-            >
-              <span>Sign in</span>
-            </button>
+            <Link href="/signIn">
+              <button type="button" className={styles['nav-secondary-btn']}>
+                <span>Sign in</span>
+              </button>
             </Link>
-            <Link
-              href="/signup"
-            >
-            <button
-              type="button"
-              className={styles['nav-btn']}
-            >
-              <span>Sign up</span>
-            </button>
+            <Link href="/signup">
+              <button type="button" className={styles['nav-btn']}>
+                <span>Sign up</span>
+              </button>
             </Link>
           </div>
         )}
diff --git a/blotztask-ui/src/app/page.tsx b/blotztask-ui/src/app/page.tsx
index 8ca956a5..4ac4acc1 100644
--- a/blotztask-ui/src/app/page.tsx
+++ b/blotztask-ui/src/app/page.tsx
@@ -1,18 +1,17 @@
-import { H1, H3 } from '@/components/ui/heading-with-anchor';
+import Image from "next/image";
 
 export default function Home() {
   return (
     <main className="flex flex-col gap-5 p-12 md:items-center md:p-28">
-      <H1 className="heading-primary">
-        Blotz
-        <span className="heading-secondary">Task</span>
-      </H1>
-
-      <H3 className="text-lg font-light text-muted-foreground sm:text-xl">
-        Designed to help users efficiently organize and track their tasks
-        providing functionality for task creation, management, and completion
-        tracking.
-      </H3>
+      <p className="mb-6 font-arial text-[32px] font-bold leading-[48px] tracking-[-0.41px] text-center text-secondary">
+        Welcome to the new age note taking web
+      </p>
+      <Image
+        src="/assets/images/homePageNewPicture.png"
+        alt="an incredable image"
+        width={600}
+        height={400}
+      />
     </main>
   );
 }
diff --git a/blotztask-ui/src/app/task-dayview/page.tsx b/blotztask-ui/src/app/task-dayview/page.tsx
index bc7c8a95..fdeceb2f 100644
--- a/blotztask-ui/src/app/task-dayview/page.tsx
+++ b/blotztask-ui/src/app/task-dayview/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { TaskDTO, taskDTOSchema } from './schema/schema'
+import { TaskDTO, taskDTOSchema } from './schema/schema';
 import { H1, H5 } from '@/components/ui/heading-with-anchor';
 import { fetchTaskItemsDueToday } from '@/services/taskService';
 
@@ -22,33 +22,35 @@ export default function Dayview() {
       const notDoneTasks = validatedTasks.filter((task) => !task.isDone);
       setIncompleteTasks(notDoneTasks);
     } catch (error) {
-      console.error("Error loading tasks:", error);
+      console.error('Error loading tasks:', error);
     }
   };
 
   return (
     <>
-      <div className='flex flex-col gap-5'>
-        <div className='flex flex-col gap-5'>
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5">
           <H1 className="heading-primary">
             Day
             <span className="heading-secondary">View</span>
-          </H1>        
-          <H5>
-              List of today&apos;s task
-          </H5>
+          </H1>
+          <H5>List of today&apos;s task</H5>
         </div>
 
         <div className="grid gap-6 w-full">
           {incompleteTasks.length > 0 ? (
             <div className="grid gap-6 w-full">
               {incompleteTasks.map((task) => (
-                <div key={task.id} className='w-full'>
-                  <div className='flex flex-row'>
-                    <div className={`flex justify-center items-center rounded-xl bg-work-label mr-2 w-1/3 p-4`}>
+                <div key={task.id} className="w-full">
+                  <div className="flex flex-row">
+                    <div
+                      className={`flex justify-center items-center rounded-xl bg-work-label mr-2 w-1/3 p-4`}
+                    >
                       <p>{task.title}</p>
                     </div>
-                    <div className={`flex justify-center items-center rounded-xl bg-work-label grow`}>
+                    <div
+                      className={`flex justify-center items-center rounded-xl bg-work-label grow`}
+                    >
                       <p>{task.description}</p>
                     </div>
                   </div>