diff --git a/backend/src/routes/api/group.js b/backend/src/routes/api/group.js
index 25df18da..ccb1ca89 100644
--- a/backend/src/routes/api/group.js
+++ b/backend/src/routes/api/group.js
@@ -7,7 +7,7 @@ import {
   getGroupByScenarioId,
 } from "../../db/daos/groupDao";
 
-import { updateRoleList } from "../../db/daos/scenarioDao";
+import { retrieveRoleList, updateRoleList } from "../../db/daos/scenarioDao";
 import Group from "../../db/models/group";
 
 const router = Router();
@@ -109,4 +109,12 @@ router.post("/:scenarioId", async (req, res) => {
   res.status(HTTP_OK).json(output);
 });
 
+router.get("/:scenarioId/roleList", async (req, res) => {
+  const { scenarioId } = req.params;
+
+  const roleList = await retrieveRoleList(scenarioId);
+
+  res.status(HTTP_OK).json(roleList);
+});
+
 export default router;
diff --git a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/CustomPropertyInputStyles/CustomCheckBoxStyles.js b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/CustomPropertyInputStyles/CustomCheckBoxStyles.js
index 75777457..571ff4b9 100644
--- a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/CustomPropertyInputStyles/CustomCheckBoxStyles.js
+++ b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/CustomPropertyInputStyles/CustomCheckBoxStyles.js
@@ -9,6 +9,8 @@ export default function CustomCheckBoxStyles() {
       "&.Mui-checked": {
         color: "#0080a7",
       },
+      paddingLeft: "0.75em",
+      paddingRight: "0.75em",
     },
   });
 }
diff --git a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/SceneSettings.jsx b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/SceneSettings.jsx
index 4e34acc5..a7d32072 100644
--- a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/SceneSettings.jsx
+++ b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/SceneSettings.jsx
@@ -1,11 +1,24 @@
-import { InputAdornment } from "@material-ui/core";
+import {
+  InputLabel,
+  InputAdornment,
+  FormControl,
+  FormControlLabel,
+  Select,
+  Checkbox,
+  Typography,
+} from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
 import { withStyles } from "@material-ui/core/styles";
-import { useContext } from "react";
+import { useContext, useState } from "react";
+import ScenarioContext from "context/ScenarioContext";
 import SceneContext from "../../../../context/SceneContext";
 
 import styles from "../../../../styling/CanvasSideBar.module.scss";
+import CustomInputLabelStyles from "./CustomPropertyInputStyles/CustomInputLabelStyles";
+import CustomCheckBoxStyles from "./CustomPropertyInputStyles/CustomCheckBoxStyles";
 
+const CustomInputLabel = CustomInputLabelStyles()(InputLabel);
+const CustomCheckBox = CustomCheckBoxStyles()(Checkbox);
 const CustomTextField = withStyles({
   root: {
     marginTop: "0.5em",
@@ -26,6 +39,50 @@ const CustomTextField = withStyles({
  */
 export default function SceneSettings() {
   const { currentScene, setCurrentScene } = useContext(SceneContext);
+  const { roleList } = useContext(ScenarioContext);
+
+  const initialSelectedRoles = roleList ? [...roleList] : [];
+  const [selectedRoles, setSelectedRoles] = useState(initialSelectedRoles);
+
+  const initialCheckedState = roleList?.map((role) =>
+    selectedRoles?.includes(role)
+  );
+  const initialAllCheckedState = initialCheckedState?.every(
+    (checked) => checked
+  );
+
+  const [checked, setChecked] = useState(initialCheckedState);
+  const [allChecked, setAllChecked] = useState(initialAllCheckedState);
+
+  const handleCheckboxChange = (index) => {
+    const newChecked = [...checked];
+    newChecked[index] = !checked[index];
+    setChecked(newChecked);
+
+    const isAllChecked = newChecked.every((isChecked) => isChecked);
+    setAllChecked(isAllChecked);
+
+    const updatedSelectedRoles = newChecked.reduce((acc, isChecked, idx) => {
+      if (isChecked) {
+        acc.push(roleList[idx]);
+      }
+      return acc;
+    }, []);
+    setSelectedRoles(updatedSelectedRoles);
+  };
+
+  const handleAllToggle = () => {
+    const newAllChecked = !allChecked;
+    setAllChecked(newAllChecked);
+
+    const newChecked = newAllChecked
+      ? new Array(roleList.length).fill(true)
+      : new Array(roleList.length).fill(false);
+    setChecked(newChecked);
+
+    const newSelectedRoles = newAllChecked ? roleList : [];
+    setSelectedRoles(newSelectedRoles);
+  };
 
   return (
     <>
@@ -48,7 +105,7 @@ export default function SceneSettings() {
           <CustomTextField
             label="Scene Timer Duration"
             type="number"
-            value={currentScene?.time || ""}
+            value={currentScene?.time ?? 0}
             fullWidth
             onChange={(event) => {
               // limiting scene timer duration
@@ -60,16 +117,63 @@ export default function SceneSettings() {
               });
             }}
             InputProps={{
-              // seconds adornment appears when there is input
-              endAdornment: currentScene?.time ? (
+              endAdornment: (
                 <InputAdornment position="end">seconds</InputAdornment>
-              ) : null,
+              ),
             }}
             InputLabelProps={{
-              // label moves up whenever there is input
-              shrink: !!currentScene?.time,
+              shrink: true,
             }}
           />
+          <FormControl fullWidth className={styles.formControl}>
+            <CustomInputLabel>Scene Role(s)</CustomInputLabel>
+            <Select
+              className={styles.selectInput}
+              MenuProps={{
+                getContentAnchorEl: null,
+              }}
+              multiple
+              value={selectedRoles}
+              onChange={(event) => setSelectedRoles(event.target.value)}
+              renderValue={(selected) =>
+                selected.length === roleList.length
+                  ? "All"
+                  : selected.join(", ")
+              }
+            >
+              {roleList && roleList.length > 0 ? (
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                  <FormControlLabel
+                    control={
+                      <CustomCheckBox
+                        defaultChecked
+                        checked={allChecked}
+                        onChange={handleAllToggle}
+                      />
+                    }
+                    label="All"
+                  />
+                  {roleList.map((role, index) => (
+                    <FormControlLabel
+                      control={
+                        <CustomCheckBox
+                          defaultChecked
+                          checked={checked[index]}
+                          onChange={() => handleCheckboxChange(index)}
+                        />
+                      }
+                      label={role}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <Typography className={styles.menuItem}>
+                  This scenario currently does not accommodate roles. Please
+                  upload a CSV file first under Manage Groups.
+                </Typography>
+              )}
+            </Select>
+          </FormControl>
         </div>
       </div>
     </>
diff --git a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/CanvasSideBar.test.js.snap b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/CanvasSideBar.test.js.snap
index 3a9bbce6..db8a3c98 100644
--- a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/CanvasSideBar.test.js.snap
+++ b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/CanvasSideBar.test.js.snap
@@ -46,19 +46,19 @@ exports[`Scenario Selection page snapshot test 1`] = `
         className="MuiFormControl-root MuiTextField-root WithStyles(ForwardRef(TextField))-root-1 MuiFormControl-fullWidth"
       >
         <label
-          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-          data-shrink={false}
+          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+          data-shrink={true}
         >
           Scene Timer Duration
         </label>
         <div
-          className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+          className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
           onClick={[Function]}
         >
           <input
             aria-invalid={false}
             autoFocus={false}
-            className="MuiInputBase-input MuiInput-input"
+            className="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
             disabled={false}
             onAnimationStart={[Function]}
             onBlur={[Function]}
@@ -66,8 +66,69 @@ exports[`Scenario Selection page snapshot test 1`] = `
             onFocus={[Function]}
             required={false}
             type="number"
+            value={0}
+          />
+          <div
+            className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          >
+            <p
+              className="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+            >
+              seconds
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        className="MuiFormControl-root formControl MuiFormControl-fullWidth"
+      >
+        <label
+          className="MuiFormLabel-root MuiInputLabel-root WithStyles(ForwardRef(InputLabel))-root-2 MuiInputLabel-formControl MuiInputLabel-animated"
+          data-shrink={false}
+        >
+          Scene Role(s)
+        </label>
+        <div
+          className="MuiInputBase-root MuiInput-root MuiInput-underline selectInput MuiInputBase-formControl MuiInput-formControl"
+          onClick={[Function]}
+        >
+          <div
+            aria-haspopup="listbox"
+            className="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "&#8203;",
+                }
+              }
+            />
+          </div>
+          <input
+            aria-hidden={true}
+            className="MuiSelect-nativeInput"
+            onAnimationStart={[Function]}
+            onChange={[Function]}
+            required={false}
+            tabIndex={-1}
             value=""
           />
+          <svg
+            aria-hidden={true}
+            className="MuiSvgIcon-root MuiSelect-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7 10l5 5 5-5z"
+            />
+          </svg>
         </div>
       </div>
     </div>
diff --git a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/SceneSettings.test.js.snap b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/SceneSettings.test.js.snap
index f607a813..2b9abf04 100644
--- a/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/SceneSettings.test.js.snap
+++ b/frontend/src/containers/pages/AuthoringTool/CanvasSideBar/__tests__/__snapshots__/SceneSettings.test.js.snap
@@ -43,19 +43,19 @@ exports[`Scenario Selection page snapshot test 1`] = `
       className="MuiFormControl-root MuiTextField-root WithStyles(ForwardRef(TextField))-root-1 MuiFormControl-fullWidth"
     >
       <label
-        className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-        data-shrink={false}
+        className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+        data-shrink={true}
       >
         Scene Timer Duration
       </label>
       <div
-        className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+        className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
         onClick={[Function]}
       >
         <input
           aria-invalid={false}
           autoFocus={false}
-          className="MuiInputBase-input MuiInput-input"
+          className="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
           disabled={false}
           onAnimationStart={[Function]}
           onBlur={[Function]}
@@ -63,8 +63,69 @@ exports[`Scenario Selection page snapshot test 1`] = `
           onFocus={[Function]}
           required={false}
           type="number"
+          value={0}
+        />
+        <div
+          className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+        >
+          <p
+            className="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+          >
+            seconds
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      className="MuiFormControl-root formControl MuiFormControl-fullWidth"
+    >
+      <label
+        className="MuiFormLabel-root MuiInputLabel-root WithStyles(ForwardRef(InputLabel))-root-2 MuiInputLabel-formControl MuiInputLabel-animated"
+        data-shrink={false}
+      >
+        Scene Role(s)
+      </label>
+      <div
+        className="MuiInputBase-root MuiInput-root MuiInput-underline selectInput MuiInputBase-formControl MuiInput-formControl"
+        onClick={[Function]}
+      >
+        <div
+          aria-haspopup="listbox"
+          className="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "&#8203;",
+              }
+            }
+          />
+        </div>
+        <input
+          aria-hidden={true}
+          className="MuiSelect-nativeInput"
+          onAnimationStart={[Function]}
+          onChange={[Function]}
+          required={false}
+          tabIndex={-1}
           value=""
         />
+        <svg
+          aria-hidden={true}
+          className="MuiSvgIcon-root MuiSelect-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7 10l5 5 5-5z"
+          />
+        </svg>
       </div>
     </div>
   </div>
diff --git a/frontend/src/containers/pages/AuthoringTool/__tests__/__snapshots__/AuthoringToolPage.test.js.snap b/frontend/src/containers/pages/AuthoringTool/__tests__/__snapshots__/AuthoringToolPage.test.js.snap
index 64affee3..75a387ef 100644
--- a/frontend/src/containers/pages/AuthoringTool/__tests__/__snapshots__/AuthoringToolPage.test.js.snap
+++ b/frontend/src/containers/pages/AuthoringTool/__tests__/__snapshots__/AuthoringToolPage.test.js.snap
@@ -452,20 +452,69 @@ exports[`Authoring Tool page snapshot test 1`] = `
                 class="MuiFormControl-root MuiTextField-root WithStyles(ForwardRef(TextField))-root-2 MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-                  data-shrink="false"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
                 >
                   Scene Timer Duration
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input"
+                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
                     type="number"
+                    value="0"
+                  />
+                  <div
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+                    >
+                      seconds
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root formControl MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root WithStyles(ForwardRef(InputLabel))-root-3 MuiInputLabel-formControl MuiInputLabel-animated"
+                  data-shrink="false"
+                >
+                  Scene Role(s)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline selectInput MuiInputBase-formControl MuiInput-formControl"
+                >
+                  <div
+                    aria-haspopup="listbox"
+                    class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </div>
+                  <input
+                    aria-hidden="true"
+                    class="MuiSelect-nativeInput"
+                    tabindex="-1"
                     value=""
                   />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSelect-icon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/context/ScenarioContextProvider.jsx b/frontend/src/context/ScenarioContextProvider.jsx
index 58b70dc0..5fbb4cd8 100644
--- a/frontend/src/context/ScenarioContextProvider.jsx
+++ b/frontend/src/context/ScenarioContextProvider.jsx
@@ -14,6 +14,7 @@ export default function ScenarioContextProvider({ children }) {
   );
   const [scenarios, setScenarios] = useState();
   const [assignedScenarios, setAssignedScenarios] = useState();
+  const [roleList, setRoleList] = useState();
 
   const { reFetch } = useGet(`api/scenario`, setScenarios);
   const { reFetch: reFetch2 } = useGet(
@@ -21,6 +22,11 @@ export default function ScenarioContextProvider({ children }) {
     setAssignedScenarios
   );
 
+  const { reFetch: reFetch3 } = useGet(
+    currentScenario ? `api/group/${currentScenario._id}/roleList` : null,
+    currentScenario ? setRoleList : () => {}
+  );
+
   return (
     <ScenarioContext.Provider
       value={{
@@ -30,8 +36,10 @@ export default function ScenarioContextProvider({ children }) {
         assignedScenarios,
         setAssignedScenarios,
         reFetch2,
+        reFetch3,
         currentScenario,
         setCurrentScenario,
+        roleList,
       }}
     >
       {children}
diff --git a/frontend/src/styling/CanvasSideBar.module.scss b/frontend/src/styling/CanvasSideBar.module.scss
index ae06ed35..c46b5a17 100644
--- a/frontend/src/styling/CanvasSideBar.module.scss
+++ b/frontend/src/styling/CanvasSideBar.module.scss
@@ -71,3 +71,14 @@
   font-size: 12px;
   opacity: 0.6;
 }
+
+.menuItem {
+  width: calc(18.5vw - 4em) !important;
+  padding-left: 0.5em;
+  padding-right: 1em;
+}
+
+.formControl {
+  margin-top: 0.5em !important;
+  margin-bottom: 1em !important;
+}