diff --git a/backend/routes/api.js b/backend/routes/api.js
index d2f5270..3526802 100644
--- a/backend/routes/api.js
+++ b/backend/routes/api.js
@@ -312,6 +312,45 @@ router.post("/setconfig", async (req, res) => {
     console.log(error);
   }
 });
+
+router.post("/setExternalUrl", async (req, res) => {
+  try {
+    const { ExternalUrl } = req.body;
+
+    if (ExternalUrl === undefined) {
+      res.status(400);
+      res.send("ExternalUrl is required for configuration");
+      return;
+    }
+
+    const config = await new configClass().getConfig();
+    const validation = await API.validateSettings(ExternalUrl, config.JF_API_KEY);
+    if (validation.isValid === false) {
+      res.status(validation.status);
+      res.send(validation);
+      return;
+    }
+
+    try {
+      const settings = config.settings || {};
+      settings.EXTERNAL_URL = ExternalUrl;
+
+      const query = 'UPDATE app_config SET settings=$1 where "ID"=1';
+
+      await db.query(query, [settings]);
+      config.settings = settings;
+      res.send(config);
+    } catch (error) {
+      res.status(503);
+      res.send({ error: "Error: " + error });
+    }
+  } catch (error) {
+    console.log(error);
+    res.status(503);
+    res.send({ error: "Error: " + error });
+  }
+});
+
 router.post("/setPreferredAdmin", async (req, res) => {
   try {
     const { userid, username } = req.body;
diff --git a/public/locales/en-UK/translation.json b/public/locales/en-UK/translation.json
index 131c2f8..e7b5bf6 100644
--- a/public/locales/en-UK/translation.json
+++ b/public/locales/en-UK/translation.json
@@ -177,6 +177,7 @@
     "SIZE": "Size",
     "JELLYFIN_URL": "Jellyfin URL",
     "EMBY_URL": "Emby URL",
+    "EXTERNAL_URL": "External URL",
     "API_KEY": "API Key",
     "API_KEYS": "API Keys",
     "KEY_NAME": "Key Name",
diff --git a/public/locales/fr-FR/translation.json b/public/locales/fr-FR/translation.json
index 8216983..b93c71d 100644
--- a/public/locales/fr-FR/translation.json
+++ b/public/locales/fr-FR/translation.json
@@ -177,6 +177,7 @@
     "SIZE": "Taille",
     "JELLYFIN_URL": "URL du serveur Jellyfin",
     "EMBY_URL": "URL du serveur Emby",
+    "EXTERNAL_URL": "External URL",
     "API_KEY": "Clé API",
     "API_KEYS": "Clés API",
     "KEY_NAME": "Nom de la clé",
diff --git a/public/locales/zh-CN/translation.json b/public/locales/zh-CN/translation.json
index f4cee71..cb1f548 100644
--- a/public/locales/zh-CN/translation.json
+++ b/public/locales/zh-CN/translation.json
@@ -177,6 +177,7 @@
     "SIZE": "大小",
     "JELLYFIN_URL": "Jellyfin URL",
     "EMBY_URL": "Emby URL",
+    "EXTERNAL_URL": "External URL",
     "API_KEY": "API 密钥",
     "API_KEYS": "API 密钥",
     "KEY_NAME": "密钥名称",
diff --git a/src/pages/components/item-info.jsx b/src/pages/components/item-info.jsx
index d88f229..cd0bfd5 100644
--- a/src/pages/components/item-info.jsx
+++ b/src/pages/components/item-info.jsx
@@ -257,7 +257,7 @@ function ItemInfo() {
                   <Link
                     className="px-2"
                     to={
-                      config.hostUrl +
+                     (config.settings?.EXTERNAL_URL ?? config.hostUrl) +
                       `/web/index.html#!/${config.IS_JELLYFIN ? "details" : "item"}?id=` +
                       (data.EpisodeId || data.Id) +
                       (config.settings.ServerID ? "&serverId=" + config.settings.ServerID : "")
diff --git a/src/pages/components/item-info/more-items.jsx b/src/pages/components/item-info/more-items.jsx
index 13408f2..e7ce26a 100644
--- a/src/pages/components/item-info/more-items.jsx
+++ b/src/pages/components/item-info/more-items.jsx
@@ -71,7 +71,7 @@ function MoreItems(props) {
         <div className="last-played-container">
         
          {data.sort((a,b) => a.IndexNumber-b.IndexNumber).map((item) => (
-                     <MoreItemCards data={item} base_url={config.hostUrl} key={item.Id}/>
+                     <MoreItemCards data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} key={item.Id}/>
           ))}
 
         </div>
diff --git a/src/pages/components/library/last-watched.jsx b/src/pages/components/library/last-watched.jsx
index b0b9d7b..657e983 100644
--- a/src/pages/components/library/last-watched.jsx
+++ b/src/pages/components/library/last-watched.jsx
@@ -62,7 +62,7 @@ function LibraryLastWatched(props) {
         <h1 className="my-3"><Trans i18nKey="LAST_WATCHED"/></h1>
         <div className="last-played-container">
         {data.map((item) => (
-                    <LastWatchedCard data={item} base_url={config.hostUrl} key={item.Id+item.SeasonNumber+item.EpisodeNumber}/>
+                    <LastWatchedCard data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} key={item.Id+item.SeasonNumber+item.EpisodeNumber}/>
           ))}
 
         </div>
diff --git a/src/pages/components/library/library-items.jsx b/src/pages/components/library/library-items.jsx
index d0dd8ea..04e420b 100644
--- a/src/pages/components/library/library-items.jsx
+++ b/src/pages/components/library/library-items.jsx
@@ -212,7 +212,7 @@ function LibraryItems(props) {
             }
           })
           .map((item) => (
-            <MoreItemCards data={item} base_url={config.hostUrl} key={item.Id + item.SeasonNumber + item.EpisodeNumber} />
+            <MoreItemCards data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} key={item.Id + item.SeasonNumber + item.EpisodeNumber} />
           ))}
       </div>
     </div>
diff --git a/src/pages/components/settings/settingsConfig.jsx b/src/pages/components/settings/settingsConfig.jsx
index 0840574..56eb9b1 100644
--- a/src/pages/components/settings/settingsConfig.jsx
+++ b/src/pages/components/settings/settingsConfig.jsx
@@ -26,9 +26,12 @@ export default function SettingsConfig() {
   const [selectedLanguage, setSelectedLanguage] = useState(localStorage.getItem("i18nextLng") ?? "en-US");
   const [showKey, setKeyState] = useState(false);
   const [formValues, setFormValues] = useState({});
+  const [formValuesExternal, setFormValuesExternal] = useState({});
   const [isSubmitted, setisSubmitted] = useState("");
+  const [isSubmittedExternal, setisSubmittedExternal] = useState("");
   const [loadSate, setloadSate] = useState("Loading");
   const [submissionMessage, setsubmissionMessage] = useState("");
+  const [submissionMessageExternal, setsubmissionMessageExternal] = useState("");
   const token = localStorage.getItem("token");
   const [twelve_hr, set12hr] = useState(localStorage.getItem("12hr") === "true");
 
@@ -45,6 +48,7 @@ export default function SettingsConfig() {
     Config.getConfig()
       .then((config) => {
         setFormValues({ JF_HOST: config.hostUrl });
+        setFormValuesExternal({ ExternalUrl: config.settings?.EXTERNAL_URL });
         setConfig(config);
         setSelectedAdmin(config.settings?.preferred_admin);
         setloadSate("Loaded");
@@ -94,13 +98,42 @@ export default function SettingsConfig() {
         setisSubmitted("Failed");
         setsubmissionMessage(`Error Updating Configuration: ${errorMessage}`);
       });
-      Config.setConfig();
+    Config.setConfig();
+  }
+
+  async function handleFormSubmitExternal(event) {
+    event.preventDefault();
+
+    setisSubmittedExternal("");
+    axios
+      .post("/api/setExternalUrl/", formValuesExternal, {
+        headers: {
+          Authorization: `Bearer ${config.token}`,
+          "Content-Type": "application/json",
+        },
+      })
+      .then((response) => {
+        console.log("Config updated successfully:", response.data);
+        setisSubmittedExternal("Success");
+        setsubmissionMessageExternal("Successfully updated configuration");
+      })
+      .catch((error) => {
+        let errorMessage = error.response.data.errorMessage;
+        console.log("Error updating config:", errorMessage);
+        setisSubmittedExternal("Failed");
+        setsubmissionMessageExternal(`Error Updating Configuration: ${errorMessage}`);
+      });
+    Config.setConfig();
   }
 
   function handleFormChange(event) {
     setFormValues({ ...formValues, [event.target.name]: event.target.value });
   }
 
+  function handleFormChangeExternal(event) {
+    setFormValuesExternal({ ...formValuesExternal, [event.target.name]: event.target.value });
+  }
+
   function updateAdmin(event) {
     const username = event.target.textContent;
     const userid = event.target.getAttribute("value");
@@ -130,7 +163,7 @@ export default function SettingsConfig() {
         setisSubmitted("Failed");
         setsubmissionMessage("Error Updating Configuration: ", error);
       });
-      Config.setConfig();
+    Config.setConfig();
   }
 
   function updateLanguage(event) {
@@ -160,8 +193,11 @@ export default function SettingsConfig() {
       <Form onSubmit={handleFormSubmit} className="settings-form">
         <Form.Group as={Row} className="mb-3">
           <Form.Label column className="">
-            {config.settings?.IS_JELLYFIN ? <Trans i18nKey={"SETTINGS_PAGE.JELLYFIN_URL"} /> : <Trans i18nKey={"SETTINGS_PAGE.EMBY_URL"} /> }
-            
+            {config.settings?.IS_JELLYFIN ? (
+              <Trans i18nKey={"SETTINGS_PAGE.JELLYFIN_URL"} />
+            ) : (
+              <Trans i18nKey={"SETTINGS_PAGE.EMBY_URL"} />
+            )}
           </Form.Label>
           <Col sm="10">
             <Form.Control
@@ -208,6 +244,39 @@ export default function SettingsConfig() {
           </Button>
         </div>
       </Form>
+
+      <Form onSubmit={handleFormSubmitExternal} className="settings-form">
+        <Form.Group as={Row} className="mb-3">
+          <Form.Label column className="">
+            <Trans i18nKey={"SETTINGS_PAGE.EXTERNAL_URL"} />
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              id="ExternalUrl"
+              name="ExternalUrl"
+              value={formValuesExternal.ExternalUrl || ""}
+              onChange={handleFormChangeExternal}
+              placeholder="http://example.jellyfin.server"
+            />
+          </Col>
+        </Form.Group>
+
+        {isSubmittedExternal !== "" ? (
+          isSubmittedExternal === "Failed" ? (
+            <Alert variant="danger">{submissionMessageExternal}</Alert>
+          ) : (
+            <Alert variant="success">{submissionMessageExternal}</Alert>
+          )
+        ) : (
+          <></>
+        )}
+        <div className="d-flex flex-column flex-md-row justify-content-end align-items-md-center">
+          <Button variant="outline-success" type="submit">
+            <Trans i18nKey={"SETTINGS_PAGE.UPDATE"} />
+          </Button>
+        </div>
+      </Form>
+
       <Form className="settings-form">
         <Form.Group as={Row} className="mb-3">
           <Form.Label column className="">
diff --git a/src/pages/components/statCards/mp_movies.jsx b/src/pages/components/statCards/mp_movies.jsx
index 1da09ea..01bedea 100644
--- a/src/pages/components/statCards/mp_movies.jsx
+++ b/src/pages/components/statCards/mp_movies.jsx
@@ -76,7 +76,7 @@ function MPMovies(props) {
   }
 
   return (
-  <ItemStatComponent base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_MOVIES" />} units={<Trans i18nKey="USERS" />}/>
+  <ItemStatComponent base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_MOVIES" />} units={<Trans i18nKey="USERS" />}/>
   );
 }
 
diff --git a/src/pages/components/statCards/mp_music.jsx b/src/pages/components/statCards/mp_music.jsx
index d7fd589..25157ee 100644
--- a/src/pages/components/statCards/mp_music.jsx
+++ b/src/pages/components/statCards/mp_music.jsx
@@ -70,7 +70,7 @@ function MPMusic(props) {
 
 
   return (
-    <ItemStatComponent  base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_MUSIC" />} units={<Trans i18nKey="USERS" />} isAudio={true}/>
+    <ItemStatComponent  base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_MUSIC" />} units={<Trans i18nKey="USERS" />} isAudio={true}/>
   );
 }
 
diff --git a/src/pages/components/statCards/mp_series.jsx b/src/pages/components/statCards/mp_series.jsx
index ca00833..b83219f 100644
--- a/src/pages/components/statCards/mp_series.jsx
+++ b/src/pages/components/statCards/mp_series.jsx
@@ -67,7 +67,7 @@ function MPSeries(props) {
 
 
   return (
-    <ItemStatComponent  base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_SERIES" />} units={<Trans i18nKey="USERS" />}/>
+    <ItemStatComponent  base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_POPULAR_SERIES" />} units={<Trans i18nKey="USERS" />}/>
   );
 }
 
diff --git a/src/pages/components/statCards/mv_movies.jsx b/src/pages/components/statCards/mv_movies.jsx
index ddb3e8a..20207da 100644
--- a/src/pages/components/statCards/mv_movies.jsx
+++ b/src/pages/components/statCards/mv_movies.jsx
@@ -74,7 +74,7 @@ function MVMusic(props) {
 
 
   return (
-    <ItemStatComponent base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_VIEWED_MOVIES" />} units={<Trans i18nKey="UNITS.PLAYS" />}/>
+    <ItemStatComponent base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_VIEWED_MOVIES" />} units={<Trans i18nKey="UNITS.PLAYS" />}/>
   );
 }
 
diff --git a/src/pages/components/statCards/mv_music.jsx b/src/pages/components/statCards/mv_music.jsx
index 8033818..5ad2237 100644
--- a/src/pages/components/statCards/mv_music.jsx
+++ b/src/pages/components/statCards/mv_music.jsx
@@ -69,7 +69,7 @@ function MVMovies(props) {
 
 
   return (
-    <ItemStatComponent base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_LISTENED_MUSIC" />} units={<Trans i18nKey="UNITS.PLAYS" />} isAudio={true}/>
+    <ItemStatComponent base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_LISTENED_MUSIC" />} units={<Trans i18nKey="UNITS.PLAYS" />} isAudio={true}/>
   );
 }
 
diff --git a/src/pages/components/statCards/mv_series.jsx b/src/pages/components/statCards/mv_series.jsx
index 6a426f2..2ee2bc8 100644
--- a/src/pages/components/statCards/mv_series.jsx
+++ b/src/pages/components/statCards/mv_series.jsx
@@ -70,7 +70,7 @@ function MVSeries(props) {
 
 
   return (
-    <ItemStatComponent  base_url={config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_VIEWED_SERIES" />} units={<Trans i18nKey="UNITS.PLAYS" />}/>
+    <ItemStatComponent  base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} data={data} heading={<Trans i18nKey="STAT_CARDS.MOST_VIEWED_SERIES" />} units={<Trans i18nKey="UNITS.PLAYS" />}/>
   );
 }
 
diff --git a/src/pages/components/statCards/playback_method_stats.jsx b/src/pages/components/statCards/playback_method_stats.jsx
index 94c021c..c285213 100644
--- a/src/pages/components/statCards/playback_method_stats.jsx
+++ b/src/pages/components/statCards/playback_method_stats.jsx
@@ -77,7 +77,7 @@ function PlaybackMethodStats(props) {
 
   return (
     <ItemStatComponent
-      base_url={config.hostUrl}
+      base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl}
       data={data.map((stream) =>
         stream.Name == "DirectPlay" ? { ...stream, Name: translations.DirectPlay } : { ...stream, Name: translations.Transocde }
       )}
diff --git a/src/pages/components/user-info/lastplayed.jsx b/src/pages/components/user-info/lastplayed.jsx
index 0c4d553..c524c38 100644
--- a/src/pages/components/user-info/lastplayed.jsx
+++ b/src/pages/components/user-info/lastplayed.jsx
@@ -67,7 +67,7 @@ function LastPlayed(props) {
       <div className="last-played-container">
         {data.map((item, index) => (
           <ErrorBoundary key={item.Id + item.EpisodeNumber + index}>
-            <LastWatchedCard data={item} base_url={config.hostUrl} />
+            <LastWatchedCard data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} />
           </ErrorBoundary>
         ))}
       </div>
diff --git a/src/pages/libraries.jsx b/src/pages/libraries.jsx
index 819de7c..15e35af 100644
--- a/src/pages/libraries.jsx
+++ b/src/pages/libraries.jsx
@@ -107,7 +107,11 @@ function Libraries() {
             .sort((a, b) => a.Name - b.Name)
             .map((item) => (
               <ErrorBoundary key={item.Id}>
-                <LibraryCard data={item} metadata={metadata.find((data) => data.Id === item.Id)} base_url={config.hostUrl} />
+                <LibraryCard
+                  data={item}
+                  metadata={metadata.find((data) => data.Id === item.Id)}
+                  base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl}
+                />
               </ErrorBoundary>
             ))}
       </div>
diff --git a/src/pages/library_selector.jsx b/src/pages/library_selector.jsx
index 6d5f276..28944be 100644
--- a/src/pages/library_selector.jsx
+++ b/src/pages/library_selector.jsx
@@ -75,7 +75,7 @@ function LibrarySelector() {
         {data &&
           data.map((item) => (
             <ErrorBoundary key={item.Id}>
-              <SelectionCard data={item} base_url={config.hostUrl} />
+              <SelectionCard data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} />
             </ErrorBoundary>
           ))}
       </div>
diff --git a/src/pages/users.jsx b/src/pages/users.jsx
index c6ffc96..c17b8b5 100644
--- a/src/pages/users.jsx
+++ b/src/pages/users.jsx
@@ -454,7 +454,7 @@ function Users() {
           <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} rowCount={rowsPerPage} />
           <TableBody>
             {filteredData.map((row) => (
-              <Row key={row.UserId} data={row} updateTrackedState={updateTrackedState} hostUrl={config.hostUrl} />
+              <Row key={row.UserId} data={row} updateTrackedState={updateTrackedState} hostUrl={config.settings?.EXTERNAL_URL ?? config.hostUrl} />
             ))}
             {data.length === 0 ? (
               <tr>