diff --git a/config.json b/config.json
index 6ceba82..f489b91 100644
--- a/config.json
+++ b/config.json
@@ -1,7 +1,8 @@
 {
-    "version": "2.1.2",
+    "version": "3.0.0",
     "name": "ExtensionGeneratorPlugin.name",
     "description": "ExtensionGeneratorPlugin.description",
+    "icon": "bi bi-puzzle-fill",
     "authors": [
         {
             "name": "Phillips Data, Inc.",
diff --git a/views/default/admin_main.pdt b/views/default/admin_main.pdt
index fc4cfee..68b66fd 100644
--- a/views/default/admin_main.pdt
+++ b/views/default/admin_main.pdt
@@ -1,78 +1,136 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->create($this->_('AdminMain.index.boxtitle_extensions', true), ['id'=>'admin_main'], (isset($render_section) ? $render_section : null));
-        ?>
-        <div class="pad">
-            <div class="inner">
-                <div class="links_row">
-                    <a class="btn btn-default btn-sm pull-right" title="<?php $this->_('AdminMain.index.extension_add');?>" href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/general/');?>"><i class="fas fa-plus"></i></a>
-                </div>
-                <?php
-                if ((isset($extensions) ? $extensions : null) && !empty($extensions)) {
-                ?>
+<?php
+echo $message ?? null;
 
-                <table class="table">
-                    <tr class="heading_row">
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=id&order=' . ($sort == 'id' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'id' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_id');?></a></span></td>
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=name&order=' . ($sort == 'name' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'name' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_name');?></a></span></td>
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=type&order=' . ($sort == 'type' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'type' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_type');?></a></span></td>
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=form_type&order=' . ($sort == 'form_type' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'form_type' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_form_type');?></a></span></td>
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=code_examples&order=' . ($sort == 'code_examples' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'code_examples' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_code_examples');?></a></span></td>
-                        <td><span><a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=date_updated&order=' . ($sort == 'date_updated' ? $negate_order : $order));?>" class="ajax<?php echo $this->Html->safe($sort == 'date_updated' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading_date_updated');?></a></span></td>
-                        <td class="last"><span><?php $this->_('AdminMain.index.heading_options');?></span></td>
-                    </tr>
-                    <?php
-                    // Display all extensions
-                    $i = 0;
-                    foreach ($extensions as $extension) {
-                    ?>
-                    <tr<?php echo ($i++%2 == 1) ? ' class="odd_row"' : '';?>>
-                        <td><?php echo (isset($extension->id) ? $this->Html->safe($extension->id) : null);?></td>
-                        <td><?php echo (isset($extension->name) ? $this->Html->safe($extension->name) : null);?></td>
-                        <td><?php echo $this->Html->safe((isset($types[$extension->type]) ? $types[$extension->type] : null));?></td>
-                        <td><?php echo $this->Html->safe((isset($form_types[$extension->form_type]) ? $form_types[$extension->form_type] : null));?></td>
-                        <td><?php echo (isset($extension->code_examples) ? $extension->code_examples : null) == 1 ? '<i class="fas fa-check">' : '<i class="fas fa-times">';?></td>
-                        <td><?php echo $this->Date->cast((isset($extension->date_updated) ? $extension->date_updated : null), 'date_time');?></td>
+// Build link buttons
+$link_buttons = [
+    [
+        'icon' => 'bi bi-plus-lg me-1',
+        'name' => $this->_('AdminMain.index.extension_add', true),
+        'attributes' => [
+            'href' => $this->base_uri . 'plugin/extension_generator/admin_main/general/'
+        ]
+    ]
+];
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setLinkButtons($link_buttons);
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMain.index.boxtitle_extensions', true), ['id' => 'admin_main'], $render_section ?? null);
+?>
+
+<?php if (!empty($extensions)) : ?>
+    <div class="table-responsive">
+        <table class="table table-hover mb-0">
+            <thead>
+                <tr>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=id&order=' . ($sort == 'id' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'id' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_id'); ?>
+                        </a>
+                    </th>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=name&order=' . ($sort == 'name' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'name' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_name'); ?>
+                        </a>
+                    </th>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=type&order=' . ($sort == 'type' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'type' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_type'); ?>
+                        </a>
+                    </th>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=form_type&order=' . ($sort == 'form_type' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'form_type' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_form_type'); ?>
+                        </a>
+                    </th>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=code_examples&order=' . ($sort == 'code_examples' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'code_examples' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_code_examples'); ?>
+                        </a>
+                    </th>
+                    <th>
+                        <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/index/?sort=date_updated&order=' . ($sort == 'date_updated' ? $negate_order : $order)); ?>" class="<?php echo $sort == 'date_updated' ? $order : ''; ?>">
+                            <?php $this->_('AdminMain.index.heading_date_updated'); ?>
+                        </a>
+                    </th>
+                    <th><?php $this->_('AdminMain.index.heading_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($extensions as $extension) : ?>
+                    <tr>
+                        <td><?php echo $this->Html->safe($extension->id ?? ''); ?></td>
+                        <td><?php echo $this->Html->safe($extension->name ?? ''); ?></td>
+                        <td><?php echo $this->Html->safe($types[$extension->type] ?? ''); ?></td>
+                        <td><?php echo $this->Html->safe($form_types[$extension->form_type] ?? ''); ?></td>
+                        <td>
+                            <?php if (($extension->code_examples ?? null) == 1) : ?>
+                                <i class="bi bi-check-lg text-success"></i>
+                            <?php else : ?>
+                                <i class="bi bi-x-lg text-danger"></i>
+                            <?php endif; ?>
+                        </td>
+                        <td><?php echo $this->Date->cast($extension->date_updated ?? null, 'date_time'); ?></td>
                         <td>
-                            <a href="<?php echo $this->base_uri . 'plugin/extension_generator/admin_main/general/' . (isset($extension->id) ? $this->Html->safe($extension->id) : null) . '/';?>"><?php $this->_('AdminMain.index.option_edit');?></a>,
-                            <?php
-                            $this->Form->create($this->base_uri . 'plugin/extension_generator/admin_main/delete/');
-                            $this->Form->fieldHidden('id', (isset($extension->id) ? $extension->id : null));
-                            ?>
-                            <a href="<?php echo $this->base_uri . 'plugin/extension_generator/admin_main/delete/' . (isset($extension->id) ? $this->Html->safe($extension->id) : null) . '/';?>" class="manage delete_extension" rel="<?php $this->_('AdminMain.index.text_confirm_delete');?>"><?php $this->_('AdminMain.index.option_delete');?></a>
-                            <?php
-                            $this->Form->end();
-                            ?>
+                            <div class="d-flex align-items-center gap-1">
+                                <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_main/general/' . ($extension->id ?? '') . '/'); ?>" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.index.option_edit'); ?>">
+                                    <i class="bi bi-pencil"></i>
+                                </a>
+                                <?php
+                                $this->Form->create($this->base_uri . 'plugin/extension_generator/admin_main/delete/', ['class' => 'd-inline']);
+                                $this->Form->fieldHidden('id', $extension->id ?? null);
+                                ?>
+                                <button type="button" class="btn btn-sm btn-outline-danger delete-extension" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.index.option_delete'); ?>" data-confirm-message="<?php $this->_('AdminMain.index.text_confirm_delete'); ?>">
+                                    <i class="bi bi-trash"></i>
+                                </button>
+                                <?php $this->Form->end(); ?>
+                            </div>
                         </td>
                     </tr>
-                    <?php
-                    }
-                    ?>
-                </table>
-                <?php
-                    $this->Pagination->build();
-                } else {
-                ?>
-                <div class="inner">
-                    <div class="empty_section">
-                        <div class="empty_box">
-                            <?php $this->_('AdminMain.index.extensions_no_results');?>
-                        </div>
-                    </div>
-                </div>
-                <?php
-                }
-                ?>
-            </div>
-        </div>
-        <?php
-        $this->Widget->end();
-        ?>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
+    <?php
+    if (isset($this->Pagination) && $this->Pagination->hasPages()) {
+        $this->Widget->footer();
+        $this->Pagination->build();
+    }
+    ?>
+<?php else : ?>
+    <div class="card-body text-center text-muted py-5">
+        <i class="bi bi-box-seam display-4 text-muted mb-3 d-block"></i>
+        <p class="text-muted mb-0"><?php $this->_('AdminMain.index.extensions_no_results'); ?></p>
+    </div>
+<?php endif; ?>
+
+<?php
+$this->Widget->end();
+?>
 
-<script type="text/javascript">
-    $(document).ready(function() {
-        $('a.delete_extension[rel]').blestaModalConfirm({base_url: '<?php echo $this->Html->safe($this->base_uri);?>', close: '<?php $this->_('AppController.modal.text_close');?>', submit: true});
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Delete confirmation
+    document.querySelectorAll('.delete-extension').forEach(function(btn) {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            var message = this.dataset.confirmMessage;
+            if (confirm(message)) {
+                this.closest('form').submit();
+            }
+        });
     });
-</script>
\ No newline at end of file
+
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
+        });
+    }
+});
+</script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_main_confirm.pdt b/views/default/admin_main_confirm.pdt
index 4fa2143..3154edf 100644
--- a/views/default/admin_main_confirm.pdt
+++ b/views/default/admin_main_confirm.pdt
@@ -1,55 +1,68 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminMain.index.boxtitle_extension_generator', true));
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminMain.confirm.heading_confirm');?></h3></div>
-            <div class="pad">
-                <p><?php $this->_('AdminMain.confirm.text_generation');?></p>
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMain.confirm.location', true), 'location', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMain.confirm.tooltip_location');?></div></span>
-                        <?php
-                        $this->Form->fieldSelect('location', (isset($locations) ? $locations : []), (isset($vars->location) ? $vars->location : null), ['class' => 'block', 'id' => 'location']);
-                        ?>
-                    </li>
-                    <li id="custom_path" style="display:none;">
-                        <?php
-                        $this->Form->label($this->_('AdminMain.confirm.custom_path', true), 'custom_path');
-                        $this->Form->fieldText('custom_path', (isset($vars->custom_path) ? $vars->custom_path : null), ['id' => 'custom_path', 'placeholder' => COMPONENTDIR]);
-                        ?>
-                    </li>
-                </ul>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminMain.confirm.generate', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMain.index.boxtitle_extension_generator', true));
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <h6 class="form-section-header">
+        <i class="bi bi-download me-2"></i><?php $this->_('AdminMain.confirm.heading_confirm'); ?>
+    </h6>
+
+    <p class="text-muted mb-4"><?php $this->_('AdminMain.confirm.text_generation'); ?></p>
+
+    <div class="row g-3 mb-4">
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMain.confirm.location', true), 'location', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.confirm.tooltip_location'); ?>"></i>
+            <?php
+            $this->Form->fieldSelect('location', $locations ?? [], $vars->location ?? null, ['id' => 'location', 'class' => 'form-select']);
+            ?>
         </div>
-        <?php
+    </div>
 
-        $this->Form->end();
+    <div id="custom-path-section" class="row g-3 mb-4 d-none">
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMain.confirm.custom_path', true), 'custom_path', ['class' => 'form-label']);
+            $this->Form->fieldText('custom_path', $vars->custom_path ?? null, ['id' => 'custom_path', 'class' => 'form-control', 'placeholder' => COMPONENTDIR]);
+            ?>
+        </div>
+    </div>
+</div>
 
-        $this->Widget->end();
-        ?>
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminMain.confirm.generate', true), ['class' => 'btn btn-success']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
 <script>
-    $(document).ready(function() {
-        $('#location').change(function () {
-            if ($(this).val() === 'custom') {
-                $('#custom_path').show();
-            } else {
-                $('#custom_path').hide();
-            }
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_main_create.pdt b/views/default/admin_main_create.pdt
index 35d4e07..9230935 100644
--- a/views/default/admin_main_create.pdt
+++ b/views/default/admin_main_create.pdt
@@ -1,4 +1,6 @@
-        <?php
+<?php /** @var View $this */ ?>
+
+<?php
         echo (isset($message) ? $message : null);
 
         $this->Widget->clear();
diff --git a/views/default/admin_main_general.pdt b/views/default/admin_main_general.pdt
index f553493..3d2ebb6 100644
--- a/views/default/admin_main_general.pdt
+++ b/views/default/admin_main_general.pdt
@@ -1,78 +1,132 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMain.index.boxtitle_extension_generator', true));
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['id' => 'general_extension_form', 'class' => 'disable-on-submit']);
+?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminMain.index.boxtitle_extension_generator', true));
+<div class="card-body">
+    <!-- Type Warning -->
+    <div id="type-warning" class="alert alert-warning d-none mb-4">
+        <?php echo $type_warning ?? null; ?>
+    </div>
+    <input type="hidden" id="original-type" value="<?php echo $this->Html->safe($vars->type ?? ''); ?>">
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+    <!-- Extension Type Selection -->
+    <h6 class="form-section-header border-0 mt-0 pt-0">
+        <i class="bi bi-box-seam me-2"></i><?php $this->_('AdminMain.general.type'); ?>
+        <i class="bi bi-question-circle ms-2 text-muted" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.general.tooltip_type'); ?>"></i>
+    </h6>
 
-        $this->Form->create(null, ['id' => 'general_extension_form']);
+    <div class="row g-3 mb-4">
+        <?php
+        $type_icons = [
+            'module' => 'bi-box-seam',
+            'plugin' => 'bi-plug',
+            'merchant' => 'bi-credit-card',
+            'nonmerchant' => 'bi-wallet2'
+        ];
+        $selected_type = $vars->type ?? 'module';
+        foreach ($extension_types ?? [] as $extension_type => $label) :
         ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminMain.general.heading_general_settings');?></h3></div>
-            <div class="type_warning" style="display:none;">
-                <?php echo (isset($type_warning) ? $type_warning : null);?>
-            </div>
-            <div class="pad">
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMain.general.name', true), 'name');
-                        $this->Form->fieldText('name', (isset($vars->name) ? $vars->name : null), ['id' => 'name', 'placeholder' => $this->_('AdminMain.general.placeholder_name', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMain.general.tooltip_name');?></div></span>
-                    </li>
-                    <li>
-                        <div>
+            <div class="col-md-6 col-lg-3">
+                <div class="card extension-type-card h-100 <?php echo $selected_type == $extension_type ? 'active' : ''; ?>" data-type="<?php echo $this->Html->safe($extension_type); ?>">
+                    <div class="card-body text-center py-4">
+                        <i class="bi <?php echo $type_icons[$extension_type] ?? 'bi-box'; ?> text-primary"></i>
+                        <h6 class="mb-1"><?php echo $this->Html->safe($label); ?></h6>
+                        <small class="text-muted">
                             <?php
-                            $this->Form->label($this->_('AdminMain.general.type', true), null, ['class' => 'inline']);
+                            switch ($extension_type) {
+                                case 'module':
+                                    echo $this->_('AdminMain.general.type_module_desc', true) ?: 'Provisioning & automation';
+                                    break;
+                                case 'plugin':
+                                    echo $this->_('AdminMain.general.type_plugin_desc', true) ?: 'Extend functionality';
+                                    break;
+                                case 'merchant':
+                                    echo $this->_('AdminMain.general.type_merchant_desc', true) ?: 'Credit card processing';
+                                    break;
+                                case 'nonmerchant':
+                                    echo $this->_('AdminMain.general.type_nonmerchant_desc', true) ?: 'Alternative payments';
+                                    break;
+                            }
                             ?>
-                            <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMain.general.tooltip_type');?></div></span>
-                        </div>
-                        <?php
-                        foreach ((isset($extension_types) ? $extension_types : []) as $extension_type => $label) {
-                            $this->Form->fieldRadio('type', $extension_type, (isset($vars->type) ? $vars->type : 'module') == $extension_type, ['class' => 'inline type', 'id' => 'type_' . $extension_type]);
-                            $this->Form->label($label, 'type_' . $extension_type, ['class' => 'inline']);
-                        }
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMain.general.form_type', true), 'form_type', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMain.general.tooltip_form_type');?></div></span>
-                        <?php
-                        $this->Form->fieldSelect('form_type', (isset($form_types) ? $form_types : []), (isset($vars->form_type) ? $vars->form_type : null), ['class' => 'block', 'id' => 'form_type']);
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->fieldCheckbox('code_examples', '1', (isset($vars->code_examples) ? $vars->code_examples : '1') == '1', ['class' => 'inline', 'id' => 'code_examples']);
-                        $this->Form->label($this->_('AdminMain.general.code_examples', true), 'code_examples', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMain.general.tooltip_code_examples');?></div></span>
-                    </li>
-                </ul>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminMain.general.basic_info', true), ['class' => 'btn btn-primary pull-right']);?>
+                        </small>
+                    </div>
+                </div>
             </div>
+        <?php endforeach; ?>
+    </div>
+    <input type="hidden" name="type" id="extension-type-input" value="<?php echo $this->Html->safe($selected_type); ?>">
+
+    <!-- General Settings -->
+    <h6 class="form-section-header">
+        <i class="bi bi-gear me-2"></i><?php $this->_('AdminMain.general.heading_general_settings'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMain.general.name', true), 'name', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.general.tooltip_name'); ?>"></i>
+            <?php
+            $this->Form->fieldText('name', $vars->name ?? null, ['id' => 'name', 'class' => 'form-control', 'placeholder' => $this->_('AdminMain.general.placeholder_name', true)]);
+            ?>
         </div>
-        <?php
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMain.general.form_type', true), 'form_type', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.general.tooltip_form_type'); ?>"></i>
+            <?php
+            $this->Form->fieldSelect('form_type', $form_types ?? [], $vars->form_type ?? null, ['id' => 'form_type', 'class' => 'form-select']);
+            ?>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <div class="form-check">
+            <?php
+            $this->Form->fieldCheckbox('code_examples', '1', ($vars->code_examples ?? '1') == '1', ['id' => 'code_examples', 'class' => 'form-check-input']);
+            ?>
+            <label class="form-check-label" for="code_examples">
+                <?php $this->_('AdminMain.general.code_examples'); ?>
+            </label>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMain.general.tooltip_code_examples'); ?>"></i>
+        </div>
+    </div>
+</div>
 
-        $this->Form->end();
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminMain.general.basic_info', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
-        $this->Widget->end();
-        ?>
 <script>
-    $(document).ready(function () {
-        $('.type').change(function () {
-            if ($(this).val() !== '<?php echo (isset($vars->type) ? $vars->type : null);?>' && '<?php echo (isset($vars->type) ? $vars->type : null);?>' !== '') {
-                $('.type_warning').show();
-            } else {
-                $('.type_warning').hide();
-            }
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_merchant_basic.pdt b/views/default/admin_merchant_basic.pdt
index 8f2b247..78e1ec4 100644
--- a/views/default/admin_merchant_basic.pdt
+++ b/views/default/admin_merchant_basic.pdt
@@ -1,109 +1,131 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_basic']);
+<?php
+echo $message ?? null;
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_basic']);
 
-        $this->Form->create(null, ['id' => 'merchantbasic', 'enctype' => 'multipart/form-data']);
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminMerchant.basic.heading_basic');?></h3></div>
-            <div class="pad">
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMerchant.basic.description', true), 'description', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.basic.tooltip_description');?></div></span>
-                        <?php
-                        $this->Form->fieldTextarea('description', (isset($vars['description']) ? $vars['description'] : null), ['id' => 'description']);
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMerchant.basic.logo', true), 'logo');
-                        $this->Form->fieldFile('logo', ['id' => 'logo']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.basic.tooltip_logo');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMerchant.basic.signup_url', true), 'signup_url');
-                        $this->Form->fieldText('signup_url', (isset($vars['signup_url']) ? $vars['signup_url'] : null), ['id' => 'signup_url', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_signup_url', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.basic.tooltip_signup_url');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminMerchant.basic.currencies', true), 'currencies');
-                        $this->Form->fieldText('currencies', (isset($vars['currencies']) ? $vars['currencies'] : null), ['id' => 'currencies', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_currencies', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.basic.tooltip_currencies');?></div></span>
-                    </li>
-                </ul>
-            </div>
+echo $progress_bar ?? null;
 
-            <div class="title_row first"><h3><?php $this->_('AdminMerchant.basic.heading_authors');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm author_row_add" href="#"><span><?php $this->_('AdminMerchant.basic.author_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminMerchant.basic.author_name');?></td>
-                            <td><?php $this->_('AdminMerchant.basic.author_url');?></td>
-                            <td class="last"><?php $this->_('AdminMerchant.basic.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 1;
-                    if ((isset($vars['authors']['name']) ? $vars['authors']['name'] : false)) {
-                        $rows = count($vars['authors']['name']);
-                    }
-                    for ($i = 0; $i < $rows; $i++) {
-                    ?>
-                        <tr class="author_row">
-                            <td><?php $this->Form->fieldText('authors[name][]', (isset($vars['authors']['name'][$i]) ? $vars['authors']['name'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_author_name', true)]);?></td>
-                            <td><?php $this->Form->fieldText('authors[url][]', (isset($vars['authors']['url'][$i]) ? $vars['authors']['url'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_author_url', true)]);?></td>
-                            <td><a href="#" class="manage author_row_remove"><?php $this->_('AdminMerchant.basic.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', (isset($form_type) ? $form_type : null) == 'basic' ? $this->_('AdminMerchant.basic.features', true) : $this->_('AdminMerchant.basic.fields', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
+$this->Form->create(null, ['id' => 'merchantbasic', 'enctype' => 'multipart/form-data', 'class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Basic Information -->
+    <h6 class="form-section-header">
+        <i class="bi bi-info-circle me-2"></i><?php $this->_('AdminMerchant.basic.heading_basic'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <div class="col-12">
+            <?php
+            $this->Form->label($this->_('AdminMerchant.basic.description', true), 'description', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.basic.tooltip_description'); ?>"></i>
+            <?php
+            $this->Form->fieldTextarea('description', $vars['description'] ?? null, ['id' => 'description', 'class' => 'form-control', 'rows' => 3]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMerchant.basic.logo', true), 'logo', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.basic.tooltip_logo'); ?>"></i>
+            <?php
+            $this->Form->fieldFile('logo', ['id' => 'logo', 'class' => 'form-control']);
+            ?>
         </div>
-        <?php
-        $this->Form->end();
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMerchant.basic.signup_url', true), 'signup_url', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.basic.tooltip_signup_url'); ?>"></i>
+            <?php
+            $this->Form->fieldText('signup_url', $vars['signup_url'] ?? null, ['id' => 'signup_url', 'class' => 'form-control', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_signup_url', true)]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminMerchant.basic.currencies', true), 'currencies', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.basic.tooltip_currencies'); ?>"></i>
+            <?php
+            $this->Form->fieldText('currencies', $vars['currencies'] ?? null, ['id' => 'currencies', 'class' => 'form-control', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_currencies', true)]);
+            ?>
+        </div>
+    </div>
 
-        $this->Widget->end();
-        ?>
-<script>
-    $(document).ready(function() {
-        $('.author_row_add').click(function() {
-            var fields = $('tr.author_row:first').clone(true);
-            // Remove input text data
-            fields.find('input:text').val('');
-            $('tr.author_row:last').after(fields);
+    <!-- Authors -->
+    <h6 class="form-section-header">
+        <i class="bi bi-people me-2"></i><?php $this->_('AdminMerchant.basic.heading_authors'); ?>
+    </h6>
 
-            return false;
-        });
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm author-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminMerchant.basic.author_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="authors-table">
+            <thead>
+                <tr>
+                    <th><?php $this->_('AdminMerchant.basic.author_name'); ?></th>
+                    <th><?php $this->_('AdminMerchant.basic.author_url'); ?></th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminMerchant.basic.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 1;
+                if (!empty($vars['authors']['name'])) {
+                    $rows = count($vars['authors']['name']);
+                }
+                for ($i = 0; $i < $rows; $i++) :
+                ?>
+                    <tr class="author-row">
+                        <td>
+                            <?php $this->Form->fieldText('authors[name][]', $vars['authors']['name'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_author_name', true)]); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('authors[url][]', $vars['authors']['url'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminMerchant.basic.placeholder_author_url', true)]); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', ($form_type ?? null) == 'basic' ? $this->_('AdminMerchant.basic.features', true) : $this->_('AdminMerchant.basic.fields', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $('.author_row_remove').click(function() {
-            if ($('tr.author_row').length > 1) {
-                $(this).closest('tr').remove();
-            }
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
-            return false;
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_merchant_features.pdt b/views/default/admin_merchant_features.pdt
index d918dae..c167108 100644
--- a/views/default/admin_merchant_features.pdt
+++ b/views/default/admin_merchant_features.pdt
@@ -1,44 +1,67 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_features']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row"><h3><?php $this->_('AdminMerchant.features.heading_supported_features');?></h3></div>
-            <div class="pad">
-                <div class="row">
-                <?php
-                foreach ((isset($supported_features) ? $supported_features : []) as $supported_feature => $feature_settings) {
-                ?>
-                    <div class="col-xs-4">
-                    <?php
-                    $this->Form->fieldCheckbox('supported_features[' . $supported_feature . ']', 'true', (isset($vars['supported_features']) ? (isset($vars['supported_features'][$supported_feature]) ? $vars['supported_features'][$supported_feature] : null) : $feature_settings['enabled']) == 'true', ['class' => 'inline', 'id' => 'supported_features[' . $supported_feature . ']']);
-                    $this->Form->label($feature_settings['name'], 'supported_features[' . $supported_feature . ']', ['class' => 'inline']);
+<?php /** @var View $this */ ?>
 
-                    if (!empty($feature_settings['tooltip'])) {
-                    ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php echo (isset($feature_settings['tooltip']) ? $this->Html->safe($feature_settings['tooltip']) : null);?></div></span>
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_features']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Supported Features -->
+    <h6 class="form-section-header">
+        <i class="bi bi-toggles me-2"></i><?php $this->_('AdminMerchant.features.heading_supported_features'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <?php foreach ($supported_features ?? [] as $supported_feature => $feature_settings) : ?>
+            <div class="col-md-4">
+                <div class="form-check">
                     <?php
-                    }
+                    $checked = isset($vars['supported_features'])
+                        ? ($vars['supported_features'][$supported_feature] ?? null) == 'true'
+                        : ($feature_settings['enabled'] ?? false) == 'true';
+                    $this->Form->fieldCheckbox('supported_features[' . $supported_feature . ']', 'true', $checked, ['id' => 'supported_features_' . $supported_feature, 'class' => 'form-check-input']);
                     ?>
-                    </div>
-                <?php
-                }
-                ?>
+                    <label class="form-check-label" for="supported_features_<?php echo $this->Html->safe($supported_feature); ?>">
+                        <?php echo $this->Html->safe($feature_settings['name'] ?? $supported_feature); ?>
+                    </label>
+                    <?php if (!empty($feature_settings['tooltip'])) : ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php echo $this->Html->safe($feature_settings['tooltip']); ?>"></i>
+                    <?php endif; ?>
                 </div>
             </div>
+        <?php endforeach; ?>
+    </div>
+</div>
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminMerchant.features.confirm', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminMerchant.features.confirm', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
+        });
+    }
+});
+</script>
 
-        $this->Widget->end();
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_merchant_fields.pdt b/views/default/admin_merchant_fields.pdt
index 0346a51..73167f4 100644
--- a/views/default/admin_merchant_fields.pdt
+++ b/views/default/admin_merchant_fields.pdt
@@ -1,91 +1,117 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_fields']);
+<?php
+echo $message ?? null;
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminMerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_merchant_fields']);
 
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminMerchant.fields.heading_fields');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm field_row_add" href="#"><span><?php $this->_('AdminMerchant.fields.field_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminMerchant.fields.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminMerchant.fields.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminMerchant.fields.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminMerchant.fields.tooltip');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_tooltip');?></div></span></td>
-                            <td><?php $this->_('AdminMerchant.fields.encryptable');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_encryptable');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminMerchant.fields.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $fields = 1;
-                    if ((isset($vars['fields']['name']) ? $vars['fields']['name'] : false)) {
-                        $fields = count($vars['fields']['name']);
-                    }
-                    for ($i = -1; $i < $fields; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="field_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('fields[name][]', (isset($vars['fields']['name'][$i]) ? $vars['fields']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminMerchant.fields.placeholder_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('fields[label][]', (isset($vars['fields']['label'][$i]) ? $vars['fields']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminMerchant.fields.placeholder_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('fields[type][]', (isset($field_types) ? $field_types : null), (isset($vars['fields']['type'][$i]) ? $vars['fields']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('fields[tooltip][]', (isset($vars['fields']['tooltip'][$i]) ? $vars['fields']['tooltip'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td>
-                                <?php $this->Form->fieldHidden('fields[encryptable][]', (isset($vars['fields']['encryptable'][$i]) ? $vars['fields']['encryptable'][$i] : 'false'), array_merge(['class' => 'encryptable'], $disabled));?>
-                                <?php $this->Form->fieldCheckbox('', 'true', (isset($vars['fields']['encryptable'][$i]) ? $vars['fields']['encryptable'][$i] : null) == 'true', array_merge(['class' => 'stretch encryptable_checkbox'], $disabled));?>
-                            </td>
-                            <td><a href="#" class="manage field_row_remove"><?php $this->_('AdminMerchant.fields.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminMerchant.fields.features', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+echo $progress_bar ?? null;
 
-        $this->Widget->end();
-        ?>
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
 
-<script>
-    $(document).ready(function() {
-        $('.field_row_add').click(function() {
-            var fields = $('tr.field_row:first').clone(true);
-            // Enable input fileds
-            fields.find('input,textarea,select').removeAttr('disabled');
-            fields.show();
-            $('tr.field_row:last').after(fields);
+<div class="card-body">
+    <!-- Configuration Fields -->
+    <h6 class="form-section-header">
+        <i class="bi bi-sliders me-2"></i><?php $this->_('AdminMerchant.fields.heading_fields'); ?>
+    </h6>
 
-            return false;
-        });
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm field-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminMerchant.fields.field_row_add'); ?>
+        </button>
+    </div>
 
-        $('.field_row_remove').click(function() {
-            $(this).closest('tr').remove();
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="fields-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminMerchant.fields.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminMerchant.fields.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminMerchant.fields.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminMerchant.fields.tooltip'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_tooltip'); ?>"></i>
+                    </th>
+                    <th class="text-center">
+                        <?php $this->_('AdminMerchant.fields.encryptable'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_encryptable'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminMerchant.fields.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $fields = 1;
+                if (!empty($vars['fields']['name'])) {
+                    $fields = count($vars['fields']['name']);
+                }
+                for ($i = -1; $i < $fields; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="field-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('fields[name][]', $vars['fields']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminMerchant.fields.placeholder_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('fields[label][]', $vars['fields']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminMerchant.fields.placeholder_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('fields[type][]', $field_types ?? [], $vars['fields']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('fields[tooltip][]', $vars['fields']['tooltip'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td class="text-center">
+                            <?php $this->Form->fieldHidden('fields[encryptable][]', $vars['fields']['encryptable'][$i] ?? 'false', array_merge(['class' => 'encryptable-value'], $disabled)); ?>
+                            <?php $this->Form->fieldCheckbox('', 'true', ($vars['fields']['encryptable'][$i] ?? null) == 'true', array_merge(['class' => 'form-check-input encryptable-checkbox'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
 
-            return false;
-        });
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminMerchant.fields.features', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $('.encryptable_checkbox').click(function() {
-            if ($(this).prop('checked') === true) {
-                $(this).closest('td').find('.encryptable').val('true');
-            } else {
-                $(this).closest('td').find('.encryptable').val('false');
-            }
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_module_basic.pdt b/views/default/admin_module_basic.pdt
index 37980f1..75ae96c 100644
--- a/views/default/admin_module_basic.pdt
+++ b/views/default/admin_module_basic.pdt
@@ -1,172 +1,177 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_basic']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create(null, ['id' => 'modulebasic', 'enctype' => 'multipart/form-data']);
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminModule.basic.heading_basic');?></h3></div>
-            <div class="pad">
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.description', true), 'description', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_description');?></div></span>
-                        <?php
-                        $this->Form->fieldTextarea('description', (isset($vars['description']) ? $vars['description'] : null), ['id' => 'description']);
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.logo', true), 'logo');
-                        $this->Form->fieldFile('logo', ['id' => 'logo']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_logo');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.module_row', true), 'module_row');
-                        $this->Form->fieldText('module_row', (isset($vars['module_row']) ? $vars['module_row'] : null), ['id' => 'module_row', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_row', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_module_row');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.module_row_plural', true), 'module_row_plural');
-                        $this->Form->fieldText('module_row_plural', (isset($vars['module_row_plural']) ? $vars['module_row_plural'] : null), ['id' => 'module_row_plural', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_row_plural', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_module_row_plural');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.module_group', true), 'module_group');
-                        $this->Form->fieldText('module_group', (isset($vars['module_group']) ? $vars['module_group'] : null), ['id' => 'module_group', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_group', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_module_group');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminModule.basic.module_type', true), 'module_type', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_module_type');?></div></span>
-                        <?php
-                        $this->Form->fieldSelect('module_type', (isset($module_types) ? $module_types : []), (isset($vars['module_type']) ? $vars['module_type'] : null), ['class' => 'block', 'id' => 'module_type']);
-                        ?>
-                    </li>
-                </ul>
-            </div>
+<?php /** @var View $this */ ?>
 
-            <div class="title_row first"><h3><?php $this->_('AdminModule.basic.heading_authors');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm author_row_add" href="#"><span><?php $this->_('AdminModule.basic.author_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.basic.author_name');?></td>
-                            <td><?php $this->_('AdminModule.basic.author_url');?></td>
-                            <td class="last"><?php $this->_('AdminModule.basic.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 1;
-                    if ((isset($vars['authors']['name']) ? $vars['authors']['name'] : false)) {
-                        $rows = count($vars['authors']['name']);
-                    }
-                    for ($i = 0; $i < $rows; $i++) {
-                    ?>
-                        <tr class="author_row">
-                            <td><?php $this->Form->fieldText('authors[name][]', (isset($vars['authors']['name'][$i]) ? $vars['authors']['name'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminModule.basic.placeholder_author_name', true)]);?></td>
-                            <td><?php $this->Form->fieldText('authors[url][]', (isset($vars['authors']['url'][$i]) ? $vars['authors']['url'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminModule.basic.placeholder_author_url', true)]);?></td>
-                            <td><a href="#" class="manage author_row_remove"><?php $this->_('AdminModule.basic.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
+<?php
+echo $message ?? null;
 
-            <div id="static_tlds_section">
-                <div class="title_row"><h3><?php $this->_('AdminModule.basic.heading_tlds');?></h3></div>
-                <div class="pad">
-                    <ul>
-                        <li>
-                            <?php
-                            $this->Form->fieldCheckbox('static_tlds', '1', (isset($vars['static_tlds']) ? $vars['static_tlds'] : '1') == '1', ['class' => 'inline', 'id' => 'static_tlds']);
-                            $this->Form->label($this->_('AdminModule.basic.static_tlds', true), 'static_tlds', ['class' => 'inline']);
-                            ?>
-                            <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.basic.tooltip_static_tlds');?></div></span>
-                        </li>
-                        <li id="static_tlds_fields">
-                            <?php
-                            $this->Form->label($this->_('AdminModule.basic.tlds', true), 'tlds');
-                            $this->Form->fieldText('tlds', (isset($vars['tlds']) ? $vars['tlds'] : null), ['id' => 'tlds', 'placeholder' => $this->_('AdminModule.basic.placeholder_tlds', true)]);
-                            ?>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_basic']);
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', (isset($form_type) ? $form_type : null) == 'basic' ? $this->_('AdminModule.basic.confirm', true) : $this->_('AdminModule.basic.fields', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['id' => 'modulebasic', 'enctype' => 'multipart/form-data', 'class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Basic Information -->
+    <h6 class="form-section-header">
+        <i class="bi bi-info-circle me-2"></i><?php $this->_('AdminModule.basic.heading_basic'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <div class="col-12">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.description', true), 'description', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_description'); ?>"></i>
+            <?php
+            $this->Form->fieldTextarea('description', $vars['description'] ?? null, ['id' => 'description', 'class' => 'form-control', 'rows' => 3]);
+            ?>
         </div>
-        <?php
-        $this->Form->end();
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.logo', true), 'logo', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_logo'); ?>"></i>
+            <?php
+            $this->Form->fieldFile('logo', ['id' => 'logo', 'class' => 'form-control']);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.module_type', true), 'module_type', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_module_type'); ?>"></i>
+            <?php
+            $this->Form->fieldSelect('module_type', $module_types ?? [], $vars['module_type'] ?? null, ['id' => 'module_type', 'class' => 'form-select']);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.module_row', true), 'module_row', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_module_row'); ?>"></i>
+            <?php
+            $this->Form->fieldText('module_row', $vars['module_row'] ?? null, ['id' => 'module_row', 'class' => 'form-control', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_row', true)]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.module_row_plural', true), 'module_row_plural', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_module_row_plural'); ?>"></i>
+            <?php
+            $this->Form->fieldText('module_row_plural', $vars['module_row_plural'] ?? null, ['id' => 'module_row_plural', 'class' => 'form-control', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_row_plural', true)]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminModule.basic.module_group', true), 'module_group', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_module_group'); ?>"></i>
+            <?php
+            $this->Form->fieldText('module_group', $vars['module_group'] ?? null, ['id' => 'module_group', 'class' => 'form-control', 'placeholder' => $this->_('AdminModule.basic.placeholder_module_group', true)]);
+            ?>
+        </div>
+    </div>
 
-        $this->Widget->end();
-        ?>
-<script>
-    $(document).ready(function() {
-        $('.author_row_add').click(function() {
-            var fields = $('tr.author_row:first').clone(true);
-            // Remove input text data
-            fields.find('input:text').val('');
-            $('tr.author_row:last').after(fields);
-
-            return false;
-        });
+    <!-- Authors -->
+    <h6 class="form-section-header">
+        <i class="bi bi-people me-2"></i><?php $this->_('AdminModule.basic.heading_authors'); ?>
+    </h6>
 
-        $('.author_row_remove').click(function() {
-            if ($('tr.author_row').length > 1) {
-                $(this).closest('tr').remove();
-            }
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm author-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.basic.author_row_add'); ?>
+        </button>
+    </div>
 
-            return false;
-        });
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="authors-table">
+            <thead>
+                <tr>
+                    <th><?php $this->_('AdminModule.basic.author_name'); ?></th>
+                    <th><?php $this->_('AdminModule.basic.author_url'); ?></th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.basic.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 1;
+                if (!empty($vars['authors']['name'])) {
+                    $rows = count($vars['authors']['name']);
+                }
+                for ($i = 0; $i < $rows; $i++) :
+                ?>
+                    <tr class="author-row">
+                        <td>
+                            <?php $this->Form->fieldText('authors[name][]', $vars['authors']['name'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.basic.placeholder_author_name', true)]); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('authors[url][]', $vars['authors']['url'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.basic.placeholder_author_url', true)]); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
 
+    <!-- TLDs Section (for registrar modules) -->
+    <div id="static-tlds-section" class="d-none">
+        <h6 class="form-section-header">
+            <i class="bi bi-globe me-2"></i><?php $this->_('AdminModule.basic.heading_tlds'); ?>
+        </h6>
 
-        function showStaticTldsFields() {
-            if ($('#module_type').val() == 'registrar') {
-                $('#static_tlds_section').show();
-            } else {
-                $('#static_tlds_section').hide();
-            }
-        }
-        showStaticTldsFields();
-        $('#module_type').change(function() {
-            showStaticTldsFields();
-        });
+        <div class="mb-3">
+            <div class="form-check">
+                <?php
+                $this->Form->fieldCheckbox('static_tlds', '1', ($vars['static_tlds'] ?? '1') == '1', ['id' => 'static_tlds', 'class' => 'form-check-input']);
+                ?>
+                <label class="form-check-label" for="static_tlds">
+                    <?php $this->_('AdminModule.basic.static_tlds'); ?>
+                </label>
+                <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.basic.tooltip_static_tlds'); ?>"></i>
+            </div>
+        </div>
+
+        <div id="static-tlds-fields" class="row g-3 mb-4">
+            <div class="col-md-6">
+                <?php
+                $this->Form->label($this->_('AdminModule.basic.tlds', true), 'tlds', ['class' => 'form-label']);
+                $this->Form->fieldText('tlds', $vars['tlds'] ?? null, ['id' => 'tlds', 'class' => 'form-control', 'placeholder' => $this->_('AdminModule.basic.placeholder_tlds', true)]);
+                ?>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', ($form_type ?? null) == 'basic' ? $this->_('AdminModule.basic.confirm', true) : $this->_('AdminModule.basic.fields', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        function toggleStaticTldsFields() {
-            if ($('#static_tlds').is(":checked")) {
-                $('#static_tlds_fields').show();
-            } else {
-                $('#static_tlds_fields').hide();
-            }
-        }
-        toggleStaticTldsFields();
-        $('#static_tlds').change(function() {
-            toggleStaticTldsFields();
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_module_features.pdt b/views/default/admin_module_features.pdt
index 0597bd5..d76b3de 100644
--- a/views/default/admin_module_features.pdt
+++ b/views/default/admin_module_features.pdt
@@ -1,141 +1,203 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_features']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminModule.features.heading_service_tabs');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm service_tab_row_add" href="#"><span><?php $this->_('AdminModule.features.service_tab_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.features.method_name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_method_name');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_tab_label');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.level');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_level');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminModule.features.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['service_tabs']['method_name']) ? $vars['service_tabs']['method_name'] : false)) {
-                        $rows = count($vars['service_tabs']['method_name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="service_tab_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('service_tabs[method_name][]', (isset($vars['service_tabs']['method_name'][$i]) ? $vars['service_tabs']['method_name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.features.placeholder_method_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('service_tabs[label][]', (isset($vars['service_tabs']['label'][$i]) ? $vars['service_tabs']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.features.placeholder_tab_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('service_tabs[level][]', (isset($tab_levels) ? $tab_levels : null), (isset($vars['service_tabs']['level'][$i]) ? $vars['service_tabs']['level'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><a href="#" class="manage service_tab_row_remove"><?php $this->_('AdminModule.features.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminModule.features.heading_cron_tasks');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm cron_task_row_add" href="#"><span><?php $this->_('AdminModule.features.cron_task_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.features.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_cron_label');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.description');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_description');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminModule.features.time');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.features.tooltip_time');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminModule.features.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['cron_tasks']['name']) ? $vars['cron_tasks']['name'] : false)) {
-                        $rows = count($vars['cron_tasks']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="cron_task_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('cron_tasks[name][]', (isset($vars['cron_tasks']['name'][$i]) ? $vars['cron_tasks']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.features.placeholder_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cron_tasks[label][]', (isset($vars['cron_tasks']['label'][$i]) ? $vars['cron_tasks']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.features.placeholder_cron_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('cron_tasks[description][]', (isset($vars['cron_tasks']['description'][$i]) ? $vars['cron_tasks']['description'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('cron_tasks[type][]', (isset($task_types) ? $task_types : null), (isset($vars['cron_tasks']['type'][$i]) ? $vars['cron_tasks']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cron_tasks[time][]', (isset($vars['cron_tasks']['time'][$i]) ? $vars['cron_tasks']['time'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.features.placeholder_time', true)], $disabled));?></td>
-                            <td><a href="#" class="manage cron_task_row_remove"><?php $this->_('AdminModule.features.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_features']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
 
-            <div class="title_row"><h3><?php $this->_('AdminModule.features.heading_optional_functions');?></h3></div>
-            <div class="pad">
-                <div class="row">
+<div class="card-body">
+    <!-- Service Tabs -->
+    <h6 class="form-section-header">
+        <i class="bi bi-layout-sidebar me-2"></i><?php $this->_('AdminModule.features.heading_service_tabs'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm service-tab-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.features.service_tab_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="service-tabs-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminModule.features.method_name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_method_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_tab_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.level'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_level'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.features.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
                 <?php
-                foreach ((isset($optional_functions) ? $optional_functions : []) as $optional_function => $function_settings) {
+                $rows = 0;
+                if (!empty($vars['service_tabs']['method_name'])) {
+                    $rows = count($vars['service_tabs']['method_name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
                 ?>
-                    <div class="col-sm-4">
-                    <?php
-                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', (isset($vars['optional_functions']) ? (isset($vars['optional_functions'][$optional_function]) ? $vars['optional_functions'][$optional_function] : null) : $function_settings['enabled']) == 'true', ['class' => 'inline', 'id' => 'optional_functions[' . $optional_function . ']']);
-                    $this->Form->label($optional_function, 'optional_functions[' . $optional_function . ']', ['class' => 'inline']);
+                    <tr class="service-tab-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('service_tabs[method_name][]', $vars['service_tabs']['method_name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.features.placeholder_method_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('service_tabs[label][]', $vars['service_tabs']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.features.placeholder_tab_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('service_tabs[level][]', $tab_levels ?? [], $vars['service_tabs']['level'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
 
-                    if (!empty($function_settings['tooltip'])) {
-                    ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php echo (isset($function_settings['tooltip']) ? $this->Html->safe($function_settings['tooltip']) : null);?></div></span>
-                    <?php
-                    }
-                    ?>
-                    </div>
+    <!-- Cron Tasks -->
+    <h6 class="form-section-header">
+        <i class="bi bi-clock-history me-2"></i><?php $this->_('AdminModule.features.heading_cron_tasks'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm cron-task-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.features.cron_task_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="cron-tasks-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminModule.features.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_cron_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.description'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_description'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.features.time'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.features.tooltip_time'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.features.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
                 <?php
+                $rows = 0;
+                if (!empty($vars['cron_tasks']['name'])) {
+                    $rows = count($vars['cron_tasks']['name']);
                 }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
                 ?>
+                    <tr class="cron-task-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[name][]', $vars['cron_tasks']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.features.placeholder_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[label][]', $vars['cron_tasks']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.features.placeholder_cron_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('cron_tasks[description][]', $vars['cron_tasks']['description'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('cron_tasks[type][]', $task_types ?? [], $vars['cron_tasks']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[time][]', $vars['cron_tasks']['time'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.features.placeholder_time', true)], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Optional Functions -->
+    <h6 class="form-section-header">
+        <i class="bi bi-toggles me-2"></i><?php $this->_('AdminModule.features.heading_optional_functions'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <?php foreach ($optional_functions ?? [] as $optional_function => $function_settings) : ?>
+            <div class="col-md-4">
+                <div class="form-check">
+                    <?php
+                    $checked = isset($vars['optional_functions'])
+                        ? ($vars['optional_functions'][$optional_function] ?? null) == 'true'
+                        : ($function_settings['enabled'] ?? false) == 'true';
+                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', $checked, ['id' => 'optional_functions_' . $optional_function, 'class' => 'form-check-input']);
+                    ?>
+                    <label class="form-check-label" for="optional_functions_<?php echo $this->Html->safe($optional_function); ?>">
+                        <?php echo $this->Html->safe($optional_function); ?>
+                    </label>
+                    <?php if (!empty($function_settings['tooltip'])) : ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php echo $this->Html->safe($function_settings['tooltip']); ?>"></i>
+                    <?php endif; ?>
                 </div>
             </div>
+        <?php endforeach; ?>
+    </div>
+</div>
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminModule.features.confirm', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminModule.features.confirm', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $this->Widget->end();
-        ?>
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
 <script>
-    $(document).ready(function() {
-        var field_types = ['service_tab', 'cron_task'];
-        field_types.forEach(function (field_type) {
-            $('.' + field_type + '_row_add').click(function() {
-                var fields = $('tr.' + field_type + '_row:first').clone(true);
-                // Enable input fileds
-                fields.find('input,textarea,select').removeAttr('disabled');
-                fields.show();
-                $('tr.' + field_type + '_row:last').after(fields);
-
-                return false;
-            });
-
-            $('.' + field_type + '_row_remove').click(function() {
-                $(this).closest('tr').remove();
-            });
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_module_fields.pdt b/views/default/admin_module_fields.pdt
index f410210..a6e1b7c 100644
--- a/views/default/admin_module_fields.pdt
+++ b/views/default/admin_module_fields.pdt
@@ -1,193 +1,269 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_fields']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminModule.fields.heading_module_row_fields');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm module_row_add" href="#"><span><?php $this->_('AdminModule.fields.module_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.fields.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.tooltip');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_tooltip');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.name_key');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name_key');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminModule.fields.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 1;
-                    if ((isset($vars['module_rows']['name']) ? $vars['module_rows']['name'] : false)) {
-                        $rows = count($vars['module_rows']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="module_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('module_rows[name][]', (isset($vars['module_rows']['name'][$i]) ? $vars['module_rows']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_module_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('module_rows[label][]', (isset($vars['module_rows']['label'][$i]) ? $vars['module_rows']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_module_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('module_rows[type][]', (isset($field_types) ? $field_types : null), (isset($vars['module_rows']['type'][$i]) ? $vars['module_rows']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('module_rows[tooltip][]', (isset($vars['module_rows']['tooltip'][$i]) ? $vars['module_rows']['tooltip'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td>
-                                <?php $this->Form->fieldHidden('module_rows[name_key][]', (isset($vars['module_rows']['name_key'][$i]) ? $vars['module_rows']['name_key'][$i] : 'true'), array_merge(['class' => 'module_name_key'], $disabled));?>
-                                <?php $this->Form->fieldRadio('module_rows_name_key_placeholder', 'true', (isset($vars['module_rows']['name_key'][$i]) ? $vars['module_rows']['name_key'][$i] : 'true') == 'true', array_merge(['class' => 'module_name_key_radio'], $disabled));?>
-                            </td>
-                            <td><a href="#" class="manage module_row_remove"><?php $this->_('AdminModule.fields.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminModule.fields.heading_package_fields');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm package_row_add" href="#"><span><?php $this->_('AdminModule.fields.package_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.fields.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.tooltip');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_tooltip');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.name_key');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name_key');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminModule.fields.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['package_fields']['name']) ? $vars['package_fields']['name'] : false)) {
-                        $rows = count($vars['package_fields']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="package_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('package_fields[name][]', (isset($vars['package_fields']['name'][$i]) ? $vars['package_fields']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_package_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('package_fields[label][]', (isset($vars['package_fields']['label'][$i]) ? $vars['package_fields']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_package_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('package_fields[type][]', (isset($field_types) ? $field_types : null), (isset($vars['package_fields']['type'][$i]) ? $vars['package_fields']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('package_fields[tooltip][]', (isset($vars['package_fields']['tooltip'][$i]) ? $vars['package_fields']['tooltip'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td>
-                                <?php $this->Form->fieldHidden('package_fields[name_key][]',  (isset($vars['package_fields']['name_key'][$i]) ? $vars['package_fields']['name_key'][$i] : 'true'), array_merge(['class' => 'package_name_key'], $disabled));?>
-                                <?php $this->Form->fieldRadio('package_fields_name_key_placeholder', 'true', (isset($vars['package_fields']['name_key'][$i]) ? $vars['package_fields']['name_key'][$i] : 'true') == 'true', array_merge(['class' => 'package_name_key_radio'], $disabled));?>
-                            </td>
-                            <td><a href="#" class="manage package_row_remove"><?php $this->_('AdminModule.fields.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminModule.fields.heading_service_fields');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm service_row_add" href="#"><span><?php $this->_('AdminModule.fields.service_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminModule.fields.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.tooltip');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_tooltip');?></div></span></td>
-                            <td><?php $this->_('AdminModule.fields.name_key');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminModule.fields.tooltip_name_key');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminModule.fields.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['service_fields']['name']) ? $vars['service_fields']['name'] : false)) {
-                        $rows = count($vars['service_fields']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="service_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('service_fields[name][]', (isset($vars['service_fields']['name'][$i]) ? $vars['service_fields']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_service_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('service_fields[label][]', (isset($vars['service_fields']['label'][$i]) ? $vars['service_fields']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminModule.fields.placeholder_service_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('service_fields[type][]', (isset($field_types) ? $field_types : null), (isset($vars['service_fields']['type'][$i]) ? $vars['service_fields']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('service_fields[tooltip][]', (isset($vars['service_fields']['tooltip'][$i]) ? $vars['service_fields']['tooltip'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td>
-                                <?php $this->Form->fieldHidden('service_fields[name_key][]', ($vars['service_fields']['name_key'][$i] ?? 'false'), array_merge(['class' => 'service_name_key'], $disabled));?>
-                                <?php $this->Form->fieldRadio('service_fields_name_key_placeholder', 'true', ($vars['service_fields']['name_key'][$i] ?? 'true') == 'true', array_merge(['class' => 'service_name_key_radio'], $disabled));?>
-                            </td>
-                            <td><a href="#" class="manage service_row_remove"><?php $this->_('AdminModule.fields.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminModule.fields.features', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
-
-        $this->Widget->end();
-        ?>
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminModule.index.boxtitle_extension_generator', true), ['id' => 'admin_module_fields']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Module Row Fields -->
+    <h6 class="form-section-header">
+        <i class="bi bi-server me-2"></i><?php $this->_('AdminModule.fields.heading_module_row_fields'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm module-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.fields.module_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="module-rows-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.tooltip'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_tooltip'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name_key'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name_key'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.fields.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 1;
+                if (!empty($vars['module_rows']['name'])) {
+                    $rows = count($vars['module_rows']['name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="module-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('module_rows[name][]', $vars['module_rows']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_module_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('module_rows[label][]', $vars['module_rows']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_module_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('module_rows[type][]', $field_types ?? [], $vars['module_rows']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('module_rows[tooltip][]', $vars['module_rows']['tooltip'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td class="text-center">
+                            <?php $this->Form->fieldHidden('module_rows[name_key][]', $vars['module_rows']['name_key'][$i] ?? 'true', array_merge(['class' => 'name-key-value'], $disabled)); ?>
+                            <?php $this->Form->fieldRadio('module_rows_name_key_placeholder', 'true', ($vars['module_rows']['name_key'][$i] ?? 'true') == 'true', array_merge(['class' => 'form-check-input name-key-radio', 'data-field-type' => 'module'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Package Fields -->
+    <h6 class="form-section-header">
+        <i class="bi bi-box me-2"></i><?php $this->_('AdminModule.fields.heading_package_fields'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm package-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.fields.package_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="package-fields-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.tooltip'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_tooltip'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name_key'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name_key'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.fields.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 0;
+                if (!empty($vars['package_fields']['name'])) {
+                    $rows = count($vars['package_fields']['name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="package-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('package_fields[name][]', $vars['package_fields']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_package_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('package_fields[label][]', $vars['package_fields']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_package_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('package_fields[type][]', $field_types ?? [], $vars['package_fields']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('package_fields[tooltip][]', $vars['package_fields']['tooltip'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td class="text-center">
+                            <?php $this->Form->fieldHidden('package_fields[name_key][]', $vars['package_fields']['name_key'][$i] ?? 'true', array_merge(['class' => 'name-key-value'], $disabled)); ?>
+                            <?php $this->Form->fieldRadio('package_fields_name_key_placeholder', 'true', ($vars['package_fields']['name_key'][$i] ?? 'true') == 'true', array_merge(['class' => 'form-check-input name-key-radio', 'data-field-type' => 'package'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Service Fields -->
+    <h6 class="form-section-header">
+        <i class="bi bi-sliders me-2"></i><?php $this->_('AdminModule.fields.heading_service_fields'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm service-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminModule.fields.service_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="service-fields-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.tooltip'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_tooltip'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminModule.fields.name_key'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminModule.fields.tooltip_name_key'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminModule.fields.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 0;
+                if (!empty($vars['service_fields']['name'])) {
+                    $rows = count($vars['service_fields']['name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="service-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('service_fields[name][]', $vars['service_fields']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_service_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('service_fields[label][]', $vars['service_fields']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminModule.fields.placeholder_service_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('service_fields[type][]', $field_types ?? [], $vars['service_fields']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('service_fields[tooltip][]', $vars['service_fields']['tooltip'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td class="text-center">
+                            <?php $this->Form->fieldHidden('service_fields[name_key][]', $vars['service_fields']['name_key'][$i] ?? 'false', array_merge(['class' => 'name-key-value'], $disabled)); ?>
+                            <?php $this->Form->fieldRadio('service_fields_name_key_placeholder', 'true', ($vars['service_fields']['name_key'][$i] ?? 'true') == 'true', array_merge(['class' => 'form-check-input name-key-radio', 'data-field-type' => 'service'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminModule.fields.features', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
 <script>
-    $(document).ready(function() {
-        var field_types = {module: 'module_rows', package: 'package_fields', service: 'service_fields'};
-        Object.keys(field_types).forEach(function (field_type) {
-            $('.' + field_type + '_row_add').click(function() {
-                var fields = $('tr.' + field_type + '_row:first').clone(true);
-                // Enable input fields
-                fields.find('input,textarea,select').removeAttr('disabled');
-                fields.find('input[name="' + field_types[field_type] + '\[name_key\]\[\]"]').val('false');
-
-                fields.show();
-                $('tr.' + field_type + '_row:last').after(fields);
-
-                return false;
-            });
-
-            $('.' + field_type + '_name_key_radio').click(function() {
-                $(this).closest('table').find('.' + field_type + '_name_key').val('false');
-                $(this).closest('td').find('.' + field_type + '_name_key').val('true');
-            });
-
-            if (field_type === 'module') {
-                $('.' + field_type + '_row_remove').click(function() {
-                    // Make sure there is always one active module row
-                    if ($('tr.' + field_type + '_row').length > 2) {
-                        $(this).closest('tr').remove();
-                    }
-
-                    // Make sure there is always one module row marked as the name key
-                    if ($('.' + field_type + '_name_key_radio:checked').length === 0) {
-                        $('.' + field_type + '_name_key_radio:last').prop('checked', 'checked');
-                    }
-
-                    return false;
-                });
-            } else {
-                $('.' + field_type + '_row_remove').click(function() {
-                    $(this).closest('tr').remove();
-
-                    return false;
-                });
-            }
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_nonmerchant_basic.pdt b/views/default/admin_nonmerchant_basic.pdt
index f8f4cf7..ba7f497 100644
--- a/views/default/admin_nonmerchant_basic.pdt
+++ b/views/default/admin_nonmerchant_basic.pdt
@@ -1,109 +1,131 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_basic']);
+<?php
+echo $message ?? null;
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_basic']);
 
-        $this->Form->create(null, ['id' => 'nonmerchantbasic', 'enctype' => 'multipart/form-data']);
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminNonmerchant.basic.heading_basic');?></h3></div>
-            <div class="pad">
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminNonmerchant.basic.description', true), 'description', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.basic.tooltip_description');?></div></span>
-                        <?php
-                        $this->Form->fieldTextarea('description', (isset($vars['description']) ? $vars['description'] : null), ['id' => 'description']);
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminNonmerchant.basic.logo', true), 'logo');
-                        $this->Form->fieldFile('logo', ['id' => 'logo']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.basic.tooltip_logo');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminNonmerchant.basic.signup_url', true), 'signup_url');
-                        $this->Form->fieldText('signup_url', (isset($vars['signup_url']) ? $vars['signup_url'] : null), ['id' => 'signup_url', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_signup_url', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.basic.tooltip_signup_url');?></div></span>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminNonmerchant.basic.currencies', true), 'currencies');
-                        $this->Form->fieldText('currencies', (isset($vars['currencies']) ? $vars['currencies'] : null), ['id' => 'currencies', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_currencies', true)]);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.basic.tooltip_currencies');?></div></span>
-                    </li>
-                </ul>
-            </div>
+echo $progress_bar ?? null;
 
-            <div class="title_row first"><h3><?php $this->_('AdminNonmerchant.basic.heading_authors');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm author_row_add" href="#"><span><?php $this->_('AdminNonmerchant.basic.author_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminNonmerchant.basic.author_name');?></td>
-                            <td><?php $this->_('AdminNonmerchant.basic.author_url');?></td>
-                            <td class="last"><?php $this->_('AdminNonmerchant.basic.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 1;
-                    if ((isset($vars['authors']['name']) ? $vars['authors']['name'] : false)) {
-                        $rows = count($vars['authors']['name']);
-                    }
-                    for ($i = 0; $i < $rows; $i++) {
-                    ?>
-                        <tr class="author_row">
-                            <td><?php $this->Form->fieldText('authors[name][]', (isset($vars['authors']['name'][$i]) ? $vars['authors']['name'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_author_name', true)]);?></td>
-                            <td><?php $this->Form->fieldText('authors[url][]', (isset($vars['authors']['url'][$i]) ? $vars['authors']['url'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_author_url', true)]);?></td>
-                            <td><a href="#" class="manage author_row_remove"><?php $this->_('AdminNonmerchant.basic.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', (isset($form_type) ? $form_type : null) == 'basic' ? $this->_('AdminNonmerchant.basic.confirm', true) : $this->_('AdminNonmerchant.basic.fields', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
+$this->Form->create(null, ['id' => 'nonmerchantbasic', 'enctype' => 'multipart/form-data', 'class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Basic Information -->
+    <h6 class="form-section-header">
+        <i class="bi bi-info-circle me-2"></i><?php $this->_('AdminNonmerchant.basic.heading_basic'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <div class="col-12">
+            <?php
+            $this->Form->label($this->_('AdminNonmerchant.basic.description', true), 'description', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.basic.tooltip_description'); ?>"></i>
+            <?php
+            $this->Form->fieldTextarea('description', $vars['description'] ?? null, ['id' => 'description', 'class' => 'form-control', 'rows' => 3]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminNonmerchant.basic.logo', true), 'logo', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.basic.tooltip_logo'); ?>"></i>
+            <?php
+            $this->Form->fieldFile('logo', ['id' => 'logo', 'class' => 'form-control']);
+            ?>
         </div>
-        <?php
-        $this->Form->end();
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminNonmerchant.basic.signup_url', true), 'signup_url', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.basic.tooltip_signup_url'); ?>"></i>
+            <?php
+            $this->Form->fieldText('signup_url', $vars['signup_url'] ?? null, ['id' => 'signup_url', 'class' => 'form-control', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_signup_url', true)]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminNonmerchant.basic.currencies', true), 'currencies', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.basic.tooltip_currencies'); ?>"></i>
+            <?php
+            $this->Form->fieldText('currencies', $vars['currencies'] ?? null, ['id' => 'currencies', 'class' => 'form-control', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_currencies', true)]);
+            ?>
+        </div>
+    </div>
 
-        $this->Widget->end();
-        ?>
-<script>
-    $(document).ready(function() {
-        $('.author_row_add').click(function() {
-            var fields = $('tr.author_row:first').clone(true);
-            // Remove input text data
-            fields.find('input:text').val('');
-            $('tr.author_row:last').after(fields);
+    <!-- Authors -->
+    <h6 class="form-section-header">
+        <i class="bi bi-people me-2"></i><?php $this->_('AdminNonmerchant.basic.heading_authors'); ?>
+    </h6>
 
-            return false;
-        });
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm author-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminNonmerchant.basic.author_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="authors-table">
+            <thead>
+                <tr>
+                    <th><?php $this->_('AdminNonmerchant.basic.author_name'); ?></th>
+                    <th><?php $this->_('AdminNonmerchant.basic.author_url'); ?></th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminNonmerchant.basic.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 1;
+                if (!empty($vars['authors']['name'])) {
+                    $rows = count($vars['authors']['name']);
+                }
+                for ($i = 0; $i < $rows; $i++) :
+                ?>
+                    <tr class="author-row">
+                        <td>
+                            <?php $this->Form->fieldText('authors[name][]', $vars['authors']['name'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_author_name', true)]); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('authors[url][]', $vars['authors']['url'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminNonmerchant.basic.placeholder_author_url', true)]); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', ($form_type ?? null) == 'basic' ? $this->_('AdminNonmerchant.basic.confirm', true) : $this->_('AdminNonmerchant.basic.fields', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $('.author_row_remove').click(function() {
-            if ($('tr.author_row').length > 1) {
-                $(this).closest('tr').remove();
-            }
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
-            return false;
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_nonmerchant_features.pdt b/views/default/admin_nonmerchant_features.pdt
index 74c15a2..d9ac4be 100644
--- a/views/default/admin_nonmerchant_features.pdt
+++ b/views/default/admin_nonmerchant_features.pdt
@@ -1,44 +1,67 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_features']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row"><h3><?php $this->_('AdminNonmerchant.features.heading_optional_functions');?></h3></div>
-            <div class="pad">
-                <div class="row">
-                <?php
-                foreach ((isset($optional_functions) ? $optional_functions : []) as $optional_function => $function_settings) {
-                ?>
-                    <div class="col-xs-4">
-                    <?php
-                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', (isset($vars['optional_functions']) ? (isset($vars['optional_functions'][$optional_function]) ? $vars['optional_functions'][$optional_function] : null) : $function_settings['enabled']) == 'true', ['class' => 'inline', 'id' => 'optional_functions[' . $optional_function . ']']);
-                    $this->Form->label($optional_function, 'optional_functions[' . $optional_function . ']', ['class' => 'inline']);
+<?php /** @var View $this */ ?>
 
-                    if (!empty($function_settings['tooltip'])) {
-                    ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php echo (isset($function_settings['tooltip']) ? $this->Html->safe($function_settings['tooltip']) : null);?></div></span>
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_features']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Optional Functions -->
+    <h6 class="form-section-header">
+        <i class="bi bi-toggles me-2"></i><?php $this->_('AdminNonmerchant.features.heading_optional_functions'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <?php foreach ($optional_functions ?? [] as $optional_function => $function_settings) : ?>
+            <div class="col-md-4">
+                <div class="form-check">
                     <?php
-                    }
+                    $checked = isset($vars['optional_functions'])
+                        ? ($vars['optional_functions'][$optional_function] ?? null) == 'true'
+                        : ($function_settings['enabled'] ?? false) == 'true';
+                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', $checked, ['id' => 'optional_functions_' . $optional_function, 'class' => 'form-check-input']);
                     ?>
-                    </div>
-                <?php
-                }
-                ?>
+                    <label class="form-check-label" for="optional_functions_<?php echo $this->Html->safe($optional_function); ?>">
+                        <?php echo $this->Html->safe($optional_function); ?>
+                    </label>
+                    <?php if (!empty($function_settings['tooltip'])) : ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php echo $this->Html->safe($function_settings['tooltip']); ?>"></i>
+                    <?php endif; ?>
                 </div>
             </div>
+        <?php endforeach; ?>
+    </div>
+</div>
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminNonmerchant.features.confirm', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminNonmerchant.features.confirm', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
+        });
+    }
+});
+</script>
 
-        $this->Widget->end();
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_nonmerchant_fields.pdt b/views/default/admin_nonmerchant_fields.pdt
index 9fc41c5..856ea39 100644
--- a/views/default/admin_nonmerchant_fields.pdt
+++ b/views/default/admin_nonmerchant_fields.pdt
@@ -1,91 +1,117 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_fields']);
+<?php
+echo $message ?? null;
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminNonmerchant.index.boxtitle_extension_generator', true), ['id' => 'admin_nonmerchant_fields']);
 
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminNonmerchant.fields.heading_fields');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm field_row_add" href="#"><span><?php $this->_('AdminNonmerchant.fields.field_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminNonmerchant.fields.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.fields.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminNonmerchant.fields.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.fields.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminNonmerchant.fields.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.fields.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminNonmerchant.fields.tooltip');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminNonmerchant.fields.tooltip_tooltip');?></div></span></td>
-                            <td><?php $this->_('AdminNonmerchant.fields.encryptable');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminMerchant.fields.tooltip_encryptable');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminNonmerchant.fields.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $fields = 1;
-                    if ((isset($vars['fields']['name']) ? $vars['fields']['name'] : false)) {
-                        $fields = count($vars['fields']['name']);
-                    }
-                    for ($i = -1; $i < $fields; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="field_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('fields[name][]', (isset($vars['fields']['name'][$i]) ? $vars['fields']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminNonmerchant.fields.placeholder_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('fields[label][]', (isset($vars['fields']['label'][$i]) ? $vars['fields']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminNonmerchant.fields.placeholder_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('fields[type][]', (isset($field_types) ? $field_types : null), (isset($vars['fields']['type'][$i]) ? $vars['fields']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('fields[tooltip][]', (isset($vars['fields']['tooltip'][$i]) ? $vars['fields']['tooltip'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td>
-                                <?php $this->Form->fieldHidden('fields[encryptable][]', (isset($vars['fields']['encryptable'][$i]) ? $vars['fields']['encryptable'][$i] : 'false'), array_merge(['class' => 'encryptable'], $disabled));?>
-                                <?php $this->Form->fieldCheckbox('', 'true', (isset($vars['fields']['encryptable'][$i]) ? $vars['fields']['encryptable'][$i] : null) == 'true', array_merge(['class' => 'stretch encryptable_checkbox'], $disabled));?>
-                            </td>
-                            <td><a href="#" class="manage field_row_remove"><?php $this->_('AdminNonmerchant.fields.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminNonmerchant.fields.features', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+echo $progress_bar ?? null;
 
-        $this->Widget->end();
-        ?>
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
 
-<script>
-    $(document).ready(function() {
-        $('.field_row_add').click(function() {
-            var fields = $('tr.field_row:first').clone(true);
-            // Enable input fileds
-            fields.find('input,textarea,select').removeAttr('disabled');
-            fields.show();
-            $('tr.field_row:last').after(fields);
+<div class="card-body">
+    <!-- Configuration Fields -->
+    <h6 class="form-section-header">
+        <i class="bi bi-sliders me-2"></i><?php $this->_('AdminNonmerchant.fields.heading_fields'); ?>
+    </h6>
 
-            return false;
-        });
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm field-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminNonmerchant.fields.field_row_add'); ?>
+        </button>
+    </div>
 
-        $('.field_row_remove').click(function() {
-            $(this).closest('tr').remove();
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="fields-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminNonmerchant.fields.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.fields.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminNonmerchant.fields.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.fields.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminNonmerchant.fields.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.fields.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminNonmerchant.fields.tooltip'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminNonmerchant.fields.tooltip_tooltip'); ?>"></i>
+                    </th>
+                    <th class="text-center">
+                        <?php $this->_('AdminNonmerchant.fields.encryptable'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminMerchant.fields.tooltip_encryptable'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminNonmerchant.fields.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $fields = 1;
+                if (!empty($vars['fields']['name'])) {
+                    $fields = count($vars['fields']['name']);
+                }
+                for ($i = -1; $i < $fields; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="field-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('fields[name][]', $vars['fields']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminNonmerchant.fields.placeholder_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('fields[label][]', $vars['fields']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminNonmerchant.fields.placeholder_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('fields[type][]', $field_types ?? [], $vars['fields']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('fields[tooltip][]', $vars['fields']['tooltip'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td class="text-center">
+                            <?php $this->Form->fieldHidden('fields[encryptable][]', $vars['fields']['encryptable'][$i] ?? 'false', array_merge(['class' => 'encryptable-value'], $disabled)); ?>
+                            <?php $this->Form->fieldCheckbox('', 'true', ($vars['fields']['encryptable'][$i] ?? null) == 'true', array_merge(['class' => 'form-check-input encryptable-checkbox'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
 
-            return false;
-        });
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminNonmerchant.fields.features', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $('.encryptable_checkbox').click(function() {
-            if ($(this).prop('checked') === true) {
-                $(this).closest('td').find('.encryptable').val('true');
-            } else {
-                $(this).closest('td').find('.encryptable').val('false');
-            }
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_plugin_basic.pdt b/views/default/admin_plugin_basic.pdt
index 587c801..6ccbad4 100644
--- a/views/default/admin_plugin_basic.pdt
+++ b/views/default/admin_plugin_basic.pdt
@@ -1,95 +1,113 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_basic']);
+<?php
+echo $message ?? null;
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_basic']);
 
-        $this->Form->create(null, ['id' => 'pluginbasic', 'enctype' => 'multipart/form-data']);
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminPlugin.basic.heading_basic');?></h3></div>
-            <div class="pad">
-                <ul>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminPlugin.basic.description', true), 'description', ['class' => 'inline']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.basic.tooltip_description');?></div></span>
-                        <?php
-                        $this->Form->fieldTextarea('description', (isset($vars['description']) ? $vars['description'] : null), ['id' => 'description']);
-                        ?>
-                    </li>
-                    <li>
-                        <?php
-                        $this->Form->label($this->_('AdminPlugin.basic.logo', true), 'logo');
-                        $this->Form->fieldFile('logo', ['id' => 'logo']);
-                        ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.basic.tooltip_logo');?></div></span>
-                    </li>
-                </ul>
-            </div>
+echo $progress_bar ?? null;
 
-            <div class="title_row first"><h3><?php $this->_('AdminPlugin.basic.heading_authors');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm author_row_add" href="#"><span><?php $this->_('AdminPlugin.basic.author_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.basic.author_name');?></td>
-                            <td><?php $this->_('AdminPlugin.basic.author_url');?></td>
-                            <td class="last"><?php $this->_('AdminPlugin.basic.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 1;
-                    if ((isset($vars['authors']['name']) ? $vars['authors']['name'] : false)) {
-                        $rows = count($vars['authors']['name']);
-                    }
-                    for ($i = 0; $i < $rows; $i++) {
-                    ?>
-                        <tr class="author_row">
-                            <td><?php $this->Form->fieldText('authors[name][]', (isset($vars['authors']['name'][$i]) ? $vars['authors']['name'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.basic.placeholder_author_name', true)]);?></td>
-                            <td><?php $this->Form->fieldText('authors[url][]', (isset($vars['authors']['url'][$i]) ? $vars['authors']['url'][$i] : null), ['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.basic.placeholder_author_url', true)]);?></td>
-                            <td><a href="#" class="manage author_row_remove"><?php $this->_('AdminPlugin.basic.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', (isset($form_type) ? $form_type : null) == 'basic' ? $this->_('AdminPlugin.basic.confirm', true) : $this->_('AdminPlugin.basic.database', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
+$this->Form->create(null, ['id' => 'pluginbasic', 'enctype' => 'multipart/form-data', 'class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Basic Information -->
+    <h6 class="form-section-header">
+        <i class="bi bi-info-circle me-2"></i><?php $this->_('AdminPlugin.basic.heading_basic'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <div class="col-12">
+            <?php
+            $this->Form->label($this->_('AdminPlugin.basic.description', true), 'description', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.basic.tooltip_description'); ?>"></i>
+            <?php
+            $this->Form->fieldTextarea('description', $vars['description'] ?? null, ['id' => 'description', 'class' => 'form-control', 'rows' => 3]);
+            ?>
+        </div>
+        <div class="col-md-6">
+            <?php
+            $this->Form->label($this->_('AdminPlugin.basic.logo', true), 'logo', ['class' => 'form-label']);
+            ?>
+            <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.basic.tooltip_logo'); ?>"></i>
+            <?php
+            $this->Form->fieldFile('logo', ['id' => 'logo', 'class' => 'form-control']);
+            ?>
         </div>
-        <?php
-        $this->Form->end();
+    </div>
 
-        $this->Widget->end();
-        ?>
-<script>
-    $(document).ready(function() {
-        $('.author_row_add').click(function() {
-            var fields = $('tr.author_row:first').clone(true);
-            // Remove input text data
-            fields.find('input:text').val('');
-            $('tr.author_row:last').after(fields);
+    <!-- Authors -->
+    <h6 class="form-section-header">
+        <i class="bi bi-people me-2"></i><?php $this->_('AdminPlugin.basic.heading_authors'); ?>
+    </h6>
 
-            return false;
-        });
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm author-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.basic.author_row_add'); ?>
+        </button>
+    </div>
 
-        $('.author_row_remove').click(function() {
-            if ($('tr.author_row').length > 1) {
-                $(this).closest('tr').remove();
-            }
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="authors-table">
+            <thead>
+                <tr>
+                    <th><?php $this->_('AdminPlugin.basic.author_name'); ?></th>
+                    <th><?php $this->_('AdminPlugin.basic.author_url'); ?></th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.basic.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 1;
+                if (!empty($vars['authors']['name'])) {
+                    $rows = count($vars['authors']['name']);
+                }
+                for ($i = 0; $i < $rows; $i++) :
+                ?>
+                    <tr class="author-row">
+                        <td>
+                            <?php $this->Form->fieldText('authors[name][]', $vars['authors']['name'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.basic.placeholder_author_name', true)]); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('authors[url][]', $vars['authors']['url'][$i] ?? null, ['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.basic.placeholder_author_url', true)]); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
 
-            return false;
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', ($form_type ?? null) == 'basic' ? $this->_('AdminPlugin.basic.confirm', true) : $this->_('AdminPlugin.basic.database', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_plugin_database.pdt b/views/default/admin_plugin_database.pdt
index d1de35e..8f13648 100644
--- a/views/default/admin_plugin_database.pdt
+++ b/views/default/admin_plugin_database.pdt
@@ -1,196 +1,164 @@
-        <?php
-        echo (isset($message) ? $message : null);
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_database']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['id' => 'plugindatabase', 'enctype' => 'multipart/form-data', 'class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Database Tables -->
+    <h6 class="form-section-header">
+        <i class="bi bi-database me-2"></i><?php $this->_('AdminPlugin.database.heading_database'); ?>
+        <a href="#" class="ms-2 text-decoration-none small" data-toggle-info="database-info-text">
+            <i class="bi bi-info-circle"></i> <?php $this->_('AdminPlugin.database.heading_more_info'); ?>
+        </a>
+    </h6>
 
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_database']);
+    <div id="database-info-text" class="info-box d-none mb-4">
+        <?php $this->_('AdminPlugin.database.text_more_info'); ?>
+    </div>
 
-        echo (isset($progress_bar) ? $progress_bar : null);
+    <div class="d-flex justify-content-end mb-3">
+        <button type="button" class="btn btn-outline-primary btn-sm table-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.database.table_row_add'); ?>
+        </button>
+    </div>
 
-        $this->Form->create(null, ['id' => 'plugindatabase', 'enctype' => 'multipart/form-data']);
+    <div id="database-tables">
+        <?php
+        $tables = 0;
+        if (!empty($vars['tables'])) {
+            $tables = count($vars['tables']);
+        }
+        for ($i = -1; $i < $tables; $i++) :
+            $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+            $hidden = $i < 0 ? 'style="display:none;"' : '';
         ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminPlugin.database.heading_database');?> - <a id="database_more_info" href="#"><?php $this->_('AdminPlugin.database.heading_more_info');?></a></h3></div>
-            <div class="pad" id="database_info_text" style="display:none;">
-                <div class="empty_box"><?php $this->_('AdminPlugin.database.text_more_info');?></div>
-            </div>
-            <div class="pad">
-                <div id="database_tables">
-                    <div class="links_row">
-                        <a class="btn btn-default pull-right btn-sm table_row_add" href="#"><span><?php $this->_('AdminPlugin.database.table_row_add');?></span></a>
+            <div class="table-section" <?php echo $hidden; ?> data-table="<?php echo $i; ?>">
+                <div class="row g-3 mb-3 align-items-end">
+                    <div class="col-md-6">
+                        <?php
+                        $this->Form->label($this->_('AdminPlugin.database.table_name', true), 'tables[' . $i . '][name]', ['class' => 'form-label']);
+                        ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_table_name'); ?>"></i>
+                        <?php
+                        $this->Form->fieldText('tables[' . $i . '][name]', $vars['tables'][$i]['name'] ?? null, array_merge(['id' => 'tables_' . $i . '_name', 'class' => 'form-control', 'placeholder' => $this->_('AdminPlugin.database.placeholder_table_name', true)], $disabled));
+                        ?>
                     </div>
-                    <?php
-                    $tables = 0;
-                    if ((isset($vars['tables']) ? $vars['tables'] : false)) {
-                        $tables = count($vars['tables']);
-                    }
-                    for ($i = -1; $i < $tables; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                    <div class="pad table_div"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?> data-table="<?php echo $i;?>">
-                        <div class="table_row" id="table_<?php echo $i;?>">
-                            <p>
-                                <ul>
-                                    <li>
-                                        <?php
-                                        $this->Form->label($this->_('AdminPlugin.database.table_name', true), 'tables[' . $i . '][name]', ['class' => 'inline']);
-                                        ?>
-                                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_table_name');?></div></span>
-                                    </li>
-                                    <li>
-                                        <?php
-                                        $this->Form->fieldText('tables[' . $i . '][name]', (isset($vars['tables'][$i]['name']) ? $vars['tables'][$i]['name'] : null), array_merge(['id' => 'tables[' . $i . '][name]', 'placeholder' => $this->_('AdminPlugin.database.placeholder_table_name', true)], $disabled));
-                                        ?>
-                                        <a href="#" class="btn btn-danger pull-right btn-sm table_row_remove" ><?php $this->_('AdminPlugin.database.text_remove');?></a>
-                                        <a href="#" class="btn btn-default pull-right btn-sm column_row_add" ><?php $this->_('AdminPlugin.database.column_row_add');?></a>
-                                    </li>
-                                </ul>
-                            </p>
-                        </div>
-                        <table class="table table_column_row">
-                            <thead>
-                                <tr class="heading_row">
-                                    <td><?php $this->_('AdminPlugin.database.column_name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_column_name');?></div></span></td>
-                                    <td><?php $this->_('AdminPlugin.database.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_type');?></div></span></td>
-                                    <td><?php $this->_('AdminPlugin.database.length');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_length');?></div></span></td>
-                                    <td><?php $this->_('AdminPlugin.database.default');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_default');?></div></span></td>
-                                    <td><?php $this->_('AdminPlugin.database.nullable');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_nullable');?></div></span></td>
-                                    <td><?php $this->_('AdminPlugin.database.primary');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.database.tooltip_primary');?></div></span></td>
-                                    <td class="last"><?php $this->_('AdminPlugin.database.text_options');?></td>
-                                </tr>
-                            </thead>
-                            <tbody>
+                    <div class="col-md-6 text-end">
+                        <button type="button" class="btn btn-outline-primary btn-sm column-row-add">
+                            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.database.column_row_add'); ?>
+                        </button>
+                        <button type="button" class="btn btn-outline-danger btn-sm table-row-remove">
+                            <i class="bi bi-trash me-1"></i><?php $this->_('AdminPlugin.database.text_remove'); ?>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="table-responsive">
+                    <table class="table table-sm">
+                        <thead>
+                            <tr>
+                                <th>
+                                    <?php $this->_('AdminPlugin.database.column_name'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_column_name'); ?>"></i>
+                                </th>
+                                <th>
+                                    <?php $this->_('AdminPlugin.database.type'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_type'); ?>"></i>
+                                </th>
+                                <th>
+                                    <?php $this->_('AdminPlugin.database.length'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_length'); ?>"></i>
+                                </th>
+                                <th>
+                                    <?php $this->_('AdminPlugin.database.default'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_default'); ?>"></i>
+                                </th>
+                                <th class="text-center">
+                                    <?php $this->_('AdminPlugin.database.nullable'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_nullable'); ?>"></i>
+                                </th>
+                                <th class="text-center">
+                                    <?php $this->_('AdminPlugin.database.primary'); ?>
+                                    <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.database.tooltip_primary'); ?>"></i>
+                                </th>
+                                <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.database.text_options'); ?></th>
+                            </tr>
+                        </thead>
+                        <tbody>
                             <?php
                             $columns = 1;
-                            if ((isset($vars['tables'][$i]['columns']) ? $vars['tables'][$i]['columns'] : false)) {
+                            if (!empty($vars['tables'][$i]['columns'])) {
                                 $columns = count($vars['tables'][$i]['columns']);
                             }
-                            for ($j = 0; $j < $columns; $j++) {
-                                $type = (isset($vars['tables'][$i]['columns'][$j]['type']) ? $vars['tables'][$i]['columns'][$j]['type'] : null);
+                            for ($j = 0; $j < $columns; $j++) :
+                                $type = $vars['tables'][$i]['columns'][$j]['type'] ?? null;
                                 $no_length_types = ['DATETIME', 'TEXT'];
                             ?>
-                                <tr class="column_row" data-column="<?php echo $j;?>">
-                                    <td><?php $this->Form->fieldText('tables[' . $i . '][columns][c' . $j . '][name]', (isset($vars['tables'][$i]['columns'][$j]['name']) ? $vars['tables'][$i]['columns'][$j]['name'] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.database.placeholder_column_name', true)], $disabled));?></td>
-                                    <td><?php $this->Form->fieldSelect('tables[' . $i . '][columns][c' . $j . '][type]', (isset($column_types) ? $column_types : []), $type, array_merge(['class' => 'type'], $disabled));?></td>
-                                    <td><?php $this->Form->fieldText('tables[' . $i . '][columns][c' . $j . '][length]', (isset($vars['tables'][$i]['columns'][$j]['length']) ? $vars['tables'][$i]['columns'][$j]['length'] : null), array_merge(['class' => 'stretch length', 'placeholder' => $this->_('AdminPlugin.database.placeholder_length', true)], in_array($type, $no_length_types) ? ['disabled' => 'disabled'] : $disabled));?></td>
-                                    <td><?php $this->Form->fieldTextarea('tables[' . $i . '][columns][c' . $j . '][default]', (isset($vars['tables'][$i]['columns'][$j]['default']) ? $vars['tables'][$i]['columns'][$j]['default'] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                                    <td><?php $this->Form->fieldCheckbox('tables[' . $i . '][columns][c' . $j . '][nullable]', 'true', (isset($vars['tables'][$i]['columns'][$j]['nullable']) ? $vars['tables'][$i]['columns'][$j]['nullable'] : 'true') == 'true', $disabled);?></td>
-                                    <td><?php $this->Form->fieldRadio('tables[' . $i . '][columns][c' . $j . '][primary]', 'true', (isset($vars['tables'][$i]['columns'][$j]['primary']) ? $vars['tables'][$i]['columns'][$j]['primary'] : 'true') == 'true', array_merge(['class' => 'primary_key'], in_array($type, $no_length_types) ? ['disabled' => 'disabled'] : $disabled));?></td>
-                                    <td><a href="#" class="manage column_row_remove"><?php $this->_('AdminPlugin.database.text_remove');?></a></td>
+                                <tr class="column-row" data-column="<?php echo $j; ?>">
+                                    <td>
+                                        <?php $this->Form->fieldText('tables[' . $i . '][columns][c' . $j . '][name]', $vars['tables'][$i]['columns'][$j]['name'] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.database.placeholder_column_name', true)], $disabled)); ?>
+                                    </td>
+                                    <td>
+                                        <?php $this->Form->fieldSelect('tables[' . $i . '][columns][c' . $j . '][type]', $column_types ?? [], $type, array_merge(['class' => 'form-select form-select-sm column-type-select'], $disabled)); ?>
+                                    </td>
+                                    <td>
+                                        <?php $this->Form->fieldText('tables[' . $i . '][columns][c' . $j . '][length]', $vars['tables'][$i]['columns'][$j]['length'] ?? null, array_merge(['class' => 'form-control form-control-sm column-length', 'placeholder' => $this->_('AdminPlugin.database.placeholder_length', true)], in_array($type, $no_length_types) ? ['disabled' => 'disabled'] : $disabled)); ?>
+                                    </td>
+                                    <td>
+                                        <?php $this->Form->fieldTextarea('tables[' . $i . '][columns][c' . $j . '][default]', $vars['tables'][$i]['columns'][$j]['default'] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                                    </td>
+                                    <td class="text-center">
+                                        <?php $this->Form->fieldCheckbox('tables[' . $i . '][columns][c' . $j . '][nullable]', 'true', ($vars['tables'][$i]['columns'][$j]['nullable'] ?? 'true') == 'true', array_merge(['class' => 'form-check-input'], $disabled)); ?>
+                                    </td>
+                                    <td class="text-center">
+                                        <?php $this->Form->fieldRadio('tables[' . $i . '][columns][c' . $j . '][primary]', 'true', ($vars['tables'][$i]['columns'][$j]['primary'] ?? 'true') == 'true', array_merge(['class' => 'form-check-input primary-key'], in_array($type, $no_length_types) ? ['disabled' => 'disabled'] : $disabled)); ?>
+                                    </td>
+                                    <td class="text-end">
+                                        <button type="button" class="btn btn-outline-danger btn-sm column-row-remove">
+                                            <i class="bi bi-trash"></i>
+                                        </button>
+                                    </td>
                                 </tr>
-                            <?php
-                            }
-                            ?>
-                            </tbody>
-                        </table>
-                    </div>
-                    <?php
-                    }
-                    ?>
+                            <?php endfor; ?>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.database.integrations', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+        <?php endfor; ?>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.database.integrations', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
-        $this->Widget->end();
-        ?>
 <script>
-    $(document).ready(function() {
-        $('.table_row_add').click(function() {
-            // Clone the table section
-            var table_section = $('.table_div:first').clone(true);
-            var last_table_number = $('.table_div:last').data('table');
-
-            // Display the cloned section
-            table_section.show();
-
-            // Enable fields
-            table_section.find('input,textarea,select').removeAttr('disabled');
-
-            var element_html = table_section.prop('outerHTML').replace(new RegExp('-1', 'g'), (last_table_number + 1));
-
-            // Add new table
-            $('.table_div:last').after(element_html);
-
-            $('#database_tables').blestaBindToolTips();
-
-            return false;
-        });
-
-        $('#database_tables').on('click', '.column_row_add', function() {
-            // Clone the table row and the columns row
-            var column = $(this).closest('.table_div').find('.column_row:last').clone(true);
-            var column_number = column.data('column');
-            column.data('column', column_number + 1);
-
-            // Display the cloned row
-            column.show();
-
-            // Clear fields
-            column.find('input:text,select').val('').attr('value', '');
-            column.find('input:checkbox,input:radio').prop('checked', false).attr('checked', false);
-            column.find('textarea').html('');
-
-            var element_html = $('<div>').append(column).html().replace(
-                new RegExp('c' + column_number, 'g'), 'c' + (column_number + 1)
-            );
-
-            // Add new table
-            $(this).closest('.table_div').find('.column_row:last').after(
-                element_html.replace('data-column="' + column_number + '"', 'data-column="' + (column_number + 1) + '"')
-            );
-
-            return false;
-        });
-
-        $('#database_tables').on('click', '.table_row_remove', function() {
-            // Remove table section
-            $(this).closest('.table_div').remove();
-
-            return false;
-        });
-
-        $('#database_tables').on('click', '.column_row_remove', function() {
-            $table = $(this).closest('tbody');
-
-            // Remove column row
-            if ($table.find('tr').length > 1) {
-                $(this).closest('tr').remove();
-            }
-
-            // Make sure there is always one primary key is checked
-            if ($table.find('.primary_key:checked').length === 0) {
-                $table.find('tr:last .primary_key').prop('checked', 'checked');
-            }
-
-            return false;
-        });
-
-        $('#database_tables').on('click', '.primary_key', function() {
-            // Make sure only one primary key is checked
-            $(this).closest('tbody').find('.primary_key').prop('checked', false);
-            $(this).prop('checked', 'checked');
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-
-        $('#database_tables').on('change', '.type', function() {
-            var default_type_values = {'INT':10, 'TINYINT':1, 'VARCHAR':64, 'DATETIME':'', 'TEXT':'', 'ENUM':"'a','b','c'"}
-
-            // Set the length field to the default value for the collected type
-            $(this).closest('tr').find('.length').val(default_type_values[$(this).val()]);
-
-            if ($(this).val() == 'DATETIME' || $(this).val() == 'TEXT') {
-                $(this).closest('tr').find('.length').prop('disabled', 'disabled');
-                $(this).closest('tr').find('.primary_key').prop('disabled', 'disabled');
-            } else {
-                $(this).closest('tr').find('.length').prop('disabled', false);
-                $(this).closest('tr').find('.primary_key').prop('disabled', false);
-            }
-        });
-
-        $(this).blestaBindToggleEvent('#database_more_info', '#database_info_text');
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/admin_plugin_features.pdt b/views/default/admin_plugin_features.pdt
index ae80edd..97d0d5b 100644
--- a/views/default/admin_plugin_features.pdt
+++ b/views/default/admin_plugin_features.pdt
@@ -1,142 +1,242 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_features']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row first"><h3><?php $this->_('AdminPlugin.features.heading_service_tabs');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm service_tab_row_add" href="#"><span><?php $this->_('AdminPlugin.features.service_tab_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.features.method_name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_method_name');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_tab_label');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.level');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_level');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminPlugin.features.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['service_tabs']['method_name']) ? $vars['service_tabs']['method_name'] : false)) {
-                        $rows = count($vars['service_tabs']['method_name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="service_tab_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('service_tabs[method_name][]', (isset($vars['service_tabs']['method_name'][$i]) ? $vars['service_tabs']['method_name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.features.placeholder_method_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('service_tabs[label][]', (isset($vars['service_tabs']['label'][$i]) ? $vars['service_tabs']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.features.placeholder_tab_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('service_tabs[level][]', (isset($tab_levels) ? $tab_levels : null), (isset($vars['service_tabs']['level'][$i]) ? $vars['service_tabs']['level'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><a href="#" class="manage service_tab_row_remove"><?php $this->_('AdminPlugin.features.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminPlugin.features.heading_cron_tasks');?></h3></div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm cron_task_row_add" href="#"><span><?php $this->_('AdminPlugin.features.cron_task_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.features.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_cron_label');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.description');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_description');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.type');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_type');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.features.time');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.features.tooltip_time');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminPlugin.features.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['cron_tasks']['name']) ? $vars['cron_tasks']['name'] : false)) {
-                        $rows = count($vars['cron_tasks']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="cron_task_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('cron_tasks[name][]', (isset($vars['cron_tasks']['name'][$i]) ? $vars['cron_tasks']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.features.placeholder_name', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cron_tasks[label][]', (isset($vars['cron_tasks']['label'][$i]) ? $vars['cron_tasks']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.features.placeholder_cron_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldTextarea('cron_tasks[description][]', (isset($vars['cron_tasks']['description'][$i]) ? $vars['cron_tasks']['description'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldSelect('cron_tasks[type][]', (isset($task_types) ? $task_types : null), (isset($vars['cron_tasks']['type'][$i]) ? $vars['cron_tasks']['type'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cron_tasks[time][]', (isset($vars['cron_tasks']['time'][$i]) ? $vars['cron_tasks']['time'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.features.placeholder_time', true)], $disabled));?></td>
-                            <td><a href="#" class="manage cron_task_row_remove"><?php $this->_('AdminPlugin.features.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminPlugin.features.heading_optional_functions');?></h3></div>
-            <div class="pad">
-                <div class="row">
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_features']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Service Tabs -->
+    <h6 class="form-section-header">
+        <i class="bi bi-layout-sidebar me-2"></i><?php $this->_('AdminPlugin.features.heading_service_tabs'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm service-tab-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.features.service_tab_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="service-tabs-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.method_name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_method_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_tab_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.level'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_level'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.features.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
                 <?php
-                foreach ((isset($optional_functions) ? $optional_functions : []) as $optional_function => $function_settings) {
+                $rows = 0;
+                if (!empty($vars['service_tabs']['method_name'])) {
+                    $rows = count($vars['service_tabs']['method_name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
                 ?>
-                    <div class="col-4">
-                    <?php
-                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', (isset($vars['optional_functions']) ? (isset($vars['optional_functions'][$optional_function]) ? $vars['optional_functions'][$optional_function] : null) : $function_settings['enabled']) == 'true', ['class' => 'inline', 'id' => 'optional_functions[' . $optional_function . ']']);
-                    $this->Form->label($optional_function, 'optional_functions[' . $optional_function . ']', ['class' => 'inline']);
+                    <tr class="service-tab-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('service_tabs[method_name][]', $vars['service_tabs']['method_name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.features.placeholder_method_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('service_tabs[label][]', $vars['service_tabs']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.features.placeholder_tab_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('service_tabs[level][]', $tab_levels ?? [], $vars['service_tabs']['level'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
 
-                    if (!empty($function_settings['tooltip'])) {
-                    ?>
-                        <span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php echo (isset($function_settings['tooltip']) ? $this->Html->safe($function_settings['tooltip']) : null);?></div></span>
-                    <?php
-                    }
-                    ?>
-                    </div>
+    <!-- Cron Tasks -->
+    <h6 class="form-section-header">
+        <i class="bi bi-clock-history me-2"></i><?php $this->_('AdminPlugin.features.heading_cron_tasks'); ?>
+    </h6>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm cron-task-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.features.cron_task_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="cron-tasks-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_cron_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.description'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_description'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.type'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_type'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.features.time'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.features.tooltip_time'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.features.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
                 <?php
+                $rows = 0;
+                if (!empty($vars['cron_tasks']['name'])) {
+                    $rows = count($vars['cron_tasks']['name']);
                 }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
                 ?>
+                    <tr class="cron-task-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[name][]', $vars['cron_tasks']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.features.placeholder_name', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[label][]', $vars['cron_tasks']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.features.placeholder_cron_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldTextarea('cron_tasks[description][]', $vars['cron_tasks']['description'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'rows' => 1], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldSelect('cron_tasks[type][]', $task_types ?? [], $vars['cron_tasks']['type'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cron_tasks[time][]', $vars['cron_tasks']['time'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.features.placeholder_time', true)], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Optional Functions -->
+    <h6 class="form-section-header">
+        <i class="bi bi-toggles me-2"></i><?php $this->_('AdminPlugin.features.heading_optional_functions'); ?>
+    </h6>
+
+    <div class="row g-3 mb-4">
+        <?php foreach ($optional_functions ?? [] as $optional_function => $function_settings) : ?>
+            <div class="col-md-4">
+                <div class="form-check">
+                    <?php
+                    $checked = isset($vars['optional_functions'])
+                        ? ($vars['optional_functions'][$optional_function] ?? null) == 'true'
+                        : ($function_settings['enabled'] ?? false) == 'true';
+                    $this->Form->fieldCheckbox('optional_functions[' . $optional_function . ']', 'true', $checked, ['id' => 'optional_functions_' . $optional_function, 'class' => 'form-check-input']);
+                    ?>
+                    <label class="form-check-label" for="optional_functions_<?php echo $this->Html->safe($optional_function); ?>">
+                        <?php echo $this->Html->safe($optional_function); ?>
+                    </label>
+                    <?php if (!empty($function_settings['tooltip'])) : ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php echo $this->Html->safe($function_settings['tooltip']); ?>"></i>
+                    <?php endif; ?>
                 </div>
             </div>
+        <?php endforeach; ?>
+    </div>
+</div>
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.features.confirm', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.features.confirm', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
 
-        $this->Widget->end();
-        ?>
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
 <script>
-    $(document).ready(function() {
-        var field_types = ['service_tab', 'cron_task'];
-        field_types.forEach(function (field_type) {
-            $('.' + field_type + '_row_add').click(function() {
-                var fields = $('tr.' + field_type + '_row:first').clone(true);
-                // Enable input fileds
-                fields.find('input,textarea,select').removeAttr('disabled');
-                fields.show();
-                $('tr.' + field_type + '_row:last').after(fields);
-
-                return false;
-            });
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
+        });
+    }
 
-            $('.' + field_type + '_row_remove').click(function() {
-                $(this).closest('tr').remove();
+    // Add row functionality
+    var fieldTypes = ['service-tab', 'cron-task'];
+    fieldTypes.forEach(function(fieldType) {
+        var addButton = document.querySelector('.' + fieldType + '-row-add');
+        if (addButton) {
+            addButton.addEventListener('click', function(e) {
+                e.preventDefault();
+                var table = document.getElementById(fieldType + 's-table');
+                var tbody = table.querySelector('tbody');
+                var firstRow = tbody.querySelector('.' + fieldType + '-row');
+                var newRow = firstRow.cloneNode(true);
 
-                return false;
+                // Enable and clear input fields
+                newRow.querySelectorAll('input, textarea, select').forEach(function(el) {
+                    el.removeAttribute('disabled');
+                    if (el.type === 'checkbox') {
+                        el.checked = false;
+                    } else {
+                        el.value = '';
+                    }
+                });
+
+                newRow.style.display = '';
+                tbody.appendChild(newRow);
             });
+        }
+
+        // Remove row functionality
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.' + fieldType + '-row .remove-row')) {
+                var row = e.target.closest('.' + fieldType + '-row');
+                var tbody = row.closest('tbody');
+                if (tbody.querySelectorAll('.' + fieldType + '-row').length > 1) {
+                    row.remove();
+                }
+            }
         });
     });
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
\ No newline at end of file
diff --git a/views/default/admin_plugin_integrations.pdt b/views/default/admin_plugin_integrations.pdt
index 28281ae..ef14420 100644
--- a/views/default/admin_plugin_integrations.pdt
+++ b/views/default/admin_plugin_integrations.pdt
@@ -1,164 +1,252 @@
-        <?php
-        echo (isset($message) ? $message : null);
-
-        $this->Widget->clear();
-        $this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
-        $this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_integrations']);
-
-        echo (isset($progress_bar) ? $progress_bar : null);
-
-        $this->Form->create();
-        ?>
-        <div class="inner">
-            <div class="title_row"><h3><?php $this->_('AdminPlugin.integrations.heading_actions');?> - <a id="actions_more_info" href="#"><?php $this->_('AdminPlugin.integrations.heading_more_info');?></a></h3></div>
-            <div class="pad" id="actions_info_text" style="display:none;">
-                <div class="empty_box"><?php $this->_('AdminPlugin.integrations.text_actions_more_info');?></div>
-            </div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm action_row_add" href="#"><span><?php $this->_('AdminPlugin.integrations.action_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.integrations.location');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_location');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.controller');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_controller');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.action');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_action');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.name');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_name');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminPlugin.integrations.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['actions']['name']) ? $vars['actions']['name'] : false)) {
-                        $rows = count($vars['actions']['name']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="action_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldSelect('actions[location][]', (isset($action_locations) ? $action_locations : null), (isset($vars['actions']['location'][$i]) ? $vars['actions']['location'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('actions[controller][]', (isset($vars['actions']['controller'][$i]) ? $vars['actions']['controller'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_controller', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('actions[action][]', (isset($vars['actions']['action'][$i]) ? $vars['actions']['action'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_action', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('actions[name][]', (isset($vars['actions']['name'][$i]) ? $vars['actions']['name'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_name', true)], $disabled));?></td>
-                            <td><a href="#" class="manage action_row_remove"><?php $this->_('AdminPlugin.integrations.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminPlugin.integrations.heading_events');?> - <a id="events_more_info" href="#"><?php $this->_('AdminPlugin.integrations.heading_more_info');?></a></h3></div>
-            <div class="pad" id="events_info_text" style="display:none;">
-                <div class="empty_box"><?php $this->_('AdminPlugin.integrations.text_events_more_info');?></div>
-            </div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm event_row_add" href="#"><span><?php $this->_('AdminPlugin.integrations.event_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.integrations.event');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_event');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.event_callback');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_event_callback');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminPlugin.integrations.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['events']['event']) ? $vars['events']['event'] : false)) {
-                        $rows = count($vars['events']['event']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="event_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldText('events[event][]', (isset($vars['events']['event'][$i]) ? $vars['events']['event'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_event', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('events[callback][]', (isset($vars['events']['callback'][$i]) ? $vars['events']['callback'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_event_callback', true)], $disabled));?></td>
-                            <td><a href="#" class="manage event_row_remove"><?php $this->_('AdminPlugin.integrations.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="title_row"><h3><?php $this->_('AdminPlugin.integrations.heading_cards');?> - <a id="cards_more_info" href="#"><?php $this->_('AdminPlugin.integrations.heading_more_info');?></a></h3></div>
-            <div class="pad" id="cards_info_text" style="display:none;">
-                <div class="empty_box"><?php $this->_('AdminPlugin.integrations.text_cards_more_info');?></div>
-            </div>
-            <div class="pad">
-                <div class="links_row">
-                    <a class="btn btn-default pull-right btn-sm card_row_add" href="#"><span><?php $this->_('AdminPlugin.integrations.card_row_add');?></span></a>
-                </div>
-                <table class="table">
-                    <thead>
-                        <tr class="heading_row">
-                            <td><?php $this->_('AdminPlugin.integrations.level');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_name');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.card_callback');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_card_callback');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.label');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_label');?></div></span></td>
-                            <td><?php $this->_('AdminPlugin.integrations.link');?><span class="tooltip block"><?php $this->_('AppController.tooltip.text');?><div><?php $this->_('AdminPlugin.integrations.tooltip_link');?></div></span></td>
-                            <td class="last"><?php $this->_('AdminPlugin.integrations.text_options');?></td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    <?php
-                    $rows = 0;
-                    if ((isset($vars['cards']['level']) ? $vars['cards']['level'] : false)) {
-                        $rows = count($vars['cards']['level']);
-                    }
-                    for ($i = -1; $i < $rows; $i++) {
-                        $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
-                    ?>
-                        <tr class="card_row"<?php echo ($i >= 0 ? '' : ' style="display:none;"');?>>
-                            <td><?php $this->Form->fieldSelect('cards[level][]', (isset($card_levels) ? $card_levels : null), (isset($vars['cards']['level'][$i]) ? $vars['cards']['level'][$i] : null), array_merge(['class' => 'stretch'], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cards[callback][]', (isset($vars['cards']['callback'][$i]) ? $vars['cards']['callback'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_card_callback', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cards[label][]', (isset($vars['cards']['label'][$i]) ? $vars['cards']['label'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_label', true)], $disabled));?></td>
-                            <td><?php $this->Form->fieldText('cards[link][]', (isset($vars['cards']['link'][$i]) ? $vars['cards']['link'][$i] : null), array_merge(['class' => 'stretch', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_link', true)], $disabled));?></td>
-                            <td><a href="#" class="manage card_row_remove"><?php $this->_('AdminPlugin.integrations.text_remove');?></a></td>
-                        </tr>
-                    <?php
-                    }
-                    ?>
-                    </tbody>
-                </table>
-            </div>
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.integrations.features', true), ['class' => 'btn btn-primary pull-right']);?>
-            </div>
-        </div>
-        <?php
-        $this->Form->end();
-
-        $this->Widget->end();
-        ?>
+<?php /** @var View $this */ ?>
+
+<?php
+echo $message ?? null;
+
+$this->Widget->clear();
+$this->Widget->setStyleSheet($this->view_dir . 'css/styles.css');
+$this->Widget->setBodyWrapper(false);
+$this->Widget->create($this->_('AdminPlugin.index.boxtitle_extension_generator', true), ['id' => 'admin_plugin_integrations']);
+
+echo $progress_bar ?? null;
+
+$this->Form->create(null, ['class' => 'disable-on-submit']);
+?>
+
+<div class="card-body">
+    <!-- Actions -->
+    <h6 class="form-section-header">
+        <i class="bi bi-link-45deg me-2"></i><?php $this->_('AdminPlugin.integrations.heading_actions'); ?>
+        <a href="#" class="ms-2 text-decoration-none small" data-toggle-info="actions-info-text">
+            <i class="bi bi-info-circle"></i> <?php $this->_('AdminPlugin.integrations.heading_more_info'); ?>
+        </a>
+    </h6>
+
+    <div id="actions-info-text" class="info-box d-none mb-4">
+        <?php $this->_('AdminPlugin.integrations.text_actions_more_info'); ?>
+    </div>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm action-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.integrations.action_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="actions-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.location'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_location'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.controller'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_controller'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.action'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_action'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.name'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_name'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.integrations.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 0;
+                if (!empty($vars['actions']['name'])) {
+                    $rows = count($vars['actions']['name']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="action-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldSelect('actions[location][]', $action_locations ?? [], $vars['actions']['location'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('actions[controller][]', $vars['actions']['controller'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_controller', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('actions[action][]', $vars['actions']['action'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_action', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('actions[name][]', $vars['actions']['name'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_name', true)], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Events -->
+    <h6 class="form-section-header">
+        <i class="bi bi-lightning me-2"></i><?php $this->_('AdminPlugin.integrations.heading_events'); ?>
+        <a href="#" class="ms-2 text-decoration-none small" data-toggle-info="events-info-text">
+            <i class="bi bi-info-circle"></i> <?php $this->_('AdminPlugin.integrations.heading_more_info'); ?>
+        </a>
+    </h6>
+
+    <div id="events-info-text" class="info-box d-none mb-4">
+        <?php $this->_('AdminPlugin.integrations.text_events_more_info'); ?>
+    </div>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm event-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.integrations.event_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="events-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.event'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_event'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.event_callback'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_event_callback'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.integrations.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 0;
+                if (!empty($vars['events']['event'])) {
+                    $rows = count($vars['events']['event']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="event-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldText('events[event][]', $vars['events']['event'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_event', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('events[callback][]', $vars['events']['callback'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_event_callback', true)], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Cards -->
+    <h6 class="form-section-header">
+        <i class="bi bi-card-list me-2"></i><?php $this->_('AdminPlugin.integrations.heading_cards'); ?>
+        <a href="#" class="ms-2 text-decoration-none small" data-toggle-info="cards-info-text">
+            <i class="bi bi-info-circle"></i> <?php $this->_('AdminPlugin.integrations.heading_more_info'); ?>
+        </a>
+    </h6>
+
+    <div id="cards-info-text" class="info-box d-none mb-4">
+        <?php $this->_('AdminPlugin.integrations.text_cards_more_info'); ?>
+    </div>
+
+    <div class="d-flex justify-content-end mb-2">
+        <button type="button" class="btn btn-outline-primary btn-sm card-row-add">
+            <i class="bi bi-plus-lg me-1"></i><?php $this->_('AdminPlugin.integrations.card_row_add'); ?>
+        </button>
+    </div>
+
+    <div class="table-responsive mb-4">
+        <table class="table table-sm" id="cards-table">
+            <thead>
+                <tr>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.level'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_name'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.card_callback'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_card_callback'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.label'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_label'); ?>"></i>
+                    </th>
+                    <th>
+                        <?php $this->_('AdminPlugin.integrations.link'); ?>
+                        <i class="bi bi-question-circle text-muted ms-1" data-bs-toggle="tooltip" title="<?php $this->_('AdminPlugin.integrations.tooltip_link'); ?>"></i>
+                    </th>
+                    <th class="text-end" style="width: 80px;"><?php $this->_('AdminPlugin.integrations.text_options'); ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                $rows = 0;
+                if (!empty($vars['cards']['level'])) {
+                    $rows = count($vars['cards']['level']);
+                }
+                for ($i = -1; $i < $rows; $i++) :
+                    $disabled = ($i >= 0 ? [] : ['disabled' => 'disabled']);
+                    $hidden = $i < 0 ? 'style="display:none;"' : '';
+                ?>
+                    <tr class="card-row" <?php echo $hidden; ?>>
+                        <td>
+                            <?php $this->Form->fieldSelect('cards[level][]', $card_levels ?? [], $vars['cards']['level'][$i] ?? null, array_merge(['class' => 'form-select form-select-sm'], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cards[callback][]', $vars['cards']['callback'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_card_callback', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cards[label][]', $vars['cards']['label'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_label', true)], $disabled)); ?>
+                        </td>
+                        <td>
+                            <?php $this->Form->fieldText('cards[link][]', $vars['cards']['link'][$i] ?? null, array_merge(['class' => 'form-control form-control-sm', 'placeholder' => $this->_('AdminPlugin.integrations.placeholder_link', true)], $disabled)); ?>
+                        </td>
+                        <td class="text-end">
+                            <button type="button" class="btn btn-outline-danger btn-sm remove-row">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                <?php endfor; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<?php $this->Widget->footer(); ?>
+<div class="d-flex justify-content-end">
+    <?php
+    $this->Form->fieldSubmit('submit', $this->_('AdminPlugin.integrations.features', true), ['class' => 'btn btn-primary']);
+    ?>
+</div>
+
+<?php
+$this->Form->end();
+$this->Widget->end();
+?>
 
 <script>
-    $(document).ready(function() {
-        var field_types = ['action', 'event', 'card'];
-        field_types.forEach(function (field_type) {
-            $('.' + field_type + '_row_add').click(function() {
-                var fields = $('tr.' + field_type + '_row:first').clone(true);
-                // Enable input fileds
-                fields.find('input,textarea,select').removeAttr('disabled');
-                fields.show();
-                $('tr.' + field_type + '_row:last').after(fields);
-
-                return false;
-            });
-
-            $('.' + field_type + '_row_remove').click(function() {
-                $(this).closest('tr').remove();
-
-                return false;
-            });
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+            new bootstrap.Tooltip(el);
         });
-
-        $(this).blestaBindToggleEvent('#actions_more_info', '#actions_info_text');
-        $(this).blestaBindToggleEvent('#events_more_info', '#events_info_text');
-        $(this).blestaBindToggleEvent('#cards_more_info', '#cards_info_text');
-    });
+    }
+});
 </script>
+
+<script src="<?php echo $this->view_dir;?>js/extension-generator.js"></script>
diff --git a/views/default/css/styles.css b/views/default/css/styles.css
index c91935c..676120d 100644
--- a/views/default/css/styles.css
+++ b/views/default/css/styles.css
@@ -1,34 +1,131 @@
-/* Extension Generator plugin */
-.node-progress-container {
-    padding: 10px 10% 30px;
+/**
+ * Extension Generator - Custom Styles
+ * Bootstrap 5 / Paradigm Theme Compatible
+ */
+
+/* Extension Type Selection Cards */
+.extension-type-card {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 2px solid var(--border-color, #dee2e6);
+    background-color: var(--bg-secondary, #f8f9fa);
+}
+
+.extension-type-card:hover {
+    border-color: var(--accent-color, #0d6efd);
+    transform: translateY(-2px);
+}
+
+.extension-type-card.active {
+    border-color: var(--accent-color, #0d6efd);
+    background-color: rgba(var(--accent-color-rgb, 13, 110, 253), 0.05);
+}
+
+.extension-type-card .card-body {
+    padding: 1.5rem;
+}
+
+.extension-type-card .bi {
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+    display: block;
+}
+
+.extension-type-card h6 {
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+}
+
+.extension-type-card small {
+    font-size: 0.75rem;
+}
+
+/* Light theme overrides */
+[data-theme="light"] .extension-type-card {
+    border-color: #dee2e6;
+    background-color: #f8f9fa;
+}
+
+[data-theme="light"] .extension-type-card:hover,
+[data-theme="light"] .extension-type-card.active {
+    border-color: #0d6efd;
 }
 
-.node-progress-bar-container {
-    position: relative;
+[data-theme="light"] .extension-type-card.active {
+    background-color: rgba(13, 110, 253, 0.05);
 }
 
-.node-progress-bar {
-    display: inline-block;
-    width: 100%;
-    height: 3px;
-    border: 2px solid #c3c3c3;
+/* Dark theme overrides */
+[data-theme="dark"] .extension-type-card {
+    border-color: #495057;
+    background-color: #2b3035;
 }
 
-.node-progress-node-container {
-    position: absolute;
-    top: 0px;
+[data-theme="dark"] .extension-type-card:hover,
+[data-theme="dark"] .extension-type-card.active {
+    border-color: #0d6efd;
 }
 
-.node-progress-node {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-left: -10px;
-    border: 2px solid #a0a0a0;
-    border-radius: 15px;
-    background-color: white;
+[data-theme="dark"] .extension-type-card.active {
+    background-color: rgba(13, 110, 253, 0.1);
 }
 
-.node-progress-node-container p {
-    margin-left: -50%;
+/* Database table sections */
+.table-section {
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background-color: var(--bg-secondary, #f8f9fa);
+}
+
+[data-theme="dark"] .table-section {
+    border-color: #495057;
+    background-color: #2b3035;
+}
+
+/* Form improvements */
+.form-section-header .bi {
+    margin-right: 0.5rem;
+    color: var(--accent-color, #0d6efd);
+}
+
+/* Compact table inputs */
+.table .form-control-sm,
+.table .form-select-sm {
+    font-size: 0.8125rem;
+}
+
+/* Remove button styling */
+.btn-remove-row {
+    padding: 0.25rem 0.5rem;
+}
+
+/* Info box styling */
+.info-box {
+    background-color: var(--bg-tertiary, #e9ecef);
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+[data-theme="dark"] .info-box {
+    background-color: #343a40;
+}
+
+/* Responsive adjustments for wizard steps on mobile */
+@media (max-width: 576px) {
+    .form-wizard-step-label {
+        font-size: 0.75rem;
+    }
+
+    .form-wizard-step-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 0.875rem;
+    }
+
+    .form-wizard-step-line {
+        width: 40px;
+    }
 }
diff --git a/views/default/js/extension-generator.js b/views/default/js/extension-generator.js
new file mode 100644
index 0000000..ce95fbd
--- /dev/null
+++ b/views/default/js/extension-generator.js
@@ -0,0 +1,580 @@
+/**
+ * Extension Generator - Vanilla JS Utilities
+ * Bootstrap 5 / Paradigm Theme Compatible
+ */
+(function() {
+    'use strict';
+
+    var ExtensionGenerator = {
+        /**
+         * Initialize all dynamic row handlers
+         */
+        init: function() {
+            this.initDynamicRows();
+            this.initTypeSelection();
+            this.initLocationToggle();
+            this.initDatabaseTable();
+            this.initEncryptableCheckboxes();
+            this.initNameKeyRadios();
+            this.initColumnTypeHandlers();
+            this.initInfoToggles();
+            this.initModuleTypeToggle();
+            this.initStaticTldsToggle();
+            this.initTypeWarning();
+        },
+
+        /**
+         * Generic dynamic row handler using templates
+         * @param {string} containerSelector - Container element selector
+         * @param {string} templateId - Template element ID
+         * @param {string} addBtnSelector - Add button selector
+         * @param {string} removeBtnSelector - Remove button selector
+         * @param {number} minRows - Minimum rows to keep (default 0)
+         * @param {function} onAdd - Callback after adding row
+         * @param {function} onRemove - Callback after removing row
+         */
+        initDynamicRowHandler: function(options) {
+            var container = document.querySelector(options.containerSelector);
+            var template = document.getElementById(options.templateId);
+            var addBtn = document.querySelector(options.addBtnSelector);
+
+            if (!container || !addBtn) return;
+
+            var rowCounter = container.querySelectorAll(options.rowSelector || 'tr').length;
+            var minRows = options.minRows || 0;
+
+            // Add row handler
+            addBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+
+                var newRow;
+                if (template) {
+                    newRow = template.content.cloneNode(true).firstElementChild;
+                } else if (options.cloneSelector) {
+                    var source = container.querySelector(options.cloneSelector);
+                    if (!source) return;
+                    newRow = source.cloneNode(true);
+                    newRow.style.display = '';
+                    // Enable any disabled fields
+                    newRow.querySelectorAll('[disabled]').forEach(function(el) {
+                        el.removeAttribute('disabled');
+                    });
+                    // Clear values
+                    newRow.querySelectorAll('input[type="text"], textarea').forEach(function(el) {
+                        el.value = '';
+                    });
+                    newRow.querySelectorAll('select').forEach(function(el) {
+                        el.selectedIndex = 0;
+                    });
+                    newRow.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(function(el) {
+                        el.checked = false;
+                    });
+                }
+
+                if (!newRow) return;
+
+                // Update field names with new index if needed
+                if (options.indexedFields) {
+                    newRow.querySelectorAll('[name]').forEach(function(el) {
+                        el.name = el.name.replace(/\[\d*\]/, '[' + rowCounter + ']');
+                    });
+                }
+
+                container.appendChild(newRow);
+                rowCounter++;
+
+                if (options.onAdd) {
+                    options.onAdd(newRow);
+                }
+            });
+
+            // Remove row handler using event delegation
+            container.addEventListener('click', function(e) {
+                var removeBtn = e.target.closest(options.removeBtnSelector);
+                if (!removeBtn) return;
+
+                e.preventDefault();
+                var row = removeBtn.closest(options.rowSelector || 'tr');
+                var rows = container.querySelectorAll(options.rowSelector || 'tr');
+
+                // Check if visible rows > minRows
+                var visibleRows = Array.from(rows).filter(function(r) {
+                    return r.style.display !== 'none';
+                });
+
+                if (visibleRows.length > minRows && row) {
+                    row.remove();
+                    if (options.onRemove) {
+                        options.onRemove();
+                    }
+                }
+            });
+        },
+
+        /**
+         * Initialize all dynamic row sections
+         */
+        initDynamicRows: function() {
+            var self = this;
+
+            // Author rows (module, plugin, merchant, nonmerchant basic pages)
+            this.initDynamicRowHandler({
+                containerSelector: '#authors-table tbody',
+                addBtnSelector: '.author-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.author-row',
+                rowSelector: 'tr.author-row',
+                minRows: 1
+            });
+
+            // Module row fields
+            this.initDynamicRowHandler({
+                containerSelector: '#module-rows-table tbody',
+                addBtnSelector: '.module-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.module-row:first-child',
+                rowSelector: 'tr.module-row',
+                minRows: 1,
+                onRemove: function() {
+                    self.ensureNameKeySelected('module');
+                }
+            });
+
+            // Package fields
+            this.initDynamicRowHandler({
+                containerSelector: '#package-fields-table tbody',
+                addBtnSelector: '.package-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.package-row:first-child',
+                rowSelector: 'tr.package-row',
+                minRows: 0
+            });
+
+            // Service fields
+            this.initDynamicRowHandler({
+                containerSelector: '#service-fields-table tbody',
+                addBtnSelector: '.service-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.service-row:first-child',
+                rowSelector: 'tr.service-row',
+                minRows: 0
+            });
+
+            // Service tabs (module and plugin features)
+            this.initDynamicRowHandler({
+                containerSelector: '#service-tabs-table tbody',
+                addBtnSelector: '.service-tab-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.service-tab-row:first-child',
+                rowSelector: 'tr.service-tab-row',
+                minRows: 0
+            });
+
+            // Cron tasks
+            this.initDynamicRowHandler({
+                containerSelector: '#cron-tasks-table tbody',
+                addBtnSelector: '.cron-task-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.cron-task-row:first-child',
+                rowSelector: 'tr.cron-task-row',
+                minRows: 0
+            });
+
+            // Gateway fields
+            this.initDynamicRowHandler({
+                containerSelector: '#fields-table tbody',
+                addBtnSelector: '.field-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.field-row:first-child',
+                rowSelector: 'tr.field-row',
+                minRows: 0
+            });
+
+            // Plugin actions
+            this.initDynamicRowHandler({
+                containerSelector: '#actions-table tbody',
+                addBtnSelector: '.action-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.action-row:first-child',
+                rowSelector: 'tr.action-row',
+                minRows: 0
+            });
+
+            // Plugin events
+            this.initDynamicRowHandler({
+                containerSelector: '#events-table tbody',
+                addBtnSelector: '.event-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.event-row:first-child',
+                rowSelector: 'tr.event-row',
+                minRows: 0
+            });
+
+            // Plugin cards
+            this.initDynamicRowHandler({
+                containerSelector: '#cards-table tbody',
+                addBtnSelector: '.card-row-add',
+                removeBtnSelector: '.remove-row',
+                cloneSelector: 'tr.card-row:first-child',
+                rowSelector: 'tr.card-row',
+                minRows: 0
+            });
+        },
+
+        /**
+         * Initialize extension type card selection
+         */
+        initTypeSelection: function() {
+            var cards = document.querySelectorAll('.extension-type-card');
+            var hiddenInput = document.getElementById('extension-type-input');
+
+            if (!cards.length || !hiddenInput) return;
+
+            cards.forEach(function(card) {
+                card.addEventListener('click', function() {
+                    // Remove active from all cards
+                    cards.forEach(function(c) {
+                        c.classList.remove('active');
+                    });
+                    // Add active to clicked card
+                    card.classList.add('active');
+                    // Update hidden input
+                    hiddenInput.value = card.dataset.type;
+                });
+            });
+        },
+
+        /**
+         * Initialize location toggle for custom path
+         */
+        initLocationToggle: function() {
+            var locationSelect = document.getElementById('location');
+            var customPathSection = document.getElementById('custom-path-section');
+
+            if (!locationSelect || !customPathSection) return;
+
+            function toggleCustomPath() {
+                if (locationSelect.value === 'custom') {
+                    customPathSection.classList.remove('d-none');
+                } else {
+                    customPathSection.classList.add('d-none');
+                }
+            }
+
+            locationSelect.addEventListener('change', toggleCustomPath);
+            toggleCustomPath();
+        },
+
+        /**
+         * Initialize database table management for plugins
+         */
+        initDatabaseTable: function() {
+            var container = document.getElementById('database-tables');
+            var addTableBtn = document.querySelector('.table-row-add');
+
+            if (!container || !addTableBtn) return;
+
+            var self = this;
+            var tableCounter = container.querySelectorAll('.table-section').length;
+
+            // Add table handler
+            addTableBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+
+                var template = container.querySelector('.table-section[data-table="-1"]');
+                if (!template) return;
+
+                var newTable = template.cloneNode(true);
+                newTable.style.display = '';
+                tableCounter++;
+
+                // Update data attribute
+                newTable.dataset.table = tableCounter;
+
+                // Update field names
+                var html = newTable.innerHTML;
+                html = html.replace(/-1/g, tableCounter);
+                newTable.innerHTML = html;
+
+                // Enable fields
+                newTable.querySelectorAll('[disabled]').forEach(function(el) {
+                    el.removeAttribute('disabled');
+                });
+
+                container.appendChild(newTable);
+
+                // Initialize tooltips if available
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+                    newTable.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
+                        new bootstrap.Tooltip(el);
+                    });
+                }
+            });
+
+            // Event delegation for dynamic elements
+            container.addEventListener('click', function(e) {
+                // Remove table
+                if (e.target.closest('.table-row-remove')) {
+                    e.preventDefault();
+                    var tableSection = e.target.closest('.table-section');
+                    if (tableSection) {
+                        tableSection.remove();
+                    }
+                    return;
+                }
+
+                // Add column
+                if (e.target.closest('.column-row-add')) {
+                    e.preventDefault();
+                    var tableSection = e.target.closest('.table-section');
+                    var tbody = tableSection.querySelector('tbody');
+                    var lastRow = tbody.querySelector('tr.column-row:last-child');
+
+                    if (!lastRow) return;
+
+                    var newRow = lastRow.cloneNode(true);
+                    var colNum = parseInt(lastRow.dataset.column || 0) + 1;
+                    newRow.dataset.column = colNum;
+
+                    // Update field names
+                    var html = newRow.innerHTML;
+                    var tableNum = tableSection.dataset.table;
+                    html = html.replace(new RegExp('c' + (colNum - 1), 'g'), 'c' + colNum);
+                    newRow.innerHTML = html;
+
+                    // Clear values and enable fields
+                    newRow.querySelectorAll('input[type="text"], textarea').forEach(function(el) {
+                        el.value = '';
+                        el.removeAttribute('disabled');
+                    });
+                    newRow.querySelectorAll('select').forEach(function(el) {
+                        el.selectedIndex = 0;
+                        el.removeAttribute('disabled');
+                    });
+                    newRow.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(function(el) {
+                        el.checked = false;
+                        el.removeAttribute('disabled');
+                    });
+
+                    tbody.appendChild(newRow);
+                    return;
+                }
+
+                // Remove column
+                if (e.target.closest('.column-row-remove')) {
+                    e.preventDefault();
+                    var tbody = e.target.closest('tbody');
+                    var rows = tbody.querySelectorAll('tr.column-row');
+
+                    if (rows.length > 1) {
+                        e.target.closest('tr').remove();
+
+                        // Ensure primary key is selected
+                        var checkedPrimary = tbody.querySelector('.primary-key:checked');
+                        if (!checkedPrimary) {
+                            var lastPrimary = tbody.querySelector('tr:last-child .primary-key');
+                            if (lastPrimary) {
+                                lastPrimary.checked = true;
+                            }
+                        }
+                    }
+                    return;
+                }
+
+                // Primary key selection
+                if (e.target.closest('.primary-key')) {
+                    var tbody = e.target.closest('tbody');
+                    tbody.querySelectorAll('.primary-key').forEach(function(el) {
+                        el.checked = false;
+                    });
+                    e.target.checked = true;
+                }
+            });
+        },
+
+        /**
+         * Initialize encryptable checkbox handlers
+         */
+        initEncryptableCheckboxes: function() {
+            document.addEventListener('change', function(e) {
+                if (!e.target.classList.contains('encryptable-checkbox')) return;
+
+                var hiddenInput = e.target.closest('td').querySelector('.encryptable-value');
+                if (hiddenInput) {
+                    hiddenInput.value = e.target.checked ? 'true' : 'false';
+                }
+            });
+        },
+
+        /**
+         * Initialize name key radio handlers
+         */
+        initNameKeyRadios: function() {
+            document.addEventListener('click', function(e) {
+                if (!e.target.classList.contains('name-key-radio')) return;
+
+                var table = e.target.closest('table');
+                var fieldType = e.target.dataset.fieldType;
+
+                // Update all hidden inputs in this table
+                table.querySelectorAll('.name-key-value').forEach(function(el) {
+                    el.value = 'false';
+                });
+
+                // Set clicked one to true
+                var hiddenInput = e.target.closest('td').querySelector('.name-key-value');
+                if (hiddenInput) {
+                    hiddenInput.value = 'true';
+                }
+            });
+        },
+
+        /**
+         * Ensure at least one name key is selected
+         * @param {string} fieldType - Type of field (module, package, service)
+         */
+        ensureNameKeySelected: function(fieldType) {
+            var table = document.getElementById(fieldType + '-rows-table');
+            if (!table) return;
+
+            var checkedRadio = table.querySelector('.name-key-radio:checked');
+            if (!checkedRadio) {
+                var lastRadio = table.querySelector('tbody tr:last-child .name-key-radio');
+                if (lastRadio) {
+                    lastRadio.checked = true;
+                    var hiddenInput = lastRadio.closest('td').querySelector('.name-key-value');
+                    if (hiddenInput) {
+                        hiddenInput.value = 'true';
+                    }
+                }
+            }
+        },
+
+        /**
+         * Initialize column type change handlers for database tables
+         */
+        initColumnTypeHandlers: function() {
+            var defaultLengths = {
+                'INT': 10,
+                'TINYINT': 1,
+                'VARCHAR': 64,
+                'DATETIME': '',
+                'TEXT': '',
+                'ENUM': "'a','b','c'"
+            };
+            var noLengthTypes = ['DATETIME', 'TEXT'];
+
+            document.addEventListener('change', function(e) {
+                if (!e.target.classList.contains('column-type-select')) return;
+
+                var row = e.target.closest('tr');
+                var lengthInput = row.querySelector('.column-length');
+                var primaryInput = row.querySelector('.primary-key');
+                var type = e.target.value;
+
+                if (lengthInput) {
+                    lengthInput.value = defaultLengths[type] || '';
+                    lengthInput.disabled = noLengthTypes.indexOf(type) !== -1;
+                }
+
+                if (primaryInput) {
+                    primaryInput.disabled = noLengthTypes.indexOf(type) !== -1;
+                }
+            });
+        },
+
+        /**
+         * Initialize info section toggles
+         */
+        initInfoToggles: function() {
+            document.querySelectorAll('[data-toggle-info]').forEach(function(trigger) {
+                trigger.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    var targetId = trigger.dataset.toggleInfo;
+                    var target = document.getElementById(targetId);
+                    if (target) {
+                        target.classList.toggle('d-none');
+                    }
+                });
+            });
+        },
+
+        /**
+         * Initialize module type toggle for TLDs section
+         */
+        initModuleTypeToggle: function() {
+            var moduleTypeSelect = document.getElementById('module_type');
+            var tldsSection = document.getElementById('static-tlds-section');
+
+            if (!moduleTypeSelect || !tldsSection) return;
+
+            function toggleTldsSection() {
+                if (moduleTypeSelect.value === 'registrar') {
+                    tldsSection.classList.remove('d-none');
+                } else {
+                    tldsSection.classList.add('d-none');
+                }
+            }
+
+            moduleTypeSelect.addEventListener('change', toggleTldsSection);
+            toggleTldsSection();
+        },
+
+        /**
+         * Initialize static TLDs checkbox toggle
+         */
+        initStaticTldsToggle: function() {
+            var staticTldsCheckbox = document.getElementById('static_tlds');
+            var tldsFields = document.getElementById('static-tlds-fields');
+
+            if (!staticTldsCheckbox || !tldsFields) return;
+
+            function toggleTldsFields() {
+                if (staticTldsCheckbox.checked) {
+                    tldsFields.classList.remove('d-none');
+                } else {
+                    tldsFields.classList.add('d-none');
+                }
+            }
+
+            staticTldsCheckbox.addEventListener('change', toggleTldsFields);
+            toggleTldsFields();
+        },
+
+        /**
+         * Initialize type change warning
+         */
+        initTypeWarning: function() {
+            var typeCards = document.querySelectorAll('.extension-type-card');
+            var typeWarning = document.getElementById('type-warning');
+            var originalType = document.getElementById('original-type');
+
+            if (!typeCards.length || !typeWarning || !originalType) return;
+
+            typeCards.forEach(function(card) {
+                card.addEventListener('click', function() {
+                    var currentType = card.dataset.type;
+                    var savedType = originalType.value;
+
+                    if (savedType && currentType !== savedType) {
+                        typeWarning.classList.remove('d-none');
+                    } else {
+                        typeWarning.classList.add('d-none');
+                    }
+                });
+            });
+        }
+    };
+
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            ExtensionGenerator.init();
+        });
+    } else {
+        ExtensionGenerator.init();
+    }
+
+    // Expose globally if needed
+    window.ExtensionGenerator = ExtensionGenerator;
+})();
diff --git a/views/default/partial_progress_bar.pdt b/views/default/partial_progress_bar.pdt
index 802a22b..1a982e3 100644
--- a/views/default/partial_progress_bar.pdt
+++ b/views/default/partial_progress_bar.pdt
@@ -1,26 +1,35 @@
-        <?php
-        $node_count = count((isset($nodes) ? $nodes : []));
-        $step = 0;
-        ?>
-        <div class="node-progress-container">
-            <div class="node-progress-bar-container">
-                <div class="node-progress-bar" style="background-image: linear-gradient(90deg, #a0f56c <?php echo ($page_step / ($node_count - 1) * 100); ?>%, white 1%);"></div>
-                    <?php
-                    foreach ($nodes as $form_step => $node) {
-                    ?>
-                        <div class="node-progress-node-container" style="left: <?php echo $step / ($node_count - 1) * 100; ?>%;" >
-                            <?php $node_color = $step <= $page_step ? '#a0f56c' : 'white'; ?>
-                            <div>
-                                <a href="<?php echo $this->base_uri . 'plugin/extension_generator/admin_' . $form_step . '/' . (isset($extension->id) ? $this->Html->safe($extension->id) : null) . '/';?>">
-                                    <div class="node-progress-node" style="background-color: <?php echo $node_color;?>;"></div>
-                                </a>
-                            </div>
-                            <p><?php echo $node;?></p>
-                        </div>
-                    <?php
-                        $step++;
-                    }
-                    ?>
+<?php /** @var View $this */ ?>
+
+<?php
+$node_count = count($nodes ?? []);
+$step = 0;
+?>
+<div class="form-wizard-steps my-4">
+    <?php foreach ($nodes as $form_step => $node) : ?>
+        <div class="form-wizard-step <?php echo $step < $page_step ? 'completed' : ($step == $page_step ? 'active' : ''); ?>">
+            <?php if ($step < $page_step) : ?>
+                <a href="<?php echo $this->Html->safe($this->base_uri . 'plugin/extension_generator/admin_' . $form_step . '/' . ($extension->id ?? '') . '/'); ?>">
+                    <div class="form-wizard-step-icon">
+                        <i class="bi bi-check"></i>
+                    </div>
+                </a>
+            <?php elseif ($step == $page_step) : ?>
+                <div class="form-wizard-step-icon">
+                    <?php echo $step + 1; ?>
                 </div>
-            </div>
+            <?php else : ?>
+                <div class="form-wizard-step-icon">
+                    <?php echo $step + 1; ?>
+                </div>
+            <?php endif; ?>
+            <div class="form-wizard-step-label"><?php echo $this->Html->safe($node); ?></div>
         </div>
+        <?php if ($step < $node_count - 1) : ?>
+            <div class="form-wizard-step-line <?php echo $step < $page_step ? 'completed' : ''; ?>"></div>
+        <?php endif; ?>
+    <?php
+        $step++;
+    endforeach;
+    ?>
+</div>
+<hr>