diff --git a/resources/views/components/resource-view.blade.php b/resources/views/components/resource-view.blade.php
index ff8e99074..db8360fac 100644
--- a/resources/views/components/resource-view.blade.php
+++ b/resources/views/components/resource-view.blade.php
@@ -1,27 +1,23 @@
-<div @class([
-    'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group',
-    'hover:border-l-coollabs cursor-pointer' => !$upgrade,
+ <div @class([
+    'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group p-2 rounded-lg border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-yellow-400 hover:ring-coollabs',
+    'cursor-pointer' => !$upgrade,
     'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
-])>
+ ])>
     <div class="flex items-center">
-        <div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0">
+        <div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0 rounded-lg overflow-hidden">
             {{ $logo }}
         </div>
-        <div class="flex flex-col pl-2 ">
-            <div class="dark:text-white text-md">
+        <div class="flex flex-col pl-3 space-y-1">
+            <div class="dark:text-white text-md font-medium">
                 {{ $title }}
             </div>
             @if ($upgrade)
                 <div>{{ $upgrade }}</div>
             @else
-                <div class="text-xs font-bold dark:text-neutral-500 dark:group-hover:text-neutral-300">
+                <div class="text-xs dark:text-neutral-400 dark:group-hover:text-neutral-200 line-clamp-2">
                     {{ $description }}
                 </div>
             @endif
         </div>
     </div>
-    @isset($documentation)
-        <div class="flex-1"></div>
-        {{ $documentation }}
-    @endisset
 </div>
diff --git a/resources/views/livewire/project/new/select.blade.php b/resources/views/livewire/project/new/select.blade.php
index 9e2af21cc..2a974c763 100644
--- a/resources/views/livewire/project/new/select.blade.php
+++ b/resources/views/livewire/project/new/select.blade.php
@@ -66,44 +66,49 @@ class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200
             <div x-show="loading">Loading...</div>
             <div x-show="!loading" class="flex flex-col gap-4 py-4">
                 <h2 x-show="filteredGitBasedApplications.length > 0">Applications</h2>
-                <h4 x-show="filteredGitBasedApplications.length > 0">Git Based</h4>
-                <div x-show="filteredGitBasedApplications.length > 0"
-                    class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1">
-                    <template x-for="application in filteredGitBasedApplications" :key="application.name">
-                        <div x-on:click='setType(application.id)'
-                            :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
-                            <x-resource-view>
-                                <x-slot:title><span x-text="application.name"></span></x-slot>
-                                    <x-slot:description>
-                                        <span x-html="window.sanitizeHTML(application.description)"></span>
-                                        </x-slot>
-                                        <x-slot:logo>
-                                            <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
-                                                :src="application.logo">
-                                        </x-slot:logo>
-                            </x-resource-view>
+                <div x-show="filteredGitBasedApplications.length > 0 || filteredDockerBasedApplications.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <div x-show="filteredGitBasedApplications.length > 0" class="space-y-4">
+                        <h4>Git Based</h4>
+                        <div class="grid justify-start grid-cols-1 gap-4 text-left">
+                            <template x-for="application in filteredGitBasedApplications" :key="application.name">
+                                <div x-on:click='setType(application.id)'
+                                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
+                                    <x-resource-view>
+                                        <x-slot:title><span x-text="application.name"></span></x-slot>
+                                            <x-slot:description>
+                                                <span x-html="window.sanitizeHTML(application.description)"></span>
+                                                </x-slot>
+                                                <x-slot:logo>
+                                                    <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
+                                                        :src="application.logo">
+                                                </x-slot:logo>
+                                    </x-resource-view>
+                                </div>
+                            </template>
                         </div>
-                    </template>
-                </div>
-                <h4 x-show="filteredDockerBasedApplications.length > 0">Docker Based</h4>
-                <div x-show="filteredDockerBasedApplications.length > 0"
-                    class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
-                    <template x-for="application in filteredDockerBasedApplications" :key="application.name">
-                        <div x-on:click="setType(application.id)"
-                            :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
-                            <x-resource-view>
-                                <x-slot:title><span x-text="application.name"></span></x-slot>
-                                    <x-slot:description><span x-text="application.description"></span></x-slot>
-                                        <x-slot:logo> <img
-                                                class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
-                                                :src="application.logo"></x-slot>
-                            </x-resource-view>
+                    </div>
+                    <div x-show="filteredDockerBasedApplications.length > 0" class="space-y-4">
+                        <h4>Docker Based</h4>
+                        <div class="grid justify-start grid-cols-1 gap-4 text-left">
+                            <template x-for="application in filteredDockerBasedApplications" :key="application.name">
+                                <div x-on:click="setType(application.id)"
+                                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
+                                    <x-resource-view>
+                                        <x-slot:title><span x-text="application.name"></span></x-slot>
+                                            <x-slot:description><span x-text="application.description"></span></x-slot>
+                                                <x-slot:logo> <img
+                                                        class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
+                                                        :src="application.logo"></x-slot>
+                                    </x-resource-view>
+                                </div>
+                            </template>
                         </div>
-                    </template>
+                    </div>
                 </div>
-                <h2 x-show="filteredDatabases.length > 0">Databases</h2>
+                <div x-show="filteredDatabases.length > 0" class="mt-8">
+                    <h2 class="mb-4">Databases</h2>
                 <div x-show="filteredDatabases.length > 0"
-                    class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
+                    class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
                     <template x-for="database in filteredDatabases" :key="database.id">
                         <div x-on:click="setType(database.id)"
                             :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
@@ -119,7 +124,8 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
                         </div>
                     </template>
                 </div>
-                <div x-show="filteredServices.length > 0">
+                </div>
+                <div x-show="filteredServices.length > 0" class="mt-8">
                     <div class="flex items-center gap-4" x-init="loadResources">
                         <h2>Services</h2>
                         <x-forms.button x-on:click="loadResources">Reload List</x-forms.button>
@@ -132,7 +138,7 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
                             href="https://coolify.io/docs/services/overview">here</a>.
                     </div>
 
-                    <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
+                    <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
                         <template x-for="service in filteredServices" :key="service.name">
                             <div x-on:click="setType('one-click-service-' + service.name)"
                                 :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">