diff --git a/backend/ohq/migrations/0021_queue_question_timer_enabled_and_more.py b/backend/ohq/migrations/0021_queue_question_timer_enabled_and_more.py
new file mode 100644
index 00000000..e72bb68b
--- /dev/null
+++ b/backend/ohq/migrations/0021_queue_question_timer_enabled_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.0.3 on 2024-10-11 21:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("ohq", "0020_auto_20240326_0226"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="queue",
+            name="question_timer_enabled",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name="queue",
+            name="question_timer_start_time",
+            field=models.IntegerField(blank=True, null=True),
+        ),
+    ]
diff --git a/backend/ohq/models.py b/backend/ohq/models.py
index 316951c1..31b59e9a 100644
--- a/backend/ohq/models.py
+++ b/backend/ohq/models.py
@@ -75,6 +75,7 @@ class Course(models.Model):
     invite_only = models.BooleanField(default=False)
     members = models.ManyToManyField(User, through="Membership", through_fields=("course", "user"))
 
+
     # MAX_NUMBER_COURSE_USERS = 1000
 
     class Meta:
@@ -215,6 +216,9 @@ class Queue(models.Model):
     rate_limit_questions = models.IntegerField(blank=True, null=True)
     rate_limit_minutes = models.IntegerField(blank=True, null=True)
 
+    question_timer_enabled = models.BooleanField(default=False)
+    question_timer_start_time = models.IntegerField(blank=True, null=True)
+
     video_chat_setting = models.CharField(
         max_length=8, choices=VIDEO_CHOICES, default=VIDEO_OPTIONAL
     )
diff --git a/backend/ohq/serializers.py b/backend/ohq/serializers.py
index d43e2752..1ae87c58 100644
--- a/backend/ohq/serializers.py
+++ b/backend/ohq/serializers.py
@@ -157,6 +157,8 @@ class Meta:
             "rate_limit_length",
             "rate_limit_questions",
             "rate_limit_minutes",
+            "question_timer_enabled",
+            "question_timer_start_time",
             "video_chat_setting",
             "pin",
             "pin_enabled",
diff --git a/frontend/components/Course/CourseWrapper.tsx b/frontend/components/Course/CourseWrapper.tsx
index 17a00c98..e0a9e63d 100644
--- a/frontend/components/Course/CourseWrapper.tsx
+++ b/frontend/components/Course/CourseWrapper.tsx
@@ -46,8 +46,9 @@ const CourseWrapper = ({ render, ...props }: CourseProps) => {
     useEffect(() => setSupportsNotifs(browserSupportsNotifications()), []);
 
     const toggleNotifs = () => {
-        setNotifs(!notifs);
-        localStorage.setItem("notifs", !notifs ? "true" : "false");
+        const newNotifs = !notifs;
+        setNotifs(newNotifs);
+        localStorage.setItem("notifs", newNotifs ? "true" : "false");
         document.body.focus();
     };
 
diff --git a/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx b/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx
deleted file mode 100644
index 436d1921..00000000
--- a/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-import { useState, useMemo } from "react";
-import { Grid, Segment, Header, Form, Button } from "semantic-ui-react";
-import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "@material-ui/lab/Alert";
-import { createQueue } from "../../../../hooks/data-fetching/course";
-import { Queue, VideoChatSetting } from "../../../../types";
-
-interface CreateQueueProps {
-    courseId: number;
-    backFunc: () => void;
-    successFunc: () => void;
-    mutate: mutateResourceListFunction<Queue>;
-}
-
-interface QueueFormInput {
-    name: string;
-    description: string;
-    questionTemplate: string;
-    videoChatSetting: VideoChatSetting;
-    pinEnabled: boolean;
-    rateLimitEnabled: boolean;
-    rateLimitLength?: number;
-    rateLimitQuestions?: number;
-    rateLimitMinutes?: number;
-}
-
-enum RateLimitFields {
-    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
-    RATE_LIMIT_MINUTES = "rateLimitMinutes",
-    RATE_LIMIT_LENGTH = "rateLimitLength",
-}
-
-const castInt = (n: string): number | undefined => {
-    let casted: number | undefined = parseInt(n, 10);
-    if (isNaN(casted)) {
-        casted = undefined;
-    }
-
-    return casted;
-};
-
-const CreateQueue = (props: CreateQueueProps) => {
-    const { courseId, backFunc, successFunc, mutate } = props;
-    /* STATE */
-    const [error, setError] = useState(false);
-    const [input, setInput] = useState<QueueFormInput>({
-        name: "",
-        description: "",
-        questionTemplate: "",
-        videoChatSetting: VideoChatSetting.DISABLED,
-        pinEnabled: false,
-        rateLimitEnabled: false,
-        rateLimitLength: undefined,
-        rateLimitQuestions: undefined,
-        rateLimitMinutes: undefined,
-    });
-
-    const handleVideoChatInputChange = (e, { name }) => {
-        switch (name) {
-            case "videoChatRequired":
-                input.videoChatSetting = VideoChatSetting.REQUIRED;
-                break;
-            case "videoChatOptional":
-                input.videoChatSetting = VideoChatSetting.OPTIONAL;
-                break;
-            case "videoChatDisabled":
-                input.videoChatSetting = VideoChatSetting.DISABLED;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const handlePinInputChange = (e, { name }) => {
-        switch (name) {
-            case "pinEnabled":
-                input.pinEnabled = true;
-                break;
-            case "pinDisabled":
-                input.pinEnabled = false;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const isDisabled = useMemo(() => {
-        let invalidInps = !input.name || !input.description;
-        if (input.rateLimitEnabled) {
-            invalidInps =
-                invalidInps ||
-                input.rateLimitLength === undefined ||
-                (input.rateLimitLength !== undefined &&
-                    input.rateLimitLength < 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitQuestions === undefined ||
-                (input.rateLimitQuestions !== undefined &&
-                    input.rateLimitQuestions <= 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitMinutes === undefined ||
-                (input.rateLimitMinutes !== undefined &&
-                    input.rateLimitMinutes <= 0);
-        }
-        return invalidInps;
-    }, [input]);
-
-    const [validQuestionRate, setValidQuestionRate] = useState(true);
-    const [validMinsRate, setValidMinsRate] = useState(true);
-    const [validLenRate, setValidLenRate] = useState(true);
-    const [mutateLoading, setRefetchLoading] = useState(false);
-
-    /* HANDLER FUNCTIONS */
-    const handleInputChange = (e, { name, value }) => {
-        input[name] = value;
-        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
-            input[name] = castInt(input[name]);
-            setValidQuestionRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
-            input[name] = castInt(input[name]);
-            setValidMinsRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
-            input[name] = castInt(input[name]);
-            setValidLenRate(input[name] >= 0);
-        }
-        setInput({ ...input });
-    };
-
-    const onSubmit = async () => {
-        try {
-            await createQueue(courseId, input);
-            setRefetchLoading(true);
-            await mutate(-1, null);
-            setRefetchLoading(false);
-            backFunc();
-            successFunc();
-        } catch (e) {
-            setError(true);
-        }
-    };
-
-    return (
-        <Grid.Column width={16}>
-            <Grid.Row>
-                <Segment basic>
-                    <Header as="h3">Create New Queue</Header>
-                </Segment>
-            </Grid.Row>
-            <Grid.Row>
-                <Segment basic>
-                    <Form>
-                        <Form.Field required>
-                            <label htmlFor="form-name">Name</label>
-                            <Form.Input
-                                id="form-name"
-                                placeholder="Name"
-                                name="name"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field required>
-                            <label htmlFor="form-desc">Description</label>
-                            <Form.Input
-                                id="form-desc"
-                                placeholder="Description"
-                                name="description"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field>
-                            <label htmlFor="form-question-template">
-                                Question Template
-                            </label>
-                            <Form.Input
-                                id="form-question-template"
-                                name="questionTemplate"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field>
-                            <Form.Checkbox
-                                name="rateLimitEnabled"
-                                defaultChecked={input.rateLimitEnabled}
-                                label="Enable queue rate-limiting"
-                                onChange={() =>
-                                    setInput({
-                                        ...input,
-                                        rateLimitEnabled:
-                                            !input.rateLimitEnabled,
-                                    })
-                                }
-                            />
-                        </Form.Field>
-                        {input.rateLimitEnabled && (
-                            <Form.Group style={{ alignItems: "center" }}>
-                                <Form.Input
-                                    placeholder="3"
-                                    name={RateLimitFields.RATE_LIMIT_QUESTIONS}
-                                    defaultValue={input.rateLimitQuestions}
-                                    onChange={handleInputChange}
-                                    width={2}
-                                    size="mini"
-                                    type="number"
-                                    min="1"
-                                    id="rate-questions"
-                                    error={!validQuestionRate}
-                                />
-                                <label htmlFor="rate-questions">
-                                    question(s) within{" "}
-                                </label>
-                                <Form.Input
-                                    placeholder="60"
-                                    name={RateLimitFields.RATE_LIMIT_MINUTES}
-                                    defaultValue={input.rateLimitMinutes}
-                                    width={2}
-                                    size="mini"
-                                    onChange={handleInputChange}
-                                    type="number"
-                                    min="1"
-                                    id="rate-minutes"
-                                    error={!validMinsRate}
-                                />
-                                <label htmlFor="rate-minutes">
-                                    minutes per student when queue has at least
-                                </label>
-                                <Form.Input
-                                    placeholder="10"
-                                    name={RateLimitFields.RATE_LIMIT_LENGTH}
-                                    defaultValue={input.rateLimitLength}
-                                    width={2}
-                                    onChange={handleInputChange}
-                                    size="mini"
-                                    type="number"
-                                    min="0"
-                                    id="rate-length"
-                                    error={!validLenRate}
-                                />
-                                <label htmlFor="rate-length">question(s)</label>
-                            </Form.Group>
-                        )}
-                        <Form.Field required>
-                            <label htmlFor="video-radio">Video Chat</label>
-                            <Form.Group id="video-radio">
-                                <Form.Radio
-                                    label="Require Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.REQUIRED
-                                    }
-                                    name="videoChatRequired"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                                <Form.Radio
-                                    label="Allow Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.OPTIONAL
-                                    }
-                                    name="videoChatOptional"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                                <Form.Radio
-                                    label="No Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.DISABLED
-                                    }
-                                    name="videoChatDisabled"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                        <Form.Field required>
-                            <label htmlFor="pin-radio">Pin</label>
-                            <Form.Group id="pin-radio">
-                                <Form.Radio
-                                    label="Enable Pin"
-                                    checked={input.pinEnabled}
-                                    name="pinEnabled"
-                                    disabled={mutateLoading}
-                                    onChange={handlePinInputChange}
-                                />
-                                <Form.Radio
-                                    label="Disable Pin"
-                                    checked={!input.pinEnabled}
-                                    name="pinDisabled"
-                                    disabled={mutateLoading}
-                                    onChange={handlePinInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                        <Button
-                            content="Create"
-                            color="blue"
-                            type="submit"
-                            disabled={isDisabled || mutateLoading}
-                            onClick={onSubmit}
-                        />
-                        <Button
-                            content="Cancel"
-                            type="submit"
-                            disabled={mutateLoading}
-                            onClick={backFunc}
-                        />
-                    </Form>
-                </Segment>
-            </Grid.Row>
-            <Snackbar
-                open={error}
-                autoHideDuration={6000}
-                onClose={() => setError(false)}
-            >
-                <Alert severity="error" onClose={() => setError(false)}>
-                    <span>
-                        There was an error creating this queue. Names must be
-                        unique.
-                    </span>
-                </Alert>
-            </Snackbar>
-        </Grid.Column>
-    );
-};
-
-export default CreateQueue;
diff --git a/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx b/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
index 07216aa6..0c729c55 100644
--- a/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
+++ b/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
@@ -6,7 +6,7 @@ import Snackbar from "@material-ui/core/Snackbar";
 import InstructorQueues from "./InstructorQueues";
 import Announcements from "../Announcements";
 import QueueSettings from "./QueueSettings/QueueSettings";
-import CreateQueue from "./CreateQueue/CreateQueue";
+import QueueCreate from "./QueueCreate/QueueCreate";
 import { AuthUserContext } from "../../../context/auth";
 import { useQueues, useStaff } from "../../../hooks/data-fetching/course";
 import {
@@ -143,7 +143,7 @@ const InstructorQueuePage = (props: InstructorQueuePageProps) => {
                 )}
                 {pageState.kind === PageStateEnum.CREATE && (
                     <Grid.Row style={{ marginTop: "1rem" }}>
-                        <CreateQueue
+                        <QueueCreate
                             courseId={courseId}
                             mutate={mutate}
                             successFunc={() => setSuccess(true)}
diff --git a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
index a00f7a36..21ac5791 100644
--- a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
+++ b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
@@ -12,22 +12,30 @@ import moment from "moment";
 import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
 import RejectQuestionModal from "./RejectQuestionModal";
 import { AuthUserContext } from "../../../context/auth";
-import { Question, QuestionStatus, User } from "../../../types";
+import { Question, QuestionStatus, Queue, User } from "../../../types";
 import MessageQuestionModal from "./MessageQuestionModal";
 import FinishConfirmModal from "./FinishConfirmModal";
 import LinkedText from "../../common/ui/LinkedText";
+import QuestionTimer from "./QuestionTimer";
 
 export const fullName = (user: User) => `${user.firstName} ${user.lastName}`;
 
 interface QuestionCardProps {
     question: Question;
+    queue: Queue;
     mutate: mutateResourceListFunction<Question>;
     notifs: boolean;
     setNotifs: (boolean) => void;
 }
 
 const QuestionCard = (props: QuestionCardProps) => {
-    const { question, mutate: mutateQuestion, notifs, setNotifs } = props;
+    const {
+        question,
+        queue,
+        mutate: mutateQuestion,
+        notifs,
+        setNotifs,
+    } = props;
     const { id: questionId, askedBy } = question;
     const { user } = useContext(AuthUserContext);
     if (!user) {
@@ -80,12 +88,12 @@ const QuestionCard = (props: QuestionCardProps) => {
         return false; // todo: pass loading down props
     };
 
-    // Re-render timestamp every 5 seconds
+    // Re-render timestamp every 1 second
     const [, setTime] = useState(Date.now());
     useEffect(() => {
         const interval = setInterval(() => {
             setTime(Date.now());
-        }, 5000);
+        }, 1000);
         return () => clearInterval(interval);
     }, []);
 
@@ -137,48 +145,72 @@ const QuestionCard = (props: QuestionCardProps) => {
                     </div>
                     <div>
                         <Header as="h5" color="blue" textAlign="right">
-                            <Popup
-                                trigger={
-                                    question.timeResponseStarted === null ? (
-                                        <span>
-                                            Asked{" "}
-                                            {moment
-                                                .duration(
-                                                    moment().diff(
-                                                        moment(
-                                                            question.timeAsked
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: "0.5em",
+                                }}
+                            >
+                                <Popup
+                                    trigger={
+                                        question.timeResponseStarted ===
+                                        null ? (
+                                            <span>
+                                                Asked{" "}
+                                                {moment
+                                                    .duration(
+                                                        moment().diff(
+                                                            moment(
+                                                                question.timeAsked
+                                                            )
                                                         )
                                                     )
-                                                )
-                                                .humanize()}{" "}
-                                            ago
-                                        </span>
-                                    ) : (
-                                        <span>
-                                            Started{" "}
-                                            {moment
-                                                .duration(
-                                                    moment().diff(
-                                                        moment(
-                                                            question.timeResponseStarted
+                                                    .humanize()}{" "}
+                                                ago
+                                            </span>
+                                        ) : (
+                                            <span>
+                                                Started{" "}
+                                                {moment
+                                                    .duration(
+                                                        moment().diff(
+                                                            moment(
+                                                                question.timeResponseStarted
+                                                            )
                                                         )
                                                     )
-                                                )
-                                                .humanize()}{" "}
-                                            ago
-                                        </span>
-                                    )
-                                }
-                                content={timeString(
-                                    question.timeResponseStarted
-                                        ? question.timeResponseStarted
-                                        : question.timeAsked,
-                                    false
-                                )}
-                                basic
-                                inverted
-                                position="left center"
-                            />
+                                                    .humanize()}{" "}
+                                                ago
+                                            </span>
+                                        )
+                                    }
+                                    content={timeString(
+                                        question.timeResponseStarted
+                                            ? question.timeResponseStarted
+                                            : question.timeAsked,
+                                        false
+                                    )}
+                                    basic
+                                    inverted
+                                    position="left center"
+                                />
+                                {queue.questionTimerEnabled &&
+                                    question.timeResponseStarted && (
+                                        <QuestionTimer
+                                            questionStartTime={
+                                                question.timeResponseStarted
+                                            }
+                                            timerStartTime={
+                                                (queue.questionTimerEnabled &&
+                                                    queue.questionTimerStartTime) ||
+                                                10
+                                            }
+                                        />
+                                    )}
+                            </div>
                         </Header>
                     </div>
                 </div>
diff --git a/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx b/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx
new file mode 100644
index 00000000..ad97fd07
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { Label } from "semantic-ui-react";
+import timerAudio from "./timeupsound.mp3";
+import { usePlayer } from "../../../hooks/player";
+import { checkPermissions } from "../../../utils/notifications";
+
+interface QuestionTimerProps {
+    questionStartTime: string;
+    timerStartTime: number;
+}
+const QuestionTimer = ({
+    questionStartTime,
+    timerStartTime,
+}: QuestionTimerProps) => {
+    const [, , play] = usePlayer(timerAudio);
+    const now = Date.now();
+    const diff =
+        timerStartTime * 60 * 1000 -
+        (now - new Date(questionStartTime).getTime());
+    const minutes = Math.floor(Math.abs(diff) / (1000 * 60));
+    const seconds = Math.floor((Math.abs(diff) % (1000 * 60)) / 1000);
+
+    const sign = diff < 0 ? "-" : ""; // Add a negative sign if the time difference is negative
+    // Play a sound effect when hit zero (once)
+    useEffect(() => {
+        if (minutes + seconds === 0) {
+            if (!checkPermissions())
+                play.current(
+                    `Timer is up! You have answered this question for ${timerStartTime} minute(s).`
+                );
+        }
+    }, [sign]);
+    const formated = `${sign}${minutes.toString().padStart(2, "0")}:${seconds
+        .toString()
+        .padStart(2, "0")}`;
+
+    if (!questionStartTime) return null;
+    return <Label color={diff < 0 ? "red" : "green"}>{formated}</Label>;
+};
+
+export default QuestionTimer;
diff --git a/frontend/components/Course/InstructorQueuePage/Questions.tsx b/frontend/components/Course/InstructorQueuePage/Questions.tsx
index 82b54946..4ec0d38d 100644
--- a/frontend/components/Course/InstructorQueuePage/Questions.tsx
+++ b/frontend/components/Course/InstructorQueuePage/Questions.tsx
@@ -2,17 +2,18 @@ import { Grid, Message } from "semantic-ui-react";
 import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
 import _ from "lodash";
 import QuestionCard from "./QuestionCard";
-import { Question } from "../../../types";
+import { Question, Queue } from "../../../types";
 
 interface QuestionsProps {
     questions: Question[];
+    queue: Queue;
     active: boolean;
     mutate: mutateResourceListFunction<Question>;
     notifs: boolean;
     setNotifs: (boolean) => void;
 }
 const Questions = (props: QuestionsProps) => {
-    const { questions, mutate, active, notifs, setNotifs } = props;
+    const { questions, queue, mutate, active, notifs, setNotifs } = props;
     return (
         <>
             {questions &&
@@ -22,6 +23,7 @@ const Questions = (props: QuestionsProps) => {
                         <QuestionCard
                             key={question.id}
                             question={question}
+                            queue={queue}
                             mutate={mutate}
                             notifs={notifs}
                             setNotifs={setNotifs}
diff --git a/frontend/components/Course/InstructorQueuePage/Queue.tsx b/frontend/components/Course/InstructorQueuePage/Queue.tsx
index df03a5ab..7a19bee1 100644
--- a/frontend/components/Course/InstructorQueuePage/Queue.tsx
+++ b/frontend/components/Course/InstructorQueuePage/Queue.tsx
@@ -240,6 +240,7 @@ const Queue = (props: QueueProps) => {
                 <Grid.Column>
                     <Questions
                         questions={filteredQuestions}
+                        queue={queue}
                         mutate={mutateQuestions}
                         active={active}
                         notifs={notifs}
diff --git a/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx b/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx
new file mode 100644
index 00000000..7a083c1c
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { Grid, Segment, Header, Form, Button } from "semantic-ui-react";
+import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
+import Snackbar from "@material-ui/core/Snackbar";
+import Alert from "@material-ui/lab/Alert";
+import { createQueue } from "../../../../hooks/data-fetching/course";
+import { Queue, VideoChatSetting } from "../../../../types";
+import QueueFormFields, { QueueFormInput } from "../QueueFormFields";
+
+interface QueueCreateProps {
+    courseId: number;
+    backFunc: () => void;
+    successFunc: () => void;
+    mutate: mutateResourceListFunction<Queue>;
+}
+
+const QueueCreate = (props: QueueCreateProps) => {
+    const { courseId, backFunc, successFunc, mutate } = props;
+    /* STATE */
+    const [error, setError] = useState(false);
+    const [isDisabled, setDisabled] = useState(true);
+    const [input, setInput] = useState<QueueFormInput>({
+        name: "",
+        description: "",
+        questionTemplate: "",
+        videoChatSetting: VideoChatSetting.DISABLED,
+        pinEnabled: false,
+        rateLimitEnabled: false,
+        rateLimitLength: undefined,
+        rateLimitQuestions: undefined,
+        rateLimitMinutes: undefined,
+        questionTimerEnabled: false,
+        questionTimerStartTime: undefined,
+    });
+
+    const [mutateLoading, setRefetchLoading] = useState(false);
+
+    const onSubmit = async () => {
+        try {
+            await createQueue(courseId, input);
+            setRefetchLoading(true);
+            await mutate(-1, null);
+            setRefetchLoading(false);
+            backFunc();
+            successFunc();
+        } catch (e) {
+            setError(true);
+        }
+    };
+
+    return (
+        <Grid.Column width={16}>
+            <Grid.Row>
+                <Segment basic>
+                    <Header as="h3">Create New Queue</Header>
+                </Segment>
+            </Grid.Row>
+            <Grid.Row>
+                <Segment basic>
+                    <Form>
+                        <QueueFormFields
+                            defaultValues={input}
+                            loading={mutateLoading}
+                            setInput={setInput}
+                            setDisabled={setDisabled}
+                        />
+                        <Button
+                            content="Create"
+                            color="blue"
+                            type="submit"
+                            disabled={isDisabled || mutateLoading}
+                            onClick={onSubmit}
+                        />
+                        <Button
+                            content="Cancel"
+                            type="submit"
+                            disabled={mutateLoading}
+                            onClick={backFunc}
+                        />
+                    </Form>
+                </Segment>
+            </Grid.Row>
+            <Snackbar
+                open={error}
+                autoHideDuration={6000}
+                onClose={() => setError(false)}
+            >
+                <Alert severity="error" onClose={() => setError(false)}>
+                    <span>
+                        There was an error creating this queue. Names must be
+                        unique.
+                    </span>
+                </Alert>
+            </Snackbar>
+        </Grid.Column>
+    );
+};
+
+export default QueueCreate;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx b/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx
new file mode 100644
index 00000000..b5925f61
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx
@@ -0,0 +1,432 @@
+import { useEffect, useMemo, useState } from "react";
+import { Form, Icon, Popup } from "semantic-ui-react";
+import { Queue, VideoChatSetting } from "../../../types";
+
+export interface QueueFormInput {
+    name: string;
+    description: string;
+    questionTemplate: string;
+    queueId?: number;
+    videoChatSetting: VideoChatSetting;
+    pinEnabled: boolean;
+    rateLimitEnabled: boolean;
+    rateLimitLength?: number;
+    rateLimitQuestions?: number;
+    rateLimitMinutes?: number;
+    questionTimerEnabled: boolean;
+    questionTimerStartTime?: number;
+}
+interface QueueFormSettingsProps {
+    defaultValues: any;
+    queue?: Queue;
+    loading: boolean;
+    setInput: (any) => void;
+    setDisabled: (boolean) => void;
+}
+enum RateLimitFields {
+    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
+    RATE_LIMIT_MINUTES = "rateLimitMinutes",
+    RATE_LIMIT_LENGTH = "rateLimitLength",
+}
+
+enum QuestionTimerFields {
+    QUESTION_TIMER_START_TIME = "questionTimerStartTime",
+}
+
+const castInt = (n: string): number | undefined => {
+    let casted: number | undefined = parseInt(n, 10);
+    if (isNaN(casted)) {
+        casted = undefined;
+    }
+
+    return casted;
+};
+
+const QueueFormFields = ({
+    defaultValues,
+    queue,
+    loading,
+    setInput,
+    setDisabled,
+}: QueueFormSettingsProps) => {
+    const input = defaultValues;
+    const [validQuestionRate, setValidQuestionRate] = useState(true);
+    const [validMinsRate, setValidMinsRate] = useState(true);
+    const [validLenRate, setValidLenRate] = useState(true);
+
+    const [validQuestionTime, setValidQuestionTime] = useState(true);
+    const [nameCharCount, setNameCharCount] = useState(input.name.length);
+    const [descCharCount, setDescCharCount] = useState(
+        input.description.length
+    );
+    const [templCharCount, setTemplCharCount] = useState(
+        input.questionTemplate.length
+    );
+    const descCharLimit: number = 1000;
+    const templCharLimit: number = 1000;
+    const isDisabled = useMemo(() => {
+        let invalidInps = !input.name || !input.description;
+        if (input.rateLimitEnabled) {
+            invalidInps =
+                invalidInps ||
+                input.rateLimitLength === undefined ||
+                (input.rateLimitLength !== undefined &&
+                    input.rateLimitLength < 0);
+            invalidInps =
+                invalidInps ||
+                input.rateLimitQuestions === undefined ||
+                (input.rateLimitQuestions !== undefined &&
+                    input.rateLimitQuestions <= 0);
+            invalidInps =
+                invalidInps ||
+                input.rateLimitMinutes === undefined ||
+                (input.rateLimitMinutes !== undefined &&
+                    input.rateLimitMinutes <= 0);
+        }
+        if (input.questionTimerEnabled) {
+            invalidInps =
+                invalidInps ||
+                input.questionTimerStartTime === undefined ||
+                input.questionTimerStartTime <= 0;
+        }
+        if (!queue) return invalidInps;
+
+        let isSame =
+            input.name === queue.name &&
+            input.description === queue.description &&
+            input.questionTemplate === queue.questionTemplate &&
+            input.videoChatSetting === queue.videoChatSetting &&
+            input.pinEnabled === queue.pinEnabled;
+        if (input.rateLimitEnabled !== queue.rateLimitEnabled) {
+            isSame = false;
+        } else if (input.rateLimitEnabled && queue.rateLimitEnabled) {
+            isSame =
+                isSame &&
+                input.rateLimitLength === queue.rateLimitLength &&
+                input.rateLimitQuestions === queue.rateLimitQuestions &&
+                input.rateLimitMinutes === queue.rateLimitMinutes;
+        }
+        // TODO: this is probably bad
+        if (input.questionTimerEnabled !== queue.questionTimerEnabled) {
+            isSame = false;
+        } else if (input.questionTimerEnabled && queue.questionTimerEnabled) {
+            isSame =
+                isSame &&
+                input.questionTimerStartTime === queue.questionTimerStartTime;
+        }
+        return invalidInps || isSame;
+        // Queue covers all our cases
+        // TODO: Should make this not depend on "stringifying" queue, as it re-renders every time.
+        // eslint-disable-next-line
+    }, [input, JSON.stringify(queue)]);
+    useEffect(() => {
+        setDisabled(isDisabled);
+    }, [isDisabled, setDisabled]);
+
+    /* HANDLER FUNCTIONS */
+    const handleInputChange = (e, { name, value }) => {
+        if (name === "description" && value.length > descCharLimit) return;
+        if (name === "questionTemplate" && value.length > templCharLimit)
+            return;
+        if (name === "name" && value.length > 100) return;
+
+        input[name] = value;
+
+        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
+            input[name] = castInt(input[name]);
+            setValidQuestionRate(input[name] > 0);
+        }
+
+        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
+            input[name] = castInt(input[name]);
+            setValidMinsRate(input[name] > 0);
+        }
+
+        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
+            input[name] = castInt(input[name]);
+            setValidLenRate(input[name] >= 0);
+        }
+
+        if (name === QuestionTimerFields.QUESTION_TIMER_START_TIME) {
+            input[name] = castInt(input[name]);
+            setValidQuestionTime(input[name] > 0);
+        }
+
+        setInput({ ...input });
+        setDescCharCount(input.description.length);
+        setTemplCharCount(input.questionTemplate.length);
+        setNameCharCount(input.name.length);
+    };
+
+    const handleVideoChatInputChange = (e, { name }) => {
+        switch (name) {
+            case "videoChatRequired":
+                input.videoChatSetting = VideoChatSetting.REQUIRED;
+                break;
+            case "videoChatOptional":
+                input.videoChatSetting = VideoChatSetting.OPTIONAL;
+                break;
+            case "videoChatDisabled":
+                input.videoChatSetting = VideoChatSetting.DISABLED;
+                break;
+        }
+        setInput({ ...input });
+    };
+
+    const handlePinInputChange = (e, { checked }) => {
+        input.pinEnabled = checked;
+        setInput({ ...input });
+    };
+    /* PROPS UPDATE */
+
+    return (
+        <>
+            <Form.Field required>
+                <label htmlFor="form-name">Name</label>
+                <Form.Input
+                    id="form-name"
+                    defaultValue={input.name}
+                    name="name"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: nameCharCount < 100 ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${nameCharCount}/100`}
+                </div>
+            </Form.Field>
+            <Form.Field required>
+                <label htmlFor="form-desc">Description</label>
+                <Form.TextArea
+                    id="form-desc"
+                    defaultValue={input.description}
+                    name="description"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: descCharCount < descCharLimit ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${descCharCount}/${descCharLimit}`}
+                </div>
+            </Form.Field>
+            <Form.Field>
+                <label htmlFor="form-desc">Question Template</label>
+                <Form.TextArea
+                    id="form-desc"
+                    defaultValue={input.questionTemplate}
+                    name="questionTemplate"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: templCharCount < templCharLimit ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${templCharCount}/${templCharLimit}`}
+                </div>
+            </Form.Field>
+            <Form.Field>
+                <label style={{ display: "inline-block" }} htmlFor="pin-toggle">
+                    Pin
+                </label>
+                <Form.Radio
+                    label="Enable Pin"
+                    checked={input.pinEnabled}
+                    name="pinEnabled"
+                    id="pin-toggle"
+                    toggle
+                    disabled={loading}
+                    onChange={handlePinInputChange}
+                />
+            </Form.Field>
+
+            <Form.Field>
+                <label
+                    style={{ display: "inline-block" }}
+                    htmlFor="rate-limit-toggle"
+                >
+                    Rate Limit
+                </label>
+                <Form.Radio
+                    name="rateLimitEnabled"
+                    id="rate-limit-toggle"
+                    toggle
+                    defaultChecked={input.rateLimitEnabled}
+                    label="Enable queue rate-limiting"
+                    onChange={() =>
+                        setInput({
+                            ...input,
+                            rateLimitEnabled: !input.rateLimitEnabled,
+                        })
+                    }
+                />
+
+                {input.rateLimitEnabled && (
+                    <Form.Group
+                        id="rate-limit"
+                        style={{
+                            alignItems: "center",
+                            marginLeft: "1em",
+                        }}
+                    >
+                        <Form.Input
+                            placeholder="3"
+                            name={RateLimitFields.RATE_LIMIT_QUESTIONS}
+                            defaultValue={input.rateLimitQuestions}
+                            onChange={handleInputChange}
+                            width={2}
+                            size="mini"
+                            type="number"
+                            min="1"
+                            id="rate-questions"
+                            error={!validQuestionRate}
+                        />
+                        <label htmlFor="rate-questions">
+                            question(s) within{" "}
+                        </label>
+                        <Form.Input
+                            placeholder="60"
+                            name={RateLimitFields.RATE_LIMIT_MINUTES}
+                            defaultValue={input.rateLimitMinutes}
+                            width={2}
+                            size="mini"
+                            onChange={handleInputChange}
+                            type="number"
+                            min="1"
+                            id="rate-minutes"
+                            error={!validMinsRate}
+                        />
+                        <label htmlFor="rate-minutes">
+                            minutes per student when queue has at least
+                        </label>
+                        <Form.Input
+                            placeholder="10"
+                            name={RateLimitFields.RATE_LIMIT_LENGTH}
+                            defaultValue={input.rateLimitLength}
+                            width={2}
+                            onChange={handleInputChange}
+                            size="mini"
+                            type="number"
+                            min="0"
+                            id="rate-length"
+                            error={!validLenRate}
+                        />
+                        <label htmlFor="rate-length">question(s)</label>
+                    </Form.Group>
+                )}
+                <Form.Field>
+                    <label htmlFor="video-radio">Video Chat</label>
+                    <Form.Group id="video-radio">
+                        <Form.Radio
+                            label="Require Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.REQUIRED
+                            }
+                            name="videoChatRequired"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                        <Form.Radio
+                            label="Allow Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.OPTIONAL
+                            }
+                            name="videoChatOptional"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                        <Form.Radio
+                            label="No Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.DISABLED
+                            }
+                            name="videoChatDisabled"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                    </Form.Group>
+                </Form.Field>
+                <Form.Field>
+                    <Popup
+                        trigger={
+                            <label
+                                style={{ display: "inline-block" }}
+                                htmlFor="timer-questions-group"
+                            >
+                                Question Timer
+                                <Icon
+                                    name="question circle outline"
+                                    style={{ marginLeft: "0.5em" }}
+                                />
+                            </label>
+                        }
+                        content="The countdown timer is only visable to staff"
+                    />
+
+                    <Form.Radio
+                        name="questionTimerEnabled"
+                        defaultChecked={input.questionTimerEnabled}
+                        toggle
+                        label="Enable a countdown for questions"
+                        onChange={() =>
+                            setInput({
+                                ...input,
+                                questionTimerEnabled:
+                                    !input.questionTimerEnabled,
+                            })
+                        }
+                    />
+                </Form.Field>
+
+                {input.questionTimerEnabled && (
+                    <Form.Group
+                        id="timer-questions-group"
+                        style={{
+                            alignItems: "center",
+                            marginLeft: "1em",
+                        }}
+                    >
+                        <label id="timer-questions-group">
+                            Countdown from{" "}
+                        </label>
+                        <Form.Input
+                            placeholder="10"
+                            name={QuestionTimerFields.QUESTION_TIMER_START_TIME}
+                            defaultValue={input.questionTimerStartTime}
+                            onChange={handleInputChange}
+                            width={2}
+                            size="mini"
+                            type="number"
+                            onKeyPress={(event) => {
+                                if (!/[0-9]/.test(event.key)) {
+                                    event.preventDefault();
+                                }
+                            }}
+                            min="1"
+                            id="timer-questions"
+                            error={!validQuestionTime}
+                        />
+                        <label htmlFor="timer-questions">
+                            minute(s) per question
+                        </label>
+                    </Form.Group>
+                )}
+            </Form.Field>
+        </>
+    );
+};
+
+export default QueueFormFields;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx
deleted file mode 100644
index b656c436..00000000
--- a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import { useState, useMemo } from "react";
-import { Form, Button, Modal } from "semantic-ui-react";
-import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "@material-ui/lab/Alert";
-import { Queue, VideoChatSetting } from "../../../../types";
-import { logException } from "../../../../utils/sentry";
-
-// TODO: error check PATCH
-interface QueueFormProps {
-    queue: Queue;
-    mutate: mutateResourceListFunction<Queue>;
-    backFunc: () => void;
-}
-
-interface QueueFormInput {
-    name: string;
-    description: string;
-    questionTemplate: string;
-    queueId: number;
-    videoChatSetting: VideoChatSetting;
-    pinEnabled: boolean;
-    rateLimitEnabled: boolean;
-    rateLimitLength?: number;
-    rateLimitQuestions?: number;
-    rateLimitMinutes?: number;
-}
-
-enum RateLimitFields {
-    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
-    RATE_LIMIT_MINUTES = "rateLimitMinutes",
-    RATE_LIMIT_LENGTH = "rateLimitLength",
-}
-
-const castInt = (n: string): number | undefined => {
-    let casted: number | undefined = parseInt(n, 10);
-    if (isNaN(casted)) {
-        casted = undefined;
-    }
-
-    return casted;
-};
-
-const QueueForm = (props: QueueFormProps) => {
-    /* STATE */
-    const descCharLimit: number = 1000;
-    const templCharLimit: number = 1000;
-    const [success, setSuccess] = useState(false);
-    const [error, setError] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const { queue } = props;
-    const [open, setOpen] = useState(false);
-    const [input, setInput] = useState<QueueFormInput>({
-        name: queue.name,
-        description: queue.description,
-        questionTemplate: queue.questionTemplate,
-        queueId: queue.id,
-        videoChatSetting: queue.videoChatSetting,
-        pinEnabled: queue.pinEnabled,
-        rateLimitEnabled: queue.rateLimitEnabled,
-        rateLimitLength: queue.rateLimitEnabled
-            ? queue.rateLimitLength
-            : undefined,
-        rateLimitMinutes: queue.rateLimitEnabled
-            ? queue.rateLimitMinutes
-            : undefined,
-        rateLimitQuestions: queue.rateLimitEnabled
-            ? queue.rateLimitQuestions
-            : undefined,
-    });
-    const [validQuestionRate, setValidQuestionRate] = useState(true);
-    const [validMinsRate, setValidMinsRate] = useState(true);
-    const [validLenRate, setValidLenRate] = useState(true);
-
-    const [nameCharCount, setNameCharCount] = useState(input.name.length);
-    const [descCharCount, setDescCharCount] = useState(
-        input.description.length
-    );
-    const [templCharCount, setTemplCharCount] = useState(
-        input.questionTemplate.length
-    );
-
-    const isDisabled = useMemo(() => {
-        let invalidInps = !input.name || !input.description;
-        if (input.rateLimitEnabled) {
-            invalidInps =
-                invalidInps ||
-                input.rateLimitLength === undefined ||
-                (input.rateLimitLength !== undefined &&
-                    input.rateLimitLength < 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitQuestions === undefined ||
-                (input.rateLimitQuestions !== undefined &&
-                    input.rateLimitQuestions <= 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitMinutes === undefined ||
-                (input.rateLimitMinutes !== undefined &&
-                    input.rateLimitMinutes <= 0);
-        }
-
-        let isSame =
-            input.name === queue.name &&
-            input.description === queue.description &&
-            input.questionTemplate === queue.questionTemplate &&
-            input.videoChatSetting === queue.videoChatSetting &&
-            input.pinEnabled === queue.pinEnabled;
-        if (input.rateLimitEnabled !== queue.rateLimitEnabled) {
-            isSame = false;
-        } else if (input.rateLimitEnabled && queue.rateLimitEnabled) {
-            isSame =
-                isSame &&
-                input.rateLimitLength === queue.rateLimitLength &&
-                input.rateLimitQuestions === queue.rateLimitQuestions &&
-                input.rateLimitMinutes === queue.rateLimitMinutes;
-        }
-        return invalidInps || isSame;
-        // Queue covers all our cases
-        // eslint-disable-next-line
-    }, [input, JSON.stringify(queue)]);
-
-    /* HANDLER FUNCTIONS */
-    const handleInputChange = (e, { name, value }) => {
-        if (name === "description" && value.length > descCharLimit) return;
-        if (name === "questionTemplate" && value.length > templCharLimit)
-            return;
-        if (name === "name" && value.length > 100) return;
-
-        input[name] = value;
-
-        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
-            input[name] = castInt(input[name]);
-            setValidQuestionRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
-            input[name] = castInt(input[name]);
-            setValidMinsRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
-            input[name] = castInt(input[name]);
-            setValidLenRate(input[name] >= 0);
-        }
-
-        setInput({ ...input });
-        setDescCharCount(input.description.length);
-        setTemplCharCount(input.questionTemplate.length);
-        setNameCharCount(input.name.length);
-    };
-
-    const handleVideoChatInputChange = (e, { name }) => {
-        switch (name) {
-            case "videoChatRequired":
-                input.videoChatSetting = VideoChatSetting.REQUIRED;
-                break;
-            case "videoChatOptional":
-                input.videoChatSetting = VideoChatSetting.OPTIONAL;
-                break;
-            case "videoChatDisabled":
-                input.videoChatSetting = VideoChatSetting.DISABLED;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const handlePinInputChange = (e, { name }) => {
-        switch (name) {
-            case "pinEnabled":
-                input.pinEnabled = true;
-                break;
-            case "pinDisabled":
-                input.pinEnabled = false;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const onSubmit = async () => {
-        try {
-            setLoading(true);
-            await props.mutate(queue.id, input);
-            setSuccess(true);
-        } catch (e) {
-            logException(e);
-            setError(true);
-        }
-        setLoading(false);
-    };
-
-    const onArchived = async () => {
-        await props.mutate(queue.id, { archived: true });
-        setOpen(false);
-        props.backFunc();
-    };
-
-    /* PROPS UPDATE */
-
-    return (
-        <Form>
-            {queue && (
-                <div>
-                    <Form.Field>
-                        <label htmlFor="form-name">Name</label>
-                        <Form.Input
-                            id="form-name"
-                            defaultValue={input.name}
-                            name="name"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color: nameCharCount < 100 ? "" : "crimson",
-                            }}
-                        >
-                            {`Characters: ${nameCharCount}/100`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <label htmlFor="form-desc">Description</label>
-                        <Form.TextArea
-                            id="form-desc"
-                            defaultValue={input.description}
-                            name="description"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color:
-                                    descCharCount < descCharLimit
-                                        ? ""
-                                        : "crimson",
-                            }}
-                        >
-                            {`Characters: ${descCharCount}/${descCharLimit}`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <label htmlFor="form-desc">Question Template</label>
-                        <Form.TextArea
-                            id="form-desc"
-                            defaultValue={input.questionTemplate}
-                            name="questionTemplate"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color:
-                                    templCharCount < templCharLimit
-                                        ? ""
-                                        : "crimson",
-                            }}
-                        >
-                            {`Characters: ${templCharCount}/${templCharLimit}`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <Form.Checkbox
-                            name="rateLimitEnabled"
-                            defaultChecked={input.rateLimitEnabled}
-                            label="Enable queue rate-limiting"
-                            onChange={() =>
-                                setInput({
-                                    ...input,
-                                    rateLimitEnabled: !input.rateLimitEnabled,
-                                })
-                            }
-                        />
-                    </Form.Field>
-
-                    {input.rateLimitEnabled && (
-                        <Form.Group style={{ alignItems: "center" }}>
-                            <Form.Input
-                                placeholder="3"
-                                name={RateLimitFields.RATE_LIMIT_QUESTIONS}
-                                defaultValue={input.rateLimitQuestions}
-                                onChange={handleInputChange}
-                                width={2}
-                                size="mini"
-                                type="number"
-                                min="1"
-                                id="rate-questions"
-                                error={!validQuestionRate}
-                            />
-                            <label htmlFor="rate-questions">
-                                question(s) within{" "}
-                            </label>
-                            <Form.Input
-                                placeholder="60"
-                                name={RateLimitFields.RATE_LIMIT_MINUTES}
-                                defaultValue={input.rateLimitMinutes}
-                                width={2}
-                                size="mini"
-                                onChange={handleInputChange}
-                                type="number"
-                                min="1"
-                                id="rate-minutes"
-                                error={!validMinsRate}
-                            />
-                            <label htmlFor="rate-minutes">
-                                minutes per student when queue has at least
-                            </label>
-                            <Form.Input
-                                placeholder="10"
-                                name={RateLimitFields.RATE_LIMIT_LENGTH}
-                                defaultValue={input.rateLimitLength}
-                                width={2}
-                                onChange={handleInputChange}
-                                size="mini"
-                                type="number"
-                                min="0"
-                                id="rate-length"
-                                error={!validLenRate}
-                            />
-                            <label htmlFor="rate-length">question(s)</label>
-                        </Form.Group>
-                    )}
-
-                    <Form.Field required>
-                        <label htmlFor="video-radio">Video Chat</label>
-                        <Form.Group id="video-radio">
-                            <Form.Radio
-                                label="Require Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.REQUIRED
-                                }
-                                name="videoChatRequired"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                            <Form.Radio
-                                label="Allow Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.OPTIONAL
-                                }
-                                name="videoChatOptional"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                            <Form.Radio
-                                label="No Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.DISABLED
-                                }
-                                name="videoChatDisabled"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                        </Form.Group>
-                        <Form.Field required>
-                            <label htmlFor="pin-radio">Pin</label>
-                            <Form.Group id="pin-radio">
-                                <Form.Radio
-                                    label="Enable Pin"
-                                    checked={input.pinEnabled}
-                                    name="pinEnabled"
-                                    disabled={loading}
-                                    onChange={handlePinInputChange}
-                                />
-                                <Form.Radio
-                                    label="Disable Pin"
-                                    checked={!input.pinEnabled}
-                                    name="pinDisabled"
-                                    disabled={loading}
-                                    onChange={handlePinInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                    </Form.Field>
-
-                    <Button
-                        color="blue"
-                        type="submit"
-                        disabled={isDisabled || loading}
-                        loading={loading}
-                        onClick={onSubmit}
-                    >
-                        Save
-                    </Button>
-                    <Modal
-                        open={open}
-                        trigger={
-                            <Button type="submit" onClick={() => setOpen(true)}>
-                                Archive
-                            </Button>
-                        }
-                    >
-                        <Modal.Header>Archive Queue</Modal.Header>
-                        <Modal.Content>
-                            You are about to archive this queue:{" "}
-                            <b>{queue.name}</b>.
-                        </Modal.Content>
-                        <Modal.Actions>
-                            <Button
-                                content="Cancel"
-                                disabled={loading}
-                                onClick={() => setOpen(false)}
-                            />
-                            <Button
-                                content="Archive"
-                                onClick={onArchived}
-                                disabled={loading}
-                                color="red"
-                            />
-                        </Modal.Actions>
-                    </Modal>
-                </div>
-            )}
-            <Snackbar
-                open={success}
-                autoHideDuration={2000}
-                onClose={() => setSuccess(false)}
-            >
-                <Alert severity="success" onClose={() => setSuccess(false)}>
-                    <span>
-                        <b>{queue.name}</b> successfully updated
-                    </span>
-                </Alert>
-            </Snackbar>
-            <Snackbar
-                open={error}
-                autoHideDuration={6000}
-                onClose={() => setError(false)}
-            >
-                <Alert severity="error" onClose={() => setError(false)}>
-                    <span>
-                        There was an error editing <b>{queue.name}</b>
-                    </span>
-                </Alert>
-            </Snackbar>
-        </Form>
-    );
-};
-
-export default QueueForm;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
index 3d0ee0ce..6a6b4720 100644
--- a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
+++ b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
@@ -7,7 +7,7 @@ import {
     Loader,
 } from "semantic-ui-react";
 import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import QueueForm from "./QueueForm";
+import UpdateQueueForm from "./QueueSettingsForm";
 import { Queue } from "../../../../types";
 
 interface QueueSettingsProps {
@@ -48,7 +48,7 @@ const QueueSettings = (props: QueueSettingsProps) => {
             </Grid.Row>
             <Grid.Row>
                 <Segment basic>
-                    <QueueForm
+                    <UpdateQueueForm
                         mutate={mutate}
                         queue={queue}
                         backFunc={backFunc}
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx
new file mode 100644
index 00000000..b55e8277
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx
@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { Form, Button, Modal } from "semantic-ui-react";
+import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
+import Snackbar from "@material-ui/core/Snackbar";
+import Alert from "@material-ui/lab/Alert";
+import { Queue } from "../../../../types";
+import { logException } from "../../../../utils/sentry";
+import QueueFormFields, { QueueFormInput } from "../QueueFormFields";
+
+// TODO: error check PATCH
+interface QueueFormProps {
+    queue: Queue;
+    mutate: mutateResourceListFunction<Queue>;
+    backFunc: () => void;
+}
+
+const UpdateQueueForm = (props: QueueFormProps) => {
+    /* STATE */
+
+    const [success, setSuccess] = useState(false);
+    const [error, setError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { queue } = props;
+    const [open, setOpen] = useState(false);
+    const [isDisabled, setDisabled] = useState(true);
+    const [input, setInput] = useState<QueueFormInput>({
+        name: queue.name,
+        description: queue.description,
+        questionTemplate: queue.questionTemplate,
+        queueId: queue.id,
+        videoChatSetting: queue.videoChatSetting,
+        pinEnabled: queue.pinEnabled,
+        rateLimitEnabled: queue.rateLimitEnabled,
+        rateLimitLength: queue.rateLimitEnabled
+            ? queue.rateLimitLength
+            : undefined,
+        rateLimitMinutes: queue.rateLimitEnabled
+            ? queue.rateLimitMinutes
+            : undefined,
+        rateLimitQuestions: queue.rateLimitEnabled
+            ? queue.rateLimitQuestions
+            : undefined,
+        questionTimerEnabled: queue.questionTimerEnabled,
+        questionTimerStartTime: queue.questionTimerEnabled
+            ? queue.questionTimerStartTime
+            : undefined,
+    });
+
+    const onSubmit = async () => {
+        try {
+            setLoading(true);
+            await props.mutate(queue.id, input);
+            setSuccess(true);
+        } catch (e) {
+            logException(e);
+            setError(true);
+        }
+        setLoading(false);
+    };
+
+    const onArchived = async () => {
+        await props.mutate(queue.id, { archived: true });
+        setOpen(false);
+        props.backFunc();
+    };
+
+    return (
+        <Form>
+            {queue && (
+                <div>
+                    <QueueFormFields
+                        defaultValues={input}
+                        queue={queue}
+                        loading={loading}
+                        setInput={setInput}
+                        setDisabled={setDisabled}
+                    />
+                    <Button
+                        color="blue"
+                        type="submit"
+                        disabled={isDisabled || loading}
+                        loading={loading}
+                        onClick={onSubmit}
+                    >
+                        Save
+                    </Button>
+                    <Modal
+                        open={open}
+                        trigger={
+                            <Button type="submit" onClick={() => setOpen(true)}>
+                                Archive
+                            </Button>
+                        }
+                    >
+                        <Modal.Header>Archive Queue</Modal.Header>
+                        <Modal.Content>
+                            You are about to archive this queue:{" "}
+                            <b>{queue.name}</b>.
+                        </Modal.Content>
+                        <Modal.Actions>
+                            <Button
+                                content="Cancel"
+                                disabled={loading}
+                                onClick={() => setOpen(false)}
+                            />
+                            <Button
+                                content="Archive"
+                                onClick={onArchived}
+                                disabled={loading}
+                                color="red"
+                            />
+                        </Modal.Actions>
+                    </Modal>
+                </div>
+            )}
+            <Snackbar
+                open={success}
+                autoHideDuration={2000}
+                onClose={() => setSuccess(false)}
+            >
+                <Alert severity="success" onClose={() => setSuccess(false)}>
+                    <span>
+                        <b>{queue.name}</b> successfully updated
+                    </span>
+                </Alert>
+            </Snackbar>
+            <Snackbar
+                open={error}
+                autoHideDuration={6000}
+                onClose={() => setError(false)}
+            >
+                <Alert severity="error" onClose={() => setError(false)}>
+                    <span>
+                        There was an error editing <b>{queue.name}</b>
+                    </span>
+                </Alert>
+            </Snackbar>
+        </Form>
+    );
+};
+
+export default UpdateQueueForm;
diff --git a/frontend/components/Course/InstructorQueuePage/timeupsound.mp3 b/frontend/components/Course/InstructorQueuePage/timeupsound.mp3
new file mode 100644
index 00000000..130090a8
Binary files /dev/null and b/frontend/components/Course/InstructorQueuePage/timeupsound.mp3 differ
diff --git a/frontend/types.tsx b/frontend/types.tsx
index f1905f2f..ff1ba5b8 100644
--- a/frontend/types.tsx
+++ b/frontend/types.tsx
@@ -81,14 +81,28 @@ export enum VideoChatSetting {
     DISABLED = "DISABLED",
 }
 
-export type Queue =
-    | (BaseQueue & { rateLimitEnabled: false })
-    | (BaseQueue & {
-          rateLimitEnabled: true;
-          rateLimitLength: number;
-          rateLimitQuestions: number;
-          rateLimitMinutes: number;
-      });
+/* 
+    Useful to scale the case where a property is only present when a flag is true for more than just "rateLimitEnabled"
+*/
+type ConditionalProperties<Flag extends string, Properties> =
+    | { [K in Flag]: false } // Flag is false, no properties
+    | ({ [K in Flag]: true } & Properties); // Flag is true, include properties
+
+export type Queue = BaseQueue &
+    ConditionalProperties<
+        "rateLimitEnabled", // Conditional Flag
+        {
+            rateLimitLength: number; // Conditional Properties present when rateLimitEnabled is true
+            rateLimitQuestions: number;
+            rateLimitMinutes: number;
+        }
+    > &
+    ConditionalProperties<
+        "questionTimerEnabled",
+        {
+            questionTimerStartTime: number;
+        }
+    >;
 
 // "ASKED" "WITHDRAWN" "ACTIVE" "REJECTED" "ANSWERED"
 export enum QuestionStatus {