diff --git a/index.html b/index.html
index 0c589ec..409abfa 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/ipks_logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>IPKS | Development</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index a16e7aa..a922a97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "osaka",
       "version": "0.0.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "i18next": "^23.15.1",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.6.1",
@@ -1907,6 +1908,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
diff --git a/package.json b/package.json
index 64b7d1c..e527be6 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.1",
diff --git a/public/ipks_logo.svg b/public/ipks_logo.svg
new file mode 100644
index 0000000..a309b02
--- /dev/null
+++ b/public/ipks_logo.svg
@@ -0,0 +1,21 @@
+<svg width="62" height="64" viewBox="0 0 62 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="30.8062" cy="31.3875" rx="30.4187" ry="30.6125" fill="#F9D82E"/>
+<circle cx="31" cy="31" r="23.25" fill="#F9A22E"/>
+<path d="M36.4734 40.6596C35.8679 40.6596 35.4001 40.3404 35.0698 39.7019C34.9267 39.4267 34.745 39.1239 34.5249 38.7937C34.3157 38.4524 34.09 38.1057 33.8479 37.7534C33.6167 37.4011 33.38 37.0543 33.1378 36.7131C32.8956 36.3718 32.6754 36.0526 32.4773 35.7553C31.9049 34.9187 31.3709 34.1756 30.8756 33.5261C30.3802 32.8766 29.8848 32.3262 29.3894 31.8748C28.894 31.4235 28.3766 31.0712 27.8372 30.818C27.3088 30.5648 26.7253 30.4217 26.0868 30.3887C25.9878 30.3997 25.8832 30.4052 25.7731 30.4052C25.674 30.4052 25.5694 30.4052 25.4594 30.4052C25.2942 30.4052 25.0906 30.4107 24.8484 30.4217C24.6172 30.4217 24.375 30.4217 24.1218 30.4217C23.7806 30.4217 23.5053 30.4052 23.2962 30.3722C23.098 30.3391 22.9054 30.2951 22.7182 30.2401C22.5311 30.196 22.3715 30.1135 22.2394 29.9924C22.1183 29.8713 22.0192 29.7337 21.9421 29.5796C21.8651 29.4254 21.81 29.2658 21.777 29.1007C21.755 28.9356 21.744 28.7869 21.744 28.6548C21.744 28.4347 21.788 28.2365 21.8761 28.0604C21.9642 27.8842 22.0742 27.7356 22.2063 27.6145C22.3495 27.4824 22.4981 27.3834 22.6522 27.3173C22.8063 27.2402 22.9494 27.2017 23.0815 27.2017C23.4998 27.2017 23.9402 27.2347 24.4025 27.3008C24.8649 27.3558 25.2887 27.3834 25.674 27.3834C26.7419 27.3834 27.6335 27.1026 28.3491 26.5412C29.0647 25.9798 29.5765 25.1651 29.8848 24.0973H29.4389C28.9876 24.0973 28.5858 24.1083 28.2335 24.1303C27.8812 24.1413 27.54 24.1579 27.2097 24.1799C26.8905 24.1909 26.5712 24.2019 26.252 24.2129C25.9327 24.2239 25.586 24.2294 25.2117 24.2294C25.0906 24.2294 24.9475 24.2239 24.7823 24.2129C24.6282 24.2019 24.4631 24.1909 24.287 24.1799C24.1218 24.1689 23.9567 24.1579 23.7916 24.1468C23.6375 24.1358 23.5109 24.1248 23.4118 24.1138C22.9384 24.0808 22.5421 23.9377 22.2229 23.6845C21.9036 23.4313 21.744 23.068 21.744 22.5946C21.744 22.0993 21.9036 21.7415 22.2229 21.5213C22.5421 21.3011 22.9384 21.1911 23.4118 21.1911C23.698 21.1911 24.0888 21.2021 24.5842 21.2241C25.0906 21.2351 25.6575 21.2406 26.285 21.2406C26.9235 21.2406 27.639 21.2241 28.4317 21.1911C28.6959 21.18 28.9711 21.1745 29.2573 21.1745C29.5545 21.1635 29.8628 21.158 30.182 21.158C30.138 20.5526 30.0279 20.0076 29.8518 19.5233C29.6756 19.0279 29.4444 18.5875 29.1582 18.2022C28.7289 18.2022 28.3436 18.2133 28.0023 18.2353C27.6611 18.2463 27.3308 18.2628 27.0116 18.2848C26.7033 18.2958 26.3896 18.3068 26.0703 18.3178C25.7621 18.3288 25.4263 18.3343 25.0631 18.3343C24.942 18.3343 24.8044 18.3288 24.6502 18.3178C24.5071 18.3068 24.3585 18.2958 24.2044 18.2848C24.0503 18.2738 23.9017 18.2628 23.7585 18.2518C23.6154 18.2408 23.4943 18.2298 23.3953 18.2188C22.9219 18.1857 22.5256 18.0151 22.2063 17.7069C21.8981 17.3986 21.744 17.0078 21.744 16.5345C21.744 16.0391 21.8981 15.6813 22.2063 15.4611C22.5256 15.241 22.9219 15.1309 23.3953 15.1309C23.6815 15.1309 24.0503 15.1419 24.5016 15.1639C24.964 15.1749 25.5089 15.1804 26.1364 15.1804C26.7749 15.1804 27.4904 15.1639 28.283 15.1309C28.6133 15.1199 28.9711 15.1144 29.3564 15.1144C29.7417 15.1033 30.1325 15.0978 30.5288 15.0978C30.9361 15.0978 31.3379 15.0978 31.7342 15.0978C32.1305 15.0868 32.5103 15.0758 32.8736 15.0648C33.4791 15.0428 34.046 15.0208 34.5744 14.9988C35.1138 14.9767 35.5927 14.9547 36.011 14.9327C36.4294 14.9107 36.7761 14.8942 37.0513 14.8832C37.3265 14.8612 37.5082 14.8501 37.5963 14.8501C37.8274 14.8501 38.0366 14.8997 38.2237 14.9988C38.4219 15.0868 38.587 15.2134 38.7191 15.3786C38.8622 15.5327 38.9723 15.7143 39.0494 15.9235C39.1264 16.1216 39.165 16.3363 39.165 16.5675C39.165 17.0188 38.9668 17.3876 38.5705 17.6738C38.1742 17.9601 37.6678 18.1032 37.0513 18.1032C36.7211 18.1032 36.4183 18.1142 36.1431 18.1362C35.8679 18.1472 35.5707 18.1637 35.2514 18.1857C34.9432 18.1967 34.5909 18.2077 34.1946 18.2188C33.8093 18.2298 33.3415 18.2353 32.791 18.2353C32.9562 18.6756 33.0938 19.1325 33.2039 19.6058C33.3139 20.0792 33.3855 20.5801 33.4185 21.1085C33.98 21.0865 34.5029 21.0645 34.9872 21.0424C35.4826 21.0204 35.9175 20.9984 36.2917 20.9764C36.677 20.9544 36.9963 20.9379 37.2495 20.9269C37.5027 20.9158 37.6678 20.9103 37.7449 20.9103C37.9761 20.9103 38.1797 20.9599 38.3558 21.059C38.532 21.147 38.6806 21.2736 38.8017 21.4387C38.9228 21.5929 39.0109 21.7745 39.0659 21.9837C39.1319 22.1818 39.165 22.3965 39.165 22.6277C39.165 23.079 38.9888 23.4203 38.6366 23.6515C38.2953 23.8826 37.8164 23.9982 37.2 23.9982C36.8807 23.9982 36.5835 24.0037 36.3083 24.0147C36.0441 24.0258 35.7633 24.0423 35.4661 24.0643C35.1689 24.0753 34.8386 24.0918 34.4753 24.1138C34.1121 24.1248 33.6827 24.1303 33.1873 24.1303C32.9562 25.0881 32.5929 25.9522 32.0975 26.7228C31.6021 27.4824 31.0077 28.1374 30.3141 28.6879C30.8095 28.9631 31.2994 29.3098 31.7838 29.7282C32.2681 30.1465 32.736 30.6144 33.1873 31.1318C33.6497 31.6492 34.0845 32.1996 34.4919 32.783C34.9102 33.3665 35.301 33.9554 35.6643 34.5499C36.4018 35.7718 37.0073 36.7406 37.4807 37.4561C37.954 38.1717 38.1907 38.7001 38.1907 39.0414C38.1907 39.4817 38.0146 39.8615 37.6623 40.1808C37.31 40.5 36.9137 40.6596 36.4734 40.6596Z" fill="#6F4000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.803 62C47.6645 62 61.3334 48.3311 61.3334 31.4697C61.3334 26.5749 60.1814 21.9491 58.1339 17.8486C58.1044 17.8485 58.0749 17.8485 58.0454 17.8485C41.184 17.8485 27.5151 31.5174 27.5151 48.3788C27.5151 53.2736 28.6671 57.8994 30.7146 61.9999C30.7441 62 30.7736 62 30.803 62Z" fill="#008442"/>
+<g filter="url(#filter0_d_512_248)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.9375 41.3643C5.85499 39.5361 10.2248 38.5151 14.8331 38.5151C28.2314 38.5151 39.6139 47.1458 43.7244 59.1509C39.8069 60.979 35.437 62 30.8287 62C17.4304 62 6.04795 53.3693 1.9375 41.3643Z" fill="#008C46"/>
+</g>
+<defs>
+<filter id="filter0_d_512_248" x="1.9375" y="36.9651" width="44.8869" height="26.5849" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.55"/>
+<feGaussianBlur stdDeviation="0.775"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_512_248"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_512_248" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
index 9f8a3be..5c67cac 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
   return <div className="flex flex-col min-h-screen">
     <Header />
-    <main className="flex transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
       <Outlet />
     </main>
     <Footer />
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index fdce956..f7e4fe8 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,7 +1,8 @@
 function Footer() {
   return (
-    <footer>
-      <p>© 2021</p>
+    <footer className="flex justify-between p-2 px-7 font-body bg-tertiary text-sm text-primary dark:bg-tertiary-dark dark:text-primary-dark">
+      <p>Copyright © 2023, Tata Consultancy Services. All rights reserved</p>
+      <a className="cursor-wait">Privacy Policy</a>
     </footer>
   );
 }
diff --git a/src/components/FormBox.jsx b/src/components/FormBox.jsx
index f7a2a23..59a873d 100644
--- a/src/components/FormBox.jsx
+++ b/src/components/FormBox.jsx
@@ -1,9 +1,10 @@
 import { PropTypes } from 'prop-types';
+import clsx from 'clsx';
 
-function FormBox({title, children}) {
+function FormBox({title, children, alt = false}) {
   return (
-    <div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
-        <label className='font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full'>{title}</label>
+    <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
+        <label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>{title}</label>
       {children}
     </div>
   );
@@ -11,7 +12,8 @@ function FormBox({title, children}) {
 
 FormBox.propTypes = {
   children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  alt: PropTypes.bool,
 };
 
 export default FormBox;
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index b47469a..d82aff9 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -42,7 +42,7 @@ function Header() {
       ];
     
     return (
-        <div className="transition-color-mode px-7 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+        <div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
             <AppTitle />
             <BannerInfo info={userInfo} />
             <Separator />
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
index 2e52453..ef8ebe3 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -9,7 +9,7 @@ const LanguageSelector = () => {
 
   return (
     <div>
-      <select className='rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
+      <select className='font-body rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
         <option value="en">English</option>
         <option value="bn">বাংলা</option>
         <option value="hi">हिन्दी</option>
diff --git a/src/components/MenuBar.jsx b/src/components/MenuBar.jsx
index 82a67d6..7436462 100644
--- a/src/components/MenuBar.jsx
+++ b/src/components/MenuBar.jsx
@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 const SubMenu = ({ items }) => {
   const {t} = useTranslation();
   return (
-    <div className="
-      hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
-       dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
+    <div className="invisible opacity-0
+      absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary -translate-y-6
+    dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary z-50 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-200"
     >
       {items.map((subItem, index) => (
         <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
diff --git a/src/components/Separator.jsx b/src/components/Separator.jsx
index 05efc82..c546cbe 100644
--- a/src/components/Separator.jsx
+++ b/src/components/Separator.jsx
@@ -1,7 +1,7 @@
 function Separator() {
   return (
     <div className="h-[2px]">
-        <div className="h-full w-full bg-white rounded-md"></div>
+        <div className="h-full w-full bg-white dark:bg-primary-dark rounded-md"></div>
     </div>
   )
 }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 540e0d2..e289ffe 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,25 +1,33 @@
 import FormBox from "../components/FormBox";
 import { useTranslation } from "react-i18next";
+import { getUserInfoFromSession } from "../util/util";
 
 function Home() {
   const { t } = useTranslation();
   const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
   const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
+  const userInformation = getUserInfoFromSession();
 
   return (
-    <div className="py-7 flex flex-grow gap-7">
+    <div className="flex flex-grow gap-7">
       <div className="flex gap-7 flex-col basis-1/3">
         <div className="flex-grow">
-          <FormBox title={t('information')}>
-            <h1>Welcome to the Home Page</h1>
+          <FormBox title={t('holidayList')} alt={true}>
+            <ul className="list-inside list-disc px-4">
+              {holidayList.map((holiday, index) => (
+                <li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
+              ))}
+            </ul>
           </FormBox>
         </div>
         <div className="flex-grow">
-          <FormBox title={t('holidayList')}>
-            <ul>
-              {holidayList.map((holiday, index) => (
-                <li key={index}>{holiday.date} - {holiday.name}</li>
-              ))}
+          <FormBox title={t('information')}>
+            <ul className="list-inside list-disc px-4">
+              {
+                Object.keys(userInformation).map((key, index) => (
+                  <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                ))
+              }
             </ul>
           </FormBox>
         </div>
@@ -29,13 +37,12 @@ function Home() {
           <FormBox title={t('notifications')}>
             <ul className="list-inside list-disc px-4">
               {homePageNotifications.map((notification, index) => (
-                <li className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose" key={index}>{t(notification)}</li>
+                <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
               ))}
             </ul>
           </FormBox>
         </div>
       </div>
-      
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index b3b579d..0e5395e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,18 +12,23 @@ export default {
       transparent: 'transparent',
       primary: {
         DEFAULT: '#008C46',
-        dark: '#6affb4'
+        // dark: '#6affb4'
+        dark: '#E6F4E1'
       },
       secondary: {
         DEFAULT: '#B1E1B3',
-        dark: '#20542f',
-        // dark: '#3d9f59',
-        variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'}
+        // dark: '#20542f',
+        dark: '#7DBD80',
+        variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
+      },
+      tertiary: {
+        DEFAULT: '#f2f2df',
+        dark: '#3d3d29',
       },
       surface: {
         DEFAULT: '#F6F6F6',
-        dark: '#2d3133',
-        variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'}
+        dark: '#2d332d',
+        variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
       },
       
     },
