diff --git a/src/App.jsx b/src/App.jsx
index 676d911..6724458 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,8 +16,8 @@ import Project from './components/project';
 import Blog from './components/blog';
 
 function App() {
-  const [theme] = useContext(ThemeContext);
-  const [, setLoading] = useContext(LoadingContext);
+  const { theme } = useContext(ThemeContext);
+  const { setLoading } = useContext(LoadingContext);
   const [profile, setProfile] = useState(null);
   const [repo, setRepo] = useState(null);
   const [error, setError] = useState(null);
diff --git a/src/components/avatar-card/index.jsx b/src/components/avatar-card/index.jsx
index f3f00fb..41ce35e 100644
--- a/src/components/avatar-card/index.jsx
+++ b/src/components/avatar-card/index.jsx
@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
 const AvatarCard = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   return (
     <div className="card shadow-lg compact bg-base-100">
diff --git a/src/components/blog/index.jsx b/src/components/blog/index.jsx
index 2daa067..aa2ca04 100644
--- a/src/components/blog/index.jsx
+++ b/src/components/blog/index.jsx
@@ -23,7 +23,7 @@ const displaySection = () => {
 
 const Blog = () => {
   const [articles, setArticles] = useState(null);
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   useEffect(() => {
     if (displaySection()) {
diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
index 5a4e67c..007d4ba 100644
--- a/src/components/details/index.jsx
+++ b/src/components/details/index.jsx
@@ -12,7 +12,7 @@ import {
   FaGlobe,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import { Fragment, useContext } from 'react';
+import { useContext } from 'react';
 import { LoadingContext } from '../../contexts/LoadingContext';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
@@ -32,7 +32,7 @@ const ListItem = ({ icon, title, value, link }) => {
 };
 
 const Details = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];
diff --git a/src/components/education/index.jsx b/src/components/education/index.jsx
index 74f1cf3..5413487 100644
--- a/src/components/education/index.jsx
+++ b/src/components/education/index.jsx
@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const Education = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];
diff --git a/src/components/experience/index.jsx b/src/components/experience/index.jsx
index 9b40896..6bcd41d 100644
--- a/src/components/experience/index.jsx
+++ b/src/components/experience/index.jsx
@@ -5,7 +5,7 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const Experience = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];
diff --git a/src/components/head-tag-editor/index.jsx b/src/components/head-tag-editor/index.jsx
index 466c166..59f26d8 100644
--- a/src/components/head-tag-editor/index.jsx
+++ b/src/components/head-tag-editor/index.jsx
@@ -6,7 +6,7 @@ import config from '../../ezprofile.config';
 import { isThemeDarkish } from '../../helpers/utils';
 
 const HeadTagEditor = (props) => {
-  const [theme] = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
 
   return (
     <Fragment>
diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx
index 42ca401..84a0383 100644
--- a/src/components/project/index.jsx
+++ b/src/components/project/index.jsx
@@ -6,7 +6,7 @@ import config from '../../ezprofile.config';
 import { ga, languageColor, skeleton } from '../../helpers/utils';
 
 const Project = (props) => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];
diff --git a/src/components/skill/index.jsx b/src/components/skill/index.jsx
index f03019c..26d5491 100644
--- a/src/components/skill/index.jsx
+++ b/src/components/skill/index.jsx
@@ -4,7 +4,7 @@ import config from '../../ezprofile.config';
 import { skeleton } from '../../helpers/utils';
 
 const Skill = () => {
-  const [loading] = useContext(LoadingContext);
+  const { loading } = useContext(LoadingContext);
 
   const renderSkeleton = () => {
     let array = [];
diff --git a/src/components/theme-changer/index.jsx b/src/components/theme-changer/index.jsx
index d171719..08cd929 100644
--- a/src/components/theme-changer/index.jsx
+++ b/src/components/theme-changer/index.jsx
@@ -6,8 +6,10 @@ import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
 const ThemeChanger = () => {
-  const [theme, setTheme] = useContext(ThemeContext);
-  const [loading] = useContext(LoadingContext);
+  const { theme, setTheme } = useContext(ThemeContext);
+  const { loading } = useContext(LoadingContext);
+
+  console.log(theme);
 
   const changeTheme = (e, selectedTheme) => {
     e.preventDefault();