diff --git a/client/src/Utils/analytics.js b/client/src/Utils/analytics.js
deleted file mode 100644
index ab461aa5..00000000
--- a/client/src/Utils/analytics.js
+++ /dev/null
@@ -1,61 +0,0 @@
-export const parseXML = xml => {
-  const parser = new DOMParser();
-  const xmlData = {
-    blocks: {},
-    categories: {}
-  };
-  let xmlDoc = parser.parseFromString(xml, "text/xml");
-  const xmlBlocks = xmlDoc.querySelectorAll('block');
-  for (const block of xmlBlocks) {
-    const blockType = block.getAttribute('type');
-    if(xmlData.blocks[blockType]) {
-      xmlData.blocks[blockType].count++;
-    } else {
-      xmlData.blocks[blockType] = {
-        count: 1,
-        deleted: 0
-      };
-    }
-  }
-  return xmlData;
-}
-
-export const compareXML = ({blocks: currentBlocks}, {blocks: previousBlocks}) => {
-  const blocks = diffObjects(currentBlocks, previousBlocks);
-  return {
-    blocks
-  }
-}
-
-const diffObjects = (currentObj, previousObj) => {
-  const currentKeys = Object.keys(currentObj)
-  const prevKeys = Object.keys(previousObj)
-  // deleted all of one type of block
-  if (prevKeys.length > currentKeys.length) {
-    for(let key of prevKeys) {
-      if(currentKeys.indexOf(key) === -1) {
-        console.log('deleted all of one block');
-        currentObj[key] = {
-          count: 0,
-          deleted: previousObj[key].deleted + 1
-        }
-      }
-    }
-  }
-  for (let key of currentKeys) {
-    if (key in previousObj) {
-      if (currentObj[key].count < previousObj[key].count) {
-        currentObj[key].deleted = previousObj[key].deleted + 1;
-        console.log('a block was deleted');
-      }
-      if(currentObj[key].deleted < previousObj[key].deleted) {
-        console.log('a block was reintroduced');
-        currentObj[key] = {
-          count: 1,
-          deleted: previousObj[key].deleted
-        }
-      }
-    }
-  }
-  return currentObj
-}
\ No newline at end of file
diff --git a/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js b/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js
index 07933bd4..ea97f6a9 100644
--- a/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js
+++ b/client/src/components/DayPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.js
@@ -23,7 +23,7 @@ const BlocklyCanvasPanel = ({ day, isSandbox, setDay }) => {
           day={day}
           setDay={setDay}
           isSandbox={isSandbox}
-          isMentorActivity={!day.selectedToolbox}
+          isMentorActivity={!day.selectedToolbox && !isSandbox}
         />
       );
     default:
diff --git a/client/src/components/DayPanels/BlocklyCanvasPanel/canvas/StudentCanvas.js b/client/src/components/DayPanels/BlocklyCanvasPanel/canvas/StudentCanvas.js
index 7fa98477..0cfb34c6 100644
--- a/client/src/components/DayPanels/BlocklyCanvasPanel/canvas/StudentCanvas.js
+++ b/client/src/components/DayPanels/BlocklyCanvasPanel/canvas/StudentCanvas.js
@@ -82,9 +82,10 @@ export default function StudentCanvas({ day }) {
   };
 
   const pushEvent = (type, blockId = '') => {
-    let bloackType = '';
+    let blockType = '';
     if (blockId !== '') {
-      bloackType = window.Blockly.mainWorkspace.getBlockById(blockId)?.type;
+      let type = window.Blockly.mainWorkspace.getBlockById(blockId)?.type;
+      type ? blockType = type : blockType = ''; 
     }
 
     let xml = window.Blockly.Xml.workspaceToDom(workspaceRef.current);
@@ -93,7 +94,7 @@ export default function StudentCanvas({ day }) {
       xml: xml_text,
       action: type,
       blockId: blockId,
-      blockType: bloackType,
+      blockType: blockType,
       timestamp: Date.now(),
       clicks: clicks.current,
     });
diff --git a/client/src/components/DayPanels/Utils/consoleHelpers.js b/client/src/components/DayPanels/Utils/consoleHelpers.js
index fe8a3018..285f5024 100644
--- a/client/src/components/DayPanels/Utils/consoleHelpers.js
+++ b/client/src/components/DayPanels/Utils/consoleHelpers.js
@@ -59,7 +59,6 @@ const readUntilClose = async (
     .pipeThrough(new window.TransformStream(new LineBreakTransformer()))
     .getReader();
 
-  console.log('reader opened');
   let string = '';
 
   plotData = [];
@@ -70,7 +69,6 @@ const readUntilClose = async (
       reader.releaseLock();
       break;
     }
-    console.log(value);
     if (type === 'notNewLine') {
       string += value;
       document.getElementById('console-content').innerHTML = string;
@@ -100,7 +98,6 @@ export const writeToPort = async (data) => {
   writer = port.writable.getWriter();
   data += '\n';
   await writer.write(textEncoder.encode(data));
-  console.log(textEncoder.encode(data));
   writer.releaseLock();
 };
 
diff --git a/client/src/components/DayPanels/consoleHelpers.js b/client/src/components/DayPanels/consoleHelpers.js
deleted file mode 100644
index 10081017..00000000
--- a/client/src/components/DayPanels/consoleHelpers.js
+++ /dev/null
@@ -1,123 +0,0 @@
-let port;
-let reader;
-let writer;
-let readableStreamClosed;
-
-class LineBreakTransformer {
-  constructor() {
-    this.container = '';
-  }
-
-  transform(chunk, controller) {
-    this.container += chunk;
-    const lines = this.container.split('\r\n');
-    this.container = lines.pop();
-    lines.forEach((line) => controller.enqueue(line));
-  }
-
-  flush(controller) {
-    controller.enqueue(this.container);
-  }
-}
-
-export const openConnection = async (baudRate_, newLine) => {
-  //requesting port on the pop up window.
-  port = window['port'];
-
-  var options = {
-    baudRate: baudRate_,
-    parity: 'none',
-    dataBits: 8,
-    stopBits: 1,
-    bufferSize: 1024,
-  };
-
-  // connect to port on baudRate 9600.
-  await port.open(options);
-  console.log(`port opened at baud rate: ${baudRate_} `);
-  document.getElementById('console-content').innerHTML = '';
-  readUntilClose(newLine);
-};
-
-const readUntilClose = async (newLine) => {
-  const textDecoder = new window.TextDecoderStream();
-  readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
-  // reader = textDecoder.readable.getReader();
-  reader = textDecoder.readable
-    .pipeThrough(new window.TransformStream(new LineBreakTransformer()))
-    .getReader();
-
-  console.log('reader opened');
-  let string = '';
-  while (true) {
-    const { value, done } = await reader.read();
-    if (done) {
-      // Allow the serial port to be closed later.
-      reader.releaseLock();
-      break;
-    }
-    console.log(value);
-    if (!newLine) {
-      string += value;
-      document.getElementById('console-content').innerHTML = string;
-    } else {
-      let newP = document.createElement('p');
-      newP.innerHTML = value;
-      newP.style.margin = 0;
-      document.getElementById('console-content').appendChild(newP);
-      newP.scrollIntoView();
-    }
-  }
-};
-
-export const writeToPort = async (data) => {
-  const textEncoder = new window.TextEncoder();
-  writer = port.writable.getWriter();
-  data += '\n';
-  await writer.write(textEncoder.encode(data));
-  console.log(textEncoder.encode(data));
-  writer.releaseLock();
-};
-
-export const disconnect = async () => {
-  reader.cancel();
-  await readableStreamClosed.catch(() => {
-    /* Ignore the error */
-  });
-  if (typeof writer !== 'undefined') {
-    const textEncoder = new window.TextEncoder();
-    writer = port.writable.getWriter();
-    await writer.write(textEncoder.encode(''));
-    await writer.close();
-  }
-  await port.close();
-};
-
-export const connectToPort = async () => {
-  const filters = [
-    { usbVendorId: 0x2341, usbProductId: 0x0043 },
-    { usbVendorId: 0x2341, usbProductId: 0x0001 },
-  ];
-  try {
-    port = await navigator.serial.requestPort({ filters });
-  } catch (e) {
-    console.error(e);
-    return;
-  }
-  window['port'] = port;
-};
-
-export const handleOpenConnection = async (baudRate, newLine) => {
-  if (typeof window['port'] === 'undefined') {
-    await connectToPort();
-    if (typeof window['port'] === 'undefined') {
-      return;
-    }
-  }
-  await openConnection(baudRate, newLine);
-};
-
-export const handleCloseConnection = async () => {
-  console.log('Close connection');
-  disconnect();
-};
diff --git a/client/src/components/DayPanels/helpers.js b/client/src/components/DayPanels/helpers.js
deleted file mode 100644
index 3bc83881..00000000
--- a/client/src/components/DayPanels/helpers.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import {
-  createSubmission,
-  getSubmission,
-  saveWorkspace,
-  updateDayTemplate,
-} from '../../Utils/requests';
-import { message } from 'antd';
-
-const AvrboyArduino = window.AvrgirlArduino;
-
-export const setLocalSandbox = (workspaceRef) => {
-  let workspaceDom = window.Blockly.Xml.workspaceToDom(workspaceRef);
-  let workspaceText = window.Blockly.Xml.domToText(workspaceDom);
-  const localActivity = JSON.parse(localStorage.getItem('sandbox-day'));
-
-  let lastActivity = { ...localActivity, template: workspaceText };
-  localStorage.setItem('sandbox-day', JSON.stringify(lastActivity));
-};
-
-// Generates xml from blockly canvas
-export const getXml = (workspaceRef, shouldAlert = true) => {
-  const { Blockly } = window;
-
-  let xml = Blockly.Xml.workspaceToDom(workspaceRef);
-  let xml_text = Blockly.Xml.domToText(xml);
-  if (shouldAlert) alert(xml_text);
-  return xml_text;
-};
-
-// Generates javascript code from blockly canvas
-export const getJS = (workspaceRef) => {
-  window.Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
-  let code = window.Blockly.JavaScript.workspaceToCode(workspaceRef);
-  alert(code);
-  return code;
-};
-
-// Generates Arduino code from blockly canvas
-export const getArduino = (workspaceRef, shouldAlert = true) => {
-  window.Blockly.Arduino.INFINITE_LOOP_TRAP = null;
-  let code = window.Blockly.Arduino.workspaceToCode(workspaceRef);
-  if (shouldAlert) alert(code);
-  return code;
-};
-
-let intervalId;
-const compileFail = (setSelectedCompile, setCompileError, msg) => {
-  setSelectedCompile(false);
-  message.error('Compile Fail', 3);
-  setCompileError(msg);
-};
-// Sends compiled arduino code to server and returns hex to flash board with
-export const compileArduinoCode = async (
-  workspaceRef,
-  setSelectedCompile,
-  setCompileError,
-  day,
-  isStudent
-) => {
-  setSelectedCompile(true);
-  const sketch = getArduino(workspaceRef, false);
-  let workspaceDom = window.Blockly.Xml.workspaceToDom(workspaceRef);
-  let workspaceText = window.Blockly.Xml.domToText(workspaceDom);
-  let path;
-  isStudent ? (path = '/submissions') : (path = '/sandbox/submission');
-  let id = isStudent ? day.id : undefined;
-
-  // create an initial submission
-  const initialSubmission = await createSubmission(
-    id,
-    workspaceText,
-    sketch,
-    path,
-    isStudent
-  );
-
-  // if we fail to create submission
-  if (!initialSubmission.data) {
-    compileFail(
-      setSelectedCompile,
-      setCompileError,
-      'Oops. Something went wrong, please check your internet connection.'
-    );
-    return;
-  }
-  // Get the submission Id and send a request to get the submission every
-  // 0.25 second until the submission status equal to COMPLETE.
-  intervalId = setInterval(
-    () =>
-      getAndFlashSubmission(
-        initialSubmission.data.id,
-        path,
-        isStudent,
-        setSelectedCompile,
-        setCompileError
-      ),
-    250
-  );
-
-  // Set a timeout of 20 second. If the submission status fail to update to
-  // COMPLETE, show error.
-  setTimeout(() => {
-    if (intervalId) {
-      clearInterval(intervalId);
-      intervalId = undefined;
-      compileFail(
-        setSelectedCompile,
-        setCompileError,
-        'Oops. Something went wrong, please try again.'
-      );
-    }
-  }, 20000);
-};
-
-const getAndFlashSubmission = async (
-  id,
-  path,
-  isStudent,
-  setSelectedCompile,
-  setCompileError
-) => {
-  // get the submission
-  const response = await getSubmission(id, path, isStudent);
-  // If we fail to retrive submission
-  if (!response.data) {
-    if (intervalId) {
-      clearInterval(intervalId);
-      intervalId = undefined;
-    }
-    compileFail(
-      setSelectedCompile,
-      setCompileError,
-      'Oops. Something went wrong, please check your internet connection.'
-    );
-    return;
-  }
-
-  // if the submission is not complete, try again later
-  if (response.data.status !== 'COMPLETED') {
-    return;
-  }
-
-  // If the submission is ready
-  if (intervalId) {
-    clearInterval(intervalId);
-    intervalId = undefined;
-  }
-  // flash the board with the output
-  await flashArduino(response, setSelectedCompile, setCompileError);
-};
-
-const flashArduino = async (response, setSelectedCompile, setCompileError) => {
-  if (response.data) {
-    // if we get a success status from the submission, send it to arduino
-    if (response.data.success) {
-      // converting base 64 to hex
-      let Hex = atob(response.data.hex).toString();
-
-      const avrgirl = new AvrboyArduino({
-        board: 'uno',
-        debug: true,
-      });
-
-      avrgirl.flash(Hex, (err) => {
-        if (err) {
-          console.log(err);
-        } else {
-          console.log('done correctly.');
-          message.success('Compile Success', 3);
-          setSelectedCompile(false);
-        }
-      });
-    }
-    // else if there is error on the Arduino code, show error
-    else if (response.data.stderr) {
-      message.error('Compile Fail', 3);
-      setSelectedCompile(false);
-      setCompileError(response.data.stderr);
-    }
-  } else {
-    message.error(response.err);
-  }
-};
-
-// save current workspace
-export const handleSave = async (dayId, workspaceRef, replay) => {
-  let xml = window.Blockly.Xml.workspaceToDom(workspaceRef.current);
-  let xml_text = window.Blockly.Xml.domToText(xml);
-  return await saveWorkspace(dayId, xml_text, replay);
-};
-
-export const handleCreatorSaveDay = async (dayId, workspaceRef, blocksList) => {
-  let xml = window.Blockly.Xml.workspaceToDom(workspaceRef.current);
-  let xml_text = window.Blockly.Xml.domToText(xml);
-
-  return await updateDayTemplate(dayId, xml_text, blocksList);
-};
diff --git a/client/src/components/DropdownMenu/ReportDropdown.js b/client/src/components/DropdownMenu/ReportDropdown.js
deleted file mode 100644
index e8b5b812..00000000
--- a/client/src/components/DropdownMenu/ReportDropdown.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import './ReportDropdown.less';
-import { Form, Select } from 'antd';
-const { Option } = Select;
-
-
-function handleChange(value) {
-    console.log(`selected ${value}`);
-}
-
-export default function ReportDropdown({label, menuName, menuItems}) {
-    const menus = Object.entries(menuItems).map((key) => {
-        return (
-            <Option className="report-menu-item" value={`${key[1]}`}>
-                {`${key[1]}`}
-            </Option>
-        )
-    })
-
-    return (
-        <div>
-            <Form.Item label={label}>
-                <Select defaultValue={menuName} onChange={handleChange}>
-                    {menus}
-                </Select>
-            </Form.Item>
-        </div>
-    )
-}
diff --git a/client/src/components/DropdownMenu/ReportDropdown.less b/client/src/components/DropdownMenu/ReportDropdown.less
deleted file mode 100644
index 24c6d791..00000000
--- a/client/src/components/DropdownMenu/ReportDropdown.less
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "../../assets/style.less";
-
-// .report-menu-item {
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   flex-wrap: nowrap;
-//   width: 100%;
-//   position: -webkit-sticky;
-//   position: fixed;
-//   top: 0;
-//   z-index: 2;
-//   height: 8vh;
-//   background-color: #colors[primary];
-//   padding-right: 2vw;
-
-//   -moz-box-shadow:    0 1px 5px -1px darken(#colors[primary], 90%);
-//   -webkit-box-shadow: 0 1px 5px -1px darken(#colors[primary], 90%);
-//   box-shadow:         0 1px 5px -1px darken(#colors[primary], 90%);
-
-//   #link {
-//     #casmm-logo {
-//       position: relative;
-//       bottom: 0;
-//       height: 6vh;
-//       width: auto;
-//     }
-//   }
-// }
-
-// #menu-link {
-//   background: none !important;
-//   border: none;
-//   padding: 0 !important;
-//   display: inline-block;
-
-//   &:focus {
-//     outline: none;
-//   }
-
-//   &:hover {
-//     cursor: pointer;
-//   }
-// }
-
-.ant-select-selection-item {
-  color: black;
-  border: none;
-  // padding: 1rem !important;
-  font-size: 1rem;
-  font-weight: bold;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    color: #colors[secondary];
-    cursor: pointer;
-  }
-}
-
-.ant-form-item-label > label {
-  color: black;
-  font-size: 1rem;
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/client/src/components/Tabs/SavedWorkspaceTab.js b/client/src/components/Tabs/SavedWorkspaceTab.js
index a83194b4..a0c9f535 100644
--- a/client/src/components/Tabs/SavedWorkspaceTab.js
+++ b/client/src/components/Tabs/SavedWorkspaceTab.js
@@ -28,7 +28,6 @@ export default function SavedWorkSpaceTab({searchParams, setSearchParams, classr
           }
             
             setWorkspaceList(wsResponse.data);
-            console.log(wsResponse.data);
         };
         fetchData();
       }, [classroomId]);
diff --git a/client/src/views/ContentCreator/LearningStandardCreator/LearningStandardCreator.js b/client/src/views/ContentCreator/LearningStandardCreator/LearningStandardCreator.js
index 0577318d..70849e5b 100644
--- a/client/src/views/ContentCreator/LearningStandardCreator/LearningStandardCreator.js
+++ b/client/src/views/ContentCreator/LearningStandardCreator/LearningStandardCreator.js
@@ -99,7 +99,6 @@ export default function LearningStandardCreator({
   };
 
   const checkURL = (n) => {
-    console.log(n);
     const regex =
       /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
     if (n.search(regex) === -1) {
diff --git a/client/src/views/ContentCreator/LearningStandardDayCreator/DayEditor.js b/client/src/views/ContentCreator/LearningStandardDayCreator/DayEditor.js
index 5e79c6a5..2f17ffb2 100644
--- a/client/src/views/ContentCreator/LearningStandardDayCreator/DayEditor.js
+++ b/client/src/views/ContentCreator/LearningStandardDayCreator/DayEditor.js
@@ -39,7 +39,6 @@ export default function ContentCreator({ learningStandard }) {
       message.error(response.err);
     }
     setDay([...days, response.data]);
-    console.log(response);
   };
 
   const removeBasicDay = async (currDay) => {
diff --git a/client/src/views/ContentCreator/UnitCreator/UnitCreator.js b/client/src/views/ContentCreator/UnitCreator/UnitCreator.js
index b6bc47da..c1d30d88 100644
--- a/client/src/views/ContentCreator/UnitCreator/UnitCreator.js
+++ b/client/src/views/ContentCreator/UnitCreator/UnitCreator.js
@@ -24,9 +24,7 @@ export default function UnitCreator({ gradeList }) {
   };
 
   const handleSubmit = async (e) => {
-    console.log(e);
     const res = await createUnit(number, name, tek, description, grade);
-    console.log(res);
     if (res.err) {
       message.error('Fail to create a new unit');
     } else {
diff --git a/client/src/views/Dashboard/Dashboard.js b/client/src/views/Dashboard/Dashboard.js
index 99ffbb21..91e3ca7d 100644
--- a/client/src/views/Dashboard/Dashboard.js
+++ b/client/src/views/Dashboard/Dashboard.js
@@ -17,7 +17,6 @@ export default function Dashboard() {
     let classroomIds = [];
     getMentor().then((res) => {
       if (res.data) {
-        console.log(res.data);
         res.data.classrooms.forEach((classroom) => {
           classroomIds.push(classroom.id);
         });
diff --git a/client/src/views/Mentor/Classroom/Home/Home.js b/client/src/views/Mentor/Classroom/Home/Home.js
index 36a02a32..9665c953 100644
--- a/client/src/views/Mentor/Classroom/Home/Home.js
+++ b/client/src/views/Mentor/Classroom/Home/Home.js
@@ -44,7 +44,6 @@ export default function Home({ classroomId, viewing }) {
             else {
               message.error(daysRes.err);
             }
-            console.log(daysRes.data);
           }
         });
       } else {
diff --git a/client/src/views/Mentor/Classroom/Roster/CardView.js b/client/src/views/Mentor/Classroom/Roster/CardView.js
index f99d19df..865b9f69 100644
--- a/client/src/views/Mentor/Classroom/Roster/CardView.js
+++ b/client/src/views/Mentor/Classroom/Roster/CardView.js
@@ -24,7 +24,7 @@ export default function CardView(props) {
                     </div>
                 </div>
                 <div id='card-button-container' className='flex flex-row'>
-                    <StudentModal student={student} linkBtn={false}/>
+                    <StudentModal student={student} linkBtn={false} getFormattedDate={getFormattedDate}/>
                     <button onClick={() => {
                         onEnrollToggle(student.enrolled.id, !student.enrolled.enrolled)
                     }}>
diff --git a/client/src/views/Mentor/Classroom/Roster/ListView.js b/client/src/views/Mentor/Classroom/Roster/ListView.js
index 2da1e84a..6c36c7f4 100644
--- a/client/src/views/Mentor/Classroom/Roster/ListView.js
+++ b/client/src/views/Mentor/Classroom/Roster/ListView.js
@@ -60,7 +60,6 @@ export default function ListView(props) {
                 <Input
                   id='editAnimal'
                   value={chosenCharacter ? chosenCharacter : record.character}
-                  onChange={(e) => console.log(e.target.value)}
                   onClick={() => setPickerVisible(true)}
                 />
                 {pickerVisible && (
diff --git a/client/src/views/Replay/Replay.js b/client/src/views/Replay/Replay.js
index 8d6360fb..82d3daf5 100644
--- a/client/src/views/Replay/Replay.js
+++ b/client/src/views/Replay/Replay.js
@@ -5,15 +5,68 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Slider } from 'antd';
+import { Slider, Col, Row } from 'antd';
 import './Replay.less';
 import { useParams, useNavigate } from 'react-router-dom';
 import NavBar from '../../components/NavBar/NavBar';
 import { Table } from 'antd';
 import { getSave } from '../../Utils/requests';
+import { CSVDownloader } from 'react-papaparse';
+const TIME_LINE_SIZE = 25;
+
+const timelineReducer = (timeline, action) => {
+  const checkTimelineStepInBound = () => {
+    if (timeline.step >= timeline.endIndex) {
+      let newEnd = Math.min(timeline.length, timeline.step + 7);
+      timeline.endIndex = newEnd;
+      timeline.startIndex = newEnd - TIME_LINE_SIZE;
+    } else if (timeline.step < timeline.startIndex) {
+      let newStart = Math.max(0, timeline.step - 6);
+      timeline.startIndex = newStart;
+      timeline.endIndex = newStart + TIME_LINE_SIZE;
+    }
+  };
+
+  switch (action.type) {
+    case 'IncrementStep':
+      timeline.step += 1;
+      checkTimelineStepInBound();
+      return { ...timeline };
+
+    case 'DecrementStep':
+      timeline.step -= 1;
+      checkTimelineStepInBound();
+      return { ...timeline };
+
+    case 'SetStepValue':
+      timeline.step = action.value;
+      checkTimelineStepInBound();
+      return { ...timeline };
+
+    case 'IncrementTimeline':
+      if (timeline.endIndex <= timeline.length) {
+        timeline.startIndex += 5;
+        timeline.endIndex = Math.min(timeline.endIndex + 5, timeline.length);
+      }
+      return { ...timeline };
+
+    case 'DecrementTimeline':
+      if (timeline.startIndex >= 0) {
+        timeline.startIndex = Math.max(timeline.startIndex - 5, 0);
+        timeline.endIndex -= 5;
+      }
+      return { ...timeline };
+
+    case 'FetchReplayLength':
+      timeline.length = action.value;
+      return { ...timeline };
+
+    default:
+      return timeline;
+  }
+};
 
 const Replay = () => {
-  const TIME_LINE_SIZE = 25;
   const { saveID } = useParams();
   const workspaceRef = useRef(null);
   const [replay, setReplay] = useState([]);
@@ -23,53 +76,11 @@ const Replay = () => {
   const navigate = useNavigate();
   const [action, setAction] = useState('');
   const [logData, setLogData] = useState([]);
-
-  const timelineReducer = (timeline, action) => {
-    const checkTimelineStepInBound = () => {
-      if (timeline.step >= timeline.endIndex) {
-        let newEnd = Math.min(replay.length, timeline.step + 7);
-        timeline.endIndex = newEnd;
-        timeline.startIndex = newEnd - TIME_LINE_SIZE;
-      } else if (timeline.step < timeline.startIndex) {
-        let newStart = Math.max(0, timeline.step - 6);
-        timeline.startIndex = newStart;
-        timeline.endIndex = newStart + TIME_LINE_SIZE;
-      }
-    };
-
-    switch (action.type) {
-      case 'IncrementStep':
-        timeline.step += 1;
-        checkTimelineStepInBound();
-        return { ...timeline };
-
-      case 'DecrementStep':
-        timeline.step -= 1;
-        checkTimelineStepInBound();
-        return { ...timeline };
-
-      case 'SetStepValue':
-        timeline.step = action.value;
-        return { ...timeline };
-
-      case 'IncrementTimeline':
-        if (timeline.endIndex <= replay.length) {
-          timeline.startIndex += 5;
-          timeline.endIndex = Math.min(timeline.endIndex + 5, replay.length);
-        }
-        return { ...timeline };
-
-      case 'DecrementTimeline':
-        if (timeline.startIndex >= 0) {
-          timeline.startIndex = Math.max(timeline.startIndex - 5, 0);
-          timeline.endIndex -= 5;
-        }
-        return { ...timeline };
-
-      default:
-        return timeline;
-    }
-  };
+  const [csvData, setCsvData] = useState([]);
+  const [csvFilename, setCsvFilename] = useState('code_replay');
+  const [actionFilter, setActionFilter] = useState([]);
+  const [blockTypeFilter, setBlockTypeFilter] = useState([]);
+  const [blockIdFilter, setBlockIdFilter] = useState([]);
 
   const [timelineStates, dispatchTimelineReducer] = useReducer(
     timelineReducer,
@@ -77,6 +88,7 @@ const Replay = () => {
       step: 0,
       startIndex: 0,
       endIndex: TIME_LINE_SIZE,
+      length: 0,
     }
   );
 
@@ -91,16 +103,62 @@ const Replay = () => {
     return new Date(timestamp).toLocaleTimeString(locale);
   };
 
+  const makeFilter = (data, category) => {
+    let filter = [];
+    const map = new Map();
+
+    data.forEach((element) => {
+      const name = element[category];
+      if (name && !map.has(name)) {
+        filter.push({ text: name, value: name });
+        map.set(name, true);
+      }
+    });
+    return filter;
+  };
+
   useEffect(() => {
     const getReplay = async () => {
       const save = await getSave(saveID);
-      console.log(save.data.replay);
       setReplay(save.data.replay);
+
+      dispatchTimelineReducer({
+        type: 'FetchReplayLength',
+        value: save.data.replay ? save.data.replay.length : 0,
+      });
+      //set log
+      let data = save.data.replay.map((item, index) => {
+        return {
+          key: index,
+          blockId: item.blockId,
+          blockType: item.blockType,
+          timestamp: item.timestamp,
+          action: item.action,
+        };
+      });
+
+      setLogData(data);
+      setCsvData(data.slice(0).reverse());
+      setCsvFilename(
+        `${save.data.student.name}_${save.data.created_at}_code_replay`
+      );
+
+      setActionFilter(makeFilter(data, 'action'));
+      setBlockTypeFilter(makeFilter(data, 'blockType'));
+      setBlockIdFilter(makeFilter(data, 'blockId'));
     };
     getReplay();
   }, []);
 
   const columns = [
+    {
+      title: 'No.',
+      dataIndex: 'key',
+      key: 'key',
+      width: '3%',
+      align: 'center',
+      render: (key) => key + 1,
+    },
     {
       title: 'Timestamp',
       dataIndex: 'timestamp',
@@ -114,18 +172,31 @@ const Replay = () => {
       render: (timestamp) => formatMyDate(timestamp),
     },
     {
-      title: 'Block ID',
-      dataIndex: 'blockId',
-      key: 'blockId',
+      title: 'Action',
+      dataIndex: 'action',
+      key: 'action',
       width: '3%',
       align: 'center',
+      filters: actionFilter,
+      onFilter: (value, record) => record.action === value,
     },
     {
-      title: 'Action',
-      dataIndex: 'action',
-      key: 'action',
+      title: 'Block Type',
+      dataIndex: 'blockType',
+      key: 'blockType',
+      width: '3%',
+      align: 'center',
+      filters: blockTypeFilter,
+      onFilter: (value, record) => record.blockType === value,
+    },
+    {
+      title: 'Block ID',
+      dataIndex: 'blockId',
+      key: 'blockId',
       width: '3%',
       align: 'center',
+      filters: blockIdFilter,
+      onFilter: (value, record) => record.blockId === value,
     },
   ];
 
@@ -167,24 +238,11 @@ const Replay = () => {
       workspaceRef.current ? workspaceRef.current.clear() : setWorkspace();
       const xml = window.Blockly.Xml.textToDom(replay[timelineStates.step].xml);
       window.Blockly.Xml.domToWorkspace(xml, workspaceRef.current);
-      setAction(replay[timelineStates.step].action);
-
       if (replay[timelineStates.step].blockId)
         window.Blockly.mainWorkspace
           .getBlockById(replay[timelineStates.step].blockId)
           ?.select();
-
-      //update log
-      let data = replay.slice(0, timelineStates.step + 1).map((item, index) => {
-        return {
-          key: index,
-          blockId: item.blockId,
-          timestamp: item.timestamp,
-          action: item.action,
-        };
-      });
-
-      setLogData(data);
+      setAction(replay[timelineStates.step].action);
     }
   }, [replay, timelineStates, isPlaying, handlePause]);
 
@@ -199,6 +257,7 @@ const Replay = () => {
   const scrollTimelineBackward = () => {
     dispatchTimelineReducer({ type: 'DecrementTimeline' });
   };
+
   const handleGoBack = () => {
     if (window.confirm('Comfirm going back')) navigate(-1);
   };
@@ -233,20 +292,21 @@ const Replay = () => {
                   onAfterChange={changePlaySpeed}
                   disabled={isPlaying}
                   reverse={true}
+                  tooltipVisible={false}
                 />
                 &#128007;
               </div>
               <button
                 className='replayButton'
                 onClick={goBack}
-                disabled={timelineStates.step === 0}
+                disabled={timelineStates.step <= 0}
               >
                 &#9198;
               </button>
               <button
                 className='replayButton'
                 onClick={isPlaying ? handlePause : handlePlay}
-                disabled={timelineStates.step === replay.length - 1}
+                disabled={timelineStates.step >= replay.length - 1}
               >
                 {isPlaying ? (
                   <span>&#9208;</span>
@@ -257,7 +317,7 @@ const Replay = () => {
               <button
                 className='replayButton'
                 onClick={goForward}
-                disabled={timelineStates.step === replay.length - 1}
+                disabled={timelineStates.step >= replay.length - 1}
               >
                 &#9197;
               </button>
@@ -296,25 +356,28 @@ const Replay = () => {
             </button>
           </div>
         </div>
-        <h2 id='action-title'>{`[${timelineStates.step + 1}/${
-          replay.length
-        }] Action: ${action}`}</h2>
-        {replay[timelineStates.step]?.blockType !== '' && (
-          <h2 id='action-title'>{`Block Type: ${
-            replay[timelineStates.step]?.blockType
-          }`}</h2>
-        )}
 
         <div className='flex flex-row'>
           <div
             id='bottom-container'
             className='flex flex-column vertical-container overflow-visible'
           >
-            <h1 id='section-header'>Code Replay</h1>
+            <Row id='icon-control-panel'>
+              <Col flex='none' id='section-header'>
+                Code Replay
+              </Col>
+              <Col flex='auto' id='action-title'>
+                {`[${timelineStates.step + 1}/${
+                  replay.length
+                }] Action: ${action}`}
+                {replay[timelineStates.step]?.blockType !== '' && (
+                  <>{`, Block Type: ${
+                    replay[timelineStates.step]?.blockType
+                  }`}</>
+                )}
+              </Col>
+            </Row>
             <div id='blockly-canvas' />
-            {/* <div id="timeline">
-              { replay.map((item, index) => <div className={step === index ? 'current-time' : 'all-times'} key={item.timestamp}>{timeConverter(item.timestamp)}<Marker/></div>)}
-            </div> */}
           </div>
         </div>
         <div className='flex flex-row'>
@@ -322,12 +385,48 @@ const Replay = () => {
             id='bottom-container'
             className='flex flex-column vertical-container overflow-visible'
           >
-            <h2 id='logs-title'>Logs</h2>
+            <div className='flex flex-row space-between'>
+              <h2 id='logs-title'>Logs</h2>
+              <CSVDownloader
+                filename={csvFilename}
+                type={'button'}
+                bom={true}
+                data={() => {
+                  return csvData.map((log) => {
+                    return {
+                      'No.': log.key + 1,
+                      timestamp: formatMyDate(log.timestamp),
+                      action: log.action,
+                      'block type': log.blockType,
+                      'block id': log.blockId,
+                    };
+                  });
+                }}
+              >
+                Download to CSV
+              </CSVDownloader>
+            </div>
+
             <Table
+              id='replay-log'
+              rowClassName={(record, index) =>
+                'table-row ' +
+                (record.key === timelineStates.step
+                  ? 'table-row-dark'
+                  : 'table-row-light')
+              }
+              onRow={(record, index) => {
+                return {
+                  onClick: () => setStep(record.key),
+                };
+              }}
               scroll={{ y: 300 }}
               pagination={false}
               columns={columns}
               dataSource={logData}
+              onChange={(pagination, filter, sorter, extra) => {
+                setCsvData(extra.currentDataSource);
+              }}
             />
           </section>
         </div>
diff --git a/client/src/views/Replay/Replay.less b/client/src/views/Replay/Replay.less
index b52d2817..7848a11e 100644
--- a/client/src/views/Replay/Replay.less
+++ b/client/src/views/Replay/Replay.less
@@ -58,7 +58,25 @@
   }
 }
 
-#action-title {
-  color: white;
-  display: inline;
+#action-title{
+  color: rgb(19, 18, 18);
+  font-size: larger;
+  font-weight: 600;
+}
+
+#replay-log{
+
+  tbody > tr > td {
+    background: none;
+  }
+  .table-row {
+    cursor: pointer;
+  }
+  .table-row-light {
+    background-color: #ffffff;
+  }
+  .table-row-dark {
+    background-color: #cecece;
+  }
+
 }
diff --git a/client/src/views/Researcher/DayLevelReport.js b/client/src/views/Researcher/DayLevelReport.js
index 7d3339a4..d016244d 100644
--- a/client/src/views/Researcher/DayLevelReport.js
+++ b/client/src/views/Researcher/DayLevelReport.js
@@ -4,6 +4,8 @@ import { Table, Button, Tag } from 'antd';
 import './DayLevelReport.less';
 import { useSearchParam } from '../../Utils/useSearchParam';
 import NavBar from '../../components/NavBar/NavBar';
+import { CSVDownloader } from 'react-papaparse';
+
 
 import {
   getSessionsWithFilter,
@@ -17,6 +19,7 @@ import Form from 'antd/lib/form/Form';
 
 const DayLevelReport = () => {
   const [sessions, setSessions] = useState([]);
+  const [csvData, setCsvData] = useState([]);
   const [sessionCount, setSessionCount] = useState(0);
   const navigate = useNavigate();
   const { paramObj, setSearchParam } = useSearchParam();
@@ -56,6 +59,20 @@ const DayLevelReport = () => {
       setSessions(sessionRes.data);
       setSessionCount(sessionCountRes.data);
 
+      let csvData = sessionRes.data;
+
+      if(tbPrevFilter != null){
+        // console.log(Object.entries(tbPrevFilter));
+        Object.entries(tbPrevFilter).forEach((property)=> {
+          if(property[1] != null){
+            let set = new Set(property[1]);
+            csvData = csvData.filter(item => set.has(item[property[0]]?.name))
+          }
+        })
+      }
+      console.log(csvData);
+      setCsvData(csvData);
+
       // set table head filter data
       makeTbNameFilter(sessionRes.data);
       setTbClassroomFilter(makeFilter(sessionRes.data, 'classroom'));
@@ -64,7 +81,7 @@ const DayLevelReport = () => {
       setTbLessonFilter(makeFilter(sessionRes.data, 'learning_standard'));
     };
     if (paramObj['_sort']) fetchData();
-  }, [paramObj]);
+  }, [paramObj, tbPrevFilter]);
 
   const makeTbNameFilter = (data) => {
     let filter = [];
@@ -150,7 +167,7 @@ const DayLevelReport = () => {
     {
       title: 'Lesson',
       dataIndex: ['learning_standard', 'name'],
-      key: 'unit',
+      key: 'learning_standard',
       width: '3%',
       align: 'left',
       filters: tbLessonFilter,
@@ -215,13 +232,36 @@ const DayLevelReport = () => {
       <NavBar />
       <div className='menu-bar'>
         <div id='day-level-report-header'>Day Level - Student Report</div>
+        <div id='day-level-button-group'>
 
-        <button
-          className='day-level-return'
-          onClick={() => navigate('/report')}
-        >
-          Return to Dashboard
-        </button>
+        <CSVDownloader
+            className='day-level-button'
+            filename="sessions"
+            type={'button'}
+            bom={true}
+            data={() => {
+              return csvData.map((session) => {
+                return {
+                  'Student': session.students[0].name,
+                  'Classroom': session.classroom?.name,
+                  'Grade': session.grade?.name,
+                  'Unit': session.unit?.name,
+                  'Lesson': session.learning_standard?.name,
+                  'Session Started': formatMyDate(session.created_at),
+                  'Partners': session.students.slice(1).map((student) => student.name).join(', ')
+                };
+              });
+            }}
+          >
+            Download to CSV
+          </CSVDownloader>
+          <button
+            className='day-level-button'
+            onClick={() => navigate('/report')}
+          >
+            Return to Dashboard
+          </button>
+        </div>
       </div>
       <button id='show-filter-btn' onClick={() => setShowFilter(!showFilter)}>
         {showFilter ? (
@@ -246,7 +286,8 @@ const DayLevelReport = () => {
           columns={columns}
           dataSource={sessions}
           rowKey='id'
-          onChange={(Pagination, filters) => {
+          onChange={(Pagination, filters, sorter, extra) => {
+            // console.log(filters);
             if (
               tbPrevFilter == null ||
               JSON.stringify(filters) === JSON.stringify(tbPrevFilter)
@@ -262,6 +303,7 @@ const DayLevelReport = () => {
             } else {
               setTbPrevFilter(filters);
             }
+            setCsvData(extra.currentDataSource);
           }}
           pagination={{
             current: paramObj['_start'] / paramObj['pageSize'] + 1,
diff --git a/client/src/views/Researcher/DayLevelReport.less b/client/src/views/Researcher/DayLevelReport.less
index f56fcbe7..381f756a 100644
--- a/client/src/views/Researcher/DayLevelReport.less
+++ b/client/src/views/Researcher/DayLevelReport.less
@@ -58,8 +58,11 @@ section {
   padding: 2rem;
 }
 
-.day-level-return {
-  display: flex;
+#day-level-button-group {
+  white-space: nowrap;
+}
+.day-level-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 5.3vh;
diff --git a/client/src/views/TeacherLogin/ForgetPassword.js b/client/src/views/TeacherLogin/ForgetPassword.js
index a764c864..d7f352ec 100644
--- a/client/src/views/TeacherLogin/ForgetPassword.js
+++ b/client/src/views/TeacherLogin/ForgetPassword.js
@@ -13,7 +13,6 @@ const ForgetPassword = () => {
     setShowSuccessMsg(false);
     setLoading(true);
     const res = await forgetPassword(email);
-    console.log(res);
     if (res.err) {
       message.error(res.err);
     } else {
diff --git a/client/src/views/TeacherLogin/TeacherLogin.js b/client/src/views/TeacherLogin/TeacherLogin.js
index bd233a20..cae2240f 100644
--- a/client/src/views/TeacherLogin/TeacherLogin.js
+++ b/client/src/views/TeacherLogin/TeacherLogin.js
@@ -29,7 +29,6 @@ export default function TeacherLogin() {
 
     postUser(body)
       .then((response) => {
-        console.log(response.data);
         setUserSession(response.data.jwt, JSON.stringify(response.data.user));
         setLoading(false);
         if (response.data.user.role.name === 'Content Creator') {
diff --git a/client/src/views/Workspace/Workspace.js b/client/src/views/Workspace/Workspace.js
index 09a85bd9..578bfcc6 100644
--- a/client/src/views/Workspace/Workspace.js
+++ b/client/src/views/Workspace/Workspace.js
@@ -33,7 +33,6 @@ export default function Workspace({ handleLogout }) {
   }, []);
 
   const handleGoBack = () => {
-    console.log('workspace');
     navigate(-1);
   };