diff --git a/desktop/src/index.html b/desktop/src/index.html
index ef447c0..0cac060 100644
--- a/desktop/src/index.html
+++ b/desktop/src/index.html
@@ -2,10 +2,15 @@
- Desktop
+ Butterfly Desktop
+
+
diff --git a/desktop/src/styles.scss b/desktop/src/styles.scss
index 90d4ee0..3164825 100644
--- a/desktop/src/styles.scss
+++ b/desktop/src/styles.scss
@@ -1 +1,69 @@
-/* You can add global styles to this file, and also import other style files */
+/* ── Butterfly Desktop — Global Styles ──────────────────────────────────── */
+
+/* Reset */
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background: #0d1b2a;
+ color: #e0e0e0;
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: #1e1e1e;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #555;
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #666;
+}
+
+/* Selection */
+::selection {
+ background: #264f78;
+ color: #fff;
+}
+
+/* Focus outline */
+:focus-visible {
+ outline: 2px solid #0078d4;
+ outline-offset: -2px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}