diff --git a/site/src/App.js b/site/src/App.js
index 1b6ee3d..8f75403 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -8,18 +8,23 @@ import { useDarkMode } from "./components/useDarkMode";
 import ReactPlayer from 'react-player/youtube'
 import Navigation from "./components/Navigation";
 import Faq from "./components/Faq";
-
+import { useState } from "react";
 
 const App = () => {
 
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === 'light' ? lightTheme : darkTheme;
+  const [showSignUpButton, setShowSignUpButton] = useState(true);
+
+  const handleSignUpFormSubmit = () => {
+    setShowSignUpButton(false);
+  };
 
   return (
     <>
       <ThemeProvider theme={themeMode}>
         <GlobalStyle />
-        <Navigation theme={theme} toggleTheme={toggleTheme} />
+        <Navigation theme={theme} toggleTheme={toggleTheme} showSignUpButton={showSignUpButton} />
         <Main>
           <section className="hero">
             <h3 className="try-now-txt">Try it now!</h3>
@@ -43,7 +48,7 @@ const App = () => {
           </section>
           <section className="form" id="signup-form">
             <h2>Sign up for the early access of cloud native playground!</h2>
-            <SignupForm />
+            <SignupForm onSubmit={handleSignUpFormSubmit}  />
           </section>
           <section className="faq">
             <h1>Frequently Asked Questions</h1>
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index 2223bd2..e1ca0b4 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -4,7 +4,7 @@ import mesheryLogo from '../../assets/images/meshery-learn-logo.png';
 import mesheryLogoLight from '../../assets/images/meshery-learn-logo-white.png';
 import { Toggle } from "../Toggle";
 
-function Navigation({theme, toggleTheme}) {
+function Navigation({theme, toggleTheme, showSignUpButton}) {
 
 
   const [openNav, setOpenNav] = useState(false);
@@ -29,7 +29,7 @@ function Navigation({theme, toggleTheme}) {
         <img className="logo" src={Logo} alt="Meshery Logo" />
         <div className="btn-container">
           <Toggle theme={theme} toggleTheme={toggleTheme} />
-          <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>
+          {showSignUpButton && <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>}
           {/* <a href="https://playground.meshery.io" className="login-btn" role="button">Login</a> */}
         </div>
         <div className="dropdown_btn" onClick={handleNavOpen}>
diff --git a/site/src/components/SignupForm/index.js b/site/src/components/SignupForm/index.js
index fbd33db..7da24f5 100644
--- a/site/src/components/SignupForm/index.js
+++ b/site/src/components/SignupForm/index.js
@@ -5,7 +5,7 @@ import MesheryText from "../../assets/images/meshery-light-text.svg";
 import SignupFormWrapper from "./signupform.style.js";
 import DiscussCallout from "../Discuss-Callout";
 
-const SignupForm = () => {
+const SignupForm = (props) => {
   // Form values
   const [memberFormOne, setMemberFormOne] = useState({});
 
@@ -29,6 +29,8 @@ const SignupForm = () => {
 
   useEffect(() => {
     if (formSubmitted) {
+      props.onSubmit();
+
       axios.post("https://hook.us1.make.com/x4crqi16j8wfhctosk8y47fj6gknyvvh", {
         memberFormOne
       });
@@ -38,7 +40,7 @@ const SignupForm = () => {
         behavior: "smooth"
       });
     }
-  }, [formSubmitted, memberFormOne]);
+  }, [formSubmitted, memberFormOne, props]);
 
   const PlayFormComponent = () => {
     return (