diff --git a/.github/workflows/load.yml b/.github/workflows/load.yml
new file mode 100644
index 0000000..d13e8ef
--- /dev/null
+++ b/.github/workflows/load.yml
@@ -0,0 +1,36 @@
+name: bloggios-web-ui load
+
+on:
+  workflow_run:
+    workflows: ["bloggios-web-ui"]
+    types:
+      - completed
+        
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Deploy using ssh
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.V4_HOST }}
+          username: ${{ secrets.V4_USERNAME }}
+          key: ${{ secrets.V4_VPS_PRIVATE_KEY }}
+          port: 22
+          script: |
+            cd /root/bloggios-web-ui
+            git stash
+            git pull
+            npm cache clean --force 
+            npm install
+            npm run build
+            pm2 restart app.config.js
\ No newline at end of file
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 28287d9..c981b27 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,4 +1,4 @@
-name: Bloggios Web UI devsandbox
+name: bloggios-web-ui
 
 on:
   push:
diff --git a/app/(root)/(pages)/[email]/page.tsx b/app/(root)/(pages)/[username]/page.tsx
similarity index 76%
rename from app/(root)/(pages)/[email]/page.tsx
rename to app/(root)/(pages)/[username]/page.tsx
index 375624c..a73581d 100644
--- a/app/(root)/(pages)/[email]/page.tsx
+++ b/app/(root)/(pages)/[username]/page.tsx
@@ -15,20 +15,17 @@ import UserProfileCard from "@/components/route_components/profile/UserProfileCa
 //     return profileResponse.data;
 // })
 
-const getProfileAuth = cache(async (email: string) => {
+const getProfileAuth = cache(async (username: string) => {
     try {
-        const profile = await getUserProfile(email);
+        const profile = await getUserProfile(username);
         return profile.data;
     } catch (error) {
         return notFound();
     }
 });
 
-export async function generateMetadata({ params }: { params: { email: string } }) {
-    const finalMail = params.email.replace("%40", "@");
-    if (!EMAIL_REGEX.test(finalMail)) {
-        notFound();
-    }
+export async function generateMetadata({ params }: { params: { username: string } }) {
+    const finalMail = params.username.replace("%40", "@");
     const profileAuth = await getProfileAuth(finalMail);
     return {
         title: `${profileAuth.name} - Bloggios user Profile`,
@@ -36,12 +33,9 @@ export async function generateMetadata({ params }: { params: { email: string } }
     }
 }
 
-export default async function ProfilePage({ params }: { params: { email: string } }) {
+export default async function ProfilePage({ params }: { params: { username: string } }) {
 
-    const finalMail = params.email.replace("%40", "@");
-    if (!EMAIL_REGEX.test(finalMail)) {
-        notFound();
-    }
+    const finalMail = params.username.replace("%40", "@");
 
     const profileAuth = await getProfileAuth(finalMail);
 
diff --git a/components/custom/blog/CommentCard.tsx b/components/custom/blog/CommentCard.tsx
index d1eb5d9..cfa2b0b 100644
--- a/components/custom/blog/CommentCard.tsx
+++ b/components/custom/blog/CommentCard.tsx
@@ -17,6 +17,7 @@ const CommentCard = () => {
                     profileImage={""}
                     date={"2024-06-10T18:02:22.791+00:00"}
                     email={"rohit@bloggios.com"}
+                    username={"rohit"}
                 />
             </CardHeader>
 
diff --git a/components/custom/dropdowns/UserNavbarDropdown.tsx b/components/custom/dropdowns/UserNavbarDropdown.tsx
index 4622257..dc78296 100644
--- a/components/custom/dropdowns/UserNavbarDropdown.tsx
+++ b/components/custom/dropdowns/UserNavbarDropdown.tsx
@@ -20,7 +20,7 @@ import {LOGIN_PAGE} from "@/constants/UiPathConstants";
 
 export default function UserNavbarDropdown() {
 
-    const {isAuthenticated, email} = useSelector((state: RootState) => state.auth);
+    const {isAuthenticated, email, username} = useSelector((state: RootState) => state.auth);
     const {profileImage} = useSelector((state: RootState) => state.profile);
     const dispatch = useDispatch();
     const router = useRouter();
@@ -80,13 +80,13 @@ export default function UserNavbarDropdown() {
                             isReadOnly
                         >
                             <p className="text-default-600">Logged in as</p>
-                            <p className="text-xs text-default-500 overflow-ellipsis overflow-hidden">{email}</p>
+                            <p className="text-xs text-default-500 overflow-ellipsis overflow-hidden">{username}</p>
                         </DropdownItem>
                     ) : <></>}
                 </DropdownSection>
 
                 <DropdownSection showDivider>
-                    <DropdownItem onClick={()=> router.push(`/${email}`)} key={"profile"}>
+                    <DropdownItem onClick={()=> router.push(`/${username}`)} key={"profile"}>
                         Profile
                     </DropdownItem>
 
diff --git a/components/custom/user/UserInfo.tsx b/components/custom/user/UserInfo.tsx
index ccfaec6..5670112 100644
--- a/components/custom/user/UserInfo.tsx
+++ b/components/custom/user/UserInfo.tsx
@@ -8,13 +8,15 @@ const UserInfo = ({
                       profileImage,
                       date,
                       email,
-                      isBadge
+                      isBadge,
+                      username
                   }: {
     name: string,
     profileImage: any,
     date: Date | string,
     email: string,
     isBadge?: boolean | null
+    username: string
 }) => {
 
     const router = useRouter();
@@ -27,11 +29,11 @@ const UserInfo = ({
                 isBordered
                 className={`cursor-pointer ${isBadge ? "outline-[#4258ff]" : ''}`}
                 size={"sm"}
-                onClick={() => router.push(`/${email}`)}
+                onClick={() => router.push(`/${username}`)}
             />
 
             <div className={"flex flex-col gap-0"}>
-                <small onClick={() => router.push(`/${email}`)}
+                <small onClick={() => router.push(`/${username}`)}
                        className={"text-small cursor-pointer"}>{name}</small>
                 <small className={"text-muted-foreground"}>{getPostedAgoString(date)}</small>
             </div>
diff --git a/rest/UserAuthProviderApplication.tsx b/rest/UserAuthProviderApplication.tsx
index 1b74fce..3a94e0d 100644
--- a/rest/UserAuthProviderApplication.tsx
+++ b/rest/UserAuthProviderApplication.tsx
@@ -18,10 +18,10 @@ export const loggedInUserProfile = () => {
         .then(response => response.data);
 }
 
-export const getUserProfile = (email: string) => {
+export const getUserProfile = (username: string) => {
     return gatewayAxios.get(GET_USER_PROFILE, {
         params: {
-            email: email,
+            username: username,
         }
     }).then((response)=> response);
 }
\ No newline at end of file
diff --git a/state/authSlice.tsx b/state/authSlice.tsx
index adab067..2b29844 100644
--- a/state/authSlice.tsx
+++ b/state/authSlice.tsx
@@ -27,6 +27,7 @@ interface AuthSliceState {
     remoteAddress: string | null,
     authorities: string | null,
     email: string | null,
+    username: string | null
 }
 
 const initialState: AuthSliceState = {
@@ -35,7 +36,8 @@ const initialState: AuthSliceState = {
     isAuthenticated: false,
     remoteAddress: null,
     authorities: null,
-    email: null
+    email: null,
+    username: null,
 };
 
 const authSlice = createSlice({
@@ -43,13 +45,14 @@ const authSlice = createSlice({
     initialState,
     reducers: {
         setCredentials: (state, action) => {
-            const {userId, accessToken, isAuthenticated, remoteAddress, authorities, email} = action.payload;
+            const {userId, accessToken, isAuthenticated, remoteAddress, authorities, email, username} = action.payload;
             state.userId = userId;
             state.accessToken = accessToken;
             state.isAuthenticated = isAuthenticated;
             state.remoteAddress = remoteAddress;
             state.authorities = authorities;
             state.email = email;
+            state.username = username;
         },
         clearCredentials: (state) => {
             state.userId = null;
@@ -58,6 +61,7 @@ const authSlice = createSlice({
             state.remoteAddress = null;
             state.authorities = null;
             state.email = null;
+            state.username = null;
         }
     }
 });