diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 634e86e4..18cf0a1c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -439,7 +439,8 @@
     "START_TIME_ERROR": "Start time cannot be later than end time.",
     "END_TIME_ERROR": "End time cannot be earlier than start time.",
     "START_DATE_ERROR": "Start date cannot be later than end date.",
-    "END_DATE_ERROR": "End date cannot be earlier than start date."
+    "END_DATE_ERROR": "End date cannot be earlier than start date.",
+    "IDENTIFIER_NOT_FOUND": "Identifier not found! Cannot Open Content!"
   },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center requested successfully",
@@ -596,35 +597,32 @@
     "BOARD": "Board",
     "CHOOSE_BOARD": "Choose which Board the Learner is going to be enrolled in",
     "CHOOSE_SUBJECT": "Choose which subjects the learner is enrolling for",
-    "SUBJECTS_ENROLLED":"Subjects Enrolled",
-    "EXAM_REGISTRATION_FEES_PAID":"Exam Registration Fees Paid?",
+    "SUBJECTS_ENROLLED": "Subjects Enrolled",
+    "EXAM_REGISTRATION_FEES_PAID": "Exam Registration Fees Paid?",
     "EDIT": "Edit",
     "SURE_GO_BACK": "Are you sure you want to go back? Your progress might be lost."
   },
   "OBSERVATION": {
     "OBSERVATION_START": "Start Observation",
-    "OBSERVATION_DETAILS":"Observation Details",
-    "ADD_ENTITY":"Add {{entityType}} in observation list",
-    "SEARCH_ENTITY":"Search {{entityType}} name",
-    "OBSERVATIONS":"{{name}} Observations",
-    "SEARCH_OBSERVATIONS":"Search Observations",
-    "CONTINUE":"Continue",
-    "SUBMITTED":"Submitted",
-    "FORM_SAVED_SUCCESSFULLY":"Form changes saved successfully",
-    "FORM_SUBMIT_SUCCESSFULLY":"Form submitted successfully",
-    "NOT_STARTED":"Not Started",
-    "COMPLETED":"Completed",
-    "INPROGRESS":"In-Progress",
-    "NO_DATA_FOUND":"No {{entity}} found",
-    "NO_RESULT_FOUND":"No Observations found for {{entity}}",
-    "NO_OBSERVATION_EXPIRED":"No observation expired for {{entity}}",
-    "DAYS_LEFT":"Days left",
-    "THIS_OBSERVATION_EXPIRED":"This observation is expired",
-    "DUE_DATE":"Due date",
-    "SURVEY_FORMS":"Survey Forms",
-    "OBSERVATION_STATUS":"Observation Status"
-
-
-}
-  
+    "OBSERVATION_DETAILS": "Observation Details",
+    "ADD_ENTITY": "Add {{entityType}} in observation list",
+    "SEARCH_ENTITY": "Search {{entityType}} name",
+    "OBSERVATIONS": "{{name}} Observations",
+    "SEARCH_OBSERVATIONS": "Search Observations",
+    "CONTINUE": "Continue",
+    "SUBMITTED": "Submitted",
+    "FORM_SAVED_SUCCESSFULLY": "Form changes saved successfully",
+    "FORM_SUBMIT_SUCCESSFULLY": "Form submitted successfully",
+    "NOT_STARTED": "Not Started",
+    "COMPLETED": "Completed",
+    "INPROGRESS": "In-Progress",
+    "NO_DATA_FOUND": "No {{entity}} found",
+    "NO_RESULT_FOUND": "No Observations found for {{entity}}",
+    "NO_OBSERVATION_EXPIRED": "No observation expired for {{entity}}",
+    "DAYS_LEFT": "Days left",
+    "THIS_OBSERVATION_EXPIRED": "This observation is expired",
+    "DUE_DATE": "Due date",
+    "SURVEY_FORMS": "Survey Forms",
+    "OBSERVATION_STATUS": "Observation Status"
+  }
 }
diff --git a/src/components/PieChartGraph.tsx b/src/components/PieChartGraph.tsx
index 2cda35ec..bb7f0edd 100644
--- a/src/components/PieChartGraph.tsx
+++ b/src/components/PieChartGraph.tsx
@@ -62,81 +62,84 @@ const PieChartGraph: React.FC<PieChartGraphProps> = ({ stagesCount }) => {
   };
 
   return (
+    <Box
+      sx={{
+        background: '#FFF8F2',
+        p: '16px',
+        mt: 2,
+        boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
+        borderRadius: '8px', // Optional: to make the corners rounded
+        '@media (max-width: 700px)': {
+          p: '16px 16px 0px',
+        },
+      }}
+    >
       <Box
         sx={{
-          background: '#FFF8F2',
-          p: '16px',
-          mt: 2,
-          '@media (max-width: 700px)': {
-            p: '16px 16px 0px',
-          },
+          color: theme.palette.warning['400'],
+          fontSize: '14px',
+          fontWeight: '600',
         }}
       >
-        <Box
-          sx={{
-            color: theme.palette.warning['400'],
-            fontSize: '14px',
-            fontWeight: '600',
-          }}
-        >
-          Stages and Number of Students
-        </Box>
-
-        <Box
-          sx={{
-            height: 150,
-            '@media (min-width: 400px)': {
-              height: 200,
-            },
-            '@media (min-width: 500px)': {
-              height: 300,
-            },
-            '@media (min-width: 700px)': {
-              height: 400,
-            },
-          }}
-        >
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={data}
-                cx="50%"
-                cy="50%"
-                labelLine={false}
-                label={false}
-                outerRadius="80%"
-                fill="#8884d8"
-                dataKey="value"
-              >
-                {data.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={COLORS[index % COLORS.length]}
-                  />
-                ))}
-              </Pie>
+        Stages and Number of Students
+      </Box>
 
-              {isMobile ? (
-                <Legend
-                  layout="vertical"
-                  align="right"
-                  verticalAlign="middle"
-                  formatter={renderLegendText}
-                  iconType="circle"
-                />
-              ) : (
-                <Legend
-                  layout="horizontal"
-                  align="center"
-                  verticalAlign="bottom"
-                  formatter={renderLegendText}
-                  iconType="circle"
+      <Box
+        sx={{
+          height: 150,
+          '@media (min-width: 400px)': {
+            height: 200,
+          },
+          '@media (min-width: 500px)': {
+            height: 300,
+          },
+          '@media (min-width: 700px)': {
+            height: 400,
+          },
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={false}
+              outerRadius="80%"
+              fill="#8884d8"
+              dataKey="value"
+            >
+              {data.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
                 />
-              )}
-            </PieChart>
-          </ResponsiveContainer>
-        </Box>
+              ))}
+            </Pie>
+
+            {isMobile ? (
+              <Legend
+                layout="vertical"
+                align="right"
+                verticalAlign="middle"
+                formatter={renderLegendText}
+                iconType="circle"
+              />
+            ) : (
+              <Legend
+                layout="horizontal"
+                align="center"
+                verticalAlign="bottom"
+                formatter={renderLegendText}
+                iconType="circle"
+              />
+            )}
+          </PieChart>
+        </ResponsiveContainer>
       </Box>
+    </Box>
+
   );
 };
 
diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
index 4c1a1af2..4667ded5 100644
--- a/src/components/SessionCardFooter.tsx
+++ b/src/components/SessionCardFooter.tsx
@@ -125,6 +125,11 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
     fetchTopicSubtopic();
   }, [item]);
 
+  const handleComponentOpen = () => {
+    setSelectedTopic('');
+    setSelectedSubtopics([]);
+  };
+
   const handleTopicSelection = (topic: string) => {
     setSelectedTopic(topic);
     console.log(topic);
@@ -223,6 +228,15 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
     updateTopicSubtopic();
   };
 
+  const handleClick = () => {
+    handleComponentOpen();
+    if (topicList && transformedTasks && eventStatus === EventStatus.UPCOMING) {
+      handleOpen();
+    } else {
+      handleError();
+    }
+  };
+
   useEffect(() => {
     const startDateTime = convertUTCToIST(item?.startDateTime);
     const startDate = startDateTime.date;
@@ -336,13 +350,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
             cursor: 'pointer',
             alignItems: 'center',
           }}
-          onClick={
-            topicList &&
-            transformedTasks &&
-            eventStatus === EventStatus.UPCOMING
-              ? handleOpen
-              : handleError
-          }
+          onClick={handleClick}
         >
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <PriorityHighIcon
diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx
index 1beb1b45..dd43998b 100644
--- a/src/components/TopicDetails.tsx
+++ b/src/components/TopicDetails.tsx
@@ -16,6 +16,7 @@ import { EventStatus } from '@/utils/app.constant';
 import { RequisiteType } from '../../app.config';
 import NoDataFound from './common/NoDataFound';
 import router from 'next/router';
+import { showToastMessage } from './Toastify';
 interface TopicDetailsProps {
   topic: string;
   subTopic: [];
@@ -60,7 +61,11 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
 
   const handlePlayers = (identifier: string) => {
     sessionStorage.setItem('previousPage', window.location.href);
-    router.push(`/play/content/${identifier}`);
+    if (identifier !== undefined && identifier !== '') {
+      router.push(`/play/content/${identifier}`);
+    } else {
+      showToastMessage(t('CENTER_SESSION.IDENTIFIER_NOT_FOUND'), 'error');
+    }
   };
 
   return (
@@ -198,6 +203,10 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                     <Grid item xs={6} sx={{ mt: 2 }} key={item.name}>
                       <Box
                         className="facilitator-bg"
+                        sx={{
+                          backgroundImage: `url(${item?.appIcon ? item.appIcon : '/decorationBg.png'})`,
+                          position: 'relative',
+                        }}
                         onClick={() => handlePlayers(item?.identifier)}
                       >
                         <Box
@@ -270,6 +279,10 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                     <Grid item xs={6} sx={{ mt: 2 }} key={item.name}>
                       <Box
                         className="facilitator-bg"
+                        sx={{
+                          backgroundImage: `url(${item?.appIcon ? item.appIcon : '/decorationBg.png'})`,
+                          position: 'relative',
+                        }}
                         onClick={() => handlePlayers(item?.identifier)}
                       >
                         <Box
@@ -342,6 +355,10 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                     <Grid item xs={6} sx={{ mt: 2 }} key={item.name}>
                       <Box
                         className="facilitator-bg"
+                        sx={{
+                          backgroundImage: `url(${item?.appIcon ? item.appIcon : '/decorationBg.png'})`,
+                          position: 'relative',
+                        }}
                         onClick={() => handlePlayers(item?.identifier)}
                       >
                         <Box
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 1fdfcb28..895a665d 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -359,10 +359,16 @@ const LoginPage = () => {
       : null;
   return (
     <Box sx={{ overflowY: 'auto', background: theme.palette.warning['A400'] }}>
+
       <Box
         display="flex"
         flexDirection="column"
         bgcolor={theme.palette.warning.A200}
+        borderRadius={'10px'}
+        sx={{
+          '@media (min-width: 900px)': {
+           display: 'none',
+        }}}
       >
         {loading && (
           <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
@@ -373,9 +379,13 @@ const LoginPage = () => {
           alignItems={'center'}
           justifyContent={'center'}
           zIndex={99}
-          sx={{ margin: '32px 0 65px' }}
+        sx={{ margin: '5px 10px 25px', }}
         >
-          <Image src={appLogo} alt="App Logo" height={100} />{' '}
+          <Box sx={{ width: '55%', '@media (max-width: 400px)': { width: '95%' } }}>
+            <Image src={appLogo} alt="App Logo" height={80}
+              layout='responsive'
+            />
+          </Box>
         </Box>
       </Box>
 
@@ -406,18 +416,19 @@ const LoginPage = () => {
           />
         </Grid>
         <Grid item xs={12} sm={12} md={6}>
+          
           <form onSubmit={handleFormSubmit}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <Box
                 flexGrow={1}
-                display={'flex'}
+                // display={'flex'}
                 bgcolor={theme.palette.warning['A400']}
                 height="auto"
                 zIndex={99}
                 justifyContent={'center'}
                 p={'2rem'}
                 borderRadius={'2rem 2rem 0 0'}
-                marginTop={'-25px'}
+                
                 sx={{
                   '@media (min-width: 900px)': {
                     width: '100%',
@@ -426,9 +437,44 @@ const LoginPage = () => {
                       darkMode === 'dark'
                         ? 'rgba(0, 0, 0, 0.9) 0px 2px 8px 0px'
                         : 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
+                    marginTop: '50px',
                   },
+                  '@media (max-width: 900px)': {
+                    marginTop: '-25px',
+                  }
+                  
                 }}
               >
+
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  bgcolor={theme.palette.warning.A200}
+                  borderRadius={'10px'}
+                  sx={{
+                    '@media (max-width: 900px)': {
+                      display: 'none',
+                    }
+                  }}
+                >
+                  {loading && (
+                    <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+                  )}
+                  <Box
+                    display={'flex'}
+                    overflow="auto"
+                    alignItems={'center'}
+                    justifyContent={'center'}
+                    zIndex={99}
+                    // sx={{ margin: '5px 10px 25px', }}
+                  >
+                    <Box sx={{ width: '60%' , '@media (max-width: 700px)': {width: '95%'}}}>
+                      <Image src={appLogo} alt="App Logo" height={80}
+                        layout='responsive'
+                      />
+                    </Box>
+                  </Box>
+                </Box>
                 <Box
                   sx={{
                     width: '100%',
diff --git a/src/pages/observation/[observationId]/index.tsx b/src/pages/observation/[observationId]/index.tsx
index 1c15b509..5d4f84d8 100644
--- a/src/pages/observation/[observationId]/index.tsx
+++ b/src/pages/observation/[observationId]/index.tsx
@@ -674,6 +674,7 @@ setFilteredEntityData(result)
     flexWrap: 'wrap',
     flexDirection: 'row',
     gap: '20px',
+                  mx: "10px"
   }}
 >
   {loading ? (
diff --git a/src/styles/globals.css b/src/styles/globals.css
index acc61f73..e09d728f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1014,7 +1014,7 @@ legend.Mui-focused {
 
 .login-img {
   /* height: 500px !important; */
-  width: 90% !important;
+  width: 100% !important;
 }
 
 .capitalize {
@@ -1195,6 +1195,17 @@ mat-radio-group.mat-mdc-radio-group {
 
 
 .btn-outline-secondary{
+  background: transparent !important;
+    border-radius: 100px !important;
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
+    color: #1E1B16 !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+}
+
+.btn-primary{
   background: #FDBE16 !important;
     border-radius: 100px !important;
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),