diff --git a/.gitignore b/.gitignore
index 5c3b10b..c96a5d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,7 @@ go.work.sum
 *.toml
 /tmp
 
+#tailwind
+./tailwindcss
+/css/main.css
 
diff --git a/css/index.css b/css/index.css
deleted file mode 100644
index 6171f12..0000000
--- a/css/index.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.htmx-indicator {
-  opacity: 0;
-  transition: opacity 500ms ease-in;
-}
-.htmx-request .htmx-indicator {
-  opacity: 1;
-}
-.htmx-request.htmx-indicator {
-  opacity: 1;
-}
-
-.contact.htmx-swapping {
-  opacity: 0;
-  transition: opacity 500ms ease-in;
-}
-
-.nav-link {
-  padding-bottom: 2px;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-}
-.nav-link.active {
-  color: #2563eb;
-  border-bottom-color: #2563eb;
-  font-weight: 600;
-}
-
-.table-th {
-  text-align: center;
-  font-size: large;
-  font-weight: bold;
-  color: #4b5563;
-  padding: 0.7rem 0.7rem 1rem 1rem;
-  border: 2px solid #4b5563;
-  border-radius: 6px;
-}
-
-.table-td {
-  text-align: center;
-  font-size: medium;
-  font-weight: 450;
-  color: #4b5563;
-  border: 2px solid #4b5563;
-  border-radius: 6px;
-}
diff --git a/css/tailwind.css b/css/tailwind.css
new file mode 100644
index 0000000..edc497f
--- /dev/null
+++ b/css/tailwind.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config "../tailwind.config.js";
diff --git a/data/experience.json b/data/experience.json
index c99f42e..f859376 100644
--- a/data/experience.json
+++ b/data/experience.json
@@ -1,19 +1,30 @@
 [
   {
-    "company": "AIS - Advanced Info Service Plc",
-    "position": "Frontend web developer",
+    "company": "Idpassglobal",
+    "position": "Java/C++ OpenCV Developer",
+    "employeeType": "Main",
+    "tasks": [
+      "develop a mobile application to scan documents using OpenCV",
+      "develop a flutter application to open a web view"
+    ],
+    "tools": "Android Studio, OpenCV, Java, Flutter",
+    "startFrom": "February 2019"
+  },
+  {
+    "company": "AIS (Advanced Info Service Plc)",
+    "position": "Frontend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
-      "add new features to a web applicaton for AIS employees to process SIMs",
+      "add new features to a Web applicaton for AIS employees to process SIMs",
       "work on MongoDB queries",
       "develop functionality to recover sim process data during system failures"
     ],
     "tools": "Angular JS, MongoDB",
-    "timePeriod": "Nov 2019 - Jan 2021"
+    "startFrom": "November 2019"
   },
   {
     "company": "True Corporation",
-    "position": "Fullstack web developer",
+    "position": "Fullstack Web Developer",
     "employeeType": "Outsource",
     "tasks": [
       "develop frontend features using React JS",
@@ -22,11 +33,11 @@
       "performance tuning on MySQL queries by indexing and query optimization"
     ],
     "tools": "React JS, Golang, MySQL, Cassandra, MinIO, Elasticsearch",
-    "timePeriod": "Feb 2021 - June 2023"
+    "startFrom": "February 2021"
   },
   {
     "company": "True Corporation",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "developing new APIs on Golang, utilizing goroutines and channels for concurrency to handle high throughput",
@@ -34,39 +45,39 @@
       "using db optimization/concurrency to bring down api response time from multiple seconds to under or just over a second with acceptable CPU and memory usage"
     ],
     "tools": "Golang, MongoDB",
-    "timePeriod": "July 2023 - February 2024"
+    "startFrom": "July 2023"
   },
     {
     "company": "AIS - Advanced Info Service Plc",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "develop numerours APIs on a limited timeframe using Golang",
       "using kafka for producing and consuming messages"
     ],
     "tools": "NodeJS, MongoDB, Kafka",
-    "timePeriod": "March 2024 - February 2025"
+    "startFrom": "March 2024"
   },
   {
     "company": "Thai Watsadu Ltd",
-    "position": "Flutter mobile developer",
+    "position": "Flutter mobile Developer",
     "employeeType": "Outsource",
     "tasks": [
       "help integrate analytics SDKs(ga4, appsflyer and segment) into the present day TOPS mobile application to fire events for user behavior tracking",
       "closely work with the marketing team to plan out which events to track and how to implement them"
     ],
     "tools": "Flutter, GA4, Appsflyer, Segment",
-    "timePeriod": "March 2025 - August 2025"
+    "startFrom": "March 2025"
   },
   {
     "company": "AIS - Advanced Info Service Plc",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "develop new APIs using Golang",
       "using kafka for producing and consuming messages"
     ],
     "tools": "NodeJS, MongoDB, Kafka",
-    "timePeriod": "September 2025 - Present"
+    "startFrom": "September 2025"
   }
 ]
diff --git a/internal/store/experience_store_json.go b/internal/store/experience_store_json.go
index 74a1752..4f671e7 100644
--- a/internal/store/experience_store_json.go
+++ b/internal/store/experience_store_json.go
@@ -14,7 +14,7 @@ type ExperienceJSON struct {
 	Position     string   `json:"position"`
 	Tasks        []string `json:"tasks"`
 	Tools        string   `json:"tools"`
-	TimePeriod   string   `json:"timePeriod"`
+	StartFrom    string   `json:"startFrom"`
 }
 
 func GetAllExperiencesJSON() ([]ExperienceJSON, error) {
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..96e5e7c
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./views/**/*.html'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#e6ebf5', // light mode background
+        secondary: '#d3d9e6', // light mode footer
+        darkprimary: '#23243b', // dark mode background
+        darksecondary: '#2f314a', // dark mode footer
+        bodytext: '#111827', // light mode text
+        darkbodytext: '#f5f5f5', // dark mode text
+        accent: '#9333ea', // light mode accent
+        darkaccent: '#2563eb', // dark mode accent
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/views/experience.html b/views/experience.html
index 941419f..536e8de 100644
--- a/views/experience.html
+++ b/views/experience.html
@@ -5,19 +5,20 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
-    <!-- Header Section -->
-    {{ template "header" }}
-    <!-- Projects Section -->
-    <div id="content" class="flex-grow">{{ template "experience-partial" .}}</div>
+  <body
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
+  >
+    <!-- Experience Section -->
+    <div id="content" class="flex-grow">
+      {{ template "experience-partial" .}}
+    </div>
     <!-- Footer Section -->
     {{ template "footer" }}
   </body>
   {{ template "script" }}
 </html>
-{{ end}}
\ No newline at end of file
+{{ end}}
diff --git a/views/footer.html b/views/footer.html
index 260b6b0..7729784 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -1,5 +1,5 @@
 {{ block "footer" .}}
-<footer id="contact" class="bg-gray-100 mt-auto py-10">
+<footer id="contact" class="bg-secondary dark:bg-darksecondary mt-auto py-10">
   <div class="container mx-auto text-center">
     <h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
     <p class="mb-6">
diff --git a/views/header.html b/views/header.html
index 7fdd242..27ef624 100644
--- a/views/header.html
+++ b/views/header.html
@@ -1,5 +1,5 @@
 {{ block "header" .}}
-<header class="bg-white shadow-md">
+<header class="bg-secondary dark:bg-darkSecondary shadow-md">
   <nav class="container mx-auto flex justify-between items-center py-4 px-6">
     <a href="#" class="text-xl font-bold text-blue-600">Dilanka Herath</a>
     <div class="space-x-6">
diff --git a/views/index.html b/views/index.html
index e7f22d0..77c5056 100644
--- a/views/index.html
+++ b/views/index.html
@@ -5,16 +5,48 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
-    <!-- Header Section -->
-    {{ template "header" }}
-    <!-- About Section -->
-    <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
+  <body
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
+  >
+    <div class="relative flex-grow">
+      <div
+        id="scatteredWords"
+        class="pointer-events-none absolute inset-0 overflow-hidden select-none hidden md:block"
+      >
+        <span
+          class="absolute top-10 left-5 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >Golang</span
+        >
+        <span
+          class="absolute top-40 right-10 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >React</span
+        >
+        <span
+          class="absolute bottom-20 left-1/3 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >HTMX</span
+        >
+        <span
+          class="absolute top-1/2 right-1/4 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >Node</span
+        >
+        <span
+          class="absolute top-3/4 right-20 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >Kafka</span
+        >
+        <span
+          class="absolute top-3/4 left-20 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+          >Docker</span
+        >
+      </div>
+      <!-- Header Section -->
+      <!-- {{ template "header" }} -->
+      <!-- About Section -->
+      <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
+    </div>
     <!-- Footer Section -->
     {{ template "footer" }}
   </body>
diff --git a/views/partials/about-partial.html b/views/partials/about-partial.html
index d093d4d..20c51d8 100644
--- a/views/partials/about-partial.html
+++ b/views/partials/about-partial.html
@@ -1,34 +1,44 @@
 {{ block "about-partial" . }}
 <!-- Hero Section -->
 <section
-  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
 >
   <h1 class="text-4xl md:text-6xl font-bold mb-4">
     Hi, I'm <span class="text-blue-600">Your Name</span>
   </h1>
-  <p class="text-lg md:text-xl mb-6 max-w-2xl">
+  <p class="text-lg md:text-xl mb-2 max-w-2xl">
     A <span class="font-semibold">[Your Role]</span> who loves building
     [something about what you do].
   </p>
-  <div class="flex gap-4">
-    <a
-      id="projectButton"
-      hx-get="/projects"
-      hx-target="#content"
-      hx-push-url="true"
-      class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
-      >View Projects</a
-    >
-    <a
-      href="#contact"
-      class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
-      >Contact Me</a
-    >
-  </div>
 </section>
 
-<!-- About Section -->
-<section id="about" class="container mx-auto py-16 px-6">
+<!-- 🌟 Glass Bubble Section -->
+<div class="flex flex-wrap justify-center gap-8 py-3">
+  <a
+    id="projectButton"
+    hx-get="/projects"
+    hx-target="#content"
+    hx-push-url="true"
+    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+  >
+    Projects
+  </a>
+
+  <a
+    id="experienceButton"
+    hx-get="/experience"
+    hx-target="#content"
+    hx-push-url="true"
+    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+  >
+    Experience
+  </a>
+</div>
+
+<section
+  id="about"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
+>
   <h2 class="text-3xl font-bold mb-6">About Me</h2>
   <p class="text-lg leading-relaxed max-w-3xl">
     I’m a [Your Profession] with experience in [key skills]. I enjoy solving
diff --git a/views/partials/experience-partial.html b/views/partials/experience-partial.html
index ce8e12d..b9d5778 100644
--- a/views/partials/experience-partial.html
+++ b/views/partials/experience-partial.html
@@ -1,38 +1,35 @@
 {{ block "experience-partial" . }}
 <h2 class="text-3xl font-bold m-6">Experience</h2>
-<div class="m-10 mb-6 overflow-x-auto rounded-lg shadow">
-  <p class="mb-6 font-bold text-lg"> Parent Company - IdPassglobal</p>
-  <table class="min-w-full border border-gray-300 border-collapse">
-    <thead class="bg-gray-100">
-      <tr class="border-b border-gray-300">
-        <th class="table-th">Company</th>
-        <th class="table-th">Position</th>
-        <th class="table-th">Employee Type</th>
-        <th class="table-th">Tasks</th>
-        <th class="table-th">Tools</th>
-        <th class="table-th">Time Period</th>
-      </tr>
-    </thead>
-{{ range . }} {{ template "experience-partial-range" . }} {{ end }} 
-  </table>
+<div class="flex flex-row m-10 mb-4">
+  <p class="font-bold text-lg">
+    For all jobs mentioned below I was an employee of
+  </p>
+  <p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
+</div>
+<div class="m-10 mb-6">
+  {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
+</div>
+{{ end }} {{block "experience-partial-range" . }}
+<div class="grid grid-cols-[7rem_1rem_auto]">
+  <!-- <div class="flex flex-row"> -->
+  <div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
+  <!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
+  <div class="flex flex-col items-center leading-none ml-2">
+    <span class="w-2.5 h-2.5 rounded-full bg-black"></span>
+    <span class="w-0.5 flex-grow bg-black"></span>
+  </div>
+  <div class="m-5">
+    <div class="flex flex-row">
+      <p class="font-bold">{{.Company}}</p>
+      <p class="ml-2 font-bold">{{.Position}}</p>
+      <p class="ml-2 font-bold">- {{.EmployeeType}}</p>
+    </div>
+    <ul class="list-disc list-inside">
+      {{ range .Tasks }}
+      <li class="m-2">{{.}}</li>
+      {{ end }}
+    </ul>
+    <!-- </div> -->
+  </div>
 </div>
 {{ end }}
-
-{{ block "experience-partial-range" . }}
-    <tbody>
-      <tr class="hover:bg-blue-50 border-b border-gray-300">
-        <td class="table-td">{{ .Company }}</td>
-        <td class="table-td">{{ .Position }}</td>
-        <td class="table-td">{{ .EmployeeType }}</td>
-        <td class="table-td text-start px-2">
-          <ul class="list-disc list-inside">
-            {{ range .Tasks }}
-            <li class="m-2">{{ . }}</li>
-            {{ end }}
-          </ul>
-        </td>
-        <td class="table-td">{{ .Tools }}</td>
-        <td class="table-td">{{ .TimePeriod }}</td>
-      </tr>
-    </tbody>
-{{ end }}
diff --git a/views/projects.html b/views/projects.html
index aa0cf7f..1cdbbf3 100644
--- a/views/projects.html
+++ b/views/projects.html
@@ -5,14 +5,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
-    <!-- Header Section -->
-    {{ template "header" }}
+  <body
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
+  >
     <!-- Projects Section -->
     <div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
     <!-- Footer Section -->
diff --git a/views/script.html b/views/script.html
index 01d4c9a..24013bb 100644
--- a/views/script.html
+++ b/views/script.html
@@ -1,34 +1,25 @@
 {{ block "script" .}}
 <script>
-  function updateActiveNav() {
+  function setScatteredWordsVisibility() {
+    const scatteredWords = document.getElementById('scatteredWords');
+    if (!scatteredWords) return;
     const url = window.location.pathname;
-    document.querySelectorAll('.nav-link').forEach((link) => {
-      link.classList.remove('active');
-      if (link.getAttribute('hx-get') === url) {
-        link.classList.add('active');
-      }
-    });
+    console.log('Current URL:', url);
+    if (url === '/' || url === '') {
+      scatteredWords.classList.add('md:block');
+    } else {
+      console.log('Hiding scattered words');
+      scatteredWords.classList.remove('md:block');
+    }
   }
   document.addEventListener('DOMContentLoaded', (event) => {
-    updateActiveNav();
+    setScatteredWordsVisibility();
     document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
-      updateActiveNav();
+      setScatteredWordsVisibility();
     });
 
     document.body.addEventListener('htmx:historyRestore', function () {
-      updateActiveNav();
-    });
-
-    document.body.addEventListener('htmx:beforeRequest', function (evt) {
-      const elt = evt.target;
-      if (
-        elt.classList &&
-        elt.classList.contains('nav-link') &&
-        elt.classList.contains('active')
-      ) {
-        evt.preventDefault();
-        evt.stopPropagation();
-      }
+      setScatteredWordsVisibility();
     });
   });
 </script>