diff --git a/src/App.js b/src/App.js
index 0ac8ef0..887ce35 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import Experience from "./components/Experience";
 import Education from "./components/Education";
 import Project from "./components/Project";
 import { setRepo } from "./store/slices/repoSlice";
+import Blog from "./components/Blog";
 
 function App() {
     const dispatch = useDispatch();
@@ -29,11 +30,10 @@ function App() {
     }, [theme])
 
     useEffect(() => {
-        loadProfile();
-        loadRepo();
+        loadData();
     }, [])
 
-    const loadProfile = () => {
+    const loadData = () => {
         axios.get(`https://api.github.com/users/${config.githubUsername}`)
         .then(response => {
             let data = response.data;
@@ -49,6 +49,9 @@ function App() {
 
             dispatch(setProfile(profileData));
         })
+        .then(() => {
+            loadRepo();
+        })
         .catch((error) => {
             console.error('Error:', error);
             
@@ -75,8 +78,6 @@ function App() {
     }
 
     const loadRepo = () => {
-        dispatch(setLoading(true));
-
         axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
         .then(response => {
             let data = response.data;
@@ -96,10 +97,7 @@ function App() {
             } catch (error2) {
                 console.error('Error:', error2);
             }
-        })
-        .finally(() => {
-            dispatch(setLoading(false));
-        });;
+        });
     }
 
     return (
@@ -148,12 +146,12 @@ function App() {
                                         <AvatarCard/>
                                         <Details/>
                                         <Skill/>
+                                        <Experience/>
+                                        <Education/>
                                     </div>
                                 </div>
                                 <div className="col-span-2">
                                     <div className="grid grid-cols-1 gap-6">
-                                        <Experience/>
-                                        <Education/>
                                         <Project/>
                                     </div>
                                 </div>
diff --git a/src/components/Blog.js b/src/components/Blog.js
new file mode 100644
index 0000000..4866107
--- /dev/null
+++ b/src/components/Blog.js
@@ -0,0 +1,24 @@
+import { useSelector } from "react-redux";
+import { skeleton } from "../helpers/utils";
+
+const { Fragment } = require("react")
+
+const Blog = () => {
+    const loading = useSelector(state => state.loading);
+
+    return (
+        <div className="card shadow-lg compact side bg-base-100">
+            <div className="flex-row items-center space-x-4 card-body">
+                <div className="flex-1">
+                    <div className="section-title">
+                        <h5 className="card-title">
+                            {loading ? skeleton({width: 'w-20', height: 'h-8'}) : 'Blog'}
+                        </h5>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Blog;
\ No newline at end of file
diff --git a/src/components/Education.js b/src/components/Education.js
index 5d90029..b3ccbff 100644
--- a/src/components/Education.js
+++ b/src/components/Education.js
@@ -10,13 +10,13 @@ const Education = () => {
         let array = [];
         for (let index = 0; index < 2; index++) {
             array.push((
-                <li>
+                <li key={index}>
                     <span className="d-unset">
-                        <div class="block md:flex justify-between">
-                            <div class="font-medium">
+                        <div className="block justify-between">
+                            <div className="font-medium">
                                 {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
                             </div>
-                            <div class="opacity-80">
+                            <div className="opacity-80">
                                 {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
                             </div>
                         </div>
@@ -35,7 +35,7 @@ const Education = () => {
         <>
             {
                 (typeof config.education !== 'undefined' && config.education.length !== 0) && (
-                    <div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2">
+                    <div className="card shadow-lg compact side bg-base-100">
                         <div className="card-body">
                             <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                                 <li>
@@ -48,13 +48,13 @@ const Education = () => {
                                 {
                                     loading ? renderSkeleton() : (
                                         config.education.map((item, index) => (
-                                            <li>
+                                            <li key={index}>
                                                 <span className="d-unset">
-                                                    <div class="block md:flex justify-between">
-                                                        <div class="font-medium">
+                                                    <div className="block justify-between">
+                                                        <div className="font-medium">
                                                             {item.institution}
                                                         </div>
-                                                        <div class="opacity-80">
+                                                        <div className="opacity-80">
                                                             {item.from} - {item.to}
                                                         </div>
                                                     </div>
diff --git a/src/components/Experience.js b/src/components/Experience.js
index 22f9a59..0f7dcf3 100644
--- a/src/components/Experience.js
+++ b/src/components/Experience.js
@@ -10,13 +10,13 @@ const Experience = () => {
         let array = [];
         for (let index = 0; index < 2; index++) {
             array.push((
-                <li>
+                <li key={index}>
                     <span className="d-unset">
-                        <div class="block md:flex justify-between">
-                            <div class="font-medium">
+                        <div className="block justify-between">
+                            <div className="font-medium">
                                 {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
                             </div>
-                            <div class="opacity-80">
+                            <div className="opacity-80">
                                 {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
                             </div>
                         </div>
@@ -35,7 +35,7 @@ const Experience = () => {
         <>
             {
                 (typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
-                    <div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2">
+                    <div className="card shadow-lg compact side bg-base-100">
                         <div className="card-body">
                             <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
                                 <li>
@@ -48,13 +48,13 @@ const Experience = () => {
                                 {
                                     loading ? renderSkeleton() : (
                                         config.experiences.map((experience, index) => (
-                                            <li>
+                                            <li key={index}>
                                                 <span className="d-unset">
-                                                    <div class="block md:flex justify-between">
-                                                        <div class="font-medium">
+                                                    <div className="block justify-between">
+                                                        <div className="font-medium">
                                                             {experience.company}
                                                         </div>
-                                                        <div class="opacity-80">
+                                                        <div className="opacity-80">
                                                             {experience.from} - {experience.to}
                                                         </div>
                                                     </div>
diff --git a/src/components/Project.js b/src/components/Project.js
index 2d26a72..353a1cd 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -14,11 +14,11 @@ const Project = () => {
 
         } else {
             return repo.slice(0, LIMIT).map((project, index) => (
-                <div className="card shadow-lg compact side bg-base-100">
+                <div className="card shadow-lg compact side bg-base-100" key={index}>
                     <div className="flex justify-between flex-col p-8">
                         <div>
                             <div className="flex items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
                             <span>{project.name}</span>
                             </div>
                             <p className="mb-8">{project.description}</p>
@@ -36,8 +36,8 @@ const Project = () => {
     return (
         <Fragment>
             <div className="col-span-1 lg:col-span-2">
-                <div class="grid grid-cols-2 gap-6">
-                    <div class="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-body">
                                 <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
@@ -48,7 +48,7 @@ const Project = () => {
                                             </h5>
                                             {
                                                 loading ? skeleton({width: 'w-8', height: 'h-8'}) : (
-                                                    <svg class="animate-bounce w-4 h-4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <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>
                                                 )
@@ -58,8 +58,8 @@ const Project = () => {
                                 </ul>
                             </div>
                         </div>
-                    </div>
-                    <div class="col-span-2">
+                    </div> */}
+                    <div className="col-span-2">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             {renderProjects()}
                         </div>
diff --git a/src/components/Skill.js b/src/components/Skill.js
index b179773..11c616a 100644
--- a/src/components/Skill.js
+++ b/src/components/Skill.js
@@ -24,11 +24,11 @@ const Skill = () => {
                 (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
                     <div className="card shadow-lg compact side bg-base-100">
                         <div className="card-body">
-                            <div className="inline-flex gap-2 flex-wrap justify-center">
+                            <div className="inline-flex gap-2 flex-wrap justify-center p-3">
                                 {
                                     loading ? renderSkeleton() : (
                                         config.skills.map((skill, index) => (
-                                            <div class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
+                                            <div key={index} className="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
                                                 {skill}
                                             </div>
                                         ))
diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js
index 41bf90f..6a930be 100644
--- a/src/components/ThemeChanger.js
+++ b/src/components/ThemeChanger.js
@@ -14,7 +14,7 @@ const ThemeChanger = () => {
     
     return (
         <div className="card shadow-lg compact side bg-base-100">
-            <div className="flex-row items-center space-x-4 card-body">
+            <div className="flex-row items-center space-x-4 card-body p-3">
                 <div className="flex-1">
                     <div className="section-title">
                         <h5 className="card-title">
@@ -26,10 +26,10 @@ const ThemeChanger = () => {
                 <div className="flex-0">
                     {
                         loading ? skeleton({width: 'w-28', height: 'h-10'}) : (
-                            <select class="select w-full max-w-xs opacity-50" value={theme} onChange={handleChange}>
+                            <select className="select w-full max-w-xs opacity-50" value={theme} onChange={handleChange}>
                                 {
                                     config.themeConfig.themes.map((item, index) => (
-                                        <option className="capitalize text-base-content text-opacity-60" value={item}>{item === config.themeConfig.default ? 'Default' : item}</option>
+                                        <option className="capitalize text-base-content text-opacity-60" value={item} key={index}>{item === config.themeConfig.default ? 'Default' : item}</option>
                                     ))
                                 }
                             </select>
diff --git a/src/config.js b/src/config.js
index e51c972..1adcb4f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -8,7 +8,13 @@ module.exports = {
         'Laravel',
         'JavaScript',
         'React.js',
-        'Node.js'
+        'Node.js',
+        'Tailwind',
+        'Antd',
+        'CSS',
+        'Git',
+        'Mysql',
+        'Jquery',
     ],
     experiences: [
         {