diff --git a/package-lock.json b/package-lock.json
index a82f5ab..f8e669b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -831,7 +831,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2412,7 +2411,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4739,7 +4737,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4873,7 +4870,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4893,7 +4889,6 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5343,7 +5338,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
diff --git a/src/App.tsx b/src/App.tsx
index 569384d..15e5eb8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import ExpensesOverview from "./pages/dashboard/expenses/Expenses";
 import NewExpense from "./pages/dashboard/expenses/New";
 import LandingPage from "./pages/LandingPage";
 import Overview from "./pages/dashboard/Overview";
+import ModalViewExpense from "./components/ModalViewExpense";
 
 function App() {
   return (
@@ -15,7 +16,7 @@ function App() {
       <Route path="/" element={<LandingPage />} />
       <Route path="/login" element={<Login />} />
       <Route path="/signup" element={<SignUp />} />
-
+      <Route path="/modal" element={<ModalViewExpense />} />
       {/* Dashboard routes */}
       <Route path="/dashboard" element={<Dashboard />}>
         <Route index element={<Overview />} />
diff --git a/src/components/ModalViewExpense.tsx b/src/components/ModalViewExpense.tsx
new file mode 100644
index 0000000..01ffda8
--- /dev/null
+++ b/src/components/ModalViewExpense.tsx
@@ -0,0 +1,50 @@
+import { MdOutlineCancel } from "react-icons/md";
+const ModalViewExpense = () => {
+  return (
+    <div className="border-1 border-[#ac4bdc] mx-[5px] w-[350px] lg:m-auto lg:w-[450px] mt-40 lg:mt-40 rounded-xl shadow-2xl px-5 pt-5 pb-[25px] ">
+      <div className="flexxo flex justify-between">
+        <div className="first">
+          <h2 className="text-[18px] font-semibold">Dinner at Olive Garden</h2>
+          <p className="text-[15px] text-gray-400">
+            Today at 8:30 PM • Food & Drink
+          </p>
+        </div>
+
+        <MdOutlineCancel className="text-[25px]" />
+      </div>
+
+      <div className="second-div mt-[40px] flex items-center justify-between">
+        <div className="user-detail flex items-center gap-3">
+          <div className="image bg-[#ac4bdc] w-[50px] h-[50px] rounded-full"></div>
+          <div className="name">
+            <h3 className="font-bold lg:text-[16px] text-[14px]">
+              Alexander johnson
+            </h3>
+            <p className="text-gray-400 lg:text-[14px] text-[13px]">
+              Paid $5000
+            </p>
+          </div>
+        </div>
+        <div className="group">
+          <h3>Group</h3>
+          <h2 className="font-bold text-[14px] lg:text-[16px]">Dinner Club</h2>
+        </div>
+      </div>
+      <div className=" border-1 border-gray-500 mt-[20px] rounded-lg p-4">
+        <h3 className="font-semibold text-[14px]">Split Details</h3>
+        <div className="split-details flex justify-between mt-3">
+          <h3 className="font-bold text-[14px]">You</h3>
+          <h2>amount</h2>
+        </div>
+      </div>
+      <div className="note mt-5">
+        <h2 className="font-bold">Notes</h2>
+        <p className="text-[15px]">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe minus
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ModalViewExpense;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 2c9ffef..1f21da9 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -72,7 +72,7 @@ export default function LandingPage() {
 
         <Link to={"/signup"} className="mx-auto">
           <Button
-            className="flex items-center bg-linear-to-r from-[#9b48df] to-[#d84cd4]
+            className="group flex items-center bg-linear-to-r from-[#9b48df] to-[#d84cd4]
            text-white font-semibold rounded-lg cursor-pointer transition-all duration-300 drop-shadow-md hover:drop-shadow-2xl py-6"
           >
             Get Started