diff --git a/changelog.md b/changelog.md
index 5c571a5..fca6e22 100644
--- a/changelog.md
+++ b/changelog.md
@@ -2,7 +2,7 @@
 
 ## Next Release
 
--
+- Improve UI
 
 ## 0.6.0
 
diff --git a/src/base/templates/cotton/base.html b/src/base/templates/cotton/base.html
index 36e208e..86cc7e7 100644
--- a/src/base/templates/cotton/base.html
+++ b/src/base/templates/cotton/base.html
@@ -79,7 +79,7 @@
         <div class="flex flex-col h-dvh w-screen">
             <c-nav-bar :request="request" :csrf_token="csrf_token" only />
             <progress id="progress-bar"
-                      class="flex progress progress-primary w-full max-md:h-4"
+                      class="progress progress-primary w-full h-1! shrink-0"
                       value="0"
                       max="100"></progress>
             <div id="container" class="overflow-y-auto">
diff --git a/src/base/templates/cotton/buttons/accept_button.html b/src/base/templates/cotton/buttons/accept_button.html
index 16b0725..dbb5106 100644
--- a/src/base/templates/cotton/buttons/accept_button.html
+++ b/src/base/templates/cotton/buttons/accept_button.html
@@ -4,8 +4,9 @@
       method="post">
     {% csrf_token %}
     <input name="next" type="hidden" value="{{ request.path }}">
-    <button class="btn btn-sm btn-success" type="submit">
-        <svg class="w-4 h-4 mr-2"
+    <button class="btn btn-sm btn-success gap-2 hover:scale-105 transition-transform"
+            type="submit">
+        <svg class="w-4 h-4"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
diff --git a/src/base/templates/cotton/buttons/close_button.html b/src/base/templates/cotton/buttons/close_button.html
index 470ccc3..a983bd1 100644
--- a/src/base/templates/cotton/buttons/close_button.html
+++ b/src/base/templates/cotton/buttons/close_button.html
@@ -1,5 +1,6 @@
-<button class="btn btn-xs btn-circle btn-neutral absolute {{ position_classes }}" {{ attrs }}>
-    <svg class="h-4 w-4"
+<button class="btn btn-sm btn-circle btn-ghost hover:bg-error/20 hover:text-error transition-colors {{ position_classes }}"
+        {{ attrs }}>
+    <svg class="h-5 w-5"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
diff --git a/src/base/templates/cotton/buttons/settings_button.html b/src/base/templates/cotton/buttons/settings_button.html
index cff8e46..be82173 100644
--- a/src/base/templates/cotton/buttons/settings_button.html
+++ b/src/base/templates/cotton/buttons/settings_button.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 
-<button class="btn btn-sm btn-info"
+<button class="btn btn-sm btn-info gap-2 hover:scale-105 transition-transform"
         onclick="cookies_settings_modal.showModal()">
-    <svg class="w-4 h-4 mr-2"
+    <svg class="w-4 h-4"
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
@@ -17,29 +17,37 @@
     </svg>
     {% translate "Settings" %}
 </button>
-<dialog id="cookies_settings_modal" class="modal">
-    <div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
-        <form method="dialog">
+<dialog id="cookies_settings_modal"
+        class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh] overflow-hidden">
+        <!-- Close button -->
+        <form method="dialog" class="absolute right-4 top-4 z-10">
             <c-buttons.close-button position-classes="right-2 top-2" />
         </form>
-        <form class="inline-block"
-              action="{% url 'set_cookie_preferences' %}"
-              method="post">
-            {% csrf_token %}
-            <input name="next" type="hidden" value="{{ request.path }}" />
 
-            <div class="flex-1 overflow-y-auto">
-                <h3 class="text-lg font-bold mb-10">
-                    {% translate "Cookie Settings" %}
-                </h3>
+        <!-- Header section - fixed at top -->
+        <div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
+            <h3 class="text-2xl sm:text-3xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent pr-8">
+                {% translate "Cookie Settings" %}
+            </h3>
+        </div>
+
+        <!-- Scrollable content area -->
+        <div class="overflow-y-auto flex-1">
+            <form class="p-4 sm:p-6"
+                  action="{% url 'set_cookie_preferences' %}"
+                  method="post">
+                {% csrf_token %}
+                <input name="next" type="hidden" value="{{ request.path }}" />
+
                 <div class="grid grid-cols-1 gap-4">
                     {% for cookie_group in cookie_groups %}
-                        <div class="card border border-base-300">
+                        <div class="card border-2 border-base-300 hover:border-primary/30 transition-colors bg-linear-to-r from-base-200 to-base-100 shadow-md">
                             <div class="card-body">
-                                <h2 class="card-title">
+                                <h2 class="card-title text-primary font-bold">
                                     {{ cookie_group.name }}
                                 </h2>
-                                <div class="text-left">
+                                <div class="text-left text-base-content/80">
                                     {{ cookie_group.description }}
                                 </div>
                                 <div class="flex justify-end">
@@ -53,12 +61,21 @@ <h2 class="card-title">
                         </div>
                     {% endfor %}
                 </div>
-            </div>
-            <div class="modal-action">
-                <button class="btn" type="submit">
-                    {% translate "Save" %}
-                </button>
-            </div>
-        </form>
+
+                <!-- Footer - fixed at bottom -->
+                <div class="modal-action mt-6">
+                    <button class="btn btn-primary gap-2 group" type="submit">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             class="h-5 w-5"
+                             fill="none"
+                             viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                        <span>{% translate "Save" %}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
 </dialog>
diff --git a/src/base/templates/cotton/cookie_consent_banner.html b/src/base/templates/cotton/cookie_consent_banner.html
index 756ab76..d259c16 100644
--- a/src/base/templates/cotton/cookie_consent_banner.html
+++ b/src/base/templates/cotton/cookie_consent_banner.html
@@ -2,20 +2,21 @@
 
 {% get_cooco_banner_config as banner %}
 {% if banner.show_banner %}
-    <div id="cooco_banner" class="absolute w-full bottom-0 left-0 md:p-10 p-5">
+    <div id="cooco_banner"
+         class="fixed w-full bottom-0 left-0 md:p-10 p-5 z-50">
         <div role="alert"
-             class="alert alert-vertical sm:alert-horizontal md:px-10 border-2 border-neutral">
+             class="alert alert-vertical sm:alert-horizontal md:px-10 border-2 border-primary/30 bg-linear-to-br from-base-300 to-base-200 shadow-2xl backdrop-blur-md relative">
 
             <div class="sm:col-span-2">
-                <h2 class="mb-2 text-xl font-heading">
+                <h2 class="mb-2 text-xl font-bold text-primary">
                     {{ banner.title }}
                 </h2>
-                <p>
+                <p class="text-base-content/80">
                     {{ banner.text }}
                 </p>
             </div>
 
-            <div>
+            <div class="flex flex-row gap-2 flex-wrap">
                 {% get_cookie_groups as cookie_groups %}
                 {% if cookie_groups|any_optional_cookie_group %}
                     <c-buttons.settings-button />
@@ -24,7 +25,7 @@ <h2 class="mb-2 text-xl font-heading">
                 <c-buttons.accept-button />
             </div>
 
-            <c-buttons.close-button position-classes="md:right-12 md:top-12 right-7 top-7" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
+            <c-buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
 
         </div>
     </div>
diff --git a/src/base/templates/cotton/footer.html b/src/base/templates/cotton/footer.html
index 4e35428..338e02a 100644
--- a/src/base/templates/cotton/footer.html
+++ b/src/base/templates/cotton/footer.html
@@ -4,39 +4,57 @@
 
 {% get_footer_data as data %}
 
-<div class="bg-base-300 text-base-content p-10">
+<div class="bg-linear-to-br from-base-300 to-base-200 text-base-content p-10 border-t-2 border-primary/20">
     <footer id="upper-footer"
             class="footer lg:footer-horizontal lg:max-w-(--breakpoint-lg) lg:mx-auto pb-10">
 
         {% with legal_and_privacy=data.legal_and_privacy %}
             {% if legal_and_privacy %}
                 <nav id="legal-and-privacy" class="lg:mx-auto">
-                    <h6 id="legal-and-privacy-title" class="footer-title">
+                    <h6 id="legal-and-privacy-title"
+                        class="footer-title text-primary font-bold">
                         {% translate "Legal & Privacy" %}
                     </h6>
 
                     {% for section in legal_and_privacy %}
                         <button id="legal-and-privacy-{{ section.id }}-link"
-                                class="link link-hover"
+                                class="link link-hover hover:text-primary transition-colors"
                                 onclick="{{ section.modal_name }}.showModal()">
                             {{ section.title }}
                         </button>
-                        <dialog id="{{ section.modal_name }}" class="modal">
-                            <div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
-                                <div class="flex-1 overflow-y-auto">
-                                    <div class="prose max-w-none py-4">
-                                        <h1 id="legal-and-privacy-{{ section.id }}-title">
-                                            {{ section.title }}
-                                        </h1>
-                                        <div id="legal-and-privacy-{{ section.id }}-text">
+                        <dialog id="{{ section.modal_name }}"
+                                class="modal modal-bottom sm:modal-middle">
+                            <div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh]">
+                                <!-- Header section - fixed at top -->
+                                <div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
+                                    <h1 id="legal-and-privacy-{{ section.id }}-title"
+                                        class="text-3xl sm:text-4xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                                        {{ section.title }}
+                                    </h1>
+                                </div>
+
+                                <!-- Scrollable content area -->
+                                <div class="overflow-y-auto flex-1">
+                                    <div class="p-4 sm:p-6">
+                                        <div id="legal-and-privacy-{{ section.id }}-text"
+                                             class="prose max-w-none prose-headings:text-primary prose-a:text-primary">
                                             {{ section.text|md }}
                                         </div>
                                     </div>
                                 </div>
-                                <div class="modal-action">
+
+                                <!-- Footer - fixed at bottom -->
+                                <div class="modal-action border-t border-primary/20 p-4 sm:p-6 bg-base-200/95 backdrop-blur-sm shrink-0 m-0">
                                     <form method="dialog">
-                                        <button class="btn">
-                                            Close
+                                        <button class="btn btn-primary gap-2 group">
+                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                 class="h-5 w-5"
+                                                 fill="none"
+                                                 viewBox="0 0 24 24"
+                                                 stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                            </svg>
+                                            <span>{% translate "Close" %}</span>
                                         </button>
                                     </form>
                                 </div>
@@ -51,7 +69,8 @@ <h1 id="legal-and-privacy-{{ section.id }}-title">
         {% with follow_me_links=data.follow_me_links %}
             {% if follow_me_links %}
                 <nav id="follow-me-links" class="lg:mx-auto">
-                    <h6 id="follow-me-links-title" class="footer-title">
+                    <h6 id="follow-me-links-title"
+                        class="footer-title text-primary font-bold">
                         {% translate "Follow Me" %}
                     </h6>
                     <div class="grid grid-flow-col gap-4">
@@ -60,7 +79,7 @@ <h6 id="follow-me-links-title" class="footer-title">
                                  class="tooltip"
                                  data-tip="{{ link.name }}">
                                 <a id="follow-me-link-{{ link.id }}"
-                                   class="inline-block"
+                                   class="inline-block hover:text-primary transition-all hover:scale-110"
                                    role="button"
                                    href="{{ link.link }}"
                                    target="_blank">
@@ -85,7 +104,7 @@ <h6 id="follow-me-links-title" class="footer-title">
             <p>
                 {% translate "The source code of this website is available on" %}
                 <a id="github-repo-link"
-                   class="link underline-offset-4"
+                   class="link underline-offset-4 hover:text-primary transition-colors font-semibold"
                    href="https://github.com/roberfi/personal-portfolio"
                    target="_blank"
                    rel="noopener noreferrer">GitHub</a>
diff --git a/src/base/templates/cotton/nav_bar.html b/src/base/templates/cotton/nav_bar.html
index ed38480..99de5ed 100644
--- a/src/base/templates/cotton/nav_bar.html
+++ b/src/base/templates/cotton/nav_bar.html
@@ -6,7 +6,8 @@
 {% get_language_info_list for AVAILABLE_LANGUAGES as languages %}
 
 {% with request.resolver_match.url_name as url_name %}
-    <nav id="nav-bar" class="navbar bg-base-200">
+    <nav id="nav-bar"
+         class="navbar bg-linear-to-r from-base-200 to-base-100 shadow-lg border-b border-primary/20 backdrop-blur-sm z-50">
         <div class="navbar-start">
             <div class="dropdown">
                 <div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden">
@@ -19,23 +20,28 @@
                     </svg>
                 </div>
                 <ul tabindex="0"
-                    class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow">
+                    class="menu dropdown-content bg-linear-to-br from-base-100 to-base-200 rounded-box z-100 mt-5 w-52 p-2 shadow-xl border border-primary/20">
                     <c-section-links mode="dropdown" />
                 </ul>
             </div>
-            <a class="btn btn-ghost btn-circle lg:mx-5" href="{% url "home" %}">
-                <image class="w-8 h-8" src="/media/icon.png" />
+            <a class="btn btn-ghost btn-circle lg:mx-5 hover:bg-primary/10 transition-colors"
+               href="{% url "home" %}">
+                <image class="w-8 h-8 hover:scale-110 transition-transform"
+                       src="/media/icon.png" />
             </a>
             <div role="tablist" class="tabs tabs-border max-lg:hidden">
                 <c-section-links mode="tabs" />
             </div>
         </div>
         <div class="navbar-center">
-            <span id="active-section-title" class="lg:hidden whitespace-nowrap">{{ url_name|url_title }}</span>
+            <span id="active-section-title"
+                  class="lg:hidden whitespace-nowrap font-semibold text-primary">{{ url_name|url_title }}</span>
         </div>
         <div class="navbar-end">
             <div class="dropdown dropdown-end">
-                <div tabindex="0" role="button" class="btn btn-ghost">
+                <div tabindex="0"
+                     role="button"
+                     class="btn btn-ghost hover:bg-primary/10 transition-colors gap-2">
                     <svg xmlns="http://www.w3.org/2000/svg"
                          class="w-5 h-5"
                          aria-hidden="true"
@@ -47,7 +53,7 @@
                     <span>{{ CURRENT_LANGUAGE }}</span>
                 </div>
                 <ul tabindex="0"
-                    class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow">
+                    class="menu dropdown-content bg-linear-to-br from-base-100 to-base-200 rounded-box z-100 mt-5 w-52 p-2 shadow-xl border border-primary/20">
                     {% for language in languages %}
                         <li>
                             <form class="block p-0" action="{% url 'set_language' %}" method="post">
@@ -55,7 +61,7 @@
                                 <input name="next" type="hidden" value="{% url url_name %}">
                                 <input name="language" type="hidden" value="{{ language.code }}">
                                 <button type="submit"
-                                        class="btn btn-lg w-full justify-start font-normal{% if language.code == CURRENT_LANGUAGE %} bg-soft{% else %} btn-ghost{% endif %}">
+                                        class="btn btn-lg w-full justify-start font-normal transition-all{% if language.code == CURRENT_LANGUAGE %} bg-neutral/40 text-neutral-content font-semibold{% else %} btn-ghost hover:bg-white/5{% endif %}">
                                     <span class="flex-1 text-left">{{ language.name_local | title }}</span>
                                 </button>
                             </form>
diff --git a/src/base/templates/cotton/section_links.html b/src/base/templates/cotton/section_links.html
index e731682..a73802f 100644
--- a/src/base/templates/cotton/section_links.html
+++ b/src/base/templates/cotton/section_links.html
@@ -10,7 +10,7 @@
                    href="{% url link.url %}">{{ link.name }}</a>
             {% elif mode == "dropdown" %}
                 <li>
-                    <a class="btn btn-lg w-full justify-start font-normal{% if url_name == link.url %} bg-soft{% else %} btn-ghost{% endif %}"
+                    <a class="btn btn-lg w-full justify-start font-normal transition-all{% if url_name == link.url %} bg-neutral/40 text-neutral-content font-semibold{% else %} btn-ghost hover:bg-white/5{% endif %}"
                        role="button"
                        href="{% url link.url %}">
                         <span class="flex-1 text-left">{{ link.name }}</span>
diff --git a/src/home/templates/cotton/experience_timeline.html b/src/home/templates/cotton/experience_timeline.html
index 71a464e..4bcec0d 100644
--- a/src/home/templates/cotton/experience_timeline.html
+++ b/src/home/templates/cotton/experience_timeline.html
@@ -8,172 +8,257 @@
             {% if not forloop.first %}
                 <hr />
             {% endif %}
-            <div class="timeline-middle text-primary">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     viewBox="0 0 20 20"
-                     fill="currentColor"
-                     class="h-5 w-5">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
-                </svg>
-            </div>
-            <div class="mb-10! w-full {% if forloop.counter|divisibleby:2 %}timeline-start md:text-end{% else %}timeline-end{% endif %}">
-                <time id="{{ item_type|default:'item' }}-{{ item.id }}-period"
-                      class="font-mono text-primary">
-                    {{ item.period }}
-                </time>
-                <div id="{{ item_type|default:'item' }}-{{ item.id }}-duration"
-                     class="font-mono text-primary">
-                    ({{ item.duration }})
-                </div>
-                <div id="{{ item_type|default:'item' }}-{{ item.id }}-title"
-                     class="text-lg font-black mt-5">
-                    {{ item.title }}
-                </div>
-                {% if item.institution %}
-                    <div id="{{ item_type|default:'item' }}-{{ item.id }}-institution"
-                         class="font-mono text-secondary">
-                        {{ item.institution }}
-                    </div>
-                {% endif %}
-                <div id="{{ item_type|default:'item' }}-{{ item.id }}-location"
-                     class="font-mono text-secondary">
-                    {{ item.location }}
-                </div>
-                {% if item.technologies %}
-                    <div id="{{ item_type|default:'item' }}-{{ item.id }}-technologies"
-                         class="mt-2">
-                        {% for tech in item.technologies.all %}
-                            <span id="{{ item_type|default:'item' }}-{{ item.id }}-technology-{{ tech.id }}"
-                                  class="badge badge-neutral mb-1">
-                                {{ tech.name }}
-                            </span>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-                <div class="mb-1">
-                    <!-- Button to show modal with item info -->
-                    <button id="{{ item_type|default:'item' }}-{{ item.id }}-more-button"
-                            class="btn btn-ghost"
-                            onclick="{{ item_type|default:'item' }}_{{ item.id }}_modal.showModal()">
-                        <svg class="h-5 w-5"
-                             viewBox="0 0 20 20"
-                             xmlns="http://www.w3.org/2000/svg"
-                             xmlns:xlink="http://www.w3.org/1999/xlink"
-                             xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
-                             fill="currentColor">
-                            <path fill-rule="evenodd" d="M10 3a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0zm14 .069a1 1 0 01-1 1h-2.931V14a1 1 0 11-2 0v-2.931H6a1 1 0 110-2h3.069V6a1 1 0 112 0v3.069H14a1 1 0 011 1z">
-                            </path>
-                        </svg>
-                    </button>
+            <div class="timeline-middle">
+                <div class="w-12 h-12 rounded-full bg-linear-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg ring-4 ring-base-100 animate-pulse">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         viewBox="0 0 20 20"
+                         fill="currentColor"
+                         class="h-6 w-6 text-primary-content">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                    </svg>
                 </div>
             </div>
-            <dialog id="{{ item_type|default:'item' }}_{{ item.id }}_modal" class="modal">
-                <div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
-                    <div class="flex-1 overflow-y-auto">
-                        <h3 id="modal-{{ item_type|default:'item' }}-{{ item.id }}-title"
-                            class="text-lg font-bold">
+            <div class="mb-10! w-full {% if forloop.counter|divisibleby:2 %}timeline-start md:text-end{% else %}timeline-end{% endif %} animate-fade-in">
+                <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] border border-base-300 hover:border-primary/30">
+                    <div class="card-body">
+                        <div class="flex flex-col sm:flex-row sm:items-center gap-2 {% if forloop.counter|divisibleby:2 %}md:justify-end{% endif %}">
+                            <time id="{{ item_type|default:'item' }}-{{ item.id }}-period"
+                                  class="font-mono text-sm font-bold text-primary bg-primary/10 px-3 py-1 rounded-full whitespace-nowrap w-fit">
+                                {{ item.period }}
+                            </time>
+                            <div id="{{ item_type|default:'item' }}-{{ item.id }}-duration"
+                                 class="font-mono text-xs text-primary/70 whitespace-nowrap px-3 sm:px-0">
+                                {{ item.duration }}
+                            </div>
+                        </div>
+                        <div id="{{ item_type|default:'item' }}-{{ item.id }}-title"
+                             class="text-2xl font-black mt-3 mb-2">
                             {{ item.title }}
-                        </h3>
-                        <time id="modal-{{ item_type|default:'item' }}-{{ item.id }}-period"
-                              class="font-mono text-primary">
-                            {{ item.period }}
-                        </time>
-                        <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-duration"
-                             class="font-mono text-primary">
-                            ({{ item.duration }})
                         </div>
                         {% if item.institution %}
-                            <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-institution"
-                                 class="font-mono text-secondary">
+                            <div id="{{ item_type|default:'item' }}-{{ item.id }}-institution"
+                                 class="font-semibold text-secondary flex items-center gap-2 {% if forloop.counter|divisibleby:2 %}md:justify-end{% endif %}">
+                                <svg xmlns="http://www.w3.org/2000/svg"
+                                     class="h-4 w-4"
+                                     fill="none"
+                                     viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
                                 {{ item.institution }}
                             </div>
                         {% endif %}
-                        <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-location"
-                             class="font-mono text-secondary">
+                        <div id="{{ item_type|default:'item' }}-{{ item.id }}-location"
+                             class="font-mono text-sm text-base-content/60 flex items-center gap-2 {% if forloop.counter|divisibleby:2 %}md:justify-end{% endif %}">
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                                 class="h-4 w-4"
+                                 fill="none"
+                                 viewBox="0 0 24 24"
+                                 stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                            </svg>
                             {{ item.location }}
                         </div>
                         {% if item.technologies %}
-                            <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-technologies"
-                                 class="mt-2">
+                            <div id="{{ item_type|default:'item' }}-{{ item.id }}-technologies"
+                                 class="mt-4 flex flex-wrap gap-2 {% if forloop.counter|divisibleby:2 %}md:justify-end{% endif %}">
                                 {% for tech in item.technologies.all %}
-                                    <span id="modal-{{ item_type|default:'item' }}-{{ item.id }}-technology-{{ tech.id }}"
-                                          class="badge badge-neutral mb-1">
+                                    <span id="{{ item_type|default:'item' }}-{{ item.id }}-technology-{{ tech.id }}"
+                                          class="badge badge-primary badge-outline hover:badge-primary transition-colors duration-200 font-semibold">
                                         {{ tech.name }}
                                     </span>
                                 {% endfor %}
                             </div>
                         {% endif %}
-                        <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-description"
-                             class="prose max-w-none py-4">
-                            {{ item.description|md }}
+                        <div class="card-actions {% if forloop.counter|divisibleby:2 %}md:justify-end{% else %}justify-start{% endif %} mt-4">
+                            <!-- Button to show modal with item info -->
+                            <button id="{{ item_type|default:'item' }}-{{ item.id }}-more-button"
+                                    class="btn btn-primary btn-sm gap-2 group"
+                                    onclick="{{ item_type|default:'item' }}_{{ item.id }}_modal.showModal()">
+                                <span>{% translate "View more" %}</span>
+                                <svg xmlns="http://www.w3.org/2000/svg"
+                                     class="h-5 w-5 group-hover:translate-x-1 transition-transform"
+                                     fill="none"
+                                     viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                                </svg>
+                            </button>
                         </div>
-                        {% comment %} Sub-projects section - only shown if item has sub_projects {% endcomment %}
-                        {% if item.sub_projects.exists %}
-                            <div id="{{ item_type|default:'item' }}-{{ item.id }}-subprojects"
-                                 class="mt-6 border-t pt-6">
-                                <h4 id="{{ item_type|default:'item' }}-{{ item.id }}-subprojects-title"
-                                    class="text-md font-semibold mb-4 text-primary">
-                                    {% translate "Projects" %}
-                                </h4>
-                                <div class="space-y-3">
-                                    {% for sub_project in item.sub_projects.all %}
-                                        <details class="collapse collapse-arrow bg-base-200"
-                                                 name="subprojects-{{ item.id }}-accordion"
-                                                 {% if forloop.first %}open{% endif %}>
-                                            <summary class="collapse-title">
-                                                <div class="flex justify-between items-start gap-4">
-                                                    <div class="flex-1">
+                    </div>
+                </div>
+            </div>
+            <dialog id="{{ item_type|default:'item' }}_{{ item.id }}_modal"
+                    class="modal modal-bottom sm:modal-middle">
+                <div class="modal-box w-full max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh]">
+                    <!-- Header section - fixed at top -->
+                    <div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
+                        <h3 id="modal-{{ item_type|default:'item' }}-{{ item.id }}-title"
+                            class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                            {{ item.title }}
+                        </h3>
+                        <div class="flex flex-wrap items-center gap-3">
+                            <time id="modal-{{ item_type|default:'item' }}-{{ item.id }}-period"
+                                  class="font-mono text-xs sm:text-sm font-bold text-primary bg-primary/20 px-3 sm:px-4 py-1.5 rounded-full whitespace-nowrap">
+                                {{ item.period }}
+                            </time>
+                            <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-duration"
+                                 class="font-mono text-xs sm:text-sm text-primary/80 font-semibold">
+                                {{ item.duration }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Scrollable content area -->
+                    <div class="overflow-y-auto flex-1">
+                        <!-- Content section with padding -->
+                        <div class="p-4 sm:p-6">
+                            <!-- Institution and location -->
+                            <div class="space-y-2 mb-4">
+                                {% if item.institution %}
+                                    <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-institution"
+                                         class="flex items-center gap-2 font-semibold text-secondary">
+                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                             class="h-5 w-5"
+                                             fill="none"
+                                             viewBox="0 0 24 24"
+                                             stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                        </svg>
+                                        {{ item.institution }}
+                                    </div>
+                                {% endif %}
+                                <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-location"
+                                     class="flex items-center gap-2 text-sm text-base-content/70">
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                         class="h-5 w-5"
+                                         fill="none"
+                                         viewBox="0 0 24 24"
+                                         stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    </svg>
+                                    {{ item.location }}
+                                </div>
+                            </div>
+
+                            <!-- Technologies -->
+                            {% if item.technologies %}
+                                <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-technologies"
+                                     class="flex flex-wrap gap-2 mb-4">
+                                    {% for tech in item.technologies.all %}
+                                        <span id="modal-{{ item_type|default:'item' }}-{{ item.id }}-technology-{{ tech.id }}"
+                                              class="badge badge-primary badge-outline hover:badge-primary transition-colors duration-200 font-semibold whitespace-nowrap max-w-full truncate inline-block">
+                                            {{ tech.name }}
+                                        </span>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
+
+                            <!-- Description -->
+                            <div id="modal-{{ item_type|default:'item' }}-{{ item.id }}-description"
+                                 class="prose max-w-none py-4 prose-headings:text-primary prose-a:text-primary">
+                                {{ item.description|md }}
+                            </div>
+                            {% comment %} Sub-projects section - only shown if item has sub_projects {% endcomment %}
+                            {% if item.sub_projects.exists %}
+                                <div id="{{ item_type|default:'item' }}-{{ item.id }}-subprojects"
+                                     class="mt-6 border-t-2 border-primary/20 pt-6">
+                                    <div class="flex items-center gap-2 mb-6">
+                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                             class="h-6 w-6 text-primary"
+                                             fill="none"
+                                             viewBox="0 0 24 24"
+                                             stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                                        </svg>
+                                        <h4 id="{{ item_type|default:'item' }}-{{ item.id }}-subprojects-title"
+                                            class="text-xl font-bold text-primary">
+                                            {% translate "Projects" %}
+                                        </h4>
+                                    </div>
+                                    <div class="space-y-3">
+                                        {% for sub_project in item.sub_projects.all %}
+                                            <details class="collapse collapse-arrow bg-linear-to-r from-base-200 to-base-300 hover:from-base-300 hover:to-base-200 transition-all duration-300 rounded-lg shadow-md border border-base-300 hover:border-primary/30"
+                                                     name="subprojects-{{ item.id }}-accordion"
+                                                     {% if forloop.first %}open{% endif %}>
+                                                <summary class="collapse-title hover:text-primary transition-colors">
+                                                    <div class="flex flex-col gap-3">
+                                                        <!-- Title -->
                                                         <h4 id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-title"
-                                                            class="font-semibold">
+                                                            class="font-bold text-lg">
                                                             {{ sub_project.title }}
                                                         </h4>
+
+                                                        <!-- Period and duration -->
+                                                        <div class="flex items-center gap-2 flex-wrap">
+                                                            <time id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-period"
+                                                                  class="font-mono text-xs font-bold text-primary bg-primary/10 px-3 py-1 rounded-full whitespace-nowrap">
+                                                                {{ sub_project.period }}
+                                                            </time>
+                                                            <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-duration"
+                                                                 class="font-mono text-xs text-primary/70">
+                                                                {{ sub_project.duration }}
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- Client -->
                                                         {% if sub_project.client %}
                                                             <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-client"
-                                                                 class="font-mono text-sm text-secondary">
+                                                                 class="flex items-center gap-2 text-sm text-secondary font-semibold">
+                                                                <svg xmlns="http://www.w3.org/2000/svg"
+                                                                     class="h-4 w-4"
+                                                                     fill="none"
+                                                                     viewBox="0 0 24 24"
+                                                                     stroke="currentColor">
+                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                                                </svg>
                                                                 {{ sub_project.client }}
                                                             </div>
                                                         {% endif %}
+
+                                                        <!-- Technologies -->
                                                         {% if sub_project.technologies %}
                                                             <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-technologies"
-                                                                 class="mt-2">
+                                                                 class="flex flex-wrap gap-1.5">
                                                                 {% for tech in sub_project.technologies.all %}
                                                                     <span id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-technology-{{ tech.id }}"
-                                                                          class="badge badge-neutral badge-sm mb-1">
+                                                                          class="badge badge-primary badge-outline badge-sm hover:badge-primary transition-colors whitespace-nowrap max-w-full truncate inline-block">
                                                                         {{ tech.name }}
                                                                     </span>
                                                                 {% endfor %}
                                                             </div>
                                                         {% endif %}
                                                     </div>
-                                                    <div class="flex flex-col text-end">
-                                                        <time id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-period"
-                                                              class="text-xs font-mono text-primary whitespace-nowrap">
-                                                            {{ sub_project.period }}
-                                                        </time>
-                                                        <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-duration"
-                                                             class="text-xs font-mono text-primary">
-                                                            ({{ sub_project.duration }})
-                                                        </div>
+                                                </summary>
+                                                <div class="collapse-content bg-base-100/50 rounded-b-lg">
+                                                    <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-description"
+                                                         class="prose prose-sm max-w-none pt-4 prose-headings:text-primary prose-a:text-primary">
+                                                        {{ sub_project.description|md }}
                                                     </div>
-
-                                                </div>
-                                            </summary>
-                                            <div class="collapse-content">
-                                                <div id="{{ item_type|default:'item' }}-{{ item.id }}-subproject-{{ sub_project.id }}-description"
-                                                     class="prose prose-sm max-w-none pt-2">
-                                                    {{ sub_project.description|md }}
                                                 </div>
-                                            </div>
-                                        </details>
-                                    {% endfor %}
+                                            </details>
+                                        {% endfor %}
+                                    </div>
                                 </div>
-                            </div>
-                        {% endif %}
+                            {% endif %}
+                        </div>
+                        <!-- End of content section -->
                     </div>
-                    <div class="modal-action">
+
+                    <!-- Footer - fixed at bottom -->
+                    <div class="modal-action border-t border-primary/20 p-4 sm:p-6 bg-base-200/95 backdrop-blur-sm shrink-0 m-0">
                         <form method="dialog">
-                            <button class="btn">
-                                Close
+                            <button class="btn btn-primary gap-2 group">
+                                <svg xmlns="http://www.w3.org/2000/svg"
+                                     class="h-5 w-5"
+                                     fill="none"
+                                     viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                                <span>{% translate "Close" %}</span>
                             </button>
                         </form>
                     </div>
diff --git a/src/home/templates/index.html b/src/home/templates/index.html
index 87aee98..cf45e34 100644
--- a/src/home/templates/index.html
+++ b/src/home/templates/index.html
@@ -3,58 +3,91 @@
 
 <c-base name="{{ personal_info.name }}">
     <div id="home" class="relative p-5 lg:size-full">
-        <div class="card shadow-sm bg-base-300 lg:size-full">
+        <div class="card shadow-xl hover:shadow-2xl transition-all duration-300 bg-linear-to-br from-base-300 to-base-200 border border-base-300 hover:border-primary/30 lg:size-full">
             <figure class="lg:rounded-xl lg:h-full">
                 <img class="h-full w-full object-cover"
                      src="/media/background.jpg"
                      alt="{% translate "Professional profile of" %} {{ personal_info.name }} - {{ personal_info.title }}"
                      loading="eager" />
             </figure>
-            <div class="card-body lg:absolute lg:right-1/16 lg:bottom-1/8 lg:bg-base-300/70 lg:rounded-xl">
+            <div class="card-body lg:absolute lg:right-1/16 lg:bottom-1/8 lg:bg-linear-to-br lg:from-base-300/90 lg:to-base-200/90 lg:backdrop-blur-md lg:rounded-xl lg:shadow-2xl lg:border lg:border-primary/20 lg:z-10">
                 <h1 id="personal-info-name"
-                    class="text-3xl lg:text-5xl mb-3 text-primary">
+                    class="text-3xl lg:text-5xl mb-3 font-black bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent pb-1">
                     {{ personal_info.name }}
                 </h1>
                 <h3 id="personal-info-title"
-                    class="text-lg lg:text-xl text-secondary font-mono">
+                    class="text-lg lg:text-xl text-secondary font-mono font-semibold flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         class="h-5 w-5"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
                     {{ personal_info.title }}
                 </h3>
                 {% if personal_info.technologies %}
-                    <div id="personal-info-technologies" class="mt-2">
+                    <div id="personal-info-technologies" class="mt-3 flex flex-wrap gap-2">
                         {% for tech in personal_info.technologies.all %}
                             <span id="personal-info-technology-{{ tech.id }}"
-                                  class="badge badge-neutral mb-1">
+                                  class="badge badge-primary badge-outline hover:badge-primary transition-colors duration-200 font-semibold">
                                 {{ tech.name }}
                             </span>
                         {% endfor %}
                     </div>
                 {% endif %}
-                <div id="personal-info-introduction" class="prose text-lg mt-4">
+                <div id="personal-info-introduction"
+                     class="prose text-lg mt-4 prose-headings:text-primary prose-a:text-primary">
                     {{ personal_info.introduction|md }}
                 </div>
                 <div class="card-actions justify-end mt-auto">
                     <button id="about-me-button"
-                            class="btn btn-primary"
+                            class="btn btn-primary gap-2 group"
                             onclick="about_me_modal.showModal()">
-                        {% translate "More about me" %}
+                        <span>{% translate "More about me" %}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             class="h-5 w-5 group-hover:translate-x-1 transition-transform"
+                             fill="none"
+                             viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        </svg>
                     </button>
                 </div>
             </div>
         </div>
-        <dialog id="about_me_modal" class="modal">
-            <div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
-                <div id="about-me" class="flex-1 overflow-y-auto py-4">
-                    <h1 id="about-me-title" class="text-5xl mb-10 text-primary">
+        <dialog id="about_me_modal" class="modal modal-bottom sm:modal-middle">
+            <div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh]">
+                <!-- Header section - fixed at top -->
+                <div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
+                    <h1 id="about-me-title"
+                        class="text-3xl sm:text-4xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">
                         {% translate "About me" %}
                     </h1>
-                    <div id="personal-info-biography" class="prose max-w-none px-1">
-                        {{ personal_info.biography|md }}
+                </div>
+
+                <!-- Scrollable content area -->
+                <div class="overflow-y-auto flex-1">
+                    <div id="about-me" class="p-4 sm:p-6">
+                        <div id="personal-info-biography"
+                             class="prose max-w-none prose-headings:text-primary prose-a:text-primary">
+                            {{ personal_info.biography|md }}
+                        </div>
                     </div>
                 </div>
-                <div class="modal-action">
+
+                <!-- Footer - fixed at bottom -->
+                <div class="modal-action border-t border-primary/20 p-4 sm:p-6 bg-base-200/95 backdrop-blur-sm shrink-0 m-0">
                     <form method="dialog">
-                        <button class="btn">
-                            Close
+                        <button class="btn btn-primary gap-2 group">
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                                 class="h-5 w-5"
+                                 fill="none"
+                                 viewBox="0 0 24 24"
+                                 stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                            <span>{% translate "Close" %}</span>
                         </button>
                     </form>
                 </div>
diff --git a/src/home/templates/my-career.html b/src/home/templates/my-career.html
index 124c67d..82266c1 100644
--- a/src/home/templates/my-career.html
+++ b/src/home/templates/my-career.html
@@ -1,12 +1,24 @@
 {% load i18n %}
 
 <c-base name="{% translate "My Career" %}">
-    <div id="my-career" class="w-full min-h-full p-5">
+    <div id="my-career"
+         class="w-full min-h-full bg-linear-to-br from-base-100 via-base-200 to-base-100">
         {% if experiences %}
-            <div class="h-fit py-4 lg:max-w-(--breakpoint-lg) lg:mx-auto px-5">
-                <h1 id="my-career-title" class="text-5xl mb-10 text-primary">
-                    {% translate "My Experience" %}
-                </h1>
+            <div class="h-fit py-8 lg:max-w-(--breakpoint-lg) lg:mx-auto px-5">
+                <div class="sticky top-0 z-10 bg-linear-to-r from-primary/10 via-primary/5 to-transparent backdrop-blur-sm py-6 mb-10 -mx-5 px-5 rounded-lg">
+                    <div class="flex items-center gap-3">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             class="h-10 w-10 text-primary"
+                             fill="none"
+                             viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <h1 id="my-career-title" class="text-5xl font-bold text-primary">
+                            {% translate "My Experience" %}
+                        </h1>
+                    </div>
+                </div>
                 <c-experience-timeline :items="experiences"
                                        item_type="experience"
                                        list_id="experiences-list"
@@ -15,10 +27,23 @@ <h1 id="my-career-title" class="text-5xl mb-10 text-primary">
         {% endif %}
 
         {% if education_entries %}
-            <div class="h-fit py-4 lg:max-w-(--breakpoint-lg) lg:mx-auto px-5">
-                <h1 id="education-title" class="text-5xl mb-10 text-primary">
-                    {% translate "Education" %}
-                </h1>
+            <div class="h-fit py-8 lg:max-w-(--breakpoint-lg) lg:mx-auto px-5">
+                <div class="sticky top-0 z-10 bg-linear-to-r from-secondary/10 via-secondary/5 to-transparent backdrop-blur-sm py-6 mb-10 -mx-5 px-5 rounded-lg">
+                    <div class="flex items-center gap-3">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             class="h-10 w-10 text-secondary"
+                             fill="none"
+                             viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path d="M12 14l9-5-9-5-9 5 9 5z" />
+                            <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+                        </svg>
+                        <h1 id="education-title" class="text-5xl font-bold text-secondary">
+                            {% translate "Education" %}
+                        </h1>
+                    </div>
+                </div>
                 <c-experience-timeline :items="education_entries"
                                        item_type="education"
                                        list_id="education-list"
diff --git a/src/home/tests/test_views/test_home_view.py b/src/home/tests/test_views/test_home_view.py
index 2e788e3..6792b45 100644
--- a/src/home/tests/test_views/test_home_view.py
+++ b/src/home/tests/test_views/test_home_view.py
@@ -220,11 +220,7 @@ def test_personal_info(self) -> None:
         )
 
         self._assert_text_of_elements(
-            self._find_element_by_tag_and_id(
-                self._find_element_by_tag_and_id(home, HtmlTag.DIALOG, test_view_constants.ABOUT_ME_MODAL_ID),
-                HtmlTag.DIV,
-                test_view_constants.ABOUT_ME_ID,
-            ),
+            self._find_element_by_tag_and_id(home, HtmlTag.DIALOG, test_view_constants.ABOUT_ME_MODAL_ID),
             ElementText(
                 html_tag=HtmlTag.H1,
                 element_id=test_view_constants.ABOUT_ME_TITLE_ID,
diff --git a/src/home/tests/test_views/utils/constants.py b/src/home/tests/test_views/utils/constants.py
index d218103..6cd4950 100644
--- a/src/home/tests/test_views/utils/constants.py
+++ b/src/home/tests/test_views/utils/constants.py
@@ -191,8 +191,8 @@
     Language.SPANISH: "Ene, 2021 - Mar, 2022",
 }
 EXPERIENCE_1_DURATION = {
-    Language.ENGLISH: "(1 year, 2 months)",
-    Language.SPANISH: "(1 año, 2 meses)",
+    Language.ENGLISH: "1 year, 2 months",
+    Language.SPANISH: "1 año, 2 meses",
 }
 
 EXPERIENCE_2_TITLE = {
@@ -214,8 +214,8 @@
     Language.SPANISH: "Abr, 2022 - Actualmente",
 }
 EXPERIENCE_2_DURATION = {
-    Language.ENGLISH: "(2 years, 3 months)",
-    Language.SPANISH: "(2 años, 3 meses)",
+    Language.ENGLISH: "2 years, 3 months",
+    Language.SPANISH: "2 años, 3 meses",
 }
 
 EXPECTED_NUMBER_OF_EXPERIENCES = 2
@@ -241,8 +241,8 @@
     Language.SPANISH: "Abr, 2022 - Jul, 2023",
 }
 SUBPROJECT_1_DURATION = {
-    Language.ENGLISH: "(1 year, 3 months)",
-    Language.SPANISH: "(1 año, 3 meses)",
+    Language.ENGLISH: "1 year, 3 months",
+    Language.SPANISH: "1 año, 3 meses",
 }
 SUBPROJECT_1_TECHNOLOGIES = (
     TECHNOLOGY_1,
@@ -262,8 +262,8 @@
     Language.SPANISH: "Ago, 2023 - Actualmente",
 }
 SUBPROJECT_2_DURATION = {
-    Language.ENGLISH: "(11 months)",
-    Language.SPANISH: "(11 meses)",
+    Language.ENGLISH: "11 months",
+    Language.SPANISH: "11 meses",
 }
 SUBPROJECT_2_TECHNOLOGIES = (TECHNOLOGY_2,)
 
@@ -290,8 +290,8 @@
     Language.SPANISH: "Sep, 2015 - Jun, 2019",
 }
 EDUCATION_1_DURATION = {
-    Language.ENGLISH: "(3 years, 9 months)",
-    Language.SPANISH: "(3 años, 9 meses)",
+    Language.ENGLISH: "3 years, 9 months",
+    Language.SPANISH: "3 años, 9 meses",
 }
 
 EDUCATION_2_TITLE = {
@@ -314,8 +314,8 @@
     Language.SPANISH: "Sep, 2019 - Jun, 2020",
 }
 EDUCATION_2_DURATION = {
-    Language.ENGLISH: "(9 months)",
-    Language.SPANISH: "(9 meses)",
+    Language.ENGLISH: "9 months",
+    Language.SPANISH: "9 meses",
 }
 
 EXPECTED_NUMBER_OF_EDUCATION_ENTRIES = 2
diff --git a/src/locale/es/LC_MESSAGES/django.mo b/src/locale/es/LC_MESSAGES/django.mo
index aa0d2d9..77700ee 100644
Binary files a/src/locale/es/LC_MESSAGES/django.mo and b/src/locale/es/LC_MESSAGES/django.mo differ
diff --git a/src/locale/es/LC_MESSAGES/django.po b/src/locale/es/LC_MESSAGES/django.po
index 8e5f60a..72fa364 100644
--- a/src/locale/es/LC_MESSAGES/django.po
+++ b/src/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-01-06 11:59+0000\n"
+"POT-Creation-Date: 2026-01-08 12:29+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -22,7 +22,7 @@ msgstr ""
 msgid "portfolio, CV, biography, career"
 msgstr "portfolio, CV, biografía, carrera"
 
-#: base/templates/cotton/buttons/accept_button.html:20
+#: base/templates/cotton/buttons/accept_button.html:21
 msgid "Accept"
 msgstr "Aceptar"
 
@@ -30,27 +30,33 @@ msgstr "Aceptar"
 msgid "Settings"
 msgstr "Opciones"
 
-#: base/templates/cotton/buttons/settings_button.html:33
+#: base/templates/cotton/buttons/settings_button.html:40
 msgid "Cookie Settings"
 msgstr "Configuración de Cookies"
 
-#: base/templates/cotton/buttons/settings_button.html:59
+#: base/templates/cotton/buttons/settings_button.html:84
 msgid "Save"
 msgstr "Guardar"
 
-#: base/templates/cotton/footer.html:15
+#: base/templates/cotton/footer.html:16
 msgid "Legal & Privacy"
 msgstr "Condiciones y Privacidad"
 
-#: base/templates/cotton/footer.html:55
+#: base/templates/cotton/footer.html:57
+#: home/templates/cotton/experience_timeline.html:262
+#: home/templates/index.html:90
+msgid "Close"
+msgstr "Cerrar"
+
+#: base/templates/cotton/footer.html:74
 msgid "Follow Me"
 msgstr "Sígueme"
 
-#: base/templates/cotton/footer.html:86
+#: base/templates/cotton/footer.html:105
 msgid "The source code of this website is available on"
 msgstr "El código fuente de este sitio web está disponible en"
 
-#: base/templates/cotton/footer.html:92
+#: base/templates/cotton/footer.html:111
 msgid "under the MIT License"
 msgstr "bajo licencia MIT"
 
@@ -62,11 +68,11 @@ msgstr "Inicio"
 msgid "My Career"
 msgstr "Mi Carrera"
 
-#: core/settings.py:134
+#: core/settings.py:139
 msgid "English"
 msgstr "Inglés"
 
-#: core/settings.py:135
+#: core/settings.py:140
 msgid "Spanish"
 msgstr "Español"
 
@@ -115,7 +121,11 @@ msgstr[1] "%d meses"
 msgid "%(title)s at %(institution)s"
 msgstr "%(title)s en %(institution)s"
 
-#: home/templates/cotton/experience_timeline.html:117
+#: home/templates/cotton/experience_timeline.html:79
+msgid "View more"
+msgstr "Ver más"
+
+#: home/templates/cotton/experience_timeline.html:179
 msgid "Projects"
 msgstr "Proyectos"
 
@@ -123,19 +133,19 @@ msgstr "Proyectos"
 msgid "Professional profile of"
 msgstr "Perfil profesional de"
 
-#: home/templates/index.html:39
+#: home/templates/index.html:47
 msgid "More about me"
 msgstr "Más sobre mí"
 
-#: home/templates/index.html:48
+#: home/templates/index.html:65
 msgid "About me"
 msgstr "Sobre mí"
 
-#: home/templates/my-career.html:8
+#: home/templates/my-career.html:18
 msgid "My Experience"
 msgstr "Mi Experiencia"
 
-#: home/templates/my-career.html:20
+#: home/templates/my-career.html:43
 msgid "Education"
 msgstr "Educación"