diff --git a/fuel/app/classes/controller/media.php b/fuel/app/classes/controller/media.php
index f6b5cd4e6..fe2e1236c 100644
--- a/fuel/app/classes/controller/media.php
+++ b/fuel/app/classes/controller/media.php
@@ -10,6 +10,7 @@ class Controller_Media extends Controller
 {
 
 	use Trait_CommonControllerTemplate;
+	use Trait_DarkMode;
 
 	// overrides Trait_CommonControllerTemplate->before()
 	public function before()
@@ -54,6 +55,11 @@ public function get_import()
 		Css::push_group(['media_import']);
 		Js::push_group(['react', 'media']);
 
+		if ($this->is_using_darkmode())
+		{
+			$theme->get_template()->set('darkmode', true);
+		}
+
 		return Response::forge($theme->render());
 	}
 
diff --git a/src/components/include.scss b/src/components/include.scss
index 46fc98ecf..75bdf6eaa 100644
--- a/src/components/include.scss
+++ b/src/components/include.scss
@@ -395,9 +395,10 @@ header {
 		padding: 10px;
 		display: flex;
 		flex-direction: row;
-		// align-items: center;
 		gap: 10px;
 
+		font-weight: 400;
+
 		&:hover{
 			background-color: rgb(250,250,250);
 		}
@@ -667,6 +668,16 @@ header {
 	}
 
 	.notice {
+
+		.noticeClose {
+			filter: invert(1);
+
+			&:hover {
+				cursor: pointer;
+				filter: invert(-0.5) sepia(1) saturate(80) hue-rotate(340deg);
+			}
+		}
+
 		&:hover{
 			background-color: $color-features-dark;
 		}
diff --git a/src/components/media.scss b/src/components/media.scss
index fc6b7c248..9899d115f 100644
--- a/src/components/media.scss
+++ b/src/components/media.scss
@@ -17,6 +17,8 @@ body.import {
 	flex-flow: row nowrap;
 	width: 800px;
 
+	font-weight: 400;
+
 	> section {
 		position: relative;
 		height: calc(100vh - 35px);
@@ -128,46 +130,6 @@ body.import {
 	}
 }
 
-.darkMode .media-importer {
-	> section {
-		&:first-child {
-			&:before {
-				color: #dadada;
-			}
-
-			&:after {
-				border-left: thin solid #dadada;
-			}
-		}
-
-		.loading-icon-holder {
-			background: rgba(33,35,45,0.95);
-		}
-	}
-
-	.pane-header {
-		&.darker {
-			color: #484848;
-		}
-
-		.close-button {
-			&:after {
-				color: #fff;
-			}
-		}
-	}
-
-	.pane-footer {
-		span.content {
-			background: rgba(255,255,255,0.95);
-
-			&.error-state {
-				color: #730000;
-			}
-		}
-	}
-}
-
 #drag-wrapper {
 	position: relative;
 	height: 333px;
@@ -332,4 +294,94 @@ body.import {
 			font-size: 12px;
 		}
 	}
+}
+
+.darkMode .media-importer {
+
+	color: #fff;
+	background: $color-background-dark;
+
+	> section {
+		&:first-child {
+			&:before {
+				color: #dadada;
+			}
+
+			&:after {
+				border-left: thin solid #dadada;
+			}
+		}
+
+		.loading-icon-holder {
+			background: rgba(33,35,45,0.95);
+		}
+	}
+
+	#drag-wrapper {
+		border-color: $color-background-dark-gray;
+		background: $color-input-box-bg-dark;
+	}
+
+	#sort-bar {
+		#sort-options .sort-asc:after {
+			border-bottom: $arrow_size solid #fff;
+		}
+	}
+
+	.sort-bar {
+		input {
+			color: #fff;
+			border: solid 1px $color-input-box-border-dark;
+			background: $color-input-box-bg-dark;
+		}
+	}
+
+	#file-display {
+		.file-info {
+			
+			color: #fff;
+
+			&:hover {
+				background: $color-blue-hover-dark;
+			}
+			
+			&:nth-child(odd) {
+				background: $color-background-dark-gray;
+
+				&:hover {
+					background: $color-blue-hover-dark;
+				}
+			}
+
+			.file-name {
+				color: $color-text-light-gray;
+
+				.file-type {
+					color: $very-light-gray;
+				}
+			}
+		}
+	}
+
+	.pane-header {
+		&.darker {
+			color: $gray;
+		}
+
+		.close-button {
+			&:after {
+				color: #fff;
+			}
+		}
+	}
+
+	.pane-footer {
+		span.content {
+			background: none;
+
+			&.error-state {
+				color: #730000;
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/components/my-widgets-score-semester-individual.jsx b/src/components/my-widgets-score-semester-individual.jsx
index 79196e319..7f88ccb08 100644
--- a/src/components/my-widgets-score-semester-individual.jsx
+++ b/src/components/my-widgets-score-semester-individual.jsx
@@ -126,7 +126,7 @@ const MyWidgetScoreSemesterIndividual = ({ semester, instId, setInvalidLogin })
 		const studentList = (
 			<ul aria-label="Students">
 				{state.filteredLogs.map(user => (
-					<li key={user.id}>
+					<li key={user.userId}>
 						<button
 							className={state.selectedUser.userId === user.userId ? 'buttonSelected' : ''}
 							onClick={() => {
diff --git a/src/components/notifications.jsx b/src/components/notifications.jsx
index 250bc35f5..3ca0d6dd6 100644
--- a/src/components/notifications.jsx
+++ b/src/components/notifications.jsx
@@ -5,17 +5,17 @@ import useDeleteNotification from './hooks/useDeleteNotification'
 import setUserInstancePerms from './hooks/useSetUserInstancePerms'
 
 const Notifications = (user) => {
-	const [navOpen, setNavOpen] = useState(false);
-	const [showDeleteBtn, setShowDeleteBtn] = useState(-1);
+	const [navOpen, setNavOpen] = useState(false)
+	const [showDeleteBtn, setShowDeleteBtn] = useState(-1)
 	const deleteNotification = useDeleteNotification()
 	const queryClient = useQueryClient()
 	const setUserPerms = setUserInstancePerms()
-	const numNotifications = useRef(0);
+	const numNotifications = useRef(0)
 	const [errorMsg, setErrorMsg] = useState({
 		notif_id: '',
 		msg: ''
-	});
-	let modalRef = useRef();
+	})
+	let modalRef = useRef()
 
 	const { data: notifications} = useQuery({
 		queryKey: 'notifications',
@@ -27,10 +27,10 @@ const Notifications = (user) => {
 		staleTime: Infinity,
 		retry: false,
 		onSuccess: (data) => {
-			numNotifications.current = 0;
+			numNotifications.current = 0
 			if (data && data.length > 0) data.forEach(element => {
-				if (!element.remove) numNotifications.current++;
-			});
+				if (!element.remove) numNotifications.current++
+			})
 		},
 		onError: (err) => {
 			if (err.message == "Invalid Login") {
@@ -48,36 +48,37 @@ const Notifications = (user) => {
 			const checkIfClickedOutsideModal = e => {
 				if (modalRef.current && !modalRef.current.contains(e.target) && !e.target.className.includes("noticeClose"))
 				{
-					setNavOpen(false);
+					setNavOpen(false)
 				}
 			}
-			document.addEventListener("click", checkIfClickedOutsideModal);
+			document.addEventListener("click", checkIfClickedOutsideModal)
 
 			return () => {
-				document.removeEventListener("click", checkIfClickedOutsideModal);
+				document.removeEventListener("click", checkIfClickedOutsideModal)
 			}
 		}
 	}, [navOpen])
 
-	const toggleNavOpen = () =>
+	const toggleNavOpen = (event) =>
 	{
-		setNavOpen(!navOpen);
+		event.stopPropagation()
+		setNavOpen(!navOpen)
 	}
 	// Sets the index of the hovered notification
 	// Shows delete button on hover
 	const showDeleteButton = (index) =>
 	{
-		setShowDeleteBtn(index);
+		setShowDeleteBtn(index)
 	}
 	const hideDeleteButton = () =>
 	{
-		setShowDeleteBtn(-1);
+		setShowDeleteBtn(-1)
 	}
 
 	const removeNotification = (index, id = null) => {
-		let notif = null;
-		if (index >= 0) notif = notifications[index];
-		if (id == null) id = notif.id;
+		let notif = null
+		if (index >= 0) notif = notifications[index]
+		if (id == null) id = notif.id
 
 		deleteNotification.mutate({
 			notifId: id,
@@ -86,16 +87,16 @@ const Notifications = (user) => {
 				Object.keys(notifications).forEach((key, index) => {
 					if (notifications[key].id == id)
 					{
-						notifications[key].remove = true;
-						numNotifications.current--;
-						return;
+						notifications[key].remove = true
+						numNotifications.current--
+						return
 					}
 				})
 			},
 			errorFunc: (err) => {
-				setErrorMsg({notif_id: id, msg: 'Action failed.'});
+				setErrorMsg({notif_id: id, msg: 'Action failed.'})
 			}
-		});
+		})
 	}
 
 	const removeAllNotifications = () => {
@@ -104,25 +105,25 @@ const Notifications = (user) => {
 			deleteAll: true,
 			successFunc: () => {},
 			errorFunc: (err) => {}
-		});
+		})
 	}
 
 	const onChangeAccessLevel = (notif, access) => {
 		if (access != "")
 		{
-			document.getElementById(notif.id + '_action_button').className = "action_button notification_action enabled";
+			document.getElementById(notif.id + '_action_button').className = "action_button notification_action enabled"
 		}
 	}
 
 	const onClickGrantAccess = (notif) => {
-		let accessLevel = document.getElementById(notif.id + '-access-level').value;
+		let accessLevel = document.getElementById(notif.id + '-access-level').value
 
 		if (accessLevel == "")
 		{
-			return;
+			return
 		}
 
-		const expireTime = null;
+		const expireTime = null
 
 		const userPerms = [{
 			user_id: notif.from_id,
@@ -140,18 +141,18 @@ const Notifications = (user) => {
 				{
 					// No idea why this works
 					// But setting hash after setting pathname would set the hash first and then the pathname in URL
-					window.location.hash = notif.item_id + '-collab';
+					window.location.hash = notif.item_id + '-collab'
 					window.location.pathname = '/my-widgets'
 				}
 				else
 				{
 					queryClient.invalidateQueries(['user-perms', notif.item_id])
-					window.location.hash = notif.item_id + '-collab';
+					window.location.hash = notif.item_id + '-collab'
 				}
 
-				setErrorMsg({notif_id: notif.id, msg: ''});
+				setErrorMsg({notif_id: notif.id, msg: ''})
 
-				removeNotification(-1, notif.id);
+				removeNotification(-1, notif.id)
 
 				// Close notifications
 				setNavOpen(false)
@@ -161,23 +162,22 @@ const Notifications = (user) => {
 			}
 		})
 
-
 	}
 
-	let render = null;
-	let notificationElements = null;
-	let notificationIcon = null;
+	let render = null
+	let notificationElements = null
+	let notificationIcon = null
 
 	if (notifications?.length > 0) {
 		notificationElements = []
 		for (let index = notifications.length - 1; index >= 0; index--)
 		{
-			const notification = notifications[index];
+			const notification = notifications[index]
 			// If notification was deleted don't show
 			if (notification.remove) continue;
 
-			let actionButton = null;
-			let grantAccessDropdown = null;
+			let actionButton = null
+			let grantAccessDropdown = null
 			if (notification.action == "access_request")
 			{
 				grantAccessDropdown = <div>
@@ -190,7 +190,7 @@ const Notifications = (user) => {
 				</div>
 				actionButton =  <button className="action_button notification_action" id={notification.id + "_action_button"} onClick={() => onClickGrantAccess(notification)}>Grant Access</button>
 			}
-			let createdAt = new Date(0);
+			let createdAt = new Date(0)
 			createdAt.setUTCSeconds(notification.created_at)
 			let notifRow = <div className={`notice${notification.deleted ? 'deleted' : ''}`}
 				key={notification.id}
@@ -214,7 +214,7 @@ const Notifications = (user) => {
 			notificationIcon =
 			<button id='notifications_link' className='notEmpty'
 				data-notifications={numNotifications.current}
-				onClick={() => toggleNavOpen()}></button>
+				onClick={toggleNavOpen}></button>
 
 			notificationElements.push(notifRow)
 		}
@@ -248,7 +248,7 @@ const Notifications = (user) => {
 			onClick={() => toggleNavOpen()}></button>
 	}
 
-	return render;
+	return render
 }
 
 export default Notifications
diff --git a/src/components/scores.jsx b/src/components/scores.jsx
index edc0803b4..a418a1f5c 100644
--- a/src/components/scores.jsx
+++ b/src/components/scores.jsx
@@ -615,7 +615,7 @@ const Scores = ({ inst_id, play_id, single_id, send_token, isEmbedded, isPreview
 			<nav
 				className={`header-element previous-attempts ${prevAttemptOpen ? 'open' : ''}`}
 				onMouseOver={() =>!prevAttemptOpen && setprevAttemptOpen(true)}
-				onMouseOut={() => prevAttemptOpen && setprevAttemptOpen(false)}
+				onMouseLeave={() => prevAttemptOpen && setprevAttemptOpen(false)}
 			>
 				<h1 onClick={() => !prevAttemptOpen && setprevAttemptOpen(true)}>
 					Prev. Attempts
diff --git a/src/components/widget-creator-page.scss b/src/components/widget-creator-page.scss
index a51492f32..858ecedc5 100644
--- a/src/components/widget-creator-page.scss
+++ b/src/components/widget-creator-page.scss
@@ -356,28 +356,9 @@ a {
 	}
 }
 
-#embed_dialog {
-	position: absolute;
-	top: -50%;
-	left: 50%;
-	margin: -250px -387px;
-	width: 675px;
-	height: 535px;
-	z-index: 2;
-	box-shadow: 0px 0px 1000px #000, 0px 0px 10px #000;
-	opacity: 0;
-	transition: all 0.3s ease;
-	background: #21232a;
-	overflow-x: hidden;
-
-	&.show {
-		opacity: 1;
-		box-shadow: none;
-		text-align: left;
-		top: 50%;
-		width: 800px;
-		z-index: 10;
-	}
+.darkMode #embed_dialog {
+	color: #fff;
+	background: $color-background-dark;
 }
 
 #confirm_dialog {