diff --git a/components/ActiveLink.tsx b/components/ActiveLink.tsx
index f4da7d65..d7ae61c3 100644
--- a/components/ActiveLink.tsx
+++ b/components/ActiveLink.tsx
@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router'
-import PropTypes from 'prop-types'
 import Link from 'next/link'
 import React, { Children } from 'react'
 
diff --git a/components/Settings.tsx b/components/Settings.tsx
index ff23e35b..bfbfd19c 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -1,5 +1,5 @@
 import ActiveLink from '../components/ActiveLink';
-import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline';
+import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon, CreditCardIcon } from '@heroicons/react/outline';
 
 export default function SettingsShell(props) {
     return (
@@ -37,6 +37,11 @@ export default function SettingsShell(props) {
                                         <a><UserGroupIcon /> Teams</a>
                                     </ActiveLink>
 
+                                    {/* Change/remove me, if you're self-hosting */}
+                                    <ActiveLink href="/settings/billing">
+                                        <a><CreditCardIcon /> Billing</a>
+                                    </ActiveLink>
+
                                     {/* <Link href="/settings/notifications">
                                         <a className={router.pathname == "/settings/notifications" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}>
                                             <svg className={router.pathname == "/settings/notifications" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
diff --git a/pages/settings/billing.tsx b/pages/settings/billing.tsx
new file mode 100644
index 00000000..3fbbb226
--- /dev/null
+++ b/pages/settings/billing.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Shell from '../../components/Shell';
+import SettingsShell from '../../components/Settings';
+
+export default function Billing() {
+    return(
+        <Shell heading="Billing">
+            <Head>
+                <title>Billing | Calendso</title>
+            </Head>
+            <SettingsShell>
+                <div className="py-6 px-4 sm:p-6 lg:pb-8 lg:col-span-9">
+                    <div className="mb-6">
+                        <h2 className="text-lg leading-6 font-medium text-gray-900">Change your Subscription</h2>
+                        <p className="mt-1 text-sm text-gray-500">
+                            Cancel, update credit card or change plan
+                        </p>
+                    </div>
+                    <div className="my-6">
+                        <iframe src="https://calendso.com/subscription-embed" style={{width: "100%", border: 0}} />
+                    </div>
+                </div>
+            </SettingsShell>
+        </Shell>
+    );
+}
\ No newline at end of file
