diff --git a/web/src/screens/settings/Account.tsx b/web/src/screens/settings/Account.tsx
index 1e72414..5a211ec 100644
--- a/web/src/screens/settings/Account.tsx
+++ b/web/src/screens/settings/Account.tsx
@@ -74,7 +74,7 @@ function Credentials() {
       description="The username and password can be changed either separately or simultaneously. Note that you will be logged out after changing credentials."
       noLeftPadding
     >
-      <div className="px-2 pb-6 bg-white dark:bg-gray-800">
+      <div className="px-2 pb-0 sm:pb-6 bg-white dark:bg-gray-800">
         <Formik
           initialValues={{
             username: username,
@@ -95,7 +95,7 @@ function Credentials() {
         >
           {({ values }) => (
             <Form>
-              <div className="grid grid-cols-2 gap-x-10">
+              <div className="flex flex-col sm:grid sm:grid-cols-2 gap-x-10 pt-2">
                 <div className={separatorClass}>
                   <TextField name="username" label="Current Username" autoComplete="username" disabled />
                 </div>