diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx
index 8ae2f58f..aa25ca7a 100644
--- a/src/components/layout/Modal.tsx
+++ b/src/components/layout/Modal.tsx
@@ -39,7 +39,7 @@ export function ModalCard(props: { className?: string; children?: ReactNode }) {
   return (
     <div
       className={[
-        "relative mx-2 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10",
+        "relative mx-2 w-[500px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10 sm:w-[500px] md:w-[500px] lg:w-[1000px]",
         props.className,
       ].join(" ")}
     >
diff --git a/src/views/SettingsModal.tsx b/src/views/SettingsModal.tsx
index b6ad9c19..b05ebe14 100644
--- a/src/views/SettingsModal.tsx
+++ b/src/views/SettingsModal.tsx
@@ -5,9 +5,9 @@ import { useSettings } from "@/state/settings";
 import { useTranslation } from "react-i18next";
 import { CaptionCue } from "@/video/components/actions/CaptionRendererAction";
 import { Slider } from "@/video/components/popouts/CaptionSettingsPopout";
-import { appLanguageOptions } from "@/setup/i18n";
 import { LangCode, captionLanguages } from "@/setup/iso6391";
 import { useMemo } from "react";
+import { appLanguageOptions } from "@/setup/i18n";
 
 export default function SettingsModal(props: {
   onClose: () => void;
@@ -15,6 +15,8 @@ export default function SettingsModal(props: {
 }) {
   const {
     captionSettings,
+    language,
+    setLanguage,
     setCaptionLanguage,
     setCaptionBackgroundColor,
     setCaptionColor,
@@ -34,106 +36,117 @@ export default function SettingsModal(props: {
   ).toFixed(0);
   return (
     <Modal show={props.show}>
-      <ModalCard className="max-w-[800px] bg-ash-300 text-white">
-        <div className="flex w-full flex-row justify-between">
-          <span className="text-xl font-bold">{t("settings.title")}</span>
-          <div onClick={() => props.onClose()} className="hover:cursor-pointer">
-            <Icon icon={Icons.X} />
-          </div>
-        </div>
-        <div className="flex justify-between gap-10 max-sm:flex-col">
-          <div className="flex flex-col justify-between">
-            <label className="text-md font-semibold">
-              {t("settings.language")}
-            </label>
-            <Dropdown
-              selectedItem={
-                appLanguageOptions.find((l) => l.id === i18n.language)!
-              }
-              setSelectedItem={(val) => {
-                i18n.changeLanguage(val.id);
-              }}
-              options={appLanguageOptions}
-            />
-          </div>
-          <div className="flex flex-col justify-between">
-            <label className="text-md font-semibold">
-              {t("settings.captionLanguage")}
-            </label>
-            <Dropdown
-              selectedItem={selectedCaptionLanguage}
-              setSelectedItem={(val) => {
-                setCaptionLanguage(val.id as LangCode);
-              }}
-              options={captionLanguages}
-            />
-          </div>
-        </div>
-        <div className="flex justify-between gap-10 rounded max-md:flex-col">
-          <div className="flex flex-col justify-between">
-            <Slider
-              label="Size"
-              min={14}
-              step={1}
-              max={60}
-              value={captionSettings.style.fontSize}
-              onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
-            />
-            <Slider
-              label={t("videoPlayer.popouts.captionPreferences.opacity")}
-              step={1}
-              min={0}
-              max={255}
-              valueDisplay={`${captionBackgroundOpacity}%`}
-              value={parseInt(
-                captionSettings.style.backgroundColor.substring(7, 9),
-                16
-              )}
-              onChange={(e) =>
-                setCaptionBackgroundColor(e.target.valueAsNumber)
-              }
-            />
-            <div className="flex flex-row justify-between">
-              <label className="font-bold" htmlFor="color">
-                {t("videoPlayer.popouts.captionPreferences.color")}
-              </label>
-              <div className="flex flex-row gap-2">
-                {colors.map((color) => (
-                  <div
-                    className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${
-                      color === captionSettings.style.color
-                        ? "bg-[#1C161B]"
-                        : ""
-                    }`}
-                    onClick={() => setCaptionColor(color)}
-                  >
-                    <div
-                      className="h-4 w-4 cursor-pointer appearance-none rounded-full"
-                      style={{
-                        backgroundColor: color,
-                      }}
-                    />
-                    <Icon
-                      className={[
-                        "absolute text-xs text-[#1C161B]",
-                        color === captionSettings.style.color ? "" : "hidden",
-                      ].join(" ")}
-                      icon={Icons.CHECKMARK}
-                    />
-                  </div>
-                ))}
-              </div>
+      <ModalCard className="bg-ash-300 text-white">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row justify-between">
+            <span className="text-xl font-bold">{t("settings.title")}</span>
+            <div
+              onClick={() => props.onClose()}
+              className="hover:cursor-pointer"
+            >
+              <Icon icon={Icons.X} />
             </div>
           </div>
-          <div className="flex aspect-video h-[200px] flex-col justify-end rounded bg-zinc-800">
-            {selectedCaptionLanguage.id !== "none" ? (
-              <div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]">
-                <CaptionCue
-                  scale={0.4}
-                  text={selectedCaptionLanguage.nativeName}
+          <div className="flex flex-col gap-10 lg:flex-row">
+            <div className="lg:w-1/2">
+              <div className="flex flex-col justify-between">
+                <label className="text-md font-semibold">
+                  {t("settings.language")}
+                </label>
+                <Dropdown
+                  selectedItem={
+                    appLanguageOptions.find((l) => l.id === language)!
+                  }
+                  setSelectedItem={(val) => {
+                    i18n.changeLanguage(val.id);
+                    setLanguage(val.id as LangCode);
+                  }}
+                  options={appLanguageOptions}
                 />
               </div>
-            ) : null}
+              <div className="flex flex-col justify-between">
+                <label className="text-md font-semibold">
+                  {t("settings.captionLanguage")}
+                </label>
+                <Dropdown
+                  selectedItem={selectedCaptionLanguage}
+                  setSelectedItem={(val) => {
+                    setCaptionLanguage(val.id as LangCode);
+                  }}
+                  options={captionLanguages}
+                />
+              </div>
+              <div className="flex flex-col justify-between">
+                <Slider
+                  label="Size"
+                  min={14}
+                  step={1}
+                  max={60}
+                  value={captionSettings.style.fontSize}
+                  onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
+                />
+                <Slider
+                  label={t("videoPlayer.popouts.captionPreferences.opacity")}
+                  step={1}
+                  min={0}
+                  max={255}
+                  valueDisplay={`${captionBackgroundOpacity}%`}
+                  value={parseInt(
+                    captionSettings.style.backgroundColor.substring(7, 9),
+                    16
+                  )}
+                  onChange={(e) =>
+                    setCaptionBackgroundColor(e.target.valueAsNumber)
+                  }
+                />
+                <div className="flex flex-row justify-between">
+                  <label className="font-bold" htmlFor="color">
+                    {t("videoPlayer.popouts.captionPreferences.color")}
+                  </label>
+                  <div className="flex flex-row gap-2">
+                    {colors.map((color) => (
+                      <div
+                        className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${
+                          color === captionSettings.style.color
+                            ? "bg-[#1C161B]"
+                            : ""
+                        }`}
+                        onClick={() => setCaptionColor(color)}
+                      >
+                        <div
+                          className="h-4 w-4 cursor-pointer appearance-none rounded-full"
+                          style={{
+                            backgroundColor: color,
+                          }}
+                        />
+                        <Icon
+                          className={[
+                            "absolute text-xs text-[#1C161B]",
+                            color === captionSettings.style.color
+                              ? ""
+                              : "hidden",
+                          ].join(" ")}
+                          icon={Icons.CHECKMARK}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div />
+            </div>
+            <div className="flex w-full flex-col justify-center">
+              <div className="flex aspect-video flex-col justify-end rounded bg-zinc-800">
+                {selectedCaptionLanguage.id !== "none" ? (
+                  <div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]">
+                    <CaptionCue
+                      scale={0.5}
+                      text={selectedCaptionLanguage.nativeName}
+                    />
+                  </div>
+                ) : null}
+              </div>
+            </div>
           </div>
         </div>
       </ModalCard>