diff --git a/hypr/autostart.conf b/hypr/autostart.conf
index 72b8134..a7a91ff 100644
--- a/hypr/autostart.conf
+++ b/hypr/autostart.conf
@@ -3,4 +3,5 @@ exec-once = /usr/bin/qs & # quickshell
 # exec-once = hyprpaper # wallpaper
 exec-once = awww-daemon # wallpaper
 exec-once = hyprsunset # night light
-exec-once = qs -c overview # workspace switcher https://github.com/Shanu-Kumawat/quickshell-overview
\ No newline at end of file
+exec-once = qs -c overview # workspace switcher https://github.com/Shanu-Kumawat/quickshell-overview
+exec-once = cava -p ~/.config/cava/config
\ No newline at end of file
diff --git a/quickshell/services/CavaService.qml b/quickshell/services/CavaService.qml
new file mode 100644
index 0000000..6803c41
--- /dev/null
+++ b/quickshell/services/CavaService.qml
@@ -0,0 +1,26 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Item {
+    id: root
+    
+    signal cavaDataChanged(string data)
+    
+    // Process {
+    //     id: cavaProcess
+    //     command: ["cat", "/tmp/cava.fifo"]
+        
+    //     stdout: StdioCollector {
+    //         waitForEnd: false
+    //         onStreamFinished: {
+    //             console.log("Cava data: " + this.text)
+    //             root.cavaDataChanged(this.text)
+    //         }
+    //     }
+    // }
+    
+    Component.onCompleted: {
+        cavaProcess.running = true
+    }
+}
\ No newline at end of file
diff --git a/quickshell/ui/NowPlaying.qml b/quickshell/ui/NowPlaying.qml
index 624df41..7107c7e 100644
--- a/quickshell/ui/NowPlaying.qml
+++ b/quickshell/ui/NowPlaying.qml
@@ -3,13 +3,20 @@ import QtQuick
 import QtQuick.Layouts
 
 import "../constants"
-
+import "../services"
 Row {
     id: root
 
     property string artist: ""
     property string title: ""
     property string artUrl: ""
+    property int maxTextLength: 50
+
+    // if the artist - title text is too long, truncate it
+    readonly property string displayText: {
+        const fullText = artist !== "" ? (artist + " - " + title) : title
+        return fullText.length > maxTextLength ? fullText.substring(0, maxTextLength - 3) + "..." : fullText
+    }
 
     visible: title !== ""
     spacing: 6
@@ -26,6 +33,14 @@ Row {
         // anchors.fill: parent
     }
 
+    CavaService {
+        id: cavaService
+        onCavaDataChanged: {
+            // TODO update the canvas with the new data
+            // console.log("Cava data changed: " + data)
+        }
+    }
+
     Image {
         width: 18
         height: 18
@@ -35,11 +50,10 @@ Row {
     }
 
     Text {
-        text: root.artist !== "" ? (root.artist + " - " + root.title) : root.title
+        text: root.displayText
         color: Colors.md3.primary
         font.family: Constants.fontFamily
         font.pixelSize: Constants.fontSize
-        elide: Text.ElideRight
         anchors.verticalCenter: parent.verticalCenter
         z: 1
     }