diff --git a/api/index.py b/api/index.py
index 1ef889e..e4b57f4 100644
--- a/api/index.py
+++ b/api/index.py
@@ -96,3 +96,149 @@ def get(self, url_tag):
 
 
 api.add_resource(Game, "/api/g/<string:url_tag>")
+
+
+class Scoreboard(Resource):
+    """Scoreboard"""
+
+    def get(self, url_tag):
+        """Get the scoreboard for an existing game."""
+
+        # TODO get game id from url_tag then filter scoreboard, don't filter by foreign key
+
+        try:
+            res = (
+                supabase.table("scoreboard_games_profiles")
+                .select("*, games!inner(url_tag), profiles!inner(username)")
+                .eq("games.url_tag", url_tag)
+                .execute()
+            )
+            return {"success": True, "data": res.data, "count": len(res.data)}
+        except APIError as e:
+            return {"success": False, "message": e.message, "count": 0}, 500
+
+    def post(self, url_tag):
+        """Add or update a user to the scoreboard for an existing game."""
+        req = request.get_json()
+        check_auth(req, req["user_id"])
+
+        try:
+            game_id, user_id, details = (
+                req["game_id"],
+                req["user_id"],
+                req["details"],
+            )
+
+            # see if user has previous scoreboard submission
+            res = (
+                supabase.table("scoreboard_games_profiles")
+                .select("*")
+                .eq("game_id", game_id)
+                .eq("user_id", user_id)
+                .execute()
+            )
+
+            if len(res.data) > 0:
+                # TODO if user has previous submission, update it
+                return {"success": True, "data": res.data, "count": len(res.data)}
+            else:
+                # if user has no previous submission, insert new row
+                res = (
+                    supabase.table("scoreboard_games_profiles")
+                    .insert(
+                        {
+                            "game_id": game_id,
+                            "user_id": user_id,
+                            "details": details,
+                        }
+                    )
+                    .execute()
+                )
+
+                return {"success": True, "data": res.data, "count": len(res.data)}
+
+        except APIError as e:
+            return {
+                "success": False,
+                "message": e.message,
+            }, 500
+
+
+api.add_resource(Scoreboard, "/api/g/<string:url_tag>/scoreboard")
+
+
+class Rating(Resource):
+    """Ratings & Comments"""
+
+    def get(self, url_tag):
+        """Get the ratings and comments for an existing game."""
+
+        # TODO get game id from url_tag then filter ratings, don't filter by foreign key
+        # TODO do this for both get and post, update apiService.js to query by game id not url_tag
+
+        try:
+            res = (
+                supabase.table("ratings")
+                .select("*, games!inner(url_tag), profiles!inner(id, username)")
+                .eq("games.url_tag", url_tag)
+                .execute()
+            )
+            return {"success": True, "data": res.data, "count": len(res.data)}
+        except APIError as e:
+            return {"success": False, "message": e.message, "count": 0}, 500
+
+    def post(self, url_tag):
+        """Create a new rating/comment for an existing game."""
+        req = request.get_json()
+        check_auth(req, req["user_id"])
+
+        try:
+            game_id, user_id, rating, comment = (
+                req["game_id"],
+                req["user_id"],
+                req["rating"],
+                req["comment"],
+            )
+
+            # see if user has previously left a rating/comment
+            res = (
+                supabase.table("ratings")
+                .select("*")
+                .eq("game_id", game_id)
+                .eq("user_id", user_id)
+                .execute()
+            )
+
+            if len(res.data) > 0:
+                # user has already left a rating/comment
+                return {
+                    "success": False,
+                    "message": "You have already left a rating/comment for this game.",
+                }
+            else:
+                # if user has no previous rating/comment, insert new row
+                res = (
+                    supabase.table("ratings")
+                    .insert(
+                        {
+                            "game_id": game_id,
+                            "user_id": user_id,
+                            "rating": rating,
+                            "comment": comment,
+                        }
+                    )
+                    .execute()
+                )
+
+                return {"success": True, "data": res.data, "count": len(res.data)}
+
+        except APIError as e:
+            return {
+                "success": False,
+                "message": e.message,
+            }, 500
+
+    # TODO put method to update rating/comment
+
+
+api.add_resource(Rating, "/api/g/<string:url_tag>/rating")
diff --git a/src/app/auth/signout/route.js b/src/app/auth/signout/route.js
index 4332298..74bd5ab 100644
--- a/src/app/auth/signout/route.js
+++ b/src/app/auth/signout/route.js
@@ -17,7 +17,7 @@ export async function POST(req) {
   }
 
   revalidatePath("/", "layout");
-  return NextResponse.redirect(new URL("/login", req.url), {
+  return NextResponse.redirect(new URL("/", req.url), {
     status: 302,
   });
 }
diff --git a/src/app/g/[slug]/details/page.jsx b/src/app/g/[slug]/details/page.jsx
new file mode 100644
index 0000000..753975a
--- /dev/null
+++ b/src/app/g/[slug]/details/page.jsx
@@ -0,0 +1,320 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Input,
+  Table,
+  Textarea,
+} from "@chakra-ui/react";
+import createClient from "@/utils/supabase/client";
+import {
+  createRating,
+  getGame,
+  getRatings,
+  getScoreboard,
+} from "@/services/apiService";
+
+// Scoreboard React component
+function Scoreboard({ scores }) {
+  // TODO sorting by some metric (e.g. score) before displaying
+  // TODO style table
+  return (
+    <Container>
+      <Heading as="h2" size="md" mb={4}>
+        Scoreboard
+      </Heading>
+      <Table>
+        <thead>
+          <tr>
+            <th>Rank</th>
+            <th>Name</th>
+            <th>Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          {scores
+            .sort() // TODO sort by score
+            .map((score, index) => (
+              <tr key={score.id}>
+                <td>{index + 1}</td>
+                <td>{score.profiles.username}</td>
+                <td>{score.details ? score.details.score : ""}</td>
+              </tr>
+            ))}
+        </tbody>
+      </Table>
+    </Container>
+  );
+}
+
+function Ratings({ ratings }) {
+  return (
+    <Container>
+      <Heading as="h2" size="md" mb={4}>
+        Ratings
+      </Heading>
+      <Table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Rating</th>
+            <th>Comment</th>
+          </tr>
+        </thead>
+        <tbody>
+          {ratings
+            .sort() // TODO sort by rating
+            .map((rating) => (
+              <tr key={rating.id}>
+                <td>{rating.profiles.username}</td>
+                <td>{rating.rating}</td>
+                <td>{rating.comment}</td>
+              </tr>
+            ))}
+        </tbody>
+      </Table>
+    </Container>
+  );
+}
+
+// Component to create a new rating
+function CreateRating({
+  user,
+  callCreateRating,
+  rating,
+  setRating,
+  comment,
+  setComment,
+  ratingCreated,
+}) {
+  if (!user) {
+    return (
+      <Box>
+        <Link href="/login">
+          <Button variant="link">Log in</Button>
+        </Link>{" "}
+        to rate this game.
+      </Box>
+    );
+  }
+
+  if (ratingCreated) {
+    return <Box>Rating created successfully!</Box>;
+  }
+
+  return (
+    <Box>
+      <Heading as="h2" size="md" mb={4}>
+        Rate This Game
+      </Heading>
+      {/* Textbox */}
+      <Textarea
+        placeholder="Write your review here"
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+      />
+      {/* Rating */}
+      <Input
+        mt={4}
+        placeholder="Rating"
+        type="number"
+        value={rating}
+        onChange={(e) => setRating(e.target.value)}
+      />
+      {/* Submit button */}
+      <Button mt={4} type="submit" value="Submit" onClick={callCreateRating}>
+        Create
+      </Button>
+    </Box>
+  );
+}
+
+export default function GameDetailsPage({ params: { slug } }) {
+  const router = useRouter();
+  const supabase = createClient();
+
+  const [loading, setLoading] = useState(true);
+  const [game, setGame] = useState(null);
+  const [scores, setScores] = useState([]);
+  const [ratings, setRatings] = useState([]);
+  const [user, setUser] = useState(null);
+
+  const [rating, setRating] = useState("");
+  const [comment, setComment] = useState("");
+  const [ratingCreated, setRatingCreated] = useState(false);
+
+  const callCreateRating = useCallback(() => {
+    createRating(slug, game.id, rating, comment).then((res) => {
+      if (res.success) {
+        // redirect user to newly-created game
+        setRatingCreated(true);
+
+        // get game's ratings
+        getRatings(slug)
+          .then((ratingsRes) => {
+            if (ratingsRes.success) {
+              setRatings(ratingsRes.data); // set game scores, even if empty
+            } else {
+              // getScoreboard API call failed
+              // TODO display error message in GUI
+              console.error(ratingsRes);
+            }
+          })
+          .catch((e) => {
+            console.error(e); // TODO display error message in GUI
+            router.push("/error");
+          });
+      } else {
+        console.error(res.message); // TODO show in GUI
+      }
+    });
+  }, [game, rating, comment]);
+
+  // on page load, call API to get game details from slug (game's url tag)
+  useEffect(() => {
+    getGame(slug)
+      .then((res) => {
+        if (res.success) {
+          if (res.count > 0) {
+            setGame(res.data[0]); // set game that matches url tag, if found in DB
+
+            // get game's scoreboard via different API call
+            // TODO theoretically can run in parallel with getGame
+            getScoreboard(slug)
+              .then((scoreboardRes) => {
+                if (scoreboardRes.success) {
+                  setScores(scoreboardRes.data); // set game scores, even if empty
+                } else {
+                  // getScoreboard API call failed
+                  // TODO display error message in GUI
+                  console.error(scoreboardRes);
+                }
+              })
+              .catch((e) => {
+                console.error(e); // TODO display error message in GUI
+                router.push("/error");
+              });
+
+            // get game's ratings via different API call
+            getRatings(slug)
+              .then((ratingsRes) => {
+                if (ratingsRes.success) {
+                  setRatings(ratingsRes.data); // set game scores, even if empty
+                } else {
+                  // getScoreboard API call failed
+                  // TODO display error message in GUI
+                  console.error(ratingsRes);
+                }
+              })
+              .catch((e) => {
+                console.error(e); // TODO display error message in GUI
+                router.push("/error");
+              });
+          }
+        } else {
+          // getGame API call failed
+          // TODO display error message in GUI
+          console.error(res);
+        }
+
+        setLoading(false);
+      })
+      .catch((e) => {
+        console.error(e); // TODO display error message in GUI
+        router.push("/error");
+      });
+  }, []);
+
+  // do not display component to create rating if not logged in
+  useEffect(() => {
+    (async () => {
+      const {
+        data: { user: _user },
+      } = await supabase.auth.getUser();
+
+      setUser(_user);
+    })().catch((err) => {
+      console.error(err); // TODO display error message to user
+    });
+  }, []);
+
+  // do not display component to create rating if user already rated game
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+    if (!ratings) {
+      return;
+    }
+    ratings.forEach((_rating) => {
+      console.log(_rating);
+      if (_rating.profiles.id === user.id) {
+        setRatingCreated(true);
+      }
+    });
+  }, [user, ratings]);
+
+  return (
+    <Container>
+      <Heading mt={4} mb={8}>
+        {game && game.name}
+      </Heading>
+
+      <Box>
+        <Button colorScheme="blue" onClick={() => router.push(`/g/${slug}`)}>
+          Play Game
+        </Button>
+      </Box>
+      {
+        // eslint-disable-next-line no-nested-ternary
+        loading ? (
+          "Loading..." // before API call finishes, display loading message
+        ) : game ? (
+          // if game found, render details
+          <>
+            <Box mt={12}>
+              {
+                // Scoreboard
+                scores &&
+                  Scoreboard({
+                    scores,
+                  })
+              }
+            </Box>
+
+            <Box mt={12}>
+              {
+                // Ratings
+                Ratings({ ratings })
+              }
+            </Box>
+          </>
+        ) : (
+          "Game not found!"
+        ) // if game not found, display error message
+      }
+
+      {
+        // Create Rating
+      }
+      <>
+        <Box mt={12} />
+        {CreateRating({
+          user,
+          callCreateRating,
+          rating,
+          setRating,
+          comment,
+          setComment,
+          ratingCreated,
+        })}
+      </>
+    </Container>
+  );
+}
diff --git a/src/app/g/[slug]/page.jsx b/src/app/g/[slug]/page.jsx
index 09b40f6..7b7befe 100644
--- a/src/app/g/[slug]/page.jsx
+++ b/src/app/g/[slug]/page.jsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
+  Box,
   Button,
   Center,
   Container,
@@ -12,10 +13,11 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { getGame } from "@/services/apiService";
+import createClient from "@/utils/supabase/client";
+import { getGame, updateScoreboard } from "@/services/apiService";
 
 // Riddle Type Game
-function Riddle({ question, answer }) {
+function Riddle({ question, answer, saveToScoreboard }) {
   const [guess, setGuess] = useState("");
   const [result, setResult] = useState("");
 
@@ -23,6 +25,8 @@ function Riddle({ question, answer }) {
   function checkAnswer() {
     if (guess.toLowerCase() === answer.toLowerCase()) {
       setResult("Correct!"); // TODO future add fun animations
+
+      saveToScoreboard({});
     } else {
       setResult("Incorrect!");
     }
@@ -62,10 +66,16 @@ function Riddle({ question, answer }) {
 }
 
 // render correct component for the type of game
-function SelectGameType({ type, game }) {
+function SelectGameType({ type, game, saveToScoreboard }) {
   switch (type) {
     case "riddle":
-      return <Riddle question={game.question} answer={game.answer} />;
+      return (
+        <Riddle
+          question={game.question}
+          answer={game.answer}
+          saveToScoreboard={saveToScoreboard}
+        />
+      );
 
     // unimplemented game types -- code should never reach here
     case "":
@@ -76,6 +86,7 @@ function SelectGameType({ type, game }) {
 
 export default function GamePage({ params: { slug } }) {
   const router = useRouter();
+  const supabase = createClient();
 
   const [loading, setLoading] = useState(true);
   const [game, setGame] = useState(null);
@@ -102,12 +113,37 @@ export default function GamePage({ params: { slug } }) {
       });
   }, []);
 
+  // function that calls API service to update scoreboard
+  const saveToScoreboard = useCallback(
+    async (details) => {
+      // only update scoreboard if logged in
+      if (!(await supabase.auth.getUser()).data.user) {
+        return;
+      }
+
+      const res = await updateScoreboard(slug, game.id, details);
+      if (!res.success) {
+        console.error(res.message); // TODO show in GUI
+      }
+    },
+    [game],
+  );
+
   return (
     <Container>
       <Heading mt={4} mb={8}>
         {game && game.name}
       </Heading>
 
+      <Box my={12}>
+        <Button
+          colorScheme="blue"
+          onClick={() => router.push(`/g/${slug}/details`)}
+        >
+          Details
+        </Button>
+      </Box>
+
       {
         // eslint-disable-next-line no-nested-ternary
         loading
@@ -117,6 +153,7 @@ export default function GamePage({ params: { slug } }) {
               SelectGameType({
                 type: game.type,
                 game: JSON.parse(game.details),
+                saveToScoreboard,
               })
             : "Game not found!" // if game not found, display error message
       }
diff --git a/src/app/gallery/page.jsx b/src/app/gallery/page.jsx
new file mode 100644
index 0000000..5c604c2
--- /dev/null
+++ b/src/app/gallery/page.jsx
@@ -0,0 +1,71 @@
+import {
+  Button,
+  Container,
+  Heading,
+  Table,
+  TableContainer,
+  TableCaption,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Tfoot,
+} from "@chakra-ui/react";
+import createClient from "@/utils/supabase/server";
+
+export default async function GalleryPage() {
+  const supabase = createClient();
+
+  // get all games from Supabase
+  // TODO move to Python API using api service
+  const { data: allGames, error } = await supabase
+    .from("games")
+    .select("*, profiles!inner(username)");
+
+  if (error) {
+    console.error(error); // TODO display error message in GUI
+    return <Container>Something went wrong!</Container>;
+  }
+
+  return (
+    <Container>
+      <Heading mt={4} mb={8}>
+        Gallery
+      </Heading>
+      <TableContainer>
+        <Table variant="simple">
+          <TableCaption>Browse user-created games!</TableCaption>
+          <Thead>
+            <Tr>
+              <Th>Game</Th>
+              <Th>Type</Th>
+              <Th>Created By</Th>
+              <Th />
+            </Tr>
+          </Thead>
+          <Tbody>
+            {allGames.map(({ id, name, type, profiles: { username } }) => (
+              <Tr key={id}>
+                <Td>{name}</Td>
+                <Td>{type}</Td>
+                <Td>{username}</Td>
+                <Td>
+                  <Button colorScheme="green">Play</Button>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+          <Tfoot>
+            <Tr>
+              <Th>Game</Th>
+              <Th>Type</Th>
+              <Th>Created By</Th>
+              <Th />
+            </Tr>
+          </Tfoot>
+        </Table>
+      </TableContainer>
+    </Container>
+  );
+}
diff --git a/src/app/login/actions.js b/src/app/login/actions.js
index bf33e5c..c9c07cd 100644
--- a/src/app/login/actions.js
+++ b/src/app/login/actions.js
@@ -25,5 +25,6 @@ export default async function login({ email, password }) {
   }
 
   revalidatePath("/", "layout");
-  redirect("/account");
+  // redirect("/account");
+  redirect("/");
 }
diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx
index 70a5205..c6c90ba 100644
--- a/src/app/login/page.jsx
+++ b/src/app/login/page.jsx
@@ -51,7 +51,7 @@ export default function Login() {
           Login
         </Heading>
         <Stack spacing={4}>
-          <p>Username/Email:</p>
+          <p>Email:</p>
           <Input
             placeholder=""
             value={email}
diff --git a/src/app/page.jsx b/src/app/page.jsx
index ca7c8f2..f684146 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,7 +1,16 @@
 import NextLink from "next/link";
 import { Box, Button, Container, Heading, Link } from "@chakra-ui/react";
+import createClient from "@/utils/supabase/server";
+
+export default async function Home() {
+  const supabase = createClient();
+
+  // Ensure user is logged in
+  const {
+    data: { user },
+    error,
+  } = await supabase.auth.getUser();
 
-export default function Home() {
   return (
     <Container>
       <Heading mt={4} mb={8}>
@@ -9,32 +18,43 @@ export default function Home() {
       </Heading>
 
       {/* TODO move these links to navbar etc */}
-      <Box mb={16}>
-        <Link as={NextLink} href="/login">
-          <Button colorScheme="blue">Login</Button>
-        </Link>
-        <br />
-        <br />
-        <Link as={NextLink} href="/register">
-          <Button colorScheme="green">Register</Button>
-        </Link>
-      </Box>
 
-      <Box>
-        <Link as={NextLink} href="/account">
-          <Button>Profile</Button>
-        </Link>
-        <br />
-        <br />
-        <Link as={NextLink} href="/create">
-          <Button>Create Game</Button>
+      <Box mb={12}>
+        <Link as={NextLink} href="/gallery">
+          <Button colorScheme="blue">Gallery</Button>
         </Link>
-        <br />
-        <br />
-        <form action="/auth/signout" method="post">
-          <Button type="submit">Sign out</Button>
-        </form>
       </Box>
+
+      {user && (
+        <Box mb={16}>
+          <Link as={NextLink} href="/account">
+            <Button>Profile</Button>
+          </Link>
+          <br />
+          <br />
+          <Link as={NextLink} href="/create">
+            <Button colorScheme="blue">Create Game</Button>
+          </Link>
+          <br />
+          <br />
+          <form action="/auth/signout" method="post">
+            <Button type="submit">Sign out</Button>
+          </form>
+        </Box>
+      )}
+
+      {!user && (
+        <Box mb={16}>
+          <Link as={NextLink} href="/login">
+            <Button colorScheme="blue">Login</Button>
+          </Link>
+          <br />
+          <br />
+          <Link as={NextLink} href="/register">
+            <Button colorScheme="green">Register</Button>
+          </Link>
+        </Box>
+      )}
     </Container>
   );
 }
diff --git a/src/services/apiService.js b/src/services/apiService.js
index 83684ba..60b4f49 100644
--- a/src/services/apiService.js
+++ b/src/services/apiService.js
@@ -3,6 +3,8 @@
 import axios from "axios";
 import createClient from "@/utils/supabase/server";
 
+// TODO refactor to generalize code
+
 // Create Axios instance
 const api = axios.create({
   baseURL: process.env.NEXT_PUBLIC_VERCEL_URL
@@ -63,5 +65,113 @@ async function createGame(gameDetails) {
   }
 }
 
+// Get & Update Scoreboard
+async function getScoreboard(gameUrlTag) {
+  try {
+    const res = await api.get(`/g/${gameUrlTag}/scoreboard`); // send GET request
+    if (res.data && res.data.success) {
+      return res.data;
+    }
+    throw new Error("Failed to retrieve scoreboard. Please try again.");
+  } catch (e) {
+    // manually create & return error response
+    return {
+      success: false,
+      message: e.response ? e.response.data.message : e.message || e,
+    };
+  }
+}
+
+async function updateScoreboard(gameUrlTag, gameId, submissionDetails) {
+  try {
+    // game details + Supabase auth info
+    const data = {
+      session: await supabase.auth.getSession(),
+      user_id: (await supabase.auth.getUser()).data.user.id,
+      game_id: gameId,
+      details: submissionDetails,
+    };
+
+    // send POST request
+    const res = await api.post(`/g/${gameUrlTag}/scoreboard`, data, {
+      timeout: 10000,
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (res.data && res.data.success) {
+      return res.data;
+    }
+
+    throw new Error("Failed to update scoreboard. Please try again.");
+  } catch (e) {
+    // manually create & return error response
+    return {
+      success: false,
+      message: e.response ? e.response.data.message : e.message || e,
+    };
+  }
+}
+
+// Get & Update Ratings
+async function getRatings(gameUrlTag) {
+  try {
+    const res = await api.get(`/g/${gameUrlTag}/rating`); // send GET request
+    if (res.data && res.data.success) {
+      return res.data;
+    }
+    throw new Error("Failed to retrieve ratings. Please try again.");
+  } catch (e) {
+    // manually create & return error response
+    return {
+      success: false,
+      message: e.response ? e.response.data.message : e.message || e,
+    };
+  }
+}
+
+async function createRating(gameUrlTag, gameId, rating, comment) {
+  try {
+    // game details + Supabase auth info
+    const data = {
+      session: await supabase.auth.getSession(),
+      user_id: (await supabase.auth.getUser()).data.user.id,
+      game_id: gameId,
+      rating,
+      comment,
+    };
+
+    // send POST request
+    const res = await api.post(`/g/${gameUrlTag}/rating`, data, {
+      timeout: 10000,
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (res.data && res.data.success) {
+      return res.data;
+    }
+
+    throw new Error("Failed to update ratings. Please try again.");
+  } catch (e) {
+    // manually create & return error response
+    return {
+      success: false,
+      message: e.response ? e.response.data.message : e.message || e,
+    };
+  }
+}
+
 // export the service functions
-export { getGame, createGame };
+export {
+  getGame,
+  createGame,
+  getScoreboard,
+  updateScoreboard,
+  getRatings,
+  createRating,
+};
diff --git a/vercel.json b/vercel.json
index 8d55e9d..7b2ec69 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,10 @@
 {
   "env": {
     "PYTHONPATH": "api/"
+  },
+  "functions": {
+    "api/**": {
+      "excludeFiles": "{.next,*.cache,node_modules,public,app}/**"
+    }
   }
 }