diff --git a/src/components/education/index.jsx b/src/components/education/index.jsx
index a02de67..b852a2d 100644
--- a/src/components/education/index.jsx
+++ b/src/components/education/index.jsx
@@ -1,35 +1,33 @@
-import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
+import { Fragment } from 'react';
 
 const Education = ({ 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,41 +41,42 @@ const Education = ({ loading }) => {
         config.education.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">Education</span>
-                      )}
-                    </h5>
-                  </div>
-                </li>
-                {loading
-                  ? renderSkeleton()
-                  : config.education.map((item, 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">Education</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.education.map((item, 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">
+                            {item.from} - {item.to}
                           </div>
-                          <div>
-                            <div className="block justify-between">
-                              <div className="font-medium opacity-70">
-                                {item.institution}
-                              </div>
-                              <div className="opacity-50">
-                                {item.from} - {item.to}
-                              </div>
-                            </div>
-                            <div className="opacity-70">{item.degree}</div>
-                          </div>
-                        </span>
-                      </li>
-                    ))}
-              </ul>
+                          <h3 class="font-semibold opacity-90">
+                            {item.degree}
+                          </h3>
+                          <p class="mb-4 font-normal opacity-90">
+                            {item.institution}
+                          </p>
+                        </li>
+                      ))}
+                    </Fragment>
+                  )}
+                </ol>
+              </div>
             </div>
           </div>
         )}