diff --git a/src/assets/steps/lock_file_visual.png b/src/assets/steps/lock_file_visual.png
new file mode 100644
index 0000000..96b2f7c
Binary files /dev/null and b/src/assets/steps/lock_file_visual.png differ
diff --git a/src/assets/steps/lock_visual.png b/src/assets/steps/lock_visual.png
new file mode 100644
index 0000000..457c378
Binary files /dev/null and b/src/assets/steps/lock_visual.png differ
diff --git a/src/assets/telegram_visual.png b/src/assets/steps/send_visual.png
similarity index 100%
rename from src/assets/telegram_visual.png
rename to src/assets/steps/send_visual.png
diff --git a/src/components/navBar/NavBar.tsx b/src/components/navBar/NavBar.tsx
index f3f9e9b..e662dd4 100644
--- a/src/components/navBar/NavBar.tsx
+++ b/src/components/navBar/NavBar.tsx
@@ -62,7 +62,7 @@ export function NavBar() {
 
           <Label
             htmlFor="dev-mode"
-            className="flex items-center space-x-2 py-1"
+            className="flex items-center space-x-2 py-1 text-white"
           >
             <Switch
               id="dev-mode"
@@ -72,7 +72,7 @@ export function NavBar() {
             <span>Dev Mode</span>
           </Label>
 
-          <hr className="border-grey-700 border-t" />
+          <hr className="border-grey-600 border-t" />
 
           <div className="mb-16">
             <Button
diff --git a/src/components/navBar/TopNavBar.tsx b/src/components/navBar/TopNavBar.tsx
index a2989c7..6fcc691 100644
--- a/src/components/navBar/TopNavBar.tsx
+++ b/src/components/navBar/TopNavBar.tsx
@@ -1,6 +1,8 @@
 import { LogOut } from 'react-feather';
+import { Link } from 'react-router-dom';
 import { useLoginLogout } from '@/hooks/useLoginLogout';
 import useUserStore from '@/stores/useUser.store';
+import iExecLogo from '../../assets/iexec-logo.svg';
 import { AddressChip } from './AddressChip';
 
 export function TopNavBar() {
@@ -8,9 +10,12 @@ export function TopNavBar() {
   const { logout } = useLoginLogout();
 
   return (
-    <>
+    <div className="flex items-center justify-between pt-5 lg:pt-10">
+      <Link to="/my-data" className="-m-2 flex items-center p-2 lg:invisible">
+        <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
+      </Link>
       {isConnected && (
-        <div className="flex w-full max-w-[1260px] items-center justify-end pt-5 pr-9 lg:pt-10 lg:pr-0">
+        <div className="flex max-w-[1260px] items-center pr-10 lg:pr-0">
           <AddressChip address={address!} className="ml-6" />
           <button
             type="button"
@@ -21,6 +26,6 @@ export function TopNavBar() {
           </button>
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index f881fa0..7ed80fa 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -14,8 +14,7 @@ const buttonVariants = cva(
         white: 'hover:bg-grey-400 bg-white text-black',
         danger: 'bg-[#BF3131] text-white hover:bg-[#BF3131]/40',
         outline: 'border-grey-50 border hover:bg-white/10 hover:text-white',
-        discreet_outline:
-          'border-grey-600 hover:bg-grey-800 border hover:text-white',
+        discreet_outline: 'border-grey-600 hover:bg-grey-800 border text-white',
         chip: 'from-grey-500 hover:before:bg-background relative z-0 overflow-hidden bg-gradient-to-b to-transparent before:absolute before:inset-px before:-z-10 before:rounded-[29px] before:bg-[#14141a] before:duration-300',
         text: '',
       },
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index e129b52..c673933 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -14,9 +14,9 @@ export default function MainLayout() {
   return (
     <div className="flex">
       <NavBar />
-      <div className="m:px-10 w-full px-6">
+      <div className="m:px-10 mx-auto w-full max-w-[1260px] px-6">
         <TopNavBar />
-        <div className="mt-10 mb-24 max-w-[1260px] flex-1">
+        <div className="mt-10 mb-24 max-w-[1260px]">
           {!isConnected ? <ConnectWallet /> : <Outlet />}
         </div>
       </div>
diff --git a/src/modules/myData/protectedData/GrantAccessModal.tsx b/src/modules/myData/protectedData/GrantAccessModal.tsx
index 8bf80e5..06397bb 100644
--- a/src/modules/myData/protectedData/GrantAccessModal.tsx
+++ b/src/modules/myData/protectedData/GrantAccessModal.tsx
@@ -204,6 +204,17 @@ export default function GrantAccessModal({
                 )}
             </Alert>
           )}
+          <div className="mt-2 flex justify-center gap-5">
+            <Button
+              variant="outline"
+              onClick={() => setSwitchingModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={grantAccessMutation.isPending}>
+              Add User
+            </Button>
+          </div>
           <DocLink className="bg-grey-600 border-grey-500">
             dataprotector-sdk / Method called:{' '}
             <a
@@ -232,17 +243,6 @@ export default function GrantAccessModal({
               {'}'});
             </a>
           </DocLink>
-          <div className="mt-2 flex justify-center gap-5">
-            <Button
-              variant="outline"
-              onClick={() => setSwitchingModalOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" isLoading={grantAccessMutation.isPending}>
-              Add User
-            </Button>
-          </div>
         </form>
       </DialogContent>
     </Dialog>
diff --git a/src/modules/myData/protectedData/ProtectedDataDetails.tsx b/src/modules/myData/protectedData/ProtectedDataDetails.tsx
index 93fd823..282089d 100644
--- a/src/modules/myData/protectedData/ProtectedDataDetails.tsx
+++ b/src/modules/myData/protectedData/ProtectedDataDetails.tsx
@@ -15,7 +15,7 @@ export function ProtectedDataDetails({
     <div className="grid gap-6 md:grid-cols-3">
       <div className="radial-bg before:bg-grey-800 md:before:bg-grey-900 rounded-20 relative z-0 flex flex-col gap-6 overflow-hidden p-8 before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)]">
         <div className="z-30 grid gap-6">
-          <div className="flex items-center gap-4">
+          <div className="font-anybody flex items-center gap-4 font-extrabold">
             <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
               <ProtectedDataIcon size={20} />
             </div>
@@ -39,7 +39,7 @@ export function ProtectedDataDetails({
       </div>
       <div className="radial-bg before:bg-grey-800 md:before:bg-grey-900 rounded-20 relative z-0 flex flex-col gap-6 overflow-hidden p-8 before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)]">
         <div className="z-30 grid gap-6">
-          <div className="flex items-center gap-4">
+          <div className="font-anybody flex items-center gap-4 font-extrabold">
             <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
               <User size={20} />
             </div>
@@ -63,7 +63,7 @@ export function ProtectedDataDetails({
       </div>
       <div className="radial-bg before:bg-grey-800 md:before:bg-grey-900 rounded-20 relative z-0 flex flex-col gap-6 overflow-hidden p-8 before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)]">
         <div className="z-30 grid gap-6">
-          <div className="flex items-center gap-4">
+          <div className="font-anybody flex items-center gap-4 font-extrabold">
             <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
               <Link size={20} />
             </div>
diff --git a/src/router.tsx b/src/router.tsx
index 221d968..cccdc2c 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -45,6 +45,6 @@ export const router = createBrowserRouter(
     },
   ],
   {
-    basename: '/web3messaging', // Remplacez '/votre-basepath' par le chemin de base souhaité
+    basename: '/web3messaging',
   }
 );
diff --git a/src/views/contact/contactList.tsx b/src/views/contact/contactList.tsx
index 342fb14..a1eecd5 100644
--- a/src/views/contact/contactList.tsx
+++ b/src/views/contact/contactList.tsx
@@ -154,7 +154,7 @@ export default function ContactList() {
         <h1 className="text-xl font-bold">Send Message to contact</h1>
         <p>Email or telegram contact info</p>
       </div>
-      <div className="flex flex-wrap gap-x-6 gap-y-3">
+      <div className="-mb-2 flex gap-x-6 gap-y-3 overflow-auto pb-2">
         {Object.keys(COLOR_CLASSES).map((key) => {
           return (
             <Button
@@ -176,16 +176,20 @@ export default function ContactList() {
           );
         })}
       </div>
-      <div className="border-grey-600 my-5 grid w-full grid-cols-[2fr_2fr_2fr_2fr_2fr_1fr] items-center overflow-hidden rounded-3xl border [&>div]:px-5 [&>div]:py-5">
-        <div className="text-grey-300 text-xs font-semibold">Name</div>
-        <div className="text-grey-300 text-xs font-semibold">
+      <div className="border-grey-600 my-5 grid grid-cols-[2fr_2fr_2fr_2fr_2fr_1fr] items-center overflow-auto rounded-3xl border [&>div]:px-5 [&>div]:py-5">
+        <div className="text-grey-300 min-w-32 text-xs font-semibold text-nowrap uppercase">
+          Name
+        </div>
+        <div className="text-grey-300 text-xs font-semibold text-nowrap uppercase">
           Protected data address
         </div>
-        <div className="text-grey-300 text-xs font-semibold">Owner address</div>
-        <div className="text-grey-300 text-xs font-semibold">
+        <div className="text-grey-300 text-xs font-semibold text-nowrap uppercase">
+          Owner address
+        </div>
+        <div className="text-grey-300 text-xs font-semibold text-nowrap uppercase">
           Remaining access
         </div>
-        <div className="text-grey-300 col-span-2 text-xs font-semibold">
+        <div className="text-grey-300 col-span-2 min-w-52 text-xs font-semibold text-nowrap uppercase">
           TYPE (Telegram/Mail)
         </div>
         {!pagesOfContacts || pagesOfContacts?.length === 0 ? (
@@ -218,7 +222,9 @@ export default function ContactList() {
                 </div>
                 <div className="truncate">
                   <span className="truncate whitespace-nowrap">
-                    {contact.owner === userAddress ? 'Me' : contact.owner}
+                    {contact.owner === userAddress
+                      ? `(Mine) ${contact.owner}`
+                      : contact.owner}
                   </span>
                 </div>
                 <div className="truncate">{contact.volume}</div>
diff --git a/src/views/myData/addProtectedData.tsx b/src/views/myData/addProtectedData.tsx
index 1efadde..2c4d480 100644
--- a/src/views/myData/addProtectedData.tsx
+++ b/src/views/myData/addProtectedData.tsx
@@ -50,7 +50,7 @@ export default function AddProtectedData() {
   });
 
   const updateStep = (step: number) => {
-    navigate(`${location.pathname}?step=${step}`);
+    navigate(`/my-data/add-protected-data?step=${step}`);
     setCurrentStep(step);
   };
 
@@ -85,7 +85,7 @@ export default function AddProtectedData() {
 
   const handleBackClick = () => {
     if (currentStep === 0) {
-      navigate('/my-data');
+      // navigate('/my-data');
     } else {
       updateStep(currentStep - 1);
     }
@@ -130,7 +130,7 @@ export default function AddProtectedData() {
       queryClient.invalidateQueries({
         queryKey: ['apps', userAddress],
       });
-      navigate('/my-data');
+      // navigate('/my-data');
       toast({
         title: 'You have successfully add a new protected data.',
         variant: 'success',
@@ -210,7 +210,9 @@ export default function AddProtectedData() {
                     <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
                       {COLOR_CLASSES[key].icon}
                     </div>
-                    <p className="font-anybody capitalize">{key}</p>
+                    <p className="font-anybody font-extrabold capitalize">
+                      {key}
+                    </p>
                   </div>
                   <p>{COLOR_CLASSES[key].dataReadableType}</p>
                 </div>
diff --git a/src/views/myData/protectedData.tsx b/src/views/myData/protectedData.tsx
index c852499..837642c 100644
--- a/src/views/myData/protectedData.tsx
+++ b/src/views/myData/protectedData.tsx
@@ -103,7 +103,7 @@ export default function ProtectedData() {
           protectedData={protectedData.data}
         />
       )}
-      <h1 className="relative w-fit text-4xl sm:text-left md:max-w-3/4 md:text-center">
+      <h1 className="relative mt-9 w-fit text-4xl sm:text-left md:mt-0 md:max-w-3/4 md:text-center">
         {protectedData.data && (
           <span
             className={cn(
@@ -124,7 +124,7 @@ export default function ProtectedData() {
         userAddress={userAddress}
       />
       <div className="space-x-2">
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex flex-col items-center justify-between gap-2 text-center text-pretty sm:flex-row sm:text-left">
           <div>
             <h2 className="text-xl font-bold">Authorized users</h2>
             <p>
@@ -139,11 +139,11 @@ export default function ProtectedData() {
             Authorize new user
           </Button>
         </div>
-        <div className="border-grey-600 my-5 grid w-full grid-cols-[2fr_2fr_1fr] items-center overflow-hidden rounded-3xl border [&>div]:px-5 [&>div]:py-5">
-          <div className="text-grey-300 text-xs font-semibold">
+        <div className="border-grey-600 my-5 grid w-full grid-cols-[2fr_2fr_1fr] items-center overflow-auto rounded-3xl border [&>div]:px-5 [&>div]:py-5">
+          <div className="text-grey-300 text-xs font-semibold text-nowrap uppercase">
             User address
           </div>
-          <div className="text-grey-300 col-span-2 text-xs font-semibold">
+          <div className="text-grey-300 col-span-2 text-xs font-semibold text-nowrap uppercase">
             Number of Access
           </div>
           {!grantedAccess.data || grantedAccess.data?.length === 0 ? (
@@ -194,7 +194,7 @@ export default function ProtectedData() {
           )}
         </div>
       </div>
-      <Button asChild variant="outline" className="ml-auto w-fit">
+      <Button asChild variant="outline" className="mx-auto w-fit sm:mr-0">
         <Link to="/my-data">Back to my data</Link>
       </Button>
       <DocLink>
diff --git a/src/views/myData/protectedDataList.tsx b/src/views/myData/protectedDataList.tsx
index ca76b21..eccbc95 100644
--- a/src/views/myData/protectedDataList.tsx
+++ b/src/views/myData/protectedDataList.tsx
@@ -122,7 +122,7 @@ export default function ProtectedDataList() {
     chunkArray(getProtectedDataByType(selectedTab) || [], itemsPerPage);
 
   return (
-    <div className="grid gap-10">
+    <div className="flex flex-col gap-10">
       <div className="radial-bg before:bg-grey-800 relative z-0 grid gap-6 overflow-hidden rounded-2xl p-8 before:absolute before:inset-px before:-z-10 before:rounded-[15px] md:pr-56">
         <div>
           <h1 className="text-center sm:text-left">Protect a new data</h1>
@@ -162,7 +162,7 @@ export default function ProtectedDataList() {
             authorize, and revoke access.
           </p>
         </div>
-        <div className="flex flex-wrap gap-x-6 gap-y-3">
+        <div className="-mb-2 flex gap-x-6 gap-y-3 overflow-auto pb-2">
           {Object.keys(COLOR_CLASSES).map((key) => {
             return (
               <Button
diff --git a/src/views/resources/index.tsx b/src/views/resources/index.tsx
index fcfaaa5..c5c72a5 100644
--- a/src/views/resources/index.tsx
+++ b/src/views/resources/index.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import telegram_visual from '@/assets/telegram_visual.png';
+import lock_file_visual from '@/assets/steps/lock_file_visual.png';
+import lock_visual from '@/assets/steps/lock_visual.png';
+import send_visual from '@/assets/steps/send_visual.png';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/utils/style.utils';
 import { steps } from './steps';
@@ -7,12 +9,14 @@ import { steps } from './steps';
 export default function Resources() {
   const [currentStep, setCurrentStep] = useState(0);
 
+  const stepsVisual = [send_visual, lock_visual, lock_file_visual];
+
   return (
     <div className="flex flex-col gap-16 md:flex-row">
-      <div className="radial-bg relative max-h-52 min-h-52 overflow-hidden rounded-2xl p-px md:max-h-136 md:w-2/5">
+      <div className="radial-bg relative max-h-52 min-h-52 min-w-72 overflow-hidden rounded-2xl p-px md:max-h-136 md:w-2/5">
         <div className="bg-background absolute inset-px z-0 overflow-hidden rounded-[calc(16px-1px)] before:absolute before:right-0 before:z-0 before:aspect-square before:h-1/3 before:scale-110 before:rounded-full before:bg-[#BC70FD] before:blur-[100px] after:absolute after:top-0 after:right-0 after:-z-10 after:aspect-[1/2] after:h-full after:scale-125 after:rounded-full after:bg-[#00115C]/70 after:blur-3xl md:before:translate-x-1/2 md:after:translate-x-1/3 md:after:-translate-y-1/3">
           <img
-            src={telegram_visual}
+            src={stepsVisual[currentStep]}
             className="z-30 mx-auto mt-8 w-4/5 max-w-64 md:mt-20"
             alt=""
           />
@@ -26,8 +30,13 @@ export default function Resources() {
           {steps.length} steps
         </p>
         {steps.map((step, index) => (
-          <div key={index} className="flex gap-4">
-            <div className="flex flex-col items-center">
+          <div key={index} className="flex min-h-16 gap-4">
+            <Button
+              onClick={() => setCurrentStep(index)}
+              className="flex flex-col items-center justify-normal gap-0"
+              variant="text"
+              size="none"
+            >
               <span
                 className={cn(
                   'flex size-10 items-center justify-center rounded-full border',
@@ -46,25 +55,17 @@ export default function Resources() {
                   )}
                 />
               )}
-            </div>
-            <div className="flex flex-col justify-end space-y-4 py-2">
-              <h2 className="text-base!">{step.title}</h2>
-              {currentStep === index && <div>{step.content}</div>}
-              <div className="mt-2 flex justify-end gap-5">
-                {currentStep === index && currentStep > 0 && (
-                  <Button
-                    variant="outline"
-                    onClick={() => setCurrentStep((prev) => prev - 1)}
-                  >
-                    Previous step
-                  </Button>
-                )}
-                {currentStep === index && currentStep !== steps.length - 1 && (
-                  <Button onClick={() => setCurrentStep((prev) => prev + 1)}>
-                    Next step
-                  </Button>
-                )}
-              </div>
+            </Button>
+            <div className="flex max-w-full grow flex-col space-y-4.5 py-2">
+              <Button
+                variant="text"
+                size="none"
+                className="justify-normal text-left"
+                onClick={() => setCurrentStep(index)}
+              >
+                <h2 className="text-base! text-wrap!">{step.title}</h2>
+              </Button>
+              {currentStep === index && <>{step.content}</>}
             </div>
           </div>
         ))}
diff --git a/src/views/resources/steps.tsx b/src/views/resources/steps.tsx
index 4b66120..6c9fbdd 100644
--- a/src/views/resources/steps.tsx
+++ b/src/views/resources/steps.tsx
@@ -5,7 +5,9 @@ export const steps = [
     title: 'Create a protected data',
     content: (
       <>
-        Type: <strong>Telegram</strong>
+        <p>
+          Type: <strong>Telegram</strong>
+        </p>
         <DocLink className="w-full" forceActive={true}>
           dataprotector-sdk / Method called:{' '}
           <a
@@ -29,9 +31,9 @@ export const steps = [
             {'}'});
           </a>
         </DocLink>
-        OR
-        <br />
-        Type: <strong>Mail</strong>
+        <p>
+          Or type: <strong>Mail</strong>
+        </p>
         <DocLink className="w-full" forceActive={true}>
           dataprotector-sdk / Method called:{' '}
           <a
@@ -91,9 +93,10 @@ export const steps = [
     title: 'Send a message',
     content: (
       <>
-        Send a message with granted access wallet
-        <br />
-        Type : <strong>Telegram</strong>
+        <p>Send a message with granted access wallet</p>
+        <p>
+          Type: <strong>Telegram</strong>
+        </p>
         <DocLink forceActive={true}>
           web3telegram / Method called:{' '}
           <a
@@ -114,9 +117,9 @@ export const steps = [
             {'}'});
           </a>
         </DocLink>
-        OR
-        <br />
-        Type : <strong>Mail</strong>
+        <p>
+          Or type: <strong>Mail</strong>
+        </p>
         <DocLink forceActive={true}>
           web3mail / Method called:{' '}
           <a
diff --git a/vite.config.ts b/vite.config.ts
index d1f9a2d..361c0f2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,12 +5,8 @@ import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
-  // In prod, app will be served under `demo.iex.ec/web3messaging` path
-  const basePath =
-    env.SET_SUBPATH_FOR_PROD === 'true' ? '/web3messaging' : '/';
-  console.log('[vite] Building with base path:', basePath);
   return {
-    base: basePath,
+    base: "/web3messaging",
     define: {
       'process.env.NEXT_PUBLIC_SECURE_SITE_ORIGIN': JSON.stringify(
         env.NEXT_PUBLIC_SECURE_SITE_ORIGIN || 'https://secure.walletconnect.org'