diff --git a/front/app/orgs/[orgslug]/login/login.tsx b/front/app/orgs/[orgslug]/login/login.tsx
index 06b662d1..d8f32cb8 100644
--- a/front/app/orgs/[orgslug]/login/login.tsx
+++ b/front/app/orgs/[orgslug]/login/login.tsx
@@ -10,6 +10,8 @@ import React from "react";
 import { loginAndGetToken } from "@services/auth/auth";
 import { AlertTriangle } from "lucide-react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { getUriWithOrg } from "@services/config/config";
 
 interface LoginClientProps {
     org: any;
@@ -50,13 +52,13 @@ const LoginClient = (props: LoginClientProps) => {
         onSubmit: async values => {
             setIsSubmitting(true);
             let res = await loginAndGetToken(values.email, values.password);
-            console.log(res.status);
+            let message = await res.json();
             if (res.status == 200) {
                 router.push(`/`);
                 setIsSubmitting(false);
             }
             else if (res.status == 401 || res.status == 400 || res.status == 404 || res.status == 409) {
-                setError("Invalid email or password");
+                setError(message.detail);
                 setIsSubmitting(false);
             }
             else {
@@ -70,8 +72,9 @@ const LoginClient = (props: LoginClientProps) => {
         <div className='grid grid-flow-col justify-stretch h-screen'>
             <div className="right-login-part" style={{ background: "linear-gradient(041.61deg, #202020 7.15%, #000000 90.96%)" }} >
                 <div className='login-topbar m-10'>
-                    <Image quality={100} width={30} height={30} src={learnhouseIcon} alt="" />
-                </div>
+                    <Link prefetch href={getUriWithOrg(props.org.slug, "/")}>
+                        <Image quality={100} width={30} height={30} src={learnhouseIcon} alt="" />
+                    </Link></div>
                 <div className="ml-10 h-4/6 flex flex-row text-white">
                     <div className="m-auto flex space-x-4 items-center flex-wrap">
                         <div>Login to </div>
diff --git a/front/app/orgs/[orgslug]/signup/page.tsx b/front/app/orgs/[orgslug]/signup/page.tsx
index 29e13ff8..dd70b7f4 100644
--- a/front/app/orgs/[orgslug]/signup/page.tsx
+++ b/front/app/orgs/[orgslug]/signup/page.tsx
@@ -1,115 +1,33 @@
-"use client";
+
 import React from "react";
-import { signup } from "../../../../services/auth/auth";
-import { useRouter } from "next/navigation";
+import SignUpClient from "./signup";
+import { Metadata } from "next";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
 
-const SignUp = (params: any) => {
-  const org_slug = params.params.orgslug;
-  const router = useRouter();
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [username, setUsername] = React.useState("");
+type MetadataProps = {
+  params: { orgslug: string, courseid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
-    console.log({ email, password, username, org_slug });
-    alert(JSON.stringify({ email, password, username, org_slug }));
-    try {
-      signup({ email, password, username, org_slug });
-      router.push("/");
-    }
-    catch (err) {
-      console.log(err);
-    }
+export async function generateMetadata(
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const orgslug = params.orgslug;
+  // Get Org context information 
+  const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
+
+  return {
+    title: 'Sign up' + ` — ${org.name}`,
   };
+}
 
-  const handleEmailChange = (e: any) => {
-    setEmail(e.target.value);
-  };
-
-  const handlePasswordChange = (e: any) => {
-    setPassword(e.target.value);
-  };
-
-  const handleUsernameChange = (e: any) => {
-    setUsername(e.target.value);
-  };
+const SignUp = async (params: any) => {
+  const orgslug = params.params.orgslug;
+  const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
 
   return (
     <div>
-      <div title="Sign up">
-        <div className="font-bold text-lg">Sign up </div>
-
-        <div className="flex justify-center items-center h-screen">
-          <div className="w-full max-w-md">
-            <form onSubmit={handleSubmit}>
-              <div className="mb-4 space-y-3">
-                <label className="block text-gray-700 text-sm font-bold mb-2">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  name="email"
-                  value={email}
-                  onChange={handleEmailChange}
-                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  placeholder="Email"
-                />
-
-                <label className="block text-gray-700 text-sm font-bold mb-2">
-                  Username
-                </label>
-
-                <input
-                  type="text"
-                  name="username"
-                  value={username}
-                  onChange={handleUsernameChange}
-                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  placeholder="Username"
-                />
-
-                <label className="block text-gray-700 text-sm font-bold mb-2">
-                  Password
-                </label>
-
-                <input
-                  type="password"
-                  name="password"
-                  value={password}
-                  onChange={handlePasswordChange}
-                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  placeholder="Password"
-                />
-
-                <button
-                  type="submit"
-                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                >
-                  Sign up
-                </button>
-
-                <a
-                  href="/login"
-                  className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 ml-3"
-                >
-                  Already have an account? Login
-                </a>
-
-                <a
-                  href="/"
-                  className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 ml-3"
-                >
-                  Home
-                </a>
-
-
-              </div>
-            </form>
-
-          </div>
-        </div>
-      </div>
+      <SignUpClient org={org}></SignUpClient>
     </div>
   );
 };
diff --git a/front/app/orgs/[orgslug]/signup/signup.tsx b/front/app/orgs/[orgslug]/signup/signup.tsx
new file mode 100644
index 00000000..102af86c
--- /dev/null
+++ b/front/app/orgs/[orgslug]/signup/signup.tsx
@@ -0,0 +1,188 @@
+"use client";
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import learnhouseIcon from "public/learnhouse_bigicon_1.png";
+import React from 'react'
+import FormLayout, { ButtonBlack, FormField, FormLabel, FormLabelAndMessage, FormMessage, Input, Textarea } from '@components/StyledElements/Form/Form'
+import Image from 'next/image';
+import * as Form from '@radix-ui/react-form';
+import { getOrgLogoMediaDirectory } from '@services/media/media';
+import { AlertTriangle } from 'lucide-react';
+import Link from 'next/link';
+import { signup } from '@services/auth/auth';
+import { getUriWithOrg } from '@services/config/config';
+
+
+interface SignUpClientProps {
+    org: any;
+}
+
+const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.email) {
+        errors.email = 'Required';
+    }
+    else if (
+        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+    ) {
+        errors.email = 'Invalid email address';
+    }
+
+    if (!values.password) {
+        errors.password = 'Required';
+    }
+    else if (values.password.length < 8) {
+        errors.password = 'Password must be at least 8 characters';
+    }
+
+    if (!values.username) {
+        errors.username = 'Required';
+    }
+
+    if (!values.username || values.username.length < 4) {
+        errors.username = 'Username must be at least 4 characters';
+    }
+
+    if (!values.full_name) {
+        errors.full_name = 'Required';
+    }
+
+    if (!values.bio) {
+        errors.bio = 'Required';
+    }
+
+
+    return errors;
+};
+
+
+function SignUpClient(props: SignUpClientProps) {
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const router = useRouter();
+    const [error, setError] = React.useState('');
+    const formik = useFormik({
+        initialValues: {
+            org_slug: props.org?.slug,
+            email: '',
+            password: '',
+            username: '',
+            bio: '',
+            full_name: '',
+        },
+        validate,
+        onSubmit: async values => {
+            setIsSubmitting(true);
+            let res = await signup(values);
+            let message = await res.json();
+            if (res.status == 200) {
+                router.push(`/`);
+                setIsSubmitting(false);
+            }
+            else if (res.status == 401 || res.status == 400 || res.status == 404 || res.status == 409) {
+                setError(message.detail);
+                setIsSubmitting(false);
+            }
+            else {
+                setError("Something went wrong");
+                setIsSubmitting(false);
+            }
+
+        },
+    });
+
+    return (
+        <div><div className='grid grid-flow-col justify-stretch h-screen'>
+            <div className="right-login-part" style={{ background: "linear-gradient(041.61deg, #202020 7.15%, #000000 90.96%)" }} >
+                <div className='login-topbar m-10'>
+                    <Link prefetch href={getUriWithOrg(props.org.slug, "/")}>
+                        <Image quality={100} width={30} height={30} src={learnhouseIcon} alt="" />
+                    </Link>
+                </div>
+                <div className="ml-10 h-4/6 flex flex-row text-white">
+                    <div className="m-auto flex space-x-4 items-center flex-wrap">
+                        <div>Join </div>
+                        <div className="shadow-[0px_4px_16px_rgba(0,0,0,0.02)]" >
+                            {props.org?.logo ? (
+                                <img
+                                    src={`${getOrgLogoMediaDirectory(props.org.org_id, props.org?.logo)}`}
+                                    alt="Learnhouse"
+                                    style={{ width: "auto", height: 70 }}
+                                    className="rounded-md shadow-xl inset-0 ring-1 ring-inset ring-black/10 bg-white"
+                                />
+                            ) : (
+                                <Image quality={100} width={70} height={70} src={learnhouseIcon} alt="" />
+                            )}
+                        </div>
+                        <div className="font-bold text-xl">{props.org?.name}</div>
+                    </div>
+                </div>
+            </div>
+            <div className="left-login-part bg-white flex flex-row">
+                <div className="login-form m-auto w-72">
+                    {error && (
+                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                            <AlertTriangle size={18} />
+                            <div className="font-bold text-sm">{error}</div>
+                        </div>
+                    )}
+                    <FormLayout onSubmit={formik.handleSubmit}>
+                        <FormField name="email">
+                            <FormLabelAndMessage label='Email' message={formik.errors.email} />
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.email} type="email" required />
+                            </Form.Control>
+                        </FormField>
+                        {/* for password  */}
+                        <FormField name="password">
+                            <FormLabelAndMessage label='Password' message={formik.errors.password} />
+
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.password} type="password" required />
+                            </Form.Control>
+                        </FormField>
+                        {/* for username  */}
+                        <FormField name="username">
+                            <FormLabelAndMessage label='Username' message={formik.errors.username} />
+
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.username} type="text" required />
+                            </Form.Control>
+                        </FormField>
+
+                        {/* for full name  */}
+                        <FormField name="full_name">
+                            <FormLabelAndMessage label='Full Name' message={formik.errors.full_name} />
+
+                            <Form.Control asChild>
+                                <Input onChange={formik.handleChange} value={formik.values.full_name} type="text" required />
+                            </Form.Control>
+
+                        </FormField>
+
+                        {/* for bio  */}
+                        <FormField name="bio">
+                            <FormLabelAndMessage label='Bio' message={formik.errors.bio} />
+
+                            <Form.Control asChild>
+                                <Textarea onChange={formik.handleChange} value={formik.values.bio} required />
+                            </Form.Control>
+                        </FormField>
+
+                        <div className="flex  py-4">
+                            <Form.Submit asChild>
+                                <button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer" >
+                                    {isSubmitting ? "Loading..."
+                                        : "Create an account"}
+                                </button>
+                            </Form.Submit>
+                        </div>
+
+                    </FormLayout>
+                </div>
+            </div>
+        </div></div>
+    )
+}
+
+export default SignUpClient
\ No newline at end of file
diff --git a/front/services/auth/auth.ts b/front/services/auth/auth.ts
index 45a2ecb1..d09a6746 100644
--- a/front/services/auth/auth.ts
+++ b/front/services/auth/auth.ts
@@ -5,14 +5,14 @@ interface LoginAndGetTokenResponse {
   token_type: "string";
 }
 
-// ⚠️ mvp phase code 
-// TODO : everything in this file need to be refactored including security issues fix 
+// ⚠️ mvp phase code
+// TODO : everything in this file need to be refactored including security issues fix
 
 export async function loginAndGetToken(username: string, password: string): Promise<any> {
   // Request Config
 
-  // get origin 
-  const HeadersConfig = new Headers({ "Content-Type": "application/x-www-form-urlencoded"  });
+  // get origin
+  const HeadersConfig = new Headers({ "Content-Type": "application/x-www-form-urlencoded" });
   const urlencoded = new URLSearchParams({ username: username, password: password });
 
   const requestOptions: any = {
@@ -21,7 +21,7 @@ export async function loginAndGetToken(username: string, password: string): Prom
     body: urlencoded,
     redirect: "follow",
     credentials: "include",
-  };  
+  };
 
   // fetch using await and async
   const response = await fetch(`${getAPIUrl()}auth/login`, requestOptions);
@@ -30,7 +30,7 @@ export async function loginAndGetToken(username: string, password: string): Prom
 
 export async function getUserInfo(token: string): Promise<any> {
   const origin = window.location.origin;
-  const HeadersConfig = new Headers({ Authorization: `Bearer ${token}`, Origin:origin });
+  const HeadersConfig = new Headers({ Authorization: `Bearer ${token}`, Origin: origin });
 
   const requestOptions: any = {
     method: "GET",
@@ -67,7 +67,7 @@ interface NewAccountBody {
 
 export async function signup(body: NewAccountBody): Promise<any> {
   const HeadersConfig = new Headers({ "Content-Type": "application/json" });
-  
+
   const requestOptions: any = {
     method: "POST",
     headers: HeadersConfig,
@@ -75,9 +75,6 @@ export async function signup(body: NewAccountBody): Promise<any> {
     redirect: "follow",
   };
 
-  return fetch(`${getAPIUrl()}users/?org_slug=${body.org_slug}`, requestOptions)
-    .then((result) => result.json())
-    .catch((error) => console.log("error", error));
+  const res = await fetch(`${getAPIUrl()}users/?org_slug=${body.org_slug}`, requestOptions);
+  return res;
 }
-
-