diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js
index 883a171..9c10b50 100644
--- a/src/components/AvatarCard.js
+++ b/src/components/AvatarCard.js
@@ -2,8 +2,6 @@ import { useSelector } from "react-redux";
 import { fallbackImage, skeleton } from "../helpers/utils";
 import LazyImage from "./LazyImage";
 
-const imageHeight = 300;
-
 const AvatarCard = () => {
     const profile = useSelector(state => state.profile);
     const loading = useSelector(state => state.loading);
@@ -11,7 +9,7 @@ const AvatarCard = () => {
     return (
         <div className="card shadow-lg compact bg-base-100">
             <div className="grid place-items-center py-8">
-                <div className="avatar">
+                <div className="avatar opacity-90">
                     <div className={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
                         {
                             loading ? (
@@ -22,10 +20,8 @@ const AvatarCard = () => {
                                 })
                             ) : (
                                 <LazyImage
-                                    className="opacity-90"
                                     src={profile.avatar ? profile.avatar : fallbackImage}
                                     alt={profile.name}
-                                    height={imageHeight}
                                     placeholder={
                                         skeleton({
                                             width: 'w-full',
@@ -39,19 +35,17 @@ const AvatarCard = () => {
                     </div>
                 </div>
                 <div className="text-center mx-8">
-                    <span className="opacity-60">
-                        <h5 className="card-title font-extrabold">
-                            {
-                            loading ? (
-                                skeleton({ width: 'w-48', height: 'h-8' })
-                            ) : <span className="opacity-60">{profile.name}</span>
-                        }
-                        </h5>
-                    </span>
-                    <div className="mt-3 text-sm text-base-content text-opacity-60">
+                    <h5 className="font-bold text-2xl">
                         {
                             loading ? (
-                                skeleton({ width: 'w-48', height: 'h-4' })
+                                skeleton({ width: 'w-48', height: 'h-8' })
+                            ) : <span className="opacity-70">{profile.name}</span>
+                        }
+                    </h5>
+                    <div className="mt-3 text-base-content text-opacity-60">
+                        {
+                            loading ? (
+                                skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' })
                             ) : profile.bio
                         }
                     </div>
diff --git a/src/components/Blog.js b/src/components/Blog.js
index 0e8973d..d9dfcc5 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -38,7 +38,7 @@ const Blog = () => {
         <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 compact bg-base-100">
+                        <div className="card compact bg-base-100 shadow-sm">
                             <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 c6ecdf6..fdd44f8 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -1,7 +1,8 @@
 import { Fragment } from "react";
 import { useSelector } from "react-redux";
 import { languageColor, skeleton } from "../helpers/utils";
-import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
+import { AiFillStar } from 'react-icons/ai';
+import { VscSourceControl } from 'react-icons/vsc';
 
 const LIMIT = 8;
 
@@ -75,7 +76,7 @@ const Project = () => {
                                 <span>{item.stargazers_count}</span>
                             </span>
                             <span className="flex items-center">
-                                <AiOutlineFork/>
+                                <VscSourceControl/>
                                 <span>{item.forks_count}</span>
                             </span>
                         </div>
@@ -96,7 +97,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 compact bg-base-100">
+                        <div className="card compact bg-base-100 shadow-sm">
                             <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/ThemeChanger.js b/src/components/ThemeChanger.js
index e5c4827..6a04016 100644
--- a/src/components/ThemeChanger.js
+++ b/src/components/ThemeChanger.js
@@ -3,6 +3,7 @@ import { setTheme } from '../store/slices/themeSlice';
 import config from '../config';
 import { skeleton } from '../helpers/utils';
 import { memo } from 'react';
+import { AiOutlineControl } from 'react-icons/ai';
 
 const ThemeChanger = () => {
     const dispatch = useDispatch();
@@ -16,21 +17,25 @@ const ThemeChanger = () => {
 
     return (
         <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-row items-center space-x-4 flex pl-8 pr-2 py-4">
                 <div className="flex-1">
-                    <div className="section-title">
-                        <h5 className="card-title">
-                            {loading ? skeleton({ width: 'w-20', height: 'h-8' }) : 'Theme'}
-                        </h5>
-                    </div>
-                    <span className="text-base-content text-opacity-40 capitalize">{loading ? skeleton({ width: 'w-16', height: 'h-4' }) : (theme === config.themeConfig.default ? 'Default' : theme)}</span>
+                    <h5 className="card-title">
+                        {
+                            loading ? skeleton({ width: 'w-20', height: 'h-8' }) : (
+                                <span className="opacity-70">Theme</span>
+                            )
+                        }
+                    </h5>
+                    <span className="text-base-content text-opacity-40 capitalize text-sm">
+                        {loading ? skeleton({ width: 'w-16', height: 'h-5' }) : (theme === config.themeConfig.default ? 'Default' : theme)}
+                    </span>
                 </div>
                 <div className="flex-0">
                     {
-                        loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10' }) : (
+                        loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10', className: 'mr-6' }) : (
                             <div title="Change Theme" className="dropdown dropdown-end">
                                 <div tabIndex={0} className="btn btn-ghost m-1 normal-case opacity-50">
-                                    <svg className="inline-block w-5 h-5 stroke-current md:mr-2" stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" strokeMiterlimit="10" strokeWidth="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>
+                                    <AiOutlineControl className="inline-block w-5 h-5 stroke-current md:mr-2"/>
                                     <span className="hidden md:inline">
                                         Change Theme
                                     </span>
@@ -39,7 +44,7 @@ const ThemeChanger = () => {
                                     </svg>
                                 </div>
                                 <div className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-52 rounded-b-box bg-base-200 text-base-content">
-                                    <ul className="p-2 md:p-4 menu compact">
+                                    <ul className="p-4 menu compact">
                                         {
                                             config.themeConfig.themes.map((item, index) => (
                                                 <li key={index}>
@@ -48,8 +53,7 @@ const ThemeChanger = () => {
                                                         onClick={(e) => changeTheme(e, item)}
                                                         className={`${theme === item ? 'active' : ''}`}
                                                     >
-                                                        <span className="opacity-60 capitalize flex items-center">
-                                                            <svg className="inline-block w-4 h-4 stroke-current mr-2" stroke="currentColor" fill="none" strokeWidth="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="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>
+                                                        <span className="opacity-60 capitalize">
                                                             {item === config.themeConfig.default ? 'Default' : item}
                                                         </span>
                                                     </a>