diff --git a/src/App.js b/src/App.js
index b29be22..8f68c0c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,8 +39,7 @@ function App() {
                 name: data.name,
                 bio: data.bio,
                 location: data.location,
-                company: data.company,
-                twitter: data.twitter_username,
+                company: data.company
             }
 
             dispatch(setProfile(profileData));
diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js
index 9c10b50..dba40f7 100644
--- a/src/components/AvatarCard.js
+++ b/src/components/AvatarCard.js
@@ -45,7 +45,7 @@ const AvatarCard = () => {
                     <div className="mt-3 text-base-content text-opacity-60">
                         {
                             loading ? (
-                                skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' })
+                                skeleton({ width: 'w-48', height: 'h-5' })
                             ) : profile.bio
                         }
                     </div>
diff --git a/src/components/Details.js b/src/components/Details.js
index 986178c..73086a9 100644
--- a/src/components/Details.js
+++ b/src/components/Details.js
@@ -1,9 +1,9 @@
-import { GoLocation } from 'react-icons/go';
-import { AiFillGithub } from 'react-icons/ai';
+import { MdLocationOn, MdMail } from 'react-icons/md';
+import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai';
 import { SiTwitter } from 'react-icons/si';
-import { BiBuilding } from 'react-icons/bi';
-import { GrLinkedinOption, GrMail } from 'react-icons/gr';
-import { ImDribbble } from 'react-icons/im';
+import { GrLinkedinOption } from 'react-icons/gr';
+import { CgDribbble } from 'react-icons/cg';
+import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe } from 'react-icons/fa';
 import { useSelector } from 'react-redux';
 import config from '../config';
 import { skeleton } from '../helpers/utils';
@@ -18,8 +18,8 @@ const Details = () => {
             array.push((
                 <li key={index}>
                     <span>
-                        {skeleton({width: 'w-6', height: 'h-4', className: 'mr-2'})}
-                        {skeleton({width: 'w-32', height: 'h-4'})}
+                        {skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })}
+                        {skeleton({ width: 'w-32', height: 'h-4' })}
                     </span>
                 </li>
             ))
@@ -31,7 +31,7 @@ const Details = () => {
     return (
         <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 text-opacity-60">
                     {
                         loading ? renderSkeleton() : (
                             <>
@@ -39,7 +39,7 @@ const Details = () => {
                                     profile && profile.location && (
                                         <li>
                                             <span>
-                                                <GoLocation className="mr-2"/>
+                                                <MdLocationOn className="mr-2" />
                                                 {profile.location}
                                             </span>
                                         </li>
@@ -49,7 +49,7 @@ const Details = () => {
                                     profile && profile.company && (
                                         <li>
                                             <span>
-                                                <BiBuilding className="mr-2"/>
+                                                <FaBuilding className="mr-2" />
                                                 {profile.company}
                                             </span>
                                         </li>
@@ -57,9 +57,9 @@ const Details = () => {
                                 }
                                 <li>
                                     <span>
-                                        <AiFillGithub className="mr-2"/>
-                                        <a 
-                                            href={`https://github.com/${config.githubUsername}`} 
+                                        <AiFillGithub className="mr-2" />
+                                        <a
+                                            href={`https://github.com/${config.githubUsername}`}
                                             target="_blank"
                                             rel="noreferrer"
                                             className="text-base-content-important"
@@ -69,68 +69,153 @@ const Details = () => {
                                     </span>
                                 </li>
                                 {
-                                    profile && profile.twitter && (
+                                    typeof config.social.linkedin !== 'undefined' && config.social.linkedin && (
                                         <li>
                                             <span>
-                                                <SiTwitter className="mr-2"/>
-                                                <a 
-                                                    href={`https://twitter.com/${profile.twitter}`} 
+                                                <GrLinkedinOption className="mr-2" />
+                                                <a
+                                                    href={`https://www.linkedin.com/in/${config.social.linkedin}`}
                                                     target="_blank"
                                                     rel="noreferrer"
                                                     className="text-base-content-important"
                                                 >
-                                                    {profile.twitter}
+                                                    {config.social.linkedin}
                                                 </a>
                                             </span>
                                         </li>
                                     )
                                 }
                                 {
-                                    typeof config.linkedinUsername !== 'undefined' && config.linkedinUsername && (
+                                    typeof config.social.twitter !== 'undefined' && config.social.twitter && (
                                         <li>
                                             <span>
-                                                <GrLinkedinOption className="mr-2"/>
-                                                <a 
-                                                    href={`https://www.linkedin.com/in/${config.linkedinUsername}`} 
+                                                <SiTwitter className="mr-2" />
+                                                <a
+                                                    href={`https://twitter.com/${config.social.twitter}`}
                                                     target="_blank"
                                                     rel="noreferrer"
                                                     className="text-base-content-important"
                                                 >
-                                                    {config.linkedinUsername}
+                                                    {config.social.twitter}
                                                 </a>
                                             </span>
                                         </li>
                                     )
                                 }
                                 {
-                                    typeof config.dribbbleUsername !== 'undefined' && config.dribbbleUsername && (
+                                    typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
                                         <li>
                                             <span>
-                                                <ImDribbble className="mr-2"/>
-                                                <a 
-                                                    href={`https://dribbble.com/${config.dribbbleUsername}`} 
+                                                <CgDribbble className="mr-2" />
+                                                <a
+                                                    href={`https://dribbble.com/${config.social.dribbble}`}
                                                     target="_blank"
                                                     rel="noreferrer"
                                                     className="text-base-content-important"
                                                 >
-                                                    {config.dribbbleUsername}
+                                                    {config.social.dribbble}
                                                 </a>
                                             </span>
                                         </li>
                                     )
                                 }
                                 {
-                                    typeof config.email !== 'undefined' && config.email && (
+                                    typeof config.social.behance !== 'undefined' && config.social.behance && (
                                         <li>
                                             <span>
-                                                <GrMail className="mr-2"/>
-                                                <a 
-                                                    href={`mailto:${config.email}`} 
+                                                <FaBehanceSquare className="mr-2" />
+                                                <a
+                                                    href={`https://www.behance.net/${config.social.behance}`}
                                                     target="_blank"
                                                     rel="noreferrer"
                                                     className="text-base-content-important"
                                                 >
-                                                    {config.email}
+                                                    {config.social.behance}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.social.facebook !== 'undefined' && config.social.facebook && (
+                                        <li>
+                                            <span>
+                                                <FaFacebook className="mr-2" />
+                                                <a
+                                                    href={`https://www.facebook.com/${config.social.facebook}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.social.facebook}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.social.medium !== 'undefined' && config.social.medium && (
+                                        <li>
+                                            <span>
+                                                <AiFillMediumSquare className="mr-2" />
+                                                <a
+                                                    href={`https://medium.com/@${config.social.medium}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.social.medium}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.social.devto !== 'undefined' && config.social.devto && (
+                                        <li>
+                                            <span>
+                                                <FaDev className="mr-2" />
+                                                <a
+                                                    href={`https://dev.to/${config.social.devto}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.social.devto}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.social.website !== 'undefined' && config.social.website && (
+                                        <li>
+                                            <span>
+                                                <FaGlobe className="mr-2" />
+                                                <a
+                                                    href={`${config.social.website}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.social.website}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.social.email !== 'undefined' && config.social.email && (
+                                        <li>
+                                            <span>
+                                                <MdMail className="mr-2" />
+                                                <a
+                                                    href={`mailto:${config.social.email}`}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.social.email}
                                                 </a>
                                             </span>
                                         </li>
diff --git a/src/components/Experience.js b/src/components/Experience.js
index 7876dfd..25e12dd 100644
--- a/src/components/Experience.js
+++ b/src/components/Experience.js
@@ -36,11 +36,13 @@ const Experience = () => {
                 (typeof config.experiences !== 'undefined' && config.experiences.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'}) : 'Experience'}
+                                            {loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
+                                                <span className="opacity-70">Experience</span>
+                                            )}
                                         </h5>
                                     </div>
                                 </li>
@@ -50,14 +52,14 @@ const Experience = () => {
                                             <li key={index}>
                                                 <span className="d-unset">
                                                     <div className="block justify-between">
-                                                        <div className="font-medium">
+                                                        <div className="font-medium opacity-70">
                                                             {experience.company}
                                                         </div>
-                                                        <div className="opacity-90">
+                                                        <div className="opacity-50">
                                                             {experience.from} - {experience.to}
                                                         </div>
                                                     </div>
-                                                    <div>
+                                                    <div className="opacity-70">
                                                         {experience.position}
                                                     </div>
                                                 </span>
diff --git a/src/components/Skill.js b/src/components/Skill.js
index b1ff0eb..b083cd2 100644
--- a/src/components/Skill.js
+++ b/src/components/Skill.js
@@ -10,7 +10,7 @@ const Skill = () => {
         for (let index = 0; index < 12; index++) {
             array.push((
                 <div key={index}>
-                    {skeleton({width: 'w-16', height: 'h-4'})}
+                    {skeleton({ width: 'w-16', height: 'h-4' })}
                 </div>
             ))
         }
@@ -24,7 +24,7 @@ const Skill = () => {
                 (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
                     <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">
+                            <div className="inline-flex gap-2 flex-wrap p-3">
                                 {
                                     loading ? renderSkeleton() : (
                                         config.skills.map((skill, index) => (
diff --git a/src/config.js b/src/config.js
index a20c84f..c0b9257 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,12 +1,20 @@
 module.exports = {
     githubUsername: 'arifszn', // required
-    email: 'contact@arifszn.com', // optional
-    linkedinUsername: 'ariful-alam', // optional
-    dribbbleUsername: '', // optional
     blog: {
         source: 'dev.to', // medium | dev.to
         username: 'arifszn',
     },
+    social: {
+        linkedin: 'ariful-alam',
+        twitter: 'arif_swozon',
+        facebook: '',
+        dribbble: '',
+        behance: '',
+        medium: '',
+        devto: '',
+        website: 'https://www.arifszn.com',
+        email: 'contact@arifszn.com'
+    },
     skills: [
         'PHP',
         'Laravel',
@@ -65,7 +73,7 @@ module.exports = {
         // using user system preferences, instead of the hardcoded default
         respectPrefersColorScheme: true,
 
-        // Available themes
+        // Available themes. To remove any theme, exclude from here.
         themes: [
             'light',
             'dark',
diff --git a/src/index.scss b/src/index.scss
index e0a261a..d2fe776 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -58,17 +58,6 @@ svg {
     transform: scale(1.03) !important;
 }
 
-.section-title {
-    font-weight: 700;
-    font-size: .75rem;
-    line-height: 1rem;
-    padding-top: .25rem;
-    padding-bottom: .25rem;
-    // text-transform: uppercase;
-    --tw-text-opacity: 0.6;
-    color: hsla(var(--bc)/var(--tw-text-opacity,1)) !important;
-}
-
 .d-unset {
     display: unset !important;
 }