diff --git a/frontend/package.json b/frontend/package.json
index fc3ba53..5420eb1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@ramonak/react-progress-bar": "^5.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/frontend/src/Components/ScoreModal.js b/frontend/src/Components/ScoreModal.js
index 2a5643d..3367bc1 100644
--- a/frontend/src/Components/ScoreModal.js
+++ b/frontend/src/Components/ScoreModal.js
@@ -20,7 +20,7 @@ export default function ScoreModal({
               You Answered
             </Text>
             <Text fontFamily="monospace" fontSize={36} color="white">
-              {userGuess}
+              <YearEra year={userGuess} />
             </Text>
           </VStack>
         </FadeInUpBox>
@@ -30,7 +30,9 @@ export default function ScoreModal({
               Correct Answer
             </Text>
             <Text fontFamily="monospace" fontSize={36} color="white">
-              {gameState["gameObjects"][progression]["objectEndDate"]}
+              <YearEra
+                year={gameState["gameObjects"][progression]["objectEndDate"]}
+              />
             </Text>
           </VStack>
         </FadeInUpBox>
@@ -62,6 +64,9 @@ export default function ScoreModal({
             </Text>
             <Text color="green.300">
               <CountUp
+                start={
+                  gameState["score"] - gameState["roundScores"][progression]
+                }
                 end={gameState["score"]}
                 delay={1.2}
                 style={{
@@ -97,3 +102,13 @@ export default function ScoreModal({
     </Center>
   );
 }
+
+export function YearEra({ year }) {
+  const era = year >= 0 ? "C.E." : "B.C.E.";
+
+  return (
+    <span>
+      {year > 0 ? year : year * -1} {era}
+    </span>
+  );
+}
diff --git a/frontend/src/Pages/Game/ArtifactViewer.js b/frontend/src/Pages/Game/ArtifactViewer.js
index de442cd..924d98c 100644
--- a/frontend/src/Pages/Game/ArtifactViewer.js
+++ b/frontend/src/Pages/Game/ArtifactViewer.js
@@ -7,9 +7,12 @@ import {
   Box,
   Text,
   Center,
+  Icon,
 } from "@chakra-ui/react";
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
+import FadeInUpBox from "../../Components/FadeUp";
+import { FiZoomIn } from "react-icons/fi";
 
 export default function ArtifactViewer({ gameObjects, progression }) {
   const [bigImgSrc, setBigImgSrc] = useState(gameObjects[0]["primaryImage"]);
@@ -25,17 +28,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
   }, [progression]);
 
   return (
-    <HStack gap={5}>
-      {/* additional images */}
-      <VStack
-        maxH="500px"
-        overflowY="auto"
-        style={{ scrollBarWidth: "none", msOverflowStyle: "none" }}
-      >
-        <VStack gap={5}></VStack>
-      </VStack>
-
-      <HStack>
+    <HStack gap={5} pb={10}>
+      <VStack>
         {/* image */}
         {loading ? (
           <Box h={400} w={400}>
@@ -44,11 +38,19 @@ export default function ArtifactViewer({ gameObjects, progression }) {
             </Center>
           </Box>
         ) : (
-          <Zoom zoomMargin={400}>
-            <Image src={bigImgSrc} maxW={400} maxH={400} objectFit="contain" />
+          <Zoom zoomMargin={200}>
+            <Image src={bigImgSrc} w={400} h={400} objectFit="cover" />
           </Zoom>
         )}
-      </HStack>
+        <FadeInUpBox delay={2}>
+          <HStack mt={2}>
+            <Icon as={FiZoomIn} color="gray.500" fontSize={14} />
+            <Text color="gray.500" fontSize={14}>
+              Click image to enlarge
+            </Text>
+          </HStack>
+        </FadeInUpBox>
+      </VStack>
 
       {/* image description */}
       <VStack
@@ -70,7 +72,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               color="brand.700"
               fontFamily="monospace"
             >
-              {gameObjects[progression]["title"]}
+              {gameObjects[progression]["title"].substring(0, 75)}
+              {gameObjects[progression]["title"].length >= 75 && "..."}
             </Text>
           </VStack>
         )}
@@ -85,7 +88,9 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               color="brand.700"
               fontFamily="monospace"
             >
-              {gameObjects[progression]["artistDisplayName"]}
+              {gameObjects[progression]["artistDisplayName"].substring(0, 50)}
+              {gameObjects[progression]["artistDisplayName"].length >= 50 &&
+                "..."}
             </Text>
           </VStack>
         )}
@@ -100,7 +105,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               color="brand.700"
               fontFamily="monospace"
             >
-              {gameObjects[progression]["medium"]}
+              {gameObjects[progression]["medium"].substring(0, 75)}
+              {gameObjects[progression]["medium"].length >= 75 && "..."}
             </Text>
           </VStack>
         )}
diff --git a/frontend/src/Pages/Game/Game.js b/frontend/src/Pages/Game/Game.js
index fa2312c..a4a87e2 100644
--- a/frontend/src/Pages/Game/Game.js
+++ b/frontend/src/Pages/Game/Game.js
@@ -75,12 +75,7 @@ export default function Game({ setStage, gameState, setGameState }) {
   return (
     <VStack gap={10}>
       {/* top legend */}
-      <GameProgress
-        gameState={gameState}
-        setGameState={setGameState}
-        progression={progression}
-        setProgression={setProgression}
-      />
+      <GameProgress gameState={gameState} progression={progression} />
 
       {/* main content */}
       <ArtifactViewer
diff --git a/frontend/src/Pages/Game/GameProgress.js b/frontend/src/Pages/Game/GameProgress.js
index ee7a79c..ee48993 100644
--- a/frontend/src/Pages/Game/GameProgress.js
+++ b/frontend/src/Pages/Game/GameProgress.js
@@ -1,40 +1,11 @@
-import { Box, HStack, VStack, Icon, IconButton } from "@chakra-ui/react";
+import { Circle, HStack, VStack, Box } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import { useEffect } from "react";
-import {
-  FiCheckCircle,
-  FiChevronLeft,
-  FiChevronRight,
-  FiCircle,
-} from "react-icons/fi";
+import ProgressBar from "@ramonak/react-progress-bar";
 
-export default function GameProgress({
-  gameState,
-  setGameState,
-  progression,
-  setProgression,
-}) {
+export default function GameProgress({ gameState, progression }) {
   return (
     <HStack gap={10} position="absolute" top={10}>
-      <motion.div
-        initial={{ opacity: 0, x: 15 }} // start state
-        animate={{ opacity: 1, x: 0 }} // end state
-        transition={{
-          duration: 1.2,
-          delay: 0.6,
-          ease: [0.6, -0.05, 0.01, 0.99],
-        }}
-      >
-        <IconButton
-          colorScheme="brand"
-          boxShadow="md"
-          borderRadius={25}
-          onClick={() => {
-            if (progression != 0) setProgression(progression - 1);
-          }}
-          icon={<Icon as={FiChevronLeft} />}
-        />
-      </motion.div>
+      <Box width={500} />
 
       <motion.div
         initial={{ opacity: 0, y: -25 }} // start state
@@ -45,41 +16,28 @@ export default function GameProgress({
           ease: [0.6, -0.05, 0.01, 0.99],
         }}
       >
-        <VStack bg="white" p={5} borderRadius={20} boxShadow="lg" width={300}>
-          <HStack>
-            {gameState["playerGuessed"].map((guessed, index) => {
-              return (
-                <VStack w={8} key={index}>
-                  {guessed ? (
-                    <Icon
-                      as={FiCheckCircle}
-                      boxSize={7}
-                      color={index == progression ? "yellow.500" : "brand.500"}
-                      onClick={() => {
-                        setProgression(index);
-                      }}
-                      _hover={{ cursor: "pointer" }}
-                    />
-                  ) : (
-                    <Icon
-                      as={FiCircle}
-                      boxSize={7}
-                      color={index == progression ? "yellow.500" : "gray.500"}
-                      onClick={() => {
-                        setProgression(index);
-                      }}
-                      _hover={{ cursor: "pointer" }}
-                    />
-                  )}
-                </VStack>
-              );
-            })}
-          </HStack>
+        <VStack bg="white" p={2} borderRadius={20} boxShadow="lg">
+          <ProgressBar
+            maxCompleted={5}
+            completed={progression + 1}
+            width={250}
+            height={20}
+            bgColor="#276749"
+            customLabel={`${progression + 1}/5`}
+          />
         </VStack>
       </motion.div>
 
+      <TopMenuBar />
+    </HStack>
+  );
+}
+
+const TopMenuBar = () => {
+  return (
+    <HStack width={500}>
       <motion.div
-        initial={{ opacity: 0, x: -15 }} // start state
+        initial={{ opacity: 0, x: -25 }} // start state
         animate={{ opacity: 1, x: 0 }} // end state
         transition={{
           duration: 1.2,
@@ -87,16 +45,10 @@ export default function GameProgress({
           ease: [0.6, -0.05, 0.01, 0.99],
         }}
       >
-        <IconButton
-          colorScheme="brand"
-          boxShadow="md"
-          borderRadius={25}
-          onClick={() => {
-            if (progression != 4) setProgression(progression + 1);
-          }}
-          icon={<Icon as={FiChevronRight} />}
-        />
+        <VStack bg="white" p={2} borderRadius={20} boxShadow="lg">
+          <Circle />
+        </VStack>
       </motion.div>
     </HStack>
   );
-}
+};
diff --git a/frontend/src/Pages/Game/GuessingBox.js b/frontend/src/Pages/Game/GuessingBox.js
index 16d9d6c..b8e7e3c 100644
--- a/frontend/src/Pages/Game/GuessingBox.js
+++ b/frontend/src/Pages/Game/GuessingBox.js
@@ -25,6 +25,7 @@ export default function GuessingBox({
   setStage,
 }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isCE, setIsCE] = useState(true);
 
   const handleGuess = () => {
     // validate input
@@ -32,17 +33,24 @@ export default function GuessingBox({
       return;
     }
 
+    var playerGuess = 0;
+    if (!isCE) {
+      playerGuess = -1 * guess;
+      setGuess(-1 * guess);
+    } else playerGuess = 1 * guess;
+
     // get prev game state
     const playerGuessed = structuredClone(gameState["playerGuessed"]);
     playerGuessed[progression] = true; // set current progression to true
 
     const guessNumbers = structuredClone(gameState["guesses"]);
-    guessNumbers[progression] = guess;
+    guessNumbers[progression] = playerGuess;
 
     // calculate round score
     var roundScore = 0;
     const difference = Math.abs(
-      gameState["gameObjects"][progression]["objectEndDate"] - parseInt(guess)
+      gameState["gameObjects"][progression]["objectEndDate"] -
+        parseInt(playerGuess)
     );
     if (difference <= 1000) {
       roundScore = 1000 - difference;
@@ -86,30 +94,70 @@ export default function GuessingBox({
         <HStack gap={10}>
           <Box width={100}></Box>
           <VStack gap={5}>
-            <Input
-              autoFocus
-              width={175}
-              height={50}
-              placeholder="0000"
-              textAlign="center"
-              fontFamily="monospace"
+            <HStack
+              alignItems="center"
+              gap={0}
               borderRadius={20}
-              bg="white"
-              variant="outlined"
-              fontSize={36}
               _hover={{
-                shadow: "lg",
                 transform: "translateY(-5px)",
+                boxShadow: "lg",
                 transition: "0.2s",
               }}
-              type="number"
-              value={guess}
-              onChange={(e) => {
-                setGuess(e.target.value);
-              }}
-            ></Input>
+            >
+              <Input
+                autoFocus
+                borderBottomLeftRadius={20}
+                borderTopLeftRadius={20}
+                borderTopRightRadius={0}
+                borderBottomRightRadius={0}
+                variant="unstyled"
+                width={150}
+                height={50}
+                placeholder="0000"
+                textAlign="center"
+                fontFamily="monospace"
+                bg="white"
+                fontSize={36}
+                type="number"
+                value={guess}
+                onChange={(e) => {
+                  if (e.target.value.toString().charAt(0) == "-") {
+                    setIsCE(false);
+                    setGuess(e.target.value.substring(1));
+                  } else setGuess(e.target.value);
+                }}
+              />
+              <VStack
+                bg="white"
+                height={50}
+                width={100}
+                justifyContent="center"
+                borderTopRightRadius={20}
+                borderBottomRightRadius={20}
+                borderLeftWidth={1}
+                _hover={{
+                  cursor: "pointer",
+                  bg: "green.50",
+                  transition: "0.2s",
+                }}
+                onClick={() => {
+                  setIsCE(!isCE);
+                }}
+              >
+                <Text
+                  fontSize={18}
+                  fontFamily="monospace"
+                  fontWeight="600"
+                  userSelect="none"
+                >
+                  {isCE ? "C.E." : "B.C.E."}
+                </Text>
+              </VStack>
+            </HStack>
             <Text>Guess the year!</Text>
           </VStack>
+
+          {/* next button */}
           <AnimatePresence>
             {guess != "" ? (
               <motion.div
diff --git a/frontend/src/Pages/Game/Start.js b/frontend/src/Pages/Game/Start.js
index c10c7d4..4a8e55a 100644
--- a/frontend/src/Pages/Game/Start.js
+++ b/frontend/src/Pages/Game/Start.js
@@ -71,7 +71,7 @@ export default function Start() {
 
 const Menu = ({ setStage }) => {
   return (
-    <VStack gap={5}>
+    <VStack gap={3}>
       <FadeInUpBox delay={0}>
         <Heading fontSize={64} color="brand.700" fontWeight="900" mb={10}>
           gamemode
diff --git a/frontend/src/Pages/PostGame/Results.js b/frontend/src/Pages/PostGame/Results.js
index d6f5c0c..52db3aa 100644
--- a/frontend/src/Pages/PostGame/Results.js
+++ b/frontend/src/Pages/PostGame/Results.js
@@ -12,11 +12,12 @@ import { useEffect, useState } from "react";
 import CountUp from "react-countup";
 import { FiCheck, FiX } from "react-icons/fi";
 import FadeInUpBox from "../../Components/FadeUp";
+import { YearEra } from "../../Components/ScoreModal";
 
 export default function Results({ gameState, setStage }) {
   const [congratsText, setCongratsText] = useState("");
 
-  const delay = 0.5;
+  const delay = 0.2;
 
   useEffect(() => {
     if (gameState["score"] >= 4000) setCongratsText("Fantastic job!");
@@ -27,138 +28,138 @@ export default function Results({ gameState, setStage }) {
   }, [gameState]);
 
   return (
-    <VStack>
-      {/*  congratulatory text */}
-      <FadeInUpBox delay={delay}>
-        <Heading color="brand.700" fontWeight="900">
-          {congratsText}
-        </Heading>
-      </FadeInUpBox>
-
-      {/* render score */}
-      <VStack mt={5}>
-        <FadeInUpBox delay={delay + 0.2}>
-          <Text
-            color="brand.700"
-            fontSize={24}
-            fontWeight={600}
-            fontFamily="monospace"
-          >
-            <CountUp
-              end={gameState["score"]}
-              delay={delay + 0.4}
-              style={{
-                fontSize: 48,
-                color: "inherit",
-                fontFamily: "monospace",
-                fontWeight: 600,
-              }}
-            />{" "}
-            / 5000
-          </Text>
+    <VStack gap={40}>
+      <VStack>
+        {/*  congratulatory text */}
+        <FadeInUpBox delay={delay}>
+          <Heading color="brand.700" fontWeight="900">
+            {congratsText}
+          </Heading>
         </FadeInUpBox>
-      </VStack>
 
-      {/* recap */}
-      <FadeInUpBox delay={delay + 0.4}>
-        <VStack mt={10} gap={2}>
-          {gameState["gameObjects"].map((obj, index) => {
-            return (
-              <Box
-                px={5}
-                py={2}
-                bg="rgba(255,255,255,0.3)"
-                borderRadius={20}
-                width={500}
-                boxShadow="sm"
-              >
-                <HStack justifyContent="space-between">
-                  {/* artifact image */}
-                  <Image
-                    src={obj["primaryImage"]}
-                    w={150}
-                    h={100}
-                    objectFit="contain"
-                    borderRadius={20}
-                  />
+        {/* render score */}
+        <VStack mt={5}>
+          <FadeInUpBox delay={delay + 0.2}>
+            <Text
+              color="brand.700"
+              fontSize={24}
+              fontWeight={600}
+              fontFamily="monospace"
+            >
+              <CountUp
+                end={gameState["score"]}
+                delay={delay + 0.4}
+                style={{
+                  fontSize: 48,
+                  color: "inherit",
+                  fontFamily: "monospace",
+                  fontWeight: 600,
+                }}
+              />{" "}
+              / 5000
+            </Text>
+          </FadeInUpBox>
+        </VStack>
+
+        {/* recap */}
+        <FadeInUpBox delay={delay + 0.4}>
+          <HStack mt={10} gap={2}>
+            {gameState["gameObjects"].map((obj, index) => {
+              return (
+                <Box
+                  p={5}
+                  bg="rgba(255,255,255,0.3)"
+                  borderRadius={20}
+                  boxShadow="sm"
+                >
+                  <VStack justifyContent="space-between">
+                    {/* artifact image */}
+                    <Image
+                      src={obj["primaryImage"]}
+                      w={150}
+                      h={100}
+                      objectFit="cover"
+                      borderRadius={20}
+                    />
 
-                  {/* answers */}
-                  <VStack>
-                    <HStack opacity={0.5}>
-                      {parseInt(obj["objectEndDate"]) ==
-                      parseInt(gameState["guesses"][index]) ? (
+                    {/* answers */}
+                    <VStack>
+                      <HStack opacity={0.5}>
+                        {parseInt(obj["objectEndDate"]) ==
+                        parseInt(gameState["guesses"][index]) ? (
+                          <Icon as={FiCheck} color="brand.700" />
+                        ) : (
+                          <Icon as={FiX} color="brand.700" />
+                        )}
+                        <Text
+                          color="brand.700"
+                          fontSize={16}
+                          fontFamily="monospace"
+                          fontWeight={400}
+                        >
+                          <YearEra year={gameState["guesses"][index]} />
+                        </Text>
+                      </HStack>
+                      <HStack>
                         <Icon as={FiCheck} color="brand.700" />
-                      ) : (
-                        <Icon as={FiX} color="brand.700" />
-                      )}
-                      <Text
-                        color="brand.700"
-                        fontSize={20}
-                        fontFamily="monospace"
-                        fontWeight={400}
-                      >
-                        {gameState["guesses"][index]}
-                      </Text>
-                    </HStack>
-                    <HStack>
-                      <Icon as={FiCheck} color="brand.700" />
+                        <Text
+                          color="brand.700"
+                          fontSize={16}
+                          fontFamily="monospace"
+                          fontWeight={600}
+                        >
+                          <YearEra year={obj["objectEndDate"]} />
+                        </Text>
+                      </HStack>
+                    </VStack>
+
+                    {/* pts earned */}
+                    <VStack alignItems="flex-end">
                       <Text
                         color="brand.700"
-                        fontSize={20}
+                        fontSize={16}
                         fontFamily="monospace"
-                        fontWeight={600}
+                        fontWeight={500}
                       >
-                        {obj["objectEndDate"]}
+                        {gameState["roundScores"][index]} pts
                       </Text>
-                    </HStack>
+                    </VStack>
                   </VStack>
+                </Box>
+              );
+            })}
+          </HStack>
+        </FadeInUpBox>
 
-                  {/* pts earned */}
-                  <VStack alignItems="flex-end">
-                    <Text
-                      color="brand.700"
-                      fontSize={20}
-                      fontFamily="monospace"
-                      fontWeight={500}
-                    >
-                      {gameState["roundScores"][index]} pts
-                    </Text>
-                  </VStack>
-                </HStack>
-              </Box>
-            );
-          })}
+        {/* button menu */}
+        <VStack mt={10}>
+          <FadeInUpBox delay={delay + 0.6}>
+            <Button
+              borderRadius={20}
+              px={5}
+              colorScheme="brand"
+              _hover={{
+                shadow: "lg",
+                transform: "translateY(-5px)",
+                transition: "0.2s",
+              }}
+              onClick={() => {
+                setStage("playAgain");
+              }}
+            >
+              Play Again
+            </Button>
+          </FadeInUpBox>
+          <FadeInUpBox delay={delay + 0.7}>
+            <Button>Play Again</Button>
+          </FadeInUpBox>
+          <FadeInUpBox delay={delay + 0.8}>
+            <Button>Play Again</Button>
+          </FadeInUpBox>
+          <FadeInUpBox delay={delay + 0.9}>
+            <Button>Play Again</Button>
+          </FadeInUpBox>
         </VStack>
-      </FadeInUpBox>
-
-      {/* button menu */}
-      <VStack mt={10}>
-        <FadeInUpBox delay={delay + 0.6}>
-          <Button
-            borderRadius={20}
-            px={5}
-            colorScheme="brand"
-            _hover={{
-              shadow: "lg",
-              transform: "translateY(-5px)",
-              transition: "0.2s",
-            }}
-            onClick={() => {
-              setStage("playAgain");
-            }}
-          >
-            Play Again
-          </Button>
-        </FadeInUpBox>
-        <FadeInUpBox delay={delay + 0.7}>
-          <Button>Play Again</Button>
-        </FadeInUpBox>
-        <FadeInUpBox delay={delay + 0.8}>
-          <Button>Play Again</Button>
-        </FadeInUpBox>
-        <FadeInUpBox delay={delay + 0.9}>
-          <Button>Play Again</Button>
-        </FadeInUpBox>
       </VStack>
     </VStack>
   );
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0111d6f..e0b210e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2609,6 +2609,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@ramonak/react-progress-bar@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@ramonak/react-progress-bar/-/react-progress-bar-5.2.0.tgz#30d72850b0f2f5020d59d5bcc94d54f8f2393aec"
+  integrity sha512-hgsn1YSXzDplCVNJ/YiCM0nVbVHKu7+2OHlj3kr2wU9ELPa9A/qj+c+GKGKqzJullsofRJV5yMN/Y/jL9aE4/Q==
+
 "@remix-run/router@1.15.3":
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"