diff --git a/apps/webapp/app/components/CopyTextButton.tsx b/apps/webapp/app/components/CopyTextButton.tsx
index 678c67a69..b34636b84 100644
--- a/apps/webapp/app/components/CopyTextButton.tsx
+++ b/apps/webapp/app/components/CopyTextButton.tsx
@@ -5,18 +5,19 @@ import { CopyText } from "./CopyText";
 
 const variantStyle = {
   slate:
-    "bg-slate-600 text-white transition hover:text-slate-700 hover:bg-slate-700 hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
-  blue: "bg-blue-500 transition text-white hover:text-slate-100 hover:bg-blue-600 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
+    "bg-slate-600 text-white rounded px-2 py-1 transition hover:text-slate-700 hover:bg-slate-700 hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
+  blue: "bg-blue-500 rounded px-2 py-1 transition text-white hover:text-slate-100 hover:bg-blue-600 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
   darkTransparent:
-    "bg-black/10 text-slate-900 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
+    "bg-black/10 text-slate-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
   lightTransparent:
-    "bg-white/10 text-white-900 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
+    "bg-white/10 text-white-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
+  text: "text-sm text-slate-300 transition hover:text-slate-400",
 };
 
 export type CopyTextButtonProps = {
   value: string;
   className?: string;
-  variant?: "slate" | "blue" | "darkTransparent" | "lightTransparent";
+  variant?: "slate" | "blue" | "darkTransparent" | "lightTransparent" | "text";
 };
 
 export function CopyTextButton({
@@ -34,15 +35,18 @@ export function CopyTextButton({
   return (
     <CopyText className={`${className}`} value={value} onCopied={onCopied}>
       {copied ? (
-        <div className="flex items-center rounded bg-emerald-200 px-2 py-1 text-slate-600 transition hover:cursor-pointer hover:bg-emerald-200">
-          <p className="font-sans text-emerald-700 hover:text-emerald-700">
-            Copied!
-          </p>
+        <div
+          className={classNames(
+            "flex items-center  hover:cursor-pointer",
+            variantStyle[variant]
+          )}
+        >
+          <p className="font-sans">Copied!</p>
         </div>
       ) : (
         <div
           className={classNames(
-            "flex items-center rounded px-2 py-1 hover:cursor-pointer",
+            "flex items-center  hover:cursor-pointer",
             variantStyle[variant]
           )}
         >
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 5ee78bcd2..3246f748f 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -4,6 +4,9 @@ import {
   UsersIcon,
   ForwardIcon,
   ChevronLeftIcon,
+  ArrowTopRightOnSquareIcon,
+  PhoneArrowUpRightIcon,
+  EnvelopeIcon,
 } from "@heroicons/react/24/outline";
 import { Link, NavLink } from "@remix-run/react";
 import {
@@ -11,7 +14,11 @@ import {
   useOrganizations,
 } from "~/hooks/useOrganizations";
 import { useCurrentWorkflow } from "~/hooks/useWorkflows";
+import { Body } from "../primitives/text/Body";
 import { Header1 } from "../primitives/text/Headers";
+import { useTypedLoaderData } from "remix-typedjson";
+import type { loader } from "~/routes/__app/orgs/$organizationSlug";
+import { CopyTextButton } from "../CopyTextButton";
 
 export function SideMenuContainer({ children }: { children: React.ReactNode }) {
   return <div className="grid grid-cols-[300px_2fr] h-full">{children}</div>;
@@ -88,44 +95,115 @@ const activeStyle =
   "group flex items-center gap-2 px-3 py-3 text-base rounded transition bg-slate-800 text-white";
 
 function SideMenu({ title, items }: { title: string; items: SideMenuItem[] }) {
+  // const { organization } = useTypedLoaderData<typeof loader>();
+
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-slate-1000 border-r border-slate-800">
       <div className="flex flex-1 flex-col overflow-y-auto pb-4">
         <nav
-          className="mt-2 flex-1 space-y-1 bg-slate-1000 px-2"
+          className="mt-2 flex flex-col h-full justify-between space-y-1 bg-slate-1000 px-2"
           aria-label="Sidebar"
         >
-          <div className="group flex items-center my-2 text-slate-400 rounded hover:bg-slate-900 transition divide-x divide-transparent hover:divide-slate-900">
-            <Link
-              to="/"
-              className="px-2 py-3 hover:bg-slate-800 rounded-l transition"
-            >
-              <ChevronLeftIcon className="h-5 w-5 text-slate-400" />
-            </Link>
+          <div>
+            <div className="group flex items-center my-2 text-slate-400 rounded hover:bg-slate-900 transition divide-x divide-transparent hover:divide-slate-900">
+              <Link
+                to="/"
+                className="px-2 py-3 hover:bg-slate-800 rounded-l transition"
+              >
+                <ChevronLeftIcon className="h-5 w-5 text-slate-400" />
+              </Link>
 
-            <Header1
-              size="regular"
-              className="pl-2 py-2 w-full text-slate-400 rounded-r hover:bg-slate-800 transition"
-            >
-              <Link to="">{title}</Link>
-            </Header1>
+              <Header1
+                size="regular"
+                className="pl-2 py-2 w-full text-slate-400 rounded-r hover:bg-slate-800 transition"
+              >
+                <Link to="">{title}</Link>
+              </Header1>
+            </div>
+
+            {items.map((item) => (
+              <NavLink
+                key={item.name}
+                to={item.to}
+                end
+                className={({ isActive }) =>
+                  isActive ? activeStyle : defaultStyle
+                }
+              >
+                {item.icon}
+                <span>{item.name}</span>
+              </NavLink>
+            ))}
+          </div>
+          <div className="flex flex-col gap-6">
+            <ul className="flex flex-col gap-2 ml-3 mr-2">
+              <li>
+                <Body size="extra-small" className={menuSmallTitleStyle}>
+                  API Keys
+                </Body>
+              </li>
+              {/* {organization.environments.map((environment) => {
+              return (
+                <li key={environment.id} className="flex justify-between w-full">
+                <Body size="small" className="text-slate-400">
+                  {environment.slug}: <span className="select-all">{environment.apiKey}</span>
+                </Body>
+                <CopyTextButton variant="text" value={environment.apiKey} />
+              </li>
+              );
+            })} */}
+              <li className="flex justify-between w-full">
+                <Body size="small" className="text-slate-400">
+                  Dev: <span className="select-all">Jgfisd9Kd*&jdfks</span>
+                </Body>
+                <CopyTextButton variant="text" value={"sdfgsdfg"} />
+              </li>
+              <li className="flex justify-between w-full">
+                <Body size="small" className="text-slate-400">
+                  Prod: <span className="select-all">Jgfisd9Kd*&jdfks</span>
+                </Body>
+                <CopyTextButton variant="text" value={"sdfgsdfg"} />
+              </li>
+            </ul>
+            <ul className="flex flex-col gap-2 ml-3">
+              <li>
+                <Body size="extra-small" className={menuSmallTitleStyle}>
+                  Help and resources
+                </Body>
+              </li>
+              <li>
+                <Link to="/" target="_blank" className={menuSmallLinkStyle}>
+                  <ArrowTopRightOnSquareIcon className={menuSmallIconStyle} />
+                  Documentation
+                </Link>
+              </li>
+              <li>
+                <Link to="/" target="_blank" className={menuSmallLinkStyle}>
+                  <ArrowTopRightOnSquareIcon className={menuSmallIconStyle} />
+                  Quick start guide
+                </Link>
+              </li>
+              <li>
+                <Link to="/" target="_blank" className={menuSmallLinkStyle}>
+                  <PhoneArrowUpRightIcon className={menuSmallIconStyle} />
+                  Schedule a call
+                </Link>
+              </li>
+              <li>
+                <Link to="/" target="_blank" className={menuSmallLinkStyle}>
+                  <EnvelopeIcon className={menuSmallIconStyle} />
+                  Contact us
+                </Link>
+              </li>
+            </ul>
           </div>
-
-          {items.map((item) => (
-            <NavLink
-              key={item.name}
-              to={item.to}
-              end
-              className={({ isActive }) =>
-                isActive ? activeStyle : defaultStyle
-              }
-            >
-              {item.icon}
-              <span>{item.name}</span>
-            </NavLink>
-          ))}
         </nav>
       </div>
     </div>
   );
 }
+
+const menuSmallTitleStyle = "uppercase text-slate-500 tracking-wide";
+const menuSmallLinkStyle =
+  "flex gap-1.5 text-slate-400 hover:text-white text-sm items-center transition";
+const menuSmallIconStyle = "h-4 w-4";