diff --git a/src/api/admin/hintsAPI.js b/src/api/admin/hintsAPI.js
new file mode 100644
index 0000000..cd969d5
--- /dev/null
+++ b/src/api/admin/hintsAPI.js
@@ -0,0 +1,17 @@
+import axiosInstance from "../axiosInstance.js";
+
+export default {
+  async getHintStatus(hintId) {
+    return await axiosInstance({
+      method: "get",
+      url: `/api/info/hint/${hintId}`
+    });
+  },
+
+  async takeHint(hintId) {
+    return await axiosInstance({
+      method: "post",
+      url: `/api/info/hint/${hintId}`
+    });
+  }
+};
diff --git a/src/api/admin/otpAPI.js b/src/api/admin/otpAPI.js
new file mode 100644
index 0000000..d3170ca
--- /dev/null
+++ b/src/api/admin/otpAPI.js
@@ -0,0 +1,31 @@
+import axiosInstance from "../axiosInstance.js";
+
+export default {
+  async sendOTP(email) {
+    let bodyFormData = new FormData();
+    bodyFormData.append("email", email);
+    
+    const response = await axiosInstance({
+      method: "post",
+      url: `/auth/send-otp`,
+      data: bodyFormData
+    });
+
+    return response;
+},
+
+async verifyOTP(email,otp) {
+    let bodyFormData = new FormData();
+    bodyFormData.append("email", email);
+    bodyFormData.append("otp", otp);
+    
+    const response = await axiosInstance({
+      method: "post",
+      url: `/auth/verify-otp`,
+      data: bodyFormData
+    });
+
+    return response;
+}
+
+};
diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
index 7b6609d..2f4362b 100644
--- a/src/api/axiosInstance.js
+++ b/src/api/axiosInstance.js
@@ -32,6 +32,12 @@ axiosInstance.interceptors.response.use(
       "/auth/register",
       "/api/submit/challenge"
     ];
+    
+    // For hint errors, pass through the error response
+    if (error.response && error.response.config.url.includes("/api/info/hint")) {
+      return Promise.reject(error);
+    }
+    
     if (!error.response) {
       router.push("/error/networkerror");
     } else if (ignoreErrorPagesPath.includes(error.response.config.url)) {
@@ -49,7 +55,6 @@ axiosInstance.interceptors.response.use(
         default:
           return error;
       }
-
       Promise.reject(error);
     }
   }
diff --git a/src/components/ChallCard.vue b/src/components/ChallCard.vue
index 488c671..83d4b78 100644
--- a/src/components/ChallCard.vue
+++ b/src/components/ChallCard.vue
@@ -16,6 +16,9 @@
       <span v-if="challDetails && challDetails.solves"
         >| {{ challDetails.solves.length }} Solves</span
       >
+      <span class="attempts-counter" v-if="!isPreview">
+        | {{ challDetails.previous_tries }}/{{ challDetails.failSolveLimit }} attempts
+      </span>
     </div>
     <div class="challCard-tag-container">
       <span v-for="tag in challDetails.tags" :key="tag" class="challCard-tag">
@@ -76,7 +79,57 @@
       </div>
     </div>
     <div
-      v-if="!challDetails.isSolved && !isPreview"
+      class="challCard-hints"
+      v-if="challDetails.hints && challDetails.hints.length > 0"
+    >
+      <p class="link-heading">Hints Available</p>
+      <div class="hint-buttons">
+        <button
+          v-for="hint in challDetails.hints"
+          :key="`hint_${hint.id}`"
+          class="hint-button"
+          :class="{
+            'hint-taken': hintStates[hint.id] && hintStates[hint.id].taken,
+            'hint-loading': !hintStates[hint.id]
+          }"
+          @click="handleHint(hint)"
+          :disabled="!hintStates[hint.id]"
+        >
+          <div class="hint-button-content">
+            <span class="hint-number">Hint {{ hint.id }}</span>
+            <span class="hint-points">{{ hint.points }} points</span>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Hint Confirmation Modal -->
+    <div v-if="showConfirmModal" class="modal-overlay" @click="closeConfirmModal">
+      <div class="modal-content" @click.stop>
+        <h3>{{ isHintTaken ? 'Hint' : 'Take Hint?' }}</h3>
+        <p v-if="selectedHint && !isHintTaken">
+          Are you sure you want to spend {{ selectedHint.points }} points to view this hint?
+        </p>
+        <p v-else-if="selectedHint && isHintTaken" class="hint-text">
+          {{ hintStates[selectedHint.id] && hintStates[selectedHint.id].description }}
+        </p>
+        <div class="modal-actions">
+          <button class="modal-cancel" @click="closeConfirmModal">
+            {{ isHintTaken ? 'Close' : 'Cancel' }}
+          </button>
+          <button 
+            v-if="selectedHint && !isHintTaken" 
+            class="modal-confirm" 
+            @click="confirmHint"
+          >
+            Take Hint
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="!challDetails.isSolved && !isPreview && challDetails.previous_tries < challDetails.failSolveLimit"
       class="challCard-bottom-row"
     >
       <div class="challCard-form">
@@ -97,13 +150,18 @@
         />
       </div>
     </div>
+    <div v-else-if="!isPreview && challDetails.previous_tries >= challDetails.failSolveLimit" class="challCard-maxed">
+      Maximum attempts reached
+    </div>
   </div>
 </template>
 
 <script>
 import FlagService from "../api/userAPI";
 import Button from "@/components/Button.vue";
+import HintsService from "../api/admin/hintsAPI";
 import { CONFIG } from "@/config/config";
+
 export default {
   name: "ChallCard",
   props: ["challDetails", "tag", "isPreview"],
@@ -114,16 +172,143 @@ export default {
       showSuccess: false,
       showFail: false,
       link: false,
-      copyText: "Click to Copy"
+      copyText: "Click to Copy",
+      hintStates: {},
+      loadingHints: true,
+      showConfirmModal: false,
+      selectedHint: null
     };
   },
-  state: {
-    disable: false,
-    isModalVisible: false,
-    assetLinks: false,
-    additionalLinks: false
+  computed: {
+    loadedHints() {
+      if (!this.challDetails || !this.challDetails.hints) return [];
+      return this.challDetails.hints.filter(hint => this.hintStates[hint.id]);
+    },
+    takenHints() {
+      if (!this.challDetails || !this.challDetails.hints) return [];
+      return this.challDetails.hints.filter(
+        hint => this.hintStates[hint.id] && this.hintStates[hint.id].taken
+      );
+    },
+    isHintTaken() {
+      return this.selectedHint && 
+             this.hintStates[this.selectedHint.id] && 
+             this.hintStates[this.selectedHint.id].taken;
+    }
+  },
+  watch: {
+    challDetails: {
+      immediate: true,
+      handler(newVal) {
+        console.log("Challenge details changed:", JSON.stringify(newVal, null, 2));
+        if (newVal && newVal.hints) {
+          console.log("Found hints in watcher:", JSON.stringify(newVal.hints, null, 2));
+          this.loadHints();
+        }
+      }
+    },
+    'challDetails.hints': {
+      async handler(newHints) {
+        if (newHints) {
+          await this.loadHints();
+        }
+      },
+      immediate: true
+    }
   },
   methods: {
+    async loadHints() {
+      if (!this.challDetails.hints) return;
+      
+      try {
+        for (const hint of this.challDetails.hints) {
+          try {
+            const response = await HintsService.getHintStatus(hint.id);
+            const description = response.data.Description || response.data.description;
+            const points = response.data.Points || response.data.points;
+            
+            this.$set(this.hintStates, hint.id, {
+              description: description,
+              points: points,
+              taken: description !== "Hint is not taken yet"
+            });
+          } catch (error) {
+            console.error("Error loading hint:", error);
+            
+            this.$set(this.hintStates, hint.id, {
+              description: "Not enough hint points!",
+              points: hint.points,
+              taken: false
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Error loading hints:", error);
+      }
+    },
+    async handleHint(hint) {
+      if (!hint) return;
+
+      // Show modal for both taken and untaken hints
+      this.selectedHint = hint;
+      this.showConfirmModal = true;
+    },
+
+    closeConfirmModal() {
+      this.showConfirmModal = false;
+      this.selectedHint = null;
+    },
+
+    async confirmHint() {
+      if (!this.selectedHint) return;
+      
+      const hintId = this.selectedHint.id;
+      this.showConfirmModal = false;
+      
+      try {
+        const response = await HintsService.takeHint(hintId);
+        
+        if (!response || !response.data) {
+          this.$vToastify.setSettings({ theme: "beast-error" });
+          this.$vToastify.error("Error fetching hint", "Error");
+          return;
+        }
+        
+        const description = response.data.message;
+        
+        if (description) {
+          this.$set(this.hintStates, hintId, {
+            description: description,
+            taken: true
+          });
+
+          // Show the hint in modal
+          this.showConfirmModal = true;
+        } else {
+          this.$vToastify.setSettings({ theme: "beast-error" });
+          this.$vToastify.error("Error fetching hint", "Error");
+        }
+      } catch (error) {
+        if (error.response && error.response.status === 403) {
+          const message = error.response.data && error.response.data.error 
+            ? error.response.data.error 
+            : "You don't have enough points to take this hint";
+            
+          this.$vToastify.setSettings({ theme: "beast-error" });
+          this.$vToastify.error(message, "Error");
+          return;
+        }
+        
+        if (error.response && error.response.data && error.response.data.error) {
+          this.$vToastify.setSettings({ theme: "beast-error" });
+          this.$vToastify.error(error.response.data.error, "Error");
+          return;
+        }
+        
+        this.$vToastify.setSettings({ theme: "beast-error" });
+        this.$vToastify.error("Error fetching hint", "Error");
+      }
+    },
     getUrl(port) {
       let url = CONFIG.webRoot;
       let ncurl = CONFIG.ncRoot;
@@ -148,37 +333,27 @@ export default {
         this.submitFlag();
       }
     },
-    submitFlag() {
-      FlagService.submitFlag(this.challDetails.id, this.flag).then(Response => {
-        this.$vToastify.setSettings({
-          position: "center-right",
-          theme: "beast-success"
-        });
-        if (Response.data.success) {
+    async submitFlag() {
+      try {
+        const response = await FlagService.submitFlag(
+          this.challDetails.id,
+          this.flag
+        );
+        if (response.data.success) {
           this.showSuccess = true;
-          this.$vToastify.success("Flag submitted successfully", "Success");
+          setTimeout(() => {
+            this.showSuccess = false;
+          }, 2000);
+          this.$emit("flag-submitted");
         } else {
           this.showFail = true;
-          this.$vToastify.setSettings({
-            theme: "beast-error"
-          });
-          this.$vToastify.error(
-            Response.data.error ? Response.data.error : Response.data.message,
-            "Error"
-          );
-        }
-      });
-      var self = this;
-      setTimeout(function() {
-        if (self.showSuccess) {
-          self.$router.go();
-        } else {
-          self.$emit("updateChallenges");
+          setTimeout(() => {
+            this.showFail = false;
+          }, 2000);
         }
-        self.flag = "";
-        self.showSuccess = false;
-        self.showFail = false;
-      }, 3000);
+      } catch (error) {
+        console.error(error);
+      }
     },
     copyUrl(text) {
       navigator.permissions.query({ name: "clipboard-write" }).then(result => {
@@ -190,34 +365,18 @@ export default {
         setTimeout(() => {
           this.copyText = "Click to Copy";
         }, 1000);
-    },
-    isDisabled: function() {
-      let flag = document.getElementById("flag-input").value;
-      if (flag != "") {
-        this.disable = true;
-      } else {
-        this.disable = false;
-      }
-    },
-    showModal() {
-      this.isModalVisible = true;
-    },
-    closeModal() {
-      this.isModalVisible = false;
-    }
-  },
-  watch: {
-    challDetails() {
-      this.flag = "";
     }
   },
-  mounted() {
+  async mounted() {
+    console.log("Component mounted, challDetails:", JSON.stringify(this.challDetails, null, 2));
     if (
       this.challDetails.category === "service" ||
       this.challDetails.category === "xinetd"
     )
       this.link = false;
     else this.link = true;
+
+    await this.loadHints();
   }
 };
 </script>
diff --git a/src/components/LeaderboardGraph.vue b/src/components/LeaderboardGraph.vue
index 18dc32a..3a66029 100644
--- a/src/components/LeaderboardGraph.vue
+++ b/src/components/LeaderboardGraph.vue
@@ -3,7 +3,7 @@
     :chartData="this.lineGraphData()"
     :options="this.lineGraphOptions"
     class="lineGraph"
-    :height="150"
+    :height="250"
     v-if="this.users.length > 0 && this.scoreSeries.length > 0"
   />
 </template>
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
index f15e2b6..2f8ee7b 100644
--- a/src/components/Stats.vue
+++ b/src/components/Stats.vue
@@ -9,11 +9,11 @@
       <p class="text">Total</p>
     </div>
     <div class="dynamicStats">
-      <p class="number">{{ details.challenges.length }}</p>
+      <p class="number">{{ getSolvedCount }}</p>
       <p class="text">Solved</p>
     </div>
     <div class="dynamicStats">
-      <p class="number">{{ total - details.challenges.length }}</p>
+      <p class="number">{{ total - getSolvedCount }}</p>
       <p class="text">Unsolved</p>
     </div>
     <img src="@/assets/Avatar.svg" class="image" />
@@ -23,6 +23,22 @@
 <script>
 export default {
   name: "StatsNavbar",
-  props: ["details", "total"]
+  props: ["details", "total", "challenges"],
+  computed: {
+    getSolvedCount() {
+      if (!this.challenges) {
+        console.log('No challenges');
+        return 0;
+      }
+      console.log('Challenges:', JSON.stringify(this.challenges, null, 2));
+      // Get unique solved challenge IDs
+      const solvedChallenges = this.challenges.filter(chall => {
+        console.log('Challenge:', chall.id, 'isSolved:', chall.isSolved);
+        return chall.isSolved === true;
+      });
+      console.log('Solved challenges:', solvedChallenges);
+      return solvedChallenges.length;
+    }
+  }
 };
 </script>
diff --git a/src/styles/modules/_auth.scss b/src/styles/modules/_auth.scss
index de5abb8..831ff21 100644
--- a/src/styles/modules/_auth.scss
+++ b/src/styles/modules/_auth.scss
@@ -1,5 +1,7 @@
 .auth {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   .auth-subheading {
     @extend %font-style-basic;
@@ -12,7 +14,7 @@
   }
 
   .auth-image {
-    width: 60%;
+    width: 100%;
   }
 
   .auth-container {
@@ -20,6 +22,7 @@
     flex-direction: row;
     align-items: center;
     text-align: center;
+    
     .heading {
       font-family: $primary-font-family;
       font-weight: bold;
@@ -27,6 +30,10 @@
       line-height: 2.75rem;
       color: $theme-color-grey39;
       text-align: left;
+
+      .switch {
+        color: $theme-color-light-orange;
+      }
     }
   }
 
@@ -43,18 +50,348 @@
     .form {
       width: 35%;
 
-      .inputField {
+      .info {
+        position: relative;
+        margin-bottom: 1.25rem;
+
+        .step-title {
+          font-size: 1.1rem;
+          font-weight: 500;
+          color: $theme-color-grey39;
+          margin-bottom: 0.5rem;
+        }
+
+        .inputField {
+          width: 100%;
+          max-width: 320px;
+          height: 12px;
+          margin-top: 0.5rem;
+          padding: 0.75rem 1rem;
+          border: 1px solid $theme-color-light-grey-d7;
+          border-radius: 4px;
+          font-size: 0.95rem;
+          transition: all 0.2s ease;
+          background-color: #fff;
+
+          &:focus {
+            outline: none;
+            border-color: $theme-color-light-orange;
+            box-shadow: 0 0 0 2px rgba($theme-color-light-orange, 0.1);
+          }
+
+          &::placeholder {
+            color: $theme-color-grey57;
+            font-size: 0.95rem;
+          }
+        }
+
+        .verification-message {
+          font-size: 0.85rem;
+          color: $theme-color-grey57;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+
+          &::before {
+            content: "ⓘ";
+            color: $theme-color-light-orange;
+          }
+        }
+
+        .timer-container {
+          margin-top: 1rem;
+          text-align: center;
+          font-size: 0.9rem;
+          color: $theme-color-grey39;
+
+          .resend-button {
+            background: none;
+            border: none;
+            color: $theme-color-light-orange;
+            cursor: pointer;
+            font-size: 0.9rem;
+            padding: 0;
+            text-decoration: underline;
+
+            &:hover {
+              color: darken($theme-color-light-orange, 10%);
+            }
+          }
+        }
+      }
+
+      .email-input-container,
+      .otp-input-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-top: 0.5rem;
+        max-width: 330px;
+
+        .inputField {
+          flex: 1;
+          height: 12px;
+          margin-top: 0;
+          padding: 0.75rem 1rem;
+          border: 1px solid $theme-color-light-grey-d7;
+          border-radius: 4px;
+          font-size: 0.95rem;
+          transition: all 0.2s ease;
+
+          &:focus {
+            outline: none;
+            border-color: $theme-color-light-orange;
+            box-shadow: 0 0 0 2px rgba($theme-color-light-orange, 0.1);
+          }
+
+          &:read-only {
+            background-color: $theme-color-light-grey-d7;
+            cursor: not-allowed;
+          }
+        }
+
+        .otp-button {
+          min-width: 110px;
+          height: 42px;
+          background: $theme-color-light-orange;
+          color: $theme-color-white;
+          border: none;
+          border-radius: 4px;
+          font-size: 0.95rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &:hover:not(:disabled) {
+            background: darken($theme-color-light-orange, 5%);
+            transform: translateY(-1px);
+          }
+
+          &:disabled {
+            background: $theme-color-light-grey-d7;
+            cursor: not-allowed;
+          }
+
+          &.verify {
+            background: $theme-color-white;
+            border: 1px solid $theme-color-light-orange;
+            color: $theme-color-light-orange;
+
+            &:hover:not(:disabled) {
+              background: rgba($theme-color-light-orange, 0.1);
+            }
+
+            &:disabled {
+              border-color: $theme-color-light-grey-d7;
+              color: $theme-color-light-grey-d7;
+              background: $theme-color-white;
+            }
+          }
+        }
+      }
+
+      .text-field-error {
+        font-size: 0.9rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 5px;
+        color: $theme-color-red;
+        margin-top: 0.5rem;
+
+        .errImg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .form-actions {
+        margin-top: 2rem;
+        max-width: 320px;
+        
+        .next-button {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.3rem 1rem;
+          background: $theme-color-white;
+          border: 1px solid $theme-color-light-orange;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          .next-text {
+            margin-right: 0.75rem;
+            color: $theme-color-light-orange;
+            font-weight: 500;
+            font-size: 0.95rem;
+          }
+
+          svg {
+            color: $theme-color-light-orange;
+            transition: transform 0.3s ease;
+          }
+
+          &:hover {
+            box-shadow: 0 4px 12px rgba($theme-color-light-orange, 0.2);
+            transform: translateY(-2px);
+
+            svg {
+              transform: translateX(4px);
+            }
+          }
+
+          &.disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            &:hover {
+              box-shadow: none;
+              transform: none;
+              svg {
+                transform: none;
+              }
+            }
+          }
+        }
+      }
+
+      .register-button-container {
+        margin-top: 2rem;
         width: 100%;
+        max-width: 320px;
+
+        .register-button {
+          width: 100%;
+          height: 42px;
+          font-size: 0.95rem;
+          font-weight: 500;
+          background: #f2f2f2;
+          color: $theme-color-grey39;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &:hover:not(:disabled) {
+            background: darken(#f2f2f2, 5%);
+          }
+
+          &:disabled {
+            background: #f2f2f2;
+            color: $theme-color-grey57;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      .timer-container {
         margin-top: 1rem;
+        text-align: center;
+        color: $theme-color-grey57;
+
+        .resend-button {
+          background: none;
+          border: none;
+          color: $theme-color-light-orange;
+          cursor: pointer;
+          text-decoration: underline;
+        }
       }
     }
+
+    .auth-image-container {
+      width: 60%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
-  .text-field-error {
-    font-size: 0.9rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
+  .progress-container {
+    margin-top: 2rem;
+
+    .progress-steps {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+
+      .step-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        z-index: 1;
+
+        &.active {
+          .step-circle {
+            background: $theme-color-white;
+            border-color: $theme-color-light-orange;
+            color: $theme-color-light-orange;
+          }
+
+          .step-title {
+            color: $theme-color-light-orange;
+          }
+        }
+
+        &.completed {
+          .step-circle {
+            background: $theme-color-light-orange;
+            border-color: $theme-color-light-orange;
+            color: $theme-color-white;
+          }
+        }
+
+        .step-circle {
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          background: $theme-color-white;
+          border: 2px solid $theme-color-light-grey-d7;
+          color: $theme-color-light-grey-d7;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: bold;
+          transition: all 0.3s ease;
+        }
+
+        .step-title {
+          margin-top: 0.5rem;
+          color: $theme-color-grey57;
+          font-size: 0.875rem;
+        }
+      }
+
+      .step-line {
+        flex: 1;
+        height: 2px;
+        background: $theme-color-light-grey-d7;
+        margin: 0 1rem;
+        position: relative;
+        top: -15px;
+        z-index: 0;
+
+        &.active {
+          background: $theme-color-light-orange;
+        }
+      }
+    }
+  }
+
+  .register-button-container {
+    margin-top: 2rem;
+    
+    .register-button {
+      width: 100%;
+      
+      &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    }
   }
 }
diff --git a/src/styles/modules/_challCard.scss b/src/styles/modules/_challCard.scss
index 257e37c..90a3b03 100644
--- a/src/styles/modules/_challCard.scss
+++ b/src/styles/modules/_challCard.scss
@@ -79,6 +79,11 @@
     line-height: 1.125rem;
     align-items: center;
     color: $theme-color-grey39;
+
+    .attempts-counter {
+      color: $theme-color-grey57;
+      font-size: 0.875rem;
+    }
   }
 
   .challCard-challDesc {
@@ -275,6 +280,61 @@
       }
     }
   }
+
+  .challCard-submit {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-top: 1px solid #e0e0e0;
+
+    &-container {
+      display: flex;
+      gap: 1rem;
+    }
+
+    &-input {
+      flex: 1;
+      padding: 0.5rem 1rem;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+      font-family: $primary-font-family;
+      font-size: 0.875rem;
+      
+      &:focus {
+        outline: none;
+        border-color: #007bff;
+      }
+    }
+
+    &-button {
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 4px;
+      background-color: #007bff;
+      color: white;
+      font-family: $primary-font-family;
+      font-size: 0.875rem;
+      cursor: pointer;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      &:not(:disabled):hover {
+        background-color: #0056b3;
+      }
+    }
+  }
+
+  .challCard-maxed {
+    text-align: center;
+    color: #dc3545;
+    font-family: $primary-font-family;
+    font-size: 0.875rem;
+    margin-top: 1rem;
+    padding: 1rem;
+    border-top: 1px solid #e0e0e0;
+  }
 }
 
 .preview-challcard {
@@ -294,3 +354,148 @@
   letter-spacing: 0.1rem;
   cursor: pointer;
 }
+
+.challCard-hints {
+  margin: 20px 0;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+
+  .hint-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 12px;
+  }
+
+  .hint-button {
+    flex: 1;
+    min-width: 200px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: #2c3e50;
+    color: white;
+
+    &.hint-taken {
+      background: linear-gradient(135deg, #27ae60, #2ecc71);
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      opacity: 0.9;
+    }
+
+    &.hint-loading {
+      background-color: #95a5a6;
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    .hint-button-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .hint-number {
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    .hint-points {
+      font-size: 14px;
+      opacity: 0.8;
+    }
+  }
+}
+
+// Modal styles
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal-content {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  position: relative;
+  z-index: 10000;
+
+  h3 {
+    color: #2c3e50;
+    margin: 0 0 16px 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  p {
+    color: #4a5568;
+    margin: 0 0 24px 0;
+    font-size: 16px;
+    line-height: 1.5;
+
+    &.hint-text {
+      background: #f8f9fa;
+      padding: 16px;
+      border-radius: 6px;
+      border: 1px solid #e9ecef;
+      font-family: $primary-font-family;
+      white-space: pre-wrap;
+    }
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+
+    button {
+      min-width: 100px;
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-weight: 500;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &.modal-cancel {
+        background: #e2e8f0;
+        color: #4a5568;
+        border: none;
+
+        &:hover {
+          background: #cbd5e0;
+        }
+      }
+
+      &.modal-confirm {
+        background: $theme-color-dark-orange;
+        color: white;
+        border: none;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
diff --git a/src/utils/challenges.js b/src/utils/challenges.js
index bbc71d6..fb94d48 100644
--- a/src/utils/challenges.js
+++ b/src/utils/challenges.js
@@ -8,11 +8,8 @@ export const getChallenges = async (getUserSolves, username) => {
   if (getUserSolves) {
     let userData = await UserService.getUserByUsername(username);
     challenges.forEach(challenge => {
-      if (
-        userData.data.challenges.find(el => {
-          return el.id === challenge.id;
-        })
-      ) {
+      // Check if the current user has solved this challenge
+      if (challenge.solves && challenge.solves.some(solve => solve.username === username)) {
         challenge.isSolved = true;
       }
     });
diff --git a/src/views/Challenges.vue b/src/views/Challenges.vue
index 4e137e5..d4885a8 100644
--- a/src/views/Challenges.vue
+++ b/src/views/Challenges.vue
@@ -12,7 +12,11 @@
     </div>
     <div class="challenge">
       <div class="chall-details">
-        <StatsNavbar :details="userDetails" :total="totalChals" />
+        <StatsNavbar 
+          :details="userDetails" 
+          :total="totalChals"
+          :challenges="displayChallenges"
+        />
         <div class="chall">
           <ChallengesByTag
             :tag="this.selectedTag.name"
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index b76d141..3d80315 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -23,11 +23,11 @@
             v-if="isLoggedIn()"
             to="/challenges"
           >
-            <Button text="See Challenges" class="primary-cta"
-          /></router-link>
+            <div class="primary-cta">See Challenges</div>
+          </router-link>
           <router-link style="text-decoration: none" v-else to="/register">
-            <Button text="Register Now" class="primary-cta"
-          /></router-link>
+            <div class="primary-cta">Register Now</div>
+          </router-link>
         </div>
         <div class="event-info-img">
           <img class="landing-img" src="@/assets/landing1.svg" />
@@ -55,13 +55,11 @@ import moment from "moment-timezone";
 import LoginUser from "../api/admin/authAPI.js";
 export default {
   name: "home",
-  components: {
-    Button
-  },
+  
   props: ["fetchedData", "configs"],
   data() {
     return {
-      configData: {}
+      configData: {},
     };
   },
   beforeCreate() {
@@ -69,7 +67,7 @@ export default {
   },
   mounted() {
     if (!this.fetchedData) {
-      ConfigApiService.getConfigs().then(response => {
+      ConfigApiService.getConfigs().then((response) => {
         this.configData = response.data;
       });
     } else {
@@ -88,8 +86,8 @@ export default {
       return moment(time, "HH:mm:ss UTC: Z, DD MMMM YYYY, dddd").format(
         "HH:mm:ss UTC: Z, Do MMMM YYYY, dddd"
       );
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 9329883..ca05875 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -36,8 +36,10 @@
           text="Login"
         />
       </div>
-      <img src="@/assets/login.svg" class="auth-image" />
-    </div>
+ <div class="auth-image-container">
+        <img src="@/assets/login.svg" class="auth-image" />
+      </div>
+          </div>
   </div>
 </template>
 
diff --git a/src/views/Register.vue b/src/views/Register.vue
index e697afd..fc70974 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -2,188 +2,359 @@
   <div class="auth">
     <div class="auth-container">
       <div class="heading">
-        Register for n00b<label class="switch">CTF</label>
+        Register for play<label class="switch">CTF</label>
       </div>
       <ErrorBox v-if="msg" :msg="msg" :icon="icon" />
     </div>
     <div class="form-div">
       <div class="form">
-        <div class="info">
-          <input
-            v-model="uname"
-            type="text"
-            class="adminFormTitle inputField"
-            id="name"
-            name="name"
-            placeholder="Name*"
-            required="true"
-            @keyup.enter="register"
-          />
-        </div>
-        <div class="info">
-          <input
-            v-model="username"
-            type="text"
-            class="adminFormTitle inputField"
-            id="username"
-            name="user_name"
-            placeholder="Username*"
-            required="true"
-            @blur="validateUsername"
-            @keyup.enter="register"
-          />
-          <div class="text-field-error" v-if="UsernameErr">
-            <img src="@/assets/error.svg" class="errImg" />
-            <div>{{ this.UsernameErr }}</div>
+        <div v-if="currentStep === 1">
+          <div class="info">
+            <div class="step-title">Setup Email</div>
+            <div class="email-input-container">
+              <input
+                v-model="email"
+                type="text"
+                class="inputField"
+                :readonly="otpVerified"
+                placeholder="IITR Email*"
+                required
+                @blur="validateEmail"
+              />
+              <button
+                v-if="!otpSent"
+                @click="sendOTP"
+                class="otp-button"
+                :disabled="!canProceedToOTP"
+              >
+                Send OTP
+              </button>
+            </div>
+            <div class="text-field-error" v-if="EmailErr">
+              <img src="@/assets/error.svg" class="errImg" />
+              <div>{{ EmailErr }}</div>
+            </div>
+          </div>
+
+          <div class="info" v-if="otpSent">
+            <div class="verification-message">
+              Please enter the OTP sent to {{ email }}
+            </div>
+            <div class="otp-input-container">
+              <input
+                v-model="otp"
+                type="text"
+                class="inputField"
+                placeholder="Enter OTP"
+              />
+              <button
+                @click="verifyOTP"
+                class="otp-button verify"
+                :disabled="!otp"
+              >
+                Verify OTP
+              </button>
+            </div>
+            <div class="text-field-error" v-if="OtpErr">
+              <img src="@/assets/error.svg" class="errImg" />
+              <div>{{ OtpErr }}</div>
+            </div>
+            <div class="timer-container">
+              <span v-if="timer > 0">Resend OTP in {{ timer }} seconds</span>
+              <button v-else @click="sendOTP" class="resend-button">
+                Resend OTP
+              </button>
+            </div>
+          </div>
+
+          <div class="form-actions">
+            <div
+              class="next-button"
+              :class="{ disabled: !otpVerified }"
+              @click="proceedToBasicInfo"
+            >
+              <span class="next-text">Next</span>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
           </div>
         </div>
-        <div class="info">
-          <input
-            v-model="email"
-            type="text"
-            class="adminFormTitle inputField"
-            id="email"
-            name="user_email"
-            placeholder="Email*"
-            required="true"
-            @blur="validateEmail"
-            @keyup.enter="register"
-          />
-          <div class="text-field-error" v-if="EmailErr">
-            <img src="@/assets/error.svg" class="errImg" />
-            <div>{{ this.EmailErr }}</div>
+
+        <div v-if="currentStep === 2">
+          <div class="step-title">Basic Info</div>
+          <div class="info">
+            <input
+              v-model="uname"
+              type="text"
+              class="inputField"
+              placeholder="Name*"
+              required
+            />
+          </div>
+          <div class="info">
+            <input
+              v-model="username"
+              type="text"
+              class="inputField"
+              placeholder="Username*"
+              required
+              @blur="validateUsername"
+            />
+            <div class="text-field-error" v-if="UsernameErr">
+              <img src="@/assets/error.svg" class="errImg" />
+              <div>{{ UsernameErr }}</div>
+            </div>
+          </div>
+          <div class="form-actions">
+            <div
+              class="next-button"
+              :class="{ disabled: !canProceedToPassword }"
+              @click="proceedToPassword"
+            >
+              <span class="next-text">Next</span>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
           </div>
         </div>
-        <div class="info">
-          <input
-            v-model="password"
-            type="password"
-            class="adminFormTitle inputField"
-            id="password"
-            name="user_pass"
-            placeholder="Password*"
-            required="true"
-            @blur="validatePassword"
-            @keyup.enter="register"
-          />
-          <div class="text-field-error" v-if="PassLen">
-            <img src="@/assets/error.svg" class="errImg" />
-            <div>{{ this.PassLen }}</div>
+
+        <div v-if="currentStep === 3">
+          <div class="info">
+            <input
+              v-model="password"
+              type="password"
+              class="inputField"
+              placeholder="Password*"
+              required
+              @blur="validatePassword"
+            />
+            <div class="text-field-error" v-if="PassLen">
+              <img src="@/assets/error.svg" class="errImg" />
+              <div>{{ PassLen }}</div>
+            </div>
+          </div>
+          <div class="info">
+            <input
+              v-model="confirmPassword"
+              type="password"
+              class="inputField"
+              placeholder="Confirm Password*"
+              required
+              @blur="comparePassword"
+            />
+            <div class="text-field-error" v-if="PassErr">
+              <img src="@/assets/error.svg" class="errImg" />
+              <div>{{ PassErr }}</div>
+            </div>
+          </div>
+          <div class="register-button-container">
+            <Button
+              :onclick="register"
+              variant="primary-cta"
+              class="register-button"
+              :disabled="!canRegister"
+              text="Register Now"
+            />
           </div>
         </div>
-        <div class="info">
-          <input
-            v-model="confirmPassword"
-            type="password"
-            class="adminFormTitle inputField"
-            id="confirmpassword"
-            name="user_pass"
-            placeholder="Confirm Password*"
-            required="true"
-            @blur="comparePassword"
-            @keyup.enter="register"
-          />
-          <div class="text-field-error" v-if="PassErr">
-            <img src="@/assets/error.svg" class="errImg" />
-            <div>{{ this.PassErr }}</div>
+
+        <div class="progress-container">
+          <div class="progress-steps">
+            <div
+              class="step-item"
+              :class="{ active: currentStep >= 1, completed: currentStep > 1 }"
+            >
+              <div class="step-circle">1</div>
+              <div class="step-title">Setup Email</div>
+            </div>
+            <div class="step-line" :class="{ active: currentStep > 1 }"></div>
+            <div
+              class="step-item"
+              :class="{ active: currentStep >= 2, completed: currentStep > 2 }"
+            >
+              <div class="step-circle">2</div>
+              <div class="step-title">Basic Info</div>
+            </div>
+            <div class="step-line" :class="{ active: currentStep > 2 }"></div>
+            <div class="step-item" :class="{ active: currentStep >= 3 }">
+              <div class="step-circle">3</div>
+              <div class="step-title">Set Password</div>
+            </div>
           </div>
         </div>
-        <Button
-          :onclick="register"
-          variant="primary-cta"
-          class="auth-button"
-          :disabled="
-            !(
-              uname &&
-              username &&
-              password &&
-              confirmPassword &&
-              email &&
-              !PassErr &&
-              !UsernameErr &&
-              !EmailErr &&
-              password === confirmPassword &&
-              !registered
-            )
-          "
-          text="Register Now"
-        />
       </div>
-      <img src="@/assets/login.svg" class="auth-image" />
+      <div class="auth-image-container">
+        <img src="@/assets/login.svg" class="auth-image" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import RegisterUser from "../api/admin/authAPI.js";
-import ErrorBox from "../components/ErrorBox";
-import Button from "@/components/Button.vue";
+import RegisterUser from '../api/admin/authAPI.js';
+import VerifyOTP from "../api/admin/otpAPI.js";
+import ErrorBox from '../components/ErrorBox';
+import Button from '@/components/Button.vue';
+
 export default {
-  name: "register",
+  name: 'register',
   components: {
     ErrorBox,
-    Button
+    Button,
   },
   data() {
     return {
+      currentStep: 1,
       msg: null,
       icon: null,
-      uname: "",
-      username: "",
-      email: "",
-      password: "",
-      confirmPassword: "",
-      status: false,
-      UsernameErr: false,
-      EmailErr: false,
-      PassLen: false,
-      PassErr: false,
+      uname: '',
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      otp: '',
+      otpSent: false,
+      otpVerified: false,
+      UsernameErr: '',
+      EmailErr: '',
+      PassLen: '',
+      PassErr: '',
+      OtpErr: '',
       registered: false,
-      errorIcon: "error-white",
-      tickIcon: "tick-white"
+      timer: 0,
+      timerInterval: null,
     };
   },
+  computed: {
+    canProceedToOTP() {
+      return this.email && !this.EmailErr;
+    },
+    canProceedToPassword() {
+      return this.uname && this.username && !this.UsernameErr;
+    },
+    canRegister() {
+      return (
+        this.password &&
+        this.confirmPassword &&
+        !this.PassErr &&
+        !this.PassLen &&
+        this.password === this.confirmPassword &&
+        this.otpVerified
+      );
+    },
+    progressWidth() {
+      return `${((this.currentStep - 1) / 2) * 100}%`;
+    },
+  },
   methods: {
-    validateUsername(e) {
-      if (this.username.length > 12) {
-        this.UsernameErr = "Username should be 12 characters max";
-      } else {
-        this.UsernameErr = false;
+    startTimer() {
+      this.timer = 60;
+      if (this.timerInterval) {
+        clearInterval(this.timerInterval);
       }
+      this.timerInterval = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.timerInterval);
+        }
+      }, 1000);
+    },
+    validateUsername() {
+      this.UsernameErr =
+        this.username.length > 12 ? 'Username should be 12 characters max' : '';
     },
-    validateEmail(e) {
-      const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      if (re.test(this.email)) {
-        this.EmailErr = false;
+    validateEmail() {
+      const iitrEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.iitr\.ac\.in$/;
+      if (!this.email) {
+        this.EmailErr = 'Email is required';
+      } else if (!iitrEmailRegex.test(this.email)) {
+        this.EmailErr = 'Please use your IITR email (@iitr.ac.in)';
       } else {
-        this.EmailErr = "Invalid Email";
+        this.EmailErr = '';
       }
     },
-    validatePassword(e) {
-      if (this.password.length < 8) {
-        this.PassLen = "Password should be atleast of 8 characters";
-      } else {
-        this.PassLen = false;
+    validatePassword() {
+      this.PassLen =
+        this.password.length < 8
+          ? 'Password should be at least 8 characters'
+          : '';
+    },
+    comparePassword() {
+      this.PassErr =
+        this.password !== this.confirmPassword ? "Passwords don't match" : '';
+    },
+    async sendOTP() {
+      if (this.canProceedToOTP) {
+        this.otpSent = true;
+        const otpResponse = await VerifyOTP.sendOTP(this.email);
+        this.startTimer();
+        if (otpResponse.status !== 200) {
+          this.$vToastify.error(otpResponse.data.message, "Error");
+        } else {
+        this.$vToastify.success("OTP sent to your email", "Success");
+      }
       }
     },
-    comparePassword(e) {
-      if (this.password !== this.confirmPassword) {
-        this.PassErr = "Passwords don't match";
+
+    async verifyOTP() {
+        this.otpVerified = true;
+        this.OtpErr = "";
+        const otpResponse = await VerifyOTP.verifyOTP(this.email, this.otp);
+        if (otpResponse.status !== 200) {
+          this.$vToastify.error(otpResponse.data.message, "Error");
+        } else {
+      
+        this.$vToastify.success("Email verified successfully", "Success");
+        }
+        this.currentStep = 3;
+        if (this.timerInterval) {
+          clearInterval(this.timerInterval);
+        }
+    
+    },
+    proceedToBasicInfo() {
+      if (this.otpVerified) {
+        this.currentStep = 2;
       } else {
-        this.PassErr = false;
+        this.$vToastify.error(
+          'Please fill all required fields correctly',
+          'Error'
+        );
       }
     },
-    sleep(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
+    proceedToPassword() {
+      if (this.uname && this.username && !this.UsernameErr) {
+        this.currentStep = 3;
+      } else {
+        this.$vToastify.error(
+          'Please fill all required fields correctly',
+          'Error'
+        );
+      }
     },
     async register() {
-      if (
-        !this.PassErr &&
-        !this.UsernameErr &&
-        !this.EmailErr &&
-        !this.PassLen &&
-        !this.registered
-      ) {
+      if (this.canRegister && !this.registered) {
         const registerResponse = await RegisterUser.registerUser(
           this.uname,
           this.username,
@@ -191,21 +362,19 @@ export default {
           this.password
         );
         if (registerResponse.status !== 200) {
-          this.$vToastify.setSettings({
-            theme: "beast-error"
-          });
-          this.$vToastify.error(registerResponse.data.message, "Error");
+          this.$vToastify.error(registerResponse.data.message, 'Error');
         } else {
-          this.$vToastify.setSettings({
-            theme: "beast-success"
-          });
-          this.$vToastify.success("Registered Successfully", "Success");
+          this.$vToastify.success('Registered Successfully', 'Success');
           this.registered = true;
-          await this.sleep(3000);
-          this.$router.push("/login");
+          setTimeout(() => this.$router.push('/login'), 3000);
         }
       }
+    },
+  },
+  beforeDestroy() {
+    if (this.timerInterval) {
+      clearInterval(this.timerInterval);
     }
-  }
+  },
 };
 </script>