diff --git a/backend/README.md b/backend/README.md
index 81714f530..dd8c10238 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -63,7 +63,7 @@ pip3 install -r requirements.txt
 sh init_db.sh
 
 # md5sum secret key 초기화 및 django migrate 실행
-# super admin 생성(아이디 root, 비밀번호 rootroot로 자동생성됩니다.)
+# 초기 super admin 계정 생성(username: root, email: root@pusan.ac.kr, password: rootroot)
 sh init_db.sh --migrate
 
 # 프로젝트를 실행합니다. localhost:8080으로 접속할 수 있습니다.
diff --git a/backend/deploy/entrypoint.sh b/backend/deploy/entrypoint.sh
index afbe39479..0fd972d90 100755
--- a/backend/deploy/entrypoint.sh
+++ b/backend/deploy/entrypoint.sh
@@ -27,7 +27,7 @@ n=0
 while [ $n -lt 5 ]
 do
     python3 manage.py migrate --no-input
-    python manage.py inituser --username=root --password=rootroot --action=create_super_admin &&
+    python manage.py inituser --username=root --email=root@pusan.ac.kr --password=rootroot --action=create_super_admin &&
     echo "from options.options import SysOptions; SysOptions.judge_server_token='$JUDGE_SERVER_TOKEN'" | python manage.py shell &&
     echo "from conf.models import JudgeServer; JudgeServer.objects.update(task_number=0)" | python manage.py shell &&
     break
diff --git a/backend/init_db.sh b/backend/init_db.sh
index 82a8cb13f..1d7789c05 100755
--- a/backend/init_db.sh
+++ b/backend/init_db.sh
@@ -23,5 +23,5 @@ if [ "$1" = "--migrate" ]; then
     sleep 3
     echo `cat /dev/urandom | head -1 | md5sum | head -c 32` > data/config/secret.key
     python3 manage.py migrate
-    python3 manage.py inituser --username root --password rootroot --action create_super_admin
+    python3 manage.py inituser --username root --email root@pusan.ac.kr --password rootroot --action create_super_admin
 fi
diff --git a/backend/utils/api/tests.py b/backend/utils/api/tests.py
index abbb34cc9..7c03cd52e 100644
--- a/backend/utils/api/tests.py
+++ b/backend/utils/api/tests.py
@@ -57,7 +57,7 @@ def create_admin(self, email="admin@admin.com", username="admin", password="admi
             problem_permission=ProblemPermission.OWN,
             login=login)
 
-    def create_super_admin(self, email="root@root.com", username="root", password="root1234!", login=True):
+    def create_super_admin(self, email="root@pusan.ac.kr", username="root", password="root1234!", login=True):
         return self.create_user(
             email=email,
             username=username,
diff --git a/backend/utils/management/commands/inituser.py b/backend/utils/management/commands/inituser.py
index 24e5d5fbb..45677b9a4 100644
--- a/backend/utils/management/commands/inituser.py
+++ b/backend/utils/management/commands/inituser.py
@@ -8,11 +8,13 @@ class Command(BaseCommand):
 
     def add_arguments(self, parser):
         parser.add_argument("--username", type=str)
+        parser.add_argument("--email", type=str)
         parser.add_argument("--password", type=str)
         parser.add_argument("--action", type=str)
 
     def handle(self, *args, **options):
         username = options["username"]
+        email = options.get("email") or username
         password = options["password"]
         action = options["action"]
 
@@ -27,7 +29,7 @@ def handle(self, *args, **options):
 
             user = User.objects.create(
                 username=username,
-                email=username,
+                email=email,
                 admin_type=AdminType.SUPER_ADMIN,
                 problem_permission=ProblemPermission.ALL)
             user.set_password(password)
@@ -39,7 +41,7 @@ def handle(self, *args, **options):
             self.stdout.write(self.style.SUCCESS("User created"))
         elif action == "create_admin":
             user = User.objects.create(
-                username=username, email=username, admin_type=AdminType.ADMIN, problem_permission=ProblemPermission.OWN)
+                username=username, email=email, admin_type=AdminType.ADMIN, problem_permission=ProblemPermission.OWN)
             user.set_password(password)
             user.save()
             UserProfile.objects.create(user=user)
diff --git a/frontend/src/pages/oj/components/NavBar.vue b/frontend/src/pages/oj/components/NavBar.vue
index 7d892fb87..fc6fad002 100644
--- a/frontend/src/pages/oj/components/NavBar.vue
+++ b/frontend/src/pages/oj/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="header">
+  <div id="header" :style="headerStyle">
     <Menu
       ref="menuRef"
       class="header-menu"
@@ -111,12 +111,14 @@
       :width="400"
       :styles="{ top: modalStatus.mode === 'login' ? '10%' : '2%' }"
     >
-      <div slot="header" class="modal-title" style="text-align: center">
-        {{
-          modalStatus.mode === "login"
-            ? $t("m.LoginModalHeader")
-            : $t("m.RegisterModalHeader")
-        }}
+      <div slot="header" class="modal-title">
+        <div class="modal-heading">
+          {{
+            modalStatus.mode === "login"
+              ? $t("m.LoginModalHeader")
+              : $t("m.RegisterModalHeader")
+          }}
+        </div>
       </div>
       <component :is="modalStatus.mode" v-if="modalVisible"></component>
       <div slot="footer" style="display: none"></div>
@@ -139,12 +141,18 @@ export default {
   mounted() {
     this.getProfile()
     this.$nextTick(this.initIndicator)
+    this.syncHeaderScroll()
+    window.addEventListener("scroll", this.handleWindowScroll, { passive: true })
   },
   beforeDestroy() {
     if (this.communityDropdownTimer) {
       clearTimeout(this.communityDropdownTimer)
       this.communityDropdownTimer = null
     }
+    window.removeEventListener("scroll", this.handleWindowScroll)
+    if (this._headerScrollFrame) {
+      cancelAnimationFrame(this._headerScrollFrame)
+    }
     this.teardownIndicator()
   },
   data() {
@@ -157,6 +165,7 @@ export default {
         visible: false,
       },
       indicatorReady: false,
+      headerOffsetX: 0,
     }
   },
   methods: {
@@ -192,6 +201,17 @@ export default {
         mode: mode,
       })
     },
+    handleWindowScroll() {
+      if (this._headerScrollFrame) return
+      this._headerScrollFrame = requestAnimationFrame(() => {
+        this._headerScrollFrame = null
+        this.syncHeaderScroll()
+      })
+    },
+    syncHeaderScroll() {
+      this.headerOffsetX = window.pageXOffset || window.scrollX || 0
+      this.scheduleIndicatorUpdate()
+    },
     initIndicator() {
       const menuEl = this.$refs.menuRef && this.$refs.menuRef.$el
       if (!menuEl) return
@@ -335,6 +355,11 @@ export default {
         width: this.indicator.width + "px",
       }
     },
+    headerStyle() {
+      return {
+        transform: `translateX(${-this.headerOffsetX}px)`,
+      }
+    },
     modalVisible: {
       get() {
         return this.modalStatus.visible
@@ -627,6 +652,22 @@ export default {
   &-title {
     font-size: 18px;
     font-weight: 1000;
+    text-align: center;
+  }
+
+  &-heading {
+    color: #17193d;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  &-subtitle {
+    margin-top: 6px;
+    color: #7b8191;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
   }
 }
 
diff --git a/frontend/src/pages/oj/views/user/Login.vue b/frontend/src/pages/oj/views/user/Login.vue
index 5e574b38f..7e7e93366 100644
--- a/frontend/src/pages/oj/views/user/Login.vue
+++ b/frontend/src/pages/oj/views/user/Login.vue
@@ -1,17 +1,20 @@
 <template>
-  <div>
-    <Form ref="formLogin" :model="formLogin" :rules="ruleLogin">
+  <div class="login-panel">
+    <Form ref="formLogin" class="login-form" :model="formLogin" :rules="ruleLogin">
       <FormItem prop="username">
-        <Input
-          type="text"
-          class="customLoginInput"
-          v-model="formLogin.username"
-          :placeholder="$t('m.LoginUsername')"
-          size="large"
-          :autofocus="true"
-          @on-enter="handleLogin"
-        >
-        </Input>
+        <div class="login-email-field">
+          <Input
+            type="text"
+            class="customLoginInput login-id-input"
+            v-model="formLogin.username"
+            placeholder="아이디"
+            size="large"
+            :autofocus="true"
+            @on-enter="handleLogin"
+          >
+          </Input>
+          <span class="login-email-domain">@pusan.ac.kr</span>
+        </div>
       </FormItem>
       <FormItem prop="password">
         <Input
@@ -40,15 +43,18 @@
       >
         {{ $t("m.UserLogin") }}
       </Button>
-      <a class="redirect" @click.stop="goResetPassword" style="">{{
-        $t("m.Forget_Password")
-      }}</a>
-      <a
-        class="redirect"
-        v-if="website.allow_register"
-        @click.stop="handleBtnClick('register')"
-        >{{ $t("m.No_Account") }}</a
-      >
+      <div class="login-links">
+        <a
+          class="redirect"
+          v-if="website.allow_register"
+          @click.stop="handleBtnClick('register')"
+          >{{ $t("m.No_Account") }}</a
+        >
+        <span v-if="website.allow_register" class="login-link-divider"></span>
+        <a class="redirect" @click.stop="goResetPassword">{{
+          $t("m.Forget_Password")
+        }}</a>
+      </div>
     </div>
   </div>
 </template>
@@ -64,9 +70,8 @@ export default {
   mixins: [FormMixin],
   data() {
     const CheckRequiredTFA = (rule, value, callback) => {
-      console.log(value)
       if (value !== "") {
-        api.tfaRequiredCheck(value).then((res) => {
+        api.tfaRequiredCheck(this.normalizeLoginUsername(value)).then((res) => {
           this.tfaRequired = res.data.data.result
         })
       }
@@ -83,10 +88,18 @@ export default {
       },
       ruleLogin: {
         username: [
-          { required: true, trigger: "blur" },
+          { required: true, message: "아이디를 입력해주세요.", trigger: "blur" },
           { validator: CheckRequiredTFA, trigger: "blur" },
         ],
-        password: [{ required: true, trigger: "change", min: 6, max: 20 }],
+        password: [
+          {
+            required: true,
+            message: "비밀번호를 입력해주세요.",
+            trigger: "change",
+            min: 6,
+            max: 20,
+          },
+        ],
       },
     }
   },
@@ -99,10 +112,14 @@ export default {
       })
     },
     handleLogin() {
-      this.validateForm("formLogin").then((valid) => {
+      this.$refs.formLogin.validate((valid) => {
+        if (!valid) {
+          this.$error("입력값을 확인해주세요.")
+          return
+        }
         this.btnLoginLoading = true
         let formData = Object.assign({}, this.formLogin)
-        console.log(formData)
+        formData.username = this.normalizeLoginUsername(formData.username)
         if (!this.tfaRequired) {
           delete formData["tfa_code"]
         }
@@ -123,6 +140,14 @@ export default {
       this.changeModalStatus({ visible: false })
       this.$router.push({ name: "apply-reset-password" })
     },
+    normalizeLoginUsername(username) {
+      const value = (username || "").trim()
+      if (!value) {
+        return value
+      }
+      const loginId = value.split("@")[0].trim()
+      return `${loginId}@pusan.ac.kr`
+    },
   },
   computed: {
     ...mapGetters(["website", "modalStatus"]),
@@ -139,13 +164,17 @@ export default {
 </script>
 
 <style scoped lang="less">
+.login-panel {
+  width: 100%;
+}
+
 .footer-modal {
-  overflow: auto;
+  overflow: visible;
   margin-top: 20px;
   margin-bottom: -15px;
-  text-align: left;
+  text-align: center;
   .btn {
-    margin: 0 0 15px 0;
+    margin: 0;
     &:last-child {
       margin: 0;
     }
@@ -155,16 +184,190 @@ export default {
   height: 45px;
   border: none;
   background-color: #5b64ed;
-  font-weight: 600;
+  color: #fff;
+  font-weight: 700;
   font-size: 14px;
   border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(74, 83, 212, 0.12);
+  transition: background-color 0.18s ease, box-shadow 0.18s ease,
+    transform 0.18s ease;
+
+  &:hover,
+  &:focus {
+    border: none;
+    background-color: #6971ff;
+    color: #fff;
+    box-shadow: 0 5px 12px rgba(91, 100, 237, 0.16);
+  }
+
+  &:active {
+    background-color: #5159df;
+    color: #fff;
+    box-shadow: 0 3px 8px rgba(74, 83, 212, 0.12);
+    transform: translateY(1px);
+  }
 }
 .customLoginInput {
   //outline: 2px solid #255aa4 !important;
 }
+.login-form {
+  @login-input-height: 44px;
+
+  /deep/ .ivu-form-item {
+    margin-bottom: 16px;
+  }
+
+  /deep/ .ivu-form-item-error {
+    margin-bottom: 26px;
+  }
+
+  /deep/ .ivu-form-item-error-tip {
+    padding-top: 4px;
+    color: #e23b2e;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  /deep/ .ivu-input {
+    height: @login-input-height;
+    border-color: #d8dbe4;
+    border-radius: 8px;
+    color: #31364a;
+    font-size: 14px;
+    font-weight: 500;
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+
+  /deep/ .ivu-input::placeholder {
+    color: #9aa0ad;
+    font-weight: 500;
+  }
+
+  /deep/ .ivu-input:focus {
+    border-color: #6b72ee;
+    box-shadow: 0 0 0 2px rgba(91, 100, 237, 0.1);
+  }
+}
+.login-email-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 10px;
+  width: 100%;
+  align-items: stretch;
+}
+.login-id-input {
+  min-width: 0;
+
+  /deep/ .ivu-input-wrapper {
+    width: 100%;
+  }
+
+  /deep/ .ivu-input {
+    height: 44px;
+    border: 1px solid #d8dbe4;
+    border-radius: 8px;
+    background: #fff;
+    padding-right: 12px;
+  }
+
+  /deep/ .ivu-input:focus {
+    border-color: #6b72ee;
+    box-shadow: 0 0 0 2px rgba(91, 100, 237, 0.1);
+  }
+}
+.login-email-domain {
+  min-width: 132px;
+  height: 44px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d8dbe4;
+  border-radius: 8px;
+  color: #565d70;
+  background: #fafbfe;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0 12px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.login-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.login-link-divider {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  background-color: #d7dbe5;
+}
+
 .redirect {
-  color: #7a7a7a;
-  float: right;
-  margin-right: 10px;
+  color: #565d70;
+  float: none;
+  margin-right: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: #5b64ed;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .footer-modal {
+    margin-top: 20px;
+  }
+
+  .btn {
+    height: 45px;
+    font-size: 14px;
+  }
+
+  .login-form {
+    /deep/ .ivu-form-item {
+      margin-bottom: 16px;
+    }
+
+    /deep/ .ivu-form-item-error {
+      margin-bottom: 26px;
+    }
+
+    /deep/ .ivu-input {
+      height: 42px;
+      font-size: 14px;
+    }
+  }
+
+  .login-email-field {
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 8px;
+  }
+
+  .login-email-domain {
+    height: 42px;
+    font-size: 13px;
+    min-width: 118px;
+    padding: 0 10px;
+  }
+
+  .login-links {
+    gap: 16px;
+    margin-top: 22px;
+  }
+
+  .redirect {
+    font-size: 13px;
+  }
+
 }
 </style>