diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 9e1533ce86d2488359f1a6a93572b93bcc5f557b..543576d65ff6f2669128d518742cb110bef3736e 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -12,11 +12,15 @@ import Badge from "react-bootstrap/Badge";
 import Card from "react-bootstrap/Card";
 import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
+import Container from "react-bootstrap/Container";
+import Form from "react-bootstrap/Form";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faInfoCircle,
   faFile,
   faFolder,
+  faDownload,
+  faCheckSquare
 } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleResources: React.FC = () => {
@@ -36,9 +40,32 @@ const ModuleResources: React.FC = () => {
         </InputGroup.Append>
       </InputGroup>
 
-      <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
-	
-			{/* TODO: add scroll listener once code is refactored */}
+      <div className={styles.sectionHeaderContainer}>
+        <span className={styles.sectionHeader}>Quick Access</span>
+        <div className={styles.sectionHeaderButtonGroup}>
+          <Button className={styles.sectionHeaderButton}>
+            Download
+            <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
+          </Button>
+          <Button className={styles.sectionHeaderButton}>
+            <span
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
+            >
+              Select All
+              <Form.Check
+                className={styles.buttonCheckbox}
+                aria-label="option 1"
+              />
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      {/* TODO: add scroll listener once code is refactored */}
       <Row
         className={classNames(
           "d-flex",
@@ -86,13 +113,32 @@ const ModuleResources: React.FC = () => {
         ))}
       </Row>
 
-      <h5
-        style={{ marginTop: "30px", marginBottom: "10px" }}
-        className={classNames(styles.moduleSectionHeader)}
-      >
-        Folders
-      </h5>
-      <Row>
+      <div className={styles.sectionHeaderContainer}>
+        <span className={styles.sectionHeader}>Folders</span>
+        <div className={styles.sectionHeaderButtonGroup}>
+          <Button className={styles.sectionHeaderButton}>
+            Download
+            <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
+          </Button>
+          <Button className={styles.sectionHeaderButton}>
+            <span
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
+            >
+              Select All
+              <Form.Check
+                className={styles.buttonCheckbox}
+                aria-label="option 1"
+              />
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      <Row style={{ marginTop: "10px" }}>
         {[...Array(10)].map((e, i) => (
           <Col xs={6} sm={6} md={3} key={i}>
             <Card className={styles.folderCard}>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 84ae941b0bc4c63556bd43c8500c5afa67b7459f..cc855b53e132a3a174c78ab8f3d9a9eed3f8203f 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -1,13 +1,8 @@
 @import "assets/scss/custom";
 
-
-	/* bootstrap 5's grid, delete if causes trouble */
+/* bootstrap 5's grid, delete if causes trouble */
 @import "assets/scss/bootstrap5/bootstrap-grid";
 
-.moduleSectionHeader {
-  margin-top: 1.875rem;
-}
-
 .moduleParagraph {
   margin-top: 1rem;
 }
@@ -64,11 +59,70 @@
   border-color: $black;
 }
 
+.sectionHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.875rem;  
+  align-items: center;
+}
+
+.sectionHeader {
+  font-weight: 500;
+  font-size: 24px;
+}
+
+.sectionHeaderButton {
+  background: $gray-100;
+  color: #000;
+  border-width: 0px;
+  border-radius: 8px;
+  margin-left: 20px;
+  justify-content: space-between;
+  height: 2.25rem;
+  text-align: left;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  font-size: 1.05rem;
+  width: 180px;
+}
+
+.buttonIcon {
+  float: right;
+  margin-top: 0.22rem;
+}
+
+.buttonCheckbox :global(.form-check-input) {
+  margin: 0px;
+}
+
+.sectionHeaderButton:active:hover,
+.sectionHeaderButton:global(.active):hover {
+  background-color: $gray-900 !important;
+}
+
+.sectionHeaderButton:global(.active),
+.sectionHeaderButton:active {
+  color: #fff;
+  background: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.sectionHeaderButton:hover {
+  background: #e5e5e5;
+  border-color: #fff;
+  color: #000;
+}
+
 .quickViewCard {
-  margin-top: 1.25rem;
   border-radius: 0.5rem;
   border-color: $gray-300;
   transition: transform 0.2s;
+  margin-top: 10px;
 }
 
 .quickViewCard:hover {
@@ -143,7 +197,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 .quickAccessRow {
   scrollbar-width: thin;
 	scrollbar-color: $white $white;
-	margin-top: 1rem;
+	margin-top: 10px;
 	// margin-left: 0; // leave space before card
 }
 
@@ -168,7 +222,6 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 	background-color: $gray-400;
 }
 
-
 .quickAccessRow {
 	overflow-y: visible;
 	overflow-x: auto;
@@ -181,4 +234,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 }
 
 @media (min-width: 62rem) {
-}
\ No newline at end of file
+}