diff --git a/components/Settings.tsx b/components/Settings.tsx
index 5a7042f9..480e0757 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from "next/router";
-import { UserCircleIcon, KeyIcon } from '@heroicons/react/outline';
+import { UserCircleIcon, KeyIcon, CodeIcon } from '@heroicons/react/outline';
 
 export default function SettingsShell(props) {
     const router = useRouter();
@@ -42,6 +42,15 @@ export default function SettingsShell(props) {
                                         </a>
                                     </Link>
 
+                                    <Link href="/settings/embed">
+                                        <a className={router.pathname == "/settings/embed" ? "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"}>
+                                            <CodeIcon className={router.pathname == "/settings/embed" ? "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"} />
+                                            <span className="truncate">
+                                                Embed
+                                            </span>
+                                        </a>
+                                    </Link>
+
                                     {/* <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/embed.tsx b/pages/settings/embed.tsx
new file mode 100644
index 00000000..3a0dd092
--- /dev/null
+++ b/pages/settings/embed.tsx
@@ -0,0 +1,103 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import prisma from '../../lib/prisma';
+import Modal from '../../components/Modal';
+import Shell from '../../components/Shell';
+import SettingsShell from '../../components/Settings';
+import Avatar from '../../components/Avatar';
+import { signIn, useSession, getSession } from 'next-auth/client';
+import TimezoneSelect from 'react-timezone-select';
+
+export default function Embed(props) {
+    const [ session, loading ] = useSession();
+    const router = useRouter();
+
+    if (loading) {
+        return <p className="text-gray-400">Loading...</p>;
+    }
+
+    return(
+        <Shell heading="Embed">
+            <Head>
+                <title>Embed | Calendso</title>
+                <link rel="icon" href="/favicon.ico" />
+            </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">Iframe Embed</h2>
+                        <p className="mt-1 text-sm text-gray-500">
+                            The easiest way to embed Calendso on your website.
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-2 space-x-4">
+                        <div>
+                            <label htmlFor="iframe" className="block text-sm font-medium text-gray-700">
+                                Standard iframe
+                            </label>
+                            <div className="mt-1">
+                                <textarea
+                                    id="iframe"
+                                    className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                    placeholder="Loading..."
+                                    defaultValue={'<iframe src="https://calendso.com/' + session.user.username + '" frameborder="0" allowfullscreen></iframe>'}
+                                    readOnly
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700">
+                                Responsive full screen iframe
+                            </label>
+                            <div className="mt-1">
+                                <textarea
+                                    id="fullscreen"
+                                    className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                    placeholder="Loading..."
+                                    defaultValue={'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Schedule a meeting</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body><iframe src="https://calendso.com/' + session.user.username + '" frameborder="0" allowfullscreen></iframe></body></html>'}
+                                    readOnly
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="my-6">
+                        <h2 className="text-lg leading-6 font-medium text-gray-900">Calendso API</h2>
+                        <p className="mt-1 text-sm text-gray-500">
+                            Leverage our API for full control and customizability.
+                        </p>
+                    </div>
+                    <a href="https://api.docs.calendso.com" className="btn btn-primary">Browse our API documentation</a>
+                </div>
+            </SettingsShell>
+        </Shell>
+    );
+}
+
+export async function getServerSideProps(context) {
+    const session = await getSession(context);
+    if (!session) {
+        return { redirect: { permanent: false, destination: '/auth/login' } };
+    }
+
+    const user = await prisma.user.findFirst({
+        where: {
+            email: session.user.email,
+        },
+        select: {
+            id: true,
+            username: true,
+            name: true,
+            email: true,
+            bio: true,
+            avatar: true,
+            timeZone: true,
+            weekStart: true,
+        }
+    });
+
+    return {
+      props: {user}, // will be passed to the page component as props
+    }
+}
\ No newline at end of file
