diff --git a/src/apps/devdoc/pages/events/[event].tsx b/src/apps/devdoc/pages/events/[event].tsx
index b28c59c18..e5cc823bd 100644
--- a/src/apps/devdoc/pages/events/[event].tsx
+++ b/src/apps/devdoc/pages/events/[event].tsx
@@ -15,12 +15,16 @@ import { Button } from 'kl-design-system/atoms/button';
 import useCountdown from '~/app/utils/use-countdown';
 import ExternalLayout from '~/app/layout/alternate-layout';
 import { createComponents } from '~/app/layout/mdx-components';
+import { cn } from '~/app/utils/commons';
+import events from '../../../../../lib/shared-statics/events.json';
+import { useCallback, useMemo } from 'react';
+import { webinarUrl } from '~/app/utils/config';
 
 type IEvent = {
   event: string;
   content: any;
   frontMatter: {
-    title: string;
+    name: string;
     date: string;
     starttime: string;
     endtime: string;
@@ -68,25 +72,50 @@ const TimeSeparator = () => (
 export default function Event({ event }: { event: IEvent }) {
   const { content, frontMatter } = event;
 
-  const { banner, date, endtime, organizer, starttime, title, type } =
+  const { banner, date, endtime, organizer, starttime, name, type } =
     frontMatter;
 
   const countdown = useCountdown(new Date(`${date}T${starttime}`));
 
+  const countDownComponent = useMemo(() => {
+    return (
+      <div className="wb-grid wb-grid-cols-[36px_6px_36px_6px_36px_6px_36px] wb-gap-lg wb-justify-center">
+        <TimeItem value={`${countdown.days}`} unit="days" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.hours}`} unit="hours" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.minutes}`} unit="mins" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.seconds}`} unit="sec" />
+      </div>
+    );
+  }, [countdown]);
+
+  const components = useCallback(() => createComponents({}), []);
+
+  const isNow = useCallback(() => {
+    return (
+      countdown.days === 0 &&
+      countdown.hours === 0 &&
+      countdown.minutes === 0 &&
+      countdown.seconds === 0
+    );
+  }, [countdown]);
+
   return (
     <ExternalLayout frontMatter={frontMatter}>
       <Container
         className={cn(
           'wb-min-h-[calc(100vh-76px)] wb-flex-row',
-          'lg:wb-m-auto lg:!wb-max-w-[896px] wb-w-full wb-px-3xl md:!wb-px-5xl lg:!wb-px-8xl xl:!wb-px-11xl 2xl:!wb-px-12xl xl:!wb-max-w-[1024px] 2xl:!wb-max-w-[1120px] 3xl:!wb-min-w-[1408px] lg:!wb-box-content'
+          'lg:wb-m-auto lg:!wb-max-w-[896px] wb-w-full wb-px-3xl md:!wb-px-5xl lg:!wb-px-8xl xl:!wb-px-11xl 2xl:!wb-px-12xl xl:!wb-max-w-[1024px] 2xl:!wb-max-w-[1120px] 3xl:!wb-min-w-[1408px] lg:!wb-box-content',
         )}
       >
-        <Block title={title}>
+        <Block title={name}>
           <ResponsiveContainer className="wb-grid-rows-1">
-            <div className="wb-grid wb-grid-rows-[auto_auto] md:wb-grid-rows-[380px_64px_auto] lg:wb-grid-rows-[480px_auto] wb-gap-3xl md:wb-gap-0 lg:wb-gap-5xl wb-relative">
+            <div className="wb-grid wb-grid-rows-[auto_auto] md:wb-grid-rows-[380px_auto] lg:wb-grid-rows-[480px_auto] wb-gap-3xl md:wb-gap-5xl wb-relative">
               <GraphItem>
                 <ResponsiveImage
-                  alt={title}
+                  alt={name}
                   rmobile={`/events/${banner}-mobile.jpg`}
                   rmobileDark={`/events/${banner}-mobile.jpg`}
                   r768={`/events/${banner}-768.jpg`}
@@ -102,35 +131,20 @@ export default function Event({ event }: { event: IEvent }) {
                   className="wb-w-full md:wb-h-full"
                 />
                 <div className="wb-p-3xl wb-flex wb-flex-col md:wb-flex-row wb-gap-5xl md:wb-absolute wb-bg-surface-basic-default md:wb-z-50 md:wb-bottom-0 md:wb-left-1/2 md:-wb-translate-x-1/2 md:wb-translate-y-5xl md:wb-rounded md:wb-border md:wb-border-border-dark">
-                  <div className="wb-grid wb-grid-cols-[36px_6px_36px_6px_36px_6px_36px] wb-gap-lg wb-justify-center">
-                    <TimeItem value={`${countdown.days}`} unit="days" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.hours}`} unit="hours" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.minutes}`} unit="mins" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.seconds}`} unit="sec" />
-                  </div>
+                  {countDownComponent}
                   <Button
                     block
-                    content="Register now"
+                    content={isNow() ? 'Join now' : 'Register now'}
                     variant="primary"
                     linkComponent={Link}
                     toLabel="href"
-                    to={`https://webinar.kloudlite.io/${event.hash}/join`}
+                    to={`${webinarUrl}/${event.event}/join`}
                   />
                 </div>
               </GraphItem>
-              <GraphItem
-                lines={{
-                  bottom: false,
-                  top: false,
-                }}
-                className="wb-hidden md:wb-block lg:wb-hidden"
-              />
               <GraphItem className="wb-grid wb-grid-cols-1 md:wb-grid-cols-[auto_288px] wb-gap-3xl md:wb-gap-5xl">
                 <div className="wb-border wb-border-r-[1.5px] wb-border-border-dark wb-bg-surface-basic-subdued wb-p-5xl">
-                  <MDXRemote {...content} components={createComponents({})} />
+                  <MDXRemote {...content} components={components} />
                 </div>
                 <div className="wb-border wb-border-l-[1.5px] wb-border-border-dark wb-bg-surface-basic-subdued wb-p-5xl wb-flex wb-flex-col wb-gap-5xl">
                   <div className="wb-flex wb-flex-col wb-gap-2xl wb-pb-5xl wb-border-b wb-border-border-default">
@@ -179,15 +193,9 @@ export default function Event({ event }: { event: IEvent }) {
 
 // Generates `/posts/1` and `/posts/2`
 export async function getStaticPaths() {
-  const filePath = path.join(process.cwd(), 'pages', 'events', '_md');
-
-  const files = fs.readdirSync(filePath, 'utf8');
-
-  const paths = files
-    .filter((f) => f.endsWith('.md'))
-    .map((f) => {
-      return { params: { event: f.replace(/\.md$/, '') } };
-    });
+  const paths = Object.keys(events).map((event) => {
+    return { params: { event } };
+  });
 
   return {
     paths,
@@ -202,7 +210,7 @@ export async function getStaticProps({ params }: any) {
     'pages',
     'events',
     '_md',
-    `${params.event}.md`
+    `${params.event}.mdx`,
   );
 
   const fileContents = fs.readFileSync(filePath, 'utf8');
@@ -217,7 +225,8 @@ export async function getStaticProps({ params }: any) {
   const event = {
     event: params.event,
     content: contentHtml,
-    frontMatter: data,
+    // @ts-ignore
+    frontMatter: { ...data, ...events[params.event] },
   };
 
   return {
diff --git a/src/apps/devdoc/pages/events/_md/1.md b/src/apps/devdoc/pages/events/_md/1.md
deleted file mode 100644
index 7ba143b05..000000000
--- a/src/apps/devdoc/pages/events/_md/1.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: "Code Unbound: No Builds, No Deploys The New Era of Developments"
-metaTitle: "Code Unbound: No Builds, No Deploys The New Era of Developments"
-date: "2024-09-11"
-starttime: "16:00"
-endtime: "18:00"
-type: "Online"
-banner: "1"
-organizer: 
-  author: "Karthik Thriumalasetti"
-  title: "Founder & CEO, Kloudlite"
----
-
-# Overview
-Lorem ipsum dolor sit amet. Aut voluptatem quod non iste cumque eos omnis velit. Et modi omnis qui facere nostrum aut tempore rerum et voluptate corrupti aut autem internos. Nam commodi iste sed internos officiis qui quas veniam ut eaque consequatur qui cupiditate amet qui corporis ratione! Hic quae veritatis est atque possimus ea incidunt laboriosam sit cumque quasi et autem dolores sit explicabo dolore.
-
-## Key takeaways:
-- Lorem ipsum dolor sit amet. Aut voluptatem quod non iste cumque eos omnis velit. Et modi omnis qui facere nostrum aut tempore rerum et voluptate corrupti aut autem internos. 
-- Nam commodi iste sed internos officiis qui quas veniam ut eaque consequatur qui cupiditate amet qui corporis ratione! Hic quae veritatis est atque possimus ea incidunt laboriosam sit cumque quasi et autem dolores sit explicabo dolore.\
-- Lorem ipsum dolor sit amet. Aut voluptatem quod non iste cumque eos omnis velit. Et modi omnis qui facere nostrum aut tempore rerum et voluptate corrupti aut autem internos. 
-
-## Who should attend
-- IT Decision-Makers
-- CTOs and CIOs
-- Application Developers
-- Data Scientists
-- Digital Transformation Leaders
diff --git a/src/apps/devdoc/pages/events/_md/code-unbound-new-age-development-environments.mdx b/src/apps/devdoc/pages/events/_md/code-unbound-new-age-development-environments.mdx
new file mode 100644
index 000000000..67b8ae12f
--- /dev/null
+++ b/src/apps/devdoc/pages/events/_md/code-unbound-new-age-development-environments.mdx
@@ -0,0 +1,31 @@
+---
+banner: "1"
+organizer: 
+  author: "Karthik Thriumalasetti"
+  title: "Founder & CEO, Kloudlite"
+---
+
+### Host: 
+
+Kloudlite – A Developer Experience Company
+
+### Overview:
+
+Get ready to revolutionize your development process with our latest event, "New Era of Development with Workspaces & Environments." This isn’t just another tech talk—it’s a deep dive into the future of development, where traditional roadblocks like build and deploy steps are a thing of the past.
+
+### What to Expect:
+
+- No Build, No Deploy: Discover how to instantly see your code in action without the delays of building or deploying. Kloudlite is leading the charge in this evolution, making development faster, smoother, and more productive.
+- Seamless Integration: Learn how to connect your local workspaces directly with remote environments, ensuring your development setup is always in sync with production.
+- Boost Productivity: Whether you're working on microservices, cloud-native applications, or distributed systems, we’ll show you how to streamline your workflows and collaborate effortlessly across teams.
+
+### Why Attend?
+
+This event is your opportunity to be part of the next generation of developers who are embracing innovative workflows that eliminate friction and boost efficiency. Hosted by Kloudlite, a tech pioneer from India, we’ll share insights on how we’ve evolved our platform to empower developers like you.
+
+
+### Don’t Miss Out!
+
+Join us and transform the way you code—say goodbye to the old way of doing things and embrace the future with Kloudlite.
+
+
diff --git a/src/apps/devdoc/web/utils/config.tsx b/src/apps/devdoc/web/utils/config.tsx
index 3b9ad2117..5df30770c 100644
--- a/src/apps/devdoc/web/utils/config.tsx
+++ b/src/apps/devdoc/web/utils/config.tsx
@@ -17,6 +17,7 @@ export const siteDesc =
   'Kloudlite is a remote-local development environment platform designed to streamline the workflow for developers working on distributed applications. By integrating both local and remote environments through Kubernetes, Kloudlite ensures a seamless, productive, and more connected development experience.';
 export const basePath = 'https://kloudlite.io';
 export const authUrl = `${process.env.AUTH_URL}` || 'https://auth.kloudlite.io';
+export const webinarUrl = 'https://webinar.kloudlite.io';
 export const contactUrl = `${process.env.CONTACT_URL}`;
 export const consoleUrl =
   `${process.env.CONSOLE_URL}` || 'https://console.kloudlite.io';
@@ -62,7 +63,7 @@ const BrandMenu = ({ className }: { className?: string }) => {
     <div
       className={cn(
         'wb-flex wb-flex-col wb-gap-7xl md:wb-gap-3xl lg:wb-pr-4xl wb-order-last md:wb-order-first md:wb-justify-between md:wb-h-full',
-        className
+        className,
       )}
     >
       <div className="wb-flex wb-flex-row">
diff --git a/src/apps/devdoc/web/utils/const.tsx b/src/apps/devdoc/web/utils/const.tsx
index 903f03509..bbf39ccf4 100644
--- a/src/apps/devdoc/web/utils/const.tsx
+++ b/src/apps/devdoc/web/utils/const.tsx
@@ -87,7 +87,7 @@ import FibrSvg from '../icons/Fibr';
 import PlaxonicSvg from '../icons/Plaxonic';
 import RedPlutoSvg from '../icons/RedPluto';
 import TalescaleSvg from '../icons/Talescale';
-import { authUrl } from './config';
+import { authUrl, webinarUrl } from './config';
 
 export const linkedInPrefix = 'https://www.linkedin.com/in/';
 export const githubPrefix = 'https://github.com/';
@@ -864,11 +864,11 @@ const consts = {
         </div>
       </>
     ),
-    time: '12:00-1:00 pm',
-    date: 'Sep 14, 2024',
+    time: '12:15-1:15 pm',
+    date: 'Sep 21, 2024',
     enabled: false,
     linkContent: 'Register today',
-    link: `${authUrl}/signup`,
+    link: `${webinarUrl}/code-unbound-new-age-development-environments/join`,
   },
   contactUs: {
     cookies: {