diff --git a/package-lock.json b/package-lock.json
index d7aee90..d7cda6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-loader-spinner": "^6.1.6",
+        "react-modal-sheet": "^2.2.0",
         "react-pull-to-refresh": "^2.0.1",
         "react-qr-code": "^2.0.12",
         "react-redux": "^9.1.0",
@@ -23723,6 +23724,53 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-modal-sheet": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-modal-sheet/-/react-modal-sheet-2.2.0.tgz",
+      "integrity": "sha512-OAIWuVWxMx3zQqrMLbYWnczadplg0WLd+AaBWmN5+ysNF5/pneqjkOV3AWaIZOCIF4TcrejiCsTduutbzCRP2Q==",
+      "dependencies": {
+        "@react-aria/utils": "3.17.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "framer-motion": ">=6",
+        "react": ">=16"
+      }
+    },
+    "node_modules/react-modal-sheet/node_modules/@react-aria/utils": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.17.0.tgz",
+      "integrity": "sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.6.0",
+        "@react-stately/utils": "^3.6.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.4.14",
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/react-modal-sheet/node_modules/@swc/helpers": {
+      "version": "0.4.36",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.36.tgz",
+      "integrity": "sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==",
+      "dependencies": {
+        "legacy-swc-helpers": "npm:@swc/helpers@=0.4.14",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/react-modal-sheet/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-native": {
       "version": "0.73.2",
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.73.2.tgz",
diff --git a/package.json b/package.json
index b354bd5..f6d04d7 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-loader-spinner": "^6.1.6",
+    "react-modal-sheet": "^2.2.0",
     "react-pull-to-refresh": "^2.0.1",
     "react-qr-code": "^2.0.12",
     "react-redux": "^9.1.0",
diff --git a/src/app/@auth/layout.tsx b/src/app/@auth/layout.tsx
index d692115..61875f3 100644
--- a/src/app/@auth/layout.tsx
+++ b/src/app/@auth/layout.tsx
@@ -1,5 +1,5 @@
 'use client';
-import Sheet from '@/app/components/Layouts/Sheet';
+import SheetLayout from '@/app/components/Layouts/SheetLayout';
 import { Metadata } from 'next';
 import * as React from 'react';
 
@@ -10,7 +10,7 @@ export default function ComponentsLayout({
 }) {
   return (
     <>
-      <Sheet>{children}</Sheet>
+      <SheetLayout>{children}</SheetLayout>
     </>
   );
 }
diff --git a/src/app/@transactionmodal/layout.tsx b/src/app/@transactionmodal/layout.tsx
index de1e4c6..26fd76d 100644
--- a/src/app/@transactionmodal/layout.tsx
+++ b/src/app/@transactionmodal/layout.tsx
@@ -1,5 +1,5 @@
 'use client';
-import Sheet from '@/app/components/Layouts/Sheet';
+import SheetLayout from '@/app/components/Layouts/SheetLayout';
 import { Metadata } from 'next';
 import * as React from 'react';
 
@@ -12,7 +12,7 @@ export default function ComponentsLayout({
   let isOpen = true;
   return (
     <>
-      <Sheet isOpen={isOpen}>{children}</Sheet>
+      <SheetLayout isOpen={isOpen}>{children}</SheetLayout>
     </>
   );
 }
diff --git a/src/app/components/Layouts/Sheet.tsx b/src/app/components/Layouts/Sheet copy.tsx
similarity index 100%
rename from src/app/components/Layouts/Sheet.tsx
rename to src/app/components/Layouts/Sheet copy.tsx
diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
new file mode 100644
index 0000000..992ced0
--- /dev/null
+++ b/src/app/components/Layouts/SheetLayout.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+// components/SheetModal.js
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Sheet, { SheetRef } from 'react-modal-sheet';
+import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
+const SheetLayout = ({ children }) => {
+  const isOpen = useSelector((state) => state.sheet.value);
+
+  useEffect(() => {
+    // Add your logic here to handle the sheet open state
+    console.log('Sheet is open:', isOpen);
+  }, [isOpen]);
+
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            <Sheet
+              rootId='render'
+              isOpen={isOpen}
+              onClose={() => dispatch(setSheet(false))}
+            >
+              <Sheet.Container
+                style={{
+                  backgroundColor: 'rgba(44, 45, 51, 0.7)',
+                  backdropFilter: 'blur(10px) saturate(150%)',
+                }}
+              >
+                {/*  <Sheet.Header></Sheet.Header> */}
+                <Sheet.Content>{children}</Sheet.Content>
+              </Sheet.Container>
+              <Sheet.Backdrop onTap={() => dispatch(setSheet(false))} />
+            </Sheet>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default SheetLayout;
diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
index 343beb6..39feac1 100644
--- a/src/app/components/activity/Activity.tsx
+++ b/src/app/components/activity/Activity.tsx
@@ -1,28 +1,27 @@
-'use client'
-import RecentTransaction from "@/app/components/RecentTransaction/RecentTransaction";
+'use client';
+import RecentTransaction from '@/app/components/RecentTransaction/RecentTransaction';
 // hooks
-import useGetAddress from "@/app/hooks/useGetAddress";
-import useGetRecentTransactions from "@/app/hooks/useGetRecentTransactions";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { setTransactions } from "@/GlobalRedux/Features/transactions/transactionsSlice";
+import useGetAddress from '@/app/hooks/useGetAddress';
+import useGetRecentTransactions from '@/app/hooks/useGetRecentTransactions';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setTransactions } from '@/GlobalRedux/Features/transactions/transactionsSlice';
 
 export default function Activity() {
-  const [transactions, setTxs] = useState<any>([])
-  const address = "0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c"
+  const [transactions, setTxs] = useState<any>([]);
+  const address = '0xc8C26Ab40fe4723519fE66B8dBb625FC070A982c';
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-
     const getData = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions();
 
-        setTxs(recentTransactions?.transfers.slice(0, 3));
+        setTxs(recentTransactions?.transfers.slice(0, 3).reverse());
       } catch (error) {
-        console.error("Error while getting recent transactions:", error);
+        console.error('Error while getting recent transactions:', error);
       }
     };
 
@@ -30,29 +29,27 @@ export default function Activity() {
   }, []);
 
   useEffect(() => {
-    if (transactions) {
-      console.log("transactions console", transactions[0]);
-    }
     dispatch(setTransactions(transactions));
   }, [transactions]); // Add transactions as a dependency
 
   return (
     <>
-      <div className='bg-paper-one rounded-xl w-full text-xl p-4'>
-        <div>
-          Recent
-        </div>
-
-        <div className="mt-4">
-          {transactions && transactions.map((transaction: any, i: any) => (
-            <div key={i}>
-              <RecentTransaction transaction={transaction} />
-            </div>
-          ))}
-          <div className="text-purple text-center">
-            <Link href={{
-              pathname: '/transactions',
-            }}>
+      <div className='bg-paper-one w-full rounded-xl p-4 text-xl'>
+        <div className='text-left'>Recent</div>
+
+        <div className='mt-4'>
+          {transactions &&
+            transactions.map((transaction: any, i: any) => (
+              <div key={i}>
+                <RecentTransaction transaction={transaction} />
+              </div>
+            ))}
+          <div className='text-purple text-center'>
+            <Link
+              href={{
+                pathname: '/transactions',
+              }}
+            >
               See all
             </Link>
           </div>
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index ad5bbc7..dc9a47b 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -18,7 +18,9 @@ export default function Page() {
   const dispatch = useDispatch();
   return (
     <div className='p-4 pt-40'>
-      <div className='items-center text-center text-5xl'></div>
+      <div className='items-center text-center text-5xl'>
+        <Balance />
+      </div>
 
       <div className='mt-10 flex justify-between'>
         <Link
@@ -34,6 +36,9 @@ export default function Page() {
           </button>
         </Link>
         <Link
+          onClick={() => {
+            dispatch(setSheet(true));
+          }}
           href={{
             pathname: '/receive',
           }}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 77333d0..0c3d4c3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -84,7 +84,7 @@ export default function RootLayout({
   };
 
   return (
-    <html>
+    <html id='render' className='bg-dark h-full overflow-auto '>
       <head>
         <title>Payments, Stephen Gordon</title>
         <title>Payments, Stephen Gordon</title>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 889b3ec..ae45c01 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,6 +6,8 @@ import Head from 'next/head';
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 
+import Link from 'next/link';
+
 // Web3auth
 import { Web3AuthNoModal } from '@web3auth/no-modal';
 import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from '@web3auth/base';
@@ -165,6 +167,13 @@ export default function Page() {
           )}
           {error && error}
         </button>
+        <Link
+          href={{
+            pathname: '/home',
+          }}
+        >
+          Home
+        </Link>
       </section>
     </main>
   );