diff --git a/src/Client/src/styles.css b/src/Client/src/styles.css
index 99bb268..8f2bedd 100644
--- a/src/Client/src/styles.css
+++ b/src/Client/src/styles.css
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 :root {
-    --Mistox-Dark: #2C0703;
+    --Mistox-Dark: #5e0c0c;
     --Mistox-Medium: #890620;
     --Mistox-Light: #B6465F;
     --Mistox-Bright: #FC440F;
@@ -10,6 +10,7 @@
     --Mistox-Button-Hover: #ff999977;
     --Mistox-White: #FFF;
     --Mistox-Black: #000;
+    --Mistox-Background: #ebebeb;
     font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -19,5 +20,318 @@ html {
 
 body {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-    background-color: #fff;
+    background-color: var(--Mistox-White);
+}
+
+/* Header / Footer */
+
+.top-bar {
+    display: flex;
+    width: 100%;
+    height: 200px;
+    /*background-color: var(--Mistox-Dark);*/
+    background: linear-gradient(to bottom, var(--Mistox-Dark) 50%, transparent 100%);
+}
+
+.top-bar-logo {
+    width: 180px;
+    height: 180px;
+    margin: 10px
+}
+
+.top-bar-buttons {
+    display: flex;
+    width: calc(50% - 110px);
+    height: 180px;
+    margin: 10px;
+}
+
+.flex-right {
+    justify-content: end;
+}
+
+.nav-button {
+    position: relative;
+    height: 15px;
+    width: 150px;
+    border-radius: 5px;
+    margin: 10px;
+    text-align: center;
+    padding: 15px 0;
+    background-color: var(--Mistox-Dark);
+    color: var(--Mistox-White);
+    text-decoration: none;
+    font-size: 16px;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.5s ease;
+    letter-spacing: 4px;
+    margin: 10px;
+}
+
+    .nav-button:hover {
+        background-color: var(--Mistox-Medium);
+        box-shadow: 4px 3px 6px var(--Mistox-Black);
+    }
+
+    .nav-button:active {
+        transform: translate( 4px, 2px );
+        background-color: var(--Mistox-Dark);
+        border: none;
+        color: var(--Mistox-White);
+        box-shadow: none;
+    }
+
+    .active {
+        background-color: var(--Mistox-Light);
+        color: var(--Mistox-Frame);
+    }
+
+.content {
+    width: 100%;
+    min-height: calc(100vh - 300px);
+}
+
+.bottom-bar {
+    display: flex;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(to top, var(--Mistox-Dark) 50%, transparent 100%);
+}
+
+.bottom-bar-logo {
+    width: 80px;
+    height: 80px;
+    margin: 10px 50px;
+}
+
+.bottom-bar-logo img {
+    width: 80px;
+    height: 80px;
+}
+
+.bottom-bar-buttons {
+    display: flex;
+    width: calc(50% - 110px);
+    height: 80px;
+    margin: 10px;
+}
+
+.nav-button-bottom {
+    height: 15px;
+    width: 150px;
+    border-radius: 5px;
+    text-align: center;
+    padding: 5px 0;
+    transition: 0.5s;
+    background-color: #00000000;
+    text-decoration: none;
+}
+
+.bottom-bar-float {
+    align-items: end;
+    color: var(--Mistox-White);
+}
+
+.bottom-bar-padding {
+    color: var(--Mistox-White);
+    margin: 15px;
+}
+
+/* Auth Forms */
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(100vh - 300px);
+}
+
+.column-content {
+    columns: 2;
+}
+
+@media (max-width: 1620px) {
+    .column-content {
+        columns: 1;
+    }
+}
+
+.text-frame {
+    margin: 50px !important;
+    max-width: 2200px !important;
+    padding: 10px !important;
+    width: auto !important;
+}
+
+.background-border {
+    border: var(--Mistox-Background) 2px solid;
+    border-radius: 6px;
+}
+
+.big-frame {
+    background-color: var(--Mistox-Background);
+    padding: 4px;
+    width: 400px;
+    color: var(--Mistox-Black);
+    border: 1px solid var(--Mistox-Black);
+    break-inside: avoid;
+}
+
+.big-frame h3{
+    margin: 15px 0 30px 0;
+    color: var(--Mistox-Black);
+    text-align: center;
+}
+
+.big-frame h2{
+    text-align: center;
+    position: relative;
+    margin: 0;
+    top: -20px;
+    font-size: 15px;
+    color: var(--Mistox-Bright);
+}
+
+.frame-button {
+    height: 60px;
+}
+
+.big-frame .frame-item label{
+    position: relative;
+    padding: 10px 0;
+    font-size: 16px;
+    color: var(--Mistox-Black);
+    pointer-events: none;
+    transition: .5s;
+    top: -70px;
+    left: 20px;
+}
+
+    .big-frame .frame-item input:autofill,
+    .big-frame .frame-item input:-webkit-autofill,
+    .big-frame .frame-item input {
+        position: relative;
+        width: calc(100% - 40px);
+        margin: 0 20px;
+        padding: 10px 0;
+        font-size: 15px;
+        color: var(--Mistox-Black);
+        margin-bottom: 30px;
+        border: none;
+        border-bottom: 1px solid var(--Mistox-Black);
+        outline: none;
+        background: transparent;
+    }
+
+    .big-frame .frame-item input:focus ~ label,
+    .big-frame .frame-item input:not(:placeholder-shown) ~ label {
+        top: -95px;
+        left: 10px;
+        color: var(--Mistox-Light);
+        font-size: 12px;
+    }
+
+    .big-frame .frame-item textarea:autofill,
+    .big-frame .frame-item textarea:-webkit-autofill,
+    .big-frame .frame-item textarea {
+        position: relative;
+        width: calc(100% - 40px);
+        margin: 0 20px;
+        padding: 10px 0;
+        font-size: 15px;
+        color: var(--Mistox-White);
+        margin-bottom: 30px;
+        border: none;
+        border-bottom: 1px solid var(--Mistox-Black);
+        outline: none;
+        background: transparent;
+        height: 80px;
+    }
+
+    .big-frame .frame-item textarea:focus ~ label,
+    .big-frame .frame-item textarea:not(:placeholder-shown) ~ label {
+        top: -150px;
+        left: 10px;
+        color: var(--Mistox-Light);
+        font-size: 12px;
+    }
+
+.flex-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    padding-bottom: 15px;
+}
+
+.sub-frame {
+    text-align: center;
+    padding: 1px 0;
+}
+
+    .sub-frame a {
+        text-decoration: none;
+        color: #00F;
+    }
+
+    .sub-frame a :hover {
+        color: var(--Mistox-Bright);
+    }
+
+.img-frame {
+    width: 610px;
+}
+
+.image-holder{
+    float: left;
+    border: 1px solid var(--Mistox-Black);
+    width: fit-content;
+    border-radius: 6px;
+}
+
+.delete-button {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    color: #000;
+    background-color: red;
+    border: none;
+    border-radius: 4px;
+    transform: translate(180px, 0);
+}
+
+    .delete-button:hover{
+        background-color: #890620;
+    }
+
+.submit{
+    position: relative;
+    padding: 10px 20px;
+    color: var(--Mistox-Black);
+    background-color: var(--Mistox-Background);
+    font-size: 16px;
+    text-decoration: none;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.5s ease;
+    letter-spacing: 4px;
+    margin: auto;
+    border-radius: 5px;
+    border: solid 1px var(--Mistox-Black);
+}
+
+    .submit:hover {
+        box-shadow: 4px 3px 6px var(--Mistox-Dark);
+    }
+
+    .submit:active {
+        transform: translate( 4px, 2px );
+        border: none;
+        box-shadow: none;
+    }
+
+ul {
+    list-style: none;
+    color: var(--Mistox-Bright);
 }
\ No newline at end of file