diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 6e58ca7145ef43447541dc1d18ee34079c7fc42e..14c554b2fc9a3ba414b9a82f2ffebd374f60fafa 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -67,4 +67,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
   background-color: $gray-200;
 	color: $gray-700 !important;
 	box-shadow: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/index.tsx b/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
index 9a1d905de1668f8af6417dc2e87ac9eb6ea79f94..250c497ce4bdacf3d583480ba8b8c159cce8b145 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
+++ b/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
@@ -49,8 +49,6 @@ class NavBarBrand extends React.Component<NavBarBrandProps, NavBarBrandState> {
       <Navbar.Brand className={styles.brandContainer}>
         <img
           src={logo}
-          width="30"
-          height="30"
           className={cx("d-inline-block", "align-center", styles.brandImage, {
             rotate: this.state.iconRotate
           })}
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
index 83425eb84c69d16c8288c43e2624678f2553c199..7f619ea5b8bdf13fd54f1c018b782eb518417409 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
@@ -2,6 +2,8 @@
 
 .brandImage {
   margin-right: 0.625rem;
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
 .brandContainer {
diff --git a/src/components/pages/SettingsModal/index.tsx b/src/components/pages/SettingsModal/index.tsx
index 9123779c8f5548caad71b6d0f7b167dd8f9a45d6..3dc6203c7dd45f03e1f60d19eb433c55fd8365e2 100644
--- a/src/components/pages/SettingsModal/index.tsx
+++ b/src/components/pages/SettingsModal/index.tsx
@@ -7,6 +7,8 @@ import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Button from "react-bootstrap/Button";
 import useLocalStorage from "react-use-localstorage";
 import styles from "./style.module.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 interface Props {
   show: boolean;
   onHide: any;
@@ -35,19 +37,27 @@ const SettingsModal: React.FC<Props> = ({
       onHide={onHide}
       centered
     >
-      <Modal.Header closeButton>
+      <Modal.Header className={styles.modalHeader}>
         <Modal.Title>Settings</Modal.Title>
+        <Button
+          variant="secondary"
+          className={styles.sectionHeaderButton}
+          onClick={onHide}
+        >
+          <FontAwesomeIcon className={styles.buttonIcon} icon={faTimes} />
+        </Button>
       </Modal.Header>
       <Modal.Body style={{ minHeight: "60vh" }}>
-        <h5>Interface</h5>
+        <h5 className={styles.modalSubHeading}>Interface</h5>
 
-        <Form>
+        <Form className={styles.interfaceGroup}>
           <Form.Group as={Row}>
             <Form.Label column xs="9" sm="10">
               Size
             </Form.Label>
             <Col xs="3" sm="2">
               <Form.Control
+                className={styles.inputBar}
                 value={interfaceSize}
                 onChange={e => setInterfaceSize(e.target.value)}
                 onBlur={() =>
@@ -61,6 +71,7 @@ const SettingsModal: React.FC<Props> = ({
             <Form.Label>File View</Form.Label>
             <ButtonGroup style={{ float: "right" }}>
               <Button
+                className={styles.modalToggleButton}
                 active={fileView === "card"}
                 variant="secondary"
                 onClick={onCardViewClick}
@@ -68,6 +79,7 @@ const SettingsModal: React.FC<Props> = ({
                 Card
               </Button>
               <Button
+                className={styles.modalToggleButton}
                 active={fileView === "list"}
                 variant="secondary"
                 onClick={onListViewClick}
diff --git a/src/components/pages/SettingsModal/style.module.scss b/src/components/pages/SettingsModal/style.module.scss
index 4b3d07d807809cd605c5e043cffab29d86908674..9b06d18f78fd1a7666c3adab27230e0ad7f504a1 100644
--- a/src/components/pages/SettingsModal/style.module.scss
+++ b/src/components/pages/SettingsModal/style.module.scss
@@ -1,4 +1,5 @@
 @import "assets/scss/custom";
+@import "assets/scss/global";
 
 @media (min-width: 62rem) {
   .modal {
@@ -8,3 +9,80 @@
     max-height: none !important;
   }
 }
+
+.modalHeader {
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modalSubHeading {
+}
+
+.interfaceGroup {
+  border-bottom: 0.0625rem solid $gray-300;
+  padding: 0rem 0.5rem;
+}
+
+$button-background: transparentize($gray-200, 0.75);
+$button-border: transparentize($gray-300, 1);
+
+.inputBar {
+  border-radius: 0.5rem;
+  border-width: 0.0625rem;
+  background-color: $button-background;
+  text-align: right;
+  border-color: $button-background;
+  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s back-ground-color;
+}
+
+.inputBar::placeholder {
+  color: #acb5bd;
+  opacity: 1;
+}
+
+.inputBar:focus {
+  box-shadow: none !important;
+  border-color: $gray-300;
+  background-color: $white;
+}
+
+.modalToggleButton {
+  background-color: $gray-100;
+  color: $black;
+  border-width: 0px;
+  border-radius: 8px;
+  margin-left: 20px;
+  justify-content: space-between;
+  height: 2.25rem;
+  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s background-color;
+  font-size: 1.05rem;
+}
+
+.modalToggleButton:active,
+.modalToggleButton:global(.active) {
+  background: $black !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+  color: $white;
+}
+
+.modalToggleButton:hover, .modalToggleButton:focus {
+  background-color: $gray-200;
+	color: $gray-700 !important;
+	box-shadow: none !important;
+}
+
+.modalToggleButton:active:hover,
+.modalToggleButton:global(.active):hover {
+  background-color: $gray-900;
+  color: $white !important;
+}