diff --git a/frontend/pages/app/create-account.vue b/frontend/pages/app/create-account.vue
index 31a76e77..5b83aa18 100644
--- a/frontend/pages/app/create-account.vue
+++ b/frontend/pages/app/create-account.vue
@@ -2,8 +2,172 @@
 definePageMeta({
   layout: "auth-layout",
 });
+
+// user inputs
+const firstName =ref('')
+const lastName =ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const birthDate = ref('')
+const phoneNumberInput = ref('')
+const phoneNumber = ref('')
+const email = ref('')
+const yearsOfExp = 0
+
+// error messages if needed
+const first_errorMessage = ref('')
+const last_errorMessage = ref('')
+const pass_errorMessage = ref('')
+const birthday_errorMessage = ref('')
+const phone_errorMessage = ref('')
+const email_errorMessage = ref('')
+
 const createAccount = () => {
-  useRouter().push('/app')
+  pass_errorMessage.value = ''
+  birthday_errorMessage.value = ''
+  phone_errorMessage.value = ''
+  email_errorMessage.value = ''
+
+  const isFirstValid = validateFirst()
+  const isLastValid = validateLast()
+  const isPasswordValid = validatePassword()
+  const isPhoneValid = validatePhone()
+  const isBirthdayValid = validateBirthday()
+  const isEmailValid = validateEmail()
+
+  if (isPasswordValid && isPhoneValid && isBirthdayValid && isEmailValid) {
+    // All validations passed
+
+    //TODO: figure out backend post requests and reroute user to login page
+    // useRouter().push('/app')
+  }
+}
+function validateFirst(){
+if(firstName.value == ''){
+  first_errorMessage.value = 'Please enter your first name!'
+}
+  
+}
+function validateLast(){
+  if(lastName.value == ''){
+  first_errorMessage.value = 'Please enter your last name!'
+}
+}
+
+function validatePassword() {
+  if (password.value !== confirmPassword.value) {
+    pass_errorMessage.value = "Your password doesn't match!"
+    return false
+  }
+  if (password.value.length < 8) {
+    pass_errorMessage.value = "Your password must be at least 8 characters long!"
+    return false
+  }
+
+  const specialCharacters = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '=', '+', '{', '}', '[', ']', '|', '\\', ':', ';', '"', "'", '<', '>', ',', '.', '/']
+  const specialChar = password.value.split('').some(char => specialCharacters.includes(char))
+  
+  if (!specialChar) {
+    pass_errorMessage.value = "Your password must contain a special character!"
+    return false
+  }
+
+  return true
+}
+
+function validatePhone() {
+  phoneNumber.value = ''
+  phone_errorMessage.value = ''
+
+  const charCodeZero = '0'.charCodeAt(0)
+  const charCodeNine = '9'.charCodeAt(0)
+
+  for (let i = 0; i < phoneNumberInput.value.length; i++) {
+    const char = phoneNumberInput.value[i]
+    if (char.charCodeAt(0) >= charCodeZero && char.charCodeAt(0) <= charCodeNine) {
+      phoneNumber.value += char
+    }
+  }
+  
+  if (phoneNumber.value.length !== 10) {
+    phone_errorMessage.value = "The phone number you entered is invalid!"
+    return false
+  }
+
+  return true
+}
+
+function validateBirthday() {
+  birthday_errorMessage.value = ''
+  if (birthDate.value === '') {
+    birthday_errorMessage.value = 'Please enter your birthday!'
+    return false
+  } 
+
+  const [year, month, day] = birthDate.value.split('-').map(part => parseInt(part, 10))
+  const currentDate = new Date()
+  const currentYear = currentDate.getFullYear()
+  const currentMonth = currentDate.getMonth() + 1
+  const currentDay = currentDate.getDate()
+  
+  if (year > currentYear || (year === currentYear && (month > currentMonth || (month === currentMonth && day > currentDay)))) {
+    birthday_errorMessage.value = 'Invalid birthday entered!'
+    return false
+  }
+
+  if(isUnderage()){
+    birthday_errorMessage.value = 'Sorry! You must be 18 years or older to play!'
+  }
+
+  return true
+}
+
+function isUnderage() {
+  const [year, month, day] = birthDate.value.split('-').map(part => parseInt(part, 10))
+  const currentDate = new Date()
+  const birthDateObj = new Date(year, month - 1, day)
+  const age = currentDate.getFullYear() - birthDateObj.getFullYear()
+  const monthDiff = currentDate.getMonth() - birthDateObj.getMonth()
+  const dayDiff = currentDate.getDate() - birthDateObj.getDate()
+
+  if(age > 18){ 
+    return false
+  }
+
+  console.log(age+" "+monthDiff+" "+dayDiff)
+  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+    return age - 1 < 18
+  }
+
+  return false
+}
+
+function validateEmail() {
+  email_errorMessage.value = ''
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailPattern.test(email.value)|| !email.value.endsWith(".com")) {
+    email_errorMessage.value = 'Invalid email!'
+    return false
+  }
+  return true
+}
+
+function validateIsAlphaOnly() {
+    first_errorMessage.value = ''
+    last_errorMessage.value = ''
+    
+      const regex = /^[A-Za-z]+$/
+      if (!regex.test(firstName.value)&& firstName.value != '') {
+        first_errorMessage.value= 'Name can only contain letters!'
+      }
+      if (!regex.test(lastName.value) && lastName.value != '') {
+        last_errorMessage.value= 'Name can only contain letters!'
+      }
+    }
+
+function validateYearsOfExp(){
+  //TODO: Validate Years of experience ei) not negative or decimal numbers
+
 }
 </script>
 
@@ -13,31 +177,49 @@ const createAccount = () => {
   <div class="vstack gap-3">
     <div>
       <label for="first-name" class="form-label">First Name</label>
-      <input if="first-name" class="form-control" />
+      <input id="first-name" class="form-control" @input="validateIsAlphaOnly" v-model="firstName" />
+    </div>
+    <div v-if="first_errorMessage" class="alert alert-danger">
+      <p>{{ first_errorMessage }}</p>
     </div>
     <div>
       <label for="last-name" class="form-label">Last Name</label>
-      <input id="last-name" class="form-control" />
+      <input id="last-name" class="form-control" @input="validateIsAlphaOnly" v-model="lastName"/>
+    </div>
+    <div v-if="last_errorMessage" class="alert alert-danger">
+      <p>{{ last_errorMessage }}</p>
     </div>
     <div>
       <label for="email" class="form-label">Email</label>
-      <input id="email" class="form-control" type="email" />
+      <input id="email" class="form-control" type="email" v-model="email"/>
+    </div>
+    <div v-if="email_errorMessage" class="alert alert-danger">
+      <p>{{ email_errorMessage }}</p>
     </div>
     <div>
       <label for="password" class="form-label">Password</label>
-      <input id="password" class="form-control" type="password" />
+      <input id="password" class="form-control" type="password" v-model="password"/>
     </div>
     <div>
       <label for="confirm-password" class="form-label">Confirm Password</label>
-      <input id="confirm-password" class="form-control" type="password" />
+      <input id="confirm-password" class="form-control" type="password" v-model="confirmPassword"/>
+    </div>
+    <div v-if="pass_errorMessage" class="alert alert-danger">
+      <p>{{ pass_errorMessage }}</p>
     </div>
     <div>
       <label for="phone-number" class="form-label">Phone Number</label>
-      <input id="phone-number" class="form-control" type="text" />
+      <input id="phone-number" class="form-control" type="text" v-model="phoneNumberInput"/>
+    </div>
+    <div v-if="phone_errorMessage" class="alert alert-danger">
+      <p>{{ phone_errorMessage }}</p>
     </div>
     <div>
       <label for="birth-date" class="form-label">Birth Date</label>
-      <input id="birth-date" class="form-control" type="date" />
+      <input id="birth-date" class="form-control" type="date" v-model="birthDate" />
+    </div>
+    <div v-if="birthday_errorMessage" class="alert alert-danger">
+      <p>{{ birthday_errorMessage }}</p>
     </div>
     <div>
       <label for="experience" class="form-label">Years of Experience</label>
@@ -57,4 +239,4 @@ const createAccount = () => {
       <NuxtLink to="/app/sign-in" class="btn btn-link">Sign In</NuxtLink>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/site/cypress/e2e/createUser.cy.ts b/site/cypress/e2e/createUser.cy.ts
new file mode 100644
index 00000000..fc1f1faf
--- /dev/null
+++ b/site/cypress/e2e/createUser.cy.ts
@@ -0,0 +1,57 @@
+export {}
+
+describe('template spec', () => {
+  it('Check page exists', () => {
+    cy.visit('http://localhost:9000/#/create-user')
+  })
+
+  it('Check valid input fields', () => {
+    cy.visit('http://localhost:9000/#/create-user')
+
+    cy.get('.input-first').type('John')
+    cy.get('.input-last').type('Smith')
+    cy.get('.input-email').type('johnsmith@gmail.com')
+    cy.get('.input-password').type('123456789!')
+    cy.get('.input-confirm-password').type('123456789!')
+    cy.get('.input-phone').type('(123) 435-1111')
+    cy.get('.input-birthday').type('2000-01-01')
+    cy.get('.input-exp').type('4')
+    cy.get('.input-level').click();
+
+    // Select an option from the dropdown
+    cy.get('.q-menu .q-item')
+      .contains('High School') // Replace 'Option Text' with the text of the option you want to select
+      .click();
+
+    // Verify the selected value
+    cy.get('.input-level').should('contain', 'High School'); // Ensure the correct value is displayed
+  })
+
+
+
+  it('Check valid invalid input fields', () => {
+    cy.visit('http://localhost:9000/#/create-user')
+
+    cy.get('.input-first').type('John1')
+    cy.get('#first-error').should('be.visible');
+    cy.get('.input-last').type('Smith1')
+    cy.get('#last-error').should('be.visible');
+
+    cy.get('.input-email').type('johnsmith@gmail')
+    cy.get('.input-password').type('123456789!')
+    cy.get('.input-confirm-password').type('1234')
+    cy.get('.input-phone').type('435-1111')
+    cy.get('.input-birthday').type('2047-01-01')
+
+    cy.get('#submitButton').click()
+    cy.get('#phone-error').should('be.visible');
+    cy.get('#password-error').should('be.visible');
+    cy.get('#birthday-error').should('be.visible');
+    cy.get('#exp-error').should('be.visible');
+    cy.get('#level-error').should('be.visible');
+
+  })
+
+
+
+})
\ No newline at end of file
diff --git a/site/src/pages/createUser.vue b/site/src/pages/createUser.vue
new file mode 100644
index 00000000..6a9fb8b1
--- /dev/null
+++ b/site/src/pages/createUser.vue
@@ -0,0 +1,349 @@
+<script lang="ts" setup>
+import {ref} from 'vue'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+
+
+const options = ref([
+      'Youth League', 'High School', 'Adult League Only', 'College or Higher'
+      ])
+
+const isPwd = ref(true)
+const isConPwd = ref(true)
+
+const router = useRouter()
+
+// user inputs
+const levelPlayed = ref('')
+const firstName =ref('')
+const lastName =ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const birthDate = ref('')
+const phoneNumberInput = ref('')
+const phoneNumber = ref('')
+const email = ref('')
+const experience = ref('')
+
+// error messages if needed
+const first_errorMessage = ref('')
+const last_errorMessage = ref('')
+const pass_errorMessage = ref('')
+const birthday_errorMessage = ref('')
+const phone_errorMessage = ref('')
+const email_errorMessage = ref('')
+const option_errorMessage = ref('')
+const experience_errorMessage = ref('')
+const api_errorMessage = ref('')
+
+const createAccount = () => {
+  pass_errorMessage.value = ''
+  birthday_errorMessage.value = ''
+  phone_errorMessage.value = ''
+  email_errorMessage.value = ''
+
+  const isFirstValid = validateFirst()
+  const isLastValid = validateLast()
+  const isPasswordValid = validatePassword()
+  const isPhoneValid = validatePhone()
+  const isBirthdayValid = validateBirthday()
+  const isEmailValid = validateEmail()
+  const isExpValid = validateYearsOfExp()
+  const isOptionValid = validateOption()
+  
+  api_errorMessage.value = ''
+  if (isPasswordValid && isPhoneValid && isBirthdayValid && isEmailValid && isLastValid && isFirstValid && isExpValid && isOptionValid) {
+      makePostRequest()
+    }
+  }
+
+  //Makes api request in dev mode
+
+  //As of right now you need to set line 62
+  //AllowOrigins:     "http://localhost:9000"
+  //inside manager.go
+  //located here: powerplay/backend/internal/middleware/manager.go 
+  async function makePostRequest() {
+  try {
+    const dateFromString = new Date(birthDate.value);
+    let myNumber: number = +levelPlayed.value;
+    const response = await axios.post('http://localhost:9002/api/v1/user', {
+      first_name: firstName.value,
+      last_name: lastName.value,
+      password: password.value,
+      email: email.value,
+      phone: phoneNumber.value,
+      skill_level: myNumber,
+      date_of_birth: dateFromString
+    })
+    
+    console.log(response.data)
+
+    //Redirect to index page for now
+    reRoute()
+
+  } catch (error) {
+    
+    api_errorMessage.value = 'Something went wrong. Please try again later!'
+    console.error('There was an error making the POST request!', error)
+  }
+}
+
+function reRoute(){
+  router.push({ path: '/' }).then(() => {
+    router.go(0)
+  })
+}
+//Validate user input
+
+function validateFirst(){
+if(firstName.value == ''){
+  first_errorMessage.value = 'Please enter your first name!'
+  return false
+}
+return true
+  
+}
+function validateLast(){
+  if(lastName.value == ''){
+  last_errorMessage.value = 'Please enter your last name!'
+  return false
+}
+return true
+}
+
+// Must be 8 chacters long, match confirm password field, and contain a special character
+
+function validatePassword() {
+  if (password.value !== confirmPassword.value) {
+    pass_errorMessage.value = 'Your passwords do not match!'
+    return false
+  }
+  if (password.value.length < 8) {
+    pass_errorMessage.value = 'Your password must be at least 8 characters long!'
+    return false
+  }
+
+  const specialCharacters = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '=', '+', '{', '}', '[', ']', '|', '\\', ':', ';', '"', "'", '<', '>', ',', '.', '/']
+  const specialChar = password.value.split('').some(char => specialCharacters.includes(char))
+  
+  if (!specialChar) {
+    pass_errorMessage.value = 'Your password must contain a special character!'
+    return false
+  }
+
+  return true
+}
+// accepts any format as long as 10 digits are present.
+function validatePhone() {
+  phoneNumber.value = ''
+  phone_errorMessage.value = ''
+
+  const charCodeZero = '0'.charCodeAt(0)
+  const charCodeNine = '9'.charCodeAt(0)
+
+  for (let i = 0; i < phoneNumberInput.value.length; i++) {
+    const char = phoneNumberInput.value[i]
+    if (char.charCodeAt(0) >= charCodeZero && char.charCodeAt(0) <= charCodeNine) {
+      phoneNumber.value += char
+    }
+  }
+  
+  if (phoneNumber.value.length !== 10) {
+    phone_errorMessage.value = 'The phone number you entered is invalid!'
+    return false
+  }
+
+  return true
+}
+
+function validateBirthday() {
+  birthday_errorMessage.value = ''
+  if (birthDate.value === '') {
+    birthday_errorMessage.value = 'Please enter your birthday!'
+    return false
+  } 
+
+  const [year, month, day] = birthDate.value.split('-').map(part => parseInt(part, 10))
+  const currentDate = new Date()
+  const currentYear = currentDate.getFullYear()
+  const currentMonth = currentDate.getMonth() + 1
+  const currentDay = currentDate.getDate()
+  
+  if (year > currentYear || (year === currentYear && (month > currentMonth || (month === currentMonth && day > currentDay)))) {
+    birthday_errorMessage.value = 'Invalid birthday entered!'
+    return false
+  }
+
+  if(isUnderage()){
+    birthday_errorMessage.value = 'Sorry! You must be 18 years or older to play!'
+  }
+
+  return true
+}
+
+//Must be 18+ to play
+function isUnderage() {
+  const [year, month, day] = birthDate.value.split('-').map(part => parseInt(part, 10))
+  const currentDate = new Date()
+  const birthDateObj = new Date(year, month - 1, day)
+  const age = currentDate.getFullYear() - birthDateObj.getFullYear()
+  const monthDiff = currentDate.getMonth() - birthDateObj.getMonth()
+  const dayDiff = currentDate.getDate() - birthDateObj.getDate()
+
+  if(age > 18){ 
+    return false
+  }
+
+  console.log(age+' '+monthDiff+' '+dayDiff)
+  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+    return age - 1 < 18
+  }
+
+  return false
+}
+
+function validateEmail() {
+  email_errorMessage.value = ''
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailPattern.test(email.value)|| !email.value.endsWith('.com')) {
+    email_errorMessage.value = 'Invalid email!'
+    return false
+  }
+  return true
+}
+
+//Validates only alphabetical character are inputted. Activate after each keystroke
+function validateIsAlphaOnly() {
+    first_errorMessage.value = ''
+    last_errorMessage.value = ''
+    
+      const regex = /^[A-Za-z]+$/
+      if (!regex.test(firstName.value)&& firstName.value != '') {
+        first_errorMessage.value= 'Name can only contain letters!'
+      }
+      if (!regex.test(lastName.value) && lastName.value != '') {
+        last_errorMessage.value= 'Name can only contain letters!'
+      }
+    }
+
+function validateYearsOfExp(){
+  experience_errorMessage.value = ''
+  if(experience.value == '') {
+    experience_errorMessage.value = 'Please enter years of experience!'
+    return false
+  }
+  return true
+}
+
+function validateOption(){
+  option_errorMessage.value = ''
+  if(levelPlayed.value == '') {
+    option_errorMessage.value = 'Please select level of experience!'
+    return false
+  }
+  return true
+}
+</script>
+
+<!--Page code-->
+<template>
+  <q-card class="my-card white text-black" style="margin-left:20%; margin-right:20%; margin-top:5%; margin-bottom:5%;">
+    <q-card-section align="middle">
+      <div class="text-h6"><h3>Create an Account</h3></div>
+
+      <!-- First Name -->  
+      <div class="q-mt-md">
+        <q-input filled v-model="firstName" label="First Name" @keyup="validateIsAlphaOnly" class='input-first'/>
+        <q-banner v-if="first_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id="first-error">
+          <p>{{ first_errorMessage }}</p>
+        </q-banner>
+      </div>
+      
+      <!-- Last Name -->  
+      <div class="q-mt-md">
+        <q-input filled v-model="lastName" label="Last Name" @keyup="validateIsAlphaOnly" class="input-last"/>
+        <q-banner v-if="last_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id='last-error'>
+          <p>{{ last_errorMessage }}</p>
+        </q-banner>
+      </div>
+      
+      <!-- Email -->   
+      <div class="q-mt-md">
+        <q-input filled v-model="email" label="Email" @input="validateIsAlphaOnly" class='input-email'/>
+        <q-banner v-if="email_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id="email-error">
+          <p>{{ email_errorMessage }}</p>
+        </q-banner>
+      </div>
+      
+      <!-- Password -->
+      <div class="q-mt-md">
+        <q-input v-model="password" filled :type="isPwd ? 'password' : 'text'" label="Password" class='input-password'>
+          <template v-slot:append>
+            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
+          </template>
+        </q-input>
+      </div>
+      
+      <div class="q-mt-md">
+        <q-input v-model="confirmPassword" filled :type="isConPwd ? 'password' : 'text'" label="Confirm password" class="input-confirm-password">
+          <template v-slot:append>
+            <q-icon :name="isConPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isConPwd = !isConPwd" />
+          </template>
+        </q-input>
+        <q-banner v-if="pass_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id="password-error">
+          <p>{{ pass_errorMessage }}</p>
+        </q-banner>
+      </div>
+
+      <!-- Phone Number -->
+      <div class="q-mt-md">
+        <q-input filled v-model="phoneNumberInput" label="Phone Number" class="input-phone"/>
+        <q-banner v-if="phone_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id="phone-error">
+          <p>{{ phone_errorMessage }}</p>
+        </q-banner>
+      </div>
+
+      <!-- Birthday -->
+      <div class="q-mt-md">
+        <q-input filled type="date" v-model="birthDate" label="Birth Date" class="input-birthday"/>
+        <q-banner v-if="birthday_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id="birthday-error">
+          <p>{{ birthday_errorMessage }}</p>
+        </q-banner>
+      </div>
+
+      <!-- Experience -->
+      <div class="q-mt-md">
+        <q-input
+          filled
+          v-model="experience"
+          type="number"
+          label="Years of experience"
+          :rules="[val => val >= 0 || 'The number cannot be negative']"
+          min="0"
+          class = 'input-exp'
+        />
+        <q-banner v-if="experience_errorMessage" class="text-white bg-red" style="border-radius: 4px 4px 4px 4px;" id ="exp-error">
+          <p>{{ experience_errorMessage }}</p>
+        </q-banner>
+      </div>
+      
+      <!-- Level of Play -->
+      <div class="q-mt-md">
+        <q-select filled v-model="levelPlayed" :options="options" label="Highest Level of Play" class="input-level"/>
+        <q-banner v-if="option_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id ="level-error">
+          <p>{{ option_errorMessage }}</p>
+        </q-banner>
+      </div>
+    </q-card-section>
+
+     <!-- submit -->
+    <q-card-actions align="center">
+      <q-btn label="Create Account" type="submit" color="primary" @click="createAccount" id="submitButton"/>
+    </q-card-actions>
+    <q-banner v-if="api_errorMessage" class="text-white bg-red" style="border-radius: 0px 0px 4px 4px;" id ="api-error">
+          <p>{{ api_errorMessage }}</p>
+        </q-banner>
+  </q-card>
+</template>
+
diff --git a/site/src/router/routes.ts b/site/src/router/routes.ts
index 2d34fc1c..c21cc624 100644
--- a/site/src/router/routes.ts
+++ b/site/src/router/routes.ts
@@ -4,8 +4,13 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+    children: [{ path: '', component: () => import('pages/IndexPage.vue') } // Home page
+      ,{ 
+        path: '/create-user',
+        component: () => import('pages/createUser.vue')} // Create user
+    ],
   },
+  
 
   // Always leave this as last one,
   // but you can also remove it