diff --git a/lib/models/stateful_wrapper.dart b/lib/models/stateful_wrapper.dart
deleted file mode 100644
index 3ce7df0..0000000
--- a/lib/models/stateful_wrapper.dart
+++ /dev/null
@@ -1,23 +0,0 @@
-import 'package:flutter/material.dart';
-
-class StatefulWrapper extends StatefulWidget {
-  final Function onInit;
-  final Widget child;
-  const StatefulWrapper({Key? key, required this.onInit, required this.child})
-      : super(key: key);
-  @override
-  StatefulWrapperState createState() => StatefulWrapperState();
-}
-
-class StatefulWrapperState extends State<StatefulWrapper> {
-  @override
-  void initState() {
-    widget.onInit();
-    super.initState();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return widget.child;
-  }
-}
diff --git a/lib/providers/my_wallets.dart b/lib/providers/my_wallets.dart
index e17c295..4bb07e4 100644
--- a/lib/providers/my_wallets.dart
+++ b/lib/providers/my_wallets.dart
@@ -4,7 +4,7 @@ import 'dart:async';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:provider/provider.dart';
 
 class MyWalletsProvider with ChangeNotifier {
diff --git a/lib/providers/wallet_options.dart b/lib/providers/wallet_options.dart
index 7d03ce9..aa68aee 100644
--- a/lib/providers/wallet_options.dart
+++ b/lib/providers/wallet_options.dart
@@ -11,7 +11,7 @@ import 'package:gecko/providers/duniter_indexer.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/transaction_in_progress.dart';
 import 'package:image_picker/image_picker.dart';
diff --git a/lib/screens/common_elements.dart b/lib/screens/common_elements.dart
deleted file mode 100644
index 54c0f76..0000000
--- a/lib/screens/common_elements.dart
+++ /dev/null
@@ -1,442 +0,0 @@
-import 'package:dots_indicator/dots_indicator.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_markdown/flutter_markdown.dart';
-import 'package:gecko/globals.dart';
-import 'package:gecko/models/widgets_keys.dart';
-import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:provider/provider.dart';
-
-class CommonElements {
-  // Exemple de Widget
-  Widget exemple(String data) {
-    return const Text('Coucou');
-  }
-
-  Widget buildImage(String assetName,
-      [double boxHeight = 440, double imageWidth = 350]) {
-    return Container(
-        padding: const EdgeInsets.all(0),
-        width: 440,
-        height: isTall ? boxHeight : boxHeight * 0.9,
-        decoration: BoxDecoration(
-            gradient: const LinearGradient(
-              begin: Alignment.topLeft,
-              end: Alignment.bottomRight,
-              colors: [
-                Color(0xffd2d4cf),
-                Color(0xffeaeae7),
-              ],
-            ),
-            border: Border.all(color: Colors.grey[900]!)),
-        child: Image.asset('assets/onBoarding/$assetName', width: imageWidth));
-  }
-
-  Widget buildText(String text, [double size = 20, bool isMd = false]) {
-    final mdStyle = MarkdownStyleSheet(
-      p: TextStyle(
-          fontSize: isTall ? size : size * 0.9,
-          color: Colors.black,
-          letterSpacing: 0.3),
-      textAlign: WrapAlignment.spaceBetween,
-    );
-
-    return Container(
-      padding: const EdgeInsets.all(12),
-      width: 440,
-      decoration: BoxDecoration(
-          color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
-      child: isMd
-          ? MarkdownBody(data: text, styleSheet: mdStyle)
-          : Text(text,
-              textAlign: TextAlign.justify,
-              style: TextStyle(
-                  fontSize: isTall ? size : size * 0.9,
-                  color: Colors.black,
-                  letterSpacing: 0.3)),
-    );
-  }
-
-  Widget nextButton(
-      BuildContext context, String text, nextScreen, bool isFast) {
-    return SizedBox(
-      width: 380 * ratio,
-      height: 60 * ratio,
-      child: ElevatedButton(
-        key: keyGoNext,
-        style: ElevatedButton.styleFrom(
-          foregroundColor: Colors.white, backgroundColor: orangeC,
-          elevation: 4, // foreground
-        ),
-        onPressed: () {
-          Navigator.push(
-              context, FaderTransition(page: nextScreen, isFast: isFast));
-        },
-        child: Text(
-          text,
-          style: TextStyle(fontSize: 23 * ratio, fontWeight: FontWeight.w600),
-        ),
-      ),
-    );
-  }
-
-  Widget buildProgressBar(double pagePosition) {
-    return DotsIndicator(
-      dotsCount: 10,
-      position: pagePosition,
-      decorator: DotsDecorator(
-        spacing: const EdgeInsets.symmetric(horizontal: 10),
-        color: Colors.grey[300]!, // Inactive color
-        activeColor: orangeC,
-      ),
-    );
-  }
-
-  Widget infoIntro(
-    BuildContext context,
-    String text,
-    String assetName,
-    String buttonText,
-    nextScreen,
-    double pagePosition, {
-    bool isMd = false,
-    bool isFast = false,
-    double boxHeight = 440,
-    double imageWidth = 350,
-    double textSize = 20,
-  }) {
-    return Column(children: <Widget>[
-      SizedBox(height: isTall ? 40 : 20),
-      buildProgressBar(pagePosition),
-      SizedBox(height: isTall ? 40 : 20),
-
-      buildText(text, textSize, isMd),
-
-      buildImage(assetName, boxHeight, imageWidth),
-      Expanded(
-        child: Align(
-          alignment: Alignment.bottomCenter,
-          child: nextButton(context, buttonText, nextScreen, false),
-        ),
-      ),
-      // const SizedBox(height: 40),
-      SizedBox(height: isTall ? 40 : 20),
-    ]);
-  }
-
-  Widget roundButton(
-    AssetImage image,
-    ontap,
-    isAsync,
-    double imgHight,
-    EdgeInsets padding,
-  ) {
-    return Container(
-      decoration: const BoxDecoration(
-        shape: BoxShape.circle,
-        color: Colors.white,
-        boxShadow: [
-          BoxShadow(
-              color: Colors.grey,
-              blurRadius: 4.0,
-              offset: Offset(2.0, 2.5),
-              spreadRadius: 0.5)
-        ],
-      ),
-      child: ClipOval(
-        child: Material(
-          color: const Color(0xffFFD58D), // button color
-          child: InkWell(
-              splashColor: orangeC, // inkwell color
-              child: Padding(
-                  padding: padding,
-                  child: Image(image: image, height: imgHight)),
-              onTap: () async {
-                await ontap;
-              }),
-        ),
-      ),
-    );
-  }
-
-  Widget offlineInfo(BuildContext context) {
-    final screenWidth = MediaQuery.of(homeContext).size.width;
-    return Consumer<SubstrateSdk>(builder: (context, sub, _) {
-      return Visibility(
-        visible: !sub.nodeConnected,
-        child: Positioned(
-          top: 0,
-          child: Container(
-              height: 30,
-              width: screenWidth,
-              color: Colors.grey[800],
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(
-                    'youAreOffline'.tr(),
-                    style: TextStyle(color: Colors.grey[50]),
-                    textAlign: TextAlign.center,
-                  ),
-                ],
-              )),
-        ),
-      );
-    });
-  }
-}
-
-class SmoothTransition extends PageRouteBuilder {
-  final Widget page;
-  SmoothTransition({required this.page})
-      : super(
-          pageBuilder: (
-            BuildContext context,
-            Animation<double> animation,
-            Animation<double> secondaryAnimation,
-          ) =>
-              TweenAnimationBuilder(
-            duration: const Duration(seconds: 5),
-            tween: Tween(begin: 200, end: 200),
-            builder: (BuildContext context, dynamic value, Widget? child) {
-              return page;
-            },
-          ),
-        );
-}
-
-class FaderTransition extends PageRouteBuilder {
-  final Widget page;
-  final bool isFast;
-
-  FaderTransition({required this.page, required this.isFast})
-      : super(
-          pageBuilder: (
-            BuildContext context,
-            Animation<double> animation,
-            Animation<double> secondaryAnimation,
-          ) =>
-              page,
-          transitionsBuilder: (
-            BuildContext context,
-            Animation<double> animation,
-            Animation<double> secondaryAnimation,
-            Widget child,
-          ) =>
-              FadeTransition(
-            opacity:
-                Tween(begin: 0.0, end: isFast ? 3.0 : 1.0).animate(animation),
-            child: child,
-          ),
-        );
-}
-
-Future<bool?> confirmPopup(BuildContext context, String title) async {
-  return showDialog<bool>(
-    context: context,
-    barrierDismissible: true, // user must tap button!
-    builder: (BuildContext context) {
-      return AlertDialog(
-        backgroundColor: backgroundColor,
-        content: Text(
-          title,
-          textAlign: TextAlign.center,
-          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
-        ),
-        actions: <Widget>[
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              TextButton(
-                key: keyConfirm,
-                child: Text(
-                  "yes".tr(),
-                  style: const TextStyle(
-                    fontSize: 21,
-                    color: Color(0xffD80000),
-                  ),
-                ),
-                onPressed: () {
-                  Navigator.pop(context, true);
-                },
-              ),
-              const SizedBox(width: 20),
-              TextButton(
-                child: Text(
-                  "no".tr(),
-                  style: const TextStyle(fontSize: 21),
-                ),
-                onPressed: () {
-                  Navigator.pop(context, false);
-                },
-              ),
-              const SizedBox(height: 120)
-            ],
-          )
-        ],
-      );
-    },
-  );
-}
-
-Future<bool?> confirmPopupCertification(BuildContext context, String question1,
-    String username, String question2, String address) async {
-  return showDialog<bool>(
-    context: context,
-    barrierDismissible: true,
-    builder: (BuildContext context) {
-      return AlertDialog(
-        // actionsPadding: const EdgeInsets.all(0.0),
-        backgroundColor: backgroundColor,
-        content: SizedBox(
-          height: 240,
-          child: Column(
-            children: [
-              const SizedBox(height: 15),
-              Text(
-                question1,
-                textAlign: TextAlign.center,
-                style:
-                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
-              ),
-              const SizedBox(height: 20),
-              Text(
-                username,
-                textAlign: TextAlign.center,
-                style:
-                    const TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
-              ),
-              const SizedBox(height: 20),
-              Text(
-                question2,
-                textAlign: TextAlign.center,
-                style:
-                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
-              ),
-              const SizedBox(height: 20),
-              Text(
-                address,
-                textAlign: TextAlign.center,
-                style:
-                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
-              ),
-              const SizedBox(height: 20),
-              const Text(
-                '?',
-                textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
-              ),
-            ],
-          ),
-        ),
-        actions: <Widget>[
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              TextButton(
-                key: keyConfirm,
-                child: Text(
-                  "yes".tr(),
-                  style: const TextStyle(
-                    fontSize: 25,
-                    color: Color(0xffD80000),
-                  ),
-                ),
-                onPressed: () {
-                  Navigator.pop(context, true);
-                },
-              ),
-              const SizedBox(width: 35),
-              TextButton(
-                child: Text(
-                  "no".tr(),
-                  style: const TextStyle(fontSize: 25),
-                ),
-                onPressed: () {
-                  Navigator.pop(context, false);
-                },
-              ),
-              const SizedBox(height: 120)
-            ],
-          )
-        ],
-      );
-    },
-  );
-}
-
-Future<void> infoPopup(BuildContext context, String title) async {
-  return showDialog<void>(
-    context: context,
-    barrierDismissible: true, // user must tap button!
-    builder: (BuildContext context) {
-      return AlertDialog(
-        backgroundColor: backgroundColor,
-        content: Text(
-          title,
-          textAlign: TextAlign.center,
-          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
-        ),
-        actions: <Widget>[
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              TextButton(
-                key: keyInfoPopup,
-                child: const Text(
-                  "D'accord",
-                  style: TextStyle(
-                    fontSize: 21,
-                    color: Color(0xffD80000),
-                  ),
-                ),
-                onPressed: () {
-                  Navigator.pop(context, true);
-                },
-              ),
-            ],
-          )
-        ],
-      );
-    },
-  );
-}
-
-bool isAddress(address) {
-  final RegExp regExp = RegExp(
-    r'^[a-zA-Z0-9]+$',
-    caseSensitive: false,
-    multiLine: false,
-  );
-
-  if (regExp.hasMatch(address) == true &&
-      address.length > 45 &&
-      address.length < 52) {
-    log.d("C'est une adresse !");
-
-    return true;
-  } else {
-    return false;
-  }
-}
-
-// Widget geckoAppBar() {
-//   return AppBar(
-//     toolbarHeight: 60 * ratio,
-//     elevation: 0,
-//     leading: IconButton(
-//         icon: const Icon(Icons.arrow_back, color: Colors.black),
-//         onPressed: () {
-//           _walletOptions.isEditing = false;
-//           _walletOptions.isBalanceBlur = false;
-//           Navigator.pop(context);
-//         }),
-//     title: SizedBox(
-//       height: 22,
-//       child: Consumer<WalletOptionsProvider>(
-//           builder: (context, walletProvider, _) {
-//         return Text(_walletOptions.nameController.text);
-//       }),
-//     ),
-//   );
-// }
diff --git a/lib/screens/home.dart b/lib/screens/home.dart
index 2f0a059..d5abf50 100644
--- a/lib/screens/home.dart
+++ b/lib/screens/home.dart
@@ -15,8 +15,8 @@ import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/models/wallet_data.dart';
-import 'package:gecko/widgets/animated_text.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/animated_text.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:gecko/screens/myWallets/restore_chest.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/myWallets/wallets_home.dart';
diff --git a/lib/screens/myWallets/change_pin.dart b/lib/screens/myWallets/change_pin.dart
index 76d3d60..aa21ba1 100644
--- a/lib/screens/myWallets/change_pin.dart
+++ b/lib/screens/myWallets/change_pin.dart
@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import 'package:durt/durt.dart';
 
 import 'package:gecko/globals.dart';
-import 'package:gecko/models/stateful_wrapper.dart';
 import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
@@ -13,7 +12,7 @@ import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 
 import 'package:provider/provider.dart';
 
-class ChangePinScreen extends StatelessWidget with ChangeNotifier {
+class ChangePinScreen extends StatefulWidget with ChangeNotifier {
   ChangePinScreen(
       {Key? keyMyWallets,
       required this.walletName,
@@ -22,8 +21,19 @@ class ChangePinScreen extends StatelessWidget with ChangeNotifier {
   final String? walletName;
   final MyWalletsProvider walletProvider;
 
+  @override
+  State<ChangePinScreen> createState() => _ChangePinScreenState();
+}
+
+class _ChangePinScreenState extends State<ChangePinScreen> {
   final TextEditingController newPin = TextEditingController();
 
+  @override
+  void initState() {
+    newPin.text = randomSecretCode(pinLength);
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     final sub = Provider.of<SubstrateSdk>(context, listen: false);
@@ -48,18 +58,12 @@ class ChangePinScreen extends StatelessWidget with ChangeNotifier {
               }),
           title: SizedBox(
             height: 22,
-            child: Text(walletName!),
+            child: Text(widget.walletName!),
           ),
         ),
         body: Center(
           child: SafeArea(
             child: Column(children: <Widget>[
-              StatefulWrapper(
-                onInit: () {
-                  newPin.text = randomSecretCode(pinLength);
-                },
-                child: Container(),
-              ),
               const SizedBox(height: 80),
               Text(
                 'choosePassword'.tr(),
@@ -118,8 +122,8 @@ class ChangePinScreen extends StatelessWidget with ChangeNotifier {
                     }
                     if (pin != null || myWalletProvider.pinCode != '') {
                       await sub.changePassword(context, defaultWallet.address,
-                          walletProvider.pinCode, newPin.text);
-                      walletProvider.pinCode = newPin.text;
+                          widget.walletProvider.pinCode, newPin.text);
+                      widget.walletProvider.pinCode = newPin.text;
                       newPin.text = '';
                       Navigator.pop(context);
                     }
diff --git a/lib/screens/myWallets/chest_options.dart b/lib/screens/myWallets/chest_options.dart
index cb92f0e..f44730c 100644
--- a/lib/screens/myWallets/chest_options.dart
+++ b/lib/screens/myWallets/chest_options.dart
@@ -10,11 +10,11 @@ import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/chest_provider.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/myWallets/custom_derivations.dart';
 import 'package:gecko/screens/myWallets/show_seed.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/widgets/bottom_app_bar.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:provider/provider.dart';
 
 class ChestOptions extends StatelessWidget {
@@ -211,7 +211,7 @@ class ChestOptions extends StatelessWidget {
             ]),
           ),
         ),
-        CommonElements().offlineInfo(context),
+        const OfflineInfo(),
       ]),
     );
   }
diff --git a/lib/screens/myWallets/manage_membership.dart b/lib/screens/myWallets/manage_membership.dart
index 65db2e7..ac94160 100644
--- a/lib/screens/myWallets/manage_membership.dart
+++ b/lib/screens/myWallets/manage_membership.dart
@@ -8,7 +8,7 @@ import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:gecko/screens/myWallets/migrate_identity.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/transaction_in_progress.dart';
diff --git a/lib/screens/myWallets/restore_chest.dart b/lib/screens/myWallets/restore_chest.dart
index c7a3a8f..d50e7ea 100644
--- a/lib/screens/myWallets/restore_chest.dart
+++ b/lib/screens/myWallets/restore_chest.dart
@@ -6,9 +6,10 @@ import 'package:flutter/material.dart';
 import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/generate_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/7.dart';
 import 'package:gecko/screens/onBoarding/9.dart';
+import 'package:gecko/widgets/commons/fader_transition.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:provider/provider.dart';
 // import 'package:gecko/models/home.dart';
 // import 'package:provider/provider.dart';
@@ -155,7 +156,7 @@ class RestoreChest extends StatelessWidget {
                   )
                 ])
             ]),
-            CommonElements().offlineInfo(context),
+            const OfflineInfo(),
           ]),
         ),
       ),
diff --git a/lib/screens/myWallets/show_seed.dart b/lib/screens/myWallets/show_seed.dart
index 61d532b..e58c383 100644
--- a/lib/screens/myWallets/show_seed.dart
+++ b/lib/screens/myWallets/show_seed.dart
@@ -8,7 +8,7 @@ import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 import 'package:pdf/pdf.dart';
 import 'package:printing/printing.dart';
 import 'package:provider/provider.dart';
@@ -27,8 +27,6 @@ class ShowSeed extends StatelessWidget {
   Widget build(BuildContext context) {
     final myWalletProvider =
         Provider.of<MyWalletsProvider>(context, listen: false);
-    CommonElements common = CommonElements();
-
     final sub = Provider.of<SubstrateSdk>(context, listen: false);
 
     WalletData defaultWallet = myWalletProvider.getDefaultWallet();
@@ -66,7 +64,7 @@ class ShowSeed extends StatelessWidget {
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Column(children: [
-                          common.buildText('keepYourMnemonicSecret'.tr()),
+                          BuildText(text: 'keepYourMnemonicSecret'.tr()),
                           SizedBox(height: 35 * ratio),
                           sentanceArray(context, seed.data!.split(' ')),
                           const SizedBox(height: 20),
diff --git a/lib/screens/myWallets/wallet_options.dart b/lib/screens/myWallets/wallet_options.dart
index 55e7885..ca812c1 100644
--- a/lib/screens/myWallets/wallet_options.dart
+++ b/lib/screens/myWallets/wallet_options.dart
@@ -12,13 +12,13 @@ import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:gecko/providers/wallet_options.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:gecko/screens/certifications.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/activity.dart';
 import 'package:gecko/screens/myWallets/manage_membership.dart';
 import 'package:gecko/screens/qrcode_fullscreen.dart';
 import 'package:gecko/widgets/balance.dart';
 import 'package:gecko/widgets/bottom_app_bar.dart';
 import 'package:gecko/widgets/certifications.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:gecko/widgets/idty_status.dart';
 import 'package:gecko/widgets/name_by_address.dart';
 import 'package:gecko/widgets/page_route_no_transition.dart';
@@ -289,7 +289,7 @@ class WalletOptions extends StatelessWidget {
               ]),
             ),
           ),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/myWallets/wallets_home.dart b/lib/screens/myWallets/wallets_home.dart
index 492666d..836fd30 100644
--- a/lib/screens/myWallets/wallets_home.dart
+++ b/lib/screens/myWallets/wallets_home.dart
@@ -12,7 +12,6 @@ import 'package:gecko/models/wallet_data.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:gecko/providers/wallet_options.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/myWallets/chest_options.dart';
 import 'package:gecko/screens/myWallets/import_g1_v1.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
@@ -20,6 +19,8 @@ import 'package:gecko/screens/myWallets/wallet_options.dart';
 import 'package:gecko/screens/wallet_view.dart';
 import 'package:gecko/widgets/balance.dart';
 import 'package:gecko/widgets/bottom_app_bar.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
+import 'package:gecko/widgets/commons/smooth_transition.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:truncate/truncate.dart';
@@ -78,7 +79,7 @@ class WalletsHome extends StatelessWidget {
         body: SafeArea(
           child: Stack(children: [
             myWalletsTiles(context, currentChestNumber),
-            CommonElements().offlineInfo(context),
+            const OfflineInfo(),
           ]),
         ),
       ),
diff --git a/lib/screens/my_contacts.dart b/lib/screens/my_contacts.dart
index c3556fb..0d12ac6 100644
--- a/lib/screens/my_contacts.dart
+++ b/lib/screens/my_contacts.dart
@@ -4,8 +4,8 @@ import 'package:gecko/globals.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/providers/duniter_indexer.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/widgets/bottom_app_bar.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:gecko/widgets/contacts_list.dart';
 import 'package:provider/provider.dart';
 
@@ -44,7 +44,7 @@ class ContactsScreen extends StatelessWidget {
               avatarSize: avatarSize,
               walletsProfilesClass: walletsProfilesClass,
               duniterIndexer: duniterIndexer),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/1.dart b/lib/screens/onBoarding/1.dart
index 281c74a..795db64 100644
--- a/lib/screens/onBoarding/1.dart
+++ b/lib/screens/onBoarding/1.dart
@@ -3,15 +3,15 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/2.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepOne extends StatelessWidget {
   const OnboardingStepOne({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -27,16 +27,15 @@ class OnboardingStepOne extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(
-            context,
-            'geckoGenerateYourWalletFromMnemonic'.tr(),
-            'fabrication-de-portefeuille.png',
-            '>',
-            const OnboardingStepTwo(),
-            0,
+          InfoIntro(
+            text: 'geckoGenerateYourWalletFromMnemonic'.tr(),
+            assetName: 'fabrication-de-portefeuille.png',
+            buttonText: '>',
+            nextScreen: const OnboardingStepTwo(),
+            pagePosition: 0,
             isMd: true,
           ),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/10.dart b/lib/screens/onBoarding/10.dart
index a37825b..337132a 100644
--- a/lib/screens/onBoarding/10.dart
+++ b/lib/screens/onBoarding/10.dart
@@ -13,8 +13,11 @@ import 'package:gecko/providers/generate_wallets.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:gecko/providers/wallet_options.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_progress_bar.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 import 'package:gecko/screens/onBoarding/11_congratulations.dart';
+import 'package:gecko/widgets/commons/fader_transition.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:pin_code_fields/pin_code_fields.dart';
 import 'package:provider/provider.dart';
 
@@ -37,7 +40,6 @@ class OnboardingStepTen extends StatelessWidget {
     final sub = Provider.of<SubstrateSdk>(context);
     final myWalletProvider =
         Provider.of<MyWalletsProvider>(context, listen: false);
-    CommonElements common = CommonElements();
     final pinLenght = generateWalletProvider.pin.text.length;
 
     return WillPopScope(
@@ -70,9 +72,9 @@ class OnboardingStepTen extends StatelessWidget {
             child: Stack(children: [
               Column(children: <Widget>[
                 SizedBox(height: isTall ? 40 : 20),
-                common.buildProgressBar(9),
+                const BuildProgressBar(pagePosition: 9),
                 SizedBox(height: isTall ? 40 : 20),
-                common.buildText("geckoWillCheckPassword".tr()),
+                BuildText(text: "geckoWillCheckPassword".tr()),
                 SizedBox(height: isTall ? 60 : 10),
                 Visibility(
                   visible: generateWalletProvider.scanedValidWalletNumber != -1,
@@ -156,7 +158,7 @@ class OnboardingStepTen extends StatelessWidget {
                 }),
                 const SizedBox(height: 10),
               ]),
-              CommonElements().offlineInfo(context),
+              const OfflineInfo(),
             ]),
           )),
     );
diff --git a/lib/screens/onBoarding/11_congratulations.dart b/lib/screens/onBoarding/11_congratulations.dart
index 110ceb8..2a5cf4c 100644
--- a/lib/screens/onBoarding/11_congratulations.dart
+++ b/lib/screens/onBoarding/11_congratulations.dart
@@ -5,15 +5,13 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/widgets_keys.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 
 class OnboardingStepEleven extends StatelessWidget {
   const OnboardingStepEleven({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
-
     return Scaffold(
         backgroundColor: backgroundColor,
         appBar: AppBar(
@@ -30,7 +28,7 @@ class OnboardingStepEleven extends StatelessWidget {
         body: SafeArea(
           child: Column(children: <Widget>[
             const SizedBox(height: 40),
-            common.buildText("yourChestAndWalletWereCreatedSuccessfully".tr()),
+            BuildText(text: "yourChestAndWalletWereCreatedSuccessfully".tr()),
             SizedBox(height: isTall ? 20 : 10),
             Image.asset(
               'assets/onBoarding/gecko-clin.gif',
diff --git a/lib/screens/onBoarding/2.dart b/lib/screens/onBoarding/2.dart
index 0a176bc..67a9896 100644
--- a/lib/screens/onBoarding/2.dart
+++ b/lib/screens/onBoarding/2.dart
@@ -4,16 +4,15 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/3.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepTwo extends StatelessWidget {
   const OnboardingStepTwo({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
-
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -29,14 +28,14 @@ class OnboardingStepTwo extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(
-              context,
-              'keepThisMnemonicSecure'.tr(),
-              'fabrication-de-portefeuille-impossible-sans-phrase.png',
-              '>',
-              const OnboardingStepThree(),
-              1),
-          CommonElements().offlineInfo(context),
+          InfoIntro(
+              text: 'keepThisMnemonicSecure'.tr(),
+              assetName:
+                  'fabrication-de-portefeuille-impossible-sans-phrase.png',
+              buttonText: '>',
+              nextScreen: const OnboardingStepThree(),
+              pagePosition: 1),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/3.dart b/lib/screens/onBoarding/3.dart
index 468ff15..f92d3cc 100644
--- a/lib/screens/onBoarding/3.dart
+++ b/lib/screens/onBoarding/3.dart
@@ -4,16 +4,15 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/4.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepThree extends StatelessWidget {
   const OnboardingStepThree({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
-
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -29,9 +28,13 @@ class OnboardingStepThree extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(context, 'warningForgotPassword'.tr(),
-              'forgot_password.png'.tr(), '>', const OnboardingStepFor(), 2),
-          CommonElements().offlineInfo(context),
+          InfoIntro(
+              text: 'warningForgotPassword'.tr(),
+              assetName: 'forgot_password.png'.tr(),
+              buttonText: '>',
+              nextScreen: const OnboardingStepFor(),
+              pagePosition: 2),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/4.dart b/lib/screens/onBoarding/4.dart
index 9cc1493..339ee7f 100644
--- a/lib/screens/onBoarding/4.dart
+++ b/lib/screens/onBoarding/4.dart
@@ -4,16 +4,15 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/5.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepFor extends StatelessWidget {
   const OnboardingStepFor({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
-
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -29,15 +28,14 @@ class OnboardingStepFor extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(
-              context,
-              'itsTimeToUseAPenAndPaper'.tr(),
-              'gecko_also_can_forget.png'.tr(),
-              '>',
-              const OnboardingStepFive(),
-              3,
+          InfoIntro(
+              text: 'itsTimeToUseAPenAndPaper'.tr(),
+              assetName: 'gecko_also_can_forget.png'.tr(),
+              buttonText: '>',
+              nextScreen: const OnboardingStepFive(),
+              pagePosition: 3,
               isMd: true),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/5.dart b/lib/screens/onBoarding/5.dart
index 9cc3a3e..cb39390 100644
--- a/lib/screens/onBoarding/5.dart
+++ b/lib/screens/onBoarding/5.dart
@@ -9,8 +9,11 @@ import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/generate_wallets.dart';
 import 'package:gecko/providers/my_wallets.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_progress_bar.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 import 'package:gecko/screens/onBoarding/6.dart';
+import 'package:gecko/widgets/commons/fader_transition.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:printing/printing.dart';
 import 'package:provider/provider.dart';
 
@@ -34,8 +37,6 @@ class _ChooseChestState extends State<OnboardingStepFive> {
     final generateWalletProvider =
         Provider.of<GenerateWalletsProvider>(context, listen: false);
 
-    final CommonElements common = CommonElements();
-
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -53,9 +54,9 @@ class _ChooseChestState extends State<OnboardingStepFive> {
         child: Stack(children: [
           Column(children: [
             SizedBox(height: isTall ? 40 : 20),
-            common.buildProgressBar(4),
+            const BuildProgressBar(pagePosition: 4),
             SizedBox(height: isTall ? 40 : 20),
-            common.buildText('geckoGeneratedYourMnemonicKeepItSecret'.tr()),
+            BuildText(text: 'geckoGeneratedYourMnemonicKeepItSecret'.tr()),
             SizedBox(height: 35 * ratio),
             sentanceArray(context),
             SizedBox(height: 17 * ratio),
@@ -142,7 +143,7 @@ class _ChooseChestState extends State<OnboardingStepFive> {
             const Spacer(),
             // SizedBox(height: 35 * ratio),
           ]),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/6.dart b/lib/screens/onBoarding/6.dart
index 69e0aac..7e786de 100644
--- a/lib/screens/onBoarding/6.dart
+++ b/lib/screens/onBoarding/6.dart
@@ -7,9 +7,12 @@ import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/generate_wallets.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_progress_bar.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 import 'package:gecko/screens/onBoarding/7.dart';
 import 'package:gecko/screens/onBoarding/9.dart';
+import 'package:gecko/widgets/commons/fader_transition.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:provider/provider.dart';
 
 class OnboardingStepSix extends StatelessWidget {
@@ -27,7 +30,6 @@ class OnboardingStepSix extends StatelessWidget {
     final generateWalletProvider =
         Provider.of<GenerateWalletsProvider>(context, listen: true);
 
-    CommonElements common = CommonElements();
     _mnemonicController.text = generatedMnemonic!;
 
     return WillPopScope(
@@ -56,14 +58,14 @@ class OnboardingStepSix extends StatelessWidget {
               alignment: Alignment.topCenter,
               child: Column(children: [
                 SizedBox(height: isTall ? 40 : 20),
-                common.buildProgressBar(5),
+                const BuildProgressBar(pagePosition: 5),
                 SizedBox(height: isTall ? 40 : 20),
-                common.buildText(
-                    "didYouNoteMnemonicToBeSureTypeWord".tr(args: [
+                BuildText(
+                    text: "didYouNoteMnemonicToBeSureTypeWord".tr(args: [
                       (generateWalletProvider.nbrWord + 1).toString()
                     ]),
-                    20,
-                    true),
+                    size: 20,
+                    isMd: true),
                 SizedBox(height: isTall ? 70 : 20),
                 Text('${generateWalletProvider.nbrWord + 1}',
                     key: keyAskedWord,
@@ -135,7 +137,7 @@ class OnboardingStepSix extends StatelessWidget {
                 SizedBox(height: 35 * ratio),
               ]),
             ),
-            CommonElements().offlineInfo(context),
+            const OfflineInfo(),
           ]),
         ),
       ),
diff --git a/lib/screens/onBoarding/7.dart b/lib/screens/onBoarding/7.dart
index e02681f..ba427e4 100644
--- a/lib/screens/onBoarding/7.dart
+++ b/lib/screens/onBoarding/7.dart
@@ -3,8 +3,9 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/8.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepSeven extends StatelessWidget {
   const OnboardingStepSeven({Key? key, this.scanDerivation = false})
@@ -13,7 +14,6 @@ class OnboardingStepSeven extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -29,15 +29,14 @@ class OnboardingStepSeven extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(
-              context,
-              'geckoWillGenerateAPassword'.tr(),
-              'coffre-fort-code-secret-dans-telephone.png',
-              '>',
-              OnboardingStepEight(scanDerivation: scanDerivation),
-              6,
+          InfoIntro(
+              text: 'geckoWillGenerateAPassword'.tr(),
+              assetName: 'coffre-fort-code-secret-dans-telephone.png',
+              buttonText: '>',
+              nextScreen: OnboardingStepEight(scanDerivation: scanDerivation),
+              pagePosition: 6,
               boxHeight: 400),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/8.dart b/lib/screens/onBoarding/8.dart
index 5d478b9..7650cf5 100644
--- a/lib/screens/onBoarding/8.dart
+++ b/lib/screens/onBoarding/8.dart
@@ -3,8 +3,9 @@ import 'package:easy_localization/easy_localization.dart';
 
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/9.dart';
+import 'package:gecko/widgets/commons/intro_info.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 
 class OnboardingStepEight extends StatelessWidget {
   const OnboardingStepEight({Key? key, this.scanDerivation = false})
@@ -13,7 +14,6 @@ class OnboardingStepEight extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    CommonElements common = CommonElements();
     return Scaffold(
       backgroundColor: backgroundColor,
       appBar: AppBar(
@@ -29,15 +29,14 @@ class OnboardingStepEight extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: Stack(children: [
-          common.infoIntro(
-              context,
-              'thisPasswordProtectsYourWalletsInASecureChest'.tr(),
-              'coffre-fort-protege-les-portefeuilles.png',
-              '>',
-              OnboardingStepNine(scanDerivation: scanDerivation),
-              7,
+          InfoIntro(
+              text: 'thisPasswordProtectsYourWalletsInASecureChest'.tr(),
+              assetName: 'coffre-fort-protege-les-portefeuilles.png',
+              buttonText: '>',
+              nextScreen: OnboardingStepNine(scanDerivation: scanDerivation),
+              pagePosition: 7,
               isMd: true),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/onBoarding/9.dart b/lib/screens/onBoarding/9.dart
index 38be732..176ece3 100644
--- a/lib/screens/onBoarding/9.dart
+++ b/lib/screens/onBoarding/9.dart
@@ -5,8 +5,11 @@ import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/generate_wallets.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/build_progress_bar.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
 import 'package:gecko/screens/onBoarding/10.dart';
+import 'package:gecko/widgets/commons/next_button.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:provider/provider.dart';
 
 class OnboardingStepNine extends StatelessWidget {
@@ -20,7 +23,6 @@ class OnboardingStepNine extends StatelessWidget {
         Provider.of<GenerateWalletsProvider>(context);
     // final myWalletProvider =
     //     Provider.of<MyWalletsProvider>(context);
-    CommonElements common = CommonElements();
 
     generateWalletProvider.pin.text = debugPin // kDebugMode &&
         ? 'AAAAA'
@@ -43,9 +45,9 @@ class OnboardingStepNine extends StatelessWidget {
           child: Stack(children: [
             Column(children: <Widget>[
               SizedBox(height: isTall ? 40 : 20),
-              common.buildProgressBar(8),
+              const BuildProgressBar(pagePosition: 8),
               SizedBox(height: isTall ? 40 : 20),
-              common.buildText("hereIsThePasswordKeepIt".tr(), 20, true),
+              BuildText(text: "hereIsThePasswordKeepIt".tr()),
               const SizedBox(height: 100),
               Stack(
                 alignment: Alignment.centerRight,
@@ -102,11 +104,13 @@ class OnboardingStepNine extends StatelessWidget {
                                     fontWeight: FontWeight.w600))),
                       ))),
               SizedBox(height: 22 * ratio),
-              common.nextButton(context, "iNotedMyPassword".tr(),
-                  OnboardingStepTen(scanDerivation: scanDerivation), false),
+              NextButton(
+                  text: "iNotedMyPassword".tr(),
+                  nextScreen: OnboardingStepTen(scanDerivation: scanDerivation),
+                  isFast: false),
               SizedBox(height: 35 * ratio),
             ]),
-            CommonElements().offlineInfo(context),
+            const OfflineInfo(),
           ]),
         ));
   }
diff --git a/lib/screens/search.dart b/lib/screens/search.dart
index 9f9b6e4..824b7f2 100644
--- a/lib/screens/search.dart
+++ b/lib/screens/search.dart
@@ -8,9 +8,10 @@ import 'package:gecko/globals.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/models/widgets_keys.dart';
 import 'package:gecko/providers/search.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:gecko/screens/search_result.dart';
 import 'package:gecko/screens/wallet_view.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:provider/provider.dart';
 
 class SearchScreen extends StatefulWidget {
@@ -190,7 +191,7 @@ class _SearchScreenState extends State<SearchScreen> {
               ),
               Spacer(flex: screenHeight <= 800 ? 1 : 2),
             ]),
-            CommonElements().offlineInfo(context),
+            const OfflineInfo(),
           ]),
         ),
       ),
diff --git a/lib/screens/search_result.dart b/lib/screens/search_result.dart
index ee85ff6..7f1b617 100644
--- a/lib/screens/search_result.dart
+++ b/lib/screens/search_result.dart
@@ -5,8 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:gecko/providers/duniter_indexer.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:gecko/providers/search.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/widgets/bottom_app_bar.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:gecko/widgets/search_result_list.dart';
 import 'package:provider/provider.dart';
 
@@ -86,7 +86,7 @@ class SearchResultScreen extends StatelessWidget {
                       walletsProfilesClass: walletsProfilesClass),
                 ]),
           ),
-          CommonElements().offlineInfo(context),
+          const OfflineInfo(),
         ]),
       ),
     );
diff --git a/lib/screens/wallet_view.dart b/lib/screens/wallet_view.dart
index 998c153..41b48eb 100644
--- a/lib/screens/wallet_view.dart
+++ b/lib/screens/wallet_view.dart
@@ -15,7 +15,7 @@ import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/providers/wallet_options.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:gecko/screens/activity.dart';
-import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/commons/common_elements.dart';
 import 'package:gecko/screens/myWallets/choose_wallet.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/qrcode_fullscreen.dart';
diff --git a/lib/widgets/animated_text.dart b/lib/widgets/commons/animated_text.dart
similarity index 100%
rename from lib/widgets/animated_text.dart
rename to lib/widgets/commons/animated_text.dart
diff --git a/lib/widgets/commons/build_image.dart b/lib/widgets/commons/build_image.dart
new file mode 100644
index 0000000..2ed334d
--- /dev/null
+++ b/lib/widgets/commons/build_image.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+
+class BuildImage extends StatelessWidget {
+  const BuildImage({
+    Key? key,
+    required this.assetName,
+    required this.boxHeight,
+    required this.imageWidth,
+  }) : super(key: key);
+
+  final String assetName;
+  final double boxHeight;
+  final double imageWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        padding: const EdgeInsets.all(0),
+        width: 440,
+        height: isTall ? boxHeight : boxHeight * 0.9,
+        decoration: BoxDecoration(
+            gradient: const LinearGradient(
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              colors: [
+                Color(0xffd2d4cf),
+                Color(0xffeaeae7),
+              ],
+            ),
+            border: Border.all(color: Colors.grey[900]!)),
+        child: Image.asset('assets/onBoarding/$assetName', width: imageWidth));
+  }
+}
\ No newline at end of file
diff --git a/lib/widgets/commons/build_progress_bar.dart b/lib/widgets/commons/build_progress_bar.dart
new file mode 100644
index 0000000..f9da070
--- /dev/null
+++ b/lib/widgets/commons/build_progress_bar.dart
@@ -0,0 +1,25 @@
+import 'package:dots_indicator/dots_indicator.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+
+class BuildProgressBar extends StatelessWidget {
+  const BuildProgressBar({
+    Key? key,
+    required this.pagePosition,
+  }) : super(key: key);
+
+  final double pagePosition;
+
+  @override
+  Widget build(BuildContext context) {
+    return DotsIndicator(
+      dotsCount: 10,
+      position: pagePosition,
+      decorator: DotsDecorator(
+        spacing: const EdgeInsets.symmetric(horizontal: 10),
+        color: Colors.grey[300]!, // Inactive color
+        activeColor: orangeC,
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/commons/build_text.dart b/lib/widgets/commons/build_text.dart
new file mode 100644
index 0000000..6de2b34
--- /dev/null
+++ b/lib/widgets/commons/build_text.dart
@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import 'package:gecko/globals.dart';
+
+class BuildText extends StatelessWidget {
+  const BuildText({
+    Key? key,
+    required this.text,
+    this.size = 20,
+    this.isMd = true,
+  }) : super(key: key);
+
+  final String text;
+  final double size;
+  final bool isMd;
+
+  @override
+  Widget build(BuildContext context) {
+    final mdStyle = MarkdownStyleSheet(
+      p: TextStyle(
+          fontSize: isTall ? size : size * 0.9,
+          color: Colors.black,
+          letterSpacing: 0.3),
+      textAlign: WrapAlignment.spaceBetween,
+    );
+
+    return Container(
+      padding: const EdgeInsets.all(12),
+      width: 440,
+      decoration: BoxDecoration(
+          color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
+      child: isMd
+          ? MarkdownBody(data: text, styleSheet: mdStyle)
+          : Text(text,
+              textAlign: TextAlign.justify,
+              style: TextStyle(
+                  fontSize: isTall ? size : size * 0.9,
+                  color: Colors.black,
+                  letterSpacing: 0.3)),
+    );
+  }
+}
\ No newline at end of file
diff --git a/lib/widgets/commons/common_elements.dart b/lib/widgets/commons/common_elements.dart
new file mode 100644
index 0000000..5944f43
--- /dev/null
+++ b/lib/widgets/commons/common_elements.dart
@@ -0,0 +1,214 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/widgets_keys.dart';
+
+Future<bool?> confirmPopup(BuildContext context, String title) async {
+  return showDialog<bool>(
+    context: context,
+    barrierDismissible: true, // user must tap button!
+    builder: (BuildContext context) {
+      return AlertDialog(
+        backgroundColor: backgroundColor,
+        content: Text(
+          title,
+          textAlign: TextAlign.center,
+          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
+        ),
+        actions: <Widget>[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              TextButton(
+                key: keyConfirm,
+                child: Text(
+                  "yes".tr(),
+                  style: const TextStyle(
+                    fontSize: 21,
+                    color: Color(0xffD80000),
+                  ),
+                ),
+                onPressed: () {
+                  Navigator.pop(context, true);
+                },
+              ),
+              const SizedBox(width: 20),
+              TextButton(
+                child: Text(
+                  "no".tr(),
+                  style: const TextStyle(fontSize: 21),
+                ),
+                onPressed: () {
+                  Navigator.pop(context, false);
+                },
+              ),
+              const SizedBox(height: 120)
+            ],
+          )
+        ],
+      );
+    },
+  );
+}
+
+Future<bool?> confirmPopupCertification(BuildContext context, String question1,
+    String username, String question2, String address) async {
+  return showDialog<bool>(
+    context: context,
+    barrierDismissible: true,
+    builder: (BuildContext context) {
+      return AlertDialog(
+        // actionsPadding: const EdgeInsets.all(0.0),
+        backgroundColor: backgroundColor,
+        content: SizedBox(
+          height: 240,
+          child: Column(
+            children: [
+              const SizedBox(height: 15),
+              Text(
+                question1,
+                textAlign: TextAlign.center,
+                style:
+                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
+              ),
+              const SizedBox(height: 20),
+              Text(
+                username,
+                textAlign: TextAlign.center,
+                style:
+                    const TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
+              ),
+              const SizedBox(height: 20),
+              Text(
+                question2,
+                textAlign: TextAlign.center,
+                style:
+                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
+              ),
+              const SizedBox(height: 20),
+              Text(
+                address,
+                textAlign: TextAlign.center,
+                style:
+                    const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
+              ),
+              const SizedBox(height: 20),
+              const Text(
+                '?',
+                textAlign: TextAlign.center,
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
+              ),
+            ],
+          ),
+        ),
+        actions: <Widget>[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              TextButton(
+                key: keyConfirm,
+                child: Text(
+                  "yes".tr(),
+                  style: const TextStyle(
+                    fontSize: 25,
+                    color: Color(0xffD80000),
+                  ),
+                ),
+                onPressed: () {
+                  Navigator.pop(context, true);
+                },
+              ),
+              const SizedBox(width: 35),
+              TextButton(
+                child: Text(
+                  "no".tr(),
+                  style: const TextStyle(fontSize: 25),
+                ),
+                onPressed: () {
+                  Navigator.pop(context, false);
+                },
+              ),
+              const SizedBox(height: 120)
+            ],
+          )
+        ],
+      );
+    },
+  );
+}
+
+Future<void> infoPopup(BuildContext context, String title) async {
+  return showDialog<void>(
+    context: context,
+    barrierDismissible: true, // user must tap button!
+    builder: (BuildContext context) {
+      return AlertDialog(
+        backgroundColor: backgroundColor,
+        content: Text(
+          title,
+          textAlign: TextAlign.center,
+          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
+        ),
+        actions: <Widget>[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              TextButton(
+                key: keyInfoPopup,
+                child: const Text(
+                  "D'accord",
+                  style: TextStyle(
+                    fontSize: 21,
+                    color: Color(0xffD80000),
+                  ),
+                ),
+                onPressed: () {
+                  Navigator.pop(context, true);
+                },
+              ),
+            ],
+          )
+        ],
+      );
+    },
+  );
+}
+
+bool isAddress(address) {
+  final RegExp regExp = RegExp(
+    r'^[a-zA-Z0-9]+$',
+    caseSensitive: false,
+    multiLine: false,
+  );
+
+  if (regExp.hasMatch(address) == true &&
+      address.length > 45 &&
+      address.length < 52) {
+    log.d("C'est une adresse !");
+
+    return true;
+  } else {
+    return false;
+  }
+}
+
+// Widget geckoAppBar() {
+//   return AppBar(
+//     toolbarHeight: 60 * ratio,
+//     elevation: 0,
+//     leading: IconButton(
+//         icon: const Icon(Icons.arrow_back, color: Colors.black),
+//         onPressed: () {
+//           _walletOptions.isEditing = false;
+//           _walletOptions.isBalanceBlur = false;
+//           Navigator.pop(context);
+//         }),
+//     title: SizedBox(
+//       height: 22,
+//       child: Consumer<WalletOptionsProvider>(
+//           builder: (context, walletProvider, _) {
+//         return Text(_walletOptions.nameController.text);
+//       }),
+//     ),
+//   );
+// }
diff --git a/lib/widgets/commons/fader_transition.dart b/lib/widgets/commons/fader_transition.dart
new file mode 100644
index 0000000..b5893c3
--- /dev/null
+++ b/lib/widgets/commons/fader_transition.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class FaderTransition extends PageRouteBuilder {
+  final Widget page;
+  final bool isFast;
+
+  FaderTransition({required this.page, required this.isFast})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              page,
+          transitionsBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+            Widget child,
+          ) =>
+              FadeTransition(
+            opacity:
+                Tween(begin: 0.0, end: isFast ? 3.0 : 1.0).animate(animation),
+            child: child,
+          ),
+        );
+}
\ No newline at end of file
diff --git a/lib/widgets/commons/intro_info.dart b/lib/widgets/commons/intro_info.dart
new file mode 100644
index 0000000..bbe6f2f
--- /dev/null
+++ b/lib/widgets/commons/intro_info.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/widgets/commons/build_image.dart';
+import 'package:gecko/widgets/commons/build_progress_bar.dart';
+import 'package:gecko/widgets/commons/build_text.dart';
+import 'package:gecko/widgets/commons/next_button.dart';
+
+class InfoIntro extends StatelessWidget {
+  const InfoIntro({
+    Key? key,
+    required this.text,
+    required this.assetName,
+    required this.buttonText,
+    required this.nextScreen,
+    required this.pagePosition,
+    this.isMd = false,
+    this.isFast = false,
+    this.boxHeight = 440,
+    this.imageWidth = 350,
+    this.textSize = 20,
+  }) : super(key: key);
+
+  final String text;
+  final String assetName;
+  final String buttonText;
+  final Widget nextScreen;
+  final double pagePosition;
+  final bool isMd;
+  final bool isFast;
+  final double boxHeight;
+  final double imageWidth;
+  final double textSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(children: <Widget>[
+      SizedBox(height: isTall ? 40 : 20),
+      BuildProgressBar(pagePosition: pagePosition),
+      SizedBox(height: isTall ? 40 : 20),
+
+      BuildText(text: text, size: textSize, isMd: isMd),
+
+      BuildImage(
+          assetName: assetName, boxHeight: boxHeight, imageWidth: imageWidth),
+      Expanded(
+        child: Align(
+          alignment: Alignment.bottomCenter,
+          child: NextButton(
+              text: buttonText, nextScreen: nextScreen, isFast: false),
+        ),
+      ),
+      // const SizedBox(height: 40),
+      SizedBox(height: isTall ? 40 : 20),
+    ]);
+  }
+}
diff --git a/lib/widgets/commons/next_button.dart b/lib/widgets/commons/next_button.dart
new file mode 100644
index 0000000..2a92142
--- /dev/null
+++ b/lib/widgets/commons/next_button.dart
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/widgets_keys.dart';
+import 'package:gecko/widgets/commons/fader_transition.dart';
+
+class NextButton extends StatelessWidget {
+  const NextButton({
+    Key? key,
+    required this.text,
+    required this.nextScreen,
+    required this.isFast,
+  }) : super(key: key);
+
+  final String text;
+  final Widget nextScreen;
+  final bool isFast;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 380 * ratio,
+      height: 60 * ratio,
+      child: ElevatedButton(
+        key: keyGoNext,
+        style: ElevatedButton.styleFrom(
+          foregroundColor: Colors.white, backgroundColor: orangeC,
+          elevation: 4, // foreground
+        ),
+        onPressed: () {
+          Navigator.push(
+              context, FaderTransition(page: nextScreen, isFast: isFast));
+        },
+        child: Text(
+          text,
+          style: TextStyle(fontSize: 23 * ratio, fontWeight: FontWeight.w600),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/commons/offline_info.dart b/lib/widgets/commons/offline_info.dart
new file mode 100644
index 0000000..4772634
--- /dev/null
+++ b/lib/widgets/commons/offline_info.dart
@@ -0,0 +1,38 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/providers/substrate_sdk.dart';
+import 'package:provider/provider.dart';
+
+class OfflineInfo extends StatelessWidget {
+  const OfflineInfo({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(homeContext).size.width;
+    return Consumer<SubstrateSdk>(builder: (context, sub, _) {
+      return Visibility(
+        visible: !sub.nodeConnected,
+        child: Positioned(
+          top: 0,
+          child: Container(
+              height: 30,
+              width: screenWidth,
+              color: Colors.grey[800],
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    'youAreOffline'.tr(),
+                    style: TextStyle(color: Colors.grey[50]),
+                    textAlign: TextAlign.center,
+                  ),
+                ],
+              )),
+        ),
+      );
+    });
+  }
+}
diff --git a/lib/widgets/commons/smooth_transition.dart b/lib/widgets/commons/smooth_transition.dart
new file mode 100644
index 0000000..bbe7991
--- /dev/null
+++ b/lib/widgets/commons/smooth_transition.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class SmoothTransition extends PageRouteBuilder {
+  final Widget page;
+  SmoothTransition({required this.page})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              TweenAnimationBuilder(
+            duration: const Duration(seconds: 5),
+            tween: Tween(begin: 200, end: 200),
+            builder: (BuildContext context, dynamic value, Widget? child) {
+              return page;
+            },
+          ),
+        );
+}
diff --git a/lib/widgets/header_profile.dart b/lib/widgets/header_profile.dart
index 264ae81..a7d8569 100644
--- a/lib/widgets/header_profile.dart
+++ b/lib/widgets/header_profile.dart
@@ -8,9 +8,9 @@ import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:gecko/providers/wallet_options.dart';
 import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:gecko/screens/certifications.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/widgets/balance.dart';
 import 'package:gecko/widgets/certifications.dart';
+import 'package:gecko/widgets/commons/offline_info.dart';
 import 'package:gecko/widgets/idty_status.dart';
 import 'package:gecko/widgets/page_route_no_transition.dart';
 import 'package:provider/provider.dart';
@@ -111,7 +111,7 @@ class HeaderProfile extends StatelessWidget {
           ]),
         ]),
       ),
-      CommonElements().offlineInfo(context),
+      const OfflineInfo(),
     ]);
   }
 }
diff --git a/lib/widgets/idty_status.dart b/lib/widgets/idty_status.dart
index a5cda45..48f2de8 100644
--- a/lib/widgets/idty_status.dart
+++ b/lib/widgets/idty_status.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/providers/duniter_indexer.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/widgets/animated_text.dart';
+import 'package:gecko/widgets/commons/animated_text.dart';
 import 'package:gecko/widgets/name_by_address.dart';
 import 'package:provider/provider.dart';
 
diff --git a/pubspec.yaml b/pubspec.yaml
index 6e27860..3921985 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -5,7 +5,7 @@ description: Pay with G1.
 # pub.dev using `pub publish`. This is preferred for private packages.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
-version: 0.0.15+50
+version: 0.0.15+51
 
 environment:
   sdk: '>=2.12.0 <3.0.0'