diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
index 04db832..a9de84d 100644
--- a/src/components/details/index.jsx
+++ b/src/components/details/index.jsx
@@ -18,11 +18,11 @@ import config from '../../ezprofile.config';
 
 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 className="flex justify-start py-2 px-1 items-center">
+      <span className="w-2 m-2">{icon}</span>
+      <div className="flex-grow font-medium px-2">{title}</div>
       <div
-        class={`${
+        className={`${
           skeleton ? 'flex-grow' : ''
         } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
       >
diff --git a/src/components/experience/index.jsx b/src/components/experience/index.jsx
index 14bf9a3..bab3ff9 100644
--- a/src/components/experience/index.jsx
+++ b/src/components/experience/index.jsx
@@ -1,35 +1,34 @@
 import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
+import { Fragment } from 'react';
 
 const Experience = ({ loading }) => {
   const renderSkeleton = () => {
     let array = [];
     for (let index = 0; index < 2; index++) {
       array.push(
-        <li key={index}>
-          <span>
-            {skeleton({ width: 'w-2', height: 'h-2', className: 'mr-2' })}
-            <div className="w-full">
-              <div className="block justify-between">
-                <div>
-                  {skeleton({
-                    width: 'w-9/12',
-                    height: 'h-4',
-                    className: 'mb-2',
-                  })}
-                </div>
-                <div>
-                  {skeleton({
-                    width: 'w-6/12',
-                    height: 'h-4',
-                    className: 'mb-2',
-                  })}
-                </div>
-              </div>
-              <div>{skeleton({ width: 'w-6/12', height: 'h-3' })}</div>
-            </div>
-          </span>
+        <li class="mb-5 ml-4">
+          <div
+            class="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
+            style={{ left: '-4.5px' }}
+          ></div>
+          <div class="my-0.5 text-xs opacity-80">
+            {skeleton({
+              width: 'w-5/12',
+              height: 'h-4',
+            })}
+          </div>
+          <h3 class="font-semibold opacity-90">
+            {skeleton({
+              width: 'w-6/12',
+              height: 'h-4',
+              className: 'my-1.5',
+            })}
+          </h3>
+          <p class="mb-4 font-normal opacity-90">
+            {skeleton({ width: 'w-6/12', height: 'h-3' })}
+          </p>
         </li>
       );
     }
@@ -43,43 +42,42 @@ const Experience = ({ loading }) => {
         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">
-                <li>
-                  <div className="pb-0-important mx-3">
-                    <h5 className="card-title">
-                      {loading ? (
-                        skeleton({ width: 'w-32', height: 'h-8' })
-                      ) : (
-                        <span className="opacity-70">Experience</span>
-                      )}
-                    </h5>
-                  </div>
-                </li>
-                {loading
-                  ? renderSkeleton()
-                  : config.experiences.map((experience, index) => (
-                      <li key={index}>
-                        <span>
-                          <div>
-                            <GoPrimitiveDot className="mr-2 opacity-40" />
+              <div className="mx-3">
+                <h5 className="card-title">
+                  {loading ? (
+                    skeleton({ width: 'w-32', height: 'h-8' })
+                  ) : (
+                    <span className="opacity-70">Experience</span>
+                  )}
+                </h5>
+              </div>
+              <div className="text-base-content text-opacity-60">
+                <ol class="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
+                  {loading ? (
+                    renderSkeleton()
+                  ) : (
+                    <Fragment>
+                      {config.experiences.map((experience, index) => (
+                        <li class="mb-5 ml-4">
+                          <div
+                            class="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
+                            style={{ left: '-4.5px' }}
+                          ></div>
+                          <div class="my-0.5 text-xs opacity-80">
+                            {experience.from} - {experience.to}
                           </div>
-                          <div>
-                            <div className="block justify-between">
-                              <div className="font-medium opacity-70">
-                                {experience.company}
-                              </div>
-                              <div className="opacity-50">
-                                {experience.from} - {experience.to}
-                              </div>
-                            </div>
-                            <div className="opacity-70">
-                              {experience.position}
-                            </div>
-                          </div>
-                        </span>
-                      </li>
-                    ))}
-              </ul>
+                          <h3 class="font-semibold opacity-90">
+                            {experience.position}
+                          </h3>
+                          <p class="mb-4 font-normal opacity-90">
+                            {experience.company}
+                          </p>
+                        </li>
+                      ))}
+                    </Fragment>
+                  )}
+                </ol>
+              </div>
             </div>
           </div>
         )}