Just have the base UI in there without state control and stuff

src/App.tsx

@@ -54,6 +54,7 @@ import TeammateReview from './pages/Student Teams/TeammateReview';
 import SignupSheet from 'components/SignupSheet/SignupSheet';
 import PartnerAdvertisements from 'components/SignupSheet/PartnerAdvertisements';
 import ReviewReportPage from "./pages/Reviews/ReviewReportPage";
+import AssignmentEditPage from "pages/Assignments/AssignmentEditPage";
 function App() {
   const router = createBrowserRouter([
     {
@@ -76,7 +77,7 @@ function App() {
 
         {
           path: "assignments/edit/:id",
-          element: <AssignmentEditor mode="update" />,
+          element: <AssignmentEditPage mode="update" />,
           loader: loadAssignment,
         },
         {
@@ -125,7 +126,7 @@ function App() {
 
         {
           path: "assignments/new",
-          element: <AssignmentEditor mode="create" />,
+          element: <AssignmentEditPage mode="create" />,
           loader: loadAssignment,
         },
 

src/pages/Assignments/AssignmentEditor.tsx

@@ -802,6 +802,8 @@ const AssignmentEditor: React.FC<IEditor> = ({ mode }) => {
                       { label: "Review Strategy 1", value: 1 },
                       { label: "Review Strategy 2", value: 2 },
                       { label: "Review Strategy 3", value: 3 },
+                      { label: "Review Strategy 4", value: 4 },
+                      { label: "Review Strategy 5", value: 5 },
                     ]}
                   />
                 </div>

src/pages/Assignments/tabs/ReviewStrategyTab.tsx

@@ -1,13 +1,105 @@
-import { Col, Row } from "react-bootstrap";
+import FormSelect from "components/Form/FormSelect";
+import { Col, Row, Form, Button, Modal, FloatingLabel, Stack } from "react-bootstrap";
+import FormSelect from "../../components/Form/FormSelect";
 
 const ReviewStrategyTab = () => {
   return (
     <Row className="mt-4">
       <Col>
-        <div className="alert alert-info">
-          <h4>Review Strategy Section</h4>
-          <p>This section will be implemented later.</p>
+
+       <div className="row">
+
+          <div className="col-md-6">
+
+            <Form className="topics-settings-form">
+              <Form.Group as={Row} className="mb-3">  
+                <Form.Label column sm="3" className="form-label">
+                  Review Strategy:
+                </Form.Label>
+                <Col sm="3">
+                  <Form.Select>
+                    <option value="1">Static Strategy</option>
+                    <option value="2">Dynamic Strategy</option>
+                  </Form.Select>
+                </Col>
+
+              </Form.Group>
+
+              <Form.Group as={Row} className="mb-3">  
+                <Form.Label column sm="5">
+                  Maximum number of reviews per submission:
+                </Form.Label>
+                <Col sm="2">
+                  <Form.Control type = "number" defaultValue="0"/>
+                </Col>
+
+              </Form.Group>
+
+
+              <Form.Group as={Row} className="mb-3">  
+                <Form.Check
+                  type="checkbox"
+                  id="maximumPartipants"
+                  label="Has Max Review Limit?"
+                />
+              </Form.Group>
+
+              <Form.Group as={Row} className="mb-3">
+                <Form.Label column sm="5" className="form-label">
+                  Set allowed number of reviews per reviewer:
+                </Form.Label>
+                <Col sm="2">
+                  <Form.Control type = "number" defaultValue="0"/>
+                </Col>
+              </Form.Group>
+
+              <Form.Group as={Row} className="mb-3">
+                <Form.Label column sm="5" className="form-label">
+                  Set required number of reviews per reviewer:
+                </Form.Label>
+                <Col sm="2">
+                  <Form.Control type = "number" defaultValue="0"/>
+                </Col>
+              </Form.Group>
+
+              <Form.Group as={Row} className="mb-3">
+                <Form.Check
+                type="checkbox"
+                id="anonymous"
+                label="Is review anonymous?"
+              />
+                <Form.Check
+                type="checkbox"
+                id="teams"
+                label="Is review done by teams?"
+              />
+                <Form.Check
+                type="checkbox"
+                id="self-review"
+                label="Allow self-reviews?"
+              />
+                <Form.Check
+                type="checkbox"
+                id="visible"
+                label="Reviews visible to other reviewers?"
+              />
+              </Form.Group>
+            </Form>
+          </div>
+
+          {/* Footer / Buttons
+        This maps to your <Modal.Footer>
+        */}
+        <div className="mt-4 pt-3 border-top d-flex justify-content-end">
+          <button type="button" className="btn btn-outline-secondary me-2">
+            Back
+          </button>
+          <button type="submit" className="btn btn-outline-success">
+            Save
+          </button>
         </div>
+       </div>
+
       </Col>
     </Row>
   );

src/pages/Assignments/tabs/RubricsTab.tsx

@@ -1,3 +1,4 @@
+import FormCheckbox from "components/Form/FormCheckBox";
 import { Col, Row } from "react-bootstrap";
 
 const RubricsTab = () => {
@@ -8,6 +9,8 @@ const RubricsTab = () => {
           <h4>Rubrics Section</h4>
           <p>This section will be implemented later.</p>
         </div>
+
+
       </Col>
     </Row>
   );