From 5a1de9944f167021fa616f573c08c520bcb77341 Mon Sep 17 00:00:00 2001
From: Christoph Koschel <christoph.koschel86@gmail.com>
Date: Mon, 28 Sep 2026 19:00:10 +0200
Subject: [PATCH] Fix #54

---
 app/src/langs/views/ProviderView.de.json |  3 ++-
 app/src/langs/views/ProviderView.en.json |  3 ++-
 app/src/views/ProviderView.vue           | 29 ++++++++++++------------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/src/langs/views/ProviderView.de.json b/app/src/langs/views/ProviderView.de.json
index a4c7f6e..d8e83b6 100644
--- a/app/src/langs/views/ProviderView.de.json
+++ b/app/src/langs/views/ProviderView.de.json
@@ -1,5 +1,6 @@
 {
     "$lang": "de",
     "$group": "ProviderView",
-    "title": "Wählen Sie einen Host"
+    "title": "Wählen Sie einen Provider",
+    "subtitle": "Wählen Sie einen Service aus, um mit dem Streamen zu anzufangen"
 }
\ No newline at end of file
diff --git a/app/src/langs/views/ProviderView.en.json b/app/src/langs/views/ProviderView.en.json
index c32fe57..9bfb520 100644
--- a/app/src/langs/views/ProviderView.en.json
+++ b/app/src/langs/views/ProviderView.en.json
@@ -1,5 +1,6 @@
 {
     "$lang": "en",
     "$group": "ProviderView",
-    "title": "Select an host"
+    "title": "Choose a provider",
+    "subtitle": "Select a service to start watching"
 }
\ No newline at end of file
diff --git a/app/src/views/ProviderView.vue b/app/src/views/ProviderView.vue
index 769d010..847075e 100644
--- a/app/src/views/ProviderView.vue
+++ b/app/src/views/ProviderView.vue
@@ -21,28 +21,29 @@ const vm: ProviderViewModel = useViewModel(ProviderViewModel);
         </div>
         <div class="absolute bottom-5 left-5">
             <button class="btn btn-lg btn-soft btn-square overflow-clip" @click="vm.onProfileBtn()">
-                <img v-if="vm.profileImage" :src="vm.profileImage" />
+                <img v-if="vm.profileImage" :src="vm.profileImage"/>
             </button>
         </div>
         <div>
             <h1 class="text-3xl text-center">
                 <Text :target="I18n.ProviderView.title"/>
             </h1>
-            <div class="flex justify-center pt-4">
-                <div class="join">
-                    <div class="join-item card bg-base-100 card-border border-base-300 hover:bg-primary/50"
-                         @click="vm.onAniworldBtn">
-                        <div class="card-body">
-                            <img src="/aniworld-dark.svg" alt="Aniworld" class="w-[250px] select-none"/>
-                        </div>
+            <h2 class="text-xl text-center text-base-content/70 mt-2">
+                <Text :target="I18n.ProviderView.subtitle"/>
+            </h2>
+            <div class="grid grid-cols-2 mx-auto gap-4 p-9">
+                <button class="card bg-base-100 card-border border-base-300 duration-300 transition-transform hover:bg-primary/50 hover:-translate-y-1/10"
+                     @click="vm.onAniworldBtn">
+                    <div class="card-body">
+                        <img src="/aniworld-dark.svg" alt="Aniworld" class="w-[250px] select-none"/>
                     </div>
-                    <div class="join-item card bg-base-100 card-border border-base-300 hover:bg-primary/50"
-                         @click="vm.onStoBtn">
-                        <div class="card-body">
-                            <img src="/sto.svg" alt="Sto" class="w-[250px] select-none"/>
-                        </div>
+                </button>
+                <button class="card bg-base-100 card-border border-base-300 duration-300 transition-transform hover:bg-primary/50 hover:-translate-y-1/10"
+                     @click="vm.onStoBtn">
+                    <div class="card-body">
+                        <img src="/sto.svg" alt="Sto" class="w-[250px] select-none"/>
                     </div>
-                </div>
+                </button>
             </div>
         </div>
     </div>