diff --git a/apps/learner-web-app/src/app/programs/[tenantId]/page.tsx b/apps/learner-web-app/src/app/[programName]/page.tsx
similarity index 97%
rename from apps/learner-web-app/src/app/programs/[tenantId]/page.tsx
rename to apps/learner-web-app/src/app/[programName]/page.tsx
index 0383fbec0..58aa3433f 100644
--- a/apps/learner-web-app/src/app/programs/[tenantId]/page.tsx
+++ b/apps/learner-web-app/src/app/[programName]/page.tsx
@@ -41,7 +41,7 @@ export default function ProgramDetailPage() {
   const params = useParams();
   const router = useRouter();
   const { t } = useTranslation();
-  const tenantId = params?.tenantId as string;
+  const programName = decodeURIComponent(params?.programName as string);
 
   const [program, setProgram] = useState<Program | null>(null);
   const [loading, setLoading] = useState(true);
@@ -49,12 +49,14 @@ export default function ProgramDetailPage() {
   const [enrolModalOpen, setEnrolModalOpen] = useState(false);
 
   useEffect(() => {
-    if (!tenantId) return;
+    if (!programName) return;
     const fetchProgram = async () => {
       try {
         const res = await getTenantInfo();
         const all: Program[] = res?.result || [];
-        const found = all.find((p) => p.tenantId === tenantId);
+        const found = all.find(
+          (p) => p.name.toLowerCase() === programName.toLowerCase()
+        );
         if (found) {
           setProgram(found);
         } else {
@@ -67,14 +69,14 @@ export default function ProgramDetailPage() {
       }
     };
     fetchProgram();
-  }, [tenantId]);
+  }, [programName]);
 
   const handleEnrolNow = () => {
     setEnrolModalOpen(true);
   };
 
   const handleLogin = () => {
-    router.push(`/login?tenantId=${tenantId}`);
+    router.push(`/login?tenantId=${program?.tenantId}`);
   };
 
   if (loading) {
@@ -358,7 +360,7 @@ export default function ProgramDetailPage() {
         open={enrolModalOpen}
         onClose={() => setEnrolModalOpen(false)}
         programName={program.name}
-        tenantId={tenantId}
+        tenantId={program.tenantId}
       />
     </>
   );
diff --git a/apps/learner-web-app/src/app/landing/page.tsx b/apps/learner-web-app/src/app/landing/page.tsx
index 67b714d0a..3d70269fe 100644
--- a/apps/learner-web-app/src/app/landing/page.tsx
+++ b/apps/learner-web-app/src/app/landing/page.tsx
@@ -359,8 +359,8 @@ export default function LandingPage() {
             >
               {t('LANDING.HOW_WOULD_YOU_LIKE_TO_GET_STARTED')}
             </Typography>
-            <Grid container spacing={3}>
-              <Grid item xs={12} md={6}>
+            <Grid container spacing={3} justifyContent="center">
+              <Grid item xs={12} sm={5} md={4}>
                 <RoleCard
                   icon={<MenuBookOutlinedIcon fontSize="inherit" />}
                   title={t('LANDING.ARE_YOU_HERE_TO_LEARN')}
@@ -369,7 +369,7 @@ export default function LandingPage() {
                   onClick={handleScrollToLearner}
                 />
               </Grid>
-              <Grid item xs={12} md={6}>
+              <Grid item xs={12} sm={5} md={4}>
                 <RoleCard
                   icon={<FavoriteBorderIcon fontSize="inherit" />}
                   title={t('LANDING.ARE_YOU_HERE_TO_VOLUNTEER')}
@@ -422,7 +422,7 @@ export default function LandingPage() {
                 <Typography>{t('LANDING.NO_PROGRAMS_AVAILABLE')}</Typography>
               </Box>
             ) : (
-              <Grid container spacing={3}>
+              <Grid container spacing={3} justifyContent="center">
                 {learnerPrograms.map((program, index) => {
                   const imageItem = program.programImages?.[0];
                   const image =
@@ -430,13 +430,13 @@ export default function LandingPage() {
                       ? imageItem
                       : (imageItem as any)?.description || '/images/default.png';
                   return (
-                    <Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
+                    <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
                       <ProgramCard
                         image={image}
                         title={program.name}
                         description={program.description}
                         buttonColor={PROGRAM_CARD_COLORS[index % PROGRAM_CARD_COLORS.length]}
-                        onExplore={() => router.push(`/programs/${program.tenantId}`)}
+                        onExplore={() => router.push(`/${encodeURIComponent(program.name)}`)}
                       />
                     </Grid>
                   );
@@ -484,7 +484,7 @@ export default function LandingPage() {
                   <Typography>{t('LANDING.LOADING_PROGRAMS')}</Typography>
                 </Box>
               ) : (
-                <Grid container spacing={3}>
+                <Grid container spacing={3} justifyContent="center">
                   {volunteerPrograms.map((program, index) => {
                     const imageItem = program.programImages?.[0];
                     const image =
@@ -492,13 +492,13 @@ export default function LandingPage() {
                         ? imageItem
                         : (imageItem as any)?.description || '/images/default.png';
                     return (
-                      <Grid item xs={12} sm={6} md={4} key={program.tenantId || index}>
+                      <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}>
                         <ProgramCard
                           image={image}
                           title={program.name}
                           description={program.description}
                           buttonColor={VOLUNTEER_CARD_COLORS[index % VOLUNTEER_CARD_COLORS.length]}
-                          onExplore={() => router.push(`/programs/${program.tenantId}`)}
+                          onExplore={() => router.push(`/${encodeURIComponent(program.name)}`)}
                         />
                       </Grid>
                     );
diff --git a/apps/learner-web-app/src/app/login/page.tsx b/apps/learner-web-app/src/app/login/page.tsx
index 2dfa29e89..53d06c5fd 100644
--- a/apps/learner-web-app/src/app/login/page.tsx
+++ b/apps/learner-web-app/src/app/login/page.tsx
@@ -849,7 +849,7 @@ const LoginPageContent = () => {
         primaryText={t('LANDING.ENROL_NOW') || 'Enrol Now'}
         primaryActionHandler={() => {
           setNotEnrolledModal(false);
-          router.push(`/programs/${notEnrolledTenantId}`);
+          router.push(`/${encodeURIComponent(notEnrolledProgramName)}`);
         }}
         // secondaryText={t('LEARNER_APP.PROGRAMS.MY_PROGRAMS') || 'My Programs'}
         // secondaryActionHandler={() => { setNotEnrolledModal(false); router.push('/programs'); }}
diff --git a/apps/learner-web-app/src/components/Header/Header.jsx b/apps/learner-web-app/src/components/Header/Header.jsx
index e20f6c46f..85df83e70 100644
--- a/apps/learner-web-app/src/components/Header/Header.jsx
+++ b/apps/learner-web-app/src/components/Header/Header.jsx
@@ -108,11 +108,17 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
         }}
         style={{ cursor: 'pointer' }}
       >
-        <Image src={appLogo} alt="Pratham Logo" width={200} height={40} />
+        <Image
+          src={appLogo}
+          alt="Pratham Logo"
+          width={200}
+          height={40}
+          style={{ width: 'clamp(100px, 40vw, 200px)', height: 'auto' }}
+        />
       </Box>
 
       {/* Language Selector and Logout */}
-      <Box display="flex" alignItems="center" gap={2}>
+      <Box display="flex" alignItems="center" gap={{ xs: 1, sm: 2 }}>
           {/* Login Button */}
         {isLogin && (
           <Button
@@ -122,13 +128,15 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
             sx={{
               fontFamily: 'Poppins',
               fontWeight: 600,
-              fontSize: '14px',
+              fontSize: { xs: '12px', sm: '14px' },
               textTransform: 'none',
               backgroundColor: '#FDBE16',
               color: '#1F1B13',
               borderRadius: '8px',
-              px: 2.5,
+              px: { xs: 1.5, sm: 2.5 },
               py: 0.8,
+              whiteSpace: 'nowrap',
+              minWidth: 'unset',
               '&:hover': {
                 backgroundColor: '#f0b000',
               },
@@ -149,8 +157,8 @@ const Header = ({ isShowLogout = false, isLogin = false }) => {
             sx={{
               fontFamily: 'Poppins',
               fontWeight: 400,
-              fontSize: '14px',
-              minWidth: '80px',
+              fontSize: { xs: '12px', sm: '14px' },
+              minWidth: { xs: '60px', sm: '80px' },
             }}
           >
             <MenuItem value="en">English</MenuItem>
diff --git a/apps/learner-web-app/src/components/ProgramCard/ProgramCard.tsx b/apps/learner-web-app/src/components/ProgramCard/ProgramCard.tsx
index 16a3a9696..ae539814c 100644
--- a/apps/learner-web-app/src/components/ProgramCard/ProgramCard.tsx
+++ b/apps/learner-web-app/src/components/ProgramCard/ProgramCard.tsx
@@ -46,7 +46,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
         }}
         sx={{
           width: '100%',
-          height: 220,
+          height: 160,
           objectFit: 'cover',
           display: 'block',
         }}
@@ -58,8 +58,8 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
           flexGrow: 1,
           display: 'flex',
           flexDirection: 'column',
-          gap: 1.5,
-          p: 2.5,
+          gap: 1,
+          p: 1.5,
         }}
       >
         <Typography
@@ -67,8 +67,8 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
           sx={{
             fontFamily: 'Poppins',
             fontWeight: 700,
-            fontSize: '16px',
-            lineHeight: '24px',
+            fontSize: '14px',
+            lineHeight: '20px',
             color: '#1F1B13',
           }}
         >
@@ -106,7 +106,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({
             lineHeight: '20px',
             textTransform: 'none',
             borderRadius: '8px',
-            py: 1.2,
+            py: 0.8,
             // '&:hover': {
             //   backgroundColor: buttonColor,
             //   filter: 'brightness(0.9)',
diff --git a/apps/learner-web-app/src/components/RoleCard/RoleCard.tsx b/apps/learner-web-app/src/components/RoleCard/RoleCard.tsx
index 6e7c6dc6b..d49567cfd 100644
--- a/apps/learner-web-app/src/components/RoleCard/RoleCard.tsx
+++ b/apps/learner-web-app/src/components/RoleCard/RoleCard.tsx
@@ -57,27 +57,27 @@ const RoleCard: React.FC<RoleCardProps> = ({
       <CardActionArea
         disableRipple={!onClick}
         sx={{
-          p: { xs: 3, md: 4 },
+          p: { xs: 2, md: 2.5 },
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           textAlign: 'center',
-          gap: 1.5,
+          gap: 1,
           '&:hover .MuiCardActionArea-focusHighlight': { opacity: 0 },
         }}
       >
         <Box
           sx={{
-            width: 56,
-            height: 56,
+            width: 44,
+            height: 44,
             borderRadius: '50%',
             backgroundColor: theme.iconBackground,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            mb: 1,
+            mb: 0.5,
             color: theme.iconColor,
-            fontSize: 28,
+            fontSize: 22,
           }}
         >
           {icon}
@@ -88,8 +88,8 @@ const RoleCard: React.FC<RoleCardProps> = ({
           sx={{
             fontFamily: 'Poppins',
             fontWeight: 700,
-            fontSize: '18px',
-            lineHeight: '26px',
+            fontSize: '15px',
+            lineHeight: '22px',
             color: '#1F1B13',
           }}
         >
@@ -101,8 +101,8 @@ const RoleCard: React.FC<RoleCardProps> = ({
           sx={{
             fontFamily: 'Poppins',
             fontWeight: 400,
-            fontSize: '14px',
-            lineHeight: '22px',
+            fontSize: '12px',
+            lineHeight: '18px',
             color: '#5C5952',
           }}
         >