diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
index aa254bbf8ef687c2a80524a949b2ebb99f9bb4be..35e087a797fc2129652c893abab2706995e4c06a 100644
--- a/frontend/src/Components/DropDown.tsx
+++ b/frontend/src/Components/DropDown.tsx
@@ -1,37 +1,40 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import '../Style/DropDown.css';
 import DropDownSelect from './DropDownSelect';
 
 const DropDown = () => {
-  const [clicked, setClicked] = useState(false);
+    const [clicked, setClicked] = useState(false);
 
-  const BackgroundOptions = ["One", "Two", "Three", "Four"];
-  const FontOptions = ['Calibri', 'Arial', 'Sans'];
-  const MusicOptions = ["Upbeat", "Downbeat"];
+    const BackgroundOptions = ["One", "Two", "Three", "Four"];
+    const FontOptions = ['Calibri', 'Arial', 'Sans'];
+    const MusicOptions = ["Upbeat", "Downbeat"];
 
-  const determineRender = () => {
-    if (clicked) return (
-      <div className={'dropdown-menu'}>
-        <DropDownSelect
-          optionLabel={"Background"}
-          options={BackgroundOptions}
-        />
-        <DropDownSelect
-          optionLabel={"Font"}
-          options={FontOptions}
-        />
-        <DropDownSelect
-          optionLabel={"Sound"}
-          options={MusicOptions}
-        />
-      </div>
-    );
-  };
+    const determineRender = () => {
+        if (clicked) return (
+            <div className={"dropdown-menu"}>
+                <span className={'cross-icon'} onClick={() => setClicked(!clicked)}/>
+                <div className={'dropdowns'}>
+                    <DropDownSelect
+                        optionLabel={"Background"}
+                        options={BackgroundOptions}
+                    />
+                    <DropDownSelect
+                        optionLabel={"Font"}
+                        options={FontOptions}
+                    />
+                    <DropDownSelect
+                        optionLabel={"Sound"}
+                        options={MusicOptions}
+                    />
+                </div>
+            </div>
+        );
+        return <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
+    };
 
-  return (<div className={'dropdown'}>
-    <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
-    {determineRender()}
-  </div>);
+    return (<div className={'dropdown'}>
+            {determineRender()}
+    </div>);
 };
 
 export default DropDown;
\ No newline at end of file
diff --git a/frontend/src/Components/DropDownSelect.tsx b/frontend/src/Components/DropDownSelect.tsx
index 2925da63bf63ed741f0905dbe49c257318666f06..ff0339a54aac8b1d0140e21b12942468c0a865dc 100644
--- a/frontend/src/Components/DropDownSelect.tsx
+++ b/frontend/src/Components/DropDownSelect.tsx
@@ -22,7 +22,7 @@ const DropDownSelect = (props: props) => {
         return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
     };
 
-    return (<div className={'drop-down-toggle'}>
+    return (<div className={'dropdown-toggle'}>
         <form>
             <label>
                 {props.optionLabel}
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 4a57dc5405279b4bb99b61f3e75c7cf0415bb770..39e671f2a57e99b9d99a6fa7a8a85e55a63d7021 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -11,9 +11,9 @@ const ExhibitionPiece = (props: props) => {
 
   const renderPoems = () => {
     if (poem != null)
-      return poem.map(line => <p>{line}</p>)
+      return poem.map(line => <p>{line}</p>);
     return <p>Loading...</p>
-  }
+  };
 
   return (
     <div className={'exhibition-piece'}>
diff --git a/frontend/src/Media/cross-icon.png b/frontend/src/Media/cross-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae5c4e37d417b4a97c0cc0156e73730c14730bb4
Binary files /dev/null and b/frontend/src/Media/cross-icon.png differ
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
index 110b954316f0370e01b37933def7071a1f2b6e5f..14a0749a72df6963ce7e8a39534b5eafd1c8f05e 100644
--- a/frontend/src/Style/ArtPage.css
+++ b/frontend/src/Style/ArtPage.css
@@ -64,4 +64,11 @@
 .navbutton.right {
     grid-column: 3 / 4;
     margin-left: 10rem;
+}
+
+.navbutton button {
+    font-size: large;
+    width: 5rem;
+    height: 2rem;
+    margin-bottom: 3rem;
 }
\ No newline at end of file
diff --git a/frontend/src/Style/DropDown.css b/frontend/src/Style/DropDown.css
index b316eb39a834efdc69d41681a3d244aa6be43b91..c5f9bb2aa41b71934f1cf508ec6616ca7c0075ad 100644
--- a/frontend/src/Style/DropDown.css
+++ b/frontend/src/Style/DropDown.css
@@ -4,4 +4,42 @@
     background-size: contain;
     width: 3rem;
     height: 3rem;
+}
+
+.cross-icon {
+    align-self: flex-end;
+    background-image: url("../Media/cross-icon.png");
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 3rem;
+    height: 3rem;
+}
+
+.dropdown {
+    font-family: initial;
+}
+
+.dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background-color: whitesmoke;
+}
+
+.dropdown-toggle {
+    margin: 1rem 1rem 1.5rem;
+    font-size: large;
+}
+
+label {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dropdown-toggle select {
+    width: 5rem;
+    margin-left: 1rem;
+    font-size: smaller;
 }
\ No newline at end of file