diff --git a/web/components/license/plane-one-billing.tsx b/web/components/license/plane-one-billing.tsx
index eb595de9f3..3c69105d79 100644
--- a/web/components/license/plane-one-billing.tsx
+++ b/web/components/license/plane-one-billing.tsx
@@ -10,7 +10,7 @@ export const PlaneOneBilling: React.FC = () => (
     <div>
       <div className="flex  items-center border-b border-custom-border-100 py-3.5">
         <h3 className="text-xl font-medium flex gap-4">
-          Billing & Plans{" "}
+          Billing and plans{" "}
           <a
             href="https://plane.so/pricing"
             className="px-4 py-1 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100 flex items-center justify-center"
@@ -41,8 +41,7 @@ export const PlaneOneBilling: React.FC = () => (
             </Button>
           </div>
         </div>
-        <p className="mt-4 text-lg">1x - Perpetual license</p>
-        <p className="mb-3 mt-2 text-md text-custom-text-200 flex items-center">Current Billing Cycle: None</p>
+        <p className="mt-4 text-lg">Perpetual license: 1</p>
       </div>
     </div>
   </section>
diff --git a/web/layouts/settings-layout/workspace/layout.tsx b/web/layouts/settings-layout/workspace/layout.tsx
index 6ed06fecbe..2c3e4d0941 100644
--- a/web/layouts/settings-layout/workspace/layout.tsx
+++ b/web/layouts/settings-layout/workspace/layout.tsx
@@ -17,7 +17,7 @@ export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
       </div>
       <div className="flex flex-col relative w-full overflow-hidden">
         <MobileWorkspaceSettingsTabs />
-        <div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+        <div className="w-full h-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
           {children}
         </div>
       </div>
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index e13dbfdd30..5ed24c2891 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -1,6 +1,8 @@
 import { observer } from "mobx-react";
+import Image from "next/image";
 // components
-import { ArrowUpDown } from "lucide-react";
+import { cn } from "@plane/editor-core";
+import { getButtonStyling } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { WorkspaceSettingHeader } from "@/components/headers";
 import IntegrationGuide from "@/components/integration/guide";
@@ -18,12 +20,14 @@ const ImportsPage: NextPageWithLayout = observer(() => {
   // store hooks
   const { instance } = useInstance();
   const {
+    userProfile: { data: userProfile },
     membership: { currentWorkspaceRole },
   } = useUser();
   const { currentWorkspace } = useWorkspace();
 
   // derived values
   const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+  const isDarkMode = userProfile?.theme.theme === "dark";
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
 
   if (!isAdmin)
@@ -38,21 +42,51 @@ const ImportsPage: NextPageWithLayout = observer(() => {
 
   if (instance?.product === "plane-one")
     return (
-      <div className="flex justify-center py-28 h-full w-full">
-        <div className="text-center flex flex-col gap-10 items-center">
-          <div className="flex items-center justify-center h-28 w-28 bg-custom-background-90 rounded-full">
-            <ArrowUpDown className="h-12 w-12 text-custom-text-400" />
+      <div className="flex h-full flex-col gap-10 rounded-xl px-8">
+        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+          <h3 className="text-xl font-medium">Imports</h3>
           </div>
-          <div className="flex flex-col gap-1">
-            <h3 className="text-lg font-medium text-custom-text-300 whitespace-pre-line">
-              Importers for Plane One will be coming soon. Stay tuned!!!
-            </h3>
-            <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">
-              For requests on specific importer, reach out to{" "}
-              <a href="mailto:support@plane.so" className="text-custom-primary-200 hover:underline">
-                support@plane.so
+        <div
+          className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
+            "bg-gradient-to-l from-[#343434] via-[#484848]  to-[#1E1E1E]": userProfile?.theme.theme === "dark",
+            "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
+          })}
+        >
+          <div className="relative flex flex-col justify-center gap-7 pl-8 lg:w-1/2">
+            <div className="flex max-w-96 flex-col gap-2">
+              <h2 className="text-2xl font-semibold">Imports are coming soon!</h2>
+              <p className="text-base font-medium text-custom-text-300">
+                Get your issues, sprints, components, docs, and anything else with Plane One-only imports coming very soon.
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <a
+                className={`${getButtonStyling("primary", "md")} cursor-pointer`}
+                href="https://ece39166.sibforms.com/serve/MUIFAPPLJk02NaZT7ZOinKdoKPL351GVFpEmit1jpJixcLlqd3TaulIT9Czmu0yDy_5bqzuVmEu6Y6oUc09X2NIhI88jplFs0G6ARQa6NxHxACHAUtKNQhOmyI7zpC4MLV_E3kkwlwbzguZyKKURADedKgRarGu77LFz6f9CH-DUDntNbrooJhU1-vndV1EyWNrFgvjMDjz2wSat"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Stay in loop
               </a>
-            </p>
+            </div>
+          </div>
+          <div className="relative hidden w-1/2 lg:block">
+            <span className="absolute bottom-0 right-0">
+              <Image
+                src={`/upcoming-features/imports-cta-1-${isDarkMode ? "dark" : "light"}.png`}
+                height={420}
+                width={420}
+                alt="cta-1"
+              />
+            </span>
+            <span className="absolute -bottom-16 right-1/2 rounded-xl">
+              <Image
+                src={`/upcoming-features/imports-cta-2-${isDarkMode ? "dark" : "light"}.png`}
+                height={210}
+                width={280}
+                alt="cta-2"
+              />
+            </span>
           </div>
         </div>
       </div>
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 07fcd7bcb3..2f1c711bc5 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -1,9 +1,11 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
-import { ArrowUpDown } from "lucide-react";
+import { cn } from "@plane/editor-core";
+import { getButtonStyling } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { WorkspaceSettingHeader } from "@/components/headers";
 import { SingleIntegrationCard } from "@/components/integration";
@@ -30,11 +32,13 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
   // store hooks
   const { instance } = useInstance();
   const {
+    userProfile: { data: userProfile },
     membership: { currentWorkspaceRole },
   } = useUser();
   const { currentWorkspace } = useWorkspace();
 
   // derived values
+  const isDarkMode = userProfile?.theme.theme === "dark";
   const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Integrations` : undefined;
 
@@ -54,21 +58,51 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
 
   if (instance?.product === "plane-one")
     return (
-      <div className="flex justify-center py-28 h-full w-full">
-        <div className="text-center flex flex-col gap-10 items-center">
-          <div className="flex items-center justify-center h-28 w-28 bg-custom-background-90 rounded-full">
-            <ArrowUpDown className="h-12 w-12 text-custom-text-400" />
-          </div>
-          <div className="flex flex-col gap-1">
-            <h3 className="text-lg font-medium text-custom-text-300 whitespace-pre-line">
-              Integrations for Plane One will be coming soon. Stay tuned!!!
-            </h3>
-            <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">
-              For requests on specific integration, reach out to{" "}
-              <a href="mailto:support@plane.so" className="text-custom-primary-200 hover:underline">
-                support@plane.so
+      <div className="flex h-full flex-col gap-10 rounded-xl px-8">
+        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+          <h3 className="text-xl font-medium">Integrations</h3>
+        </div>
+        <div
+          className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
+            "bg-gradient-to-l from-[#343434] via-[#484848]  to-[#1E1E1E]": userProfile?.theme.theme === "dark",
+            "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
+          })}
+        >
+          <div className="relative flex flex-col justify-center gap-7 pl-8 lg:w-1/2">
+            <div className="flex max-w-96 flex-col gap-2">
+              <h2 className="text-2xl font-semibold">Popular integrations are coming soon!</h2>
+              <p className="text-base font-medium text-custom-text-300">
+                Send changes in issues to Slack, turn a Support email into a ticket in Plane, and more—coming soon to Plane One.
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <a
+                className={`${getButtonStyling("primary", "md")} cursor-pointer`}
+                href="https://ece39166.sibforms.com/serve/MUIFAPPLJk02NaZT7ZOinKdoKPL351GVFpEmit1jpJixcLlqd3TaulIT9Czmu0yDy_5bqzuVmEu6Y6oUc09X2NIhI88jplFs0G6ARQa6NxHxACHAUtKNQhOmyI7zpC4MLV_E3kkwlwbzguZyKKURADedKgRarGu77LFz6f9CH-DUDntNbrooJhU1-vndV1EyWNrFgvjMDjz2wSat"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Stay in loop
               </a>
-            </p>
+            </div>
+          </div>
+          <div className="relative hidden w-1/2 lg:block">
+            <span className="absolute bottom-0 right-0">
+              <Image
+                src={`/upcoming-features/integrations-cta-1-${isDarkMode ? "dark" : "light"}.png`}
+                height={420}
+                width={420}
+                alt="cta-1"
+              />
+            </span>
+            <span className="absolute -bottom-16 right-1/2 rounded-xl">
+              <Image
+                src={`/upcoming-features/integrations-cta-2-${isDarkMode ? "dark" : "light"}.png`}
+                height={210}
+                width={280}
+                alt="cta-2"
+              />
+            </span>
           </div>
         </div>
       </div>
diff --git a/web/public/upcoming-features/imports-cta-1-dark.png b/web/public/upcoming-features/imports-cta-1-dark.png
new file mode 100644
index 0000000000..0d16205ba1
Binary files /dev/null and b/web/public/upcoming-features/imports-cta-1-dark.png differ
diff --git a/web/public/upcoming-features/imports-cta-1-light.png b/web/public/upcoming-features/imports-cta-1-light.png
new file mode 100644
index 0000000000..ca8c7ace30
Binary files /dev/null and b/web/public/upcoming-features/imports-cta-1-light.png differ
diff --git a/web/public/upcoming-features/imports-cta-2-dark.png b/web/public/upcoming-features/imports-cta-2-dark.png
new file mode 100644
index 0000000000..343ce54fe1
Binary files /dev/null and b/web/public/upcoming-features/imports-cta-2-dark.png differ
diff --git a/web/public/upcoming-features/imports-cta-2-light.png b/web/public/upcoming-features/imports-cta-2-light.png
new file mode 100644
index 0000000000..d2e13b5dad
Binary files /dev/null and b/web/public/upcoming-features/imports-cta-2-light.png differ
diff --git a/web/public/upcoming-features/integrations-cta-1-dark.png b/web/public/upcoming-features/integrations-cta-1-dark.png
new file mode 100644
index 0000000000..da912102c6
Binary files /dev/null and b/web/public/upcoming-features/integrations-cta-1-dark.png differ
diff --git a/web/public/upcoming-features/integrations-cta-1-light.png b/web/public/upcoming-features/integrations-cta-1-light.png
new file mode 100644
index 0000000000..1e60f9692a
Binary files /dev/null and b/web/public/upcoming-features/integrations-cta-1-light.png differ
diff --git a/web/public/upcoming-features/integrations-cta-2-dark.png b/web/public/upcoming-features/integrations-cta-2-dark.png
new file mode 100644
index 0000000000..921f3ebe89
Binary files /dev/null and b/web/public/upcoming-features/integrations-cta-2-dark.png differ
diff --git a/web/public/upcoming-features/integrations-cta-2-light.png b/web/public/upcoming-features/integrations-cta-2-light.png
new file mode 100644
index 0000000000..2082662e0c
Binary files /dev/null and b/web/public/upcoming-features/integrations-cta-2-light.png differ