diff --git a/docs/css/main.css b/docs/css/main.css
index ce5e6bf..b52690a 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -1,22 +1,41 @@
 html, body { 
   height: 100%; 
   overflow: hidden;
-  font-size:12px;  
+  font-size:12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 .form-control {
   font-size:12px; 	
-  height: 30px;  
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid #d1d5db;
+  padding: 4px 8px;
+  transition: all 0.2s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 select {
-  font-size:12px; 	
+  font-size:12px;
+  background-color: white;
+  cursor: pointer;
 }
 
 input {
-  font-size:14px; 	
+  font-size:14px;
+}
+
+input[type="range"] {
+  cursor: pointer;
 }
 
 body {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   padding: 0;
@@ -60,7 +79,8 @@ h1 {
 	padding:0; 
 	overflow:hidden;
 	width: 90%;
-	height: 90%;	
+	height: 90%;
+	border-radius: 12px;
 }
 
 #chordpro, #lyrics, #chatview {
@@ -69,7 +89,8 @@ h1 {
 	padding:0; 
 	overflow:hidden;
 	width: 98%;
-	height: 875px;	
+	height: 875px;
+	border-radius: 12px;
 }
 
 
@@ -79,34 +100,30 @@ h1 {
 }
 
 .play, .show_lyrics, .chord_pro, .style_type, .liber_live, .gamepad_mode, .load_file, .reset_app, .chorda_bluetooth, .delete_style, .pedal_board, .save_reg, .record_song {
-	-moz-box-shadow:inset 0px 20px 26px 0px #b6cde3;
-	-webkit-box-shadow:inset 0px 20px 26px 0px #b6cde3;
-	box-shadow:inset 0px 20px 26px 0px #b6cde3;
-	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
-	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
-	background-color:#79bbff;
-	-moz-border-radius:20px;
-	-webkit-border-radius:20px;
-	border-radius:20px;
-	color:#ffffff;
-	padding:8px 12px;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+	border-radius: 8px;
+	border: none;
+	color: #ffffff;
+	padding: 10px 16px;
 	cursor: pointer;
 	margin-left: 10px;
-	text-decoration:none;
-	text-shadow:1px 1px 6px #000000;
+	text-decoration: none;
+	font-weight: 500;
 	width: 80px;
 	text-align: center;
+	transition: all 0.3s ease;
 }
 
 .play:hover {
-	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
-	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
-	background-color:#378de5;
+	transform: translateY(-2px);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
 
 .play:active {
-	position:relative;
-	top:1px; left: 1px;
+	transform: translateY(0);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 #showTempo { 
@@ -117,4 +134,181 @@ h1 {
 #showSwing { 
 	display: inline-block;
 	width: 40px; 
+}
+
+/* Enhanced UI Improvements */
+#desktop {
+	background: rgba(255, 255, 255, 0.95);
+	border-radius: 16px;
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+	padding: 20px;
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+	#desktop {
+		background: rgba(255, 255, 255, 0.98);
+	}
+}
+
+#settings {
+	background: linear-gradient(to bottom, #ffffff, #f9fafb);
+	border-radius: 12px;
+	padding: 20px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+#settings td {
+	padding: 8px;
+}
+
+#settings b {
+	color: #374151;
+	font-weight: 600;
+}
+
+#desktop > table button,
+#mobile > table button {
+	border-radius: 8px;
+	font-weight: 500;
+	transition: all 0.2s ease;
+}
+
+#desktop > table button:hover,
+#mobile > table button:hover {
+	transform: translateY(-1px);
+}
+
+input[type="checkbox"] {
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	accent-color: #667eea;
+}
+
+#tempo, #volume {
+	accent-color: #667eea;
+}
+
+fluent-button {
+	font-weight: 500;
+	letter-spacing: 0.3px;
+}
+
+canvas {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
+}
+
+#orinayo, #orinayo-section, #orinayo-pad, #orinayo-strum, #orinayo-reg, #orinayo-control {
+	font-weight: 600;
+	color: #1f2937;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+#mobile {
+	background: rgba(255, 255, 255, 0.95);
+	border-radius: 16px;
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+	padding: 10px;
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+	#mobile {
+		background: rgba(255, 255, 255, 0.98);
+	}
+}
+
+#mobile h4 {
+	color: #374151;
+	font-weight: 600;
+}
+
+#sequencer2 {
+	background: linear-gradient(to right, #f9fafb, #ffffff);
+	padding: 15px;
+	border-radius: 10px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+	margin: 10px 0;
+}
+
+#sequencer2 span {
+	padding: 5px 10px;
+}
+
+#tempo-label {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 6px 12px;
+	border-radius: 6px;
+	font-weight: 500;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#tempo-label:hover {
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+#showVol {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 6px 16px;
+	border-radius: 6px;
+	font-weight: 500;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#showVol:hover {
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+#song_note {
+	background: linear-gradient(to right, #f9fafb, #ffffff);
+	padding: 10px 15px;
+	border-radius: 8px;
+	border: 2px solid #e5e7eb;
+	transition: all 0.2s ease;
+}
+
+#song_note:focus {
+	border-color: #667eea;
+	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+	outline: none;
+}
+
+.desktop_logo img, .mobile_logo img {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	transition: transform 0.2s ease;
+}
+
+.desktop_logo img:hover, .mobile_logo img:hover {
+	transform: scale(1.05);
+}
+
+#desktop_logo img {
+	border-radius: 12px;
+}
+
+fluent-dialog {
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+	fluent-dialog::part(control) {
+		background: rgba(0, 0, 0, 0.6);
+	}
+}
+
+#settings select.form-control {
+	background: white;
+	border: 1px solid #d1d5db;
+	padding: 6px 8px;
 }
\ No newline at end of file
diff --git a/docs/css/synth.css b/docs/css/synth.css
index 360ed28..54f185d 100644
--- a/docs/css/synth.css
+++ b/docs/css/synth.css
@@ -1,17 +1,31 @@
 body {
-  background-color: white;
+  background: transparent;
 }
 .synthtable table {
   font-size: 5px;
   table-layout: fixed;
   width: 100%;
   border-spacing: 0;
+  border-radius: 8px;
+  overflow: hidden;
 }
  .synthtable th {
-  padding: 0;
+  padding: 4px;
+  background: linear-gradient(to bottom, #5a67d8, #6b46c1);
+  color: white;
+  font-weight: 600;
+}
+.synthtable tbody > tr {
+  transition: background-color 0.2s ease;
 }
 .synthtable tbody > tr:nth-child(odd) {
-  background-color: #eee;
+  background-color: #f3f4f6;
+}
+.synthtable tbody > tr:nth-child(even) {
+  background-color: #ffffff;
+}
+.synthtable tbody > tr:hover {
+  background-color: rgba(102, 126, 234, 0.15);
 }
 .synthtable th:first-child,  .synthtable td:first-child {
   width: 128px;
@@ -58,7 +72,8 @@ td:nth-child(65) {
   border-right: none;
 }
 .synthtable td.note-on {
-  background-color: red;
+  background-color: #ef4444;
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
 }
 
 #message {
@@ -67,17 +82,19 @@ td:nth-child(65) {
 #message.show {
   padding: 1em;
   display: block;
-  font-weight: bold;
-  color: darkred;
-  border-radius: 1em;
-  border: 1px solid darkred;
-  background-color: #fcc;
+  font-weight: 600;
+  color: #991b1b;
+  border-radius: 12px;
+  border: 2px solid #f87171;
+  background: linear-gradient(to bottom, #fee2e2, #fecaca);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 div.load {
-  border-top: 1px solid #08f;
-  border-bottom: 1px solid #08f;
-  background-color: #def;
+  border-top: 2px solid #667eea;
+  border-bottom: 2px solid #667eea;
+  background: linear-gradient(to bottom, #ede9fe, #ddd6fe);
   margin-top: 1em;
   margin-bottom: 1em;
-  padding: 0.5em;
+  padding: 0.75em;
+  border-radius: 8px;
 }
\ No newline at end of file