diff --git a/webapp/src/components/ui/button.tsx b/webapp/src/components/ui/button.tsx
new file mode 100644
index 0000000..ed6f884
--- /dev/null
+++ b/webapp/src/components/ui/button.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+interface ButtonProps {
+  children: string; // Only allow text
+  onClick?: () => void; // Optional
+  className?: string; // Optional, will override default style
+  route?: string; // Optional re-routing
+}
+
+export function Button({ children, onClick, className = "", route }: ButtonProps) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    if (onClick) onClick(); // Execute custom logic, if provided
+    if (route) router.push(route); // Navigate to the route, if specified
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/components/ui/card.tsx b/webapp/src/components/ui/card.tsx
new file mode 100644
index 0000000..7cf4ecf
--- /dev/null
+++ b/webapp/src/components/ui/card.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode; // any valid React children
+  className?: string;
+}
+
+export function Card({ children, className = "" }: CardProps) {
+  return (
+    <div className={`bg-white rounded-lg shadow-md ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function CardContent({ children, className = "" }: CardProps) {
+  return (
+    <div className={`p-4 ${className}`}>
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/pages/home.tsx b/webapp/src/pages/home.tsx
new file mode 100644
index 0000000..3fc9f68
--- /dev/null
+++ b/webapp/src/pages/home.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
+        {/* Left Section - What we do */}
+        <Card className="bg-gray-200 flex items-center justify-center">
+          <CardContent className="text-center">
+            <h2 className="text-2xl font-bold text-black mb-4">What we do</h2>
+            <p className="text-gray-700">
+              Donations for charities are inconsistent and many charities struggle with finances. 
+              To solve this problem, we are creating Stock Charity, a charity that uses donations 
+              to buy stocks that payout dividends and then uses those dividends to finance charities year-round.
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Right Section - Donate Button and Stats */}
+        <div className="flex flex-col items-center space-y-8">
+          {/* Donate Button */}
+          <Button 
+            className="bg-blue-500 hover:bg-blue-600 text-2xl px-8 py-4"
+            route="/charity-signup">
+            DONATE
+          </Button>
+
+          {/* Stats Card */}
+          <Card className="bg-gray-200">
+            <CardContent className="text-center">
+              <p className="text-lg text-black">We have over</p>
+              <p className="text-3xl font-bold text-black">$xxx,xxx.xx</p>
+              <p className="text-lg text-black">in stocks</p>
+              <p className="text-lg text-black mt-4">which have paid out over</p>
+              <p className="text-3xl font-bold text-black">$xxx,xxx.xx</p>
+              <p className="text-lg text-black">in dividends to over</p>
+              <p className="text-3xl font-bold text-black">xxx charities</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}