diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
new file mode 100644
index 0000000000..7e6bbf5e18
--- /dev/null
+++ b/public/assets/css/settings/settings.css
@@ -0,0 +1,69 @@
+/*-------------------------------------*/
+/* PAGES ------------------------------*/
+.set-nav {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ order: 2;
+ width: 100%;
+ margin-left: 20%;
+ margin-right: 20%;
+ background-color: #00000080;
+ padding: 1em 1em;
+ font-size: 0.7em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.set-nav ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding: 0;
+}
+
+.set-nav li {
+ display: block;
+ flex: 0 1 auto;
+ list-style-type: none;
+}
+
+.active {
+ color: #F6F6F6 !important;
+ font-weight: 700;
+}
+
+.set-nav a {
+ color: #91B9D0;
+}
+
+.set-nav a:hover {
+ color: #F6F6F6;
+ transition: all 0.8s ease;
+
+}
+
+/*-------------------------------------*/
+/*-------------------------------------*/
+/* CONTENT ----------------------------*/
+.content {
+ order: 3;
+ width: 100%;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ margin-left: 20%;
+ margin-right: 20%;
+ background-color: rgba(0, 0, 0, 0.40);
+ padding: 0 1em 1em 1em;
+ border-radius: 1em;
+ font-size: 0.65em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.content ul {
+ margin: 0;
+ padding-left: 2em;
+ list-style: disc;
+}
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css
new file mode 100644
index 0000000000..604e885343
--- /dev/null
+++ b/public/assets/css/settings/settings_mid.css
@@ -0,0 +1,112 @@
+/*-------------------------------------*/
+/* PAGES ------------------------------*/
+.set-nav {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ order: 2;
+ width: 100%;
+ margin-left: 5%;
+ margin-right: 5%;
+ background-color: #00000080;
+ padding: 1em 1em;
+ font-size: 0.8em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.set-nav ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ margin-left: 5%;
+ margin-right: 5%;
+ padding: 0;
+}
+
+.set-nav li {
+ display: block;
+ flex: 0 1 auto;
+ list-style-type: none;
+}
+
+.active {
+ color: #F6F6F6 !important;
+ font-weight: 700;
+}
+
+.set-nav a {
+ color: #91B9D0;
+}
+
+.set-nav a:hover {
+ color: #F6F6F6;
+ transition: all 0.8s ease;
+
+}
+
+/*-------------------------------------*/
+/*-------------------------------------*/
+.set-nav2 {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ order: 2;
+ width: 100%;
+ margin-left: 5%;
+ margin-right: 5%;
+ margin-top: 1em;
+ background-color: #00000080;
+ border-top-left-radius: 1em;
+ border-top-right-radius: 1em;
+ padding: 1em 1em;
+ font-size: 0.8em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.set-nav2 ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding: 0;
+}
+
+.set-nav2 li {
+ display: block;
+ flex: 0 1 auto;
+ list-style-type: none;
+}
+
+.set-nav2 a {
+ color: #91B9D0;
+}
+
+.set-nav2 a:hover {
+ color: #F6F6F6;
+ transition: all 0.8s ease;
+
+}
+
+/* CONTENT ----------------------------*/
+.content {
+ order: 3;
+ width: 100%;
+ margin-bottom: 1em;
+ margin-left: 5%;
+ margin-right: 5%;
+ background-color: rgba(0, 0, 0, 0.30);
+ padding: 1em 1em 1em 1em;
+ border-bottom-left-radius: 1em;
+ border-bottom-right-radius: 1em;
+ font-size: 0.8em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.content ul {
+ margin: 0;
+ padding-left: 2em;
+ list-style: disc;
+}
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css
new file mode 100644
index 0000000000..4066911c57
--- /dev/null
+++ b/public/assets/css/settings/settings_small.css
@@ -0,0 +1,69 @@
+/*-------------------------------------*/
+/* PAGES ------------------------------*/
+.set-nav {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ order: 2;
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ background-color: #00000080;
+ padding: 1em 1em;
+ font-size: 0.7em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.set-nav ul {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-evenly;
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ padding: 0;
+}
+
+.set-nav li {
+ display: block;
+ flex: 0 1 auto;
+ list-style-type: none;
+}
+
+.active {
+ color: #F6F6F6 !important;
+ font-weight: 700;
+}
+
+.set-nav a {
+ color: #91B9D0;
+}
+
+.set-nav a:hover {
+ color: #F6F6F6;
+ transition: all 0.8s ease;
+
+}
+
+/*-------------------------------------*/
+/*-------------------------------------*/
+/* CONTENT ----------------------------*/
+.content {
+ order: 3;
+ width: 100%;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ margin-left: 1%;
+ margin-right: 1%;
+ background-color: rgba(0, 0, 0, 0.40);
+ padding: 0 1em 1em 1em;
+ border-radius: 1em;
+ font-size: 0.7em;
+ box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+}
+
+.content ul {
+ margin: 0;
+ padding-left: 2em;
+ list-style: disc;
+}
\ No newline at end of file
diff --git a/templates/settings/profile.html.twig b/templates/settings/profile.html.twig
index 947c5a7ee3..72474bb78d 100644
--- a/templates/settings/profile.html.twig
+++ b/templates/settings/profile.html.twig
@@ -1,9 +1,39 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
-
-
-
+
+
+
+{% endblock %}
+
+{% block nav %}
+
+
+
{% endblock %}
{% block body %}