diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 904f86c9..1bcad0e0 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -64,18 +64,11 @@ live_design! {
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
     ICO_CLOSE = dep("crate://self/resources/icons/close.svg")
     ICO_JUMP_TO_BOTTOM = dep("crate://self/resources/icon_jump_to_bottom.svg")
-    
+
     ICO_LOCATION_PERSON = dep("crate://self/resources/icons/location-person.svg")
 
-    TEXT_SUB = {
+    TEXT_SUB = <THEME_FONT_REGULAR>{
         font_size: (10),
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
-    }
-
-    TEXT_P = {
-        font_size: (12),
-        height_factor: 1.65,
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
     }
 
     COLOR_BG = #xfff8ee
@@ -1028,13 +1021,13 @@ impl RoomScreen{
             return;
         }
         let first_index = portal_list.first_id();
-        
+
         let Some(tl_state) = self.tl_state.as_mut() else { return };
         let Some(room_id) = self.room_id.as_ref() else { return };
         if let Some(ref mut index) = tl_state.prev_first_index {
             // to detect change of scroll when scroll ends
-            if *index != first_index {  
-                // scroll changed         
+            if *index != first_index {
+                // scroll changed
                 self.fully_read_timer = cx.start_interval(5.0);
                 let time_now = std::time::Instant::now();
                 if first_index > *index {
@@ -1823,7 +1816,7 @@ impl RoomScreen {
         if first_time_showing_room {
             self.process_timeline_updates(cx);
         }
-    
+
         self.redraw(cx);
     }
 
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 43686f40..8546ec7f 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -2,35 +2,39 @@ use makepad_widgets::*;
 
 live_design! {
 
+    import makepad_widgets::theme_desktop_dark::*;
     ICON_BLOCK_USER  = dep("crate://self/resources/icons/forbidden.svg")
     ICON_CHECKMARK   = dep("crate://self/resources/icons/checkmark.svg")
     ICON_CLOSE       = dep("crate://self/resources/icons/close.svg")
 
 
-    TITLE_TEXT = {
+
+    TITLE_TEXT = <THEME_FONT_REGULAR>{
         font_size: (13),
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
     }
 
-    REGULAR_TEXT = {
+    REGULAR_TEXT = <THEME_FONT_REGULAR>{
         font_size: (10),
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
     }
 
-    TEXT_SUB = {
+    TEXT_SUB = <THEME_FONT_REGULAR>{
         font_size: (8),
         height_factor: 1.5,
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
     }
 
+    TEXT_P = <THEME_FONT_REGULAR>{
+        font_size: (12),
+        height_factor: 1.65,
+    }
+
+
     USERNAME_FONT_SIZE = 11
     USERNAME_TEXT_COLOR = #x2
-    USERNAME_TEXT_STYLE = {
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")}
+    USERNAME_TEXT_STYLE = <THEME_FONT_BOLD>{
         font_size: (USERNAME_FONT_SIZE),
-        // height_factor: 1.5,
     }
 
+
     TYPING_NOTICE_TEXT_COLOR = #121570
 
     MESSAGE_FONT_SIZE = 11
@@ -39,8 +43,7 @@ live_design! {
     MESSAGE_TEXT_HEIGHT_FACTOR = 1.55
     // This font should only be used for plaintext labels. Don't use this for Html content,
     // as the Html widget sets different fonts for different text styles (e.g., bold, italic).
-    MESSAGE_TEXT_STYLE = {
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
+    MESSAGE_TEXT_STYLE = <THEME_FONT_REGULAR>{
         font_size: (MESSAGE_FONT_SIZE),
         height_factor: (MESSAGE_TEXT_HEIGHT_FACTOR),
         line_spacing: (MESSAGE_TEXT_LINE_SPACING),
@@ -51,15 +54,15 @@ live_design! {
     SMALL_STATE_FONT_SIZE = 9.0
     SMALL_STATE_TEXT_COLOR = #x888
     SMALL_STATE_TEXT_STYLE = {
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
+        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")},
+        font2: { path: dep("crate://makepad-widgets/resources/LXGWWenKaiRegular.ttf") },
         font_size: (SMALL_STATE_FONT_SIZE),
         height_factor: 1.3,
     }
 
     TIMESTAMP_FONT_SIZE = 8.5
     TIMESTAMP_TEXT_COLOR = #x999
-    TIMESTAMP_TEXT_STYLE = {
-        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
+    TIMESTAMP_TEXT_STYLE = <THEME_FONT_REGULAR>{
         font_size: (TIMESTAMP_FONT_SIZE),
     }