diff --git a/app/components/Switch.tsx b/app/components/Switch.tsx
index d2998a902..8dffea9dd 100644
--- a/app/components/Switch.tsx
+++ b/app/components/Switch.tsx
@@ -6,19 +6,28 @@ import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  /** Width of the switch. Defaults to 32. */
   width?: number;
+  /** Height of the switch. Defaults to 18 */
   height?: number;
+  /** An optional label for the switch */
   label?: string;
-  name?: string;
+  /** Whether the label should be positioned on left or right. Defaults to right */
+  labelPosition?: "left" | "right";
+  /** An optional note to display below the switch */
   note?: React.ReactNode;
+  /** Name of the input */
+  name?: string;
+  /** Whether the switch is checked */
   checked?: boolean;
+  /** Whether the switch is disabled */
   disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
 }
 
 function Switch({
   width = 32,
   height = 18,
+  labelPosition = "left",
   label,
   disabled,
   className,
@@ -45,7 +54,12 @@ function Switch({
   if (label) {
     return (
       <Wrapper>
-        <Label disabled={disabled} htmlFor={props.id} className={className}>
+        <Label
+          disabled={disabled}
+          htmlFor={props.id}
+          className={className}
+          $labelPosition={labelPosition}
+        >
           {component}
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
@@ -68,12 +82,20 @@ const Wrapper = styled.div`
 
 const InlineLabelText = styled(LabelText)`
   padding-bottom: 0;
+  width: 100%;
 `;
 
-const Label = styled.label<{ disabled?: boolean }>`
+const Label = styled.label<{
+  disabled?: boolean;
+  $labelPosition: "left" | "right";
+}>`
   display: flex;
   align-items: center;
   user-select: none;
+  gap: 8px;
+
+  ${(props) =>
+    props.$labelPosition === "left" ? `flex-direction: row-reverse;` : ""}
   ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 
@@ -83,10 +105,6 @@ const Input = styled.label<{ width: number; height: number }>`
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
   flex-shrink: 0;
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
 `;
 
 const Slider = styled.span<{ width: number; height: number }>`
diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx
index e52d59fb1..42a3f0059 100644
--- a/app/menus/DocumentMenu.tsx
+++ b/app/menus/DocumentMenu.tsx
@@ -306,41 +306,45 @@ function DocumentMenu({
         {(showDisplayOptions || showToggleEmbeds) && (
           <>
             <Separator />
-            {showToggleEmbeds && (
-              <Style>
-                <ToggleMenuItem
-                  width={26}
-                  height={14}
-                  label={t("Enable embeds")}
-                  checked={!document.embedsDisabled}
-                  onChange={
-                    document.embedsDisabled
-                      ? document.enableEmbeds
-                      : document.disableEmbeds
-                  }
-                />
-              </Style>
-            )}
-            {showDisplayOptions && !isMobile && can.update && (
-              <Style>
-                <ToggleMenuItem
-                  width={26}
-                  height={14}
-                  label={t("Full width")}
-                  checked={document.fullWidth}
-                  onChange={(ev) => {
-                    const fullWidth = ev.currentTarget.checked;
-                    user.setPreference(
-                      UserPreference.FullWidthDocuments,
-                      fullWidth
-                    );
-                    void user.save();
-                    document.fullWidth = fullWidth;
-                    void document.save();
-                  }}
-                />
-              </Style>
-            )}
+            <DisplayOptions>
+              {showToggleEmbeds && (
+                <Style>
+                  <ToggleMenuItem
+                    width={26}
+                    height={14}
+                    label={t("Enable embeds")}
+                    labelPosition="left"
+                    checked={!document.embedsDisabled}
+                    onChange={
+                      document.embedsDisabled
+                        ? document.enableEmbeds
+                        : document.disableEmbeds
+                    }
+                  />
+                </Style>
+              )}
+              {showDisplayOptions && !isMobile && can.update && (
+                <Style>
+                  <ToggleMenuItem
+                    width={26}
+                    height={14}
+                    label={t("Full width")}
+                    labelPosition="left"
+                    checked={document.fullWidth}
+                    onChange={(ev) => {
+                      const fullWidth = ev.currentTarget.checked;
+                      user.setPreference(
+                        UserPreference.FullWidthDocuments,
+                        fullWidth
+                      );
+                      void user.save();
+                      document.fullWidth = fullWidth;
+                      void document.save();
+                    }}
+                  />
+                </Style>
+              )}
+            </DisplayOptions>
           </>
         )}
       </ContextMenu>
@@ -355,6 +359,10 @@ const ToggleMenuItem = styled(Switch)`
   }
 `;
 
+const DisplayOptions = styled.div`
+  padding: 8px 0 0;
+`;
+
 const Style = styled.div`
   padding: 12px;