diff --git a/.prettierrc b/.prettierrc
index 5c2eca6..3d30913 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "semi": true,
   "jsxSingleQuote": false,
-  "printWidth": 80
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index 2faa157..7de020d 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.31",
+    "prettier": "^3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.3.2"
diff --git a/src/components/atoms/button/Button.tsx b/src/components/atoms/button/Button.tsx
index 1155407..20e7cb5 100644
--- a/src/components/atoms/button/Button.tsx
+++ b/src/components/atoms/button/Button.tsx
@@ -34,13 +34,13 @@ const Button: React.FC<IProps> = (props) => {
     <button
       {...props}
       className={cn(
-        'px-4 items-center justify-center rounded-md shadow-md',
+        'items-center justify-center rounded-md px-4 shadow-md',
         block ? 'w-full' : 'inline-block',
         size === 'small' ? 'h-7' : size === 'large' ? 'h-11' : 'h-8',
         bg ? bg : 'bg-primary',
         color ? color : 'text-white',
         fontWeight ? fontWeight : 'font-semibold',
-        fontSize ? fontSize : 'text-sm'
+        fontSize ? fontSize : 'text-sm',
       )}
       disabled={isDisabled}
     >
diff --git a/src/components/atoms/input/TextInput.tsx b/src/components/atoms/input/TextInput.tsx
index bfe8882..d01989c 100644
--- a/src/components/atoms/input/TextInput.tsx
+++ b/src/components/atoms/input/TextInput.tsx
@@ -13,18 +13,22 @@ const TextInput: React.FC<IProps> = (props) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [field, { error, touched }] = useField(props as string);
   return (
-    <div className=" my-3 ">
+    <div className="my-3">
       <input
         ref={inputRef}
         {...field}
         {...props}
         className={cn(
-          'w-full px-2 border border-gray-300 rounded-md focus:border-primary outline-none',
-          inputSize === 'small' ? 'h-7' : inputSize === 'large' ? 'h-12' : 'h-8'
+          'w-full rounded-md border border-gray-300 px-2 outline-none focus:border-primary',
+          inputSize === 'small'
+            ? 'h-7'
+            : inputSize === 'large'
+              ? 'h-12'
+              : 'h-8',
         )}
       />
       {touched && error ? (
-        <div className="text-sm w-full text-red-500">
+        <div className="w-full text-sm text-red-500">
           <p>{error}</p>
         </div>
       ) : null}
diff --git a/src/components/atoms/navbar/index.tsx b/src/components/atoms/navbar/index.tsx
index 4376855..da4f35b 100644
--- a/src/components/atoms/navbar/index.tsx
+++ b/src/components/atoms/navbar/index.tsx
@@ -6,9 +6,9 @@ const Navbar: React.FC = () => {
   const location = useLocation();
   const pathName = location?.pathname.split('/')[1];
   return (
-    <div className="w-full h-14 bg-white grid grid-cols-7 gap-4 fixed z-50">
+    <div className="fixed z-50 grid h-14 w-full grid-cols-7 gap-4 bg-white">
       <div className="col-span-2 flex items-center">
-        <div className="flex items-center ml-2">
+        <div className="ml-2 flex items-center">
           <div className="h-10 text-primary">
             <Link to="/">
               <i className="fab fa-facebook text-[2.5rem]"></i>
@@ -18,15 +18,15 @@ const Navbar: React.FC = () => {
           <div className="h-10">
             <input
               placeholder="Search Facebook"
-              className="bg-gray-100 rounded-full h-full focus:outline-none ml-2 px-3 pr-4"
+              className="ml-2 h-full rounded-full bg-gray-100 px-3 pr-4 focus:outline-none"
             />
           </div>
         </div>
       </div>
       <div className="col-span-3 flex items-center justify-center space-x-2">
         <Link to="/" id="home">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === '' || undefined
@@ -51,9 +51,9 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#home" content="Home" />
         <Link to="/watch" id="watch">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
-              <div className="absolute bg-red-500 text-white text-xs font-bold px-1 rounded-lg top-0 right-0">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
+              <div className="absolute right-0 top-0 rounded-lg bg-red-500 px-1 text-xs font-bold text-white">
                 9+
               </div>
               <div
@@ -78,8 +78,8 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#watch" content="Video" />
         <Link to="/marketplace" id="marketplace">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'marketplace' ? 'text-primary' : 'text-gray-400'
@@ -105,8 +105,8 @@ const Navbar: React.FC = () => {
           content="Marketplace"
         />
         <Link to="/groups" id="groups">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'groups' ? 'text-primary' : 'text-gray-400'
@@ -129,8 +129,8 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#groups" content="Groups" />
         <Link to="/gaming" id="gaming">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'gaming' ? 'text-primary' : 'text-gray-400'
@@ -154,31 +154,31 @@ const Navbar: React.FC = () => {
         <Tooltip place="bottom" anchorSelect="#gaming" content="Gaming" />
       </div>
       <div className="col-span-2 flex items-center justify-end">
-        <div className="h-10 w-auto flex items-center space-x-2 pr-2">
+        <div className="flex h-10 w-auto items-center space-x-2 pr-2">
           <Link to="/profile">
-            <button className="h-10 px-2 flex space-x-1 items-center justify-center focus:outline-none hover:bg-gray-300 rounded-full">
+            <button className="flex h-10 items-center justify-center space-x-1 rounded-full px-2 hover:bg-gray-300 focus:outline-none">
               <div className="h-8">
                 <img
                   src="https://random.imagecdn.app/200/200"
-                  className="w-8 h-8 rounded-full"
+                  className="h-8 w-8 rounded-full"
                   alt="dp"
                 />
               </div>
-              <div className="h-8 flex items-center justify-content">
-                <p className="font-semibold text-sm">Saiful</p>
+              <div className="justify-content flex h-8 items-center">
+                <p className="text-sm font-semibold">Saiful</p>
               </div>
             </button>
           </Link>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-plus"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fab fa-facebook-messenger"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-bell"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-sort-down"></i>
           </button>
         </div>
diff --git a/src/components/atoms/post/CreatePostBox.tsx b/src/components/atoms/post/CreatePostBox.tsx
index a899768..6c98873 100644
--- a/src/components/atoms/post/CreatePostBox.tsx
+++ b/src/components/atoms/post/CreatePostBox.tsx
@@ -2,21 +2,21 @@ import React from 'react';
 
 const CreatePostBox: React.FC = () => {
   return (
-    <div className="rounded-lg bg-white flex flex-col p-3 px-4 shadow">
-      <div className="flex items-center space-x-2 border-b pb-3 mb-2">
-        <div className="w-10 h-10">
+    <div className="flex flex-col rounded-lg bg-white p-3 px-4 shadow">
+      <div className="mb-2 flex items-center space-x-2 border-b pb-3">
+        <div className="h-10 w-10">
           <img
             src="https://random.imagecdn.app/200/200"
-            className="w-full h-full rounded-full"
+            className="h-full w-full rounded-full"
             alt="dp"
           />
         </div>
-        <button className="hover:bg-gray-200 focus:bg-gray-300 focus:outline-none flex-grow bg-gray-100 text-gray-500 text-left rounded-full h-10 pl-5">
+        <button className="h-10 flex-grow rounded-full bg-gray-100 pl-5 text-left text-gray-500 hover:bg-gray-200 focus:bg-gray-300 focus:outline-none">
           What&apos;s on your mind, Shihab?
         </button>
       </div>
-      <div className="flex space-x-3 font-thin text-sm text-gray-600 -mb-1">
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+      <div className="-mb-1 flex space-x-3 text-sm font-thin text-gray-600">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="fab fa-youtube text-red-600"></i>
           </div>
@@ -24,7 +24,7 @@ const CreatePostBox: React.FC = () => {
             <p className="font-semibold">Create Video</p>
           </div>
         </button>
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="fas fa-images text-green-600"></i>
           </div>
@@ -32,7 +32,7 @@ const CreatePostBox: React.FC = () => {
             <p className="font-semibold">Photos/Video</p>
           </div>
         </button>
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="far fa-smile text-yellow-600"></i>
           </div>
diff --git a/src/components/atoms/post/index.tsx b/src/components/atoms/post/index.tsx
index cc97173..f3852a6 100644
--- a/src/components/atoms/post/index.tsx
+++ b/src/components/atoms/post/index.tsx
@@ -9,51 +9,51 @@ const Post: React.FC<IProps> = (props) => {
   const { post } = props;
   const { user } = post;
   return (
-    <div className="w-full shadow h-auto bg-white rounded-md">
+    <div className="h-auto w-full rounded-md bg-white shadow">
       <div className="flex items-center space-x-2 p-2.5 px-4">
-        <div className="w-10 h-10">
-          <img src={user.dp} className="w-full h-full rounded-full" alt="dp" />
+        <div className="h-10 w-10">
+          <img src={user.dp} className="h-full w-full rounded-full" alt="dp" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <p className="font-semibold text-sm text-gray-700">{user.fullName}</p>
+        <div className="flex flex-grow flex-col">
+          <p className="text-sm font-semibold text-gray-700">{user.fullName}</p>
           <span className="text-xs font-thin text-gray-400">
             {moment(post.createdAt).fromNow()}
           </span>
         </div>
-        <div className="w-8 h-8">
-          <button className="w-full h-full hover:bg-gray-100 rounded-full text-gray-400 focus:outline-none">
+        <div className="h-8 w-8">
+          <button className="h-full w-full rounded-full text-gray-400 hover:bg-gray-100 focus:outline-none">
             <i className="fas fa-ellipsis-h"></i>
           </button>
         </div>
       </div>
       {post.caption ? (
         <div className="mb-1">
-          <p className="text-gray-700 max-h-10 truncate px-3 text-sm">
+          <p className="max-h-10 truncate px-3 text-sm text-gray-700">
             {post.caption}
           </p>
         </div>
       ) : null}
       {post.image ? (
-        <div className="w-full h-76 max-h-100">
+        <div className="h-76 max-h-100 w-full">
           <img
             src={post.image}
             alt="postImage"
-            className="w-full h-76 max-h-100 object-cover"
+            className="h-76 max-h-100 w-full object-cover"
           />
         </div>
       ) : null}
 
-      <div className="w-full flex flex-col space-y-2 p-2 px-4">
-        <div className="flex items-center justify-between pb-2 border-b border-gray-300 text-gray-500 text-sm">
+      <div className="flex w-full flex-col space-y-2 p-2 px-4">
+        <div className="flex items-center justify-between border-b border-gray-300 pb-2 text-sm text-gray-500">
           <div className="flex items-center">
             <div className="flex items-center">
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-heart"></i>
               </button>
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-primary text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-thumbs-up"></i>
               </button>
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-yellow-500 text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-surprise"></i>
               </button>
               <div className="ml-1">
@@ -66,8 +66,8 @@ const Post: React.FC<IProps> = (props) => {
             <button>{post.shares} Shares</button>
           </div>
         </div>
-        <div className="flex space-x-3 text-gray-500 text-sm font-thin">
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <div className="flex space-x-3 text-sm font-thin text-gray-500">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-thumbs-up"></i>
             </div>
@@ -75,7 +75,7 @@ const Post: React.FC<IProps> = (props) => {
               <p className="font-semibold">Like</p>
             </div>
           </button>
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-comment"></i>
             </div>
@@ -83,7 +83,7 @@ const Post: React.FC<IProps> = (props) => {
               <p className="font-semibold">Comment</p>
             </div>
           </button>
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-share"></i>
             </div>
diff --git a/src/components/atoms/story/index.tsx b/src/components/atoms/story/index.tsx
index 395040a..dfc069c 100644
--- a/src/components/atoms/story/index.tsx
+++ b/src/components/atoms/story/index.tsx
@@ -10,18 +10,18 @@ const Story: React.FC<IProps> = (props) => {
   const { user } = story;
   return (
     <div
-      className="w-28 h-48 relative rounded-xl p-3 to-pink-500 shadow cursor-pointer"
+      className="relative h-48 w-28 cursor-pointer rounded-xl to-pink-500 p-3 shadow"
       style={{ backgroundImage: `url(${story.image})` }}
     >
       <div className="absolute">
         <img
           src={user.dp}
-          className="w-10 h-10 rounded-full border-4 border-white"
+          className="h-10 w-10 rounded-full border-4 border-white"
           alt="story"
         />
       </div>
       <div className="absolute text-center" style={{ bottom: '5%' }}>
-        <p className="text-white font-semibold">{user.fullName}</p>
+        <p className="font-semibold text-white">{user.fullName}</p>
       </div>
     </div>
   );
diff --git a/src/components/container/PostContainer.tsx b/src/components/container/PostContainer.tsx
index 6497125..5f51c58 100644
--- a/src/components/container/PostContainer.tsx
+++ b/src/components/container/PostContainer.tsx
@@ -11,11 +11,11 @@ interface IProps {
 const PostContainer: React.FC<IProps> = (props) => {
   const { postsView } = props;
   return (
-    <div className="mt-4 w-full h-full">
+    <div className="mt-4 h-full w-full">
       <div
         className={cn(
           'grid gap-2',
-          postsView === 'gridView' ? 'grid-cols-2' : 'grid-cols-1'
+          postsView === 'gridView' ? 'grid-cols-2' : 'grid-cols-1',
         )}
       >
         {postsData.length ? (
diff --git a/src/components/layouts/GamingPageLayout.tsx b/src/components/layouts/GamingPageLayout.tsx
index 18335e9..d9ed313 100644
--- a/src/components/layouts/GamingPageLayout.tsx
+++ b/src/components/layouts/GamingPageLayout.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const GamingPageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>
diff --git a/src/components/layouts/MarketplacePage.tsx b/src/components/layouts/MarketplacePage.tsx
index 37ac9a6..4a3c3a6 100644
--- a/src/components/layouts/MarketplacePage.tsx
+++ b/src/components/layouts/MarketplacePage.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const MarketplacePageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>
diff --git a/src/components/layouts/NewsFeedLayout.tsx b/src/components/layouts/NewsFeedLayout.tsx
index 57123b6..3b6ec30 100644
--- a/src/components/layouts/NewsFeedLayout.tsx
+++ b/src/components/layouts/NewsFeedLayout.tsx
@@ -7,12 +7,12 @@ import RightSidebar from '../organisms/newsfeed/RightSidebar';
 const NewsFeedLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>
         <div className="flex">
           <LeftSidebar />
-          <div className="flex-1 ">{children}</div>
+          <div className="flex-1">{children}</div>
           <RightSidebar />
         </div>
       </MainContentContainer>
diff --git a/src/components/layouts/ProfilePageLayout.tsx b/src/components/layouts/ProfilePageLayout.tsx
index 0bd8778..e525cfe 100644
--- a/src/components/layouts/ProfilePageLayout.tsx
+++ b/src/components/layouts/ProfilePageLayout.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const ProfilePageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>
diff --git a/src/components/layouts/WatchPageLayout.tsx b/src/components/layouts/WatchPageLayout.tsx
index 2236063..c090b55 100644
--- a/src/components/layouts/WatchPageLayout.tsx
+++ b/src/components/layouts/WatchPageLayout.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const WatchPageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>
diff --git a/src/components/organisms/newsfeed/LeftSidebar.tsx b/src/components/organisms/newsfeed/LeftSidebar.tsx
index 8273650..4f008b8 100644
--- a/src/components/organisms/newsfeed/LeftSidebar.tsx
+++ b/src/components/organisms/newsfeed/LeftSidebar.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 const LeftSidebar: React.FC = () => {
   return (
-    <div className="w-[22.5rem] h-[calc(100vh-56px)] sticky top-[56px] overflow-y-auto py-3">
+    <div className="sticky top-[56px] h-[calc(100vh-56px)] w-[22.5rem] overflow-y-auto py-3">
       <ul className="w-full">
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/200/200"
               alt="user"
             />
@@ -16,10 +16,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Saiful Islam Shihab</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/32"
               alt="friends"
             />
@@ -28,10 +28,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Friends</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full bg-no-repeat"
+              className="h-8 w-8 rounded-full bg-no-repeat"
               src="https://random.imagecdn.app/32/33"
               alt="memories"
             />
@@ -40,10 +40,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Messenger</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/32"
               alt="memories"
             />
@@ -52,10 +52,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Memories</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/33"
               alt="pages"
             />
@@ -64,10 +64,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Saved</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/4"
               alt="groups"
             />
@@ -76,10 +76,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Groups</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/35"
               alt="groups"
             />
@@ -88,10 +88,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Video</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/36"
               alt="groups"
             />
@@ -100,10 +100,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Marketplace</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/37"
               alt="groups"
             />
@@ -112,10 +112,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Feeds</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/38"
               alt="groups"
             />
@@ -124,10 +124,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Ads Manager</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/40"
               alt="groups"
             />
@@ -136,10 +136,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Events</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/41"
               alt="groups"
             />
@@ -148,10 +148,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Fundraisers</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/42"
               alt="groups"
             />
@@ -160,10 +160,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Gaming video</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/43"
               alt="groups"
             />
@@ -172,10 +172,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Messenger kids</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/44"
               alt="groups"
             />
@@ -184,10 +184,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Order & payments</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/45"
               alt="groups"
             />
@@ -196,10 +196,10 @@ const LeftSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Pages</p>
           </div>
         </li>
-        <li className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+        <li className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/36"
               alt="groups"
             />
diff --git a/src/components/organisms/newsfeed/RightSidebar.tsx b/src/components/organisms/newsfeed/RightSidebar.tsx
index 47a23ce..323c28e 100644
--- a/src/components/organisms/newsfeed/RightSidebar.tsx
+++ b/src/components/organisms/newsfeed/RightSidebar.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 const RightSidebar: React.FC = () => {
   return (
-    <div className="w-[22.5rem] h-[calc(100vh-56px)] sticky top-[56px] overflow-y-auto  py-3 pr-2">
-      <div className="w-full border-b-2 pb-2 mb-2 border-gray-300">
-        <p className="font-semibold mb-2">Your Pages</p>
-        <li className="h-12 mb-2 flex items-center -ml-2 justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200">
+    <div className="sticky top-[56px] h-[calc(100vh-56px)] w-[22.5rem] overflow-y-auto py-3 pr-2">
+      <div className="mb-2 w-full border-b-2 border-gray-300 pb-2">
+        <p className="mb-2 font-semibold">Your Pages</p>
+        <li className="justify-content -ml-2 mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200">
           <div>
             <img
-              className="w-8 h-8 rounded-full"
+              className="h-8 w-8 rounded-full"
               src="https://random.imagecdn.app/32/32"
               alt="user"
             />
@@ -17,8 +17,8 @@ const RightSidebar: React.FC = () => {
             <p className="text-sm font-semibold">Night Fury Gaming</p>
           </div>
         </li>
-        <ul className="text-gray-500 text-sm">
-          <li className="h-8 mb-2 flex items-center justify-content cursor-pointer space-x-3 p-2 rounded-md hover:bg-gray-200">
+        <ul className="text-sm text-gray-500">
+          <li className="justify-content mb-2 flex h-8 cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-gray-200">
             <div>
               <i className="fas fa-bell"></i>
             </div>
@@ -26,7 +26,7 @@ const RightSidebar: React.FC = () => {
               <p className="text-xs">Notification</p>
             </div>
           </li>
-          <li className="h-8 flex items-center justify-content cursor-pointer space-x-3 p-2 rounded-md hover:bg-gray-200">
+          <li className="justify-content flex h-8 cursor-pointer items-center space-x-3 rounded-md p-2 hover:bg-gray-200">
             <div>
               <i className="fas fa-bullhorn"></i>
             </div>
@@ -42,13 +42,13 @@ const RightSidebar: React.FC = () => {
             <p className="font-semibold">Contacts</p>
           </div>
           <div className="flex items-center space-x-3 text-gray-500">
-            <button className="w-8 h-8 focus:outline-none rounded-full hover:bg-gray-200">
+            <button className="h-8 w-8 rounded-full hover:bg-gray-200 focus:outline-none">
               <i className="fab fa-youtube"></i>
             </button>
-            <button className="w-8 h-8 focus:outline-none rounded-full hover:bg-gray-200">
+            <button className="h-8 w-8 rounded-full hover:bg-gray-200 focus:outline-none">
               <i className="fas fa-search"></i>
             </button>
-            <button className="w-8 h-8 focus:outline-none rounded-full hover:bg-gray-200">
+            <button className="h-8 w-8 rounded-full hover:bg-gray-200 focus:outline-none">
               <i className="fas fa-ellipsis-h"></i>
             </button>
           </div>
@@ -60,11 +60,11 @@ const RightSidebar: React.FC = () => {
               .map((_, idx) => (
                 <li
                   key={idx}
-                  className="h-12 mb-2 flex items-center justify-content cursor-pointer space-x-2 p-2 rounded-md hover:bg-gray-200"
+                  className="justify-content mb-2 flex h-12 cursor-pointer items-center space-x-2 rounded-md p-2 hover:bg-gray-200"
                 >
                   <div>
                     <img
-                      className="w-8 h-8 rounded-full"
+                      className="h-8 w-8 rounded-full"
                       src={`https://random.imagecdn.app/200/${200 + idx}`}
                       alt="user"
                     />
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index d8e3f56..1c098a8 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -12,8 +12,8 @@ const LoginPage: React.FC = () => {
   });
 
   return (
-    <div className="w-full h-full flex items-center justify-center">
-      <div className="w-96 h-auto bg-white rounded-md shadow-md p-4">
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="h-auto w-96 rounded-md bg-white p-4 shadow-md">
         <Formik
           initialValues={{
             emailOrPhone: '',
@@ -47,8 +47,8 @@ const LoginPage: React.FC = () => {
               >
                 Login
               </Button>
-              <div className="mt-2 text-center pb-3 border-b border-gray-300">
-                <p className="text-primary cursor-pointer underline">
+              <div className="mt-2 border-b border-gray-300 pb-3 text-center">
+                <p className="cursor-pointer text-primary underline">
                   Forgot password?
                 </p>
               </div>
diff --git a/src/pages/newsfeed/NewsFeed.tsx b/src/pages/newsfeed/NewsFeed.tsx
index 85e7cea..4da595f 100644
--- a/src/pages/newsfeed/NewsFeed.tsx
+++ b/src/pages/newsfeed/NewsFeed.tsx
@@ -6,25 +6,25 @@ import { storiesData } from '../../data';
 
 const NewsFeed: React.FC = () => {
   return (
-    <div className="mt-6 w-full h-full pb-5">
+    <div className="mt-6 h-full w-full pb-5">
       {/* Story Section */}
-      <div className="w-full h-50 flex items-center justify-center space-x-2 overflow-hidden cursor-pointer my-6">
+      <div className="h-50 my-6 flex w-full cursor-pointer items-center justify-center space-x-2 overflow-hidden">
         <div
-          className="w-28 h-48 relative rounded-xl shadow "
+          className="relative h-48 w-28 rounded-xl shadow"
           style={{
             backgroundImage: `url('https://random.imagecdn.app/500/400')`,
           }}
         >
           <div
-            className="w-full absolute flex justify-center"
+            className="absolute flex w-full justify-center"
             style={{ bottom: '13%' }}
           >
-            <button className="focus:outline-none z-40 w-10 h-10 bg-primary rounded-full border-4 border-white">
-              <i className="text-white fas fa-plus"></i>
+            <button className="z-40 h-10 w-10 rounded-full border-4 border-white bg-primary focus:outline-none">
+              <i className="fas fa-plus text-white"></i>
             </button>
           </div>
-          <div className="bg-white z-30 absolute text-center bottom-0 p-2 pt-4 w-full h-auto rounded-b-lg ">
-            <p className="text-gray-500 text-sm font-semibold">Create Story</p>
+          <div className="absolute bottom-0 z-30 h-auto w-full rounded-b-lg bg-white p-2 pt-4 text-center">
+            <p className="text-sm font-semibold text-gray-500">Create Story</p>
           </div>
         </div>
         {storiesData.length
diff --git a/src/pages/newsfeed/index.tsx b/src/pages/newsfeed/index.tsx
index cb435db..a3eaabb 100644
--- a/src/pages/newsfeed/index.tsx
+++ b/src/pages/newsfeed/index.tsx
@@ -3,7 +3,7 @@ import NewsFeed from './NewsFeed';
 
 const NewsFeedPage: React.FC = () => {
   return (
-    <div className="w-[42.5rem] m-auto">
+    <div className="m-auto w-[42.5rem]">
       <NewsFeed />
     </div>
   );
diff --git a/src/pages/notfound/index.tsx b/src/pages/notfound/index.tsx
index 32ed2de..6439925 100644
--- a/src/pages/notfound/index.tsx
+++ b/src/pages/notfound/index.tsx
@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
 
 const PageNotFound: React.FC = () => {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center">
+    <div className="flex h-full w-full flex-col items-center justify-center">
       <p className="text-4xl">
         <span className="font-bold">404</span> | Page Not Found
       </p>
       <Link to="/">
-        <p className="mt-2 text-sm underline text-blue-600"></p>
+        <p className="mt-2 text-sm text-blue-600 underline"></p>
         Go Home
       </Link>
     </div>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 1b9e693..a4e445b 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -6,11 +6,11 @@ import { TPostView } from '../../types/post';
 const ProfilePage: React.FC = () => {
   const [postsView, setPostsView] = useState<TPostView>('listView');
   return (
-    <div className="w-full h-full">
-      <div className="w-full h-auto shadow bg-white rounded-md">
-        <div className="max-w-6xl h-full mx-auto bg-white">
+    <div className="h-full w-full">
+      <div className="h-auto w-full rounded-md bg-white shadow">
+        <div className="mx-auto h-full max-w-6xl bg-white">
           <div
-            className="h-[28.75rem] max-h-[28.75rem] w-full rounded-lg relative"
+            className="relative h-[28.75rem] max-h-[28.75rem] w-full rounded-lg"
             style={{
               backgroundImage: `url('https://random.imagecdn.app/1920/1080')`,
               backgroundRepeat: 'no-repeat',
@@ -19,82 +19,82 @@ const ProfilePage: React.FC = () => {
             }}
           >
             <div
-              className="absolute w-full flex items-center justify-center"
+              className="absolute flex w-full items-center justify-center"
               style={{ bottom: '-15px' }}
             >
               <div className="absolute bottom-[30px] right-[30px]">
-                <button className="focus:outline-none px-3 py-2 hover:bg-gray-50 font-semibold bg-white rounded-md text-sm">
+                <button className="rounded-md bg-white px-3 py-2 text-sm font-semibold hover:bg-gray-50 focus:outline-none">
                   <i className="fas fa-camera mr-2"></i>Edit Cover Photo
                 </button>
               </div>
             </div>
           </div>
-          <div className="h-full mx-auto px-10">
-            <div className="flex gap-5 items-end pb-5 border-b">
-              <div className="w-[10.25rem] h-[10.25rem] -mt-8 z-10">
+          <div className="mx-auto h-full px-10">
+            <div className="flex items-end gap-5 border-b pb-5">
+              <div className="z-10 -mt-8 h-[10.25rem] w-[10.25rem]">
                 <img
-                  className="w-full h-full border-4 border-primary rounded-full"
+                  className="h-full w-full rounded-full border-4 border-primary"
                   src="https://random.imagecdn.app/250/250"
                   alt="dp"
                 />
               </div>
-              <div className="flex-1 pb-2 flex-col">
+              <div className="flex-1 flex-col pb-2">
                 <p className="text-[2rem] font-bold">Saiful Islam Shihab</p>
-                <a className="text-sm text-gray-600 font-semibold hover:underline cursor-pointer">
+                <a className="cursor-pointer text-sm font-semibold text-gray-600 hover:underline">
                   528 friends
                 </a>
-                <div className="w-full flex items-center justify-between">
+                <div className="flex w-full items-center justify-between">
                   <div className="mt-2 flex items-center">
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer"
+                      className="cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-2"
+                      className="-translate-x-2 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-4"
+                      className="-translate-x-4 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-6"
+                      className="-translate-x-6 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-8"
+                      className="-translate-x-8 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-10"
+                      className="-translate-x-10 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-12"
+                      className="-translate-x-12 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                     <img
-                      className="rounded-full border-2 border-white cursor-pointer -translate-x-14"
+                      className="-translate-x-14 cursor-pointer rounded-full border-2 border-white"
                       alt="friend"
                       src="https://random.imagecdn.app/32/32"
                     />
                   </div>
 
                   <div className="flex items-center space-x-2">
-                    <button className="px-3 py-1.5 rounded-md bg-primary text-sm hover:bg-blue-600 text-white font-semibold focus:outline-none">
-                      <i className="fas fa-plus-circle  mr-2"></i>Add to Story
+                    <button className="rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-600 focus:outline-none">
+                      <i className="fas fa-plus-circle mr-2"></i>Add to Story
                     </button>
-                    <button className="px-3 py-1.5 bg-gray-200 text-sm hover:bg-gray-300 rounded-md font-semibold focus:outline-none">
+                    <button className="rounded-md bg-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-300 focus:outline-none">
                       <i className="fas fa-pen mr-2"></i>Edit Profile
                     </button>
-                    <button className="px-3 py-1.5 rounded-md bg-gray-100 text-sm hover:bg-gray-200 font-semibold focus:outline-none">
+                    <button className="rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold hover:bg-gray-200 focus:outline-none">
                       <i className="fas fa-ellipsis-h"></i>
                     </button>
                   </div>
@@ -102,27 +102,27 @@ const ProfilePage: React.FC = () => {
               </div>
             </div>
             <div className="mt-1 flex items-center justify-between">
-              <div className="flex mb-2 items-center space-x-2">
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+              <div className="mb-2 flex items-center space-x-2">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   Posts
                 </button>
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   About
                 </button>
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   Friends
                 </button>
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   Photos
                 </button>
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   Story Archrive
                 </button>
-                <button className="py-3 px-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md font-semibold focus:outline-none">
+                <button className="rounded-md px-2 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-100 focus:outline-none">
                   Videos
                 </button>
               </div>
-              <button className="px-3 py-1.5 rounded-md bg-gray-100 text-sm hover:bg-gray-200 font-semibold focus:outline-none">
+              <button className="rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold hover:bg-gray-200 focus:outline-none">
                 <i className="fas fa-ellipsis-h"></i>
               </button>
             </div>
@@ -130,11 +130,11 @@ const ProfilePage: React.FC = () => {
         </div>
       </div>
       {/* After bio content */}
-      <div className="max-w-6xl h-full mx-auto my-3">
+      <div className="mx-auto my-3 h-full max-w-6xl">
         <div className="grid grid-cols-5 gap-4">
-          <div className="flex flex-col gap-4 col-span-2">
-            <div className="flex flex-col gap-4 bg-white rounded-lg p-3 text-gray-600 shadow">
-              <p className="font-bold text-xl text-gray-800">Intro</p>
+          <div className="col-span-2 flex flex-col gap-4">
+            <div className="flex flex-col gap-4 rounded-lg bg-white p-3 text-gray-600 shadow">
+              <p className="text-xl font-bold text-gray-800">Intro</p>
               <div className="flex flex-col items-center gap-2">
                 <div className="flex flex-col items-center">
                   <p className="text-sm">Silence among noise</p>
@@ -142,19 +142,19 @@ const ProfilePage: React.FC = () => {
                     href="https://saiful-islam.vercel.app"
                     target="__blank"
                     rel="noreferrer"
-                    className="text-primary hover:underline text-sm"
+                    className="text-sm text-primary hover:underline"
                   >
                     https://saiful-islam.vercel.app
                   </a>
                 </div>
-                <button className="w-full px-3 py-1.5 rounded-md bg-gray-100 text-sm hover:bg-gray-200 font-semibold focus:outline-none">
+                <button className="w-full rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold hover:bg-gray-200 focus:outline-none">
                   Edit bio
                 </button>
               </div>
-              <div className="flex flex-col text-sm space-y-4">
+              <div className="flex flex-col space-y-4 text-sm">
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fas fa-briefcase text-gray-400 text-[1.25rem]"></i>
+                    <i className="fas fa-briefcase text-[1.25rem] text-gray-400"></i>
                   </span>
                   <p>
                     Full Stack Web Developer at{' '}
@@ -163,7 +163,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fas fa-graduation-cap text-gray-400 text-[1.25rem]"></i>
+                    <i className="fas fa-graduation-cap text-[1.25rem] text-gray-400"></i>
                   </span>
                   <p>
                     Studied B.Sc in SWE at{' '}
@@ -174,7 +174,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fas fa-home text-gray-400 text-[1.25rem]"></i>
+                    <i className="fas fa-home text-[1.25rem] text-gray-400"></i>
                   </span>
                   <p>
                     Lives in <span className="font-semibold">Dhaka</span>
@@ -182,7 +182,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fas fa-map-marker-alt text-gray-400 text-[1.25rem]"></i>
+                    <i className="fas fa-map-marker-alt text-[1.25rem] text-gray-400"></i>
                   </span>
                   <p>
                     From{' '}
@@ -193,7 +193,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fas fa-heart text-gray-400 text-[1.25rem]"></i>
+                    <i className="fas fa-heart text-[1.25rem] text-gray-400"></i>
                   </span>
                   <p>
                     <span className="font-semibold">Single</span>
@@ -201,7 +201,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fab fa-facebook text-gray-400 text-[1.25rem]"></i>
+                    <i className="fab fa-facebook text-[1.25rem] text-gray-400"></i>
                   </span>
                   <a
                     className="cursor-pointer hover:underline"
@@ -214,7 +214,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fab fa-instagram text-gray-400 text-[1.25rem]"></i>
+                    <i className="fab fa-instagram text-[1.25rem] text-gray-400"></i>
                   </span>
                   <a
                     className="cursor-pointer hover:underline"
@@ -227,7 +227,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fab fa-twitter text-gray-400 text-[1.25rem]"></i>
+                    <i className="fab fa-twitter text-[1.25rem] text-gray-400"></i>
                   </span>
                   <a
                     className="cursor-pointer hover:underline"
@@ -240,7 +240,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fab fa-github text-gray-400 text-[1.25rem]"></i>
+                    <i className="fab fa-github text-[1.25rem] text-gray-400"></i>
                   </span>
                   <a
                     className="cursor-pointer hover:underline"
@@ -253,7 +253,7 @@ const ProfilePage: React.FC = () => {
                 </div>
                 <div className="flex items-center space-x-2">
                   <span>
-                    <i className="fab fa-behance text-gray-400 text-[1.25rem]"></i>
+                    <i className="fab fa-behance text-[1.25rem] text-gray-400"></i>
                   </span>
                   <a
                     className="cursor-pointer hover:underline"
@@ -267,43 +267,43 @@ const ProfilePage: React.FC = () => {
               </div>
 
               <div>
-                <button className="w-full px-3 py-1.5 rounded-md bg-gray-100 text-sm hover:bg-gray-200 font-semibold focus:outline-none">
+                <button className="w-full rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold hover:bg-gray-200 focus:outline-none">
                   Edit details
                 </button>
               </div>
 
               <div className="flex items-center gap-3">
                 <img
-                  className="rounded-lg cursor-pointer"
+                  className="cursor-pointer rounded-lg"
                   alt="featured"
                   src="https://random.imagecdn.app/120/215"
                 />
                 <img
-                  className="rounded-lg cursor-pointer"
+                  className="cursor-pointer rounded-lg"
                   alt="featured"
                   src="https://random.imagecdn.app/120/215"
                 />
                 <img
-                  className="rounded-lg cursor-pointer"
+                  className="cursor-pointer rounded-lg"
                   alt="featured"
                   src="https://random.imagecdn.app/120/215"
                 />
               </div>
 
               <div>
-                <button className="w-full px-3 py-1.5 rounded-md bg-gray-100 text-sm hover:bg-gray-200 font-semibold focus:outline-none">
+                <button className="w-full rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold hover:bg-gray-200 focus:outline-none">
                   Edit featured
                 </button>
               </div>
             </div>
-            <div className="flex flex-col gap-4 bg-white rounded-lg p-3 text-gray-600 shadow">
+            <div className="flex flex-col gap-4 rounded-lg bg-white p-3 text-gray-600 shadow">
               <div className="flex items-center justify-between">
-                <p className="font-bold text-xl text-gray-800">Photos</p>
-                <a className="text-sm text-primary cursor-pointer hover:underline">
+                <p className="text-xl font-bold text-gray-800">Photos</p>
+                <a className="cursor-pointer text-sm text-primary hover:underline">
                   See all photos
                 </a>
               </div>
-              <div className="grid grid-cols-3 rounded-md overflow-hidden gap-1">
+              <div className="grid grid-cols-3 gap-1 overflow-hidden rounded-md">
                 <img
                   className="w-full"
                   alt="photo"
@@ -351,13 +351,13 @@ const ProfilePage: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="flex flex-col gap-4 bg-white rounded-lg p-3 text-gray-600 shadow">
+            <div className="flex flex-col gap-4 rounded-lg bg-white p-3 text-gray-600 shadow">
               <div className="flex justify-between">
                 <div>
-                  <p className="font-bold text-xl text-gray-800">Friends</p>
+                  <p className="text-xl font-bold text-gray-800">Friends</p>
                   <p>528 friends</p>
                 </div>
-                <a className="text-sm text-primary cursor-pointer hover:underline">
+                <a className="cursor-pointer text-sm text-primary hover:underline">
                   See all friends
                 </a>
               </div>
@@ -433,23 +433,23 @@ const ProfilePage: React.FC = () => {
             {/* Create post */}
             <CreatePostBox />
             {/* post filter box */}
-            <div className="bg-white rounded-md shadow p-2 mt-4 px-3 text-sm">
-              <div className="flex items-center justify-between pb-2 border-b">
+            <div className="mt-4 rounded-md bg-white p-2 px-3 text-sm shadow">
+              <div className="flex items-center justify-between border-b pb-2">
                 <div>
-                  <p className="text-xl text-gray-700 font-bold">Posts</p>
+                  <p className="text-xl font-bold text-gray-700">Posts</p>
                 </div>
                 <div className="flex items-center space-x-2">
-                  <button className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-md font-semibold focus:outline-none">
+                  <button className="rounded-md bg-gray-200 px-3 py-1.5 font-semibold hover:bg-gray-300 focus:outline-none">
                     <i className="fas fa-sliders-h mr-2"></i>Filters
                   </button>
-                  <button className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-md font-semibold focus:outline-none">
+                  <button className="rounded-md bg-gray-200 px-3 py-1.5 font-semibold hover:bg-gray-300 focus:outline-none">
                     <i className="fas fa-cog mr-2"></i>Manage Posts
                   </button>
                 </div>
               </div>
-              <div className="flex space-x-3 text-gray-500 mt-1 -mb-1">
+              <div className="-mb-1 mt-1 flex space-x-3 text-gray-500">
                 <button
-                  className={`font-semibold flex-1 h-8 focus:outline-none justify-center space-x-2 hover:bg-gray-100 rounded-md ${
+                  className={`h-8 flex-1 justify-center space-x-2 rounded-md font-semibold hover:bg-gray-100 focus:outline-none ${
                     postsView === 'listView' ? 'bg-gray-200' : undefined
                   }`}
                   onClick={() => setPostsView('listView')}
@@ -457,7 +457,7 @@ const ProfilePage: React.FC = () => {
                   <i className="fas fa-bars mr-2"></i>List View
                 </button>
                 <button
-                  className={`font-semibold flex-1 h-8 focus:outline-none justify-center space-x-2 hover:bg-gray-100 rounded-md  ${
+                  className={`h-8 flex-1 justify-center space-x-2 rounded-md font-semibold hover:bg-gray-100 focus:outline-none ${
                     postsView === 'gridView' ? 'bg-gray-200' : undefined
                   }`}
                   onClick={() => setPostsView('gridView')}
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index 7b8107a..5a9a219 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -11,8 +11,8 @@ const RegisterPage: React.FC = () => {
   });
 
   return (
-    <div className="w-full h-full flex items-center justify-center">
-      <div className="w-96 h-auto bg-white rounded-md shadow-md p-4">
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="h-auto w-96 rounded-md bg-white p-4 shadow-md">
         <Formik
           initialValues={{
             emailOrPhone: '',
diff --git a/yarn.lock b/yarn.lock
index 5975fa1..5929121 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2522,6 +2522,16 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.1.tgz#6cb1f5f3e1a8d8b5ea3f97d19be516d9ce9931bf"
+  integrity sha512-AnbeYZu0WGj+QgKciUgdMnRxrqcxltleZPgdwfA5104BHM3siBLONN/HLW1yS2HvzSNkzpQ/JAj+LN0jcJO+0w==
+
+prettier@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.0.tgz#d173ea0524a691d4c0b1181752f2b46724328cdf"
+  integrity sha512-J9odKxERhCQ10OC2yb93583f6UnYutOeiV5i0zEDS7UGTdUt0u+y8erxl3lBKvwo/JHyyoEdXjwp4dke9oyZ/g==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"