diff --git a/src/App.js b/src/App.js
index 8f68c0c..e55aa10 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Fragment, memo, useCallback, useEffect, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import AvatarCard from "./components/AvatarCard";
 import ErrorPage from "./components/ErrorPage";
@@ -92,7 +92,7 @@ function App() {
     }, [dispatch])
 
     useEffect(() => {
-        loadData();
+        // loadData();
     }, [loadData])
 
     return (
@@ -160,4 +160,4 @@ function App() {
     );
 }
 
-export default memo(App);
+export default App;
diff --git a/src/components/Blog.js b/src/components/Blog.js
index d9dfcc5..d22c9d0 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -1,6 +1,6 @@
 import { getDevtoArticle, getMediumArticle } from "article-api";
 import moment from "moment";
-import { memo, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { CgHashtag } from 'react-icons/cg';
 import config from "../config";
 import { skeleton } from "../helpers/utils";
@@ -105,4 +105,4 @@ const Blog = () => {
     )
 }
 
-export default memo(Blog);
\ No newline at end of file
+export default Blog;
\ No newline at end of file
diff --git a/src/components/Education.js b/src/components/Education.js
index a1f295e..d09897f 100644
--- a/src/components/Education.js
+++ b/src/components/Education.js
@@ -1,5 +1,6 @@
 import { useSelector } from "react-redux";
 import config from "../config";
+import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from "../helpers/utils";
 
 const Education = () => {
@@ -10,17 +11,20 @@ const Education = () => {
         for (let index = 0; index < 2; index++) {
             array.push((
                 <li key={index}>
-                    <span className="d-unset">
-                        <div className="block justify-between">
-                            <div className="font-medium">
-                                {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
-                            </div>
-                            <div className="opacity-90">
-                                {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
-                            </div>
-                        </div>
+                    <span>
+                        {skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
                         <div>
-                            {skeleton({ width: 'w-32', height: 'h-3' })}
+                            <div className="block justify-between">
+                                <div>
+                                    {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
+                                </div>
+                                <div>
+                                    {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
+                                </div>
+                            </div>
+                            <div>
+                                {skeleton({ width: 'w-32', height: 'h-3' })}
+                            </div>
                         </div>
                     </span>
                 </li>
@@ -36,11 +40,15 @@ const Education = () => {
                 (typeof config.education !== 'undefined' && config.education.length !== 0) && (
                     <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">
+                            <ul className="menu row-span-3 bg-base-100 text-base-content">
                                 <li>
-                                    <div className="section-title pb-0-important mx-5">
+                                    <div className="pb-0-important mx-5">
                                         <h5 className="card-title">
-                                            {loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Education'}
+                                            {
+                                                loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
+                                                    <span className="opacity-70">Education</span>
+                                                )
+                                            }
                                         </h5>
                                     </div>
                                 </li>
@@ -48,17 +56,20 @@ const Education = () => {
                                     loading ? renderSkeleton() : (
                                         config.education.map((item, index) => (
                                             <li key={index}>
-                                                <span className="d-unset">
-                                                    <div className="block justify-between">
-                                                        <div className="font-medium">
-                                                            {item.institution}
-                                                        </div>
-                                                        <div className="opacity-90">
-                                                            {item.from} - {item.to}
-                                                        </div>
-                                                    </div>
+                                                <span>
+                                                    <GoPrimitiveDot className="mr-2 opacity-40"/>
                                                     <div>
-                                                        {item.degree}
+                                                        <div className="block justify-between">
+                                                            <div className="font-medium opacity-70">
+                                                                {item.institution}
+                                                            </div>
+                                                            <div className="opacity-40">
+                                                                {item.from} - {item.to}
+                                                            </div>
+                                                        </div>
+                                                        <div className="opacity-70">
+                                                            {item.degree}
+                                                        </div>
                                                     </div>
                                                 </span>
                                             </li>
diff --git a/src/components/Experience.js b/src/components/Experience.js
index 25e12dd..525dea3 100644
--- a/src/components/Experience.js
+++ b/src/components/Experience.js
@@ -1,5 +1,6 @@
 import { useSelector } from "react-redux";
 import config from "../config";
+import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from "../helpers/utils";
 
 const Experience = () => {
@@ -10,17 +11,20 @@ const Experience = () => {
         for (let index = 0; index < 2; index++) {
             array.push((
                 <li key={index}>
-                    <span className="d-unset">
-                        <div className="block justify-between">
-                            <div className="font-medium">
-                                {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
-                            </div>
-                            <div className="opacity-90">
-                                {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
-                            </div>
-                        </div>
+                    <span>
+                        {skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
                         <div>
-                            {skeleton({ width: 'w-32', height: 'h-3' })}
+                            <div className="block justify-between">
+                                <div>
+                                    {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
+                                </div>
+                                <div>
+                                    {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
+                                </div>
+                            </div>
+                            <div>
+                                {skeleton({ width: 'w-32', height: 'h-3' })}
+                            </div>
                         </div>
                     </span>
                 </li>
@@ -50,18 +54,21 @@ const Experience = () => {
                                     loading ? renderSkeleton() : (
                                         config.experiences.map((experience, index) => (
                                             <li key={index}>
-                                                <span className="d-unset">
-                                                    <div className="block justify-between">
-                                                        <div className="font-medium opacity-70">
-                                                            {experience.company}
+                                                <span>
+                                                    <GoPrimitiveDot className="mr-2 opacity-40"/>
+                                                    <div>
+                                                        <div className="block justify-between">
+                                                            <div className="font-medium opacity-70">
+                                                                {experience.company}
+                                                            </div>
+                                                            <div className="opacity-40">
+                                                                {experience.from} - {experience.to}
+                                                            </div>
                                                         </div>
-                                                        <div className="opacity-50">
-                                                            {experience.from} - {experience.to}
+                                                        <div className="opacity-70">
+                                                            {experience.position}
                                                         </div>
                                                     </div>
-                                                    <div className="opacity-70">
-                                                        {experience.position}
-                                                    </div>
                                                 </span>
                                             </li>
                                         ))
diff --git a/src/components/Project.js b/src/components/Project.js
index fdd44f8..9a791ba 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -1,8 +1,10 @@
 import { Fragment } from "react";
 import { useSelector } from "react-redux";
 import { languageColor, skeleton } from "../helpers/utils";
-import { AiFillStar } from 'react-icons/ai';
+import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
 import { VscSourceControl } from 'react-icons/vsc';
+import config from "../config";
+import { CgGitFork } from "react-icons/cg";
 
 const LIMIT = 8;
 
@@ -17,30 +19,30 @@ const Project = () => {
                 <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">
+                            <div className="flex items-center">
                                 <span>
                                     <h5 className="card-title">
-                                        {skeleton({width: 'w-32', height: 'h-8'})}
+                                        {skeleton({ width: 'w-32', height: 'h-8' })}
                                     </h5>
                                 </span>
                             </div>
-                            <div 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'})}
+                            <div className="mb-5 mt-1">
+                                {skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2' })}
+                                {skeleton({ width: 'w-full', height: 'h-4' })}
                             </div>
                         </div>
-                        <div className="flex justify-between text-sm text-base-content text-opacity-40">
+                        <div className="flex justify-between">
                             <div className="flex flex-grow">
                                 <span className="mr-3 flex items-center">
-                                    {skeleton({width: 'w-12', height: 'h-4'})}
+                                    {skeleton({ width: 'w-12', height: 'h-4' })}
                                 </span>
                                 <span className="flex items-center">
-                                    {skeleton({width: 'w-12', height: 'h-4'})}
+                                    {skeleton({ width: 'w-12', height: 'h-4' })}
                                 </span>
                             </div>
                             <div>
                                 <span className="flex items-center">
-                                    {skeleton({width: 'w-12', height: 'h-4'})}
+                                    {skeleton({ width: 'w-12', height: 'h-4' })}
                                 </span>
                             </div>
                         </div>
@@ -65,24 +67,24 @@ const Project = () => {
                                 </h5>
                             </span>
                         </div>
-                        <p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
+                        <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
                             {item.description}
                         </p>
                     </div>
-                    <div className="flex justify-between text-sm text-base-content text-opacity-40">
+                    <div className="flex justify-between text-sm text-base-content text-opacity-60">
                         <div className="flex flex-grow">
                             <span className="mr-3 flex items-center">
-                                <AiFillStar/>
+                                <AiFillStar />
                                 <span>{item.stargazers_count}</span>
                             </span>
                             <span className="flex items-center">
-                                <VscSourceControl/>
+                                <AiOutlineFork />
                                 <span>{item.forks_count}</span>
                             </span>
                         </div>
                         <div>
                             <span className="flex items-center">
-                                <div className="w-3 h-3 rounded-full mr-1 opacity-75" style={{backgroundColor: languageColor(item.language)}}/>
+                                <div className="w-3 h-3 rounded-full mr-1 opacity-60" style={{ backgroundColor: languageColor(item.language) }} />
                                 <span>{item.language}</span>
                             </span>
                         </div>
@@ -99,17 +101,26 @@ const Project = () => {
                     <div className="col-span-2">
                         <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">
+                                <ul className="menu row-span-3 bg-base-100 text-base-content">
                                     <li>
-                                        <div className="section-title pb-0-important mx-5 flex items-center">
-                                            <h5 className="card-title mr-3">
-                                                {loading ? skeleton({width: 'w-28', height: 'h-8'}) : 'Project'}
+                                        <div className="pb-0-important mx-4 flex items-center justify-between">
+                                            <h5 className="card-title">
+                                                {
+                                                    loading ? skeleton({ width: 'w-28', height: 'h-8' }) : (
+                                                        <span className="opacity-70">My Projects</span>
+                                                    )
+                                                }
                                             </h5>
                                             {
-                                                loading ? skeleton({width: 'w-8', height: 'h-8'}) : (
-                                                    <svg className="animate-bounce w-4 h-4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
-                                                        <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
-                                                    </svg>
+                                                loading ? skeleton({ width: 'w-10', height: 'h-5' }) : (
+                                                    <a
+                                                        href={`https://github.com/${config.githubUsername}?tab=repositories`}
+                                                        target="_blank"
+                                                        rel="noreferrer"
+                                                        className="opacity-50"
+                                                    >
+                                                        See All
+                                                    </a>
                                                 )
                                             }
                                         </div>
diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js
index 6a04016..991006d 100644
--- a/src/components/ThemeChanger.js
+++ b/src/components/ThemeChanger.js
@@ -2,7 +2,6 @@ import { useDispatch, useSelector } from 'react-redux';
 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 = () => {
@@ -71,4 +70,4 @@ const ThemeChanger = () => {
     )
 }
 
-export default memo(ThemeChanger);
\ No newline at end of file
+export default ThemeChanger;
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index d2fe776..450066b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -53,13 +53,9 @@ svg {
 .z-hover:focus,
 .z-hover:active {
     transition: transform 0.3s !important;
-    -ms-transform: scale(1.03) !important;
-    -webkit-transform: scale(1.03) !important; 
-    transform: scale(1.03) !important;
-}
-
-.d-unset {
-    display: unset !important;
+    -ms-transform: scale(1.01) !important;
+    -webkit-transform: scale(1.01) !important; 
+    transform: scale(1.01) !important;
 }
 
 .pb-0-important {