diff --git a/src/app.css b/src/app.css
index ed81920..9f34fa1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -230,7 +230,8 @@ h2 {
     animation: rotate-and-back 0.3s ease-in-out;
 }
 
-.flip-box-front,.flip-box-back {
+.flip-box-front,
+.flip-box-back {
 	grid-area: 1/1;
 	width: 100%;
 	-webkit-backface-visibility: hidden; /* Safari */
@@ -252,32 +253,32 @@ h2 {
 
 /* Scrollbar Styles */
 *::-webkit-scrollbar {
-  height: 3px;
-  width: 2px;
+  height: 4px;
+  width: 4px;
 }
 *::-webkit-scrollbar-track {
   border-radius: 3px;
-  background-color: var(--color-ecsess-50);
+  background-color: var(--color-ecsess-700);
 }
 
 *::-webkit-scrollbar-track:hover {
-  background-color: var(--color-ecsess-200);
+  background-color: var(--color-ecsess-900);
 }
 
 *::-webkit-scrollbar-track:active {
-  background-color: var(--color-ecsess-200);
+  background-color: var(--color-ecsess-900);
 }
 
 *::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: var(--color-ecsess-800);
+  background-color: var(--color-ecsess-100);
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-ecsess-500);
+  background-color: var(--color-ecsess-300);
 }
 
 *::-webkit-scrollbar-thumb:active {
-  background-color: var(--color-ecsess-500);
+  background-color: var(--color-ecsess-300);
 }
 
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index 1415f41..9af1c24 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -66,7 +66,8 @@
 	<!--Flip Card container-->
 	<div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
 		<!--Front Side-->
-		<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl">
+		<!--Opacity thing is to fix the visual bug on ios-->
+		<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
 			<!--Flip button-->
 			<div
 				class="
@@ -265,7 +266,8 @@
 			</div>
 
 			<!-- General Links -->
-			<div class="max-h-41 relative z-20 gap-4 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto">
+			<!--add max-h-41 we decide to go back to scrollable-->
+			<div class="relative z-20 gap-4 pb-6 flex flex-wrap w-full items-center justify-center px-6 overflow-auto">
 				{#if generalLink}
 					{#each generalLink as link}
 						<a
diff --git a/src/components/event/EventTabsTrigger.svelte b/src/components/event/EventTabsTrigger.svelte
index 0e815d7..9770157 100644
--- a/src/components/event/EventTabsTrigger.svelte
+++ b/src/components/event/EventTabsTrigger.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { value, onclick, children } = $props();
+	let { value, selected, onclick, children } = $props();
 
 </script>
 
@@ -7,7 +7,7 @@
 	<button
 		{value}
 		onclick={() => onclick(value)}
-		class="hover:border-b-ecsess-200 data-[state=active]:border-b-ecsess-400 border-b-4 border-b-transparent px-2 pb-2 text-lg transition-all ease-in-out"
+		class="hover:border-b-ecsess-200 {selected ? 'border-b-ecsess-200' : 'border-b-transparent'} border-b-4  px-2 pb-2 text-lg transition-all ease-in-out"
 	>
 		{@render children()}
 	</button>
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 7b1f87a..1e39004 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -34,7 +34,7 @@
 	<div>
 		<ul class="flex justify-center flex-wrap gap-2">
 			{#each categories as category}
-				<EventTabsTrigger value={category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger>
+				<EventTabsTrigger value={category.value} selected={group=== category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger>
 			{/each}
 		</ul>