Index: backend/scripts/toggleModeratorStatus.js
===================================================================
--- backend/scripts/toggleModeratorStatus.js	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ backend/scripts/toggleModeratorStatus.js	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -1,7 +1,14 @@
 const { createClient } = require('@supabase/supabase-js');
-require('dotenv').config();
+const path = require('path');
+
+// Load .env from parent directory (backend/)
+require('dotenv').config({ path: path.join(__dirname, '..', '.env') });
 
 // This script toggles the moderator status of a user in the Supabase database.
 // node scripts/toggleModeratorStatus.js USER_ID_HERE
+
+// Debug: Check if env vars are loaded
+console.log('SUPABASE_URL:', process.env.SUPABASE_URL ? 'Loaded' : 'Not loaded');
+console.log('SERVICE_ROLE_KEY:', process.env.SUPABASE_SERVICE_ROLE_KEY ? 'Loaded' : 'Not loaded');
 
 const supabase = createClient(
Index: client/src/LandingPage/LandingPage.jsx
===================================================================
--- client/src/LandingPage/LandingPage.jsx	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ client/src/LandingPage/LandingPage.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -1,9 +1,10 @@
-import React from 'react';
-import Hero from './components/Hero';
-import VisionSection from './components/VisionSection';
-import Footer from './components/Footer';
-import Intro from './components/Intro';
-import NavbarLanding from './components/NavbarLanding';
-import LeaderBoardEx from '@/LandingPage/components/LeaderBoardEx.jsx';
+import React from "react";
+import Hero from "./components/Hero";
+import VisionSection from "./components/VisionSection";
+import Footer from "./components/Footer";
+import Intro from "./components/Intro";
+import NavbarLanding from "./components/NavbarLanding";
+import LeaderBoardEx from "@/LandingPage/components/LeaderBoardEx.jsx";
+import { OurRankSystem } from "./components/OurRankSystem";
 
 const LandingPage = () => {
@@ -15,4 +16,5 @@
       <VisionSection />
       <LeaderBoardEx />
+      <OurRankSystem />
       <Footer />
     </div>
Index: client/src/LandingPage/components/Footer.jsx
===================================================================
--- client/src/LandingPage/components/Footer.jsx	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ client/src/LandingPage/components/Footer.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -1,12 +1,43 @@
-import React from 'react';
-import logoIcon from '../../assets/images/logoIcon.png';
+import React from "react";
+import logoIcon from "../../assets/images/logoIcon.png";
+import { useNavigate } from "react-router-dom";
+
 const Footer = () => {
+  const navigate = useNavigate();
   return (
-    <footer className="footer footer-horizontal footer-center bg-base-200 text-base-content rounded p-10 b">
+    <footer className="footer footer-horizontal footer-center bg-base-100 text-base-content rounded p-10 b">
       <nav className="grid grid-flow-col gap-4">
-        <a className="link link-hover">Register</a>
-        <a className="link link-hover">Log In</a>
-        <a className="link link-hover">Attempt a challenge</a>
-        <a className="link link-hover">Leaderboard</a>
+        <a
+          className="link link-hover"
+          onClick={() => {
+            navigate("/register");
+          }}
+        >
+          Register
+        </a>
+        <a
+          className="link link-hover"
+          onClick={() => {
+            navigate("/login");
+          }}
+        >
+          Log In
+        </a>
+        <a
+          className="link link-hover"
+          onClick={() => {
+            navigate("/dashboard");
+          }}
+        >
+          Attempt a challenge
+        </a>
+        <a
+          className="link link-hover"
+          onClick={() => {
+            navigate("/dashboard/leaderboard");
+          }}
+        >
+          Leaderboard
+        </a>
       </nav>
       <nav>
Index: client/src/LandingPage/components/Hero.jsx
===================================================================
--- client/src/LandingPage/components/Hero.jsx	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ client/src/LandingPage/components/Hero.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -1,8 +1,9 @@
 import React from 'react';
 import hero from '../../assets/images/hero-bg.jpg';
-import { Link, useNavigate } from 'react-router-dom';
+import {  useNavigate } from 'react-router-dom';
 
 const Hero = () => {
   const user = JSON.parse(localStorage.getItem('user'));
+  const navigate = useNavigate();
   return (
     <div
@@ -14,18 +15,24 @@
       <div className="hero-overlay "></div>
       <div className="hero-content text-neutral-content text-center bg-black/70 p-20 rounded-lg">
-        <div className="max-w-md">
-          <h1 className="mb-5 text-6xl font-bold">FINKI RANKED</h1>
+        <div className="w-full">
+          {!user && (
+              <h1 className="mb-5 text-6xl font-bold">FINKI RANKED</h1>
+          )}
+          {user && (
+              <h1 className="mb-5 text-4xl font-bold">Welcome back, {user.username}</h1>
+          )}
+
           <p className="mb-5">
-            Daily coding challenges and competitions for FINKI students
+          Daily coding challenges and competitions for FINKI students
           </p>
           {!user && (
-            <Link to="/login" className="btn btn-xl">
+            <a className="btn btn-xl" onClick={() => navigate('/login')}>
               Join now
-            </Link>
+            </a>
           )}
           {user && (
-            <Link to="/dashboard" className="btn btn-xl">
-              Join now
-            </Link>
+            <a className="btn btn-xl" onClick={() => navigate('/dashboard')}>
+              Solve today's challenge
+            </a>
           )}
         </div>
Index: client/src/LandingPage/components/NavbarLanding.jsx
===================================================================
--- client/src/LandingPage/components/NavbarLanding.jsx	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ client/src/LandingPage/components/NavbarLanding.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -25,5 +25,5 @@
         {user && (
           <button className="btn btn-lg" onClick={() => navigate("/dashboard")}>
-            {user.username}
+            To Dashboard
           </button>
         )}
Index: client/src/LandingPage/components/OurRankSystem.jsx
===================================================================
--- client/src/LandingPage/components/OurRankSystem.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
+++ client/src/LandingPage/components/OurRankSystem.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -0,0 +1,83 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { RANK_DATA } from "../../utils/rankUtils";
+
+export const OurRankSystem = () => {
+  // Convert RANK_DATA object to array and sort by id
+  const rankData = Object.values(RANK_DATA).sort((a, b) => a.id - b.id);
+
+  return (
+    <div
+      data-theme="luxury"
+      className="dashboard bg-base-200 flex overflow-none p-20"
+    >
+      <div className="flex w-full flex-col justify-center items-center p-20 gap-10">
+        <h1 className="text-4xl font-bold">Our Ranking System</h1>
+        <p className="text-lg text-center max-w-2xl">
+          Climb the ranks and show your coding prowess! Each rank represents
+          your dedication and skill level in competitive programming.
+        </p>
+
+        <div className="rounded-box border border-base-content/5 bg-base-100 w-full max-w-4xl p-10">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Rank #</th>
+                <th>Title</th>
+                <th>Required Points</th>
+                <th>Icon</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rankData.map((rank) => (
+                <tr key={rank.id} className="hover">
+                  <th>{rank.id}</th>
+                  <td className="font-medium">{rank.title}</td>
+                  <td className="font-mono font-bold">
+                    {rank.requiredPoints.toLocaleString()} pts
+                  </td>
+                  <td>
+                    <div className="flex items-center gap-2">
+                      <img
+                        src={rank.icon}
+                        alt={rank.title}
+                        className="w-8 h-8"
+                        onError={(e) => {
+                          e.target.style.display = "none";
+                        }}
+                      />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="text-center text-base-content/70 max-w-2xl">
+          <p className="mb-4">
+            <strong>How to earn points:</strong>
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <div className="bg-base-100 p-6 rounded-lg">
+              <h3 className="font-semibold mb-2">Early bird gets the worm</h3>
+              <p>
+                Solve the challenges as early as you can every day. Remember
+                they start 7 AM sharp
+              </p>
+            </div>
+            <div className="bg-base-100 p-6 rounded-lg">
+              <h3 className="font-semibold mb-2">
+                As few attempts as possible
+              </h3>
+              <p>
+                Every additional attempt on the excercise earns you less points
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
Index: client/src/LandingPage/components/VisionSection.jsx
===================================================================
--- client/src/LandingPage/components/VisionSection.jsx	(revision 61b18adf6362022c2a5e3b3400b97869bae90c10)
+++ client/src/LandingPage/components/VisionSection.jsx	(revision 4bd064129e6be9990d13c169ff7bb451d50f4f54)
@@ -1,5 +1,9 @@
 import React from "react";
 import lista from "../../assets/images/listaNoBg.png";
+import {useNavigate} from "react-router-dom";
 const VisionSection = () => {
+
+  const navigate = useNavigate();
+    const user = JSON.parse(localStorage.getItem("user"));
   return (
     <div className="hero bg-base-200 min-h-[80vh]">
@@ -16,5 +20,5 @@
             leaderboard.
           </p>
-          <a className="btn btn-xl w-80 bg-black">Join now</a>
+          <a className="btn btn-xl w-80 bg-black" onClick={() => { user ? navigate("/dashboard") : navigate("/register") }}>Join now</a>
         </div>
         <img src={lista} className="w-100 h-100" />