diff --git a/music-player/client/src/blocks/track.ts b/music-player/client/src/blocks/track.ts
index b2b9e36..55c034e 100644
--- a/music-player/client/src/blocks/track.ts
+++ b/music-player/client/src/blocks/track.ts
@@ -35,7 +35,7 @@ export class TrackName extends HTMLElement {
 
 export class TrackCard extends HTMLElement {
   static get observedAttributes() {
-    return ["id", "trackNumber", "name", "album", "artist"];
+    return ["id", "trackNumber", "name", "album", "artist", "duration"];
   }
 
   constructor() {
diff --git a/music-player/client/src/client.ts b/music-player/client/src/client.ts
index b42b023..61f1ba8 100644
--- a/music-player/client/src/client.ts
+++ b/music-player/client/src/client.ts
@@ -1,6 +1,7 @@
 export interface TrackInfo {
   id: string;
   track_number?: number;
+  duration?: number;
   name?: string;
   album?: string;
   artist?: string;
diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts
index f0ab519..b85ab4f 100644
--- a/music-player/client/src/main.ts
+++ b/music-player/client/src/main.ts
@@ -27,6 +27,7 @@ const updateTrackList = (tracks: TrackInfo[]) => {
       card.name = info.name || null;
       card.album = info.album || null;
       card.artist = info.artist || null;
+      card.length = (info.duration && `${info.duration}`) || null;
       return card;
     });
     _.map(track_formats, (trackCard) => {
diff --git a/music-player/server/src/audio.rs b/music-player/server/src/audio.rs
index ab39568..bb8b9cb 100644
--- a/music-player/server/src/audio.rs
+++ b/music-player/server/src/audio.rs
@@ -84,6 +84,7 @@ pub struct TrackInfo {
     pub name: Option<String>,
     pub album: Option<String>,
     pub artist: Option<String>,
+    pub duration: Option<u32>,
     #[serde(serialize_with = "serialize_mime")]
     pub filetype: mime::Mime,
 }
diff --git a/music-player/server/src/database.rs b/music-player/server/src/database.rs
index 72a05ac..8bad082 100644
--- a/music-player/server/src/database.rs
+++ b/music-player/server/src/database.rs
@@ -129,6 +129,8 @@ mod test {
                 name: None,
                 album: None,
                 artist: None,
+                duration: None,
+                filetype: "text/plain".parse::<mime::Mime>().unwrap(),
             };
             index.add_track(info.clone());
 
diff --git a/music-player/server/src/music_scanner.rs b/music-player/server/src/music_scanner.rs
index ac92aa0..07b6aad 100644
--- a/music-player/server/src/music_scanner.rs
+++ b/music-player/server/src/music_scanner.rs
@@ -111,6 +111,7 @@ impl TrackInfo {
                     .and_then(|s| s.to_str())
                     .map(|s| s.to_owned())
             }),
+            duration: tags.duration(),
             track_number: None,
             filetype: mimetype,
         })
@@ -202,6 +203,8 @@ pub mod factories {
                         name: Some("Track 1".to_owned()),
                         album: Some("Savanni's Demo".to_owned()),
                         artist: Some("Savanni".to_owned()),
+                        duration: Some(15),
+                        filetype: "audio/mpeg".parse::<mime::Mime>().unwrap(),
                     },
                     TrackInfo {
                         id: TrackId::from("/home/savanni/Track 2.mp3".to_owned()),
@@ -209,6 +212,8 @@ pub mod factories {
                         name: Some("Track 2".to_owned()),
                         album: Some("Savanni's Demo".to_owned()),
                         artist: Some("Savanni".to_owned()),
+                        duration: Some(15),
+                        filetype: "audio/mpeg".parse::<mime::Mime>().unwrap(),
                     },
                     TrackInfo {
                         id: TrackId::from("/home/savanni/Track 3.mp3".to_owned()),
@@ -216,6 +221,8 @@ pub mod factories {
                         name: Some("Track 3".to_owned()),
                         album: Some("Savanni's Demo".to_owned()),
                         artist: Some("Savanni".to_owned()),
+                        duration: Some(15),
+                        filetype: "audio/mpeg".parse::<mime::Mime>().unwrap(),
                     },
                     TrackInfo {
                         id: TrackId::from("/home/savanni/Track 4.mp3".to_owned()),
@@ -223,6 +230,8 @@ pub mod factories {
                         name: Some("Track 4".to_owned()),
                         album: Some("Savanni's Demo".to_owned()),
                         artist: Some("Savanni".to_owned()),
+                        duration: Some(15),
+                        filetype: "audio/mpeg".parse::<mime::Mime>().unwrap(),
                     },
                     TrackInfo {
                         id: TrackId::from("/home/savanni/Track 5.mp3".to_owned()),
@@ -230,6 +239,8 @@ pub mod factories {
                         name: Some("Track 5".to_owned()),
                         album: Some("Savanni's Demo".to_owned()),
                         artist: Some("Savanni".to_owned()),
+                        duration: Some(15),
+                        filetype: "audio/mpeg".parse::<mime::Mime>().unwrap(),
                     },
                 ],
             }