diff --git a/web/default/public/locales/en/translation.json b/web/default/public/locales/en/translation.json
index b65cff84..b11e66c7 100644
--- a/web/default/public/locales/en/translation.json
+++ b/web/default/public/locales/en/translation.json
@@ -330,14 +330,13 @@
         "cancel": "Cancel"
       }
     },
-    "messages": {
-      "update_success": "User information updated successfully!"
-    },
     "add": {
       "title": "Create New User Account"
     },
     "messages": {
-      "create_success": "User account created successfully!"
+      "update_success": "User information updated successfully!",
+      "create_success": "User account created successfully!",
+      "operation_success": "Operation completed successfully!"
     },
     "search": "Search users...",
     "table": {
@@ -379,9 +378,6 @@
       "edit": "Edit",
       "promote": "Promote",
       "demote": "Demote"
-    },
-    "messages": {
-      "operation_success": "Operation completed successfully!"
     }
   }
 }
diff --git a/web/default/public/locales/zh/translation.json b/web/default/public/locales/zh/translation.json
index c21f9507..9fc0736c 100644
--- a/web/default/public/locales/zh/translation.json
+++ b/web/default/public/locales/zh/translation.json
@@ -330,14 +330,13 @@
         "cancel": "取消"
       }
     },
-    "messages": {
-      "update_success": "用户信息更新成功！"
-    },
     "add": {
       "title": "创建新用户账户"
     },
     "messages": {
-      "create_success": "用户账户创建成功！"
+      "update_success": "用户信息更新成功！",
+      "create_success": "用户账户创建成功！",
+      "operation_success": "操作成功完成！"
     },
     "search": "搜索用户...",
     "table": {
@@ -379,9 +378,6 @@
       "edit": "编辑",
       "promote": "提升",
       "demote": "降级"
-    },
-    "messages": {
-      "operation_success": "操作成功完成！"
     }
   }
 }
diff --git a/web/default/src/pages/User/AddUser.js b/web/default/src/pages/User/AddUser.js
index c261ab4c..c072b794 100644
--- a/web/default/src/pages/User/AddUser.js
+++ b/web/default/src/pages/User/AddUser.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { API, showError, showSuccess } from '../../helpers';
 
 const AddUser = () => {
@@ -30,49 +30,51 @@ const AddUser = () => {
   };
 
   return (
-    <>
-      <Segment>
-        <Header as='h3'>{t('user.add.title')}</Header>
-        <Form autoComplete='off'>
-          <Form.Field>
-            <Form.Input
-              label={t('user.edit.username')}
-              name='username'
-              placeholder={t('user.edit.username_placeholder')}
-              onChange={handleInputChange}
-              value={username}
-              autoComplete='off'
-              required
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={t('user.edit.display_name')}
-              name='display_name'
-              placeholder={t('user.edit.display_name_placeholder')}
-              onChange={handleInputChange}
-              value={display_name}
-              autoComplete='off'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={t('user.edit.password')}
-              name='password'
-              type={'password'}
-              placeholder={t('user.edit.password_placeholder')}
-              onChange={handleInputChange}
-              value={password}
-              autoComplete='off'
-              required
-            />
-          </Form.Field>
-          <Button positive type={'submit'} onClick={submit}>
-            {t('user.edit.buttons.submit')}
-          </Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>{t('user.add.title')}</Card.Header>
+          <Form autoComplete='off'>
+            <Form.Field>
+              <Form.Input
+                label={t('user.edit.username')}
+                name='username'
+                placeholder={t('user.edit.username_placeholder')}
+                onChange={handleInputChange}
+                value={username}
+                autoComplete='off'
+                required
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label={t('user.edit.display_name')}
+                name='display_name'
+                placeholder={t('user.edit.display_name_placeholder')}
+                onChange={handleInputChange}
+                value={display_name}
+                autoComplete='off'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label={t('user.edit.password')}
+                name='password'
+                type='password'
+                placeholder={t('user.edit.password_placeholder')}
+                onChange={handleInputChange}
+                value={password}
+                autoComplete='off'
+                required
+              />
+            </Form.Field>
+            <Button positive type='submit' onClick={submit}>
+              {t('user.edit.buttons.submit')}
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };