diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
index b8d2d47..070bd62 100644
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -3,13 +3,19 @@ import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithPro
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+import { Roboto } from 'next/font/google';
 
-export const metadata = getMetadata({ title: "Scaffold-ETH 2 App", description: "Built with 🏗 Scaffold-ETH 2" });
+export const metadata = getMetadata({ title: "YouSplit", description: "Splitter contract for YouTube royalties" });
+
+const roboto = Roboto({
+  subsets: ['latin'],
+  weight: ['400', '700'], // Regular and Bold
+});
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning>
-      <body>
+    <html className={`${roboto.className}`} suppressHydrationWarning>
+      <body className="bg-white text-black">
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index fd99b11..e158e9b 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -87,9 +87,9 @@ export default function Home() {
   };
 
   return (
-    <main className="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100">
+    <main className="flex flex-col items-center justify-center min-h-screen p-4 bg-white text-black">
       <header className="w-full max-w-2xl mb-8">
-        <h1 className="text-4xl font-bold text-center text-blue-600 mb-4">YouSplit</h1>
+        <h1 className="text-4xl font-bold text-center text-black mb-4">YouSplit</h1>
         <div className="flex justify-center mb-4">
           <ConnectButton />
         </div>
@@ -114,7 +114,7 @@ export default function Home() {
               <p className="mb-2">Withdrawable Amount: {ethers.formatEther(withdrawableAmount)} ETH</p>
               <button
                 onClick={handleWithdraw}
-                className="bg-blue-600 text-white px-4 py-2 rounded-md"
+                className="bg-red-600 text-white px-4 py-2 rounded-md"
               >
                 Withdraw
               </button>
@@ -129,11 +129,11 @@ export default function Home() {
                   onChange={(e) => setRoyaltyAmount(e.target.value)} 
                   placeholder="Enter amount in USDC" 
                   step="0.000001"
-                  className="w-full mb-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full mb-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
                 />
                 <button
                   onClick={handleOnramp}
-                  className="bg-blue-600 text-white px-4 py-2 rounded-md"
+                  className="bg-red-600 text-white px-4 py-2 rounded-md"
                 >
                   Onramp
                 </button>
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index 92b3c62..565fca3 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -18,7 +18,7 @@ export const Footer = () => {
   const isLocalNetwork = targetNetwork.id === hardhat.id;
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-white text-black">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
@@ -46,30 +46,26 @@ export const Footer = () => {
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div className="text-center">
-              <a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
-                Fork me
-              </a>
-            </div>
-            <span>·</span>
             <div className="flex justify-center items-center gap-2">
               <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at
+                Built by
               </p>
               <a
                 className="flex justify-center items-center gap-1"
-                href="https://buidlguidl.com/"
+                href="https://x.com/partagexyz/"
                 target="_blank"
                 rel="noreferrer"
               >
-                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
-                <span className="link">BuidlGuidl</span>
+                <span className="link">partage.xyz</span>              
               </a>
-            </div>
-            <span>·</span>
-            <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Support
+              <span>for</span>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://ethglobal.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <span className="link">ETHglobal</span>              
               </a>
             </div>
           </div>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 0981bc9..8cd1745 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -40,8 +40,8 @@ export const HeaderMenuLinks = () => {
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "text-black" : "text-black"
+              } hover:bg-red-600 hover:text-white hover:shadow-md focus:!bg-red-600 py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
             >
               {icon}
               <span>{label}</span>
@@ -91,11 +91,11 @@ export const Header = () => {
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+            <Image alt="YouSplit logo" className="cursor-pointer" fill src="/YouTube.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
-            <span className="text-xs">Ethereum dev stack</span>
+            <span className="font-bold leading-tight">YouSplit</span>
+            <span className="text-xs">Split YT Royalties</span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
diff --git a/packages/nextjs/public/YouTube.svg b/packages/nextjs/public/YouTube.svg
new file mode 100644
index 0000000..55f1f7b
--- /dev/null
+++ b/packages/nextjs/public/YouTube.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="313.23315mm"
+   height="216.02286mm"
+   viewBox="0 0 313.23315 216.02286"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer1"
+     transform="translate(-54.079375,-5.2758072)"><path
+       d="m 210.53177,221.29866 c 0,0 98.12514,0 122.46443,-6.48069 13.70449,-3.6724 24.01093,-14.2575 27.62825,-27.32688 6.68807,-23.97854 6.68807,-74.41988 6.68807,-74.41988 0,0 0,-50.117297 -6.68807,-73.879819 C 357.00713,25.79798 346.70069,15.42887 332.9962,11.864515 308.65691,5.2758072 210.53177,5.2758072 210.53177,5.2758072 c 0,0 -97.9062,0 -122.135976,6.5887078 -13.485335,3.564355 -24.010529,13.933465 -27.847831,27.326876 -6.468588,23.762522 -6.468588,73.879819 -6.468588,73.879819 0,0 0,50.44134 6.468588,74.41988 3.837302,13.06938 14.362496,23.65448 27.847831,27.32688 24.229776,6.48069 122.135976,6.48069 122.135976,6.48069 z"
+       fill="#ff0033"
+       id="path1412"
+       style="stroke-width:0.0208149"
+       clip-path="none" /><path
+       d="M 259.30109,113.28723 178.29251,67.382379 v 91.809711 z"
+       fill="#ffffff"
+       id="path1414"
+       style="stroke-width:0.0208149"
+       clip-path="none" /></g></svg>
