diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index f75c93e..9ae9865 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -4,40 +4,47 @@ import styled from "styled-components";
 
 export default function Footer(props) {
   return (
-    <FooterWrapper home={props.home}>
-      © 2022 Sweave &nbsp;&nbsp;⏤{" "}
-      <ul>
-        <li>
-          <Link href={`/about`}>
-            <a>About</a>
-          </Link>
-        </li>
-        <li>
-          <Link href={`/privacy`}>
-            <a>Privacy</a>
-          </Link>
-        </li>
-        <li>
-          <Link href={`https://github.com/swve/gitstorykit`}>
-            <a target={"_blank"}>Kit</a>
-          </Link>
-        </li>
-        <li>
-          <Link href={`https://github.com/swve/gitstorykit/blob/master/CONTRIBUTING.md`}>
-            <a target={"_blank"}>Contribute</a>
-          </Link>
-        </li>
-        <li>
-        <Link href={`https://forms.gle/GRacRdWYuGCjA1HZ8`}>
-            <a target={"_blank"}>Feedback</a>
-          </Link>
-        </li>
-      </ul>
-    </FooterWrapper>
+    <>
+      <FooterCopyright home={props.home}>
+        © 2022 Sweave &nbsp;&nbsp;⏤{" "}
+        <ul>
+          <li>
+            <Link href={`/about`}>
+              <a>About</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={`/privacy`}>
+              <a>Privacy</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={`https://github.com/swve/gitstorykit`}>
+              <a target={"_blank"}>Kit</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={`https://github.com/swve/gitstory`}>
+              <a target={"_blank"}>GitHub</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={`/sponsoring`}>
+              <a>Sponsoring</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={`https://forms.gle/GRacRdWYuGCjA1HZ8`}>
+              <a target={"_blank"}>Feedback</a>
+            </Link>
+          </li>
+        </ul>
+      </FooterCopyright>
+    </>
   );
 }
 
-const FooterWrapper: any = styled.div`
+const FooterCopyright: any = styled.div`
   position: relative;
   display: flex;
   margin: auto;
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 9ba0131..1d8d161 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -217,5 +217,3 @@ const LeftWrapper: any = styled.div`
   }
 `;
 
-// Dialog CSS
-const ApiDialog = styled(Dialog)``;
diff --git a/pages/about.tsx b/pages/about.tsx
index a7e5b2c..dd3910c 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -17,11 +17,11 @@ function About() {
           <AboutElements>
             <Element>
               <CalendarMonthIcon sx={{ marginRight: 1, fontSize: 75 }} />
-              <p>Explore your favorite projects by going back in time using the reactive calendar</p>
+              <p>Use the Reactive calendar to go back in time</p>
             </Element>
             <Element>
               <GitHubIcon sx={{ marginRight: 1, fontSize: 75 }} />
-              <p>See the list of commits by day/month/year</p>
+              <p>Check commits by day, month and year</p>
             </Element>
             <Element>
               <SensorsIcon sx={{ marginRight: 1, fontSize: 75 }} />
@@ -29,7 +29,7 @@ function About() {
             </Element>
             <Element>
               <AccessTimeFilledIcon sx={{ marginRight: 1, fontSize: 75 }} />
-              <p>Explore "snapshots" of GitHub repositories by navigating to the exact tree of a commit </p>
+              <p>Explore "snapshots" of GitHub repositories by navigating to the exact commit </p>
             </Element>
           </AboutElements>
           <MadeBy>
@@ -38,7 +38,10 @@ function About() {
               <span role="img" aria-label="heart">
                 💜
               </span>{" "}
-              by <a target={"_blank"} href="https://twitter.com/sw3ave"><img src="/img/sweave.png" height="12" alt="" /></a>
+              by{" "}
+              <a target={"_blank"} href="https://twitter.com/sw3ave">
+                <img src="/img/sweave.png" height="12" alt="" />
+              </a>
             </p>
           </MadeBy>
         </AboutWrapper>
diff --git a/pages/sponsoring.tsx b/pages/sponsoring.tsx
new file mode 100644
index 0000000..66f1f8b
--- /dev/null
+++ b/pages/sponsoring.tsx
@@ -0,0 +1,92 @@
+import Footer from "@components/Footer/Footer";
+import Header from "@components/Header/Header";
+import React from "react";
+import styled from "styled-components";
+
+function Privacy() {
+  return (
+    <>
+      <GradientHeader>
+        <Header disable_api_usage_check title={`Sponsorships`} desc="Support GitStory"></Header>
+        <h1>Sponsoring</h1>
+        <SponsoInfo>
+          <h2>Sponsors ✨</h2>
+
+          <p>GitStory isn't sponsored yet.</p>
+          <p>
+            If you like GitStory and find it useful please feel free to support me & the open source project through GitHub sponsors{" "}
+            <a href="https://github.com/sponsors/swve" target="_blank" rel="noopener noreferrer">
+              here
+            </a>
+          </p>
+          <h2>Your Sponsorship 💓</h2>
+          <p>
+            Your sponsorship helps to maintain, improve, update and support GitStory and{" "}
+            <a href="https://framestack.net" target="_blank" rel="noopener noreferrer">
+              Framestack
+            </a> and future incoming open source projects.
+          </p>
+        </SponsoInfo>
+        <Footer></Footer>
+      </GradientHeader>
+    </>
+  );
+}
+
+const SponsoInfo = styled.div`
+  background-color: #171d21e6;
+  -webkit-backdrop-filter: saturate(180%) blur(14px);
+  backdrop-filter: saturate(180%) blur(14px);
+
+  padding: 50px;
+  padding-top: 10px;
+  width: fit-content;
+  border-radius: 6px;
+  overflow: clip;
+  font-size: 14px;
+  box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%);
+  margin-top: 50px;
+
+  top: -10px;
+  position: relative;
+
+  h2 {
+    font-size: 30px;
+  }
+
+  h4 {
+    font-size: 20px;
+    font-weight: bolder;
+  }
+
+  a {
+    font: bold;
+    text-decoration: underline;
+  }
+`;
+
+const GradientHeader = styled.div`
+  height: 380px;
+  padding-left: 130px;
+  padding-right: 130px;
+  padding-top: 30px;
+
+  @media (max-width: 768px) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+  background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),
+    linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
+    linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%);
+
+  h1 {
+    padding-top: 20px;
+    font-size: 45px;
+  }
+
+  // media query for mobile
+  @media (max-width: 1500px) {
+    height: 650px;
+  }
+`;
+export default Privacy;