diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx
index 51eb653d..f260339d 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UpdateAvatarAndNameBody } from '@/components/UpdateAvatarAndName';
 import {
   updateUserProfileNameAndAvatar,
@@ -95,30 +95,29 @@ export function AccountSettings({
 
   return (
     <div
-      className="space-y-6"
+      className="space-y-6 max-w-xl"
     >
       <Card>
         <CardHeader>
           <CardTitle>Account Settings</CardTitle>
           <CardDescription>Update your account settings here.</CardDescription>
         </CardHeader>
-        <CardContent>
-          <UpdateAvatarAndNameBody
-            onSubmit={(fullName: string) => mutate({ fullName, avatarUrl })}
-            onFileUpload={(file: File) => upload(file)}
-            userId={userProfile.id}
-            userEmail={userEmail}
-            isNewAvatarImageLoading={isNewAvatarImageLoading}
-            setIsNewAvatarImageLoading={setIsNewAvatarImageLoading}
-            isUploading={isUploading}
-            isLoading={isLoading ?? isUploading}
-            profileAvatarUrl={avatarUrl}
-            profileFullname={userProfile.full_name ?? undefined}
-          />
-        </CardContent>
+        <UpdateAvatarAndNameBody
+          onSubmit={(fullName: string) => mutate({ fullName, avatarUrl })}
+          onFileUpload={(file: File) => upload(file)}
+          userId={userProfile.id}
+          userEmail={userEmail}
+          profileUserName={userProfile.user_name ?? undefined}
+          isNewAvatarImageLoading={isNewAvatarImageLoading}
+          setIsNewAvatarImageLoading={setIsNewAvatarImageLoading}
+          isUploading={isUploading}
+          isLoading={isLoading ?? isUploading}
+          profileAvatarUrl={avatarUrl}
+          profileFullname={userProfile.full_name ?? undefined}
+        />
       </Card>
 
-      <Card className='w-full  max-w-5xl border-destructive/50 bg-destructive/5'>
+      <Card className='w-full border-destructive/50 bg-destructive/5'>
         <CardHeader>
           <CardTitle>Danger Zone</CardTitle>
           <CardDescription>
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx
index c3e0fab6..3063ce20 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { Button } from '@/components/ui/button';
+import { CardContent, CardFooter } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { updatePasswordAction } from '@/data/user/security';
 import { useSAToastMutation } from '@/hooks/useSAToastMutation';
-import { classNames } from '@/utils/classNames';
 import { useInput } from 'rooks';
 
 export const UpdatePassword = () => {
@@ -31,8 +31,8 @@ export const UpdatePassword = () => {
   );
 
   return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-2 w-1/3">
+    <>
+      <CardContent className="flex flex-col gap-2 w-full">
         <Label htmlFor="email" className="text-muted-foreground">
           Password
         </Label>
@@ -42,26 +42,25 @@ export const UpdatePassword = () => {
             name="password"
             type="password"
             autoComplete="password"
+            className='w-full'
             required
             {...passwordInput}
           />
         </div>
+      </CardContent>
+      <CardFooter>
         <Button
           aria-disabled={isLoading}
           type="button"
+          className="w-full"
           onClick={() => {
             updatePassword();
           }}
-          className={classNames(
-            'flex w-fit justify-center rounded-lg border border-transparent py-3 text-white dark:text-black px-4 text-sm font-medium  shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2',
-            isLoading
-              ? 'bg-yellow-300 dark:bg-yellow-700 '
-              : 'bg-black dark:bg-white hover:bg-gray-900 dark:hover:bg-gray-100  ',
-          )}
+          disabled={isLoading}
         >
           {isLoading ? 'Updating...' : 'Update Password'}
         </Button>
-      </div>
-    </div>
+      </CardFooter>
+    </>
   );
 };
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx
index b495485f..3d958ff6 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx
@@ -1,14 +1,11 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { T } from '@/components/ui/Typography';
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { serverGetLoggedInUser } from '@/utils/server/serverGetLoggedInUser';
 import { UpdatePassword } from './UpdatePassword';
 
 export default async function SecuritySettings() {
   const user = await serverGetLoggedInUser();
   return (
-    <div className="space-y-6 max-w-5xl">
+    <div className="space-y-6 max-w-xl">
       <Card>
         <CardHeader>
           <CardTitle>
@@ -18,29 +15,9 @@ export default async function SecuritySettings() {
             Update your email and password
           </CardDescription>
         </CardHeader>
-        <CardContent className='space-y-6'>
-          <div className="space-y-1">
-            <Label htmlFor="email" className="text-muted-foreground">
-              Email
-            </Label>
-            <div className="flex flex-col gap-2 w-1/3 ">
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                value={user.email}
-                readOnly
-                disabled
-                className='mb-1'
-              />
-            </div>
-            <T.Small className=" text-muted-foreground font-normal">
-              Email cannot be changed
-            </T.Small>
-          </div>
-          <UpdatePassword />
-        </CardContent>
+
+        <UpdatePassword />
+
       </Card>
     </div>
   );
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
index b33480fa..c0819482 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
@@ -63,7 +63,7 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
             <p className="text-sm text-destructive">{errors.organizationTitle.message}</p>
           )}
         </div>
-        <div className="space-y-2">
+        {/* <div className="space-y-2">
           <Label htmlFor="organizationSlug">Organization Slug</Label>
           <Input
             id="organizationSlug"
@@ -73,7 +73,7 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
           {errors.organizationSlug && (
             <p className="text-sm text-destructive">{errors.organizationSlug.message}</p>
           )}
-        </div>
+        </div> */}
       </CardContent>
       <CardFooter>
         <Button
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx
index c6a1d832..59a0fc5b 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx
@@ -22,6 +22,7 @@ export function ProfileUpdate({
   userEmail,
 }: ProfileUpdateProps) {
   const [fullName, setFullName] = useState(userProfile.full_name ?? "");
+  const [userName, setUserName] = useState(userProfile.user_name ?? userProfile.full_name ?? "");
   const [avatarUrl, setAvatarUrl] = useState(userProfile.avatar_url ?? undefined);
   const { toast } = useToast();
 
@@ -31,7 +32,7 @@ export function ProfileUpdate({
   });
 
   const updateProfileMutation = useMutation({
-    mutationFn: () => updateUserProfileNameAndAvatar({ fullName, avatarUrl }, { isOnboardingFlow: true }),
+    mutationFn: () => updateUserProfileNameAndAvatar({ fullName, userName, avatarUrl }, { isOnboardingFlow: true }),
     onSuccess: () => {
       toast({ title: "Profile updated!", description: "Your profile has been successfully updated." });
       onSuccess();
@@ -100,6 +101,16 @@ export function ProfileUpdate({
             </Label>
           </div>
         </div>
+        <div className="space-y-2">
+          <Label htmlFor="user-name">User Name</Label>
+          <Input
+            id="user-name"
+            value={userName}
+            onChange={(e) => setUserName(e.target.value)}
+            placeholder="Your user name"
+            disabled={updateProfileMutation.isLoading}
+          />
+        </div>
         <div className="space-y-2">
           <Label htmlFor="full-name">Full Name</Label>
           <Input
diff --git a/src/components/UpdateAvatarAndName/UpdateAvatarAndName.tsx b/src/components/UpdateAvatarAndName/UpdateAvatarAndName.tsx
index d13a1744..09124615 100644
--- a/src/components/UpdateAvatarAndName/UpdateAvatarAndName.tsx
+++ b/src/components/UpdateAvatarAndName/UpdateAvatarAndName.tsx
@@ -6,8 +6,8 @@ import { motion } from 'framer-motion';
 import { Camera } from 'lucide-react';
 import Image from 'next/image';
 import { Button } from '../Button';
+import { CardContent, CardFooter } from '../ui/card';
 import { Input } from '../ui/input';
-import { Separator } from '../ui/separator';
 import { T } from '../ui/Typography';
 const MotionImage = motion(Image);
 
@@ -18,6 +18,7 @@ export function UpdateAvatarAndNameBody({
   isUploading,
   profileAvatarUrl,
   profileFullname,
+  profileUserName,
   isNewAvatarImageLoading,
   setIsNewAvatarImageLoading,
   userEmail,
@@ -29,6 +30,7 @@ export function UpdateAvatarAndNameBody({
   isLoading: boolean;
   onFileUpload?: (file: File) => void;
   profileFullname: string | undefined;
+  profileUserName: string | undefined;
   isNewAvatarImageLoading: boolean;
   setIsNewAvatarImageLoading: (value: boolean) => void;
   userEmail: string | undefined;
@@ -41,107 +43,129 @@ export function UpdateAvatarAndNameBody({
     email: userEmail,
   });
   return (
+
     <form
       onSubmit={(event) => {
         event.preventDefault();
         onSubmit(fullName);
       }}
-      className="flex gap-6 w-full"
+
     >
-      <div className='w-full'>
-        <div className='flex flex-row items-start gap-6'>
-          <div className="">
-            <div className="relative mt-1 group w-fit">
-              <Label
-                className="inline-block cursor-pointer w-fit"
-                htmlFor="file-input"
-              >
-                <MotionImage
-                  animate={{
-                    opacity: isNewAvatarImageLoading ? [0.5, 1, 0.5] : 1,
+      <CardContent className="flex flex-col gap-6 w-full">
+        <div className='w-full'>
+          <div className='flex flex-row items-start gap-6'>
+            <div className="">
+              <div className="relative mt-1 group w-fit">
+                <Label
+                  className="inline-block cursor-pointer w-fit"
+                  htmlFor="file-input"
+                >
+                  <MotionImage
+                    animate={{
+                      opacity: isNewAvatarImageLoading ? [0.5, 1, 0.5] : 1,
+                    }}
+                    transition={
+                      isNewAvatarImageLoading
+                        ? {
+                          duration: 1,
+                          repeat: Infinity,
+                          repeatType: 'reverse',
+                        }
+                        : undefined
+                    }
+                    onLoad={() => setIsNewAvatarImageLoading(false)}
+                    onError={() => setIsNewAvatarImageLoading(false)}
+                    width={72}
+                    height={80}
+                    className="rounded-full object-cover border-2 border-gray-200 transition-all duration-300 group-hover:border-primary"
+                    src={avatarURL}
+                    alt="Avatar"
+                  />
+                  <div className="absolute bottom-0 right-0 bg-primary rounded-full p-1 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <Camera className="size-4 text-primary-foreground" />
+                  </div>
+                </Label>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  id="file-input"
+                  className="hidden"
+                  accept="image/*"
+                  disabled={isUploading}
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    if (file && onFileUpload) {
+                      onFileUpload(file);
+                    }
                   }}
-                  transition={
-                    isNewAvatarImageLoading
-                      ? {
-                        duration: 1,
-                        repeat: Infinity,
-                        repeatType: 'reverse',
-                      }
-                      : undefined
-                  }
-                  onLoad={() => setIsNewAvatarImageLoading(false)}
-                  onError={() => setIsNewAvatarImageLoading(false)}
-                  width={72}
-                  height={80}
-                  className="rounded-full object-cover border-2 border-gray-200 transition-all duration-300 group-hover:border-primary"
-                  src={avatarURL}
-                  alt="Avatar"
                 />
-                <div className="absolute bottom-0 right-0 bg-primary rounded-full p-1 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                  <Camera className="size-4 text-primary-foreground" />
-                </div>
+              </div>
+            </div>
+            <div className="space-y-1 w-full">
+              <Label htmlFor="name">
+                Full name
               </Label>
-              <input
-                ref={fileInputRef}
-                type="file"
-                id="file-input"
-                className="hidden"
-                accept="image/*"
-                disabled={isUploading}
-                onChange={(event) => {
-                  const file = event.target.files?.[0];
-                  if (file && onFileUpload) {
-                    onFileUpload(file);
-                  }
-                }}
+              <Input
+                id="name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                placeholder="Enter your full name"
+                disabled={isLoading}
+                className='w-full'
+                required
               />
             </div>
           </div>
-          <div className="space-y-1 w-3/4">
-            <Label htmlFor="name">
-              Full name
-            </Label>
-            <Input
-              id="name"
-              value={fullName}
-              onChange={(e) => setFullName(e.target.value)}
-              placeholder="Enter your full name"
-              disabled={isLoading}
-              className='w-full'
-              required
-            />
-          </div>
         </div>
 
+        <div className='flex flex-col gap-4'>
+
+          <div className='w-full'>
+            <div className="space-y-1">
+              <Label htmlFor="name">
+                Username
+              </Label>
+              <Input
+                id="name"
+                value={profileUserName}
+                placeholder="Enter your user name"
+                disabled
+                className='mb-2 '
+              />
+              <T.Small className="mt-2 text-muted-foreground font-normal">
+                Username cannot be changed
+              </T.Small>
+            </div>
+          </div>
+          <div className='w-full'>
+            <div className="space-y-1 ">
+              <Label htmlFor="name">
+                Email
+              </Label>
+              <Input
+                id="name"
+                value={userEmail}
+                placeholder="Enter your user name"
+                disabled
+                className=' mb-2 '
+              />
+              <T.Small className="mt-2 text-muted-foreground font-normal">
+                Email cannot be changed
+              </T.Small>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter >
         <Button
           type="submit"
           disabled={isLoading}
-          className='mt-5 w-fit'
+          className=' w-full'
         >
-          {isLoading ? 'Updating...' : 'Update Profile'}
+          {isLoading ? 'Saving...' : 'Save Changes'}
         </Button>
-      </div>
-
-      <Separator orientation='vertical' className='h-[96px]' />
-
-      <div className='ml-4 w-full'>
-        <div className="space-y-1 w-3/4">
-          <Label htmlFor="name">
-            User name
-          </Label>
-          <Input
-            id="name"
-            value={fullName}
-            onChange={(e) => setFullName(e.target.value)}
-            placeholder="Enter your user name"
-            disabled
-            className='w-full mb-2 '
-          />
-          <T.Small className="mt-2 text-muted-foreground font-normal">
-            Username cannot be changed
-          </T.Small>
-        </div>
-      </div>
+      </CardFooter>
     </form>
+
   );
 }
diff --git a/src/data/user/user.tsx b/src/data/user/user.tsx
index aa269554..2df30b9a 100644
--- a/src/data/user/user.tsx
+++ b/src/data/user/user.tsx
@@ -143,9 +143,11 @@ export const uploadPublicUserAvatar = async (
 export const updateUserProfileNameAndAvatar = async (
   {
     fullName,
+    userName,
     avatarUrl,
   }: {
     fullName?: string;
+    userName?: string;
     avatarUrl?: string;
   },
   {
@@ -161,6 +163,7 @@ export const updateUserProfileNameAndAvatar = async (
     .from("user_profiles")
     .update({
       full_name: fullName,
+      user_name: userName,
       avatar_url: avatarUrl,
     })
     .eq("id", user.id)
diff --git a/src/lib/database.types.ts b/src/lib/database.types.ts
index ba8bb400..7e6b1418 100644
--- a/src/lib/database.types.ts
+++ b/src/lib/database.types.ts
@@ -1665,18 +1665,21 @@ export type Database = {
           created_at: string
           full_name: string | null
           id: string
+          user_name: string | null
         }
         Insert: {
           avatar_url?: string | null
           created_at?: string
           full_name?: string | null
           id: string
+          user_name?: string | null
         }
         Update: {
           avatar_url?: string | null
           created_at?: string
           full_name?: string | null
           id?: string
+          user_name?: string | null
         }
         Relationships: [
           {
diff --git a/supabase/migrations/20240807133856_add_user_name_to_profile.sql b/supabase/migrations/20240807133856_add_user_name_to_profile.sql
new file mode 100644
index 00000000..eb4b0135
--- /dev/null
+++ b/supabase/migrations/20240807133856_add_user_name_to_profile.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "public"."user_profiles"
+ADD COLUMN "user_name" character varying NULL;
\ No newline at end of file