diff --git a/package-lock.json b/package-lock.json
index 7e81c52..0787df7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "feign-discord",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "feign-discord",
-      "version": "0.0.3",
+      "version": "0.0.4",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
         "@fortawesome/free-brands-svg-icons": "^6.7.2",
diff --git a/package.json b/package.json
index d1b1a27..6148780 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "feign-discord",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 9b63598..f38c698 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -20,7 +20,7 @@ function Header() {
         <Container>
           <Navbar.Brand href='#'>Feign-Discord CSS Generator</Navbar.Brand>
 
-          <Nav className="me-auto">
+          <Nav className="me-auto d-none d-xl-flex">
             <Nav.Link href="#features">{t('features.features')}</Nav.Link>
             <Nav.Link href="#settings">{t('settings.settings')}</Nav.Link>
             <Nav.Link href="#preview">{t('preview.preview')}</Nav.Link>
@@ -34,15 +34,14 @@ function Header() {
                 size="sm"
                 onChange={(e) => i18n.changeLanguage(e.target.value)}
                 value={i18n.resolvedLanguage}
-                className="me-3"
               >
                 {languages.map(({ key, nativeName }) => (<option key={key} value={key}>{nativeName}</option>))}
-
               </Form.Select>
-              <a className="nav-link me-3" href="https://www.youtube.com/@mogproject" target="_blank" rel="noreferrer">
+
+              <a className="nav-link d-none d-md-block ms-3 me-3" href="https://www.youtube.com/@mogproject" target="_blank" rel="noreferrer">
                 <FontAwesomeIcon icon={faYoutube} size="2x" />
               </a>
-              <a className="nav-link" href="https://github.com/mogproject/feign-discord-css-generator/" target="_blank" rel="noreferrer">
+              <a className="nav-link d-none d-md-block" href="https://github.com/mogproject/feign-discord-css-generator/" target="_blank" rel="noreferrer">
                 <FontAwesomeIcon icon={faGithub} size="2x" />
               </a>
             </Container>
diff --git a/src/components/buttons/AnimationSettingButtonGroup.tsx b/src/components/buttons/AnimationSettingButtonGroup.tsx
index 46a89f3..1580fcd 100644
--- a/src/components/buttons/AnimationSettingButtonGroup.tsx
+++ b/src/components/buttons/AnimationSettingButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonGroup, Form, InputGroup } from "react-bootstrap";
+import { ButtonGroup, Col, Form, InputGroup, Row } from "react-bootstrap";
 import { AnimationSettings } from "../../models/ViewSettings";
 import { ColorPicker } from "./ColorPicker";
 import { useTranslation } from "react-i18next";
@@ -15,7 +15,7 @@ export function AnimationSettingButtonGroup(
   const tt = (k: string) => { return t(k, { keyPrefix: '' }) };
 
   const jsxJump = (
-    <ButtonGroup className="me-5">
+    <ButtonGroup>
       <Form.Control
         type="checkbox"
         id={`${prefix}-jump`}
@@ -38,16 +38,15 @@ export function AnimationSettingButtonGroup(
           id={`${prefix}-flash`}
           className="btn-check"
           autoComplete="off"
-          style={{ width: "160px" }}
           checked={setting.flash}
           onChange={() => handleChange({ ...setting, flash: !setting.flash })}
         />
-        <label className="btn btn-outline-primary" htmlFor={`${prefix}-flash`} style={{ minWidth: "96px" }}>
+        <label className="btn btn-outline-primary" htmlFor={`${prefix}-flash`} style={{ minWidth: "80px" }}>
           {t('flash')}
         </label>
       </ButtonGroup>
 
-      <InputGroup className="me-5">
+      <InputGroup>
         <InputGroup.Text>{tt('color')}</InputGroup.Text>
         {ColorPicker(t('flash_color'), setting.flashColor, (color) => handleChange({ ...setting, flashColor: color }))}
       </InputGroup>
@@ -65,7 +64,7 @@ export function AnimationSettingButtonGroup(
           checked={setting.outline}
           onChange={() => handleChange({ ...setting, outline: !setting.outline })}
         />
-        <label className="btn btn-outline-primary" htmlFor={`${prefix}-outline`} style={{ minWidth: "96px" }}>
+        <label className="btn btn-outline-primary" htmlFor={`${prefix}-outline`} style={{ minWidth: "80px" }}>
           {t('outline')}
         </label>
       </ButtonGroup>
@@ -77,10 +76,10 @@ export function AnimationSettingButtonGroup(
   );
 
   return (
-    <div className="d-flex">
-      {jsxJump}
-      {jsxFlash}
-      {showOutline ? jsxOutline : ""}
-    </div>
+    <Row>
+      <Col className="col-5 col-md-5 mb-1 col-lg-3">{jsxJump}</Col>
+      <Col className={`col-7 col-md-7 ${showOutline ? 'mb-1 ' : ''}col-lg-4 col-xl-4 px-lg-0`}>{jsxFlash}</Col>
+      <Col className="col-7 col-md-6 col-lg-4 col-lg-4 px-lg-0">{showOutline ? jsxOutline : ""}</Col>
+    </Row>
   );
 }
diff --git a/src/components/sections/DiscordUsers.tsx b/src/components/sections/DiscordUsers.tsx
index 551c93b..ff8e70b 100644
--- a/src/components/sections/DiscordUsers.tsx
+++ b/src/components/sections/DiscordUsers.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faPen, faPenToSquare, faTractor, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { Container, Row, Col, InputGroup, Form, Button, Modal } from "react-bootstrap";
 import { DiscordUser, ConfContext } from "../../models/Context";
 import { useTranslation } from "react-i18next";
@@ -92,6 +92,128 @@ export function DiscordUsers() {
 
   function DiscordUserRow(user: DiscordUser, index: number) {
     const isEditing = discordUserEditing.index < discordUsers.length;
+    const buttonInterval = 'me-1'
+
+    function EditButton() {
+      return (<Button size="sm" variant="secondary" className={`${buttonInterval} ${isEditing ? "invisible" : "visible"}`}
+        title={tt('edit')}
+        onClick={() => startEdit(index)}>
+        <span className="d-none d-lg-block" style={{ minWidth: '70px' }}>{tt('edit')}</span>
+        <span className="d-lg-none"><FontAwesomeIcon icon={faPenToSquare} /></span>
+      </Button>);
+    }
+
+    function RemoveButton() {
+      return (<Button size="sm" variant="danger" className={`${buttonInterval} ${isEditing ? "invisible" : "visible"}`}
+        title={tt('remove')}
+        onClick={
+          () => {
+            setModalOpen(true);
+            setRemoveIndex(index);
+          }
+        }>
+        <span className="d-none d-lg-block" style={{ minWidth: '70px' }}>{tt('remove')}</span>
+        <span className="d-lg-none"><FontAwesomeIcon icon={faTrash} /></span>
+      </Button>);
+    }
+
+    function SaveButton(isValid: boolean) {
+      const title = isEditing ? tt('save') : tt('add');
+      return (<Button type="submit" size="sm" variant="primary" className={`${buttonInterval}`} disabled={!isValid}
+        title={title}>
+
+        <span className="d-none d-lg-block" style={{ minWidth: '70px' }}>{title}</span>
+        <span className="d-lg-none"><FontAwesomeIcon icon={faPen} /></span>
+      </Button>);
+    }
+
+    function CancelButton(isEditing: boolean) {
+      return (<Button size="sm" variant="secondary" className={`${buttonInterval} ${isEditing ? "visible" : "invisible"}`} onClick={cancelEdit}
+        title={tt('cancel')}>
+        <span className="d-none d-lg-block" style={{ minWidth: '70px' }}>{tt('cancel')}</span>
+        <span className="d-lg-none"><FontAwesomeIcon icon={faXmark} /></span>
+      </Button>);
+    }
+
+    function MoveDownButton() {
+      return (<Button
+        size="sm"
+        variant="secondary"
+        className={`${buttonInterval} ${isEditing || index === discordUsers.length - 1 ? "invisible" : "visible"}`}
+        onClick={() => moveDown(index)}
+      >
+        <FontAwesomeIcon icon={faArrowDown} />
+      </Button>);
+    }
+
+    function MoveUpButton() {
+      return (<Button
+        size="sm"
+        variant="secondary"
+        className={`${isEditing || index === 0 ? "invisible" : "visible"}`}
+        onClick={() => moveUp(index)}
+      >
+        <FontAwesomeIcon icon={faArrowUp} />
+      </Button>);
+    }
+
+    function NameInput(disabled: boolean, isNameEmpty: boolean, isNameValid: boolean, feedback: string) {
+      if (disabled) {
+        return (<InputGroup size="sm">
+          <InputGroup.Text id={`discord-user-${index}`}>{tt('name')}</InputGroup.Text>
+          <Form.Control
+            area-label={`discord-user-${index}`}
+            area-aria-describedby={`discord-user-${index}`}
+            disabled={true}
+            value={user.name}
+          />
+        </InputGroup>);
+      } else {
+        return (<InputGroup size="sm" hasValidation>
+          <InputGroup.Text id={`discord-user-edit-${index}`}>{tt('name')}</InputGroup.Text>
+          <Form.Control
+            area-label={`discord-user-edit-label-${index}`}
+            area-aria-describedby={`discord-user-edit-${index}`}
+            required={isEditing}
+            placeholder={t('name_placeholder')}
+            value={discordUserEditing.name}
+            isValid={!isNameEmpty && isNameValid}
+            isInvalid={!isNameEmpty && !isNameValid}
+            onChange={(e) => updateDiscordUserEditing(index, e.target.value, discordUserEditing.id)}
+          />
+          <Form.Control.Feedback type="invalid" tooltip={true}>{feedback}</Form.Control.Feedback>
+        </InputGroup>);
+      }
+    }
+
+    function IdInput(disabled: boolean, isIdEmpty: boolean, isIdValid: boolean, feedback: string) {
+      if (disabled) {
+        return (<InputGroup size="sm">
+          <InputGroup.Text id={`discord-id-${index}`}>ID</InputGroup.Text>
+          <Form.Control
+            area-label={`discord-id-label-${index}`}
+            area-aria-describedby={`discord-id-${index}`}
+            disabled={true}
+            value={user.id}
+          />
+        </InputGroup>);
+      } else {
+        return (<InputGroup size="sm" hasValidation>
+          <InputGroup.Text id={`discord-id-edit-${index}`}>ID</InputGroup.Text>
+          <Form.Control
+            area-label={`discord-id-edit-label-${index}`}
+            area-aria-describedby={`discord-id-edit-${index}`}
+            required={isEditing}
+            placeholder={t('id_placeholder')}
+            value={discordUserEditing.id}
+            isValid={!isIdEmpty && isIdValid}
+            isInvalid={!isIdEmpty && !isIdValid}
+            onChange={(e) => updateDiscordUserEditing(index, discordUserEditing.name, e.target.value)}
+          />
+          <Form.Control.Feedback type="invalid" tooltip={true}>{feedback}</Form.Control.Feedback>
+        </InputGroup>);
+      }
+    }
 
     if (index === discordUserEditing.index) {
       const nameTrimmed = discordUserEditing.name.trim();
@@ -109,47 +231,15 @@ export function DiscordUsers() {
       return (
         <Form key={`discord-${index}`} onSubmit={handleSubmit}>
           <Row className="mb-1">
-            <Col className="col-md-3">
-              <InputGroup size="sm" hasValidation>
-                <InputGroup.Text id={`discord-user-edit-${index}`}>{tt('name')}</InputGroup.Text>
-                <Form.Control
-                  area-label={`discord-user-edit-label-${index}`}
-                  area-aria-describedby={`discord-user-edit-${index}`}
-                  required={isEditing}
-                  placeholder={t('name_placeholder')}
-                  value={discordUserEditing.name}
-                  isValid={!isNameEmpty && isNameValid}
-                  isInvalid={!isNameEmpty && !isNameValid}
-                  onChange={(e) => updateDiscordUserEditing(index, e.target.value, discordUserEditing.id)}
-                />
-                <Form.Control.Feedback type="invalid" tooltip={true}>{nameFeedback}</Form.Control.Feedback>
-              </InputGroup>
+            <Col className="col-4 col-lg-3 pe-0">
+              {NameInput(false, isNameEmpty, isNameValid, nameFeedback)}
             </Col>
-            <Col className='col-md-3'>
-              <InputGroup size="sm" hasValidation>
-                <InputGroup.Text id={`discord-id-edit-${index}`}>ID</InputGroup.Text>
-                <Form.Control
-                  area-label={`discord-id-edit-label-${index}`}
-                  area-aria-describedby={`discord-id-edit-${index}`}
-                  required={isEditing}
-                  placeholder={t('id_placeholder')}
-                  value={discordUserEditing.id}
-                  isValid={!isIdEmpty && isIdValid}
-                  isInvalid={!isIdEmpty && !isIdValid}
-                  onChange={(e) => updateDiscordUserEditing(index, discordUserEditing.name, e.target.value)}
-                />
-                <Form.Control.Feedback type="invalid" tooltip={true}>{idFeedback}</Form.Control.Feedback>
-              </InputGroup>
+            <Col className="col-3 col-sm-4 col-md-5 col-lg-3 pe-0">
+              {IdInput(false, isIdEmpty, isIdValid, idFeedback)}
             </Col>
-            <Col className="col-md-3">
-              <Button type="submit" size="sm" variant="primary" className="me-3" disabled={!isNameValid || !isIdValid}
-                style={{ minWidth: '70px' }}>
-                {`${isEditing ? tt('save') : tt('add')}`}
-              </Button>
-              <Button size="sm" variant="secondary" className={`${isEditing ? "visible" : "invisible"}`} onClick={cancelEdit}
-                style={{ minWidth: '70px' }}>
-                {tt('cancel')}
-              </Button>
+            <Col className="col-5 col-sm-4 col-md-3 col-lg-5 pe-0">
+              {SaveButton(isNameValid && isIdValid)}
+              {CancelButton(isEditing)}
             </Col>
           </Row>
         </Form>
@@ -157,62 +247,19 @@ export function DiscordUsers() {
     } else {
       return (
         <Row key={`discord-${index}`} className="mb-1">
-          <Col className="col-md-3">
-            <InputGroup size="sm">
-              <InputGroup.Text id={`discord-user-${index}`}>{tt('name')}</InputGroup.Text>
-              <Form.Control
-                area-label={`discord-user-${index}`}
-                area-aria-describedby={`discord-user-${index}`}
-                disabled={true}
-                value={user.name}
-              />
-            </InputGroup>
-          </Col>
-          <Col className="col-md-3">
-            <InputGroup size="sm">
-              <InputGroup.Text id={`discord-id-${index}`}>ID</InputGroup.Text>
-              <Form.Control
-                area-label={`discord-id-label-${index}`}
-                area-aria-describedby={`discord-id-${index}`}
-                disabled={true}
-                value={user.id}
-              />
-            </InputGroup>
+          <Col className="col-4 col-lg-3 pe-0">
+            {NameInput(true, false, false, '')}
           </Col>
-          <Col className="col-md-3">
-            <Button size="sm" variant="secondary" className={`me-3 ${isEditing ? "invisible" : "visible"}`}
-              style={{ minWidth: '70px' }}
-              onClick={() => startEdit(index)}>
-              {tt('edit')}
-            </Button>
-            <Button size="sm" variant="danger" className={`${isEditing ? "invisible" : "visible"}`}
-              style={{ minWidth: '70px' }}
-              onClick={
-                () => {
-                  setModalOpen(true);
-                  setRemoveIndex(index);
-                }
-              }>
-              {tt('remove')}
-            </Button>
+          <Col className="col-3 col-sm-4 col-md-5 col-lg-3 pe-0">
+            {IdInput(true, false, false, '')}
           </Col>
-          <Col className="col-md-2">
-            <Button
-              size="sm"
-              variant="secondary"
-              className={`me-3 ${isEditing || index === discordUsers.length - 1 ? "invisible" : "visible"}`}
-              onClick={() => moveDown(index)}
-            >
-              <FontAwesomeIcon icon={faArrowDown} />
-            </Button>
-            <Button
-              size="sm"
-              variant="secondary"
-              className={`${isEditing || index === 0 ? "invisible" : "visible"}`}
-              onClick={() => moveUp(index)}
-            >
-              <FontAwesomeIcon icon={faArrowUp} />
-            </Button>
+          <Col className="col-5 col-sm-4 col-md-3 col-lg-5 pe-0">
+            <EditButton />
+            <span className="d-none d-lg-inline-block me-2" />
+            <RemoveButton />
+            <span className="d-none d-lg-inline-block me-4" />
+            <MoveDownButton />
+            <MoveUpButton />
           </Col>
         </Row>
       );
diff --git a/src/components/sections/FeignPlayers.tsx b/src/components/sections/FeignPlayers.tsx
index e5af5a6..c25b493 100644
--- a/src/components/sections/FeignPlayers.tsx
+++ b/src/components/sections/FeignPlayers.tsx
@@ -26,8 +26,8 @@ export function FeignPlayers() {
     const t = translate as ((s: string) => string);
     return (
       <Col key={`player-${color}`} className="mb-3">
-        <Row className="justify-content-md-center mb-2">{t(FEI_COLORS[color])}</Row>
-        <Row className="justify-content-md-center mb-2">
+        <Row className="justify-content-center mb-2">{t(FEI_COLORS[color])}</Row>
+        <Row className="justify-content-center mb-2">
           <img src={`assets/img/${FEI_COLORS[color]}-small.png`} width="80px" style={{ maxWidth: "80px" }} alt=""></img>
         </Row>
         <Row className="justify-content-md-center" style={{ marginTop: "-45px" }}>
@@ -55,14 +55,15 @@ export function FeignPlayers() {
 
   return (
     <Container>
-      <Row>
+      {/* large screen */}
+      <Row className="d-none d-md-flex">
         {Array(7)
           .fill(0)
           .map((_, i: number) => {
             return FeignPlayer(i);
           })}
       </Row>
-      <Row>
+      <Row className="d-none d-md-flex">
         {Array(6)
           .fill(0)
           .map((_, i: number) => {
@@ -70,6 +71,31 @@ export function FeignPlayers() {
           })}
         <Col></Col>
       </Row>
+
+      {/* small screen */}
+      <Row className="d-md-none">
+        {Array(5)
+          .fill(0)
+          .map((_, i: number) => {
+            return FeignPlayer(i);
+          })}
+      </Row>
+      <Row className="d-md-none">
+        {Array(5)
+          .fill(0)
+          .map((_, i: number) => {
+            return FeignPlayer(4 + i);
+          })}
+      </Row>
+      <Row className="d-md-none">
+        {Array(3)
+          .fill(0)
+          .map((_, i: number) => {
+            return FeignPlayer(8 + i);
+          })}
+        <Col></Col>
+        <Col></Col>
+      </Row>
     </Container>
   );
 }
diff --git a/src/components/sections/OBSSettings.tsx b/src/components/sections/OBSSettings.tsx
index 6e56eac..3dcd3f1 100644
--- a/src/components/sections/OBSSettings.tsx
+++ b/src/components/sections/OBSSettings.tsx
@@ -32,7 +32,7 @@ export function OBSSettings() {
     <Container className={`mb-4${isValid ? '' : ' d-none'}`}>
       <p className="mb-3">{t('description')}</p>
       <Row>
-        <Col className="col-md-5">
+        <Col className="d-none d-md-block col-md-5">
           <img width="100%" src="assets/img/obs.png" alt=""></img>
         </Col>
         <Col>
@@ -72,9 +72,10 @@ export function OBSSettings() {
             </Col>
           </Row>
 
-          <Row className="mb-4">
+          {/* large screen */}
+          <Row className="mb-4 d-none d-xl-block">
             <InputGroup>
-              <InputGroup.Text id="obs-css">{t('custom_css')}</InputGroup.Text>
+              <InputGroup.Text>{t('custom_css')}</InputGroup.Text>
               {CopyButton(() => content, t('copy_to_clipboard'))}
               <Button variant="outline-secondary" onClick={() => fileSaver.saveTextToFile(() => content, 'feign.css')}>
                 <FontAwesomeIcon icon={faDownload} />
@@ -82,6 +83,18 @@ export function OBSSettings() {
               </Button>
             </InputGroup>
           </Row>
+
+          {/* small screen */}
+          <Row className="mb-4 d-xl-none">
+            <InputGroup>
+              <InputGroup.Text>{t('custom_css')}</InputGroup.Text>
+              {CopyButton(() => content, tt('copy'))}
+              <Button variant="outline-secondary" onClick={() => fileSaver.saveTextToFile(() => content, 'feign.css')}>
+                <FontAwesomeIcon icon={faDownload} />
+                <span>&nbsp;{tt('save')}</span>
+              </Button>
+            </InputGroup>
+          </Row>
         </Col>
       </Row>
     </Container>
diff --git a/src/components/sections/SaveLoad.tsx b/src/components/sections/SaveLoad.tsx
index 33a6101..bc99ce1 100644
--- a/src/components/sections/SaveLoad.tsx
+++ b/src/components/sections/SaveLoad.tsx
@@ -83,7 +83,7 @@ function SaveLoad() {
         <Dropdown as={ButtonGroup} className="me-4">
           <Button variant="outline-secondary" onClick={() => fileSaver.saveTextToFile(
             () => settings2json({ channelURL: channelURL, discordUsers: discordUsers, feignPlayers: feignPlayers, viewSettings: viewSettings }, false), 'feign-discord.json'
-          )} style={{ minWidth: '200px' }}>
+          )} style={{ minWidth: '180px' }}>
             <FontAwesomeIcon icon={faDownload} />
             <span>&nbsp;{t('save_all')}</span>
           </Button>
@@ -102,7 +102,7 @@ function SaveLoad() {
         </Dropdown>
 
         <Dropdown as={ButtonGroup} className="me-1">
-          <Button variant='outline-secondary' style={{ minWidth: '200px' }}
+          <Button variant='outline-secondary' style={{ minWidth: '180px' }}
             onClick={() => fileLoader.loadTextFromFile((s) => loadSettingsFromFile(s, true, true), setLoadMessage, 'json')}>
             <FontAwesomeIcon icon={faUpload} />&nbsp;{t('load_all')}
           </Button>
diff --git a/src/components/sections/ViewSettingsPane.tsx b/src/components/sections/ViewSettingsPane.tsx
index 6ff6ecc..b56a782 100644
--- a/src/components/sections/ViewSettingsPane.tsx
+++ b/src/components/sections/ViewSettingsPane.tsx
@@ -51,14 +51,14 @@ export function ViewSettingsPane() {
             <Accordion.Header>{t('feign_characters')}</Accordion.Header>
             <Accordion.Body>
               <Row className="mb-2">
-                <Col className="col-md-2">{t('facing')}</Col>
-                <Col className="col-md-2">
+                <Col className="col-6 col-md-2 my-auto">{t('facing')}</Col>
+                <Col className="col-6 col-md-4 mb-2 mb-md-0">
                   {RadioButtonGroup([t('facing_left'), t('facing_right')], viewSettings.fei.mirror ? 0 : 1, (index: number) => {
                     updateFeiSettings({ ...viewSettings.fei, mirror: index === 0 });
                   })}
                 </Col>
-                <Col className="offset-md-3 col-md-2 text-end">{t('interval')}</Col>
-                <Col className="col-md-2">
+                <Col className="col-6 offset-md-1 col-md-3 text-md-end my-auto">{t('interval')}</Col>
+                <Col className="col-6 col-md-2">
                   <Form.Control
                     type="number"
                     value={viewSettings.fei.interval}
@@ -72,8 +72,8 @@ export function ViewSettingsPane() {
                 </Col>
               </Row>
               <Row>
-                <Col className="col-md-2">{t('speaking_behavior')}</Col>
-                <Col className="col-md-9">
+                <Col className="col-12 col-md-2 my-auto">{t('speaking_behavior')}</Col>
+                <Col className="col-12 col-md-9">
                   {AnimationSettingButtonGroup("fei-speaking", viewSettings.fei.speaking, false, (setting: AnimationSettings) =>
                     updateFeiSettings({ ...viewSettings.fei, speaking: setting })
                   )}
@@ -86,8 +86,8 @@ export function ViewSettingsPane() {
             <Accordion.Header>{t('discord_avatar')}</Accordion.Header>
             <Accordion.Body>
               <Row className="mb-2">
-                <Col className="col-md-2">{tt('show')}</Col>
-                <Col className="col-md-4">
+                <Col className="col-6 col-md-2 mb-2 mb-md-0">{tt('show')}</Col>
+                <Col className="col-6 col-md-3">
                   <Form.Check className="form-switch">
                     <Form.Check.Input
                       type="checkbox"
@@ -98,8 +98,8 @@ export function ViewSettingsPane() {
                   </Form.Check>
                 </Col>
 
-                <Col className="offset-md-1 col-md-2 text-end">{t('show_front')}</Col>
-                <Col className="col-md-2">
+                <Col className="col-6 offset-md-2 col-md-3 text-md-end">{t('show_front')}</Col>
+                <Col className="col-6 col-md-2">
                   <Form.Check className="form-switch">
                     <Form.Check.Input
                       type='checkbox'
@@ -112,9 +112,9 @@ export function ViewSettingsPane() {
               </Row>
 
               <Row className="mb-2">
-                <Col className="col-md-2">{t('shape')}</Col>
+                <Col className="col-12 col-md-2 my-auto">{t('shape')}</Col>
 
-                <Col className="col-md-4">
+                <Col className="col-12 col-md-5  mb-2 mb-md-0">
                   {RadioButtonGroup([t('circle'), t('rounded_rectangle'), t('rectangle')], viewSettings.avatar.shape.valueOf(), (index) => {
                     updateAvatarSettings({
                       ...viewSettings.avatar,
@@ -123,8 +123,8 @@ export function ViewSettingsPane() {
                   })}
                 </Col>
 
-                <Col className="offset-md-1 col-md-2 text-end">{t('vertical_offset')}</Col>
-                <Col className="col-md-2">
+                <Col className="col-md-3 text-md-end my-auto">{t('vertical_offset')}</Col>
+                <Col className="col-6 col-md-2">
                   <Form.Control
                     type="number"
                     value={viewSettings.avatar.offsetY}
@@ -139,8 +139,8 @@ export function ViewSettingsPane() {
               </Row>
 
               <Row>
-                <Col className="col-md-2">{t('speaking_behavior')}</Col>
-                <Col className="col-md-9">
+                <Col className="col-12 col-md-2 my-auto">{t('speaking_behavior')}</Col>
+                <Col className="col-12 col-md-9">
                   {AnimationSettingButtonGroup("avatar-speaking", viewSettings.avatar.speaking, true, (setting: AnimationSettings) =>
                     updateAvatarSettings({ ...viewSettings.avatar, speaking: setting })
                   )}
@@ -153,8 +153,8 @@ export function ViewSettingsPane() {
             <Accordion.Header>{t('username')}</Accordion.Header>
             <Accordion.Body>
               <Row className="mb-2">
-                <Col className="col-md-2">{tt('show')}</Col>
-                <Col className="col-md-4">
+                <Col className="col-6 col-md-2">{tt('show')}</Col>
+                <Col className="col-6 col-md-3 mb-2 mb-md-0">
                   <Form.Check className="form-switch">
                     <Form.Check.Input
                       type="checkbox"
@@ -164,11 +164,25 @@ export function ViewSettingsPane() {
                     />
                   </Form.Check>
                 </Col>
+
+                <Col className="col-6 col-md-5 text-md-end my-auto">{t('vertical_offset')}</Col>
+                <Col className="col-6 col-md-2">
+                  <Form.Control
+                    type="number"
+                    value={viewSettings.username.offsetY}
+                    min="-300"
+                    max="300"
+                    style={{ width: "80px" }}
+                    onChange={(e) => {
+                      updateUsernameSettings({ ...viewSettings.username, offsetY: parseInt(e.target.value) });
+                    }}
+                  />
+                </Col>
               </Row>
 
               <Row>
-                <Col className="col-md-2">{t('font')}</Col>
-                <Col className="col-md-5">
+                <Col className="col-6 col-md-2 my-auto">{t('font')}</Col>
+                <Col className="col-12 col-md-10 col-lg-6">
                   <InputGroup>
                     <InputGroup.Text>{t('size')}</InputGroup.Text>
                     <Form.Control
@@ -191,20 +205,6 @@ export function ViewSettingsPane() {
                     )}
                   </InputGroup>
                 </Col>
-
-                <Col className="col-md-2 text-end">{t('vertical_offset')}</Col>
-                <Col className="col-md-2">
-                  <Form.Control
-                    type="number"
-                    value={viewSettings.username.offsetY}
-                    min="-300"
-                    max="300"
-                    style={{ width: "80px" }}
-                    onChange={(e) => {
-                      updateUsernameSettings({ ...viewSettings.username, offsetY: parseInt(e.target.value) });
-                    }}
-                  />
-                </Col>
               </Row>
             </Accordion.Body>
           </Accordion.Item>