diff --git a/src/components/RecipeDetails.vue b/src/components/RecipeDetails.vue
index 21e36c1..9627c0c 100644
--- a/src/components/RecipeDetails.vue
+++ b/src/components/RecipeDetails.vue
@@ -2,7 +2,7 @@
     <div class="flex flex-wrap py-4">
         <div class="flex flex-col w-full lg:w-1/3 p-2">
             <div class="w-full p-2">
-                <div class="bg-white rounded shadow flex justify-between items-center p-4">
+                <div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
                     <div class="flex items-center">
                         <i class="material-icons text-gray-700 mr-2">extension</i>
                         <span class="font-semibold">Modules</span>
@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="w-full p-2">
-                <div class="bg-white rounded shadow flex justify-between items-center p-4">
+                <div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
                     <div class="flex items-center">
                         <i class="material-icons text-gray-700 mr-2">layers</i>
                         <span class="font-semibold">Stages</span>
@@ -20,7 +20,7 @@
                 </div>
             </div>
             <div class="w-full p-2">
-                <div class="bg-white rounded shadow flex justify-between items-center p-4">
+                <div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
                     <div class="flex items-center">
                         <i class="material-icons text-gray-700 mr-2">settings</i>
                         <span class="font-semibold">Args</span>
@@ -29,7 +29,7 @@
                 </div>
             </div>
             <div class="w-full p-2">
-                <div class="bg-white rounded shadow flex justify-between items-center p-4">
+                <div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
                     <div class="flex items-center">
                         <i class="material-icons text-gray-700 mr-2">play_arrow</i>
                         <span class="font-semibold">Runs</span>
@@ -39,7 +39,7 @@
             </div>
         </div>
         <div class="w-full lg:w-2/3 p-2">
-            <div class="bg-white rounded shadow">
+            <div class="bg-white rounded-lg shadow">
                 <div class="p-4 flex items-center">
                     <i class="material-icons text-gray-700 mr-2">pie_chart</i>
                     <span class="font-semibold">Modules Usage</span>
diff --git a/src/components/RecipeModules.vue b/src/components/RecipeModules.vue
index b9d2622..bf5d39a 100644
--- a/src/components/RecipeModules.vue
+++ b/src/components/RecipeModules.vue
@@ -1,76 +1,48 @@
 <template>
     <div class="py-4">
         <div v-if="!moduleDetails">
-            <div class="flex items-center">
+            <div class="flex items-center mb-4 gap-2">
                 <span class="material-icons text-gray-500 text-lg">search</span>
-                <input class="form-input ml-2 border rounded p-2 flex-grow" type="search" v-model="searchQuery"
-                    placeholder="Search modules" />
+                <input
+                    class="bg-white dark:bg-gray-700 p-2 rounded text-sm border border-gray-300 shadow focus:outline-none flex-1"
+                    type="search" v-model="searchQuery" placeholder="Search modules" />
             </div>
 
             <div v-for="(group, groupIndex) in moduleGroups" :key="groupIndex">
-                <h2 class="text-xl font-bold py-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
-                <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Name</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Type</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody v-for="(module, index) in group" :key="index" class="bg-white divide-y divide-gray-200">
-                            <tr :class="hasNestedModules(module) ? 'bg-gray-100' : ''">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <span v-if="hasNestedModules(module)" @click="toggleNested(module)">
-                                            <i class="material-icons cursor-pointer">
-                                                {{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
-                                                    'keyboard_arrow_right'
-                                                }}
-                                            </i>
-                                        </span>
-                                        {{ module.name }}
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <span
-                                            class="inline-flex items-center text-xs font-medium mr-2 px-2.5 py-0.5 rounded gap-2"
-                                            :class="getModuleTypeColors(module.type)">
-                                            <span class="material-icons align-middle text-base">
-                                                {{ getModuleTypeClass(module.type) }}
-                                            </span>
-                                            {{ module.type }}
-                                        </span>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                    <div class="flex items-center space-x-2">
-                                        <button class="py-2 px-3 rounded" @click="showModuleDetails(module)"
-                                            title="Show module details">
-                                            <i class="material-icons text-md">list</i>
-                                        </button>
-                                        <copy-btn :textToCopy="getRouteToModule(module)"
-                                            title="Copy link to module"></copy-btn>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr v-if="hasNestedModules(module) && isNestedExpanded(module)" class="bg-gray-50">
-                                <td colspan="3" class="px-6 py-4 whitespace-nowrap">
-                                    <recipe-modules :recipe="module" :moduleDetails="moduleDetails"
-                                        @showModuleDetails="showModuleDetails"
-                                        @closeModuleDetails="goBack"></recipe-modules>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <h2 class="text-xl font-bold mb-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
+                <div class="flex flex-col gap-4">
+                    <div v-for="(module, index) in group.filter(module => module.name.toLowerCase().includes(searchQuery.toLowerCase()))"
+                        :key="index" class="bg-white rounded-lg shadow overflow-hidden transition-all">
+                        <div class="py-2 px-6">
+                            <div class="flex items-center justify-between">
+                                <i class="material-icons cursor-pointer" v-if="hasNestedModules(module)"
+                                    @click="toggleNested(module)"
+                                    :title="isNestedExpanded(module) ? 'Collapse child modules' : 'Expand child modules'">
+                                    {{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
+                                        'keyboard_arrow_right' }}
+                                </i>
+                                <h3 class="text-lg font-medium text-gray-900 flex-1">{{ module.name }}</h3>
+                                <span class="inline-flex items-center mr-2 px-2.5 py-0.5 rounded gap-2"
+                                    :class="getModuleTypeColors(module.type)">
+                                    <span class="material-icons align-middle text-base">{{
+                                        getModuleTypeClass(module.type) }}</span>
+                                    {{ module.type }}
+                                </span>
+                                <button class="py-2 px-3 rounded mr-2" @click="showModuleDetails(module)"
+                                    title="Show module details">
+                                    <i class="material-icons text-md">list</i>
+                                </button>
+                                <copy-btn :textToCopy="getRouteToModule(module)" title="Copy link to module"></copy-btn>
+                            </div>
+                        </div>
+                        <div v-if="hasNestedModules(module) && isNestedExpanded(module)"
+                            class="bg-gray-100 border border-gray-200 p-4 mx-4 mb-4 rounded-lg shadow-md flex-1">
+                            <recipe-modules :recipe="module" :moduleDetails="moduleDetails"
+                                @showModuleDetails="showModuleDetails" @closeModuleDetails="goBack"></recipe-modules>
+                        </div>
+                    </div>
                 </div>
+
             </div>
 
         </div>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4aead22..13bb65e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,7 +11,7 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
       <div v-if="atlasStore.layout === 'list'">
         <div class="overflow-x-auto">
-          <table class="min-w-full bg-white rounded shadow">
+          <table class="min-w-full bg-white rounded-lg shadow">
             <thead class="bg-gray-200">
               <tr>
                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
diff --git a/src/views/RecipeView.vue b/src/views/RecipeView.vue
index 782efd3..1b03556 100644
--- a/src/views/RecipeView.vue
+++ b/src/views/RecipeView.vue
@@ -30,35 +30,35 @@
         </section>
 
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow relative overflow-hidden">
                 <ul class="flex divide-x divide-gray-200 dark:divide-gray-700">
                     <li class="cursor-pointer flex-grow text-center"
                         :class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'details' }">
                         <a @click="curTab = 'details'"
-                            class="block py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            class="block py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                             :class="{ 'text-gray-900 dark:text-white': curTab === 'details' }">Details</a>
                     </li>
                     <li class="cursor-pointer flex-grow text-center items-stretch"
                         :class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'snippet' }">
                         <a @click="curTab = 'snippet'"
-                            class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                             :class="{ 'text-gray-900 dark:text-white': curTab === 'snippet' }">Recipe</a>
                     </li>
                     <li class="cursor-pointer flex-grow text-center items-stretch"
                         :class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'modules' }">
                         <a @click="curTab = 'modules'"
-                            class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                             :class="{ 'text-gray-900 dark:text-white': curTab === 'modules' }">Modules</a>
                     </li>
                     <li class="cursor-pointer flex-grow text-center items-stretch"
                         :class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'runs' }">
                         <a @click="curTab = 'runs'"
-                            class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                             :class="{ 'text-gray-900 dark:text-white': curTab === 'runs' }">Runs</a>
                     </li>
                     <li class="cursor-pointer flex-grow text-center items-stretch">
                         <a :href="recipeSourceUrl" target="_blank"
-                            class="flex justify-center gap-2 py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
+                            class="flex justify-center gap-2 py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                             <span>Source</span>
                             <i class="material-icons text-sm">open_in_new</i>
                         </a>