diff --git a/app/myrefer/Hero.tsx b/app/myrefer/Hero.tsx
new file mode 100644
index 0000000..773d6d6
--- /dev/null
+++ b/app/myrefer/Hero.tsx
@@ -0,0 +1,95 @@
+"use client"
+import React from 'react';
+import Image from 'next/image';
+import { useParams } from 'next/navigation';
+
+import cardImg from '../assets/images/home/wrench-card-only.png'
+import wrenchAgent from '../assets/images/home/wrench-agent.png'
+// import bg from '../assets/images/background-bg.jpg'
+
+function Hero() {
+    const {refer_link} = useParams()
+
+    return (
+        <>
+            <section className="appie-about-8-area pt-50 pb-70">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-section-title">
+                                <h3 className="appie-title">
+                                    {/* We bring everything <br />
+                                    that's required to build apps */}
+                                    Set Chores, Set Goals
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-lg-7 mb-3 mb-lg-0">
+                            <div className='appie-about-container'>
+                                <div className='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <h3 className="title">
+                                            Reward Accomplishments
+                                        </h3>
+                                        <p>
+                                            On WrenchBoard, set goals, tasks, or anything else that motivates or needs to be done, and reward completion. WrenchBoard is the platform for planning rewards, engaging, and connecting with family.
+                                        </p>
+                                        <div className=''>
+                                            <a className="mb-5 mb-md-0 main-btn" href={`${process.env.NEXT_PUBLIC_DASH_URL}/myrefer/${refer_link}`}>
+                                                Get Started <i className="fal fa-arrow-right" />
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 col-md-6">
+                                        <Image
+                                            src={cardImg}
+                                            className='w-100 h-100'
+                                            width={'100'}
+                                            height={'100'}
+                                            alt="" 
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-5">
+                            <div className='appie-about-container'>
+                                <div className='h-100 row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <div className='h-100 d-flex flex-column justify-content-between'>
+                                            <h3 className="title">
+                                                Assign Faster with <br />
+                                                wrenchAgent
+                                            </h3>
+                                            <p>
+                                                Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
+                                            </p>
+                                            <div className=''>
+                                                <a className="mb-5 mb-md-0 main-btn" href={`${process.env.NEXT_PUBLIC_DASH_URL}/myrefer/${refer_link}`}>
+                                                    Get Started <i className="fal fa-arrow-right" />
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 col-md-6">
+                                        <Image
+                                            src={wrenchAgent}
+                                            className='w-100 h-100'
+                                            width={'100'}
+                                            height={'100'}
+                                            alt="" 
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default Hero;
diff --git a/app/myrefer/[refer_link]/page.tsx b/app/myrefer/[refer_link]/page.tsx
new file mode 100644
index 0000000..c127f61
--- /dev/null
+++ b/app/myrefer/[refer_link]/page.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import HomeNav from '../../components/navigation/HomeNav';
+import Hero from '../Hero';
+import FooterHomeOne from '../../components/FooterHomeOne';
+import BackToTop from '../../components/BackToTop';
+
+// must be a better way to centralize the style = TEMPORARY USE 
+import '../../assets/css/bootstrap.min.css';
+import '../../assets/css/custom-animated.css';
+import '../../assets/css/default.css';
+import '../../assets/css/font-awesome.min.css';
+import '../../assets/css/magnific-popup.css';
+import '../../assets/css/main.css';
+import '../../assets/css/style.css';
+
+export default function page() {
+    return (
+        <>
+           <HomeNav />
+           <div className='' style={{paddingTop:'100px'}}></div>
+           <Hero />
+           <FooterHomeOne className={''} />
+           <BackToTop className='' />
+        </>
+    );
+}