diff --git a/assets/fonts/Leland.otf b/assets/fonts/Leland.otf
new file mode 100644
index 00000000..4049829e
Binary files /dev/null and b/assets/fonts/Leland.otf differ
diff --git a/neothesia-core/src/font_system.rs b/neothesia-core/src/font_system.rs
index 20abb73c..92654686 100644
--- a/neothesia-core/src/font_system.rs
+++ b/neothesia-core/src/font_system.rs
@@ -25,6 +25,9 @@ pub fn font_system() -> Rc<RefCell<FontSystem>> {
                     glyphon::fontdb::Source::Binary(Arc::new(include_bytes!(
                         "../../assets/fonts/bootstrap-icons.ttf"
                     ))),
+                    glyphon::fontdb::Source::Binary(Arc::new(include_bytes!(
+                        "../../assets/fonts/Leland.otf"
+                    ))),
                 ])))
             })
             .clone()
diff --git a/neothesia/src/scene/playing_scene/top_bar/mod.rs b/neothesia/src/scene/playing_scene/top_bar/mod.rs
index afc1abf3..596a01ea 100644
--- a/neothesia/src/scene/playing_scene/top_bar/mod.rs
+++ b/neothesia/src/scene/playing_scene/top_bar/mod.rs
@@ -118,6 +118,104 @@ impl TopBar {
     pub fn ui(this: &mut PlayingScene, ctx: &mut Context) {
         let mut ui = std::mem::replace(&mut this.nuon, nuon::Ui::new());
 
+        nuon::translate().y(100.0).build(&mut ui, |ui| {
+            let spacing = 15.0;
+            let half_spacing = spacing / 2.0;
+            let y = 50.0;
+            let x = 40.0;
+
+            let color = [0; 3];
+
+            nuon::quad()
+                .color([255; 3])
+                .pos(0.0, 0.0)
+                .size(250.0, 130.0)
+                .border_radius([0.0, 10.0, 10.0, 0.0])
+                .build(ui);
+
+            {
+                let y = y + 39.0;
+
+                for id in 0..5 {
+                    nuon::quad()
+                        .y(y - id as f32 * spacing)
+                        .height(1.0)
+                        .width(250.0)
+                        .color(color)
+                        .build(ui);
+                }
+            }
+
+            let base = || half_spacing * 4.0;
+            let pitch_y = |pitch: u8| base() - half_spacing * pitch as f32;
+
+            nuon::label()
+                .text("")
+                .color(color)
+                .font_family("Leland")
+                .font_size(60.0)
+                .x(x)
+                .y(y)
+                .build(ui);
+
+            // nuon::label()
+            //     .text("")
+            //     .color(color)
+            //     .font_family("Leland")
+            //     .font_size(60.0)
+            //     .x(x + 60.0)
+            //     .y(y + spacing / 2.0)
+            //     .build(ui);
+
+            let flat = "";
+            let sharp = "";
+
+            {
+                let y = y + pitch_y(9);
+
+                nuon::label()
+                    .text(sharp)
+                    .color(color)
+                    .font_family("Leland")
+                    .font_size(60.0)
+                    .x(x + 60.0 + 22.0)
+                    .y(y)
+                    .build(ui);
+            }
+
+            // for pitch in 0..10 {
+            //     if pitch == 0 {
+            //         let y = y + 39.0 + spacing;
+            //         nuon::quad()
+            //             .x(x + 60.0 + 20.0 - 10.0)
+            //             .y(y)
+            //             .height(1.0)
+            //             .width(30.0)
+            //             .color(color)
+            //             .build(ui);
+            //     }
+            //
+            //     let y = y + pitch_y(pitch);
+            //
+            //     nuon::label()
+            //         .text(sharp)
+            //         .color(color)
+            //         .font_family("Leland")
+            //         .font_size(60.0)
+            //         .x(x + 60.0 + 22.0 * (pitch % 2) as f32)
+            //         .y(y)
+            //         .build(ui);
+            // }
+
+            // nuon::label()
+            //     .text("")
+            //     .font_family("Leland")
+            //     .font_size(60.0)
+            //     .x(100.0)
+            //     .y(y)
+            //     .build(&mut ui);
+        });
+
         nuon::translate()
             .y(this.top_bar.topbar_expand_animation.animate_bool(
                 -75.0 + 5.0,