diff --git a/css/theme.css b/css/theme.css
index 8d31ef8..887b79d 100755
--- a/css/theme.css
+++ b/css/theme.css
@@ -1,17 +1,3 @@
-/*
- * |      |               |              
- * |      |               |  {}          
- * |      |   ___   .__   |       ___    
- * |  /\  |  /   \  |  \  |  ||  /   \   
- * | /  \ | ||   || |     |  || ||   ||  
- * |/    \|  \___/  |     |  ||  \___/   
- *        DEFAULT THEME v1.2.1
- *           04/28/2022
- * 
- *  Created Internally at Worlio by:
- *  - Nicholas "Wirlaburla" G.
- */
-
 :root {
     --main-background: #d3d3d3;
     --main-text: #000000;
@@ -25,8 +11,8 @@
     --context-menu-border: 1px outset #a4a4a4;
     --context-menu-hover: #bfbfbf;
 
-    --menu-border: 1px outset #bdbdbd;
-    --menu-bg: #d0d0d0;
+    --menu-border: 1px outset #c8b793;
+    --menu-bg: #dbd1bb;
     
     --header-bg: #ffffff;
     --header-text: #000000;
@@ -46,8 +32,8 @@
     
     --staff: #d500d1;
     
-    --tab-inactive: #bdbdbd;
-    --tab-selected: #d3d3d3;
+    --tab-inactive: #aeafb9;
+    --tab-selected: #bfcfdd;
     --tab-gradient: #dedede;
     
     --popup-title-bg: #b3b3b3;
diff --git a/style.css b/style.css
index bc8602b..f3318ef 100644
--- a/style.css
+++ b/style.css
@@ -74,6 +74,7 @@ body.home .home-container .blog-contents .blog-item {
 body.home .home-container .blog-contents .blog-item i { text-align: right; }
 
 nav.top { 
+	display: flex;
 	background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
 	background-position: 0px 100%;
 	background-color: var(--acc-nav, #f3dca9);
@@ -86,26 +87,24 @@ nav.top {
 	white-space: nowrap;
 }
 
-	
-nav.top div.left {
+nav.top div.slideout {
 	position: relative;
-	width: 132px;
 	height: 32px;
 	z-index: 3;
-	float: left;
 	margin: 2px 4px;
 	transition-duration: 0.05s;
+	flex-shrink: 0;
 }
 
-nav.top div.left:not(.active) {
+nav.top div.slideout:not(.active) {
 	cursor: pointer;
 }
 
-nav.top div.left.active {
+nav.top div.slideout.active {
 	width: 264px;
 }
 
-nav.top div.left .upbutton {
+nav.top div.slideout .upbutton {
 	width: 32px;
 	height: 16px;
 	margin: 0 auto;
@@ -116,14 +115,16 @@ nav.top div.left .upbutton {
 	transition-duration: 0.05s;
 }
 
-nav.top div.left.active .upbutton {
+nav.top div.slideout.active .upbutton {
 	display: block;
 	opacity: 1;
 }
 
-nav.top div.left .upbutton img { margin: 4px 8px; } 
+nav.top div.slideout .upbutton img { margin: 4px 8px; } 
 
-nav.top div.left .dropdown {
+nav.top div.slideout.account .dropdown { margin: -2px -4px; }
+
+nav.top div.slideout .dropdown {
 	font-family: var(--spfont1, Pixio);
 	background: var(--navbar-bg), linear-gradient(0deg, rgba(162,147,112,1) 0%, rgba(243,220,169,1) 8px);
 	background-position: 0 0, 0px 100%;
@@ -137,25 +138,23 @@ nav.top div.left .dropdown {
 	height: 32px;
 	position: relative;
 	z-index: 2;
-	margin: -2px -4px;
 	padding: 1px 4px;
 	white-space: nowrap;
 	transition-duration: 0.05s;
 }
 
-nav.top div.left:not(.active):hover .dropdown {
+nav.top div.slideout:not(.active):hover .dropdown {
 	background: var(--navbar-bg), linear-gradient(0deg, rgba(243,220,169,1) 0%, rgba(210,190,143,1) 8px);
 }
 
-nav.top div.left.active .dropdown {
-	height: 412px;
-}
+nav.top div.slideout.account.active .dropdown { height: 112px; }
+nav.top.guest div.slideout.account.active .dropdown { height: 112px; }
+nav.top div.slideout.mail.active .dropdown,
+nav.top div.slideout.alerts.active .dropdown { height: 352px; }
 
-nav.top.guest div.left.active .dropdown {
-	height: 112px;
-}
 
-nav.top div.left .dropdown .right {
+
+nav.top div.slideout .dropdown .right {
 	pointer-events: none;
 	display: none;
 	opacity: 0;
@@ -163,13 +162,15 @@ nav.top div.left .dropdown .right {
 	transition-duration: 1s;
 }
 
-nav.top div.left.active .dropdown .right {
+nav.top div.slideout.active .dropdown .right {
 	pointer-events: unset;
 	display: block;
 	opacity: 1;
 }
 
-nav.top div.left .dropdown .alerts {
+nav.top div.slideout.alerts .dropdown .alerts,
+nav.top div.slideout.mail .dropdown .mail {
+	text-align: left;
 	border: 2px inset var(--acc-nav);
 	background: #2221;
 	margin: 2px;
@@ -181,7 +182,8 @@ nav.top div.left .dropdown .alerts {
 	white-space: pre-wrap;
 }
 
-nav.top div.left .dropdown .alerts .alert {
+nav.top div.slideout.alerts .dropdown .alerts .alert,
+nav.top div.slideout.mail .dropdown .mail .message {
 	margin: 4px;
 	font-family: var(--spfont1);
 	background-color: var(--menu-bg);
@@ -189,87 +191,85 @@ nav.top div.left .dropdown .alerts .alert {
 	padding: 4px;
 }
 
-nav.top div.left .dropdown .alerts .alert.unread {
+nav.top div.slideout.alerts .dropdown .alerts .alert.unread,
+nav.top div.slideout.mail .dropdown .mail .message.unread {
 	background-color: #d0dadf;
 	outline: 1px solid #0088ff;
 }
 		
-nav.top div.left .dropdown .alerts .alert a {
+nav.top div.slideout.alerts .dropdown .alerts .alert a,
+nav.top div.slideout.mail .dropdown .mail .message a {
 	text-decoration: underline;
 }
 	
-nav.top div.left .dropdown .alerts .alert .info {
+nav.top div.slideout.alerts .dropdown .alerts .alert .info,
+nav.top div.slideout.mail .dropdown .mail .message .info {
 	display: flex;
 	color: var(--subtitle);
 	font-size: 12px;
 }
 
-nav.top div.left .dropdown .flag img {
-	float: right;
-	width: 16px;
+nav.top div.slideout.account { width: 132px; }
+nav.top div.slideout.account.active { width: 264px; }
+nav.top div.slideout.mail,nav.top div.slideout.alerts { 
+	display: block;
+	width: 32px;
+	margin: 0px 2px;
+	text-align: center;
+}
+nav.top div.slideout.active.mail,nav.top div.slideout.active.alerts { width: 262px; }
+nav.top div.slideout.mail .dropdown,nav.top div.slideout.alerts .dropdown {
+	padding: 1px;
+}
+nav.top div.slideout.mail .counter,nav.top div.slideout.alerts .counter { 
+	margin-top: -8px; 
+	display: block;
+}
+nav.top div.slideout.mail .counter.new,nav.top div.slideout.alerts .counter.new {
+	color: var(--alert);
 }
 
-nav.top div.left .dropdown .flag a {
-	opacity: 0;
-	transition-duration: 0.1s;
-	height: 16px;
-}
-
-nav.top div.left.active .dropdown .flag a {
-	opacity: 1;
-	display: inline;
-}
-
-nav.top div.left .dropdown .flag[role="0"] a { color: var(--rankflag0); }
-nav.top div.left .dropdown .flag[role="5"] a { color: var(--rankflag1); }
-nav.top div.left .dropdown .flag[role="10"] a { color: var(--rankflag2); }
-nav.top div.left .dropdown .flag[role="15"] a { color: var(--rankflag3); }
-nav.top div.left .dropdown .flag[role="30"] a { color: var(--rankflag4); }
-nav.top div.left .dropdown .flag[role="40"] a { color: var(--rankflag5); }
-nav.top div.left .dropdown .flag[role="50"] a { color: var(--rankflag6); }
-nav.top div.left .dropdown .flag[role="100"] a { color: var(--rankflag7); }
-
-nav.top div.left .username {
+nav.top div.slideout.account .username {
 	display: block;
 	width: 132px;
 	height: 38px;
 	margin: -1px;
 }
 
-nav.top div.left .dropdown .username .counters {
+nav.top div.slideout .dropdown .username .counters {
 	display: flex;
 }
 
-nav.top div.left .dropdown .username .counter {
+nav.top div.slideout .dropdown .username .counter {
 	flex-grow: 1;
 	height: 16px;
 }
 
-nav.top div.left .dropdown .username .counter a {
+nav.top div.slideout .dropdown .username .counter a {
 	color: var(--inactive, #6e6e6e);
 	vertical-align: top;
 	font-size: 14px;
 }
 
-nav.top div.left .dropdown .username .counter img {
+nav.top div.slideout .dropdown .username .counter img {
 	height: 100%;
 	margin: 0px 1px;
 	padding: 0px 2px;
 }
 
-nav.top div.left .dropdown .username .counter.alert a {
+nav.top div.slideout .dropdown .username .counter.alert a {
 	color: var(--alert, #ce0000);
 }
 
-nav.top div.left .dropdown .username .counter.currency a {
+nav.top div.slideout .dropdown .username .counter.currency a {
 	color: var(--currency, #89541A);
 }
 
-nav.top div.left .dropdown .username .userlink {
+nav.top div.slideout .dropdown .username .userlink {
 	margin: 0px;
 }
 
-nav.top div.left .username .arrow {
+nav.top div.slideout .username .arrow {
 	position: relative;
 	opacity: 0.3;
 	float: right;
@@ -278,11 +278,11 @@ nav.top div.left .username .arrow {
 	height: 16px !important;
 }
 
-nav.top div.left .username .user-icon {
+nav.top div.slideout .username .user-icon {
 	vertical-align: top;
 }
 
-nav.acc > div:nth-of-type(2) {
+/*nav.acc > div:nth-of-type(2) {
 	display: block;
 	overflow-y: visible;
 	overflow-x: auto;
@@ -290,11 +290,11 @@ nav.acc > div:nth-of-type(2) {
 	scrollbar-width: none;
 	-ms-overflow-style: none;
 	margin: 0px 4px;
-}
+}*/
 
-nav.acc .left.active .dropdown .currency a[type="short"] { display: none; }
+nav.acc .slideout.active .dropdown .currency a[type="short"] { display: none; }
 nav.acc .dropdown .currency a[type="extended"] { display: none; }
-nav.acc .left.active .dropdown .currency a[type="extended"] { display: unset; }
+nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; }
 
 nav.top p {
 	margin: 0px;
@@ -368,17 +368,17 @@ nav .logo {
 	filter: brightness(50%) saturate(0%);
 }
 
-.button a {
+.button > a {
 	display: block;
 	width: 144px;
 	height: 48px;
+	margin: -2px;
 }
 
 .button > a > img:nth-of-type(1) {
 	display: inline;
 	width: 48px;
 	height: 48px;
-	margin: -2px;
 	margin-right: 2px;
 	flex-shrink: 0;
 }
@@ -859,7 +859,7 @@ hr.arrow {
 	margin: 22px 2px 2px 2px;
 }
 
-hr.arrow.left { background-position: 0 0; }
+hr.arrow.slideout { background-position: 0 0; }
 hr.arrow.right { background-position: 100% 0; }
 hr.arrow.up { background-position: 0 100%; }
 hr.arrow.down { background-position: 100% 100%; }
@@ -2266,4 +2266,4 @@ div.user-input-box {
 
 div.user-input-box .userlink > * {
 	pointer-events: none;
-}
+}
\ No newline at end of file