diff --git a/frontend/src/components/login/SignUp.vue b/frontend/src/components/login/SignUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..499aef0fa7e819d3ae6584c59457db6d44a38d03
--- /dev/null
+++ b/frontend/src/components/login/SignUp.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+      <md-card class="md-layout-item md-size-50 md-small-size-100">
+          <md-card-header>
+              <div class="md-title"> Sign Up</div>
+          </md-card-header>
+
+          <md-card-content>
+              <md-field>
+                  <label for="name">Name</label>
+                  <md-input name="name" v-model="user.name" />
+              </md-field>
+
+              <md-field>
+                  <label for="id">ID</label>
+                  <md-input name="id" v-model="user.id" />
+              </md-field>
+
+              <md-field :md-toggle-password="true">
+                  <label for="password">Password</label>
+                  <md-input name="password" v-model="user.password" type="password"/>
+              </md-field>
+
+              <md-field>
+                  <label for="email">Email</label>
+                  <md-input name="email" v-model="user.email" />
+              </md-field>  
+          </md-card-content>
+
+          <md-card-actions>
+              <md-button class="md-raised md-primary" v-on:click="signUp">Sign Up</md-button>
+          </md-card-actions>
+      </md-card>
+  </div>
+</template>
+
+<style>
+
+.md-card {
+  margin: auto;
+}
+
+.md-primary {
+  background-color: blue;
+  color:white;
+}
+</style>
+
+<script>
+import Vue from 'vue'
+
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
+Vue.use(VueMaterial)
+
+// import {MdField, MdButton, MdCard, MdInput} from 'vue-material/dist/components'
+// import 'vue-material/dist/vue-material.min.css'
+// import 'vue-material/dist/theme/default.css'
+
+// Vue.use(MdField)
+// Vue.use(MdButton)
+// Vue.use(MdCard)
+// Vue.use(MdInput)
+
+export default {
+  data: function () {
+    return {
+      user: {
+        id: '',
+        password: '',
+        name: '',
+        email: '',
+        isLoggedIn: false
+      },
+      sending: false
+    }
+  },
+  methods: {
+    signUp: function (event) {
+      this.$http.post('/api/login/signUp', { //axios 사용
+        user: this.user
+      })
+      .then((response) => {
+        if (response.data.result === 0) {
+          alert('Error, please, try again')
+        }
+        if (response.data.result === 1) {
+          alert('Success')
+          this.$router.push('/') // Home 페이지로 보내줌
+        }
+      })
+      .catch(function (error) {
+        alert('error')
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file