From 84b3a2a246fc2beda791b75372652a88d5da8f4e Mon Sep 17 00:00:00 2001
From: RianKhanafi <riankhanafi69@gmail.com>
Date: Tue, 15 Jul 2025 11:05:49 +0700
Subject: [PATCH] add: new theme

---
 backend/entrypoint.sh                         |  0
 docker-compose.yml                            | 21 ++++++---
 .../src/lib/components/AdventureCard.svelte   |  6 ++-
 frontend/src/lib/components/CityCard.svelte   |  2 +-
 .../src/lib/components/CollectionLink.svelte  |  2 +-
 .../src/lib/components/CountryCard.svelte     |  2 +-
 frontend/src/lib/components/RegionCard.svelte |  2 +-
 frontend/src/routes/adventures/+page.svelte   |  8 ++--
 .../src/routes/adventures/[id]/+page.svelte   | 36 ++++++++-------
 frontend/src/routes/calendar/+page.svelte     |  8 ++--
 frontend/src/routes/collections/+page.svelte  |  6 +--
 .../src/routes/collections/[id]/+page.svelte  |  6 +--
 frontend/src/routes/dashboard/+page.svelte    | 18 ++++----
 frontend/src/routes/map/+page.svelte          |  8 ++--
 .../src/routes/profile/[uuid]/+page.svelte    | 10 ++---
 frontend/src/routes/worldtravel/+page.svelte  | 10 ++---
 .../src/routes/worldtravel/[id]/+page.svelte  |  8 ++--
 .../routes/worldtravel/[id]/[id]/+page.svelte |  8 ++--
 frontend/tailwind.config.js                   | 44 ++++++++++++++++++-
 19 files changed, 131 insertions(+), 74 deletions(-)
 mode change 100644 => 100755 backend/entrypoint.sh

diff --git a/backend/entrypoint.sh b/backend/entrypoint.sh
old mode 100644
new mode 100755
diff --git a/docker-compose.yml b/docker-compose.yml
index 034ec06..ba4c07f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,17 +1,24 @@
 services:
   web:
-    #build: ./frontend/
-    image: ghcr.io/seanmorley15/adventurelog-frontend:latest
+    build: ./frontend/
+    #image: ghcr.io/seanmorley15/adventurelog-frontend:latest
+    #platform: linux/amd64
     container_name: adventurelog-frontend
     restart: unless-stopped
     env_file: .env
     ports:
-      - "${FRONTEND_PORT:-8015}:3000"
+      - "${FRONTEND_PORT:-8015}:5173"
     depends_on:
       - server
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    command: sh -c "pnpm install && pnpm run dev --host 0.0.0.0"
+    user: "0:0" # Run as root for development to avoid permission issues
 
   db:
     image: postgis/postgis:16-3.5
+    platform: linux/amd64
     container_name: adventurelog-db
     restart: unless-stopped
     env_file: .env
@@ -19,8 +26,9 @@ services:
       - postgres_data:/var/lib/postgresql/data/
 
   server:
-    #build: ./backend/
-    image: ghcr.io/seanmorley15/adventurelog-backend:latest
+    build: ./backend/
+    #image: ghcr.io/seanmorley15/adventurelog-backend:latest
+    #platform: linux/amd64
     container_name: adventurelog-backend
     restart: unless-stopped
     env_file: .env
@@ -29,7 +37,10 @@ services:
     depends_on:
       - db
     volumes:
+      - ./backend:/code
       - adventurelog_media:/code/media/
+    user: "0:0" # Run as root for development to avoid permission issues
+    command: sh -c "chmod +x /code/entrypoint.sh && cd /code/server && /code/entrypoint.sh"
 
 volumes:
   postgres_data:
diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index d0f6b98..13f2a68 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -176,7 +176,7 @@
 {/if}
 
 <div
-	class="card w-full max-w-md bg-base-300 shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group"
+	class="card w-full max-w-md shadow-sm hover:shadow-md transition-all duration-300 border border-base-300 hover:border-primary/20 group"
 >
 	<!-- Image Section with Overlay -->
 	<div class="relative overflow-hidden rounded-t-2xl">
@@ -215,7 +215,9 @@
 		<!-- Category Badge -->
 		{#if adventure.category}
 			<div class="absolute bottom-4 left-4">
-				<div class="badge badge-primary shadow-lg font-medium">
+				<div
+					class="font-medium h-[24px] text-primary bg-[#EDF3FF] rounded-full px-[12px] pb-[3px] !border-none"
+				>
 					{adventure.category.display_name}
 					{adventure.category.icon}
 				</div>
diff --git a/frontend/src/lib/components/CityCard.svelte b/frontend/src/lib/components/CityCard.svelte
index 8d4ee35..9a71016 100644
--- a/frontend/src/lib/components/CityCard.svelte
+++ b/frontend/src/lib/components/CityCard.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <div
-	class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
+	class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
 >
 	<div class="card-body p-6 space-y-4">
 		<!-- Header -->
diff --git a/frontend/src/lib/components/CollectionLink.svelte b/frontend/src/lib/components/CollectionLink.svelte
index 6786cf1..3a900ac 100644
--- a/frontend/src/lib/components/CollectionLink.svelte
+++ b/frontend/src/lib/components/CollectionLink.svelte
@@ -102,7 +102,7 @@
 						<Collections class="w-8 h-8 text-primary" />
 					</div>
 					<div>
-						<h1 class="text-3xl font-bold text-primary bg-clip-text">
+						<h1 class="text-3xl font-bold text-black bg-clip-text">
 							{$t('adventures.my_collections')}
 						</h1>
 						<p class="text-sm text-base-content/60">
diff --git a/frontend/src/lib/components/CountryCard.svelte b/frontend/src/lib/components/CountryCard.svelte
index a9b3d12..fa85b31 100644
--- a/frontend/src/lib/components/CountryCard.svelte
+++ b/frontend/src/lib/components/CountryCard.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <div
-	class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
+	class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
 >
 	<!-- Flag Image -->
 	<figure>
diff --git a/frontend/src/lib/components/RegionCard.svelte b/frontend/src/lib/components/RegionCard.svelte
index f90b9db..0c88374 100644
--- a/frontend/src/lib/components/RegionCard.svelte
+++ b/frontend/src/lib/components/RegionCard.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <div
-	class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
+	class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
 >
 	<div class="card-body p-6 space-y-4">
 		<!-- Header -->
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 2813573..07189eb 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -180,12 +180,12 @@
 {/if}
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-30 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -197,7 +197,7 @@
 									<Compass class="w-8 h-8 text-primary" />
 								</div>
 								<div>
-									<h1 class="text-3xl font-bold bg-clip-text text-primary">
+									<h1 class="text-3xl font-bold bg-clip-text text-black">
 										{$t('navbar.my_adventures')}
 									</h1>
 									<p class="text-sm text-base-content/60">
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 3977b9c..36a7cd2 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -153,7 +153,7 @@
 	{#if data.user && data.user.uuid == adventure.user_id}
 		<div class="fixed bottom-6 right-6 z-50">
 			<button
-				class="btn btn-primary btn-circle w-16 h-16 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-110"
+				class="btn btn-primary btn-circle w-16 h hover:shadow-2xl transition-all duration-300 hover:scale-110"
 				on:click={() => (isEditModalOpen = true)}
 			>
 				<ClipboardList class="w-8 h-8" />
@@ -316,7 +316,7 @@
 			<div class="lg:col-span-2 space-y-6 sm:space-y-8">
 				<!-- Author Info Card -->
 				{#if adventure.user}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<div class="flex items-center gap-4">
 								{#if adventure.user.profile_pic}
@@ -354,8 +354,10 @@
 											{adventure.user.last_name || ''}
 										{/if}
 									</div>
-									<div class="flex items-center gap-2 text-sm opacity-70 mt-1">
-										<div class="badge badge-sm">
+									<div class="flex items-center gap-2 text-sm mt-1">
+										<div
+											class="badge bg-primary text-white block h-[25px] text-[14px] flex items-center"
+										>
 											{adventure.is_public
 												? `🌍 ${$t('adventures.public')}`
 												: `🔒 ${$t('adventures.private')}`}
@@ -382,7 +384,7 @@
 
 				<!-- Description Card -->
 				{#if adventure.description}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h2 class="card-title text-2xl mb-4">📝 {$t('adventures.description')}</h2>
 							<article class="prose max-w-none">
@@ -394,7 +396,7 @@
 
 				<!-- Visits Timeline -->
 				{#if adventure.visits.length > 0}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h2 class="card-title text-2xl mb-6">🎯 {$t('adventures.visits')}</h2>
 							<div class="space-y-4">
@@ -407,7 +409,7 @@
 											{/if}
 										</div>
 										<div class="flex-1 pb-4">
-											<div class="card bg-base-200 shadow">
+											<div class="card bg-white">
 												<div class="card-body p-4">
 													{#if isAllDay(visit.start_date)}
 														<div class="flex items-center gap-2 mb-2">
@@ -450,7 +452,7 @@
 														</div>
 													{/if}
 													{#if visit.notes}
-														<div class="mt-3 p-3 bg-base-200 rounded-lg">
+														<div class="mt-3 p-3 bg-white-200 rounded-lg">
 															<p class="text-sm italic">"{visit.notes}"</p>
 														</div>
 													{/if}
@@ -466,14 +468,14 @@
 
 				<!-- Map Section -->
 				{#if (adventure.longitude && adventure.latitude) || geojson}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h2 class="card-title text-2xl mb-4">🗺️ {$t('adventures.location')}</h2>
 
 							{#if adventure.longitude && adventure.latitude}
 								<!-- Compact Coordinates Card -->
 								<div
-									class="card bg-gradient-to-br from-primary/5 to-secondary/5 shadow-lg mb-4 border border-primary/10"
+									class="card bg-gradient-to-br from-primary/5 to-secondary/5 mb-4 border border-primary/10"
 								>
 									<div class="card-body p-4">
 										<div class="flex items-center justify-between mb-3">
@@ -483,14 +485,14 @@
 										</div>
 
 										<div class="grid grid-cols-2 gap-3 mb-4">
-											<div class="text-center p-2 bg-base-200/70 rounded border border-primary/10">
+											<div class="text-center p-2 bg-white-200/70 rounded border border-primary/10">
 												<div class="text-xs text-primary/70 uppercase tracking-wide">
 													{$t('adventures.latitude')}
 												</div>
 												<div class="text-lg font-bold text-primary">{adventure.latitude}°</div>
 											</div>
 											<div
-												class="text-center p-2 bg-base-200/70 rounded border border-secondary/10"
+												class="text-center p-2 bg-white-200/70 rounded border border-secondary/10"
 											>
 												<div class="text-xs text-secondary/70 uppercase tracking-wide">
 													{$t('adventures.longitude')}
@@ -598,7 +600,7 @@
 								</div>
 							{/if}
 
-							<div class="rounded-lg overflow-hidden shadow-lg">
+							<div class="rounded-lg overflow-hidden">
 								<MapLibre
 									style={getBasemapUrl()}
 									class="w-full h-96"
@@ -645,7 +647,7 @@
 			<!-- Right Column - Sidebar -->
 			<div class="space-y-4 sm:space-y-6">
 				<!-- Quick Info Card -->
-				<div class="card bg-base-200 shadow-xl">
+				<div class="card bg-white">
 					<div class="card-body">
 						<h3 class="card-title text-lg mb-4">ℹ️ {$t('adventures.basic_information')}</h3>
 						<div class="space-y-3">
@@ -679,7 +681,7 @@
 
 				<!-- Sunrise/Sunset -->
 				{#if adventure.sun_times && adventure.sun_times.length > 0}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h3 class="card-title text-lg mb-4">
 								🌅 {$t('adventures.sun_times')}
@@ -703,7 +705,7 @@
 
 				<!-- Attachments -->
 				{#if adventure.attachments && adventure.attachments.length > 0}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h3 class="card-title text-lg mb-4">
 								📎 {$t('adventures.attachments')}
@@ -722,7 +724,7 @@
 
 				<!-- Additional Images -->
 				{#if adventure.images && adventure.images.length > 1}
-					<div class="card bg-base-200 shadow-xl">
+					<div class="card bg-white">
 						<div class="card-body">
 							<h3 class="card-title text-lg mb-4">🖼️ {$t('adventures.images')}</h3>
 							<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
diff --git a/frontend/src/routes/calendar/+page.svelte b/frontend/src/routes/calendar/+page.svelte
index 130b895..0f45e05 100644
--- a/frontend/src/routes/calendar/+page.svelte
+++ b/frontend/src/routes/calendar/+page.svelte
@@ -178,12 +178,12 @@
 </svelte:head>
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="calendar-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -262,7 +262,7 @@
 			<!-- Main Content -->
 			<div class="container mx-auto px-6 py-8">
 				<!-- Calendar -->
-				<div class="card bg-base-100 shadow-2xl border border-base-300/50">
+				<div class="card bg-base-100 border border-base-300/50">
 					<div class="card-body p-0">
 						<Calendar {plugins} {options} />
 					</div>
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 1a2c6c1..a63dced 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -186,12 +186,12 @@
 {/if}
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index cd75934..9e7ff41 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -1054,7 +1054,7 @@
 								dateString
 							] || []}
 
-						<div class="card bg-base-100 shadow-xl my-8">
+						<div class="card bg-base-100 my-8">
 							<div class="card-body bg-base-200">
 								<h2 class="card-title text-3xl justify-center g">
 									{$t('adventures.day')}
@@ -1536,7 +1536,7 @@
 					</MapLibre>
 					{#each filteredRecomendations as recomendation}
 						{#if recomendation.name && recomendation.longitude && recomendation.latitude}
-							<div class="card bg-base-100 shadow-xl my-4 w-full">
+							<div class="card bg-base-100 my-4 w-full">
 								<div class="card-body">
 									<h2 class="card-title text-xl font-bold">
 										{recomendation.name || $t('recomendations.recommendation')}
@@ -1566,7 +1566,7 @@
 					{/each}
 				{/if}
 				{#if loadingRecomendations}
-					<div class="card bg-base-100 shadow-xl my-4 w-full">
+					<div class="card bg-base-100 my-4 w-full">
 						<div class="card-body">
 							<div class="flex flex-col items-center justify-center">
 								<span class="loading loading-ring loading-lg"></span>
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 775ae9e..efb9072 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -45,7 +45,7 @@
 							</div>
 						</div> -->
 						<div>
-							<h1 class="text-4xl lg:text-5xl font-bold bg-clip-text text-primary">
+							<h1 class="text-4xl lg:text-5xl font-bold bg-clip-text text-black">
 								{$t('dashboard.welcome_back')}, {user?.first_name
 									? `${user.first_name}`
 									: user?.username}!
@@ -67,12 +67,12 @@
 				<div class="flex flex-col sm:flex-row gap-3">
 					<a
 						href="/adventures"
-						class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300"
+						class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300 rounded-full"
 					>
 						<Plus class="w-5 h-5" />
 						{$t('map.add_adventure')}
 					</a>
-					<a href="/worldtravel" class="btn btn-outline btn-lg gap-2">
+					<a href="/worldtravel" class="btn btn-outline btn-lg gap-2 rounded-full">
 						<FlagCheckeredVariantIcon class="w-5 h-5" />
 						{$t('home.explore_world')}
 					</a>
@@ -86,7 +86,7 @@
 		>
 			<!-- Countries Visited -->
 			<div
-				class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl border border-primary/20 hover:shadow-2xl transition-all duration-300"
+				class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 hover:shadow-2xl transition-all duration-300"
 			>
 				<div class="card-body p-6">
 					<div class="flex items-center justify-between">
@@ -117,7 +117,7 @@
 
 			<!-- Regions Visited -->
 			<div
-				class="stat-card card bg-gradient-to-br from-success/10 to-success/5 shadow-xl border border-success/20 hover:shadow-2xl transition-all duration-300"
+				class="stat-card card bg-gradient-to-br from-success/10 to-success/5 border border-success/20 hover:shadow-2xl transition-all duration-300"
 			>
 				<div class="card-body p-6">
 					<div class="flex items-center justify-between">
@@ -138,7 +138,7 @@
 
 			<!-- Cities Visited -->
 			<div
-				class="stat-card card bg-gradient-to-br from-info/10 to-info/5 shadow-xl border border-info/20 hover:shadow-2xl transition-all duration-300"
+				class="stat-card card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 hover:shadow-2xl transition-all duration-300"
 			>
 				<div class="card-body p-6">
 					<div class="flex items-center justify-between">
@@ -188,7 +188,7 @@
 		<!-- Empty State / Inspiration -->
 		{#if recentAdventures.length === 0}
 			<div
-				class="empty-state card bg-gradient-to-br from-base-100 to-base-200 shadow-2xl border border-base-300"
+				class="empty-state card bg-gradient-to-br from-base-100 to-base-200 border border-base-300"
 			>
 				<div class="card-body p-12 text-center">
 					<div class="flex justify-center mb-6">
@@ -209,12 +209,12 @@
 					<div class="flex flex-col sm:flex-row gap-4 justify-center">
 						<a
 							href="/adventures"
-							class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300"
+							class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300 rounded-full font-normal"
 						>
 							<Plus class="w-5 h-5" />
 							{$t('map.add_adventure')}
 						</a>
-						<a href="/worldtravel" class="btn btn-outline btn-lg gap-2">
+						<a href="/worldtravel" class="btn btn-outline btn-lg gap-2 rounded-full font-normal">
 							<FlagCheckeredVariantIcon class="w-5 h-5" />
 							{$t('home.explore_world')}
 						</a>
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index 594b5ce..f2917fe 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -105,12 +105,12 @@
 </svelte:head>
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="map-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -180,7 +180,7 @@
 
 			<!-- Map Section -->
 			<div class="container mx-auto px-6 py-4 flex-1">
-				<div class="card bg-base-100 shadow-xl h-full">
+				<div class="card bg-base-100 h-full">
 					<div class="card-body p-4 h-full">
 						<MapLibre
 							style={getBasemapUrl()}
diff --git a/frontend/src/routes/profile/[uuid]/+page.svelte b/frontend/src/routes/profile/[uuid]/+page.svelte
index 8bd4517..7d097e7 100644
--- a/frontend/src/routes/profile/[uuid]/+page.svelte
+++ b/frontend/src/routes/profile/[uuid]/+page.svelte
@@ -183,7 +183,7 @@
 				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
 					<!-- Adventures -->
 					<div
-						class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl border border-primary/20 hover:shadow-2xl transition-all duration-300"
+						class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 hover:shadow-2xl transition-all duration-300"
 					>
 						<div class="card-body p-6">
 							<div class="flex items-center justify-between">
@@ -226,7 +226,7 @@
 
 					<!-- Countries -->
 					<div
-						class="stat-card card bg-gradient-to-br from-success/10 to-success/5 shadow-xl border border-success/20 hover:shadow-2xl transition-all duration-300"
+						class="stat-card card bg-gradient-to-br from-success/10 to-success/5 border border-success/20 hover:shadow-2xl transition-all duration-300"
 					>
 						<div class="card-body p-6">
 							<div class="flex items-center justify-between">
@@ -261,7 +261,7 @@
 				<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 					<!-- Regions -->
 					<div
-						class="stat-card card bg-gradient-to-br from-info/10 to-info/5 shadow-xl border border-info/20 hover:shadow-2xl transition-all duration-300"
+						class="stat-card card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 hover:shadow-2xl transition-all duration-300"
 					>
 						<div class="card-body p-6">
 							<div class="flex items-center justify-between">
@@ -344,7 +344,7 @@
 			</div>
 
 			{#if adventures && adventures.length === 0}
-				<div class="card bg-base-100 shadow-xl">
+				<div class="card bg-base-100">
 					<div class="card-body text-center py-16">
 						<div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6">
 							<Airplane class="w-16 h-16 text-base-content/30" />
@@ -387,7 +387,7 @@
 			</div>
 
 			{#if collections && collections.length === 0}
-				<div class="card bg-base-100 shadow-xl">
+				<div class="card bg-base-100">
 					<div class="card-body text-center py-16">
 						<div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6">
 							<CollectionIcon class="w-16 h-16 text-base-content/30" />
diff --git a/frontend/src/routes/worldtravel/+page.svelte b/frontend/src/routes/worldtravel/+page.svelte
index 85701df..26934f7 100644
--- a/frontend/src/routes/worldtravel/+page.svelte
+++ b/frontend/src/routes/worldtravel/+page.svelte
@@ -91,12 +91,12 @@
 </svelte:head>
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="travel-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -108,7 +108,7 @@
 									<Globe class="w-8 h-8 text-primary" />
 								</div>
 								<div>
-									<h1 class="text-3xl font-bold text-primary bg-clip-text">
+									<h1 class="text-3xl font-bold text-black bg-clip-text">
 										{$t('worldtravel.country_list')}
 									</h1>
 									<p class="text-sm text-base-content/60">
@@ -231,7 +231,7 @@
 			<!-- Map Section -->
 			{#if showMap}
 				<div class="container mx-auto px-6 py-4">
-					<div class="card bg-base-100 shadow-xl">
+					<div class="card bg-base-100">
 						<div class="card-body p-4">
 							<MapLibre
 								style={getBasemapUrl()}
diff --git a/frontend/src/routes/worldtravel/[id]/+page.svelte b/frontend/src/routes/worldtravel/[id]/+page.svelte
index e8d0d1d..72546f9 100644
--- a/frontend/src/routes/worldtravel/[id]/+page.svelte
+++ b/frontend/src/routes/worldtravel/[id]/+page.svelte
@@ -141,12 +141,12 @@
 </svelte:head>
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="regions-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-30">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -250,7 +250,7 @@
 			<!-- Map Section -->
 			{#if regions.some((region) => region.latitude && region.longitude)}
 				<div class="container mx-auto px-6 py-4">
-					<div class="card bg-base-100 shadow-xl">
+					<div class="card bg-base-100">
 						<div class="card-body p-4">
 							<div class="flex items-center justify-between mb-4">
 								<div class="flex items-center gap-2">
diff --git a/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte b/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
index da4fbbe..fd202f3 100644
--- a/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
+++ b/frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
@@ -133,12 +133,12 @@
 </svelte:head>
 
 <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
-	<div class="drawer lg:drawer-open">
+	<div class="drawer lg:drawer-open p-[12px]">
 		<input id="cities-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
-		<div class="drawer-content">
+		<div class="drawer-content bg-white rounded-[24px] overflow-hidden">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-40">
 				<div class="container mx-auto px-6 py-4">
 					<div class="flex items-center justify-between">
 						<div class="flex items-center gap-4">
@@ -245,7 +245,7 @@
 			<!-- Map Section -->
 			{#if allCities.length > 0}
 				<div class="container mx-auto px-6 py-4">
-					<div class="card bg-base-100 shadow-xl">
+					<div class="card bg-base-100">
 						<div class="card-body p-4">
 							<div class="flex items-center justify-between mb-4">
 								<div class="flex items-center gap-2">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 91281aa..5102289 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -2,7 +2,11 @@
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			borderRadius: {
+				card: '24px'
+			}
+		}
 	},
 	plugins: [require('@tailwindcss/typography'), require('daisyui')],
 	daisyui: {
@@ -128,6 +132,44 @@ export default {
 					success: '#A3BE8C', // Success
 					warning: '#D08770', // Warning
 					error: '#BF616A' // Error
+				},
+				traveler: {
+					primary: '#0057FF', // Primary color
+					'primary-100': '#EDF3FF',
+					'primary-focus': '#0057FF', // Primary color - focused
+					'primary-content': '#ECEFF4', // Foreground content color to use on primary color
+
+					secondary: '#0057FF', // Secondary color
+					'secondary-focus': '#0057FF', // Secondary color - focused
+					'secondary-content': '#ECEFF4', // Foreground content color to use on secondary color
+
+					accent: '#B48EAD', // Accent color
+					'accent-focus': '#A3BE8C', // Accent color - focused
+					'accent-content': '#ECEFF4', // Foreground content color to use on accent color
+
+					neutral: '#4C566A', // Neutral color
+					'neutral-focus': '#3B4252', // Neutral color - focused
+					'neutral-content': '#D8DEE9', // Foreground content color to use on neutral color
+					base: '#ffffff', // Base color of page, used for blank backgrounds
+					'base-100': '#FAFAFA', // Base color of page, used for blank backgrounds
+					'base-200': '#F9FAFB', // Base color, a little lighter
+					'base-300': '#E5E9F0', // Base color, even more lighter
+					'base-content': '#2E3440', // Foreground content color to use on base color
+
+					info: '#88C0D0', // Info
+					success: '#A3BE8C', // Success
+					warning: '#D08770', // Warning
+					error: '#BF616A', // Error
+
+					'--rounded-box': '24px', // border radius rounded-box utility class, used in card and other large boxes
+					'--rounded-btn': '1.9rem', // border radius rounded-btn utility class, used in buttons and similar elements
+					'--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
+					'--animation-btn': '0.25s', // duration of animation when you click on button
+					'--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
+					'--btn-focus-scale': '0.95', // scale transform of button when you focus on it
+					'--border-btn': '1px', // border width of buttons
+					'--tab-border': '1px', // border width of tabs
+					'--tab-radius': '0.5rem' // border radius of tabs
 				}
 			}
 		]