diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index c8e77e7..18143b4 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -49,7 +49,7 @@ const HeaderMain = ({
   return (
     <Box
       w={"100%"}
-      h={{base:"8%", lg:"6%"}}
+      h={{base:"8%", lg:"8%"}}
       position={"relative"}
       className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
         slideDirecttion ? " ps-2" : ""
diff --git a/src/Components/MiniHeader.jsx b/src/Components/MiniHeader.jsx
index 3f97e27..459e2ba 100644
--- a/src/Components/MiniHeader.jsx
+++ b/src/Components/MiniHeader.jsx
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 const MiniHeader = ({ title, subTitle, backButton }) => {
   const navigate = useNavigate();
-  const [firstPart, secondPart] = title.split(/ (.+)/);
+  const [firstPart, secondPart] = title && title?.split(/ (.+)/);
 
   return (
     <HStack gap={3} mb={4}>
diff --git a/src/Pages/Report/AddNewReport.jsx b/src/Pages/Report/AddNewReport.jsx
new file mode 100644
index 0000000..872c661
--- /dev/null
+++ b/src/Pages/Report/AddNewReport.jsx
@@ -0,0 +1,22 @@
+import { Box, Input, Text } from '@chakra-ui/react'
+import React from 'react'
+import MiniHeader from '../../Components/MiniHeader'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+const AddNewReport = () => {
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Add New Report"}
+                backButton={true}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+            />
+            <Box>
+                <Text mb='8px' >Name of the Report</Text>
+                <Input placeholder='Basic usage' />
+            </Box>
+        </Box>
+    )
+}
+
+export default AddNewReport
\ No newline at end of file
diff --git a/src/Pages/Requests/Requests.jsx b/src/Pages/Requests/Requests.jsx
index 262580a..0c30925 100644
--- a/src/Pages/Requests/Requests.jsx
+++ b/src/Pages/Requests/Requests.jsx
@@ -23,8 +23,10 @@ import MiniHeader from "../../Components/MiniHeader";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import { FaRegFilePdf } from "react-icons/fa";
 import { MdOutlineRamenDining } from "react-icons/md";
+import { useNavigate } from "react-router-dom";
 
 const Requests = () => {
+  const navigate = useNavigate()
   const { requestsTable } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -236,6 +238,8 @@ const Requests = () => {
                         // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
                         opacity: 1,
                       }}
+                      onClick={() => navigate('/reports/add-new-report')}
+
                     >
                       Add to Report
                     </Button>
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index da015a6..b4bcdbc 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -1,5 +1,6 @@
 import Dashbaord from "../Pages/Dashbaord";
 import Expenses from "../Pages/Expenses";
+import AddNewReport from "../Pages/Report/AddNewReport";
 import Report from "../Pages/Report/Report";
 import Requests from "../Pages/Requests/Requests";
 
@@ -8,5 +9,6 @@ export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
   { path: "/reports", Component: Report },
+  { path: "/reports/add-new-report", Component: AddNewReport },
   { path: "/requests", Component: Requests },
 ];