diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..c752985
Binary files /dev/null and b/.DS_Store differ
diff --git a/packages/.DS_Store b/packages/.DS_Store
new file mode 100644
index 0000000..0bf0f67
Binary files /dev/null and b/packages/.DS_Store differ
diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore
index a547bf3..288bdc5 100644
--- a/packages/frontend/.gitignore
+++ b/packages/frontend/.gitignore
@@ -17,8 +17,10 @@ dist-ssr
 !.vscode/extensions.json
 .idea
 .DS_Store
+**/.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
index d54b5d9..43fd993 100644
--- a/packages/frontend/package-lock.json
+++ b/packages/frontend/package-lock.json
@@ -8,8 +8,10 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0",
         "zustand": "^5.0.0"
       },
@@ -1682,6 +1684,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3011,6 +3021,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.27.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 552fef2..47f69b4 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
     "zustand": "^5.0.0"
   },
diff --git a/packages/frontend/src/lib/Button.tsx b/packages/frontend/src/lib/Button.tsx
new file mode 100644
index 0000000..d798717
--- /dev/null
+++ b/packages/frontend/src/lib/Button.tsx
@@ -0,0 +1,26 @@
+import clsx from "clsx";
+
+type ButtonProps = {
+  isDisabled?: boolean;
+  className?: string;
+};
+
+function Button({ isDisabled, className }: ButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={isDisabled}
+      className={clsx(
+        "rounded-[8px] bg-yellow-dark-4 py-[1rem] text-center  text-yellow-dark-11 shadow-md transition duration-100 ease-in-out hover:bg-yellow-dark-5 ",
+        {
+          "cursor-not-allowed opacity-60": isDisabled,
+        },
+        className
+      )}
+    >
+      Submit
+    </button>
+  );
+}
+
+export default Button;
diff --git a/packages/frontend/src/lib/Input.tsx b/packages/frontend/src/lib/Input.tsx
new file mode 100644
index 0000000..8470c36
--- /dev/null
+++ b/packages/frontend/src/lib/Input.tsx
@@ -0,0 +1,149 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+interface InputProps {
+  type?: "text" | "email" | "textarea" | "password";
+  value: string;
+  onChange?: (value: string) => void;
+  label: string;
+  readOnly?: boolean;
+  name: string;
+  isRequired: boolean;
+  minLength?: number;
+  maxLength?: number;
+  bottomText?: string;
+  pattern?: string;
+  className?: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface IsRequiredComponentProps {
+  isRequired: boolean;
+}
+
+const Input: React.FC<InputProps> = ({
+  type = "text",
+  value: propValue = "",
+  onChange,
+  label = "Name",
+  readOnly,
+  isRequired,
+  bottomText,
+  pattern,
+  minLength,
+  maxLength,
+  error,
+  disabled,
+  className,
+  name,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = useState<string>(propValue);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  useEffect(() => {
+    setInputValue(propValue);
+  }, [propValue]);
+
+  const handleChange = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  if (type === "textarea") {
+    return (
+      <div>
+        <label
+          className="my-[.6rem] inline-block text-[1.3rem] sm:text-[1.4rem] xl:my-[1rem]"
+          htmlFor={`input-${name}`}
+        >
+          {label}
+          <IsRequiredField isRequired={isRequired} />
+        </label>
+        <textarea
+          id={`input-${name}`}
+          rows={10}
+          placeholder="Describe your issue..."
+          value={inputValue}
+          minLength={minLength}
+          maxLength={maxLength}
+          onChange={handleChange}
+          {...props}
+          className={clsx(
+            "focus:border-ui-medium-blue w-full rounded-[6px] border border-ui-mid-white bg-gray-dark-1 px-[1.1rem] py-[.7rem] text-[1.3rem] outline-none placeholder:text-[1.5rem] md:text-[1.6rem]",
+            {
+              "cursor-not-allowed": disabled,
+            },
+            className
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <label
+        className="my-[.6rem] inline-block text-[1rem] xl:my-[1rem] text-white"
+        htmlFor={`input-${name}`}
+      >
+        {label}
+        <IsRequiredField isRequired={isRequired} />
+      </label>
+      <div className="relative">
+        <input
+          className={clsx(
+            "focus:border-ui-medium-blue w-full rounded-[6px] border border-ui-mid-white bg-black px-[1.1rem] py-[.4rem] text-[1rem] outline-none focus:border md:text-[1.2rem]",
+            {
+              "cursor-not-allowed": readOnly || disabled,
+            },
+            className
+          )}
+          type={showPassword && type === "password" ? "text" : type}
+          required
+          id={`input-${name}`}
+          readOnly={readOnly}
+          name={name}
+          minLength={minLength}
+          maxLength={maxLength}
+          value={inputValue}
+          pattern={pattern}
+          disabled={disabled}
+          onChange={handleChange}
+          {...props}
+        />
+
+        {type === "password" && (
+          <span
+            className="absolute right-[1.1rem] top-[50%] translate-y-[-50%] cursor-pointer"
+            onClick={togglePasswordVisibility}
+          >
+            {showPassword ? "🙈" : "👁️"}{" "}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+function IsRequiredField({ isRequired }: IsRequiredComponentProps) {
+  return (
+    <span className={clsx({ "text-yellow-dark-9": isRequired })}>
+      {isRequired ? "*" : "(Optional)"}
+    </span>
+  );
+}
+
+export default Input;
diff --git a/packages/frontend/src/lib/icons/MetamaskIcon.tsx b/packages/frontend/src/lib/icons/MetamaskIcon.tsx
new file mode 100644
index 0000000..cdfe3b5
--- /dev/null
+++ b/packages/frontend/src/lib/icons/MetamaskIcon.tsx
@@ -0,0 +1,147 @@
+import clsx from "clsx";
+import React from "react";
+
+interface MetaMaskIconProps {
+  size?: number;
+  className?: string;
+}
+
+const MetaMaskIcon: React.FC<MetaMaskIconProps> = ({
+  size = "1em",
+  className,
+}) => {
+  return (
+    <svg
+      width={`${size}`}
+      height={`${size}`}
+      viewBox="0 0 256 240"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      className={clsx(className)}
+    >
+      <title>MetaMask</title>
+      <g>
+        <polygon
+          fill="#E17726"
+          points="250.066018 0 140.218553 81.2793133 160.645643 33.3787726"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="6.19062016 0.0955267053 95.3715526 33.38465 114.767923 81.9132784"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="205.859986 172.858026 254.410647 173.782023 237.442988 231.424252 178.200429 215.112736"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="50.1391619 172.857971 77.6964289 215.11288 18.5530579 231.425317 1.68846828 173.782036"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="112.130724 69.5516472 114.115388 133.635085 54.744344 130.933905 71.6319541 105.456448 71.8456974 105.210668"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="143.254237 68.8369186 184.153999 105.213392 184.365514 105.45719 201.253537 130.934656 141.89632 133.635226"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="79.4347776 173.043957 111.853145 198.302774 74.1951401 216.484384"
+        ></polygon>
+        <polygon
+          fill="#E27625"
+          points="176.57078 173.040009 181.701672 216.484523 144.149363 198.301203"
+        ></polygon>
+        <polygon
+          fill="#D5BFB2"
+          points="144.977922 195.921642 183.084879 214.373531 147.637779 231.220354 148.005818 220.085704"
+        ></polygon>
+        <polygon
+          fill="#D5BFB2"
+          points="111.01133 195.929982 108.102093 219.90359 108.340838 231.207237 72.8105145 214.373665"
+        ></polygon>
+        <polygon
+          fill="#233447"
+          points="100.007166 141.998856 109.965172 162.926822 76.0615945 152.995277"
+        ></polygon>
+        <polygon
+          fill="#233447"
+          points="155.991579 142.000941 180.049716 152.994594 146.03608 162.923638"
+        ></polygon>
+        <polygon
+          fill="#CC6228"
+          points="82.0263962 172.830401 76.5459821 217.870023 47.1731221 173.814952"
+        ></polygon>
+        <polygon
+          fill="#CC6228"
+          points="173.976111 172.8305 208.830462 173.815081 179.347016 217.871514"
+        ></polygon>
+        <polygon
+          fill="#CC6228"
+          points="202.112267 128.387342 176.746779 154.238424 157.190334 145.301352 147.82685 164.985265 141.688645 131.136429"
+        ></polygon>
+        <polygon
+          fill="#CC6228"
+          points="53.8753865 128.386879 114.309585 131.136429 108.17138 164.985265 98.8061425 145.303856 79.3525107 154.238823"
+        ></polygon>
+        <polygon
+          fill="#E27525"
+          points="52.165606 123.082486 80.8639084 152.203386 81.8584812 180.952278"
+        ></polygon>
+        <polygon
+          fill="#E27525"
+          points="203.863346 123.029784 174.117491 181.003017 175.237428 152.202737"
+        ></polygon>
+        <polygon
+          fill="#E27525"
+          points="112.906762 124.855691 114.061658 132.125682 116.915771 150.236518 115.080954 205.861884 106.405804 161.177486 106.402953 160.71542"
+        ></polygon>
+        <polygon
+          fill="#E27525"
+          points="143.077997 124.755417 149.599051 160.715451 149.596194 161.177486 140.899333 205.973714 140.55515 194.76913 139.198167 149.907127"
+        ></polygon>
+        <polygon
+          fill="#F5841F"
+          points="177.788479 151.045975 176.81718 176.023897 146.543342 199.61119 140.4233 195.28712 147.283427 159.951634"
+        ></polygon>
+        <polygon
+          fill="#F5841F"
+          points="78.3167053 151.046455 108.716464 159.952427 115.576437 195.28712 109.456385 199.611197 79.1807344 176.021881"
+        ></polygon>
+        <polygon
+          fill="#C0AC9D"
+          points="67.0180978 208.857597 105.750143 227.209502 105.586194 219.372868 108.826835 216.528328 147.160694 216.528328 150.518758 219.363342 150.271375 227.194477 188.757733 208.903978 170.030292 224.379509 147.384611 239.933315 108.516484 239.933315 85.8855503 224.315941"
+        ></polygon>
+        <polygon
+          fill="#161616"
+          points="142.203502 193.479367 147.679764 197.347701 150.888964 222.952494 146.244706 219.030957 109.769299 219.030957 105.213447 223.031398 108.317268 197.349663 113.795429 193.479367"
+        ></polygon>
+        <polygon
+          fill="#763E1A"
+          points="242.814251 2.24978946 256 41.8072765 247.765337 81.803692 253.629038 86.3274221 245.694407 92.3812097 251.657525 96.9865879 243.761206 104.178247 248.609106 107.688972 235.743366 122.714803 182.973386 107.350364 182.516079 107.105244 144.488982 75.0267414"
+        ></polygon>
+        <polygon
+          fill="#763E1A"
+          points="13.1860054 2.24978557 111.51151 75.0267402 73.4844118 107.105244 73.0271023 107.350365 20.2567388 122.714804 7.39121291 107.688927 12.2352706 104.180751 4.34251001 96.9865923 10.2945566 92.3862179 2.24133703 86.315099 8.32629691 81.7886671 0 41.8087534"
+        ></polygon>
+        <polygon
+          fill="#F5841F"
+          points="180.391638 103.990363 236.304873 120.269177 254.470245 176.254719 206.546445 176.25462 173.525532 176.671282 197.539657 129.863284"
+        ></polygon>
+        <polygon
+          fill="#F5841F"
+          points="75.6080363 103.990376 58.4568191 129.863284 82.4741865 176.671282 49.4693913 176.254719 1.63053271 176.254719 19.6938968 120.269548"
+        ></polygon>
+        <polygon
+          fill="#F5841F"
+          points="163.383898 33.1117385 147.744691 75.3505047 144.425852 132.411352 143.155934 150.295986 143.055195 195.983514 112.943788 195.983514 112.846176 150.381702 111.572114 132.395585 108.251786 75.3505047 92.6150854 33.1117385"
+        ></polygon>
+      </g>
+    </svg>
+  );
+};
+
+export default MetaMaskIcon;
diff --git a/packages/frontend/src/routes/Routes.tsx b/packages/frontend/src/routes/Routes.tsx
index 2b80201..eb78011 100644
--- a/packages/frontend/src/routes/Routes.tsx
+++ b/packages/frontend/src/routes/Routes.tsx
@@ -3,12 +3,14 @@ import Home from "./home";
 import Login from "./login";
 import DashboardHome from "./dashboard/home";
 import Projects from "./dashboard/projects";
+import SignUp from "./signup";
 
 export default function Routes() {
   return (
     <BaseRoutes>
       <Route path="/" element={<Home />} />
       <Route path="/login" element={<Login />} />
+      <Route path="/signup" element={<SignUp />} />
       <Route path="/dashboard">
         <Route index element={<DashboardHome />} />
         <Route path="projects" element={<Projects />} />
diff --git a/packages/frontend/src/routes/login/index.tsx b/packages/frontend/src/routes/login/index.tsx
index 846a073..8efc333 100644
--- a/packages/frontend/src/routes/login/index.tsx
+++ b/packages/frontend/src/routes/login/index.tsx
@@ -1,7 +1,142 @@
-import React from "react";
+import { FormEvent, useState } from "react";
+import Navbar from "../../lib/navbar";
+import Input from "../../lib/Input";
+import { emailRegex } from "../../utils/utils";
+import Button from "../../lib/Button";
+import { FaGoogle, FaGithub } from "react-icons/fa";
+import MetaMaskIcon from "../../lib/icons/MetamaskIcon";
+
+export type FormValuesType = {
+  email: string;
+  password: string;
+};
+const defaultFormValues = {
+  email: "",
+  password: "",
+};
 
 function Login() {
-  return <div>index</div>;
+  const [formValues, setFormValues] = useState<FormValuesType>({
+    ...defaultFormValues,
+  });
+
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(true);
+
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    // await submitForm(formValues, resetFormValues);
+  };
+
+  const handleInputChange = (name: string, value: string) => {
+    setFormValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+
+    if (name === "comment") {
+      const shouldBeDisabled = value.trim().length < 30;
+
+      if (shouldBeDisabled !== isButtonDisabled) {
+        setIsButtonDisabled(shouldBeDisabled);
+      }
+    }
+  };
+
+  const handleGoogleSignIn = () => {
+    // Implement Google sign-in logic here
+    console.log("Google sign-in clicked");
+  };
+
+  const handleGitHubSignIn = () => {
+    // Implement GitHub sign-in logic here
+    console.log("GitHub sign-in clicked");
+  };
+
+  const handleMetaMaskSignIn = () => {
+    // Implement MetaMask sign-in logic here
+    console.log("MetaMask sign-in clicked");
+  };
+
+  return (
+    <div>
+      <Navbar />
+      <div className=" bg-black justify-center items-center flex min-h-screen">
+        <form
+          onSubmit={handleFormSubmit}
+          className="mt-[70px] mx-auto  w-[90%] max-w-[768px] lg:w-[70%] xl:w-[65%]"
+        >
+          <div className="rounded-[8px] border border-[#313538] px-[2.5rem] py-[3rem] md:px-[4rem]">
+            <div className="my-[.6rem] lg:mt-[1.3rem]  text-white text-[15px]">
+              <Input
+                type="email"
+                name="email"
+                value={formValues.email}
+                isRequired
+                pattern={`${emailRegex}`}
+                onChange={(value) => handleInputChange("email", value)}
+                label="Email address"
+              />
+            </div>
+            <div className="my-[.6rem] lg:my-[1.3rem]  text-white text-[15px]">
+              <Input
+                type="password"
+                name="password"
+                value={formValues.password}
+                isRequired
+                minLength={8}
+                maxLength={16}
+                onChange={(value) => handleInputChange("password", value)}
+                label="Password"
+              />
+            </div>
+
+            <Button className="w-full text-[1rem] my-[.8rem]" />
+
+            <div className="text-center text-white my-5">
+              <span>or</span>
+            </div>
+
+            <div className="flex flex-col space-y-4">
+              <button
+                type="button"
+                onClick={handleGoogleSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+              >
+                <FaGoogle className="mr-2" />
+                Sign in with Google
+              </button>
+              <button
+                type="button"
+                onClick={handleGitHubSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-gray-800 rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+              >
+                <FaGithub className="mr-2" />
+                Sign in with GitHub
+              </button>
+              <button
+                type="button"
+                onClick={handleMetaMaskSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-orange-500 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
+              >
+                <MetaMaskIcon className="mr-2" />
+                Sign in with MetaMask
+              </button>
+            </div>
+
+            <div className="my-[.8rem] text-white text-[15px] text-center">
+              <span>
+                Don't have an account?{" "}
+                <a href="/signup/" className="text-yellow-dark-9">
+                  Sign Up
+                </a>
+              </span>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }
 
 export default Login;
diff --git a/packages/frontend/src/routes/signup/index.tsx b/packages/frontend/src/routes/signup/index.tsx
new file mode 100644
index 0000000..5616997
--- /dev/null
+++ b/packages/frontend/src/routes/signup/index.tsx
@@ -0,0 +1,142 @@
+import { FormEvent, useState } from "react";
+import Navbar from "../../lib/navbar";
+import Input from "../../lib/Input";
+import { emailRegex } from "../../utils/utils";
+import Button from "../../lib/Button";
+import { FaGoogle, FaGithub } from "react-icons/fa";
+import MetaMaskIcon from "../../lib/icons/MetamaskIcon";
+
+export type FormValuesType = {
+  email: string;
+  password: string;
+};
+const defaultFormValues = {
+  email: "",
+  password: "",
+};
+
+function SignUp() {
+  const [formValues, setFormValues] = useState<FormValuesType>({
+    ...defaultFormValues,
+  });
+
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(true);
+
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    // await submitForm(formValues, resetFormValues);
+  };
+
+  const handleInputChange = (name: string, value: string) => {
+    setFormValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+
+    if (name === "comment") {
+      const shouldBeDisabled = value.trim().length < 30;
+
+      if (shouldBeDisabled !== isButtonDisabled) {
+        setIsButtonDisabled(shouldBeDisabled);
+      }
+    }
+  };
+
+  const handleGoogleSignIn = () => {
+    // Implement Google sign-in logic here
+    console.log("Google sign-in clicked");
+  };
+
+  const handleGitHubSignIn = () => {
+    // Implement GitHub sign-in logic here
+    console.log("GitHub sign-in clicked");
+  };
+
+  const handleMetaMaskSignIn = () => {
+    // Implement MetaMask sign-in logic here
+    console.log("MetaMask sign-in clicked");
+  };
+
+  return (
+    <div>
+      <Navbar />
+      <div className=" bg-black justify-center items-center flex min-h-screen">
+        <form
+          onSubmit={handleFormSubmit}
+          className="mt-[70px] mx-auto  w-[90%] max-w-[768px] lg:w-[70%] xl:w-[65%]"
+        >
+          <div className="rounded-[8px] border border-[#313538] px-[2.5rem] py-[3rem] md:px-[4rem]">
+            <div className="flex flex-col space-y-4">
+              <button
+                type="button"
+                onClick={handleGoogleSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+              >
+                <FaGoogle className="mr-2" />
+                Sign up with Google
+              </button>
+              <button
+                type="button"
+                onClick={handleGitHubSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-gray-800 rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+              >
+                <FaGithub className="mr-2" />
+                Sign up with GitHub
+              </button>
+              <button
+                type="button"
+                onClick={handleMetaMaskSignIn}
+                className="flex items-center justify-center w-full px-4 py-2 text-white bg-orange-500 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
+              >
+                <MetaMaskIcon className="mr-2" />
+                Sign up with MetaMask
+              </button>
+            </div>
+
+            <div className="text-center text-white my-5">
+              <span>or</span>
+            </div>
+
+            <div className="my-[.6rem] text-white text-[15px]">
+              <Input
+                type="email"
+                name="email"
+                value={formValues.email}
+                isRequired
+                pattern={`${emailRegex}`}
+                onChange={(value) => handleInputChange("email", value)}
+                label="Email address"
+              />
+            </div>
+            <div className="my-[.6rem] text-white text-[15px]">
+              <Input
+                type="password"
+                name="password"
+                value={formValues.password}
+                isRequired
+                minLength={8}
+                maxLength={16}
+                onChange={(value) => handleInputChange("password", value)}
+                label="Password"
+              />
+            </div>
+
+            <Button className="w-full text-[1rem] my-[.8rem]" />
+
+            <div className="my-[.8rem] text-white text-[15px] text-center">
+              <span>
+                Already have an account?{" "}
+                <a href="/login/" className="text-yellow-dark-9">
+                  Log In
+                </a>
+              </span>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default SignUp;
diff --git a/packages/frontend/src/utils/utils.ts b/packages/frontend/src/utils/utils.ts
new file mode 100644
index 0000000..763ae08
--- /dev/null
+++ b/packages/frontend/src/utils/utils.ts
@@ -0,0 +1,2 @@
+export const emailRegex =
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 2157c2e..c8f5ae6 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -1,4 +1,22 @@
 /** @type {import('tailwindcss').Config} */
+
+export const colors = {
+  "ui-mid-white": "#313538",
+  "yellow-dark-9": "#FFE629",
+  "yellow-dark-1": "#14120B",
+  "yellow-dark-2": "#1B180F",
+  "yellow-dark-3": "#2D2305",
+  "yellow-dark-4": "#362B00",
+  "yellow-dark-5": "#433500",
+  "yellow-dark-6": "#524202",
+  "yellow-dark-7": "#665417",
+  "yellow-dark-8": "#836A21",
+  "yellow-dark-9": "#FFE629",
+  "yellow-dark-10": "#FFFF57",
+  "yellow-dark-11": "#F5E147",
+  "yellow-dark-12": "#F6EEB4",
+};
+
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
@@ -9,6 +27,7 @@ export default {
           "100%": { transform: "translateY(0)", opacity: 1 },
         },
       },
+      colors,
       animation: {
         slideUp: "slideUp 0.5s ease-out",
       },