diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..6800452
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,308 @@
+@import url('https://fonts.googleapis.com/css2?family=Hind&family=Playfair+Display&display=swap');
+
+html {
+  --text-color: #fafafa;
+  --text-color-tinted: #cccccc;
+  --background-color: #111111;
+  --background-color-dark: #000000;
+  --overlay-color: #333333;
+  background-color: var(--background-color);
+  color: var(--text-color);
+
+  --default: #2a8c8c;
+  --default-tinted: #187474;
+  --default-dark: #0a4a4a;
+
+  --red: #b41313;
+  --red-tinted: #881010;
+  --red-dark: #660b0b;
+
+  --maroon: #a80c2e;
+  --maroon-tinted: #800923;
+  --maroon-dark: #5c0316;
+
+  --green: #008612;
+  --green-tinted: #007710;
+  --green-dark: #005e0c;
+
+  --light-blue: #0085ad;
+  --light-blue-tinted: #006786;
+  --light-blue-dark: #004c63;
+
+  --pink: #a327a3;
+  --pink-tinted: #801580;
+  --pink-dark: #521452;
+  
+  --yellow: #948500;
+  --yellow-tinted: #756a00;
+  --yellow-dark: #423c00;
+  
+  --orange: #dd5e0a;
+  --orange-tinted: #af4a07;
+  --orange-dark: #8d3a03;
+}
+
+html * {
+	transition: background-color 0.5s;
+}
+
+.background--default {
+  background-color: var(--default) !important;
+}
+.background--red {
+  background-color: var(--red) !important;
+}
+.background--maroon {
+  background-color: var(--maroon) !important;
+}
+.background--green {
+  background-color: var(--green) !important;
+}
+.background--light-blue {
+  background-color: var(--light-blue) !important;
+}
+.background--pink {
+  background-color: var(--pink) !important;
+}
+.background--yellow {
+  background-color: var(--yellow) !important;
+}
+.background--orange {
+  background-color: var(--orange) !important;
+}
+
+#root > div.default {
+  --primary-color: var(--default);
+  --primary-color-tinted: var(--default-tinted);
+  --primary-color-dark: var(--default-dark);
+}
+#root > div.red {
+  --primary-color: var(--red);
+  --primary-color-tinted: var(--red-tinted);
+  --primary-color-dark: var(--red-dark);
+}
+#root > div.maroon {
+  --primary-color: var(--maroon);
+  --primary-color-tinted: var(--maroon-tinted);
+  --primary-color-dark: var(--maroon-dark);
+}
+#root > div.green {
+  --primary-color: var(--green);
+  --primary-color-tinted: var(--green-tinted);
+  --primary-color-dark: var(--green-dark);
+}
+#root > div.light-blue {
+  --primary-color: var(--light-blue);
+  --primary-color-tinted: var(--light-blue-tinted);
+  --primary-color-dark: var(--light-blue-dark);
+}
+#root > div.pink {
+  --primary-color: var(--pink);
+  --primary-color-tinted: var(--pink-tinted);
+  --primary-color-dark: var(--pink-dark);
+}
+#root > div.yellow {
+  --primary-color: var(--yellow);
+  --primary-color-tinted: var(--yellow-tinted);
+  --primary-color-dark: var(--yellow-dark);
+}
+#root > div.orange {
+  --primary-color: var(--orange);
+  --primary-color-tinted: var(--orange-tinted);
+  --primary-color-dark: var(--orange-dark);
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  max-width: 1080px;
+  margin: auto;
+}
+
+body, #root, #root > div, #root > div > div:first-child {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+main {
+  margin: 0 24px;
+  flex: 1;
+}
+
+footer {
+  margin: 24px;
+  font-size: 14px;
+  color: var(--text-color-tinted);
+}
+
+html, body, footer, .firebaseui-container, .mdl-button, .mdl-textfield__input {
+	font-family: "Hind", sans-serif !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Playfair Display", serif !important;
+}
+
+h2, h3, h4, h5, h6 {
+  font-weight: normal;
+}
+
+button {
+  font: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+a {
+  color: var(--primary-color);
+}
+
+button:focus-visible, a:focus-visible {
+  outline: 1px solid var(--text-color-tinted);
+}
+
+input[type=text] {
+	border-top: none;
+	border-right: none;
+	border-left: none;
+	border-bottom: 2px solid var(--overlay-color);
+	background: none;
+	color: var(--text-color);
+	font: inherit;
+  min-width: 100px;
+}
+
+input[type=text]:focus {
+  outline: none;
+}
+
+.page-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  margin: 0 0 16px 0;
+  column-gap: 16px;
+  row-gap: 8px;
+}
+
+.page-header > h1 {
+  margin: 0;
+}
+
+.page-header > h2 {
+  margin: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.page-header > .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.page-header--left {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.MuiCheckbox-colorSecondary.Mui-checked {
+  color: var(--primary-color) !important;
+}
+
+.MuiCheckbox-root {
+  color: var(--text-color) !important;
+}
+
+.PrivateSwitchBase-root-1 {
+  padding: 0 !important;
+  margin-right: 4px !important;
+}
+
+label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 2px;
+}
+
+label > span:last-child, label > a:last-child {
+	margin-bottom: -2px;
+}
+
+label > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+label, p, input[type=text], main > span, main div > span {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.stat-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: baseline;
+}
+
+.stat-row > h1, .stat-row > h2, .stat-row > h3 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.stat-row--inline {
+	justify-content: flex-start;
+  column-gap: 6px;
+}
+
+.stat-row--no-gap {
+  column-gap: 2px;
+}
+
+.page-loader {
+  margin: auto;
+  width: 30%;
+  max-width: 150px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.cookie-notice {
+  position: fixed;
+  bottom: -1000px;
+  right: 0;
+  left: 0;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  column-gap: 12px;
+  padding: 16px 24px;
+  background-color: var(--primary-color);
+  text-align: center;
+}
+
+.cookie-notice > p {
+  margin: 8px 0 6px 0;
+}
+
+.cookie-notice a {
+  color: inherit;
+}
+
+.cookie-notice > .button:hover {
+  color: var(--text-color-tinted);
+}
\ No newline at end of file
diff --git a/src/css/ConfirmationDialog.css b/src/css/ConfirmationDialog.css
new file mode 100644
index 0000000..f84a274
--- /dev/null
+++ b/src/css/ConfirmationDialog.css
@@ -0,0 +1,14 @@
+.confirmation-dialog {
+	width: 60%;
+	max-width: 290px;
+	height: 80%;
+	max-height: 130px;
+}
+
+.confirmation-dialog > h3 {
+	margin: 0 0 16px 0;
+}
+
+.confirmation-dialog > .button-container {
+	justify-content: flex-end;
+}
diff --git a/src/css/Form.css b/src/css/Form.css
new file mode 100644
index 0000000..71508d9
--- /dev/null
+++ b/src/css/Form.css
@@ -0,0 +1,62 @@
+.form {
+	display: flex;
+	column-gap: 64px;
+	flex-direction: row;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+
+.form.create-set-vocab-list {
+	flex-direction: column;
+}
+
+.create-set-header, .form .create-set-input-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.create-set-header > * {
+	margin-top: 24px;
+	margin-bottom: 4px;
+}
+
+.create-set-header > *, .form .create-set-input-row > * {
+	flex: 1;
+	flex-basis: 0;
+}
+
+.form .checkbox-list-container {
+	flex: 1;
+}
+
+.form .checkbox-list {
+	display: grid;
+	grid-column-gap: 40px;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+}
+
+.form .checkbox-list-container > a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.form h3 {
+	display: flex;
+	column-gap: 4px;
+	flex-direction: row;
+	align-content: center;
+}
+
+.create-set-input-row > input[type=text]:first-child, .create-set-header > *:first-child {
+	margin-right: 4px;
+}
+
+.create-set-input-row > input[type=text]:last-child, .create-set-header > *:last-child {
+	margin-left: 4px;
+}
+
+input[type=text].set-title-input {
+	flex: 1;
+	width: 0;
+}
diff --git a/src/css/GroupPage.css b/src/css/GroupPage.css
new file mode 100644
index 0000000..37007af
--- /dev/null
+++ b/src/css/GroupPage.css
@@ -0,0 +1,80 @@
+.group-edit-icon {
+	margin-left: 12px;
+	cursor: pointer;
+}
+
+.group-name-header-input-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex: 1;
+}
+
+.group-name-header-input-container > input {
+	margin-right: 8px;
+	padding-left: 0px;
+	flex: 1;
+	width: 0;
+}
+
+.group-name-header-input-container > input, .group-name-header-input-container > .button {
+	margin-top: -1px;
+	margin-bottom: -3px;
+}
+
+.group-role-header {
+	margin-bottom: 8px;
+}
+
+.group-links-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 42px;
+}
+
+.group-set-link > a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.group-set-link {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.group-set-link--enabled {
+	cursor: pointer;
+}
+
+.group-set-link--enabled > svg {
+	margin-left: 8px;
+}
+
+.group-page-overlay-content {
+	width: fit-content;
+	height: fit-content;
+	padding: 0;
+}
+
+.group-page-overlay-content > * {
+	border-bottom: 1px solid var(--overlay-color);
+	cursor: pointer;
+	margin: 0;
+}
+
+.group-page-overlay-content > *:not(:last-child) {
+	padding: 30px 48px;
+}
+
+.group-page-overlay-content > *:last-child {
+	border: none;
+	padding: 18px 48px;
+}
+
+.no-groups-message-list {
+	padding: 0 18px;
+	margin: 4px 0;
+}
\ No newline at end of file
diff --git a/src/css/History.css b/src/css/History.css
new file mode 100644
index 0000000..5d70ee0
--- /dev/null
+++ b/src/css/History.css
@@ -0,0 +1,21 @@
+.progress-history-container {
+	display: table;
+	table-layout: auto;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.progress-history-container > div {
+	display: table-row;
+}
+
+.progress-history-container > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	text-decoration: none;
+	color: inherit;
+}
diff --git a/src/css/Home.css b/src/css/Home.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/css/LoggedInHome.css b/src/css/LoggedInHome.css
new file mode 100644
index 0000000..eacb6d2
--- /dev/null
+++ b/src/css/LoggedInHome.css
@@ -0,0 +1,14 @@
+.progress-history-container--home {
+	margin-top: 0;
+	margin-bottom: 18px;
+}
+
+.progress-history-container--home > h2 {
+	margin-top: 0;
+}
+
+.page-intro {
+	margin-top: 18px;
+	width: fit-content;
+	padding-right: 8px;
+}
\ No newline at end of file
diff --git a/src/css/Login.css b/src/css/Login.css
new file mode 100644
index 0000000..7e86442
--- /dev/null
+++ b/src/css/Login.css
@@ -0,0 +1,142 @@
+.login-overlay-content {
+	width: 40%;
+	max-width: 500px;
+	height: 60%;
+	max-height: 500px;
+}
+
+.firebaseui-container form button.mdl-button, .firebaseui-container form .firebaseui-idp-button, .firebaseui-button.mdl-button {
+	border-radius: 30px;
+}
+
+.firebaseui-card-actions {
+	padding-bottom: 0 !important;
+}
+
+.firebaseui-button {
+	margin-left: 0 !important;
+}
+
+.firebaseui-form-actions > *:first-child {
+	margin-right: 2px !important;
+}
+
+.firebaseui-form-actions > *:last-child {
+	margin-left: 2px !important;
+}
+
+.firebaseui-form-actions {
+	display: flex !important;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+#firebaseui_container .mdl-card.mdl-shadow--2dp {
+	box-shadow: none;
+}
+
+.firebaseui-container, .mdl-card, .firebaseui-input, .firebaseui-subtitle, .firebaseui-title, .firebaseui-text, .firebaseui-input-invalid {
+	color: var(--text-color) !important;
+}
+
+.firebaseui-label {
+	color: var(--text-color-tinted) !important;
+}
+
+.firebaseui-textfield.mdl-textfield .firebaseui-input {
+	border-color: var(--text-color-tinted) !important;
+}
+
+.firebaseui-container {
+	background-color: var(--background-color) !important;
+}
+
+.mdl-button--raised.mdl-button--colored:hover {
+	background-color: var(--primary-color-tinted) !important;
+}
+
+.mdl-button--raised.mdl-button--colored, .firebaseui-textfield.mdl-textfield .firebaseui-label::after, .mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1 {
+	background-color: var(--primary-color) !important;
+}
+
+.firebaseui-info-bar {
+	background-color: var(--overlay-color) !important;
+	border: none !important;
+}
+
+.firebaseui-link, .mdl-button--primary.mdl-button--primary {
+	color: var(--primary-color) !important;
+}
+
+.firebaseui-input-toggle-on {
+    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/visibility_white_24dp.png) !important;
+}
+
+.firebaseui-input-toggle-off {
+    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/visibility_off_white_24dp.png) !important;
+}
+
+.firebaseui-title {
+	text-align: center !important;
+}
+
+@media screen and (max-width: 1080px) {
+	.login-overlay-content {
+		width: 50%;
+	}
+}
+@media screen and (max-width: 860px) {
+	.login-overlay-content {
+		width: 80%;
+	}
+}
+@media screen and (max-width: 680px) {
+	.login-overlay-content {
+		width: 70%;
+	}
+}
+@media screen and (max-width: 420px) {
+	.firebaseui-card-content, .firebaseui-card-actions {
+		padding-left: 8px !important;
+		padding-right: 8px !important;
+	}
+}
+@media screen and (max-width: 300px) {
+	.firebaseui-card-content, .firebaseui-card-actions {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+}
+
+@media screen and (max-height: 800px) {
+	.login-overlay-content {
+		height: 70%;
+	}
+}
+@media screen and (max-height: 700px) {
+	.login-overlay-content {
+		height: 80%;
+	}
+}
+@media screen and (max-height: 570px) {
+	.login-overlay-content {
+		display: block;
+		width: 70%;
+	}
+}
+@media screen and (max-height: 420px) {
+	.login-overlay-content {
+		height: 70%;
+	}
+}
+@media screen and (max-height: 300px) {
+	.login-overlay-content {
+		height: 60%;
+	}
+}
+@media screen and (max-height: 200px) {
+	.login-overlay-content {
+		height: 50%;
+	}
+}
diff --git a/src/css/NavBar.css b/src/css/NavBar.css
new file mode 100644
index 0000000..2112e1c
--- /dev/null
+++ b/src/css/NavBar.css
@@ -0,0 +1,34 @@
+#banner-logo {
+	width: 200px;
+	display: initial;
+}
+
+#small-logo {
+	width: 55px;
+	display: none;
+}
+
+nav {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+	align-items: center;
+	margin: 24px;
+}
+
+.navbar-items, nav > a {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+@media screen and (max-width: 660px) {
+	#banner-logo {
+		display: none;
+	}
+	#small-logo {
+		display: initial;
+	}
+}
\ No newline at end of file
diff --git a/src/css/PopUp.css b/src/css/PopUp.css
new file mode 100644
index 0000000..f41b915
--- /dev/null
+++ b/src/css/PopUp.css
@@ -0,0 +1,45 @@
+.overlay {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	background-color: var(--overlay-color);
+	opacity: 0.65;
+	cursor: default;
+}
+
+.popup-close-button {
+	position: absolute;
+	top: 24px;
+	right: 24px;
+}
+
+.popup-close-button > svg.MuiSvgIcon-root {
+	font-size: 32px;
+	color: var(--text-color-tinted);
+}
+
+.overlay-content {
+	position: absolute;
+	margin: auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 20;
+	background: var(--background-color);
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	text-align: center;
+	flex-wrap: nowrap;
+	justify-content: center;
+	padding: 32px;
+}
+
+.overlay-content > h1 {
+	margin-top: 0;
+}
\ No newline at end of file
diff --git a/src/css/Progress.css b/src/css/Progress.css
new file mode 100644
index 0000000..62c65a6
--- /dev/null
+++ b/src/css/Progress.css
@@ -0,0 +1,113 @@
+.answer-input-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.answer-input-container > input {
+	max-width: 500px;
+	flex-grow: 1;
+	margin-right: 8px;
+}
+
+.answer-input-container.answer-input-container--answer-entered > input {
+	caret-color: transparent;
+}
+
+input.answer-input--correct {
+	color: #3ac535;
+}
+
+input.answer-input--incorrect {
+	color: #ff5252;
+}
+
+.progress-end-incorrect-answers {
+	display: table;
+	table-layout: fixed;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.progress-end-incorrect-answers > div {
+	display: table-row;
+}
+
+.progress-end-incorrect-answers > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.progress-end-button-container {
+	position: fixed;
+	left: 0;
+	right: 0;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1080px;
+	bottom: 0;
+	width: 100%;
+	height: 0;
+}
+
+.progress-end-button-container > .button {
+	margin: 48px;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+
+.progress-settings-overlay-content {
+	width: 80%;
+	max-width: 700px;
+	height: 70%;
+	max-height: 500px;
+	align-items: center;
+}
+
+.progress-settings-overlay-content > .settings-themes-container {
+	justify-content: center;
+	width: 75%;
+}
+
+.form-submit {
+	display: none;
+}
+
+@media screen and (max-width: 720px) {
+	.progress-end-button-container > .button {
+		margin: 24px;
+	}
+}
+
+@media screen and (max-width: 660px) {
+	.progress-settings-overlay-content > .settings-themes-container {
+		width: 100%;
+	}
+}
+
+@media screen and (max-width: 500px) {
+	.progress-settings-overlay-content {
+		width: 75%;
+	}
+}
+
+@media screen and (max-height: 700px) {
+	.progress-settings-overlay-content {
+		height: 75%;
+	}
+}
+
+@media screen and (max-height: 600px) {
+	.progress-end-button-container > .button {
+		margin: 24px;
+	}
+	.progress-settings-overlay-content {
+		justify-content: flex-start;
+	}
+}
\ No newline at end of file
diff --git a/src/css/SetPage.css b/src/css/SetPage.css
new file mode 100644
index 0000000..d00c7db
--- /dev/null
+++ b/src/css/SetPage.css
@@ -0,0 +1,62 @@
+.set-cloud-icon {
+	color: var(--text-color-tinted);
+	margin-left: 12px;
+}
+
+.vocab-list {
+	display: table;
+	table-layout: fixed;
+	column-gap: 10px;
+	width: 100%;
+	margin-top: 24px;
+	row-gap: 8px;
+}
+
+.vocab-list > div {
+	display: table-row;
+}
+
+.vocab-list > div > * {
+	display: table-cell;
+	word-wrap: break-word;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.vocab-list > div.vocab-list-header > * {
+	padding-bottom: 8px;
+}
+
+.vocab-list > div > *:first-child {
+	border-right: 8px solid transparent;
+}
+
+.set-page-group-overlay-content {
+	width: 70%;
+	max-width: 800px;
+	height: 70%;
+	max-height: 600px;
+	align-items: center;
+}
+
+.set-page-overlay-group-container {
+	width: 80%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	column-gap: 24px;
+	row-gap: 8px;
+}
+
+@media screen and (max-width: 860px) {
+	.set-page-group-overlay-content {
+		width: 75%;
+	}
+}
+@media screen and (max-height: 700px) {
+	.set-page-group-overlay-content {
+		height: 75%;
+	}
+}
\ No newline at end of file
diff --git a/src/css/SettingsContent.css b/src/css/SettingsContent.css
new file mode 100644
index 0000000..5b188aa
--- /dev/null
+++ b/src/css/SettingsContent.css
@@ -0,0 +1,24 @@
+.settings-themes-container {
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	row-gap: 16px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.settings-header, .settings-sound-container, .settings-themes-container {
+	margin-bottom: 36px;
+	margin-top: 0;
+}
+
+.settings-theme-header {
+	margin-top: 0;
+}
+
+.settings-save-container {
+	display: flex;
+	flex-direction: row;
+	column-gap: 8px;
+	row-gap: 4px;
+}
diff --git a/src/css/UserGroups.css b/src/css/UserGroups.css
new file mode 100644
index 0000000..35ca4df
--- /dev/null
+++ b/src/css/UserGroups.css
@@ -0,0 +1,89 @@
+.user-groups-overlay-content {
+	width: 40%;
+	max-width: 500px;
+	height: 50%;
+	max-height: 400px;
+	align-items: center;
+}
+
+.user-groups-overlay-input-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	width: 80%;
+}
+
+.user-groups-overlay-input-container > *:first-child {
+	margin-right: 4px;
+}
+
+.user-groups-overlay-input-container > *:last-child {
+	margin-left: 4px;
+}
+
+.user-groups-overlay-input-container > input {
+	flex: 1;
+}
+
+.user-group-role-icon {
+	color: var(--text-color-tinted);
+	margin-left: 12px;
+	display: flex;
+	align-items: center;
+}
+
+.user-group-role-icon > svg {
+	height: 20px;
+}
+
+.user-groups-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 64px;
+	row-gap: 24px;
+}
+
+.user-groups-list > a {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.user-groups-list > a {
+	color: inherit;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 1080px) {
+	.user-groups-overlay-content {
+		width: 50%;
+	}
+}
+@media screen and (max-width: 860px) {
+	.user-groups-overlay-content {
+		width: 70%;
+	}
+}
+@media screen and (max-width: 560px) {
+	.user-groups-overlay-input-container {
+		width: 90%;
+	}
+	.user-groups-overlay-input-container > .button {
+		margin-top: 4px;
+	}
+	.user-groups-overlay-input-container > input {
+		width: 100%;
+	}
+}
+@media screen and (max-width: 420px) {
+	.user-groups-overlay-input-container {
+		width: 100%;
+	}
+}
+@media screen and (max-width: 360px) {
+	.user-groups-overlay-input-container {
+		flex-direction: column;
+	}
+}
\ No newline at end of file
diff --git a/src/css/UserSets.css b/src/css/UserSets.css
new file mode 100644
index 0000000..7ab38a6
--- /dev/null
+++ b/src/css/UserSets.css
@@ -0,0 +1,22 @@
+.user-sets-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	column-gap: 64px;
+	row-gap: 24px;
+}
+
+.user-sets-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.user-sets-row > * {
+	color: inherit;
+	text-decoration: none;
+}
+
+.user-sets-row > *:first-child {
+	padding: 0 12px 0 0;
+}
\ No newline at end of file