diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.sass b/ui/src/components/Pages/SettingsPage/SettingsPage.sass
index 0626845a3..846289ff7 100644
--- a/ui/src/components/Pages/SettingsPage/SettingsPage.sass
+++ b/ui/src/components/Pages/SettingsPage/SettingsPage.sass
@@ -1,23 +1,28 @@
 @import "../../../variables.module"
 
+@mixin tab-container
+        max-width: 513px
+        margin: 0 auto
+
 .settings-page
-    max-width: 513px
+    background: #F7F9FC;
     display: flex;
     flex-direction: column;
     align-content: center;
-    justify-content: center;
+    /* justify-content: center; */
     margin: 0 auto;
+    height: 100vh;
     
-
-
     & .tabs-nav
         padding-top: 0px;
 
 
 
 .header-section
-    margin-bottom: 30px;
-    background: #F7F9FC;
+    
+
+    &__container
+        @include tab-container
    
 
     &__title
@@ -25,5 +30,10 @@
         color: $blue-gray
         font-weight: 600 
         margin-bottom: 60px;
-        margin-top: 20px;  
+        margin-top: 20px;
+
+.tab-content
+    padding-top: 30px;
+    &__container
+        @include tab-container
     
\ No newline at end of file
diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx
index e60aed9e8..b3618d192 100644
--- a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx
+++ b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx
@@ -13,19 +13,22 @@ const AdminSettings: React.FC<any> = ({color}) => {
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
     return (<>
         <div className="settings-page">
-        <div className="header-section">
-            <div className="header-section__title">Settings</div>
-            <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned classes={{root:"tabs-nav"}}/>
-        </div>
-        <div>
-        
-        {currentTab === TABS[0].tab && <React.Fragment>
-                <UserSettings/>
-            </React.Fragment>}
-        {currentTab === TABS[1].tab && <React.Fragment>
-            <WorkspaceSettings/>
-        </React.Fragment>}
-    </div>
+            <div className="header-section">
+                <div className="header-section__container">
+                    <div className="header-section__title">Settings</div>
+                    <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned classes={{root:"tabs-nav"}}/>
+                </div>
+            </div>
+            <div className="tab-content">
+                <div className="tab-content__container">
+                {currentTab === TABS[0].tab && <React.Fragment>
+                        <UserSettings/>
+                    </React.Fragment>}
+                {currentTab === TABS[1].tab && <React.Fragment>
+                    <WorkspaceSettings/>
+                </React.Fragment>}
+                </div>
+            </div>
     </div>
     </>
     )
diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx
index ab591be60..c9b583e72 100644
--- a/ui/src/components/UserSettings/UserSettings.tsx
+++ b/ui/src/components/UserSettings/UserSettings.tsx
@@ -38,7 +38,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
     const getUserList =         (async () => {
         try {
             let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
-                           {username:"aaaaaaa",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
+                           {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
             setUserRows(users)                                
         } catch (e) {
             console.error(e);