diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
index 8ffd481e1a9f13b9a7fce3c42aeef218a59fffab..9d76a14e2d21ddffd3b11d52c10013be89b6c0d7 100644
--- a/frontend/src/Components/DropDown.tsx
+++ b/frontend/src/Components/DropDown.tsx
@@ -1,7 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
+import '../Style/DropDown.css';
+import DropDownToggle from './DropDownToggle';
 
-const DropDown = () => {
-  return <div className={"dropdown"}>DropDown</div>
+type props = {}
+
+const DropDown = (props: props) => {
+  const [clicked, setClicked] = useState(false);
+
+  const OneOptions = [1, 2, 3, 4];
+  const TwoOptions = ['Happy', 'Sombre', 'Peaceful'];
+  const ThreeOptions = ["Upbeat", "Downbeat"];
+
+  const option1Method = (value: string) => {
+    console.log(value); // Temporary. Should alter something later
+  };
+
+  const option2Method = (value: string) => {
+    console.log(value);
+  };
+
+  const option3Method = (value: string) => {
+    console.log(value);
+  };
+
+  const determineRender = () => {
+    if (clicked) return (
+      <div className={'dropdown-menu'}>
+        <DropDownToggle
+          optionLabel={"Background "}
+          options={OneOptions}
+          parentFunction={option1Method}
+        />
+        <DropDownToggle
+          optionLabel={"Mood "}
+          options={TwoOptions}
+          parentFunction={option2Method}
+        />
+        <DropDownToggle
+          optionLabel={"Music "}
+          options={ThreeOptions}
+          parentFunction={option3Method}
+        />
+      </div>
+    );
+  };
+
+  return (<div className={'dropdown'}>
+    <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
+    {determineRender()}
+  </div>);
 };
 
 export default DropDown;
\ No newline at end of file
diff --git a/frontend/src/Components/DropDownToggle.tsx b/frontend/src/Components/DropDownToggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9738d4d716feecbadf53b5bd68b7fa83f5bd0c3d
--- /dev/null
+++ b/frontend/src/Components/DropDownToggle.tsx
@@ -0,0 +1,39 @@
+import React, { FormEvent, useState } from 'react';
+
+type props = {
+  parentFunction: (arg0: string) => void;
+  options: Array<string | number>; // Depends on if the user is choosing strings or numbers
+  optionLabel: string;
+}
+
+const DropDownToggle = (props: props) => {
+  const [value, setValue] = useState(''); // The currently submitted element
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
+    event.preventDefault(); // To prevent default HTML behavior
+    setValue(event.currentTarget.value); // Update the value with the newly selected one
+  };
+
+  const handleSubmit = (event: FormEvent) => { // Called once the form is submitted using the button
+    event.preventDefault(); // To prevent default HTML behavior
+    props.parentFunction(value); // Calls the function of the parent with the submitted value
+  };
+
+  const renderOptions = () => { // To render a varying amount of options
+    return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
+  };
+
+  return (<div className={'drop-down-toggle'}>
+    <form onSubmit={handleSubmit}>
+      <label>
+        {props.optionLabel}
+        <select value={value} onChange={handleChange}>
+          {renderOptions()}
+        </select>
+      </label>
+      <input type={'submit'} value={'Submit'}/>
+    </form>
+  </div>);
+};
+
+export default DropDownToggle;
\ No newline at end of file
diff --git a/frontend/src/Media/settings.png b/frontend/src/Media/settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..c818eb3c814e031e6da51d09dfaa6dae9789811e
Binary files /dev/null and b/frontend/src/Media/settings.png differ
diff --git a/frontend/src/Style/DropDown.css b/frontend/src/Style/DropDown.css
new file mode 100644
index 0000000000000000000000000000000000000000..b316eb39a834efdc69d41681a3d244aa6be43b91
--- /dev/null
+++ b/frontend/src/Style/DropDown.css
@@ -0,0 +1,7 @@
+.settings-icon {
+    background-image: url("../Media/settings.png");
+    background-position: center;
+    background-size: contain;
+    width: 3rem;
+    height: 3rem;
+}
\ No newline at end of file