diff --git a/src/components/homepage/HeroSection.tsx b/src/components/homepage/HeroSection.tsx
index d2625e08a..1ef3376d5 100644
--- a/src/components/homepage/HeroSection.tsx
+++ b/src/components/homepage/HeroSection.tsx
@@ -33,7 +33,7 @@ const PRODUCTS = [
     lightImage: '/static/landing-page/hero/livestream-graphic.png',
     darkImage: '/static/landing-page/hero/livestream-graphic-dark.png',
     text: 'Integrate highly scalable live video broadcasting capabilities into your app, ideal for apps that involve streaming webinars, sports or live events',
-  }
+  },
 ];
 
 function HeroProduct({
@@ -53,7 +53,7 @@ function HeroProduct({
       }}
       className={clsx(
         'group cursor-pointer overflow-clip rounded-3xl from-primary/30 via-transparent to-transparent text-black transition-all hover:bg-gradient-to-tr hover:text-primary hover:no-underline dark:text-white',
-        'border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 w-[90vw] sm:w-[440px]'
+        'w-[90vw] border-secondary-700 bg-secondary-900 hover:!border-primary dark:border-secondary-800 sm:w-[440px]'
       )}
     >
       <div className="p-6 !pb-0">
@@ -80,7 +80,7 @@ function HeroProduct({
 
 export default function HeroSection() {
   return (
-    <div className='noise-bg pb-14'>
+    <div className="noise-bg pb-14">
       <section className="no-underline-links px-4 pt-16 lg:py-0">
         <div className="flex flex-col items-center justify-between py-14">
           <h2 className="mb-4 font-jakarta text-5xl font-bold">
@@ -95,7 +95,7 @@ export default function HeroSection() {
         </div>
       </section>
 
-      <section className="mx-auto w-full max-w-6xl flex gap-6 px-4 flex-wrap justify-center">
+      <section className="mx-auto flex w-full max-w-6xl flex-wrap justify-center gap-6 px-4">
         {PRODUCTS.map((product) => (
           <HeroProduct {...product} key={product.title} />
         ))}
diff --git a/src/components/homepage/PhHelloBar.jsx b/src/components/homepage/PhHelloBar.jsx
new file mode 100644
index 000000000..d06295b26
--- /dev/null
+++ b/src/components/homepage/PhHelloBar.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {
+  AppsAddInRegular,
+  ArrowRightFilled,
+  DocumentRegular,
+  OpenRegular,
+  RecordRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import clsx from 'clsx';
+import { ChevronRight, GitHub } from 'react-feather';
+
+function HelloBar() {
+  return (
+    <a
+      href="https://www.producthunt.com/posts/feta"
+      target="_blank"
+      className="hello-bar u-hflex-center-center w-inline-block"
+    >
+      <div className="hello_bar_contents u-hflex-center-center u-gap-10">
+        <div className="ph_cat_nd_txt-wrapper u-hflex-left-center u-gap-10">
+          <img
+            src="https://cdn.prod.website-files.com/66323b0d8cbb65b15bf8550c/6703f2188ab1ea055e35b760_ph_cat.png"
+            loading="lazy"
+            alt=""
+            className="ph_cat"
+          />
+          <div className="ph_banner_txt">We are live on ProductHunt🎉</div>
+        </div>
+        <div className="banner_separator"></div>
+        <div className="hello_bar_cta u-hflex-left-center u-gap-8">
+          <div className="text-block-98">Subscribe &amp; Get 3 Months Free</div>
+          <img
+            src="https://cdn.prod.website-files.com/66323b0d8cbb65b15bf8550c/6703f48cc2268f2ff727de7b_Arrow%20Down%20Left.png"
+            loading="lazy"
+            alt=""
+            className="image-213"
+          />
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export default HelloBar;
diff --git a/src/css/custom.css b/src/css/custom.css
index 4ecc57e55..59b8c667f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -114,8 +114,12 @@
 
 @layer components {
   .noise-bg {
-    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,
-    rgba(255,255,255,0.6)), url('/static/landing-page/grid-light.svg');
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.6)
+      ),
+      url('/static/landing-page/grid-light.svg');
   }
 
   html[data-theme='dark'] .noise-bg {
@@ -1240,10 +1244,9 @@ html[data-theme='dark'] .video_sidebar_header > div > a::before {
 }
 
 .tag-orange {
-  @apply bg-orange-500 text-white/95 text-sm rounded-md py-0.5 px-1 font-semibold;
+  @apply rounded-md bg-orange-500 py-0.5 px-1 text-sm font-semibold text-white/95;
 }
 
-
 .table-of-contents .header-tag {
   @apply mt-0 rounded-sm py-0.5 text-[0.5rem];
 }
@@ -1362,7 +1365,7 @@ h2.anchor > code {
 .interactive-onboarding div.container {
   max-width: unset !important;
   margin: 0;
-  padding:0 !important;
+  padding: 0 !important;
 }
 .interactive-onboarding footer {
   display: none;
@@ -1376,21 +1379,21 @@ h2.anchor > code {
   .theme-doc-markdown {
     margin-top: 0px;
   }
-  .theme-doc-breadcrumbs{
+  .theme-doc-breadcrumbs {
     display: none;
   }
   .simulator {
     width: 250px;
     height: 450px;
     margin: auto;
-    @apply border-text-400 border-[10px];
+    @apply border-[10px] border-text-400;
     overflow: scroll;
     border-radius: 36px;
   }
   .row {
-    @apply h-full relative;
+    @apply relative h-full;
   }
-  
+
   .simulator {
     -ms-overflow-style: none; /* Internet Explorer 10+ */
     scrollbar-width: none; /* Firefox */
@@ -1398,15 +1401,15 @@ h2.anchor > code {
   .simulator::-webkit-scrollbar {
     display: none; /* Safari and Chrome */
   }
-  
+
   .simulator .book-now {
     @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-3 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:bg-gray-400;
   }
-  
+
   .btn {
-    @apply text-xs bg-blue-600 text-white p-1.5 rounded-md;
+    @apply rounded-md bg-blue-600 p-1.5 text-xs text-white;
     &:hover {
-      @apply bg-blue-500 cursor-pointer;
+      @apply cursor-pointer bg-blue-500;
     }
   }
   .large-phone .simulator {
@@ -1415,22 +1418,23 @@ h2.anchor > code {
   }
 }
 
-h2.anchor, h3.anchor {
+h2.anchor,
+h3.anchor {
   text-wrap: nowrap;
 }
 
-h2.anchor > code, h3.anchor > code {
+h2.anchor > code,
+h3.anchor > code {
   @apply mx-2;
 }
 
-
 .pre-call-docs {
   @apply mb-3;
 }
 
 .module-seperation::before {
-  content: "By module";
-  @apply relative -top-3 bg-secondary-700 px-2 py-1 rounded-md text-xs;
+  content: 'By module';
+  @apply relative -top-3 rounded-md bg-secondary-700 px-2 py-1 text-xs;
 }
 
 .module-seperation {
@@ -1438,5 +1442,118 @@ h2.anchor > code, h3.anchor > code {
 }
 
 .warning_icon {
-  @apply w-10 h-10 inline-block text-red-500 -mt-2;
-}
\ No newline at end of file
+  @apply -mt-2 inline-block h-10 w-10 text-red-500;
+}
+
+/* CSS for hello bar*/
+.hello-bar {
+  background-color: #212329;
+  background-image: linear-gradient(#0003, #0003);
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.u-hflex-center-center {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.u-gap-10 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  display: flex;
+}
+
+.u-hflex-center-center {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.u-hflex-left-center {
+  flex-flow: wrap;
+  align-items: center;
+  display: flex;
+}
+
+.ph_cat {
+  width: 28px;
+  height: auto;
+}
+.ph_banner_txt {
+  color: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.banner_separator {
+  background-color: #fff;
+  width: 1px;
+  height: 20px;
+}
+
+.hello_bar_cta {
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 6px 12px 6px 14px;
+}
+
+.u-gap-8 {
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+}
+
+.u-hflex-left-center {
+  flex-flow: wrap;
+  align-items: center;
+  display: flex;
+}
+
+.text-block-98 {
+  color: #1a1c21;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.image-213 {
+  width: 16px;
+  height: 16px;
+}
+
+/*FOR MOBILE SCREEN SIZE*/
+@media screen and (max-width: 767px) {
+  .hello_bar_contents.u-hflex-center-center.u-gap-10 {
+    flex-flow: column;
+    flex: 1;
+  }
+
+  .hello-bar.u-hflex-center-center {
+    padding: 8px 11px;
+  }
+
+  .ph_cat_nd_txt-wrapper.u-hflex-left-center.u-gap-10 {
+    flex-flow: row;
+  }
+
+  .ph_banner_txt {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  .banner_separator {
+    display: none;
+  }
+
+  .hello_bar_cta.u-hflex-left-center.u-gap-8 {
+    justify-content: center;
+    align-self: stretch;
+    align-items: center;
+  }
+}
+
+/* CSS for hello bar ends*/
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 54e79bd2e..2c376e3b7 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -11,6 +11,7 @@ import Head from '@docusaurus/Head';
 import GuidesAndSamples from '../components/homepage/GuidesAndSamples';
 import SDKs from '../components/homepage/SDKs';
 import Link from '@docusaurus/Link';
+import PhHelloBar from '../components/homepage/PhHelloBar';
 
 export default function Homepage() {
   return (
@@ -23,16 +24,20 @@ export default function Homepage() {
         <link rel="prefetch" href="/assets/css/elements.min.css" />
       </Head>
       <div>
-        <div className="w-full bg-gradient-to-r from-blue-500 to-red-500 p-4 text-center font-medium text-white">
-          Affected by Twilio Video Sunsetting? Migrate to Dyte and get upto $30,000
-          Credits{' '}
+        <PhHelloBar />
+
+        {/* Code for Twilio credits banner */}
+
+        {/* <div className="w-full bg-gradient-to-r from-blue-500 to-red-500 p-4 text-center font-medium text-white">
+          Affected by Twilio Video Sunsetting? Migrate to Dyte and get upto
+          $30,000 Credits{' '}
           <Link
             to="https://dyte.io/twilio-video-competitor"
             className="text-white underline"
           >
             Learn more
           </Link>
-        </div>
+        </div> */}
       </div>
 
       <HeroSection />