diff --git a/frontend/index.html b/frontend/index.html
index 1e56c24..28a6412 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -25,13 +25,13 @@
       <div class="hamburger" id="hamburger">
         <i class="fas fa-bars"></i>
       </div>
-      <ul class="nav-links">  
+      <ul class="nav-links">
         <li><a href="#">Home</a></li>
         <li><a href="course.html">Courses</a></li>
         <li><a href="#">Notes</a></li>
         <li><a href="IDE.html">IDE</a></li>
         <li><a href="#">Contact Us</a></li>
-        <li><a href="#" class="btn">Sign Up</a></li>
+        <li><a href="register.html" class="btn">Sign Up</a></li>
         <li><a href="#" class="btn">Login</a></li>
       </ul>
     </nav>
@@ -50,7 +50,7 @@ <h2>Your Courses</h2>
         <!-- Placeholder for purchased courses -->
         <p>You haven't bought any courses yet.</p>
       </div>
-    
+
       <h3>Recommended Courses</h3>
       <div class="recommended-courses">
         <!-- Example courses with thumbnails -->
@@ -134,7 +134,6 @@ <h3>Connect With Us</h3>
     </footer>
 
     <script src="script.js"></script>
-  </body> 
-
-</html>
+  </body>
 
+</html>
\ No newline at end of file
diff --git a/frontend/register.html b/frontend/register.html
new file mode 100644
index 0000000..196cf4f
--- /dev/null
+++ b/frontend/register.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - codeX100</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Registration Form -->
+    <section class="register-section">
+        <h2>Create Your Account</h2>
+        <form action="/register" method="POST" class="register-form" id="registerForm">
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="password">Password:</label>
+            <input type="password" id="password" name="password" required>
+
+            <button type="submit" class="btn-primary">Register</button>
+
+            <p>Or sign up using:</p>
+            <div class="oauth-buttons">
+                <a href="/auth/google" class="btn-oauth google">Sign Up with Google</a>
+                <a href="/auth/github" class="btn-oauth github">Sign Up with GitHub</a>
+            </div>
+        </form>
+    </section>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/frontend/script.js b/frontend/script.js
index ca89860..acbe92f 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -27,3 +27,37 @@ document.getElementById('hamburger').addEventListener('click', function() {
   }
 });
 
+/* new */
+const passport = require('passport');
+const GoogleStrategy = require('passport-google-oauth20').Strategy;
+const GitHubStrategy = require('passport-github2').Strategy;
+
+passport.use(new GoogleStrategy({
+    clientID: 'YOUR_GOOGLE_CLIENT_ID',
+    clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
+    callbackURL: '/auth/google/callback'
+}, (accessToken, refreshToken, profile, done) => {
+    // 注册或登录逻辑
+}));
+
+passport.use(new GitHubStrategy({
+    clientID: 'YOUR_GITHUB_CLIENT_ID',
+    clientSecret: 'YOUR_GITHUB_CLIENT_SECRET',
+    callbackURL: '/auth/github/callback'
+}, (accessToken, refreshToken, profile, done) => {
+    // 注册或登录逻辑
+}));
+
+// Google OAuth route
+app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
+app.get('/auth/google/callback', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
+    // 成功处理
+    res.redirect('/');
+});
+
+// GitHub OAuth route
+app.get('/auth/github', passport.authenticate('github', { scope: ['user:email'] }));
+app.get('/auth/github/callback', passport.authenticate('github', { failureRedirect: '/login' }), (req, res) => {
+    // 成功处理
+    res.redirect('/');
+});
diff --git a/frontend/styles.css b/frontend/styles.css
index aa7056f..8573866 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -502,4 +502,55 @@ body {
         width: 100%;
       }
     }
-  }
\ No newline at end of file
+  }
+
+  /* new register */
+  .register-section {
+    text-align: center;
+    padding: 50px;
+}
+
+.register-form {
+    display: inline-block;
+    text-align: left;
+    max-width: 400px;
+    width: 100%;
+    margin: auto;
+}
+
+.register-form input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.btn-primary {
+    background-color: #3498db;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+
+.oauth-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.btn-oauth {
+    text-decoration: none;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+}
+
+.btn-oauth.google {
+    background-color: #db4437;
+}
+
+.btn-oauth.github {
+    background-color: #333;
+}
