diff --git a/src/aiidalab_qe_vibroscopy/app/__init__.py b/src/aiidalab_qe_vibroscopy/app/__init__.py
index 6d9e76b..e77ed16 100644
--- a/src/aiidalab_qe_vibroscopy/app/__init__.py
+++ b/src/aiidalab_qe_vibroscopy/app/__init__.py
@@ -2,17 +2,12 @@
 
 from aiidalab_qe_vibroscopy.app.model import VibroConfigurationSettingsModel
 from aiidalab_qe_vibroscopy.app.settings import VibroConfigurationSettingPanel
+from aiidalab_qe_vibroscopy.app.code import (
+    VibroResourceSettingsModel,
+    VibroResourcesSettingsPanel,
+)
 
-
-# from aiidalab_qe_vibroscopy.app.settings import Setting
 from aiidalab_qe_vibroscopy.app.workchain import workchain_and_builder
-# from aiidalab_qe_vibroscopy.app.result import Result
-# from aiidalab_qe.common.panel import OutlinePanel
-
-from aiidalab_qe.common.widgets import (
-    QEAppComputationalResourcesWidget,
-    PwCodeResourceSetupWidget,
-)
 
 
 class VibroPluginOutline(PluginOutline):
@@ -25,33 +20,9 @@ class VibroPluginOutline(PluginOutline):
         "panel": VibroConfigurationSettingPanel,
         "model": VibroConfigurationSettingsModel,
     },
+    "code": {
+        "panel": VibroResourcesSettingsPanel,
+        "model": VibroResourceSettingsModel,
+    },
     "workchain": workchain_and_builder,
 }
-
-PhononWorkChainPwCode = PwCodeResourceSetupWidget(
-    description="pw.x for phonons",  # code for the PhononWorkChain workflow",
-    default_calc_job_plugin="quantumespresso.pw",
-)
-
-# The finite electric field does not support npools (does not work with npools>1), so we just set it as QEAppComputationalResourcesWidget
-DielectricWorkChainPwCode = QEAppComputationalResourcesWidget(
-    description="pw.x for dielectric",  # code for the DielectricWorChain workflow",
-    default_calc_job_plugin="quantumespresso.pw",
-)
-
-PhonopyCalculationCode = QEAppComputationalResourcesWidget(
-    description="phonopy",  # code for the PhonopyCalculation calcjob",
-    default_calc_job_plugin="phonopy.phonopy",
-)
-
-# property = {
-#     "outline": Outline,
-#     "code": {
-#         "phonon": PhononWorkChainPwCode,
-#         "dielectric": DielectricWorkChainPwCode,
-#         "phonopy": PhonopyCalculationCode,
-#     },
-#     "setting": Setting,
-#     "workchain": workchain_and_builder,
-#     "result": Result,
-# }
diff --git a/src/aiidalab_qe_vibroscopy/app/code.py b/src/aiidalab_qe_vibroscopy/app/code.py
new file mode 100644
index 0000000..53574d6
--- /dev/null
+++ b/src/aiidalab_qe_vibroscopy/app/code.py
@@ -0,0 +1,29 @@
+from aiidalab_qe.common.code.model import CodeModel, PwCodeModel
+from aiidalab_qe.common.panel import ResourceSettingsModel, ResourceSettingsPanel
+
+
+class VibroResourceSettingsModel(ResourceSettingsModel):
+    """Resource settings for the vibroscopy calculations."""
+
+    codes = {
+        "phonon": PwCodeModel(
+            description="pw.x for phonons",
+            default_calc_job_plugin="quantumespresso.pw",
+        ),
+        "dielectric": PwCodeModel(
+            description="pw.x for dielectric",
+            default_calc_job_plugin="quantumespresso.pw",
+        ),
+        "phonopy": CodeModel(
+            name="phonopy",
+            description="phonopy",
+            default_calc_job_plugin="phonopy.phonopy",
+        ),
+    }
+
+
+class VibroResourcesSettingsPanel(ResourceSettingsPanel[VibroResourceSettingsModel]):
+    """Panel for the resource settings for the vibroscopy calculations."""
+
+    title = "Vibronic"
+    identifier = identifier = "vibronic"