diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 8c8ca6f..ac777ec 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import type { NextPage } from "next";
 import { useAccount } from "wagmi";
@@ -28,15 +30,78 @@ const Home: NextPage = () => {
             <Link href="/lend">
               <div className="flex flex-col bg-base-100 px-5 py-5 text-center items-center max-w-xs rounded-3xl">
                 <BanknotesIcon className="h-8 w-8 fill-secondary" /> Lend
+                <p>List an NFT for Rent-to-Own</p>
               </div>
             </Link>
             <Link href="/borrow">
               <div className="flex flex-col bg-base-100 px-5 py-5 text-center items-center max-w-xs rounded-3xl">
                 <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" /> Borrow
+                <p>Seek through available agreements</p>
               </div>
             </Link>
           </div>
         </div>
+        <div className="stats shadow mt-16">
+          <div className="stat">
+            <div className="stat-figure text-primary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block h-8 w-8 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                ></path>
+              </svg>
+            </div>
+            <div className="stat-title">Total Listings</div>
+            <div className="stat-value text-primary">25.6K</div>
+            <div className="stat-desc">21% more than last month</div>
+          </div>
+
+          <div className="stat">
+            <div className="stat-figure text-secondary">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block h-8 w-8 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                ></path>
+              </svg>
+            </div>
+            <div className="stat-title">Agreements Started</div>
+            <div className="stat-value text-secondary">2.6K</div>
+            <div className="stat-desc">5% less than last month</div>
+          </div>
+
+          <div className="stat">
+            <div className="stat-figure text-secondary">
+              <div className="avatar online">
+                <div className="w-16 rounded-full">
+                  <Image
+                    width={900}
+                    height={900}
+                    src="https://black-objective-gerbil-643.mypinata.cloud/ipfs/QmV9gunTMKEAgeyG62qXw3T5i2dPsgykS9WctfDFGz7nKJ"
+                    alt="Stock Photo"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="stat-value">86%</div>
+            <div className="stat-title">Payment plans completed</div>
+            <div className="stat-desc text-secondary">31 unpaid remaining</div>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
index b3b54b3..b7f2b96 100644
--- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
+++ b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -13,12 +13,12 @@ import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
-const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+const ScaffoldEthApp = ({ backgroundClass, children }: { backgroundClass: string; children: React.ReactNode }) => {
   useInitializeNativeCurrencyPrice();
 
   return (
     <>
-      <div className="flex flex-col min-h-screen">
+      <div className={`${backgroundClass} flex flex-col min-h-screen`}>
         <Header />
         <main className="relative flex flex-col flex-1">{children}</main>
         <Footer />
@@ -38,8 +38,9 @@ export const queryClient = new QueryClient({
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark";
+  const isDarkMode = resolvedTheme !== "pastel";
   const [mounted, setMounted] = useState(false);
+  const backgroundClass = isDarkMode ? "bg-forest-texture bg-texture" : "bg-pastel-texture bg-texture";
 
   useEffect(() => {
     setMounted(true);
@@ -51,9 +52,9 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
         <ProgressBar height="3px" color="#2299dd" />
         <RainbowKitProvider
           avatar={BlockieAvatar}
-          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
+          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : darkTheme()}
         >
-          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+          <ScaffoldEthApp backgroundClass={backgroundClass}>{children}</ScaffoldEthApp>
         </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
diff --git a/packages/nextjs/public/textures/forest-branches.svg b/packages/nextjs/public/textures/forest-branches.svg
new file mode 100644
index 0000000..1674e84
--- /dev/null
+++ b/packages/nextjs/public/textures/forest-branches.svg
@@ -0,0 +1,85 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100%'>
+    <rect fill='#1E2722' width='540' height='450'/>
+    <defs>
+        <linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%'
+                        gradientTransform='rotate(93,900,502)'>
+            <stop offset='0' stop-color='#1E2722'/>
+            <stop offset='1' stop-color='#4A5A50'/>
+        </linearGradient>
+        <pattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'>
+            <g fill-opacity='0.02'>
+                <polygon fill='#444' points='90 150 0 300 180 300'/>
+                <polygon points='90 150 180 0 0 0'/>
+                <polygon fill='#AAA' points='270 150 360 0 180 0'/>
+                <polygon fill='#DDD' points='450 150 360 300 540 300'/>
+                <polygon fill='#999' points='450 150 540 0 360 0'/>
+                <polygon points='630 150 540 300 720 300'/>
+                <polygon fill='#DDD' points='630 150 720 0 540 0'/>
+                <polygon fill='#444' points='810 150 720 300 900 300'/>
+                <polygon fill='#FFF' points='810 150 900 0 720 0'/>
+                <polygon fill='#DDD' points='990 150 900 300 1080 300'/>
+                <polygon fill='#444' points='990 150 1080 0 900 0'/>
+                <polygon fill='#DDD' points='90 450 0 600 180 600'/>
+                <polygon points='90 450 180 300 0 300'/>
+                <polygon fill='#666' points='270 450 180 600 360 600'/>
+                <polygon fill='#AAA' points='270 450 360 300 180 300'/>
+                <polygon fill='#DDD' points='450 450 360 600 540 600'/>
+                <polygon fill='#999' points='450 450 540 300 360 300'/>
+                <polygon fill='#999' points='630 450 540 600 720 600'/>
+                <polygon fill='#FFF' points='630 450 720 300 540 300'/>
+                <polygon points='810 450 720 600 900 600'/>
+                <polygon fill='#DDD' points='810 450 900 300 720 300'/>
+                <polygon fill='#AAA' points='990 450 900 600 1080 600'/>
+                <polygon fill='#444' points='990 450 1080 300 900 300'/>
+                <polygon fill='#222' points='90 750 0 900 180 900'/>
+                <polygon points='270 750 180 900 360 900'/>
+                <polygon fill='#DDD' points='270 750 360 600 180 600'/>
+                <polygon points='450 750 540 600 360 600'/>
+                <polygon points='630 750 540 900 720 900'/>
+                <polygon fill='#444' points='630 750 720 600 540 600'/>
+                <polygon fill='#AAA' points='810 750 720 900 900 900'/>
+                <polygon fill='#666' points='810 750 900 600 720 600'/>
+                <polygon fill='#999' points='990 750 900 900 1080 900'/>
+                <polygon fill='#999' points='180 0 90 150 270 150'/>
+                <polygon fill='#444' points='360 0 270 150 450 150'/>
+                <polygon fill='#FFF' points='540 0 450 150 630 150'/>
+                <polygon points='900 0 810 150 990 150'/>
+                <polygon fill='#222' points='0 300 -90 450 90 450'/>
+                <polygon fill='#FFF' points='0 300 90 150 -90 150'/>
+                <polygon fill='#FFF' points='180 300 90 450 270 450'/>
+                <polygon fill='#666' points='180 300 270 150 90 150'/>
+                <polygon fill='#222' points='360 300 270 450 450 450'/>
+                <polygon fill='#FFF' points='360 300 450 150 270 150'/>
+                <polygon fill='#444' points='540 300 450 450 630 450'/>
+                <polygon fill='#222' points='540 300 630 150 450 150'/>
+                <polygon fill='#AAA' points='720 300 630 450 810 450'/>
+                <polygon fill='#666' points='720 300 810 150 630 150'/>
+                <polygon fill='#FFF' points='900 300 810 450 990 450'/>
+                <polygon fill='#999' points='900 300 990 150 810 150'/>
+                <polygon points='0 600 -90 750 90 750'/>
+                <polygon fill='#666' points='0 600 90 450 -90 450'/>
+                <polygon fill='#AAA' points='180 600 90 750 270 750'/>
+                <polygon fill='#444' points='180 600 270 450 90 450'/>
+                <polygon fill='#444' points='360 600 270 750 450 750'/>
+                <polygon fill='#999' points='360 600 450 450 270 450'/>
+                <polygon fill='#666' points='540 600 630 450 450 450'/>
+                <polygon fill='#222' points='720 600 630 750 810 750'/>
+                <polygon fill='#FFF' points='900 600 810 750 990 750'/>
+                <polygon fill='#222' points='900 600 990 450 810 450'/>
+                <polygon fill='#DDD' points='0 900 90 750 -90 750'/>
+                <polygon fill='#444' points='180 900 270 750 90 750'/>
+                <polygon fill='#FFF' points='360 900 450 750 270 750'/>
+                <polygon fill='#AAA' points='540 900 630 750 450 750'/>
+                <polygon fill='#FFF' points='720 900 810 750 630 750'/>
+                <polygon fill='#222' points='900 900 990 750 810 750'/>
+                <polygon fill='#222' points='1080 300 990 450 1170 450'/>
+                <polygon fill='#FFF' points='1080 300 1170 150 990 150'/>
+                <polygon points='1080 600 990 750 1170 750'/>
+                <polygon fill='#666' points='1080 600 1170 450 990 450'/>
+                <polygon fill='#DDD' points='1080 900 1170 750 990 750'/>
+            </g>
+        </pattern>
+    </defs>
+    <rect x='0' y='0' fill='url(#a)' width='100%' height='100%'/>
+    <rect x='0' y='0' fill='url(#b)' width='100%' height='100%'/>
+</svg>
diff --git a/packages/nextjs/public/textures/pastel-leaves.svg b/packages/nextjs/public/textures/pastel-leaves.svg
new file mode 100644
index 0000000..eb28a1e
--- /dev/null
+++ b/packages/nextjs/public/textures/pastel-leaves.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'>
+    <rect fill='#F4B183' width='1000' height='120'/>
+    <g fill='none' stroke='#F9E8D8' stroke-width='16.2' stroke-opacity='0.09'>
+        <path d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+        <path d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+        <path d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+        <path d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+        <path d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+        <path d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/>
+    </g>
+</svg>
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index a633646..cff9e9a 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -1,12 +1,22 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugin = require("tailwindcss/plugin");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-    "./utils/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  plugins: [require("daisyui")],
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".bg-texture": {
+          backgroundSize: "auto", // Default size
+          backgroundRepeat: "repeat", // Ensure texture repeats
+          backgroundPosition: "top left", // Optional for alignment
+        },
+      });
+    }),
+    require("daisyui"),
+  ],
   darkTheme: "forest",
   darkMode: ["selector", "[data-theme='forest']"],
   // DaisyUI theme colors
@@ -14,66 +24,65 @@ module.exports = {
     themes: [
       {
         pastel: {
-          primary: "#93BBFB",
-          "primary-content": "#212638",
-          secondary: "#DAE8FF",
-          "secondary-content": "#212638",
-          accent: "#93BBFB",
-          "accent-content": "#212638",
-          neutral: "#212638",
-          "neutral-content": "#ffffff",
-          "base-100": "#ffffff",
-          "base-200": "#f4f8ff",
-          "base-300": "#DAE8FF",
-          "base-content": "#212638",
-          info: "#93BBFB",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+          primary: "#F4B183", // Matte light orange (soft terracotta)
+          "primary-content": "#2D2D2D", // Dark gray for contrast
+          secondary: "#F7D7B4", // Muted peach for a secondary tone
+          "secondary-content": "#2D2D2D",
+          accent: "#F3C29B", // Subtle variation of light orange
+          "accent-content": "#2D2D2D",
+          neutral: "#F9E8D8", // Warm matte beige for neutral backgrounds
+          "neutral-content": "#2D2D2D",
+          "base-100": "#FFF9F3", // Light off-white
+          "base-200": "#F9E8D8", // Slightly darker beige
+          "base-300": "#F7D7B4", // Warm peach tone
+          "base-content": "#2D2D2D", // Dark for readable text
+          info: "#F8CBAE", // Muted light orange for informational elements
+          success: "#B7D6A5", // Soft green for success
+          warning: "#E7C86B", // Warm matte gold for warnings
+          error: "#D79B8B", // Muted matte coral for errors
 
-          "--rounded-btn": "9999rem",
+          "--rounded-btn": "0.5rem", // Subtle rounding for buttons
 
           ".tooltip": {
-            "--tooltip-tail": "6px",
+            "--tooltip-tail": "4px",
           },
           ".link": {
             textUnderlineOffset: "2px",
           },
           ".link:hover": {
-            opacity: "80%",
+            opacity: "85%",
           },
         },
       },
       {
         forest: {
-          primary: "#212638",
-          "primary-content": "#F9FBFF",
-          secondary: "#323f61",
-          "secondary-content": "#F9FBFF",
-          accent: "#4969A6",
-          "accent-content": "#F9FBFF",
-          neutral: "#F9FBFF",
-          "neutral-content": "#385183",
-          "base-100": "#385183",
-          "base-200": "#2A3655",
-          "base-300": "#212638",
-          "base-content": "#F9FBFF",
-          info: "#385183",
-          success: "#34EEB6",
-          warning: "#FFCF72",
-          error: "#FF8863",
+          primary: "#4A5A50", // Matte dark green (deep olive green)
+          "primary-content": "#E7EAE5", // Light for contrast
+          secondary: "#6C7A6F", // Muted moss green
+          "secondary-content": "#E7EAE5",
+          accent: "#5D7168", // Subtle mid-tone green
+          "accent-content": "#E7EAE5",
+          neutral: "#39473E", // Darker matte green-gray for neutral backgrounds
+          "neutral-content": "#D7E0D9",
+          "base-100": "#39473E", // Dark matte olive
+          "base-200": "#2E3B34", // Slightly darker tone
+          "base-300": "#1E2722", // Very dark green-gray
+          "base-content": "#D7E0D9", // Light green-gray for text
+          info: "#5D7168", // Muted dark green for informational elements
+          success: "#81A784", // Subtle moss green for success
+          warning: "#C9B574", // Matte gold-green for warnings
+          error: "#A76D66", // Muted brick-red for errors
 
-          "--rounded-btn": "9999rem",
+          "--rounded-btn": "0.5rem", // Subtle rounding for buttons
 
           ".tooltip": {
-            "--tooltip-tail": "6px",
-            "--tooltip-color": "oklch(var(--p))",
+            "--tooltip-tail": "4px",
           },
           ".link": {
             textUnderlineOffset: "2px",
           },
           ".link:hover": {
-            opacity: "80%",
+            opacity: "85%",
           },
         },
       },
@@ -101,6 +110,10 @@ module.exports = {
           900: "#18181b",
         },
       },
+      backgroundImage: {
+        "forest-texture": "url('/textures/forest-branches.svg')",
+        "pastel-texture": "url('/textures/pastel-leaves.svg')",
+      },
     },
   },
 };