diff --git a/src/pages/apply.astro b/src/pages/apply.astro
index 0c449b2..e773432 100644
--- a/src/pages/apply.astro
+++ b/src/pages/apply.astro
@@ -1,10 +1,190 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import '../styles/apply.scss';
 ---
 
 <Layout title="Registration | UP IECEP">
   <section class="registration-section">
-    <h1>Registration Portal</h1>
-    <strong>Coming soon</strong>
+    <div class="form-container">
+      <h1>Registration Portal</h1>
+      
+      <div class="description-text">
+        <p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
+        <p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
+      </div>
+
+      <!-- ELIGIBILITY CHECK -->
+      <div id="eligibility-section" class="eligibility-card">
+        <h3>Eligibility Check</h3>
+        <p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
+        
+        <div class="radio-group">
+          <p>Are you currently a BS Electronics Engineering student?</p>
+          <label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
+          <label><input type="radio" name="isBSECE" value="no" /> No</label>
+        </div>
+
+        <div class="radio-group">
+          <p>Are you graduating this semester?</p>
+          <label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
+          <label><input type="radio" name="isGraduating" value="no" /> No</label>
+        </div>
+
+        <button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
+      </div>
+
+      <!-- INELIGIBLE MESSAGE (Hidden by default) -->
+      <div id="ineligible-message" class="hidden-message">
+        <p>Unfortunately, you are ineligible to join UP IECEP.</p>
+        <p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
+      </div>
+
+      <!-- THE ACTUAL FORM (Hidden by default) -->
+      <!-- PASTE YOUR GOOGLE SCRIPT URL IN THE ACTION ATTRIBUTE BELOW -->
+      <form id="apply-form" class="hidden-form" action="https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec">
+        <h3>Applicant Details</h3>
+        
+        <div class="input-group">
+          <label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
+          <input type="text" id="fullName" name="fullName" required placeholder="DELA CRUZ, Juan M." />
+        </div>
+
+        <div class="input-group">
+          <label for="nickname">Nickname</label>
+          <input type="text" id="nickname" name="nickname" required placeholder="Juan" />
+        </div>
+
+        <div class="input-group">
+          <label for="studentNumber">Student Number <span>(Format: 20XXXXXXX)</span></label>
+          <input type="text" id="studentNumber" name="studentNumber" pattern="20\d{7}" required placeholder="20XXXXXXX" />
+        </div>
+
+        <div class="input-group">
+          <label for="yearStanding">Year Standing</label>
+          <select id="yearStanding" name="yearStanding" required>
+            <option value="" disabled selected>Select your year standing</option>
+            <option value="I">I</option>
+            <option value="II">II</option>
+            <option value="III">III</option>
+            <option value="IV">IV</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+
+        <div class="input-group">
+          <label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
+          <input type="tel" id="mobileNumber" name="mobileNumber" pattern="09\d{9}" required placeholder="09XXXXXXXXX" />
+        </div>
+
+        <div class="input-group">
+          <label for="email">Email Address</label>
+          <input type="email" id="email" name="email" required placeholder="jdelacruz@up.edu.ph" />
+        </div>
+
+        <div class="input-group">
+          <label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
+          <input type="text" id="facebookLink" name="facebookLink" required placeholder="facebook.com/IECEPUPD" />
+        </div>
+
+        <div class="input-group">
+          <label for="source">How did you learn about UP IECEP?</label>
+          <select id="source" name="source" required>
+            <option value="" disabled selected>Select an option</option>
+            <option value="Family">Family</option>
+            <option value="Friends">Friends</option>
+            <option value="Social Media">Social Media</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+
+        <div class="input-group">
+          <label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
+          <textarea id="funActivities" name="funActivities" rows="4" placeholder="Share your ideas here!"></textarea>
+        </div>
+
+        <button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
+        <p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
+      </form>
+      
+      <!-- SUCCESS MESSAGE (Hidden by default) -->
+      <div id="success-message" class="hidden-message success">
+        <h3>Application Submitted!</h3>
+        <p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
+      </div>
+
+    </div>
   </section>
 </Layout>
+
+<script>
+  // Elements
+  const eligibilitySection = document.getElementById('eligibility-section');
+  const checkBtn = document.getElementById('check-eligibility-btn');
+  const ineligibleMsg = document.getElementById('ineligible-message');
+  const mainForm = document.getElementById('apply-form') as HTMLFormElement;
+  const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
+  const loadingMsg = document.getElementById('loading-msg');
+  const successMsg = document.getElementById('success-message');
+
+  // Eligibility Logic
+  if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
+    checkBtn.addEventListener('click', () => {
+      // Get the selected values safely
+      const isBSECENode = document.querySelector('input[name="isBSECE"]:checked') as HTMLInputElement;
+      const isGraduatingNode = document.querySelector('input[name="isGraduating"]:checked') as HTMLInputElement;
+
+      if (!isBSECENode || !isGraduatingNode) {
+        alert("Please answer both eligibility questions to proceed.");
+        return;
+      }
+
+      const isBSECE = isBSECENode.value;
+      const isGraduating = isGraduatingNode.value;
+
+      // Hide the eligibility card
+      eligibilitySection.style.display = 'none';
+
+      // Check criteria: Must be ECE (yes) and NOT graduating (no)
+      if (isBSECE === 'yes' && isGraduating === 'no') {
+        mainForm.style.display = 'block'; // Show the form!
+      } else {
+        ineligibleMsg.style.display = 'block'; // Show rejection message
+      }
+    });
+  }
+
+  // Form Submission Logic
+  if (mainForm) {
+    mainForm.addEventListener('submit', (e) => {
+      e.preventDefault(); // Stop normal page reload
+      
+      submitBtn.disabled = true;
+      submitBtn.style.display = 'none';
+      if(loadingMsg) loadingMsg.style.display = 'block';
+
+      // Send the data to the Google Script silently
+      fetch(mainForm.action, {
+        method: 'POST',
+        body: new FormData(mainForm)
+      })
+      .then(response => response.json())
+      .then(data => {
+        if(data.result === 'success') {
+          mainForm.style.display = 'none'; // Hide form
+          if(successMsg) successMsg.style.display = 'block'; // Show success message
+        } else {
+          alert('There was an error submitting your form. Please try again.');
+          submitBtn.disabled = false;
+          submitBtn.style.display = 'block';
+          if(loadingMsg) loadingMsg.style.display = 'none';
+        }
+      })
+      .catch(error => {
+        alert('A network error occurred. Please try again.');
+        submitBtn.disabled = false;
+        submitBtn.style.display = 'block';
+        if(loadingMsg) loadingMsg.style.display = 'none';
+      });
+    });
+  }
+</script>
\ No newline at end of file
diff --git a/src/styles/apply.scss b/src/styles/apply.scss
new file mode 100644
index 0000000..b4b87b3
--- /dev/null
+++ b/src/styles/apply.scss
@@ -0,0 +1,160 @@
+@import './variables.scss';
+
+.registration-section {
+  padding-block: 8rem;
+  padding-inline: 1rem;
+  min-height: 100vh;
+  background-color: #f9fafb; /* Light background to make the white form pop */
+
+  .form-container {
+    max-width: 700px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 3rem;
+    border-radius: 1rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+
+    h1 {
+      text-align: center;
+      color: $primary;
+      font-size: 2.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .description-text {
+      margin-bottom: 2.5rem;
+      p {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #4a4a4a;
+        margin-bottom: 1rem;
+      }
+      .privacy-notice {
+        font-size: 0.85rem;
+        font-style: italic;
+        color: #6b7280;
+      }
+    }
+
+    /* Eligibility Card */
+    .eligibility-card {
+      background-color: $background-accent;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      border-left: 4px solid $secondary;
+      
+      h3 { margin-bottom: 1rem; color: $dark; }
+      
+      .radio-group {
+        margin-bottom: 1.5rem;
+        p { margin-bottom: 0.5rem; font-weight: 600; }
+        label {
+          display: inline-block;
+          margin-right: 1.5rem;
+          cursor: pointer;
+          input { margin-right: 0.5rem; }
+        }
+      }
+    }
+
+    /* Hidden Utilities */
+    .hidden-message {
+      display: none;
+      text-align: center;
+      padding: 2rem;
+      background-color: #fef2f2;
+      border: 1px solid #fca5a5;
+      border-radius: 0.5rem;
+      p { color: #991b1b; font-weight: 600; margin-bottom: 0.5rem; }
+      
+      &.success {
+        background-color: #f0fdf4;
+        border-color: #86efac;
+        h3 { color: #166534; font-size: 1.5rem; margin-bottom: 1rem; }
+        p { color: #15803d; }
+      }
+    }
+
+    .hidden-form { display: none; }
+
+    /* Main Form Styling */
+    form {
+      margin-top: 2rem;
+      h3 {
+        color: $primary;
+        margin-bottom: 1.5rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid $background-accent;
+      }
+
+      .input-group {
+        margin-bottom: 1.5rem;
+
+        label {
+          display: block;
+          font-weight: 700;
+          margin-bottom: 0.5rem;
+          color: $dark;
+
+          span {
+            font-weight: 400;
+            font-size: 0.8rem;
+            color: #6b7280;
+          }
+        }
+
+        input[type="text"],
+        input[type="tel"],
+        input[type="email"],
+        select,
+        textarea {
+          width: 100%;
+          padding: 0.75rem;
+          border: 1px solid #d1d5db;
+          border-radius: 0.5rem;
+          font-family: inherit;
+          font-size: 1rem;
+          transition: border-color 0.2s ease;
+
+          &:focus {
+            outline: none;
+            border-color: $primary;
+            box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1);
+          }
+        }
+
+        textarea { resize: vertical; }
+      }
+    }
+
+    /* Buttons */
+    .submit-btn {
+      display: block;
+      width: 100%;
+      background-color: $primary;
+      color: white;
+      font-size: 1.1rem;
+      font-weight: 700;
+      padding: 1rem;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: darken($primary, 10%);
+      }
+    }
+  }
+}
+
+/* Mobile Adjustments */
+@media screen and (max-width: 768px) {
+  .registration-section {
+    padding-top: 6rem;
+    .form-container {
+      padding: 1.5rem;
+      h1 { font-size: 2rem; }
+    }
+  }
+}