diff --git a/src/app/components/MembershipCard.tsx b/src/app/components/MembershipCard.tsx
new file mode 100644
index 0000000..e9527ec
--- /dev/null
+++ b/src/app/components/MembershipCard.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+interface MembershipCard {
+  hasUiogMembership: boolean;
+  hasDnsMembership: boolean;
+}
+
+const membershipPerks = [
+  
+];
+
+const MembershipCard: React.FC<MembershipCard> = ({
+  hasUiogMembership,
+  hasDnsMembership,
+}) => {
+  return (
+    <div className={`p-6 rounded-lg shadow-md text-white bg-primary transition-all duration-500p-7 m-5 gap-10 h-full`}>
+      <div className="flex flex-col md:flex-row flex-1 rounded-lg gap-3 place-content-start">
+        <p>My Perks</p>
+      </div>
+    </div>
+  );
+}
+
+export default MembershipCard;
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 373bc4c..2b9bf7b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,18 @@ import Button from "./components/Button";
 import Image from "next/image";
 import ProfileCard from "./components/ProfileCard";
 
+import { Nunito, Rubik } from 'next/font/google';
+
+const nunito = Nunito({
+  weight: ['400', '700'],
+  subsets: ['latin']
+});
+
+const rubik = Rubik({
+  weight: ['400', '500', '700'],
+  subsets: ['latin']
+});
+
 export default function Home() {
   return (
     <div>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000..73d259a
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,15 @@
+import { Nunito } from 'next/font/google';
+
+const nunito = Nunito({
+  subsets: ['latin'] 
+});
+
+import { AppProps } from 'next/app';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <main className={nunito.className}>
+      <Component {...pageProps} />
+    </main>
+  );
+}
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
new file mode 100644
index 0000000..5c7433f
--- /dev/null
+++ b/src/pages/main.tsx
@@ -0,0 +1,13 @@
+import ProfileCard from '@/app/components/ProfileCard';
+import MembershipCard from '@/app/components/MembershipCard';
+import React from 'react';
+import "../app/globals.css"; 
+
+export default function Main() {
+    return (
+        <div>            
+            <ProfileCard hasUiogMembership={true} hasDnsMembership={true}/>
+            <MembershipCard hasUiogMembership={true} hasDnsMembership={true}/>
+        </div>
+    );
+};
\ No newline at end of file