diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 8784443a..94ac652b 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -168,6 +168,12 @@
         "services": "Services",
         "middleware": "Middleware"
     },
+    "navidrome": {
+        "user": "User",
+        "artist": "Artist",
+        "song": "Song",
+        "album": "Album"
+    },
     "npm": {
         "enabled": "Enabled",
         "disabled": "Disabled",
diff --git a/src/widgets/components.js b/src/widgets/components.js
index 33d09eac..28b5a92f 100644
--- a/src/widgets/components.js
+++ b/src/widgets/components.js
@@ -16,6 +16,7 @@ const components = {
   jellyseerr: dynamic(() => import("./jellyseerr/component")),
   lidarr: dynamic(() => import("./lidarr/component")),
   mastodon: dynamic(() => import("./mastodon/component")),
+  navidrome: dynamic(() => import("./navidrome/component")),
   npm: dynamic(() => import("./npm/component")),
   nzbget: dynamic(() => import("./nzbget/component")),
   ombi: dynamic(() => import("./ombi/component")),
diff --git a/src/widgets/navidrome/component.jsx b/src/widgets/navidrome/component.jsx
new file mode 100644
index 00000000..343eb0fe
--- /dev/null
+++ b/src/widgets/navidrome/component.jsx
@@ -0,0 +1,45 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: navidromeData, error: navidromeError } = useWidgetAPI(widget, "getNowPlaying");
+
+  if (navidromeError) {
+    return <Container error={t("widget.api_error")} />;
+  }
+
+  if (!navidromeData || Object.keys(navidromeData["subsonic-response"].nowPlaying).length === 0) {
+    return (
+      <Container service={service}>
+        <Block label="navidrome.user" />
+        <Block label="navidrome.artist" />
+        <Block label="navidrome.song" />
+        <Block label="navidrome.album" />
+      </Container>
+    );
+  }
+
+  const nowPlaying = Object.values(navidromeData["subsonic-response"].nowPlaying.entry);
+  const songList = [];
+
+  nowPlaying.forEach(userPlay => {
+      const playing = (
+        <Container service={service}>
+          <Block label="navidrome.user" value={userPlay.username} />
+          <Block label="navidrome.artist" value={userPlay.artist} />
+          <Block label="navidrome.song" value={userPlay.title} />
+          <Block label="navidrome.album" value={userPlay.album} />
+        </Container>
+      );
+      songList.unshift(playing);
+    });
+
+  return songList;
+}
diff --git a/src/widgets/navidrome/widget.js b/src/widgets/navidrome/widget.js
new file mode 100644
index 00000000..9b861435
--- /dev/null
+++ b/src/widgets/navidrome/widget.js
@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/rest/{endpoint}?u={user}&t={token}&s={salt}&v={version}&c={client}&f=json",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "getNowPlaying": {
+      endpoint: "getNowPlaying",
+    },
+  },
+};
+
+export default widget;
diff --git a/src/widgets/widgets.js b/src/widgets/widgets.js
index 7bad4013..aaf0a025 100644
--- a/src/widgets/widgets.js
+++ b/src/widgets/widgets.js
@@ -11,6 +11,7 @@ import jackett from "./jackett/widget";
 import jellyseerr from "./jellyseerr/widget";
 import lidarr from "./lidarr/widget";
 import mastodon from "./mastodon/widget";
+import navidrome from "./navidrome/widget";
 import npm from "./npm/widget";
 import nzbget from "./nzbget/widget";
 import ombi from "./ombi/widget";
@@ -51,6 +52,7 @@ const widgets = {
   jellyseerr,
   lidarr,
   mastodon,
+  navidrome,
   npm,
   nzbget,
   ombi,