diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 6967229eef8f72814a1519f0a15d07826a638237..b3e66bce45019d08caa957ecfb801511afd95cac 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -1,13 +1,61 @@
 import Navbar from "@/components/Nav";
 import Head from "next/head";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+  const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
+  const textElements: string[] = ["Productivity", "Elegance", "Greatness"];
+
+  const showNextText = () => {
+    setCurrentTextIndex((currentTextIndex + 1) % textElements.length);
+  };
+
+  useEffect(() => {
+    const intervalId = setInterval(showNextText, 3000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [currentTextIndex]);
+
+  const textStyle = {
+    position: "absolute" as const,
+    top: "50%",
+    left: "50%",
+    fontSize: "50px",
+    transform: "translate(-50%, -50%)",
+    opacity: 0,
+    transition: "opacity 1s ease-in-out",
+  };
+
+  const activeTextStyle = {
+    ...textStyle,
+    opacity: "1",
+    position: "absolute" as const,
+  };
+
   return (
     <>
       <Navbar title="DefaultIcon" />
-      <h1>TEST</h1>
-      <p>Whereas disregard and contempt for human rights have resulted</p>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100vw",
+          minHeight: "100vh",
+          alignItems: "center",
+        }}
+      >
+        {textElements.map((text, index) => (
+          <h1
+            key={index}
+            style={index === currentTextIndex ? activeTextStyle : textStyle}
+          >
+            {text}
+          </h1>
+        ))}
+      </div>
     </>
   );
 }
diff --git a/client/src/pages/signup/index.tsx b/client/src/pages/signup/index.tsx
index 83e8b680395fb59d0163a139d5754b8c8b2ed274..d67fedc66ea3b022649706e0bc92680feeb07494 100644
--- a/client/src/pages/signup/index.tsx
+++ b/client/src/pages/signup/index.tsx
@@ -9,14 +9,39 @@ import { useState } from "react";
 import { TermsDialog } from "@/components/TermsDialog";
 
 export default function Signup() {
+  // Dialog related consts
   const [open, setOpen] = useState<boolean>(false);
   const handleOpen = () => {
     setOpen(true);
   };
-
   const handleClose = () => {
     setOpen(false);
   };
+  const [error, setError] = useState<string>("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    const email = e.target.email.value;
+    const password = e.target.password.value;
+    const confirmPassword = e.target.confirmPassword.value;
+    const acceptTerms = e.target.acceptTerms.checked;
+
+    if (password.length < 6) {
+      setError("Your password needs to be at least 6 characters");
+      return;
+    } else if (password !== confirmPassword) {
+      setError("Passwords does not match");
+      return;
+    }
+    if (!email || !password || !confirmPassword) {
+      setError("Please fill in all the fields");
+      return;
+    } else if (!acceptTerms) {
+      setError("Please accept the terms and conditions to use the service");
+      return;
+    }
+    setError("");
+  };
 
   return (
     <>
@@ -24,7 +49,7 @@ export default function Signup() {
       <div className={styles.outer}>
         <h1 style={{ fontSize: "40px", marginTop: "50px" }}>Signup</h1>;
         <form
-          onSubmit={() => console.log("Submit")}
+          onSubmit={handleSubmit}
           style={{
             borderRadius: "10px",
             padding: "10px",
@@ -35,10 +60,27 @@ export default function Signup() {
           <h3 style={{ textAlign: "center" }}>
             Enter your credentials to create an account
           </h3>
-          <StandardInput placeholderText="Enter email address" type="text" />
-          <StandardInput placeholderText="Password" type="password" />
-          <StandardInput placeholderText="Confirm Password" type="password" />
-          <p style={{ textAlign: "center" }}>
+          <StandardInput
+            placeholderText="Enter email address"
+            type="email"
+            name="email"
+          />
+          <StandardInput
+            placeholderText="Password"
+            type="password"
+            name="password"
+          />
+          <StandardInput
+            placeholderText="Confirm Password"
+            type="password"
+            name="confirmPassword"
+          />
+          <input
+            type="checkbox"
+            style={{ marginRight: "10px", marginLeft: "30px" }}
+            name="acceptTerms"
+          />
+          <span>
             I agree to the{" "}
             <a
               style={{ color: "aqua", cursor: "pointer" }}
@@ -47,9 +89,14 @@ export default function Signup() {
               terms and conditions
             </a>
             .
-          </p>
+          </span>
           <div className={styles.bottom}>
-            <StandardButton text="Create account" margin="10px" />
+            {error && <p style={{ color: "red" }}>{error}</p>}
+            <StandardButton
+              text="Create account"
+              margin="10px"
+              // onClick={() => handleSubmit}
+            />
           </div>
         </form>
       </div>
diff --git a/client/src/pages/signup/styles.module.css b/client/src/pages/signup/styles.module.css
index 19272658b401659875a6a85cb1114ab5b837cabd..01e394ede0c103dc462bd6d7d06ea04f9b565ad6 100644
--- a/client/src/pages/signup/styles.module.css
+++ b/client/src/pages/signup/styles.module.css
@@ -10,4 +10,5 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-top: 20px;
 }