diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
index d672cbd..5f6554d 100644
--- a/src/components/details/index.jsx
+++ b/src/components/details/index.jsx
@@ -4,6 +4,7 @@ import { SiTwitter } from 'react-icons/si';
 import { GrLinkedinOption } from 'react-icons/gr';
 import { CgDribbble } from 'react-icons/cg';
 import { RiPhoneFill } from 'react-icons/ri';
+import { Fragment } from 'react';
 import {
   FaBehanceSquare,
   FaBuilding,
@@ -15,15 +16,15 @@ import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 
-const ListItem = ({ icon, title, value, link }) => {
+const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
     <div class="flex justify-start py-2 px-1 items-center">
       <span class="w-2 m-2">{icon}</span>
-      <div class="flex-grow font-medium px-2">{title}:</div>
+      <div class="flex-grow font-medium px-2">{title}</div>
       <div
-        class={`text-sm font-normal text-right mr-2 ml-3 ${
-          link ? 'truncate' : ''
-        }`}
+        class={`${
+          skeleton ? 'flex-grow' : ''
+        } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
       >
         <a
           href={link}
@@ -45,12 +46,12 @@ const Details = ({ profile, loading }) => {
     let array = [];
     for (let index = 0; index < 4; index++) {
       array.push(
-        <li key={index}>
-          <span>
-            {skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })}
-            {skeleton({ width: 'w-32', height: 'h-4' })}
-          </span>
-        </li>
+        <ListItem
+          skeleton={true}
+          icon={skeleton({ width: 'w-4', height: 'h-4' })}
+          title={skeleton({ width: 'w-24', height: 'h-4' })}
+          value={skeleton({ width: 'w-full', height: 'h-4' })}
+        />
       );
     }
 
@@ -60,122 +61,124 @@ const Details = ({ profile, loading }) => {
   return (
     <div className="card shadow-lg compact bg-base-100">
       <div className="card-body">
-        {loading || !profile ? (
-          renderSkeleton()
-        ) : (
-          <div className="bg-base-100 text-base-content text-opacity-60">
-            {profile.location && (
+        <div className="bg-base-100 text-base-content text-opacity-60">
+          {loading || !profile ? (
+            renderSkeleton()
+          ) : (
+            <Fragment>
+              {profile.location && (
+                <ListItem
+                  icon={<MdLocationOn className="mr-2" />}
+                  title="Based on:"
+                  value={profile.location}
+                />
+              )}
+              {profile.company && (
+                <ListItem
+                  icon={<FaBuilding className="mr-2" />}
+                  title="Company:"
+                  value={profile.company}
+                />
+              )}
               <ListItem
-                icon={<MdLocationOn className="mr-2" />}
-                title="Based on"
-                value={profile.location}
+                icon={<AiFillGithub className="mr-2" />}
+                title="GitHub:"
+                value={config.github.username}
+                link={`https://github.com/${config.github.username}`}
               />
-            )}
-            {profile.company && (
-              <ListItem
-                icon={<FaBuilding className="mr-2" />}
-                title="Company"
-                value={profile.company}
-              />
-            )}
-            <ListItem
-              icon={<AiFillGithub className="mr-2" />}
-              title="GitHub"
-              value={config.github.username}
-              link={`https://github.com/${config.github.username}`}
-            />
-            {typeof config.social.twitter !== 'undefined' &&
-              config.social.twitter && (
-                <ListItem
-                  icon={<SiTwitter className="mr-2" />}
-                  title="Twitter"
-                  value={config.social.twitter}
-                  link={`https://twitter.com/${config.social.twitter}`}
-                />
-              )}
-            {typeof config.social.linkedin !== 'undefined' &&
-              config.social.linkedin && (
-                <ListItem
-                  icon={<GrLinkedinOption className="mr-2" />}
-                  title="LinkedIn"
-                  value={config.social.linkedin}
-                  link={`https://www.linkedin.com/in/${config.social.linkedin}`}
-                />
-              )}
-            {typeof config.social.dribbble !== 'undefined' &&
-              config.social.dribbble && (
-                <ListItem
-                  icon={<CgDribbble className="mr-2" />}
-                  title="Dribbble"
-                  value={config.social.dribbble}
-                  link={`https://dribbble.com/${config.social.dribbble}`}
-                />
-              )}
-            {typeof config.social.behance !== 'undefined' &&
-              config.social.behance && (
-                <ListItem
-                  icon={<FaBehanceSquare className="mr-2" />}
-                  title="Behance"
-                  value={config.social.behance}
-                  link={`https://www.behance.net/${config.social.behance}`}
-                />
-              )}
-            {typeof config.social.facebook !== 'undefined' &&
-              config.social.facebook && (
-                <ListItem
-                  icon={<FaFacebook className="mr-2" />}
-                  title="Facebook"
-                  value={config.social.facebook}
-                  link={`https://www.facebook.com/${config.social.facebook}`}
-                />
-              )}
-            {typeof config.social.medium !== 'undefined' &&
-              config.social.medium && (
-                <ListItem
-                  icon={<AiFillMediumSquare className="mr-2" />}
-                  title="Medium"
-                  value={config.social.medium}
-                  link={`https://medium.com/@${config.social.medium}`}
-                />
-              )}
-            {typeof config.social.devto !== 'undefined' &&
-              config.social.devto && (
-                <ListItem
-                  icon={<FaDev className="mr-2" />}
-                  title="Dev"
-                  value={config.social.devto}
-                  link={`https://dev.to/${config.social.devto}`}
-                />
-              )}
-            {typeof config.social.website !== 'undefined' &&
-              config.social.website && (
-                <ListItem
-                  icon={<FaGlobe className="mr-2" />}
-                  title="Website"
-                  value={config.social.website}
-                  link={config.social.website}
-                />
-              )}
-            {typeof config.social.phone !== 'undefined' &&
-              config.social.phone && (
-                <ListItem
-                  icon={<RiPhoneFill className="mr-2" />}
-                  title="Phone"
-                  value={config.social.phone}
-                  link={`tel:${config.social.phone}`}
-                />
-              )}
-            {typeof config.social.email !== 'undefined' &&
-              config.social.email && (
-                <ListItem
-                  icon={<MdMail className="mr-2" />}
-                  title="Email"
-                  value={config.social.email}
-                  link={`mailto:${config.social.email}`}
-                />
-              )}
-          </div>
-        )}
+              {typeof config.social.twitter !== 'undefined' &&
+                config.social.twitter && (
+                  <ListItem
+                    icon={<SiTwitter className="mr-2" />}
+                    title="Twitter:"
+                    value={config.social.twitter}
+                    link={`https://twitter.com/${config.social.twitter}`}
+                  />
+                )}
+              {typeof config.social.linkedin !== 'undefined' &&
+                config.social.linkedin && (
+                  <ListItem
+                    icon={<GrLinkedinOption className="mr-2" />}
+                    title="LinkedIn:"
+                    value={config.social.linkedin}
+                    link={`https://www.linkedin.com/in/${config.social.linkedin}`}
+                  />
+                )}
+              {typeof config.social.dribbble !== 'undefined' &&
+                config.social.dribbble && (
+                  <ListItem
+                    icon={<CgDribbble className="mr-2" />}
+                    title="Dribbble:"
+                    value={config.social.dribbble}
+                    link={`https://dribbble.com/${config.social.dribbble}`}
+                  />
+                )}
+              {typeof config.social.behance !== 'undefined' &&
+                config.social.behance && (
+                  <ListItem
+                    icon={<FaBehanceSquare className="mr-2" />}
+                    title="Behance:"
+                    value={config.social.behance}
+                    link={`https://www.behance.net/${config.social.behance}`}
+                  />
+                )}
+              {typeof config.social.facebook !== 'undefined' &&
+                config.social.facebook && (
+                  <ListItem
+                    icon={<FaFacebook className="mr-2" />}
+                    title="Facebook:"
+                    value={config.social.facebook}
+                    link={`https://www.facebook.com/${config.social.facebook}`}
+                  />
+                )}
+              {typeof config.social.medium !== 'undefined' &&
+                config.social.medium && (
+                  <ListItem
+                    icon={<AiFillMediumSquare className="mr-2" />}
+                    title="Medium:"
+                    value={config.social.medium}
+                    link={`https://medium.com/@${config.social.medium}`}
+                  />
+                )}
+              {typeof config.social.devto !== 'undefined' &&
+                config.social.devto && (
+                  <ListItem
+                    icon={<FaDev className="mr-2" />}
+                    title="Dev:"
+                    value={config.social.devto}
+                    link={`https://dev.to/${config.social.devto}`}
+                  />
+                )}
+              {typeof config.social.website !== 'undefined' &&
+                config.social.website && (
+                  <ListItem
+                    icon={<FaGlobe className="mr-2" />}
+                    title="Website:"
+                    value={config.social.website}
+                    link={config.social.website}
+                  />
+                )}
+              {typeof config.social.phone !== 'undefined' &&
+                config.social.phone && (
+                  <ListItem
+                    icon={<RiPhoneFill className="mr-2" />}
+                    title="Phone:"
+                    value={config.social.phone}
+                    link={`tel:${config.social.phone}`}
+                  />
+                )}
+              {typeof config.social.email !== 'undefined' &&
+                config.social.email && (
+                  <ListItem
+                    icon={<MdMail className="mr-2" />}
+                    title="Email:"
+                    value={config.social.email}
+                    link={`mailto:${config.social.email}`}
+                  />
+                )}
+            </Fragment>
+          )}
+        </div>
       </div>
     </div>
   );