diff --git a/src/views/SimproV2/Settings/components/Plan/Container1.js b/src/views/SimproV2/Settings/components/Plan/Container1.js
index dfc9ba9..07ae1aa 100644
--- a/src/views/SimproV2/Settings/components/Plan/Container1.js
+++ b/src/views/SimproV2/Settings/components/Plan/Container1.js
@@ -12,11 +12,10 @@ const Container1 = () => {
   const [totalPage, setTotalPage] = useState(0);
   const [transaction, setTransaction] = useState([]);
   const [storage, setLimitInformation] = useState(0)
-  const currentDate = new Date();
-  const givenDate = new Date(transaction.exp_ospro);
-  const createdDate = new Date(transaction.created_at)
-  const differenceInMillis = givenDate.getTime() - currentDate.getTime();
-  const differenceInDays = role !== 'Super Admin' ? Math.floor(differenceInMillis / (1000 * 60 * 60 * 24)) : 30;
+  const currentDate = new Date(); // Now date
+  const givenDate = new Date(transaction.exp_ospro); // Parse exp ospro to date format
+  const differenceInMillis = givenDate.getTime() - currentDate.getTime(); // Get time difference
+  const differenceInDays = role !== 'Super Admin' ? Math.ceil(differenceInMillis / (1000 * 60 * 60 * 24)) : 30;
 
   let company_id = '', configApp = '';
   if(role !== 'Super Admin') {
@@ -153,16 +152,16 @@ const Container1 = () => {
           <div className={styles.days}>
             <div className={styles.frameYourCurrentPlan}>
               <div className={styles.days1}>Days</div>
-              <div className={styles.of30Days}>{30 - Math.abs(differenceInDays)} of 30 Days</div>
+              <div className={styles.of30Days}>{ role !== 'Super Admin' ? (30 - Math.abs(differenceInDays)) + ' Days of 30 Days' : <small style={{ fontWeight:'bold' }}>Unlimited</small>}</div>
             </div>
             <div className={styles.rectangleFrame}>
               <div className={styles.rectangleFrameChild} />
               <div style={{
-                  width: `${(400 * (30 - Math.abs(differenceInDays))) / 30}px`,
+                  width: `${role !== 'Super Admin' ? ((400 * (30 - Math.abs(differenceInDays))) / 30) : 0}px`,
                   position: 'relative',
-                  backgroundColor: ((30 - Math.abs(differenceInDays)) >= 0 && (30 - Math.abs(differenceInDays)) <= 10) ? '#59b4c3' :
+                  backgroundColor: role !== 'Super Admin' ? (((30 - Math.abs(differenceInDays)) >= 0 && (30 - Math.abs(differenceInDays)) <= 10) ? '#59b4c3' :
                                   ((30 - Math.abs(differenceInDays)) >= 11 && (30 - Math.abs(differenceInDays)) <= 20) ? '#ffa447' :
-                                  '#FF4747',
+                                  '#FF4747') : '#59b4c3',
                   zIndex:'1',
                   padding:'5px',
                   borderRadius:'15px'
@@ -170,22 +169,27 @@ const Container1 = () => {
               </div>
             </div>
             <div className={styles.daysRemainingUntil}>
-              { role !== 'Super Admin' ? Math.abs(differenceInDays) : 0} days remaining until your plan requires update
+              { role !== 'Super Admin' ? Math.abs(differenceInDays) : <small style={{ fontWeight:'bold' }}>Unlimited</small>} days remaining until your plan requires update
             </div>
           </div>
           <div className={styles.days2}>
             <div className={styles.storageParent}>
               <div className={styles.storage}>Storage</div>
-              <div className={styles.of500mb}>{storage} of {transaction?.type_paket === 'Basic' ? 500 : 50}MB</div>
+              <div className={styles.of500mb}>
+                {role !== 'Super Admin' ?
+                  (storage + 'MB of ' + (transaction?.type_paket === 'Basic' ? '500' : '50')) + 'MB'
+                  : <small style={{ fontWeight:'bold' }}>Unlimited</small>
+                }
+              </div>
             </div>
             <div className={styles.rectangleParent}>
               <div className={styles.frameChild} />
               <div style={{
-                  width: `${(400 * storage) / (transaction.type_paket === 'Basic' ? 500 : 50)}px`,
+                  width: `${role !== 'Super Admin' ? (400 * storage) / (transaction.type_paket === 'Basic' ? 500 : 50) : 0}px`,
                   position: 'relative',
-                  backgroundColor: (storage >= 0 && storage <= (transaction.type_paket === 'Basic' ? 166.67 : 16.67)) ? '#59b4c3' :
+                  backgroundColor: role !== 'Super Admin' ? ((storage >= 0 && storage <= (transaction.type_paket === 'Basic' ? 166.67 : 16.67)) ? '#59b4c3' :
                                   (storage >= (transaction.type_paket === 'Basic' ? 166.68 : 16.68) && storage <= (transaction.type_paket === 'Basic' ? 333.33 : 33.33)) ? '#ffa447' :
-                                  '#FF4747',
+                                  '#FF4747') : '#59b4c3',
                   zIndex:'1',
                   padding:'5px',
                   borderRadius:'15px'
@@ -193,22 +197,27 @@ const Container1 = () => {
               </div>
             </div>
             <div className={styles.storageRemainingUntil}>
-              {(((storage / (transaction.type_paket === 'Basic' ? 500 : 50)) * 100).toFixed(2))}% has been filled until your plan requires an update
+              { role !== 'Super Admin' ? (((storage / (transaction.type_paket === 'Basic' ? 500 : 50)) * 100).toFixed(2)) + '%' : <small style={{ fontWeight:'bold' }}>Unlimited</small>} has been filled until your plan requires an update
             </div>
           </div>
           <div className={styles.days3}>
             <div className={styles.projectParent}>
               <div className={styles.project}>Project</div>
-              <div className={styles.of10Project}>{parseInt(totalPage)} of {transaction.type_paket === "Basic" ? "10" : "1"} Project</div>
+              <div className={styles.of10Project}>
+                  {
+                  role !== 'Super Admin' ? (parseInt(totalPage) + ' Project of ' + (transaction.type_paket === "Basic" ? 10 : 1)) + ' Project'
+                  : <small style={{ fontWeight:'bold' }}>Unlimited</small>
+                }
+              </div>
             </div>
             <div className={styles.rectangleGroup}>
               <div className={styles.frameInner} />
               <div style={{
-                  width: `${(400 * parseInt(totalPage)) / (parseInt(transaction.type_paket === "Basic" ? 10 : 1))}px`,
+                  width: `${role !== 'Super Admin' ? (400 * parseInt(totalPage)) / (parseInt(transaction.type_paket === "Basic" ? 10 : 1)) : 0}px`,
                   position: 'relative',
-                  backgroundColor: transaction.type_paket === "Basic" ? (parseInt(totalPage) >= 0 && parseInt(totalPage) <= 3) ? '#59b4c3' :
+                  backgroundColor: role !== 'Super Admin' ? (transaction.type_paket === "Basic" ? (parseInt(totalPage) >= 0 && parseInt(totalPage) <= 3) ? '#59b4c3' :
                                   (parseInt(totalPage) >= 4 && parseInt(totalPage) <= 7) ? '#ffa447' :
-                                  '#FF4747' : '#FF4747',
+                                  '#FF4747' : '#FF4747') : '#59b4c3',
                   zIndex:'1',
                   padding:'5px',
                   borderRadius:'15px'
@@ -216,7 +225,7 @@ const Container1 = () => {
               </div>
             </div>
             <div className={styles.projectRemainingUntil}>
-              {parseInt(transaction.type_paket === "Basic" ? 10 : 1) - (parseInt(totalPage))} Project remaining until your plan requires update
+              { role !== 'Super Admin' ? (transaction.type_paket === "Basic" ? 10 : 1) - parseInt(totalPage) : <small style={{ fontWeight:'bold' }}>Unlimited</small> } Project remaining until your plan requires update
             </div>
           </div>
         </div>