diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 01b1ea009f..31ac347fd6 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -77,7 +77,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         {/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
-        <body className="dark:bg-darkgray-50 bg-gray-100">
+        <body className="dark:bg-darkgray-50 desktop-transparent bg-gray-100">
           <Main />
           <NextScript />
           {/* In case of Embed we want background to be transparent so that it merges into the website seamlessly. Also, we keep the body hidden here and embed logic would take care of showing the body when it's ready */}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 15f5e91bc9..f0c2450473 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -22,7 +22,8 @@ body  {
 /* disable user selection on buttons, links and images on desktop app */
 html.todesktop button,
 html.todesktop a,
-html.todesktop img{
+html.todesktop img,
+html.todesktop header{
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -38,14 +39,13 @@ html.todesktop div  {
 }
 
 /* make header draggable on desktop app */
-html.todesktop header {
+html.todesktop header{
   -webkit-app-region: drag;
 }
-html.todesktop header button {
+html.todesktop header button{
   -webkit-app-region: no-drag;
 }
 
-
 html.todesktop .logo {
   display: none;
 }
@@ -63,13 +63,47 @@ html.todesktop .desktop-hidden {
 }
 
 html.todesktop header {
-  margin-top: -9px;
+  margin-top: -14px;
 }
 
 html.todesktop header nav {
   margin-top: 8px;
 }
 
+html.todesktop aside {
+  margin:0px -6px;
+}
+
+/* TODO: add "native" MacOS colors
+   requires darkmode for MacOS first
+
+html.todesktop .desktop-transparent{
+  background: transparent !important;
+  border: none !important;
+}
+
+html.todesktop aside a {
+  height: 28px;
+  padding: 0px 8px;
+  font-size: 12px;
+  color: #383438 !important
+}
+
+html.todesktop nav a:hover{
+  background-color: inherit !important
+}
+
+html.todesktop nav a[aria-current="page"]{
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+
+html.todesktop nav a svg{
+  color: #0272F7 !important
+} 
+*/
+
+
+
 /*
   Adds Utility to hide scrollbar to tailwind
     https://github.com/tailwindlabs/tailwindcss/discussions/2394
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 9309c8263a..bdceee0689 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -1,4 +1,7 @@
+const plugin = require("tailwindcss/plugin");
+
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -191,5 +194,10 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
+    plugin(({ addVariant }) => {
+      addVariant("mac", ".mac &");
+      addVariant("windows", ".windows &");
+      addVariant("ios", ".ios &");
+    }),
   ],
 };
diff --git a/packages/features/users/components/UserV2OptInBanner.tsx b/packages/features/users/components/UserV2OptInBanner.tsx
index 2ee61cb85c..238527858f 100644
--- a/packages/features/users/components/UserV2OptInBanner.tsx
+++ b/packages/features/users/components/UserV2OptInBanner.tsx
@@ -1,6 +1,3 @@
-import { Alert } from "@calcom/ui/Alert";
-import { Alert as AlertV2 } from "@calcom/ui/v2/core/Alert";
-
 function UserV2OptInBanner() {
   // Only show on client-side
   if (typeof document === "undefined") return null;
@@ -9,33 +6,23 @@ function UserV2OptInBanner() {
 
   if (hasV2OptInCookie)
     return (
-      <AlertV2
-        severity="info"
-        title={
-          <>
-            You&apos;re using the new version of Cal.com.{" "}
-            <a href="/api/v2-opt-in" className="underline">
-              Go back to previous version
-            </a>
-            .
-          </>
-        }
-      />
+      <p className="text-xs text-gray-400">
+        You&apos;re using the new version of Cal.com.{" "}
+        <a href="/api/v2-opt-in" className="text-blue-400 underline">
+          Go back
+        </a>
+        .
+      </p>
     );
 
   return (
-    <Alert
-      severity="info"
-      title={
-        <>
-          Want to try the new version of Cal.com?{" "}
-          <a href="/api/v2-opt-in" className="underline">
-            Opt-in to our V2 beta
-          </a>
-          .
-        </>
-      }
-    />
+    <p className="text-xs text-gray-400">
+      Want to try the new version of Cal.com?{" "}
+      <a href="/api/v2-opt-in" className="text-blue-400 underline">
+        Opt-in to our v2.0 beta
+      </a>
+      .
+    </p>
   );
 }
 
diff --git a/packages/ui/Kbar.tsx b/packages/ui/Kbar.tsx
index c66884c97f..dbdad9841b 100644
--- a/packages/ui/Kbar.tsx
+++ b/packages/ui/Kbar.tsx
@@ -196,7 +196,7 @@ export const KBarContent = () => {
   return (
     <KBarPortal>
       <KBarPositioner>
-        <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-sm bg-white shadow-lg">
+        <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-md bg-white shadow-lg">
           <div className="flex items-center justify-center border-b">
             <Icon.FiSearch className="mx-3 h-4 w-4 text-gray-500" />
             <KBarSearch className="w-full rounded-sm py-2.5 focus-visible:outline-none" />
diff --git a/packages/ui/v2/core/Alert.tsx b/packages/ui/v2/core/Alert.tsx
index 36f0c31c74..bddee05e32 100644
--- a/packages/ui/v2/core/Alert.tsx
+++ b/packages/ui/v2/core/Alert.tsx
@@ -15,7 +15,7 @@ export function Alert(props: AlertProps) {
   return (
     <div
       className={classNames(
-        "rounded-sm border border-opacity-20 p-3",
+        "rounded-md border border-opacity-20 p-3",
         props.className,
         severity === "error" && "border-red-900 bg-red-50 text-red-800",
         severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index ef1a669013..1b39355473 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -14,7 +14,7 @@ import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import UserV2OptInBanner from "@calcom/features/users/components/UserV2OptInBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
-import { JOIN_SLACK, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
+import { JOIN_SLACK, ROADMAP, DESKTOP_APP_LINK, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
@@ -106,7 +106,7 @@ export function ShellSubHeading(props: {
   className?: string;
 }) {
   return (
-    <div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
+    <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
       <div>
         <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
           {props.title}
@@ -114,7 +114,7 @@ export function ShellSubHeading(props: {
         {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
       </div>
       {props.actions && <div className="flex-shrink-0">{props.actions}</div>}
-    </div>
+    </header>
   );
 }
 
@@ -138,7 +138,6 @@ const Layout = (props: LayoutProps) => {
       <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
         {props.SidebarContainer || <SideBarContainer />}
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
-          <UserV2OptInBanner />
           <ImpersonatingBanner />
           <MainContainer {...props} />
         </div>
@@ -279,7 +278,7 @@ function UserDropdown({ small }: { small?: boolean }) {
         ) : (
           <>
             <DropdownMenuItem>
-              <a
+              <button
                 onClick={() => {
                   mutation.mutate({ away: !user?.away });
                   utils.invalidateQueries("viewer.me");
@@ -295,7 +294,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   aria-hidden="true"
                 />
                 {user.away ? t("set_as_free") : t("set_as_away")}
-              </a>
+              </button>
             </DropdownMenuItem>
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             {user.username && (
@@ -345,6 +344,17 @@ function UserDropdown({ small }: { small?: boolean }) {
               {t("help")}
             </button>
 
+            <DropdownMenuItem>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={DESKTOP_APP_LINK}
+                className="desktop-hidden hidden items-center px-4 py-2 text-sm text-gray-700 lg:flex">
+                <Icon.FiDownload className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
+                {t("download_desktop_app")}
+              </a>
+            </DropdownMenuItem>
+
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             <DropdownMenuItem>
               <a
@@ -652,28 +662,49 @@ function SideBar() {
   const { isLocaleReady } = useLocale();
 
   return (
-    <aside className="hidden w-14 flex-col border-r border-gray-100 bg-gray-50 md:flex lg:w-56 lg:flex-shrink-0 lg:px-4">
+    <aside className="desktop-transparent hidden w-14 flex-col border-r border-gray-100 bg-gray-50 md:flex lg:w-56 lg:flex-shrink-0 lg:px-4">
       <div className="flex h-0 flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
-        <div className="items-center justify-between md:hidden lg:flex">
+        <header className="items-center justify-between md:hidden lg:flex">
           <Link href="/event-types">
             <a className="px-4">
               <Logo small />
             </a>
           </Link>
-          <KBarTrigger />
-        </div>
+          <div className="flex space-x-2">
+            <button
+              color="minimal"
+              onClick={() => window.history.back()}
+              className="desktop-only group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
+              <Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
+            </button>
+            <button
+              color="minimal"
+              onClick={() => window.history.forward()}
+              className="desktop-only group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
+              <Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
+            </button>
+            <KBarTrigger />
+          </div>
+        </header>
+
+        <hr className="desktop-only absolute -left-3 -right-3 mt-4 block w-full border-gray-200" />
+
         {/* logo icon for tablet */}
         <Link href="/event-types">
           <a className="text-center md:inline lg:hidden">
             <Logo small icon />
           </a>
         </Link>
+
         <Navigation />
       </div>
 
       {/* TODO @Peer_Rich: reintroduce in 2.1
       <Tips />
       */}
+      <div className="mb-4 hidden lg:block">
+        <UserV2OptInBanner />
+      </div>
 
       {!isLocaleReady ? null : <TrialBanner />}
       <div data-testid="user-dropdown-trigger">
@@ -702,7 +733,7 @@ export function ShellMain(props: LayoutProps) {
           />
         )}
         {props.heading && (
-          <div className={classNames(props.large && "py-8", "flex w-full items-center pt-4 md:p-0")}>
+          <header className={classNames(props.large && "py-8", "flex w-full items-center pt-4 md:p-0")}>
             {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
             <div className="mb-4 w-full ltr:mr-4 rtl:ml-4">
               {props.heading && (
@@ -717,7 +748,7 @@ export function ShellMain(props: LayoutProps) {
               )}
             </div>
             {props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
-          </div>
+          </header>
         )}
       </div>
       <div className={classNames("", props.flexChildrenContainer && "flex flex-1 flex-col")}>
diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx
index 1737331565..6d4b8daf75 100644
--- a/packages/ui/v2/modules/event-types/CreateEventType.tsx
+++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx
@@ -157,7 +157,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>
-              <div className="max-w-48 shadow-dropdown">{t("new_event_subtitle")}</div>
+              <div className="max-w-48">{t("new_event_subtitle")}</div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             {props.options.map((option) => (