diff --git a/src/src/app/shared/place-box/place-box.component.html b/src/src/app/shared/place-box/place-box.component.html
index 4403a09..3df1eda 100644
--- a/src/src/app/shared/place-box/place-box.component.html
+++ b/src/src/app/shared/place-box/place-box.component.html
@@ -1,12 +1,12 @@
 @if (selectedPlace) {
-<div class="place-box-dialog">
+<div class="place-box-dialog bg-white dark:bg-surface-900">
     <div class="place-box-dialog-content">
         <div class="flex justify-between items-center mb-3">
             <div class="flex items-center gap-4 w-full max-w-full">
                 <img [src]="selectedPlace.image || selectedPlace.category.image"
                     class="object-cover rounded-full size-16">
                 <div class="flex grow min-w-0 md:flex-col">
-                    <h1 class="text-gray-800 font-bold mb-0 truncate">{{ selectedPlace.name }}
+                    <h1 class="text-gray-800 dark:text-gray-200 font-bold mb-0 truncate">{{ selectedPlace.name }}
                     </h1>
 
                     <div class="hidden md:flex mt-2 gap-1">
@@ -53,43 +53,44 @@
                     </div>
 
                     <div class="border-l border-solid border-gray-700 h-4"></div>
-                    <p-button (click)="close()" text icon="pi pi-times" />
+                    <p-button (click)="close()" severity="secondary" text icon="pi pi-times" />
                 </div>
             </div>
         </div>
 
         <div class="mt-4 grid grid-cols-2 md:grid-cols-5">
             <div class="col-span-2 md:col-span-3 flex flex-col mb-4">
-                <span class="text-gray-500">Place</span>
+                <span class="text-gray-500 dark:text-gray-400">Place</span>
                 <div class="line-clamp-2">{{ selectedPlace.place }}</div>
             </div>
 
             <div class="grid grid-cols-2 col-span-2">
                 <div class="flex flex-col mb-4">
-                    <span class="text-gray-500">Latitude</span>
+                    <span class="text-gray-500 dark:text-gray-400">Latitude</span>
                     <span class="truncate">{{ selectedPlace.lat }}</span>
                 </div>
 
                 <div class="flex flex-col mb-4">
-                    <span class="text-gray-500">Longitude</span>
+                    <span class="text-gray-500 dark:text-gray-400">Longitude</span>
                     <span class="truncate">{{ selectedPlace.lng }}</span>
                 </div>
 
                 <div class="flex flex-col mb-4">
-                    <span class="text-gray-500">Price</span>
+                    <span class="text-gray-500 dark:text-gray-400">Price</span>
                     <span>{{ selectedPlace.price || '-' }} @if (selectedPlace.price) { {{ currency$ | async }} }</span>
                 </div>
 
                 <div class="flex flex-col mb-4">
-                    <span class="text-gray-500">Duration</span>
+                    <span class="text-gray-500 dark:text-gray-400">Duration</span>
                     <span>{{ selectedPlace.duration || '-' }}</span>
                 </div>
             </div>
         </div>
 
         <div class="flex flex-col mb-4 max-h-40 overflow-y-auto">
-            <span class="text-gray-500">Description</span>
-            <span class="break-words" [innerHTML]="(selectedPlace.description || '-') | linkify"></span>
+            <span class="text-gray-500 dark:text-gray-400">Description</span>
+            <span class="break-words whitespace-pre-line"
+                [innerHTML]="(selectedPlace.description || '-') | linkify"></span>
         </div>
 
         <div class="flex md:hidden mt-2 justify-center gap-1">
diff --git a/src/src/app/shared/place-gpx/place-gpx.component.html b/src/src/app/shared/place-gpx/place-gpx.component.html
index db9b596..5318f9c 100644
--- a/src/src/app/shared/place-gpx/place-gpx.component.html
+++ b/src/src/app/shared/place-gpx/place-gpx.component.html
@@ -1,12 +1,13 @@
 @if (selectedPlace) {
-<div class="place-box-dialog">
+<div class="place-box-dialog bg-white dark:bg-surface-900">
     <div class="place-box-dialog-content">
         <div class="flex justify-between items-center">
             <div class="flex items-center gap-4 w-full max-w-full">
                 <img [src]="selectedPlace.image || selectedPlace.category.image"
                     class="object-cover rounded-full size-16">
                 <div class="flex grow min-w-0">
-                    <h1 class="text-gray-800 font-bold mb-0 truncate">Trace of {{ selectedPlace.name }}</h1>
+                    <h1 class="text-gray-800 dark:text-gray-200 font-bold mb-0 truncate">Trace of {{ selectedPlace.name
+                        }}</h1>
                 </div>
 
                 <div class="flex items-center justify-end gap-2">