diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js
index b01eae4..fc60016 100644
--- a/src/components/AvatarCard.js
+++ b/src/components/AvatarCard.js
@@ -10,52 +10,49 @@ const AvatarCard = () => {
 
     return (
         <div className="card shadow-lg compact bg-base-100">
-            <figure>
-                {
-                    loading ? (
-                        skeleton({
-                            width: 'w-full',
-                            shape: '',
-                            style: {
-                                height: imageHeight
-                            }
-                        })
-                    ) : (
-                        <LazyImage
-                            className="object-cover w-full opacity-90"
-                            src={profile.avatar ? profile.avatar : fallbackImage}
-                            alt={profile.name}
-                            style={{height: imageHeight}}
-                            height={imageHeight}
-                            placeholder={skeleton({
-                                width: 'w-full',
-                                shape: '',
-                                style: {
-                                    height: imageHeight
-                                }
-                            })}
-                        />
-                    )
-                }
-            </figure>
-            <div className="flex-row items-center space-x-4 card-body">
-                <div>
-                    <div className="section-title">
-                        <h5 className="card-title">
-                            {
-                                loading ? (
-                                    skeleton({width: 'w-3/6', height: 'h-8'})
-                                ) : profile.name
-                            }
-                        </h5>
-                    </div>
-                    <span className="text-base-content text-opacity-40 text-justify">
+            <div className="grid place-items-center py-8">
+                <div class="avatar">
+                    <div class={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
                         {
                             loading ? (
-                                skeleton({width: 'w-48', height: 'h-4'})
+                                skeleton({
+                                    width: 'w-full',
+                                    height: 'h-full',
+                                    shape: '',
+                                })
+                            ) : (
+                                <LazyImage
+                                    className="opacity-90"
+                                    src={profile.avatar ? profile.avatar : fallbackImage}
+                                    alt={profile.name}
+                                    height={imageHeight}
+                                    placeholder={
+                                        skeleton({
+                                            width: 'w-full',
+                                            height: 'h-full',
+                                            shape: '',
+                                        })
+                                    }
+                                />
+                            )
+                        }
+                    </div>
+                </div>
+                <div className="text-center mx-8">
+                    <div className="text-lg font-extrabold">
+                        {
+                            loading ? (
+                                skeleton({ width: 'w-48', height: 'h-8' })
+                            ) : profile.name
+                        }
+                    </div>
+                    <div className="mt-3 text-sm text-base-content text-opacity-60">
+                        {
+                            loading ? (
+                                skeleton({ width: 'w-48', height: 'h-4' })
                             ) : profile.bio
                         }
-                    </span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/components/Blog.js b/src/components/Blog.js
index 4866107..8554cc4 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -7,7 +7,7 @@ const Blog = () => {
     const loading = useSelector(state => state.loading);
 
     return (
-        <div className="card shadow-lg compact side bg-base-100">
+        <div className="card shadow-lg compact bg-base-100">
             <div className="flex-row items-center space-x-4 card-body">
                 <div className="flex-1">
                     <div className="section-title">
diff --git a/src/components/Details.js b/src/components/Details.js
index de9b6d5..986178c 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -29,7 +29,7 @@ const Details = () => {
     }
 
     return (
-        <div className="card shadow-lg compact side bg-base-100">
+        <div className="card shadow-lg compact bg-base-100">
             <div className="card-body">
                 <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                     {
diff --git a/src/components/Education.js b/src/components/Education.js
index b8b104c..a5c1485 100644
--- a/src/components/Education.js
+++ b/src/components/Education.js
@@ -35,7 +35,7 @@ const Education = () => {
         <>
             {
                 (typeof config.education !== 'undefined' && config.education.length !== 0) && (
-                    <div className="card shadow-lg compact side bg-base-100">
+                    <div className="card shadow-lg compact bg-base-100">
                         <div className="card-body">
                             <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                                 <li>
diff --git a/src/components/Experience.js b/src/components/Experience.js
index c62eec5..9d90888 100644
--- a/src/components/Experience.js
+++ b/src/components/Experience.js
@@ -35,7 +35,7 @@ const Experience = () => {
         <>
             {
                 (typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
-                    <div className="card shadow-lg compact side bg-base-100">
+                    <div className="card shadow-lg compact bg-base-100">
                         <div className="card-body">
                             <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                                 <li>
diff --git a/src/components/Project.js b/src/components/Project.js
index cacf301..7044d5d 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -13,7 +13,7 @@ const Project = () => {
         let array = [];
         for (let index = 0; index < LIMIT; index++) {
             array.push((
-                <div className="card shadow-lg compact side bg-base-100" key={index}>
+                <div className="card shadow-lg compact bg-base-100" key={index}>
                     <div className="flex justify-between flex-col p-8 h-full w-full">
                         <div>
                             <div className="flex items-center opacity-60">
@@ -23,10 +23,10 @@ const Project = () => {
                                     </h5>
                                 </span>
                             </div>
-                            <span className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
+                            <p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
                                 {skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
                                 {skeleton({width: 'w-full', height: 'h-4'})}
-                            </span>
+                            </p>
                         </div>
                         <div className="flex justify-between text-sm text-base-content text-opacity-40">
                             <div className="flex flex-grow">
@@ -53,7 +53,7 @@ const Project = () => {
 
     const renderProjects = () => {
         return repo.slice(0, LIMIT).map((item, index) => (
-            <a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact side bg-base-100" key={index}>
+            <a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}>
                 <div className="flex justify-between flex-col p-8 h-full w-full">
                     <div>
                         <div className="flex items-center opacity-60">
@@ -96,7 +96,7 @@ const Project = () => {
             <div className="col-span-1 lg:col-span-2">
                 <div className="grid grid-cols-2 gap-6">
                     {/* <div className="col-span-2">
-                        <div className="card shadow-lg compact side bg-base-100">
+                        <div className="card shadow-lg compact bg-base-100">
                             <div className="card-body">
                                 <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                                     <li>
diff --git a/src/components/Skill.js b/src/components/Skill.js
index 11c616a..b1ff0eb 100644
--- a/src/components/Skill.js
+++ b/src/components/Skill.js
@@ -22,7 +22,7 @@ const Skill = () => {
         <>
             {
                 (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
-                    <div className="card shadow-lg compact side bg-base-100">
+                    <div className="card shadow-lg compact bg-base-100">
                         <div className="card-body">
                             <div className="inline-flex gap-2 flex-wrap justify-center p-3">
                                 {
diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js
index 454eb16..77ba505 100644
--- a/src/components/ThemeChanger.js
+++ b/src/components/ThemeChanger.js
@@ -16,8 +16,8 @@ const ThemeChanger = () => {
     }
 
     return (
-        <div className="card overflow-visible shadow-lg compact side bg-base-100">
-            <div className="flex-row items-center space-x-4 card-body p-3">
+        <div className="card overflow-visible shadow-lg compact bg-base-100">
+            <div className="flex-row items-center space-x-4 card-body mx-4">
                 <div className="flex-1">
                     <div className="section-title">
                         <h5 className="card-title">
@@ -31,6 +31,7 @@ const ThemeChanger = () => {
                         loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10' }) : (
                             <div title="Change Theme" className="dropdown dropdown-end">
                                 <div tabIndex={0} className="btn btn-ghost m-1 normal-case opacity-50">
+                                    <svg class="inline-block w-5 h-5 stroke-current md:mr-2" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"></path><circle cx="144" cy="208" r="32"></circle><circle cx="152" cy="311" r="32"></circle><circle cx="224" cy="144" r="32"></circle><circle cx="256" cy="367" r="48"></circle><circle cx="328" cy="144" r="32"></circle></svg>
                                     <span className="hidden md:inline">
                                         Change Theme
                                     </span>
@@ -43,13 +44,14 @@ const ThemeChanger = () => {
                                         {
                                             config.themeConfig.themes.map((item, index) => (
                                                 <li key={index}>
-                                                    <a 
-                                                        href="#" 
-                                                        onClick={(e) => changeTheme(e, item)} 
+                                                    <a
+                                                        href="#"
+                                                        onClick={(e) => changeTheme(e, item)}
                                                         className={`${theme === item ? 'active' : ''}`}
                                                     >
-                                                        <span className="text-opacity-60 capitalize flex items-center">
-                                                            <IoColorPaletteOutline className="inline-block w-4 h-4 stroke-current mr-2"/> {item === config.themeConfig.default ? 'Default' : item}
+                                                        <span className="opacity-60 capitalize flex items-center">
+                                                            <svg className="inline-block w-4 h-4 stroke-current mr-2" stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.20348 2.00378C9.46407 2.00378 10.5067 3.10742 10.6786 4.54241L19.1622 13.0259L11.384 20.8041C10.2124 21.9757 8.31291 21.9757 7.14134 20.8041L2.8987 16.5615C1.72713 15.3899 1.72713 13.4904 2.8987 12.3188L5.70348 9.51404V4.96099C5.70348 3.32777 6.82277 2.00378 8.20348 2.00378ZM8.70348 4.96099V6.51404L7.70348 7.51404V4.96099C7.70348 4.63435 7.92734 4.36955 8.20348 4.36955C8.47963 4.36955 8.70348 4.63435 8.70348 4.96099ZM8.70348 10.8754V9.34247L4.31291 13.733C3.92239 14.1236 3.92239 14.7567 4.31291 15.1473L8.55555 19.3899C8.94608 19.7804 9.57924 19.7804 9.96977 19.3899L16.3337 13.0259L10.7035 7.39569V10.8754C10.7035 10.9184 10.7027 10.9612 10.7012 11.0038H8.69168C8.69941 10.9625 8.70348 10.9195 8.70348 10.8754Z" fill="currentColor"></path><path d="M16.8586 16.8749C15.687 18.0465 15.687 19.946 16.8586 21.1175C18.0302 22.2891 19.9297 22.2891 21.1013 21.1175C22.2728 19.946 22.2728 18.0465 21.1013 16.8749L18.9799 14.7536L16.8586 16.8749Z" fill="currentColor"></path></svg>
+                                                            {item === config.themeConfig.default ? 'Default' : item}
                                                         </span>
                                                     </a>
                                                 </li>
diff --git a/src/config.js b/src/config.js
index 6d8089f..a69466f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    githubUsername: 'tailwindlabs', // required
+    githubUsername: 'arifszn', // required
     email: 'contact@arifszn.com', // optional
     linkedinUsername: 'ariful-alam', // optional
     dribbbleUsername: '', // optional