diff --git a/.gitignore b/.gitignore
index 1bfed4c14..2c7b2702c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -188,3 +188,6 @@ typings/
 
 # devcontainer
 .devcontainer/data
+
+# MacOS file
+.DS_Store*
diff --git a/backend/.DS_Store~1787bcb (feat: Add test for  user-contest-api) b/backend/.DS_Store~1787bcb (feat: Add test for  user-contest-api)
new file mode 100644
index 000000000..9d2e2a117
Binary files /dev/null and b/backend/.DS_Store~1787bcb (feat: Add test for  user-contest-api) differ
diff --git a/backend/contest/models.py b/backend/contest/models.py
index b160120c9..258bf2a8a 100644
--- a/backend/contest/models.py
+++ b/backend/contest/models.py
@@ -8,6 +8,8 @@
 from group.models import Group
 from utils.models import RichTextField
 
+from account.models import AdminType
+
 
 class Contest(models.Model):
     title = models.TextField()
@@ -15,6 +17,7 @@ class Contest(models.Model):
     requirements = JSONField(default=list)
     constraints = JSONField(default=list)
     allowed_groups = models.ManyToManyField(Group, blank=True)
+    # allowed_groups = models.ManyToManyField(Group, blank=True)
     scoring = models.TextField(default="ACM-ICPC style")
     # show real time rank or cached rank
     real_time_rank = models.BooleanField()
@@ -92,6 +95,17 @@ class ACMContestRank(AbstractContestRank):
     # key is problem id
     submission_info = JSONField(default=dict)
 
+    @property
+    def rank(self):
+        qs_contest = Contest.objects.get(id=self.contest.id)
+        if qs_contest.status == ContestStatus.CONTEST_ENDED:
+            qs_participants = ACMContestRank.objects.filter(contest=self.contest.id, user__admin_type=AdminType.REGULAR_USER, user__is_disabled=False).\
+                select_related("user").order_by("-accepted_number", "total_penalty", "total_time")
+            for i in range(qs_participants.count()):
+                if qs_participants[i].user.id == self.user.id:
+                    return i+1
+        return -1
+
     class Meta:
         db_table = "acm_contest_rank"
         unique_together = (("user", "contest"),)
diff --git a/backend/contest/serializers.py b/backend/contest/serializers.py
index 8e52ab21a..57bf6e74b 100644
--- a/backend/contest/serializers.py
+++ b/backend/contest/serializers.py
@@ -174,3 +174,11 @@ class ACMContesHelperSerializer(serializers.Serializer):
     problem_id = serializers.CharField()
     rank_id = serializers.IntegerField()
     checked = serializers.BooleanField()
+
+
+class ProfileContestSerializer(serializers.Serializer):
+    id = serializers.IntegerField()
+    title = serializers.CharField(max_length=128)
+    start_time = serializers.DateTimeField()
+    rank = serializers.IntegerField()
+    percentage = serializers.FloatField()
diff --git a/backend/contest/tests.py b/backend/contest/tests.py
index 8655e4783..ebbf082eb 100644
--- a/backend/contest/tests.py
+++ b/backend/contest/tests.py
@@ -6,9 +6,9 @@
 
 from utils.api.tests import APITestCase
 
-from .models import ContestAnnouncement, ContestRuleType, Contest
-
-from problem.models import ProblemIOMode
+from .models import ContestAnnouncement, ContestRuleType, Contest, ACMContestRank
+from submission.models import Submission
+from problem.models import Problem, ProblemIOMode, ProblemTag
 
 DEFAULT_PROBLEM_DATA = {"_id": "A-110", "title": "test", "description": "<p>test</p>", "input_description": "test",
                         "output_description": "test", "time_limit": 1000, "memory_limit": 256, "difficulty": "Level1",
@@ -39,6 +39,22 @@
                         "bank_filter": [],
                         "visible": True, "real_time_rank": True, "rank_penalty_visible": True}
 
+DEFAULT_SUBMISSION_DATA = {
+    "problem_id": "1",
+    "user_id": 1,
+    "username": "test",
+    "code": "xxxxxxxxxxxxxx",
+    "result": -2,
+    "info": {},
+    "language": "C",
+    "statistic_info": {}
+}
+
+
+DEFAULT_ACMCONTESTRANK_DATA = {"submission_number": 1, "accepted_number": 1, "total_time": 123, "total_penalty": 123,
+                               "submission_info": {"1": {"is_ac": True, "ac_time": 123, "penalty": 123, "problem_submission": 1}},
+                               "contest": 1}
+
 
 class ContestAdminAPITest(APITestCase):
     def setUp(self):
@@ -252,3 +268,48 @@ def test_create_problem_bank(self):
         url = self.reverse("contest_bank_api")
         response = self.client.post(url, data={"contest_id": contest["id"]})
         self.assertSuccess(response)
+
+
+class UserContestAPITest(APITestCase):
+    def setUp(self):
+        # create contest
+        admin = self.create_admin()
+        data = copy.deepcopy(DEFAULT_CONTEST_DATA)
+        data.pop("allowed_groups")
+        data.pop("prizes")
+        self.contest = Contest.objects.create(created_by=admin, **data)
+
+        # create problem in contest
+        data = copy.deepcopy(DEFAULT_PROBLEM_DATA)
+        data["contest_id"] = self.contest.id
+        tags = data.pop("tags")
+        problem = Problem.objects.create(created_by=admin, **data)
+
+        for item in tags:
+            try:
+                tag = ProblemTag.objects.get(name=item)
+            except ProblemTag.DoesNotExist:
+                tag = ProblemTag.objects.create(name=item)
+            problem.tags.add(tag)
+
+        self.problem = problem
+        # user submit problem
+        user = self.create_user("test", "test123")
+        data = copy.deepcopy(DEFAULT_SUBMISSION_DATA)
+        data["contest_id"] = self.contest.id
+        data["problem_id"] = self.problem.id
+        data["user_id"] = user.id
+        self.submission = Submission.objects.create(**data)
+
+        # create ACMContestRank
+        data = copy.deepcopy(DEFAULT_ACMCONTESTRANK_DATA)
+        data["user"] = user
+        data["contest"] = self.contest
+        self.rank = ACMContestRank.objects.create(**data)
+
+        self.url = self.reverse("contest_user_api")
+
+    # test UserContestAPI : can user get contest info which he participated and rank?
+    def test_get_participated_contest_list(self):
+        response = self.client.get(self.url)
+        self.assertSuccess(response)
diff --git a/backend/contest/urls/oj.py b/backend/contest/urls/oj.py
index 398f0ab68..0a5ddcbfe 100644
--- a/backend/contest/urls/oj.py
+++ b/backend/contest/urls/oj.py
@@ -3,6 +3,7 @@
 from ..views.oj import ContestAnnouncementListAPI
 from ..views.oj import ContestPasswordVerifyAPI, ContestAccessAPI
 from ..views.oj import ContestListAPI, ContestAPI, ContestRankAPI, ProblemBankAPI
+from ..views.oj import UserContestAPI
 
 urlpatterns = [
     path("contests/", ContestListAPI.as_view(), name="contest_list_api"),
@@ -12,4 +13,5 @@
     path("contest/access/", ContestAccessAPI.as_view(), name="contest_access_api"),
     path("contest/rank/", ContestRankAPI.as_view(), name="contest_rank_api"),
     path("contest/bank/", ProblemBankAPI.as_view(), name="contest_bank_api"),
+    path("contest/user/", UserContestAPI.as_view(), name="contest_user_api"),
 ]
diff --git a/backend/contest/views/oj.py b/backend/contest/views/oj.py
index a2c3b7661..f8741c2fb 100644
--- a/backend/contest/views/oj.py
+++ b/backend/contest/views/oj.py
@@ -16,6 +16,7 @@
 from ..serializers import ACMContestRankNoPenaltySerializer, ContestAnnouncementSerializer
 from ..serializers import ContestSerializer, ContestPasswordVerifySerializer
 from ..serializers import ACMContestRankSerializer
+from ..serializers import ProfileContestSerializer
 
 import random
 import json
@@ -277,3 +278,29 @@ def get(self, request):
         except ProblemBank.DoesNotExist:
             return self.success(False)
         return self.success(True)
+
+
+class UserContestAPI(APIView):
+    def get(self, request):
+        user = request.user
+        # queryset for all problems information which user submitted
+        qs_problems = ACMContestRank.objects.filter(user=user.id, user__admin_type=AdminType.REGULAR_USER, user__is_disabled=False)
+        contests = []
+        for problem in qs_problems:
+            contest_id = problem.contest.id
+            try:
+                contest = Contest.objects.get(id=contest_id, visible=True)
+                contest = ContestSerializer(contest).data
+                total_participants = ACMContestRank.objects.filter(contest=contest_id, user__admin_type=AdminType.REGULAR_USER, user__is_disabled=False).count()
+                contest["rank"] = problem.rank
+                contest["percentage"] = round(contest["rank"]/total_participants*100, 2)
+                contests.append(contest)
+            except Contest.DoesNotExist:
+                return self.error("Contest does not exist")
+
+        # priority
+        priority = request.GET.get("priority")
+        if priority:
+            contests = sorted(contests, key=lambda c: c[priority])
+
+        return self.success(ProfileContestSerializer(contests, many=True).data)
diff --git a/backend/submission/migrations/0017_auto_20220302_1508.py b/backend/submission/migrations/0017_auto_20220302_1508.py
new file mode 100644
index 000000000..a4a912204
--- /dev/null
+++ b/backend/submission/migrations/0017_auto_20220302_1508.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.12 on 2022-03-02 06:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('submission', '0016_auto_20211226_1458'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='submission',
+            name='code_length',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='submission',
+            name='title',
+            field=models.TextField(null=True),
+        ),
+    ]
diff --git a/backend/submission/models.py b/backend/submission/models.py
index 809b0d7f3..0f27489d9 100644
--- a/backend/submission/models.py
+++ b/backend/submission/models.py
@@ -29,10 +29,12 @@ class Submission(models.Model):
     contest = models.ForeignKey(Contest, null=True, on_delete=models.CASCADE)
     problem = models.ForeignKey(Problem, on_delete=models.CASCADE)
     assignment = models.ForeignKey(Assignment, null=True, on_delete=models.CASCADE, related_name="submissions")
+    title = models.TextField(null=True)
     create_time = models.DateTimeField(auto_now_add=True)
     user_id = models.IntegerField(db_index=True)
     username = models.TextField()
     code = models.TextField()
+    code_length = models.IntegerField(default=0)
     result = models.IntegerField(db_index=True, default=JudgeStatus.PENDING)
     # Judgment details returned from JudgeServer
     info = JSONField(default=dict)
diff --git a/backend/submission/urls.py b/backend/submission/urls.py
index 11134cd03..dd88cac4a 100644
--- a/backend/submission/urls.py
+++ b/backend/submission/urls.py
@@ -2,6 +2,7 @@
 
 from .views import (SubmissionAPI, SubmissionListAPI, ContestSubmissionListAPI, AssignmentSubmissionListAPI,
                     AssignmentSubmissionListProfessorAPI, SubmissionExistsAPI, EditSubmissionScoreAPI)
+from .views import ProfileSubmissionListAPI
 
 urlpatterns = [
     path("submission/", SubmissionAPI.as_view(), name="submission_api"),
@@ -11,4 +12,5 @@
     path("assignment_submissions/", AssignmentSubmissionListAPI.as_view(), name="assignment_submission_list_api"),
     path("assignment_submissions_professor/", AssignmentSubmissionListProfessorAPI.as_view(), name="assignment_submission_list_professor_api"),
     path("edit_submission_score/", EditSubmissionScoreAPI.as_view(), name="edit_submission_score_api"),
+    path("profile_submissions/", ProfileSubmissionListAPI.as_view(), name="profile_submission_list_api"),
 ]
diff --git a/backend/submission/views.py b/backend/submission/views.py
index 3d2b5186f..827f25e4f 100644
--- a/backend/submission/views.py
+++ b/backend/submission/views.py
@@ -10,6 +10,7 @@
 # from judge.dispatcher import JudgeDispatcher
 from problem.models import Problem, ProblemRuleType
 from account.models import User, AdminType
+from django.db.models import Q
 from utils.api import APIView, validate_serializer
 from utils.constants import AssignmentStatus
 from utils.cache import cache
@@ -86,7 +87,9 @@ def post(self, request):
                                                username=request.user.username,
                                                language=data["language"],
                                                code=data["code"],
+                                               code_length=len(data["code"].encode("utf-8")),
                                                problem_id=problem.id,
+                                               title=problem.title,
                                                ip=request.session["ip"],
                                                contest_id=data.get("contest_id"),
                                                assignment_id=data.get("assignment_id"))
@@ -473,3 +476,22 @@ def get(self, request):
         return self.success(request.user.is_authenticated and
                             Submission.objects.filter(problem_id=request.GET["problem_id"],
                                                       user_id=request.user.id).exists())
+
+
+class ProfileSubmissionListAPI(APIView):
+    def get(self, request):
+        submissions = Submission.objects.filter(user_id=request.user.id)
+        # keyword search, 문제 번호로 검색 안됨
+        keyword = request.GET.get("keyword", "").strip()
+        if keyword:
+            submissions = submissions.filter(Q(title__icontains=keyword))
+        # result search
+        result = request.GET.get("result")
+        if result:
+            if result == "AC":
+                submissions = submissions.filter(result=0)
+            elif result == "NAC":
+                submissions = submissions.exclude(result=0)
+        data = self.paginate_data(request, submissions)
+        data["results"] = SubmissionListSerializer(data["results"], many=True, user=request.user).data
+        return self.success(data)
diff --git a/frontend/package.json b/frontend/package.json
index 1516333bc..061627cc9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "axios": "^0.24.0",
     "bootstrap-vue": "^2.21.2",
     "browser-detect": "^0.2.28",
+    "chart.js": "^3.7.0",
     "core-js": "^3.19.3",
     "highlight.js": "10.7.3",
     "iview": "2",
diff --git a/frontend/skku-coding-platform b/frontend/skku-coding-platform
new file mode 160000
index 000000000..62983c3fb
--- /dev/null
+++ b/frontend/skku-coding-platform
@@ -0,0 +1 @@
+Subproject commit 62983c3fbf9d61165931872359a44b8649d7b942
diff --git a/frontend/src/pages/oj/api.js b/frontend/src/pages/oj/api.js
index 1844b6e82..90e4ef59c 100644
--- a/frontend/src/pages/oj/api.js
+++ b/frontend/src/pages/oj/api.js
@@ -208,6 +208,13 @@ export default {
       }
     })
   },
+  getUserContestInfo (offset, limit, params) {
+    params.limit = limit
+    params.offset = offset
+    return ajax('contest/user/', 'get', {
+      params
+    })
+  },
   submitCode (data) {
     return ajax('submission/', 'post', {
       data
@@ -227,6 +234,13 @@ export default {
       params
     })
   },
+  getProfileSubmissionList (offset, limit, params) {
+    params.limit = limit
+    params.offset = offset
+    return ajax('profile_submissions/', 'get', {
+      params
+    })
+  },
   getSubmission (id) {
     return ajax('submission/', 'get', {
       params: {
diff --git a/frontend/src/pages/oj/components/Header.vue b/frontend/src/pages/oj/components/Header.vue
index b1b6f0252..6c61a6f09 100644
--- a/frontend/src/pages/oj/components/Header.vue
+++ b/frontend/src/pages/oj/components/Header.vue
@@ -27,7 +27,7 @@
       </template>
       <template v-slot:content v-else>
         <button v-if="isAdminRole" @click="goManagement()" class="flex w-full justify-between items-center rounded-lg px-3 py-1 my-1 text-base font-medium text-text-title hover:text-green hover:no-underline">Management</button>
-        <a class="flex w-full justify-between items-center rounded-lg px-3 py-1 my-1 text-base text-text-title font-medium hover:text-green hover:no-underline" href="/#">Settings</a>
+        <button v-if="!isAdminRole" class="flex w-full justify-between items-center rounded-lg px-3 py-1 my-1 text-base text-text-title font-medium hover:text-green hover:no-underline" @click="goProfile()">My Profile</button>
         <a class="flex w-full justify-between items-center rounded-lg px-3 py-1 my-1 text-base text-text-title hover:text-green hover:no-underline" href="/logout">Sign Out</a>
       </template>
     </dropdown>
@@ -77,6 +77,11 @@ export default {
       } else {
         window.open('/admin/')
       }
+    },
+    async goProfile () {
+      await this.$router.push({
+        name: 'profile'
+      })
     }
   },
   computed: {
diff --git a/frontend/src/pages/oj/components/Pagination.vue b/frontend/src/pages/oj/components/Pagination.vue
new file mode 100644
index 000000000..3475c767a
--- /dev/null
+++ b/frontend/src/pages/oj/components/Pagination.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="page-itm">
+    <div @click="changePage(1)" class="page-btn leftedge">«</div>
+    <div @click="changePage(currentPage-1)" class="page-btn">&lt;</div>
+    <div
+      v-for="page in pageList"
+      :key="page"
+      @click="changePage(page)"
+      :class="[ page==currentPage? 'page-btn select': 'page-btn' ]">
+      {{page}}
+      </div>
+    <div @click="changePage(currentPage+1)" class="page-btn">&gt;</div>
+    <div @click="changePage(numberOfPages)" class="page-btn rightedge">»</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    totalRows: { // number of total rows in table
+      type: Number
+    },
+    perPage: { // number of rows in table per one page
+      type: Number
+    },
+    limit: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      currentPage: 1
+    }
+  },
+  methods: {
+    changePage (page) {
+      if (page >= 1 && page <= this.numberOfPages) {
+        this.currentPage = page
+        this.$emit('input', this.currentPage)
+      }
+    }
+  },
+  computed: {
+    localLimit () {
+      return Number(this.limit)
+    },
+    numberOfPages () { // number of pages
+      return Math.ceil(this.totalRows / this.perPage)
+    },
+    startPage () {
+      return Math.trunc((this.currentPage - 1) / this.localLimit) * this.localLimit + 1
+    },
+    endPage () {
+      return this.startPage + this.localLimit - 1 <= this.numberOfPages ? this.startPage + this.localLimit - 1 : this.numberOfPages
+    },
+    pageList () {
+      return [...Array(this.endPage - this.startPage + 1).keys()].map(i => i + this.startPage)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-itm {
+  width: 95%;
+  margin: 20px 5% 16px 0;
+  display: flex;
+  justify-content: flex-end !important;
+  flex-direction: row;
+}
+
+.page-btn {
+  width: 35px;
+  height: 38px;
+  text-align: center;
+  margin-left: -1px;
+  line-height: 35px;
+  color: #bdbdbd;
+  border: thin solid #dadada;
+  cursor: pointer;
+}
+
+.leftedge {
+  border-top-left-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
+}
+
+.rightedge {
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
+}
+
+.select {
+    background-color: #bdbdbd;
+    border: thin solid #bdbdbd;
+    color: white;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.page-btn:hover {
+  background-color: #e9ecee;
+}
+
+</style>
diff --git a/frontend/src/pages/oj/components/user/ProfileContest.vue b/frontend/src/pages/oj/components/user/ProfileContest.vue
new file mode 100644
index 000000000..aa04ac2b6
--- /dev/null
+++ b/frontend/src/pages/oj/components/user/ProfileContest.vue
@@ -0,0 +1,181 @@
+<script src="./node_modules/chart.js/dist/chart.js"></script>
+<template>
+  <div class="profile-contest">
+    <div class="section-title mt-4 mb-3">My Contest Rank Transition</div>
+
+    <div class="rank-chart">
+      <canvas id="myChart"></canvas>
+    </div>
+
+    <div class="sort-container">
+      <b-dropdown :text="priority" class="mr-4">
+        <b-dropdown-item @click="sortBy('all')">all</b-dropdown-item>
+        <b-dropdown-item @click="sortBy('rank')">rank</b-dropdown-item>
+        <b-dropdown-item @click="sortBy('date')">date</b-dropdown-item>
+        <b-dropdown-item @click="sortBy('title')">title</b-dropdown-item>
+        <b-dropdown-item @click="sortBy('percentage')">prize</b-dropdown-item>
+      </b-dropdown>
+    </div>
+
+    <div class="table">
+      <b-table
+        hover
+        :items="contests"
+        :fields="fields"
+        head-variant="light"
+        @row-clicked="goContest"
+        :tbody-tr-class="underwayClass"
+      >
+        <template #cell(start_time)="data">
+          {{ getTimeFormat(data.value) }}
+        </template>
+        <!-- <template #cell(prize)="data"> {{ data.item.rank }}
+          <b-icon
+            icon="circle-fill"
+            style="color: #ff6663"
+            font-scale="1.2"
+          ></b-icon>
+          {{ data.item.prize }}
+        </template> -->
+      </b-table>
+    </div>
+    <div class="pagination">
+      <Pagination
+      v-model="currentPage"
+      :total-rows="rows"
+      :per-page="perPage"
+      limit="1"
+      ></Pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@oj/api'
+import time from '@/utils/time'
+import { Chart, registerables } from "chart.js";
+import Pagination from "../Pagination.vue";
+Chart.register(...registerables);
+
+export default {
+  name: 'ProfileContest',
+  components: { Pagination },
+  props: {},
+  data() {
+    return {
+      rows: 100,
+      currentPage: 1,
+      perPage: 3,
+      priority: 'all',
+      Chart,
+      fields: [
+        { label: "Date", key: "start_time" },
+        { key: "title", label: "Title" },
+        { key: "rank", label: "Rank" },
+        { key: "percentage", label: "Prize" },
+      ],
+      contests: [],
+    };
+  },
+  async mounted() {
+    await this.getUserContestList()
+    await this.drawChart();
+  },
+  methods: {
+    underwayClass(item, type) {
+      if(!item || type!=='row') return
+      if(item.rank < 0) {
+        item.rank = "-"
+        item.percentage = "-"
+        return 'underwayClass'
+      }
+    },
+    drawChart() {
+      const ctx = document.getElementById("myChart");
+      const myChart = new Chart(ctx, {
+        type: "line",
+        data: {
+          labels: this.contests.map(x=>x.title),
+          datasets: [
+            {
+              label: "Me",
+              data: this.contests.map(x=>x.percentage),
+              borderColor: "#FF6663",
+              backgroundColor: "#FF6663",
+              yAxisId: 'y',
+            },
+          ],
+        },
+        options: {
+          scales: {
+            y: {
+              suggestedMin: 0,
+              suggestedMax: 100,
+              reverse: true
+            }
+          }
+        }
+      });
+    },
+    async getUserContestList () {
+      try {
+        const offset = (this.page - 1) * this.limit
+        const res = await api.getUserContestInfo(offset, this.limit, {
+          priority: this.priority === 'all' || this.priority === 'date' ? 'start_time' : this.priority,
+          page: this.page
+        })
+        this.contests = res.data.data
+      } catch (err) {
+      }
+    },
+    getTimeFormat (value) {
+      return time.utcToLocal(value, 'YYYY-MM-DD')
+    },
+    async goContest (item) {
+      await this.$router.push({ name: 'contest-details', params: { contestID: item.id } })
+    },
+    async sortBy(priority){
+      this.priority = priority
+      await this.getUserContestList()
+    },
+  },
+  computed: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.profile-contest {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.rank-chart {
+  width: 90%;
+}
+
+.sort-container {
+  width: 95%;
+  margin-top: 30px;
+  display: flex;
+  justify-content: flex-end !important;
+}
+
+.table {
+  width: 95%;
+  margin: 0 auto;
+  cursor: pointer;
+}
+
+.underwayClass {
+  backgroundColor: red;
+}
+
+.pagination {
+  width: 95%;
+  margin-right: 5%;
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end !important;
+}
+</style>
diff --git a/frontend/src/pages/oj/components/user/ProfileGroup.vue b/frontend/src/pages/oj/components/user/ProfileGroup.vue
new file mode 100644
index 000000000..f54f94b97
--- /dev/null
+++ b/frontend/src/pages/oj/components/user/ProfileGroup.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="profile-group">
+    <div class="mt-4 mb-3">
+      <div class="group-top">
+        <h2 class="section-title">My Group</h2>
+        <button class="group-create">
+          Create
+        </button>
+      </div>
+    </div>
+    <div class="top-bar mb-4 group">
+      <div class="group-information">
+        <div class="group-left">
+          <img id="logo" src="@/assets/logos/logo.png" alt="coding-platform-logo">
+          <div class="group-detail">
+            <h4 class="group-name"> {{ groupName }} </h4>
+            <div class="group-description">
+              {{ groupDescription }}
+            </div>
+          </div>
+        </div>
+        <div class="group-right">
+          <div class="group-role">
+            {{ groupRole }}
+          </div>
+          <button class="group-button">
+            <b-icon :icon="showMember ? 'caret-down' : 'caret-up' " @click="showMemberList()"></b-icon>
+          </button>
+        </div>
+      </div>
+      <div v-if="showMember">
+        <div class="admin-container">
+          <h4 class="admin_title"> Administrator </h4>
+          <div class="admin-list">
+            <span v-for="admin in adminList" :key="admin">
+              <span class="admin-name">
+                {{ admin }}
+              </span>
+            </span>
+          </div>
+        </div>
+        <div class="member-container">
+          <h4 class="member_title"> Member </h4>
+          <div class="member-list">
+            <span v-for="member in memberList" :key="member" class="member"> {{ member }}
+              <span v-if="groupRole==='Administrator'" style="padding-left: 10px;">
+                <button class="promote" style="color: #FFFFFF">
+                  <b-icon icon="arrow-up"> </b-icon>
+                </button>
+                <button class="delete" style="color: #FF6663">
+                  <b-icon icon="x" style="width: 120%; height: 100%;"> </b-icon>
+                </button>
+              </span>
+            </span>
+          </div>
+        </div>
+        <div v-if="groupRole==='Administrator'">
+          <div class="apply-container">
+            <h4 class="apply_title"> Application </h4>
+            <div class="apply-list">
+              <span v-for="apply in applyList" :key="apply">
+                <span class="apply-name">
+                  {{ apply.name }}
+                </span>
+                <span class="apply-intro">
+                  {{ apply.intro }}
+                </span>
+              </span>
+              <button class="resolve">
+                Resolve
+              </button>
+              <button class="reject">
+                Reject
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProfileGroup',
+  components: {
+  },
+  props: {
+  },
+  data () {
+    return {
+      showMember: false,
+      groupName: 'SKKUDing',
+      groupDescription: 'SKKU Development Crew',
+      groupRole: 'Administrator',
+      adminList: ['Cocoa123', 'SOLBI1234', 'dotoleeoak', 'minseo123', 'jimin9038'],
+      memberList: ['Cocoa123', 'SOLBI1234', 'dotoleeoak', 'minseo123', 'jimin9038', 'Cocoa123', 'SOLBI1234', 'dotoleeoak', 'minseo123', 'jimin9038', 'Cocoa123', 'SOLBI1234', 'dotoleeoak', 'minseo123', 'jimin9038'],
+      applyList: [{ name: 'Giraffe', intro: "I'm the cutest dog in the world." }]
+    }
+  },
+  async mounted () {
+  },
+  methods: {
+    showMemberList () {
+      this.showMember = !this.showMember
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @font-face {
+    font-family: Manrope_bold;
+    src: url('../../../../fonts/Manrope-Bold.ttf');
+  }
+  .profile-group {
+    display: flex;
+    flex-direction: column;
+  }
+  .group-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .group-create {
+    margin-bottom:0;
+    color: #FFFFFF;
+    position:relative;
+    background-color: #8DC63F !important;
+    border: none;
+    border-radius: 10px;
+    padding: 2px 15px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+  .group {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid;
+    border-color: gray;
+  }
+  .group-information {
+    display: flex;
+    height: 107.45px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .group-left {
+    display: flex;
+  }
+  .group-detail {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    margin-left: 25px;
+  }
+  .group-name{
+    color: #173747;
+    font-weight: bold;
+    margin-block: 7px;
+  }
+  .group-description {
+    color: #7C7A7B;
+    font-weight: bold;
+    margin-top: 5px;
+  }
+  #logo {
+    width: 75px;
+    height: 83px;
+    margin-left: 20px;
+  }
+  .group-right {
+    display: flex;
+    justify-content: space-between;
+  }
+  .group-role {
+    margin-right: 20px;
+    color: #173747;
+    font-weight: bold;
+  }
+  .group-button {
+    background-color: transparent !important;
+    border-color: transparent;
+    border: none;
+    margin-right: 20px;
+  }
+  .admin-container {
+    display: flex;
+    flex-direction: column;
+    margin-block: 20px;
+    margin-left: 20px;
+  }
+  .admin-list {
+    color: #7C7A7B;
+    font-weight: bold;
+    margin-block: 20px;
+  }
+  .admin-name {
+    margin-right: 20px;
+  }
+  .member-container {
+    display: flex;
+    flex-direction: column;
+    margin-block: 20px;
+    margin-left: 20px;
+  }
+  .member-list {
+    color: #7C7A7B;
+    font-weight: bold;
+    margin-block: 20px;
+  }
+  .member {
+    min-width: 140px;
+    display: inline-flex;
+    justify-content: space-between;
+    align-content: space-between;
+    margin-right: 20px;
+    overflow: hidden
+  }
+  .promote {
+    background-color: #569BD8 !important;
+    border-color: transparent;
+    border: none;
+    border-radius: 2px;
+  }
+  .delete {
+    background-color: transparent !important;
+    border-color: transparent;
+    border: none;
+  }
+  .apply-container {
+    display: flex;
+    flex-direction: column;
+    margin-block: 20px;
+    margin-left: 20px;
+  }
+  .apply-list {
+    margin-block: 20px;
+  }
+  .apply-name {
+    color: #7C7A7B;
+    font-weight: bold;
+  }
+  .apply-intro {
+    font-weight: bold;
+    margin-inline: 20px;
+  }
+  .resolve {
+    background-color: #8DC63F !important;
+    border-color: transparent;
+    border: none;
+    border-radius: 10px;
+    padding: 2px 15px;
+    margin-inline: 10px;
+    color: #FFFFFF;
+  }
+  .reject {
+    background-color: #FF6663 !important;
+    border-color: transparent;
+    border: none;
+    border-radius: 10px;
+    padding: 2px 20px;
+    margin-inline: 10px;
+    color: #FFFFFF;
+  }
+</style>
diff --git a/frontend/src/pages/oj/components/user/ProfileSubmission.vue b/frontend/src/pages/oj/components/user/ProfileSubmission.vue
new file mode 100644
index 000000000..1038a6eaf
--- /dev/null
+++ b/frontend/src/pages/oj/components/user/ProfileSubmission.vue
@@ -0,0 +1,494 @@
+<template>
+  <div id="profile-submission-container">
+    <div class="submission-list-card font-bold">
+      <div class="top-bar mb-4" style="margin-top:4px;">
+        <h2 class="title">Submission List</h2>
+        <div class="submission-list-table">
+          <div class="category-container">
+            <button type="button" class="ac-btn ac" @click="filterByResult('AC')">Accepted</button>
+            <button type="button" class="ac-btn nac" @click="filterByResult('NAC')">Not Accepted</button>
+            <div class="col-4">
+              <b-icon icon="search" class="search-icon"/>
+              <b-input placeholder="keywords" class="search-input"
+                v-model="keyword" @input="filterByKeyword"/>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <b-table
+          hover
+          :items="submissionList"
+          :fields="submissionTableColumns"
+          :per-page="perPage"
+          :current-page="updateCurrentPage"
+          head-variant="light"
+          @row-clicked="onMySubmissionClicked"
+        >
+          <template #cell(result)="data">
+            <span style="color: #8DC63F;" v-if="data.item.result==='Accepted'"> {{ data.value }} </span>
+            <span style="color: #FF4F28;" v-else> {{ data.value }} </span>
+          </template>
+          <template #cell(execution)="data">
+            <div v-if="data.item.result==='Accepted'">
+              <span>{{ data.item.statistic_info.memory_cost }}KB</span> / <span>{{ data.item.statistic_info.time_cost }}ms</span>
+            </div>
+            <div v-else>
+              -
+            </div>
+          </template>
+          <template #cell(code)="data">
+            <span>{{ data.item.language }}</span> / <span>{{ data.item.code_length }}B</span>
+          </template>
+          <template #cell(created_time))="data">
+            <span> {{ data.value }} </span>
+          </template>
+        </b-table>
+      </div>
+      <div class="pagination">
+        <b-pagination
+          v-model="currentPage"
+          :total-rows="total"
+          :per-page="perPage"
+          limit="3"
+        ></b-pagination>
+      </div>
+    </div>
+    <b-modal id="submission-detail-modal" centered hide-backdrop hide-footer
+      v-model="submission_detail_modal_show">
+      <template #modal-header="{ close }">
+        <div class="modal-title-close">
+          <h1>Submission #{{submission_detail.id}}</h1>
+          <b-icon icon="x" class="close-icon" @click="close()"/>
+        </div>
+      </template>
+      <div id="submission-info-table">
+        <b-table borderless class="align-center"
+          :items="[submission_detail]"
+          :fields="submission_info_table_fields">
+          <template #cell(result)="data">
+            <span :style="'color: '+resultTextColor(data.item.result)">{{data.item.result}}</span>
+          </template>
+        </b-table>
+      </div>
+      <div id="submission-compile-error-message" v-if="compile_error_message_show">
+        <p class="text-danger"> Compile error message: {{ submission_detail.statistic_info.err_info }} </p>
+      </div>
+      <div id="submission-source-code">
+        <h3>Source Code</h3>
+        <p>({{submission_detail.bytes}} Bytes)</p>
+        <CodeMirror
+          readOnly
+          :key="codemirror_key"
+          :value="submission_detail.code"
+          :language="submission_detail.language"
+          theme="material"/>
+      </div>
+      <div id="submission-detail-table">
+        <b-table class="align-center"
+          :items="submission_detail.testcases"
+          :per-page="submission_detail_table_rows"
+          :fields="submission_detail_table_fields"
+          v-show="submission_detail.testcases">
+          <template #cell(result)="data">
+            <span :style="'color: '+resultTextColor(data.item.result)">{{data.item.result}}</span>
+          </template>
+        </b-table>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import api from '@oj/api'
+import time from '@/utils/time'
+import { JUDGE_STATUS } from '@/utils/constants'
+import { ProblemMixin } from '@oj/components/mixins'
+import CodeMirror from '@oj/components/CodeMirror.vue'
+
+export default {
+  name: 'ProfileSubmission',
+  mixins: [ProblemMixin],
+  components: {
+    CodeMirror
+  },
+  data () {
+    return {
+      perPage: 20,
+      currentPage: 1,
+      checked: false,
+      submissionList: [],
+      limit: 20,
+      total: 0,
+      keyword: '',
+      result: 'All',
+      submissionTableColumns: [
+        {
+          label: 'Title',
+          key: 'title',
+          tdClass: 'problem-title-field',
+          thClass: 'problem-title-field'
+        },
+        {
+          label: 'Result',
+          key: 'result',
+          tdClass: 'result'
+        },
+        {
+          label: 'Execution',
+          key: 'execution'
+        },
+        {
+          label: 'Code',
+          key: 'code'
+        },
+        {
+          label: 'Date',
+          key: 'create_time',
+          tdClass: 'date'
+        }
+      ],
+      submission_detail: {},
+      submission_info_table_fields: [
+        { label: 'Submission Time', key: 'create_time' },
+        { label: 'User', key: 'username' },
+        { label: 'Language', key: 'language' },
+        { label: 'Result', key: 'result' }
+      ],
+      submission_detail_table_rows: 5,
+      submission_detail_table_fields: [
+        { label: '#', key: 'title' },
+        { label: 'Result', key: 'result' },
+        { label: 'Exec time', key: 'exec_time' },
+        { label: 'Memory', key: 'memory' }
+      ],
+      submission_detail_modal_show: false,
+      compile_error_message_show: false,
+      codemirror_key: 1
+    }
+  },
+  methods: {
+    async getProfileSubmissionList (page) {
+      const offset = (page - 1) * this.limit
+      const res = await api.getProfileSubmissionList(offset, this.limit,
+        {
+          result: this.result,
+          keyword: this.keyword,
+          page: page
+        }
+      )
+      this.total = res.data.data.total
+      this.submissionList = res.data.data.results.map(v => {
+        v.create_time = time.utcToLocal(v.create_time, 'YYYY-MM-DD HH:mm')
+        v.result = JUDGE_STATUS[v.result].name
+        return v
+      })
+    },
+    async filterByResult (item) {
+      this.currentPage = 1
+      this.result = item
+      await this.getProfileSubmissionList()
+    },
+    async filterByKeyword () {
+      this.currentPage = 1
+      await this.getProfileSubmissionList()
+    },
+    resultTextColor (result) {
+      return result === 'Accepted' ? '#8DC63F' : '#FF4F28'
+    },
+    async onMySubmissionClicked (item) {
+      await this.getSubmissionDetail(item.id)
+
+      this.submission_detail_modal_show = true
+      await this.$nextTick()
+      await this.$nextTick()
+      this.codemirror_key += 1
+    },
+    async getSubmissionDetail (submissionID) {
+      const res = await api.getSubmission(submissionID)
+      let data = res.data.data
+      if (!this.contestID) {
+        delete data.problem
+      }
+      data = {
+        ...data,
+        ...data.statistic_info,
+        id: data.id.substring(0, 6),
+        create_time: time.utcToLocal(data.create_time, 'YYYY-MM-DD HH:mm'),
+        result: JUDGE_STATUS[data.result].name,
+        bytes: new Blob([data.code]).size,
+        testcases: data.info && data.info.data && data.info.data.map(
+          tc => {
+            return {
+              title: tc.test_case,
+              result: JUDGE_STATUS[tc.result].name,
+              exec_time: tc.real_time,
+              memory: tc.memory
+            }
+          }
+        )
+      }
+      this.compile_error_message_show = data.result === 'Compile Error'
+
+      if (data.info && data.info.data) {
+        // score exist means the submission is OI problem submission
+        if (data.info.data[0].score !== undefined) {
+          // TODO : 테이블에 Score field 추가
+        }
+        if (this.isAdminRole) {
+          // TODO : 테이블에 Admin Column(Real time, Signal) 추가
+        }
+      }
+      this.submission_detail = data
+    }
+  },
+  watch: {
+    async 'isAuthenticated' (newVal) {
+      await this.init()
+    }
+  },
+  computed: {
+    updateCurrentPage () {
+      return this.getProfileSubmissionList(this.currentPage)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @font-face {
+    font-family: Manrope_bold;
+    src: url('../../../../fonts/Manrope-Bold.ttf');
+  }
+  .top-bar {
+    margin-top: 40px;
+    margin-left: 68px;
+  }
+  .title{
+    margin-bottom:0;
+    color: #7C7A7B;
+    display:inline;
+    position:relative;
+    top:36px;
+    font-size: 2rem;
+  }
+  .submission-list-card{
+    margin:0 auto;
+    width:95%;
+    font-family:Manrope;
+    .submission-list-table{
+      width: 95%;
+      margin: 0 auto;
+    }
+  }
+  div {
+    &.pagination{
+      margin-right: 5%;
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  .category-container{
+    display:flex;
+    justify-content:flex-end;
+  }
+  .ac-btn {
+    display: inline-block;
+    padding: 4px;
+    margin: 0px 4px 0px 4px;
+    border-radius: 8px;
+    background-color: white;
+    font-size: 16px;
+    font-family: Manrope;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    &.ac{
+      color: #8DC63F;
+      border-color: #8DC63F;
+      &:hover{
+        color: white;
+        background-color: #8DC63F;
+      }
+    }
+    &.nac{
+      color: #FF4F28;
+      border-color: #FF4F28;
+      &:hover{
+        color: white;
+        background-color: #FF4F28;
+      }
+    }
+  }
+
+  .problem-title-field{
+    width: 25%;
+  }
+  .dropdown-item{
+    font-family: Manrope;
+  }
+  .search-icon {
+    position:absolute;
+    top: 11px;
+    left: 23px;
+  }
+  .search-input {
+    margin-left: -5px;
+    padding-left: 37px;
+  }
+  .font-bold {
+    font-family: manrope_bold;
+  }
+  .table {
+    width:95% !important;
+    margin-left:auto;
+    margin-right:auto;
+  }
+  ::v-deep .modal {
+    .modal-dialog {
+      min-width: 1200px;
+
+      .modal-content {
+        color: white;
+        border: none;
+        border-radius: 10px;
+        background: #24272D;
+        box-shadow: 0px 0px 15px #000000;
+
+        .modal-header {
+          border-bottom: none;
+
+          .modal-title-close {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            h1 {
+              display: inline-block;
+              margin-top: 10px;
+              margin-left: 10px;
+              font-size: 35px;
+            }
+
+            .close-icon {
+              font-size: 60px;
+            }
+          }
+        }
+
+        .modal-body {
+          padding: 0;
+
+          #clarifications-table {
+            table {
+              color: white;
+
+              th {
+                min-width: 230px;
+                padding: 15px 25px;
+                border: none;
+              }
+
+              td {
+                min-width: 230px;
+                padding: 15px 25px;
+                border-top: 1px solid #3B4F56;
+              }
+            }
+          }
+
+          #my-submissions-table, #all-submissions-table {
+            table {
+              color: white;
+
+              th {
+                min-width: 100px;
+                padding: 15px 25px;
+                border: none;
+              }
+
+              td {
+                min-width: 100px;
+                padding: 15px 25px;
+                border-top: 1px solid #3B4F56;
+                cursor: pointer;
+              }
+            }
+          }
+
+          #submission-info-table {
+            table {
+              color: white;
+              font-size: 15px;
+            }
+
+            tr th:first-child,
+            tr td:first-child {
+              padding-left: 50px;
+            }
+
+            tr th:last-child,
+            tr td:last-child {
+              padding-right: 50px;
+            }
+          }
+
+          #submission-compile-error-message {
+            padding: 20px 50px;
+          }
+
+          #submission-source-code {
+            padding: 20px 50px;
+            padding-bottom: 40px;
+            color: white;
+
+            h3 {
+              font-size: 30px;
+              display: inline;
+            }
+            p {
+              font-size: 25px;
+            }
+          }
+
+          // occasional code indent css fix
+          #submission-source-code::v-deep .CodeMirror-sizer {
+            margin-left: 38px !important;
+          }
+
+          #submission-source-code::v-deep .CodeMirror-gutter-wrapper {
+            left: -38px !important;
+          }
+
+          #submission-detail-table {
+            table {
+              font-size: 13px;
+              color: white;
+              border-collapse: collapse;
+
+              th {
+                border: none;
+              }
+
+              td {
+                border-color: #3B4F56;
+              }
+
+              tr th:first-child,
+              tr td:first-child {
+                padding-left: 70px;
+              }
+
+              tr th:last-child,
+              tr td:last-child {
+                padding-right: 70px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/pages/oj/components/user/TabSplitInTwo.vue b/frontend/src/pages/oj/components/user/TabSplitInTwo.vue
new file mode 100644
index 000000000..f24a6efc8
--- /dev/null
+++ b/frontend/src/pages/oj/components/user/TabSplitInTwo.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="tab-split-in-two">
+    <div class="d-flex">
+      <button v-for="tabName in left" :key="tabName" @click="showTab(tabName)" class="tab-split-in-two__tab">
+        {{ tabName }}
+      </button>
+    </div>
+    <div class="mx-4"></div>
+    <div class="d-flex">
+      <button v-for="tabName in right" :key="tabName" @click="showTab(tabName)" class="tab-split-in-two__tab">
+        {{ tabName }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TabSplitInTwo',
+  components: {
+  },
+  props: {
+    left: Array,
+    right: Array
+  },
+  data () {
+    return {
+    }
+  },
+  async mounted () {
+  },
+  methods: {
+    showTab (tabName) {
+      this.$emit('show-tab', tabName)
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tab-split-in-two {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 50px;
+    overflow: auto;
+    .tab-split-in-two__tab {
+      margin: 0px 10px;
+      font-size: 18px;
+      border: 0px;
+      background-color: transparent;
+    }
+    .tab-split-in-two__tab:hover {
+      color: #8DC63F;
+    }
+  }
+
+</style>
diff --git a/frontend/src/pages/oj/components/user/UserInfo.vue b/frontend/src/pages/oj/components/user/UserInfo.vue
new file mode 100644
index 000000000..5d7f19cef
--- /dev/null
+++ b/frontend/src/pages/oj/components/user/UserInfo.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="user-info">
+    <div class="flex-column mx-2">
+      <div class="font-weight-bold mb-2" style="font-size: 20px">
+        {{ info.nickname }}
+        <span class="ml-1" style="color: #FF6663">
+          {{ info.temperature }}°C
+        </span>
+      </div>
+      <div>
+        {{ info.username }} / {{ info.major }}
+      </div>
+    </div>
+    <div class="d-flex">
+      <div class="d-flex flex-column-reverse mx-2">
+        <div style="font-size: 17px">
+          # {{ info.weeklyRank }}
+        </div>
+        <div class="mb-1" style="font-size: 13px">
+          Weekly
+        </div>
+      </div>
+      <div class="d-flex flex-column-reverse mx-2">
+        <div style="font-size: 17px">
+          # {{ info.monthlyRank }}
+        </div>
+        <div class="mb-1" style="font-size: 13px">
+          Monthly
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'UserInfo',
+  components: {
+  },
+  props: {
+    // info: {
+    //     nickname: 'Nickname1234',
+    //     temperature: 670,
+    //     username: '2022123456',
+    //     major: 'CSE',
+    //     weeklyRank: 11,
+    //     monthlyRank: 9,
+    //     presentRank: 6
+    //   },
+    info: Object
+  },
+  data () {
+    return {
+    }
+  },
+  async mounted () {
+  },
+  methods: {
+
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .user-info {
+    display: flex;
+    margin: 0px 10px;
+    justify-content: space-between;
+  }
+
+</style>
diff --git a/frontend/src/pages/oj/views/user/ProfileSetting.vue b/frontend/src/pages/oj/components/user/UserSetting.vue
similarity index 98%
rename from frontend/src/pages/oj/views/user/ProfileSetting.vue
rename to frontend/src/pages/oj/components/user/UserSetting.vue
index dcc5bd8af..7f8ab3397 100644
--- a/frontend/src/pages/oj/views/user/ProfileSetting.vue
+++ b/frontend/src/pages/oj/components/user/UserSetting.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container">
-    <div class="setting-main font-bold">
-      <div class="section-title logo-title font-bold">
+  <div class="profile-setting">
+    <div class="setting-main">
+      <div class="section-title logo-title">
         <h2>Setting</h2>
       </div>
       <div style="display:flex; flex-direction:row; margin-bottom:12px;" class="profileSetting">
@@ -74,7 +74,7 @@ import { types } from '@/store'
 import { mapActions } from 'vuex'
 
 export default {
-  name: 'ProfileSetting',
+  name: 'UserSetting',
   data () {
     return {
       loading: {
@@ -278,7 +278,6 @@ export default {
   }
   .logo-title {
     margin:8px 0 16px 0;
-    color: #8DC63F;
     text-align:center;
   }
   .font-bold {
diff --git a/frontend/src/pages/oj/router/routes.js b/frontend/src/pages/oj/router/routes.js
index 762917ab6..cc81ddfb3 100644
--- a/frontend/src/pages/oj/router/routes.js
+++ b/frontend/src/pages/oj/router/routes.js
@@ -16,13 +16,13 @@ import {
   ProblemList,
   ProblemSet,
   ResetPassword,
-  ProfileSetting,
   LectureList,
   LectureDashboard,
   LectureAssignmentList,
   LectureAssignmentDetail,
   LectureQna,
-  LectureQnaDetail
+  LectureQnaDetail,
+  Profile
 } from '../views'
 
 export default [
@@ -122,12 +122,6 @@ export default [
     component: ContestRanking,
     meta: { title: 'Contest Ranking' }
   },
-  {
-    name: 'profile-setting',
-    path: '/setting',
-    meta: { requiresAuth: true, title: 'Profile Settings' },
-    component: ProfileSetting
-  },
   {
     name: 'lecture-list',
     path: '/lecture',
@@ -170,6 +164,12 @@ export default [
     meta: { title: 'Lecture QnA Detail' },
     component: LectureQnaDetail
   },
+  {
+    name: 'profile',
+    path: '/profile',
+    meta: { requiresAuth: true, title: 'My Profile' },
+    component: Profile
+  },
   {
     path: '*',
     meta: { title: '404' },
diff --git a/frontend/src/pages/oj/views/index.js b/frontend/src/pages/oj/views/index.js
index cc2621340..c12ca5109 100644
--- a/frontend/src/pages/oj/views/index.js
+++ b/frontend/src/pages/oj/views/index.js
@@ -13,6 +13,7 @@ import LectureAssignmentList from './lecture/LectureAssignmentList.vue'
 import LectureAssignmentDetail from './lecture/LectureAssignmentDetail.vue'
 import LectureQna from './lecture/LectureQnA.vue'
 import LectureQnaDetail from './lecture/LectureQnADetail.vue'
+import Profile from './user/Profile.vue'
 
 // Grouping Components in the Same Chunk
 const Problem = () => import(/* webpackChunkName: "Problem" */ '@oj/views/problem/Problem.vue')
@@ -23,7 +24,8 @@ const ResetPassword = () => import(/* webpackChunkName: "password" */ '@oj/views
 const EmailAuth = () => import(/* webpackChunkName: "emailAuth" */ '@oj/views/user/EmailAuth.vue')
 const Register = () => import('@oj/views/user/Register.vue')
 
-const ProfileSetting = () => import(/* webpackChunckName: "setting" */ '@oj/views/user/ProfileSetting.vue')
+/* const ProfileSetting = () => import(/* webpackChunckName: "setting" */
+/* '@oj/views/user/ProfileSetting.vue') */
 
 const ContestList = () => import(/* webpackChunkName: "contest" */ '@oj/views/contest/ContestList.vue')
 const ContestDetail = () => import(/* webpackChunkName: "contest" */ '@oj/views/contest/ContestDetail.vue')
@@ -31,9 +33,10 @@ const ContestDetail = () => import(/* webpackChunkName: "contest" */ '@oj/views/
 export {
   Home, NotFound,
   Logout, ProblemList, Announcement, AnnouncementList, Problem, ProblemSet,
-  ApplyResetPassword, ResetPassword, EmailAuth, ProfileSetting,
+  ApplyResetPassword, ResetPassword, EmailAuth,
   ContestList, ContestDetail, ContestProblemList, ContestRanking, Register,
-  LectureList, LectureDashboard, LectureAssignmentList, LectureAssignmentDetail, LectureQna, LectureQnaDetail
+  LectureList, LectureDashboard, LectureAssignmentList, LectureAssignmentDetail, LectureQna, LectureQnaDetail,
+  Profile
 }
 /* 구성 요소 내보내기는 두 가지 범주로 나뉩니다.
  *   하나는 일반적으로 직접 내보내기에 사용되며
diff --git a/frontend/src/pages/oj/views/problem/Problem.vue b/frontend/src/pages/oj/views/problem/Problem.vue
index 847a00da3..ecdd6ceff 100644
--- a/frontend/src/pages/oj/views/problem/Problem.vue
+++ b/frontend/src/pages/oj/views/problem/Problem.vue
@@ -93,7 +93,7 @@
         centered
         modal-class="modal-med modal-big"
       >
-        <profileSetting></profileSetting>
+        <UserSetting></UserSetting>
       </b-modal>
 
       <b-navbar id="inner-header" type="dark">
@@ -337,7 +337,7 @@ import ProblemSidebar from './ProblemSidebar.vue'
 import moment from 'moment'
 import register from '@oj/views/user/Register'
 import login from '@oj/views/user/Login'
-import profileSetting from '@oj/views/user/ProfileSetting'
+import UserSetting from '@oj/components/user/UserSetting'
 import Table from '@oj/components/Table.vue'
 import VueResizable from 'vue-resizable'
 
@@ -348,9 +348,9 @@ export default {
     ProblemSidebar,
     login,
     register,
-    profileSetting,
     Table,
-    VueResizable
+    VueResizable,
+    UserSetting
   },
   mixins: [FormMixin],
   data () {
diff --git a/frontend/src/pages/oj/views/user/Profile.vue b/frontend/src/pages/oj/views/user/Profile.vue
new file mode 100644
index 000000000..d2a8e1d03
--- /dev/null
+++ b/frontend/src/pages/oj/views/user/Profile.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="profile-container">
+    <div class="user-info-container">
+      <user-info :info="info"></user-info>
+    </div>
+    <hr style="border-top-width: 2px;"/>
+    <div class="tab-container">
+      <tab-split-in-two :left="leftTabs" :right="rightTabs" :current-tab="currentTab" @show-tab="showTab"></tab-split-in-two>
+    </div>
+    <div class="tab-content">
+      <!--v-show: rendering once when Profile.vue mounted, v-if: rendering every time tab clicked -->
+      <profile-summary v-if="currentTab==='Summary'"></profile-summary>
+      <profile-submission v-if="currentTab==='Submission'"></profile-submission>
+      <profile-history v-show="currentTab==='History'"></profile-history>
+      <profile-contest v-if="currentTab==='Contest'"></profile-contest>
+      <profile-badge v-show="currentTab==='Badge'"></profile-badge>
+      <profile-storage v-show="currentTab==='Storage'"></profile-storage>
+      <profile-group v-if="currentTab==='Group'"></profile-group>
+      <user-setting v-if="currentTab==='Setting'"></user-setting>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import UserInfo from '../../components/user/UserInfo'
+import TabSplitInTwo from '../../components/user/TabSplitInTwo.vue'
+import ProfileSubmission from '../../components/user/ProfileSubmission.vue'
+import ProfileContest from '../../components/user/ProfileContest.vue'
+import ProfileGroup from '../../components/user/ProfileGroup.vue'
+import UserSetting from '../../components/user/UserSetting.vue'
+
+export default {
+  name: 'ProfileSetting',
+  components: {
+    UserInfo,
+    TabSplitInTwo,
+    ProfileSubmission,
+    ProfileContest,
+    ProfileGroup,
+    UserSetting
+  },
+  data () {
+    return {
+      info: {
+        nickname: 'Nickname1234',
+        temperature: 670,
+        username: '2022123456',
+        major: 'CSE',
+        weeklyRank: 11,
+        monthlyRank: 9,
+        presentRank: 6
+      },
+      leftTabs: [
+        'Summary',
+        'Submission',
+        'History',
+        'Contest',
+        'Badge'
+      ],
+      rightTabs: [
+        'Storage',
+        'Group',
+        'Setting'
+      ],
+      currentTab: 'Summary'
+    }
+  },
+  async mounted () {
+  },
+  methods: {
+    showTab (tabName) {
+      this.currentTab = tabName
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .profile-container{
+    margin: 0 auto;
+    width: 75%;
+    font-family: Manrope;
+  }
+  .user-info-container{
+    margin: 30px 0px 10px 0px;
+  }
+</style>
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 866f9918a..64c59de1c 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -21,7 +21,7 @@ body {
 }
 
 .section-title {
-  font-size: 21px;
+  font-size: 22px;
   font-weight: 500;
   padding-top: 10px;
   padding-bottom: 20px;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 61487af2d..421c110c6 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2945,6 +2945,11 @@ check-more-types@^2.24.0:
   resolved "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA=
 
+chart.js@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.0.tgz#7a19c93035341df801d613993c2170a1fcf1d882"
+  integrity sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"