diff --git a/fableous-fe/src/App.tsx b/fableous-fe/src/App.tsx
index 1ced34f2..c7e447ae 100644
--- a/fableous-fe/src/App.tsx
+++ b/fableous-fe/src/App.tsx
@@ -139,7 +139,10 @@ export default function App() {
                 <InjectAxiosRespInterceptor />
                 <ThemeProvider theme={theme}>
                   <Navbar />
-                  <Container className="flex flex-col flex-1 pt-5 pb-12">
+                  <Container
+                    className="flex flex-col flex-1 pt-5 pb-12"
+                    disableGutters
+                  >
                     <Routes />
                   </Container>
                 </ThemeProvider>
diff --git a/fableous-fe/src/components/Navbar.tsx b/fableous-fe/src/components/Navbar.tsx
index e73a2c61..fe95483b 100644
--- a/fableous-fe/src/components/Navbar.tsx
+++ b/fableous-fe/src/components/Navbar.tsx
@@ -1,10 +1,11 @@
-import { makeStyles } from "@material-ui/core";
+import { Icon, makeStyles } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import { Link, useHistory } from "react-router-dom";
 import { useContext } from "react";
+
 import { AuthContext } from "./AuthProvider";
 
 const useStyles = makeStyles(() => ({
@@ -36,14 +37,17 @@ export default function Navbar() {
             <Button
               variant="outlined"
               className="text-white"
+              startIcon={<Icon fontSize="small">person</Icon>}
               component={Link}
               to="/profile"
             >
               Profile
             </Button>
+
             <Button
               variant="outlined"
               className="ml-4 text-white"
+              startIcon={<Icon fontSize="small">logout</Icon>}
               onClick={onLogout}
             >
               Logout
@@ -54,6 +58,7 @@ export default function Navbar() {
             <Button
               variant="outlined"
               className="text-white"
+              startIcon={<Icon fontSize="small">login</Icon>}
               component={Link}
               to="/login"
             >
@@ -62,6 +67,7 @@ export default function Navbar() {
             <Button
               variant="outlined"
               className="ml-4 text-white"
+              startIcon={<Icon fontSize="small">person</Icon>}
               component={Link}
               to="/register"
             >
diff --git a/fableous-fe/src/containers/HomePage.tsx b/fableous-fe/src/containers/HomePage.tsx
index 12028738..f600ae94 100644
--- a/fableous-fe/src/containers/HomePage.tsx
+++ b/fableous-fe/src/containers/HomePage.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid, Typography } from "@material-ui/core";
+import { Button, Grid, Icon, Typography } from "@material-ui/core";
 import { Link } from "react-router-dom";
 
 export default function HomePage() {
@@ -27,6 +27,7 @@ export default function HomePage() {
           variant="contained"
           color="secondary"
           component={Link}
+          endIcon={<Icon fontSize="small">brush</Icon>}
           to="/join"
         >
           Join
diff --git a/fableous-fe/src/containers/StoryDetailPage.tsx b/fableous-fe/src/containers/StoryDetailPage.tsx
index 4c9e9eaa..889d4338 100644
--- a/fableous-fe/src/containers/StoryDetailPage.tsx
+++ b/fableous-fe/src/containers/StoryDetailPage.tsx
@@ -1,13 +1,27 @@
-import { Button, Grid, Typography, CircularProgress } from "@material-ui/core";
+import {
+  Grid,
+  ImageList,
+  ImageListItem,
+  Chip,
+  Icon,
+  ChipProps,
+  Button,
+} from "@material-ui/core";
+
 import useAxios from "axios-hooks";
-import { useEffect, useState, useRef } from "react";
-import { Alert } from "@material-ui/lab";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { useParams } from "react-router-dom";
+import AchievementButton from "../components/achievement/AchievementButton";
 import { restAPI } from "../api";
 import { APIResponse, Manifest, Session } from "../data";
 import Canvas from "../components/canvas/Canvas";
 import { ControllerRole } from "../constant";
 import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data";
+import { ASPECT_RATIO } from "../components/canvas/constants";
+import useContainRatio from "../hooks/useContainRatio";
+import ChipRow from "../components/ChipRow";
+import { EmptyAchievement } from "../components/achievement/achievement";
+import BackButton from "../components/BackButton";
 
 export default function StoryDetailPage() {
   const { classroomId } = useParams<{ classroomId: string }>();
@@ -20,13 +34,11 @@ export default function StoryDetailPage() {
     runAudio: () => {},
   });
 
-  const [
-    { data: story, loading: getStoryLoading, error: getStoryError },
-    executeGetClassroomDetail,
-  ] = useAxios<APIResponse<Session>, APIResponse<undefined>>(
-    restAPI.session.getOne(classroomId, sessionId),
-    { manual: true }
-  );
+  const [{ data: story, loading: getStoryLoading }, executeGetClassroomDetail] =
+    useAxios<APIResponse<Session>, APIResponse<undefined>>(
+      restAPI.session.getOne(classroomId, sessionId),
+      { manual: true }
+    );
 
   const [page, setPage] = useState(1);
   const [{ data: manifest, loading: getManifestLoading }, executeGetManifest] =
@@ -37,12 +49,56 @@ export default function StoryDetailPage() {
       }
     );
   const [audioPaths, setAudioPaths] = useState<string[]>([]);
+  const [{ data: achievements }, executeGetAchievements] = useAxios<
+    Manifest,
+    undefined
+  >(
+    restAPI.gallery.getAsset(
+      classroomId,
+      sessionId,
+      story?.data?.pages,
+      "manifest.json"
+    ),
+    {
+      manual: true,
+    }
+  );
+
+  const canvasContainerRef = useRef<HTMLDivElement>(
+    document.createElement("div")
+  );
+  const [canvasOffsetWidth, canvasOffsetHeight] = useContainRatio({
+    containerRef: canvasContainerRef,
+    ratio: 1 / ASPECT_RATIO,
+  });
+  const listContainerRef = useRef<HTMLUListElement>(
+    document.createElement("ul")
+  );
+  const [, listOffsetHeight] = useContainRatio({
+    containerRef: listContainerRef,
+    ratio: 1 / ASPECT_RATIO,
+  });
+  const playAudio = useCallback(() => {
+    if (audioPaths.length === 0) {
+      return;
+    }
+    const player = document.createElement("audio");
+    player.src =
+      restAPI.gallery.getAssetByPath(audioPaths[audioPaths.length - 1]).url ||
+      "";
+    player.play();
+  }, [audioPaths]);
 
   useEffect(() => {
     executeGetClassroomDetail();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    executeGetAchievements();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [story]);
+
   useEffect(() => {
     executeGetManifest();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,95 +111,187 @@ export default function StoryDetailPage() {
   }, [manifest]);
 
   return (
-    <Grid container>
-      <Grid item xs={12} className="mb-4">
-        <Typography variant="h2">
-          {Object.keys(manifest?.texts || {}).length} texts
-        </Typography>
-        <Typography variant="h2">{story?.data?.title}</Typography>
-      </Grid>
-      {getStoryLoading && (
-        <Grid container justifyContent="center">
-          <CircularProgress />
+    <Grid container className="relative">
+      <div
+        className="flex flex-col absolute w-full"
+        style={{
+          height: "calc(100vh - 84px)",
+        }}
+      >
+        <Grid container className="mb-4">
+          <Grid item xs="auto">
+            <BackButton />
+          </Grid>
+          <Grid item xs>
+            <ChipRow
+              primary
+              chips={[
+                <Chip label={story?.data?.title} color="primary" />,
+                <div className="flex gap-4">
+                  {(story?.data?.description.split(",") || []).map((tag) => (
+                    <Chip label={tag} color="secondary" />
+                  ))}
+                </div>,
+              ]}
+            />
+          </Grid>
         </Grid>
-      )}
-      {getStoryError && <Alert severity="error">Failed loading Gallery!</Alert>}
-      {!getStoryLoading && !getStoryError && (
-        <Grid container spacing={2}>
-          {story?.data && (
-            <Grid item key={story.data.pages}>
-              <h1>{page}</h1>
-              <div className="grid">
-                <div
-                  style={{
-                    gridRowStart: 1,
-                    gridColumnStart: 1,
-                    zIndex: 10,
-                  }}
+        <Grid container spacing={2} className="flex-1 mb-4">
+          <Grid
+            item
+            xs={2}
+            style={{
+              backgroundColor: "white",
+              alignSelf: "center",
+              display: "flex",
+              flexDirection: "column",
+              borderRadius: "24px",
+              height: canvasOffsetHeight || "100%",
+            }}
+          >
+            <ImageList
+              ref={listContainerRef}
+              className="overflow-y-auto gap-y-2  "
+              style={{ alignSelf: "center" }}
+              cols={1}
+              gap={0}
+              classes={{ root: "flex-grow" }}
+              rowHeight={listOffsetHeight}
+            >
+              {Array.from(
+                { length: story?.data?.pages || 0 },
+                (_, i) => i + 1
+              ).map((pageIndex) => (
+                <ImageListItem
+                  key={pageIndex}
+                  classes={{ item: "flex flex-col justify-center" }}
                 >
-                  <Canvas
-                    ref={canvasRef}
-                    wsConn={undefined}
-                    role={ControllerRole.Hub}
-                    layer={ControllerRole.Story}
-                    pageNum={page}
-                    isShown={
-                      !getStoryLoading &&
-                      !!story &&
-                      !getManifestLoading &&
-                      !!manifest
-                    } // ensures canvas is loaded withh proper dimensions
-                    isGallery
-                    setTextShapes={setTextShapes}
-                    textShapes={textShapes}
-                    audioPaths={audioPaths}
-                    setAudioPaths={setAudioPaths}
-                    offsetWidth={0}
-                    offsetHeight={0}
-                  />
-                </div>
-                <div
+                  <Button
+                    onClick={() => setPage(pageIndex)}
+                    style={{}}
+                    className="p-0 m-0"
+                  >
+                    <img
+                      src={
+                        restAPI.gallery.getAsset(
+                          classroomId,
+                          sessionId,
+                          pageIndex,
+                          "image.png"
+                        ).url
+                      }
+                      alt={story?.data?.title}
+                      style={{
+                        borderRadius: 16,
+                      }}
+                      loading="lazy"
+                    />
+                  </Button>
+                </ImageListItem>
+              ))}
+            </ImageList>
+          </Grid>
+          <Grid item xs={10}>
+            <div
+              className="grid place-items-stretch h-full"
+              style={{
+                border: "1px solid #0004",
+              }}
+              ref={canvasContainerRef}
+            >
+              <div
+                className="grid"
+                style={{
+                  gridRowStart: 1,
+                  gridColumnStart: 1,
+                  zIndex: 10,
+                }}
+              >
+                <Canvas
+                  ref={canvasRef}
+                  wsConn={undefined}
+                  role={ControllerRole.Hub}
+                  layer={ControllerRole.Story}
+                  pageNum={page}
+                  // isShown
+                  isShown={
+                    !getStoryLoading &&
+                    !!story &&
+                    !getManifestLoading &&
+                    !!manifest
+                  } // ensures canvas is loaded withh proper dimensions
+                  isGallery
+                  setTextShapes={setTextShapes}
+                  textShapes={textShapes}
+                  audioPaths={audioPaths}
+                  setAudioPaths={setAudioPaths}
+                  offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
+                />
+              </div>
+
+              <div
+                className="grid place-items-center"
+                style={{
+                  gridRowStart: 1,
+                  gridColumnStart: 1,
+                  zIndex: 1,
+                  pointerEvents: "none", // forwards pointer events to next layer
+                }}
+              >
+                <img
+                  width={canvasOffsetWidth}
+                  height={canvasOffsetHeight}
+                  src={
+                    restAPI.gallery.getAsset(
+                      classroomId,
+                      sessionId,
+                      page,
+                      "image.png"
+                    ).url
+                  }
+                  alt={story?.data?.title}
                   style={{
-                    gridRowStart: 1,
-                    gridColumnStart: 1,
-                    zIndex: 1,
-                    pointerEvents: "none", // forwards pointer events to next layer
+                    borderRadius: "24px",
                   }}
-                >
-                  <img
-                    src={
-                      restAPI.gallery.getAsset(
-                        classroomId,
-                        sessionId,
-                        page,
-                        "image.png"
-                      ).url
-                    }
-                    alt={story.data.title}
-                    style={{
-                      borderWidth: 4,
-                    }}
-                  />
-                </div>
+                />
               </div>
-              <Button
-                onClick={() => page > 1 && setPage(page - 1)}
-                disabled={page === 1}
-              >
-                Previous
-              </Button>
-              <Button
-                onClick={() =>
-                  page < (story.data?.pages || 1) && setPage(page + 1)
-                }
-                disabled={page === story.data.pages}
-              >
-                Next
-              </Button>
-            </Grid>
-          )}
+            </div>
+          </Grid>
+        </Grid>
+        <Grid container className="mb-4">
+          <Grid item xs={12}>
+            <ChipRow
+              chips={[
+                `Page ${page} of ${story?.data?.pages || ""}`,
+                <AchievementButton
+                  achievements={achievements?.achievements || EmptyAchievement}
+                  notify={false}
+                />,
+                {
+                  icon: <Icon fontSize="medium">music_note</Icon>,
+                  label: "Play Audio",
+                  onClick: playAudio,
+                  disabled: audioPaths.length === 0,
+                } as ChipProps,
+                {
+                  icon: <Icon fontSize="medium">skip_previous</Icon>,
+                  label: "Previous Page",
+                  onClick: () => page > 1 && setPage(page - 1),
+                  disabled: page === 1,
+                } as ChipProps,
+                {
+                  icon: <Icon fontSize="medium">skip_next</Icon>,
+                  label: "Next Page",
+                  onClick: () =>
+                    page < (story?.data?.pages || 1) && setPage(page + 1),
+                  disabled: page === story?.data?.pages,
+                } as ChipProps,
+              ]}
+            />
+          </Grid>
         </Grid>
-      )}
+      </div>
     </Grid>
   );
 }