diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 79c0c02d..763dea97 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,50 +12,38 @@ on:
 
 jobs:
     tests:
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
 
         name: "Sylius ${{ matrix.sylius }}, PHP ${{ matrix.php }}, Symfony ${{ matrix.symfony }}, MySQL ${{ matrix.mysql }}, wkhtmltopdf: ${{ matrix.wkhtmltopdf }}, State Machine Adapter ${{ matrix.state_machine_adapter }}"
 
         strategy:
             fail-fast: false
             matrix:
-                php: ["8.1", "8.2"]
-                symfony: ["^5.4.21", "^6.4"]
-                sylius: ["~1.12.0", "~1.13.0",]
+                php: ["8.2", "8.3"]
+                symfony: ["^6.4", "^7.1"]
+                sylius: ["2.0.x-dev"]
                 node: ["20.x"]
-                mysql: ["8.0"]
-                wkhtmltopdf: ["0.12.6-1"]
-                state_machine_adapter: [ "winzou_state_machine", "symfony_workflow" ]
+                mysql: ["8.4"]
+                wkhtmltopdf: ["0.12.6-1", false]
+                state_machine_adapter: [ "symfony_workflow" ]
 
                 include:
                     -
                         php: "8.3"
-                        symfony: "^6.4"
-                        sylius: "~1.13.0"
+                        symfony: "^7.1"
+                        sylius: "2.0.x-dev"
                         node: "20.x"
-                        mysql: "8.0"
+                        mysql: "8.4"
                         wkhtmltopdf: "0.12.6-1"
-                        state_machine_adapter: "symfony_workflow"
-                    -
-                        php: "8.2"
-                        symfony: "^6.4"
-                        sylius: "~1.12.0"
-                        node: "20.x"
-                        mysql: "8.0"
-                        wkhtmltopdf: false
                         state_machine_adapter: "winzou_state_machine"
                     -
-                        php: "8.2"
-                        symfony: "^6.4"
-                        sylius: "~1.13.0"
+                        php: "8.3"
+                        symfony: "^7.1"
+                        sylius: "2.0.x-dev"
                         node: "20.x"
-                        mysql: "8.0"
+                        mysql: "8.4"
                         wkhtmltopdf: false
-                        state_machine_adapter: "symfony_workflow"
-
-                exclude:
-                    - sylius: "~1.12.0"
-                      state_machine_adapter: "symfony_workflow"
+                        state_machine_adapter: "winzou_state_machine"
 
         env:
             APP_ENV: test
@@ -77,7 +65,7 @@ jobs:
 
             -
                 name: Setup Node
-                uses: actions/setup-node@v1
+                uses: actions/setup-node@v4
                 with:
                     node-version: "${{ matrix.node }}"
 
@@ -94,7 +82,7 @@ jobs:
 
             -
                 name: Setup cache for wkhtmltopdf
-                uses: actions/cache@v3
+                uses: actions/cache@v4
                 id: cache-wkhtmltopdf
                 if: matrix.wkhtmltopdf != false
                 with:
@@ -114,7 +102,6 @@ jobs:
                 if: matrix.wkhtmltopdf == false
                 run: |
                     mv tests/Application/etc/sylius_invoicing_pdf_generation_disabled.yaml tests/Application/config/packages
-                    sed -i 's/pdf_generation_disabled/pdf_generation_enabled/g' behat.yml.dist
 
             -
                 name: Get Composer cache directory
@@ -123,7 +110,7 @@ jobs:
 
             -
                 name: Cache Composer
-                uses: actions/cache@v2
+                uses: actions/cache@v4
                 with:
                     path: ${{ steps.composer-cache.outputs.dir }}
                     key: ${{ runner.os }}-php-${{ matrix.php }}-composer-${{ hashFiles('**/composer.json **/composer.lock') }}
@@ -143,6 +130,13 @@ jobs:
                 if: matrix.sylius != ''
                 run: composer require "sylius/sylius:${{ matrix.sylius }}" --no-update --no-scripts --no-interaction
 
+            -
+                name: Require Winzou State Machine
+                if: "${{ matrix.state_machine_adapter == 'winzou_state_machine' }}"
+                run: |
+                  composer require winzou/state-machine:^0.4 --no-update   
+                  composer require winzou/state-machine-bundle:^0.6 --no-update   
+
             -
                 name: Install PHP dependencies
                 run: composer install --no-interaction --no-scripts
@@ -154,7 +148,7 @@ jobs:
 
             -
                 name: Cache Yarn
-                uses: actions/cache@v2
+                uses: actions/cache@v4
                 with:
                     path: ${{ steps.yarn-cache.outputs.dir }}
                     key: ${{ runner.os }}-node-${{ matrix.node }}-yarn-${{ hashFiles('**/package.json **/yarn.lock') }}
@@ -189,10 +183,9 @@ jobs:
                 name: Run security check
                 run: symfony security:check
 
-            -
-                name: Run analysis
-                run: composer analyse
-                if: matrix.sylius != '~1.12.0'
+#            -
+#                name: Run analysis
+#                run: composer analyse
 
             -
                 name: Run PHPSpec
@@ -204,11 +197,16 @@ jobs:
 
             -
                 name: Run Behat
-                run: vendor/bin/behat --colors --strict -vvv --no-interaction -f progress || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --rerun
+                run: |
+                    if [ "${{ matrix.wkhtmltopdf }}" != "false" ]; then
+                        vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_disabled" || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --rerun;
+                    else
+                        vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --tags="~@pdf_enabled" || vendor/bin/behat --colors --strict -vvv --no-interaction -f progress --rerun;
+                    fi
 
             -
                 name: Upload Behat logs
-                uses: actions/upload-artifact@v2
+                uses: actions/upload-artifact@v4
                 if: failure()
                 with:
                     name: Behat logs
diff --git a/UPGRADE.md b/UPGRADE.md
index c23bad1f..1ef8cb4b 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -1,3 +1,10 @@
+### UPGRADE FROM 0.24.X TO 1.0.0
+
+1. Support for Sylius 2.0 has been added, it is now the recommended Sylius version to use with InvoicingPlugin.
+2. Support for Sylius 1.13 and 1.12 has been dropped, upgrade your application to [Sylius 2.0](https://github.com/Sylius/Sylius/blob/2.0/UPGRADE-2.0.md).
+3. Support for PHP has been increased to 8.2
+4. The `sylius_invoicing_plugin_admin_order_invoices_partial` and `sylius_invoicing_plugin_shop_order_invoices_partial` partials have been replaced by `Sylius\InvoicingPlugin\Twig\Component\Invoice\ListComponent` twig component.
+
 ### UPGRADE FROM 0.24.X TO 0.25.0
 
 1. Support for Sylius 1.13 has been added, it is now the recommended Sylius version to use with InvoicingPlugin.
diff --git a/behat.yml.dist b/behat.yml.dist
index b744fe7c..f6a33105 100644
--- a/behat.yml.dist
+++ b/behat.yml.dist
@@ -45,7 +45,3 @@ default:
         FriendsOfBehat\SuiteSettingsExtension:
             paths:
                 - features
-
-        FriendsOfBehat\ExcludeSpecificationsExtension:
-            features:
-                - features/managing_invoices/pdf_generation_disabled
diff --git a/composer.json b/composer.json
index bc8dc2a0..8a586ef6 100644
--- a/composer.json
+++ b/composer.json
@@ -5,26 +5,27 @@
     "description": "Invoicing plugin for Sylius.",
     "license": "MIT",
     "require": {
-        "php": "^8.1",
+        "php": "^8.2",
         "knplabs/knp-snappy-bundle": "^1.8",
         "ramsey/uuid": "^3.9 || ^4.0",
         "sylius/grid-bundle": "^1.9",
         "sylius/resource-bundle": "^1.9",
-        "sylius/sylius": "~1.12.0 || ~1.13.0",
-        "symfony/config": "^5.4 || ^6.4",
-        "symfony/dependency-injection": "^5.4.21 || ^6.4",
-        "symfony/form": "^5.4.21 || ^6.4",
-        "symfony/framework-bundle": "^5.4.21  || ^6.4",
-        "symfony/http-foundation": "^5.4.21  || ^6.4",
-        "symfony/http-kernel": "^5.4.21  || ^6.4",
-        "symfony/messenger": "^5.4.21 || ^6.4",
-        "symfony/options-resolver": "^5.4.21  || ^6.4",
-        "symfony/routing": "^5.4.21  || ^6.4"
+        "sylius/sylius": "2.0.x-dev",
+        "sylius/twig-hooks": "^0.4",
+        "symfony/config": "^6.4 || ^7.1",
+        "symfony/console": "^6.4.1 || ^7.1",
+        "symfony/dependency-injection": "^6.4 || ^7.1",
+        "symfony/form": "^6.4 || ^7.1",
+        "symfony/framework-bundle": "^6.4 || ^7.1",
+        "symfony/http-foundation": "^6.4 || ^7.1",
+        "symfony/http-kernel": "^6.4 || ^7.1",
+        "symfony/messenger": "^6.4 || ^7.1",
+        "symfony/options-resolver": "^6.4 || ^7.1",
+        "symfony/routing": "^6.4 || ^7.1"
     },
     "require-dev": {
         "behat/behat": "^3.6.1",
         "behat/mink-selenium2-driver": "~1.6.0",
-        "friends-of-behat/exclude-specifications-extension": "^0.2 || ^0.3",
         "friends-of-behat/mink": "^1.8",
         "friends-of-behat/mink-browserkit-driver": "^1.4",
         "friends-of-behat/mink-debug-extension": "^2.0",
@@ -33,8 +34,8 @@
         "friends-of-behat/suite-settings-extension": "^1.0",
         "friends-of-behat/symfony-extension": "^2.1",
         "friends-of-behat/variadic-extension": "^1.3",
-        "matthiasnoback/symfony-config-test": "^4.2",
-        "matthiasnoback/symfony-dependency-injection-test": "^4.2",
+        "matthiasnoback/symfony-config-test": "^5.1",
+        "matthiasnoback/symfony-dependency-injection-test": "^5.0",
         "phpspec/phpspec": "^7.2",
         "phpstan/extension-installer": "^1.0",
         "phpstan/phpstan": "^1.8",
@@ -43,13 +44,13 @@
         "phpstan/phpstan-webmozart-assert": "^1.2",
         "phpunit/phpunit": "^9.5",
         "polishsymfonycommunity/symfony-mocker-container": "^1.0",
-        "sylius-labs/coding-standard": "~4.0.0",
-        "symfony/browser-kit": "^5.4.21 || ^6.4",
-        "symfony/debug-bundle": "^5.4.21 || ^6.4",
-        "symfony/dotenv": "^5.4.21 || ^6.4",
-        "symfony/intl": "^5.4 || ^6.0",
-        "symfony/webpack-encore-bundle": "^1.15",
-        "symfony/web-profiler-bundle": "^5.4.21 || ^6.4"
+        "sylius-labs/coding-standard": "^4.2",
+        "symfony/browser-kit": "^6.4 || ^7.1",
+        "symfony/debug-bundle": "^6.4 || ^7.1",
+        "symfony/dotenv": "^6.4 || ^7.1",
+        "symfony/intl": "^6.4 || ^7.1",
+        "symfony/webpack-encore-bundle": "^2.1",
+        "symfony/web-profiler-bundle": "^6.4 || ^7.1"
     },
     "autoload": {
         "psr-4": {
@@ -87,7 +88,7 @@
     },
     "extra": {
         "branch-alias": {
-            "dev-master": "1.0-dev"
+            "dev-main": "2.0-dev"
         }
     },
     "prefer-stable": true
diff --git a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_admin_order_view.feature b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_admin_order_view.feature
index 9255347d..28f94725 100644
--- a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_admin_order_view.feature
+++ b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_admin_order_view.feature
@@ -14,7 +14,7 @@ Feature: Being unable to download an invoice on a single order view
         And the customer chose "Free" shipping method to "United States" with "Cash on Delivery" payment
         And I am logged in as an administrator
 
-    @ui
+    @ui @pdf_disabled
     Scenario: Being unable to download an invoice on a single order view
         When I view the summary of the order "#00000022"
         Then I should not be able to download the first invoice
diff --git a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_customer_order_view.feature b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_customer_order_view.feature
index ab8ac947..60b8204d 100644
--- a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_customer_order_view.feature
+++ b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_customer_order_view.feature
@@ -16,7 +16,7 @@ Feature: Being unable to download an invoice on a single order view
         And for the billing address of "Mazikeen Lilim" in the "Pacific Coast Hwy", "90806" "Los Angeles", "United States"
         And I chose "Free" shipping method with "Cash on Delivery" payment
 
-    @ui
+    @ui @pdf_disabled
     Scenario: Being unable to download an invoice on a single order view
         When I view the summary of the order "#00000666"
         Then I should not be able to download the first invoice
diff --git a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_its_details_page.feature b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_its_details_page.feature
index b0cc3c7c..d71625f2 100644
--- a/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_its_details_page.feature
+++ b/features/managing_invoices/pdf_generation_disabled/being_unable_to_download_invoice_on_its_details_page.feature
@@ -17,7 +17,7 @@ Feature: Being unable to download an invoice from its details page
         And for the billing address of "Mazikeen Lilim" in the "Pacific Coast Hwy", "90806" "Los Angeles", "United States"
         And the customer chose "UPS" shipping method with "Cash on Delivery" payment
 
-    @ui
+    @ui @pdf_disabled
     Scenario: Being unable to download an invoice from its details page
         Given I view the summary of the invoice for order "#00000666"
         Then I should not be able to download the invoice
diff --git a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_admin_order_view.feature b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_admin_order_view.feature
index 5c81527d..ed0af0f6 100644
--- a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_admin_order_view.feature
+++ b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_admin_order_view.feature
@@ -14,7 +14,7 @@ Feature: Downloading invoices on a single order view
         And the customer chose "Free" shipping method to "United States" with "Cash on Delivery" payment
         And I am logged in as an administrator
 
-    @ui
+    @ui @pdf_enabled
     Scenario: Downloading an invoice on order view
         When I view the summary of the order "#00000022"
         And I download the first invoice
diff --git a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_customer_order_view.feature b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_customer_order_view.feature
index c9999699..baa87454 100644
--- a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_customer_order_view.feature
+++ b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_customer_order_view.feature
@@ -16,7 +16,7 @@ Feature: Downloading invoices on a single order view
         And for the billing address of "Mazikeen Lilim" in the "Pacific Coast Hwy", "90806" "Los Angeles", "United States"
         And I chose "Free" shipping method with "Cash on Delivery" payment
 
-    @ui
+    @ui @pdf_enabled
     Scenario: Downloading an invoice on order view
         When I view the summary of the order "#00000666"
         And I download the first invoice
diff --git a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_its_details_page.feature b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_its_details_page.feature
index 4c653199..4e5febb1 100644
--- a/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_its_details_page.feature
+++ b/features/managing_invoices/pdf_generation_enabled/downloading_invoice_on_its_details_page.feature
@@ -17,7 +17,7 @@ Feature: Downloading an invoice from its details page
         And for the billing address of "Mazikeen Lilim" in the "Pacific Coast Hwy", "90806" "Los Angeles", "United States"
         And the customer chose "UPS" shipping method with "Cash on Delivery" payment
 
-    @ui
+    @ui @pdf_enabled
     Scenario: Downloading an invoice
         Given I view the summary of the invoice for order "#00000666"
         When I download the invoice
diff --git a/features/managing_invoices/pdf_generation_enabled/saving_invoices_on_server_during_generation.feature b/features/managing_invoices/pdf_generation_enabled/saving_invoices_on_server_during_generation.feature
index 5d63eb14..94d8718a 100644
--- a/features/managing_invoices/pdf_generation_enabled/saving_invoices_on_server_during_generation.feature
+++ b/features/managing_invoices/pdf_generation_enabled/saving_invoices_on_server_during_generation.feature
@@ -13,7 +13,7 @@ Feature: Saving invoices on server during generation
         And the store allows paying with "Cash on Delivery"
         And channel "United States" has shop billing data set as "Ragnarok", "1100110011", "Pacific Coast Hwy", "90806" "Los Angeles", "United States"
 
-    @application
+    @application @pdf_enabled
     Scenario: Having invoice saved on the server after the order is placed
         Given there is a customer "lucy@teamlucifer.com" that placed an order "#00000666"
         When the customer bought 2 "Angel T-Shirt" products
diff --git a/src/Cli/GenerateInvoicesCommand.php b/src/Cli/GenerateInvoicesCommand.php
index 71918404..96c172be 100644
--- a/src/Cli/GenerateInvoicesCommand.php
+++ b/src/Cli/GenerateInvoicesCommand.php
@@ -55,6 +55,7 @@ public function execute(InputInterface $input, OutputInterface $output): int
 
     protected function configure(): void
     {
+        $this->setName(self::$defaultName);
         $this->setDescription('Generates invoices for orders placed before InvoicingPlugin installation');
     }
 }
diff --git a/src/Resources/config/app/routing/admin_invoicing.yml b/src/Resources/config/app/routing/admin_invoicing.yml
index 31210723..f07813e8 100644
--- a/src/Resources/config/app/routing/admin_invoicing.yml
+++ b/src/Resources/config/app/routing/admin_invoicing.yml
@@ -2,7 +2,7 @@ sylius_invoicing_plugin_invoice:
     resource: |
         alias: sylius_invoicing_plugin.invoice
         section: admin
-        templates: "@SyliusAdmin\\Crud"
+        templates: "@SyliusAdmin\\shared\\crud"
         only: ['index']
         grid: sylius_invoicing_plugin_invoice
         permission: true
@@ -21,7 +21,7 @@ sylius_invoicing_plugin_admin_invoice_show:
         _sylius:
             section: admin
             permission: true
-            template: "@SyliusInvoicingPlugin/Invoice/show.html.twig"
+            template: "@SyliusAdmin/shared/crud/show.html.twig"
 
 sylius_invoicing_plugin_admin_invoice_download:
     path: /invoices/{id}/download
@@ -35,17 +35,6 @@ sylius_invoicing_plugin_admin_invoice_resend:
     defaults:
         _controller: sylius_invoicing_plugin.ui.action.resend_invoice
 
-sylius_invoicing_plugin_admin_order_invoices_partial:
-    path: /_partial/invoices/{orderNumber}/
-    methods: [GET]
-    defaults:
-        _controller: sylius_invoicing_plugin.controller.invoice::indexAction
-        _sylius:
-            template: $template
-            repository:
-                method: findByOrderNumber
-                arguments: $orderNumber
-
 sylius_invoicing_admin_order_show_by_number:
     path: /orders/by-number/{number}
     methods: [GET]
diff --git a/src/Resources/config/app/routing/shop_invoicing.yml b/src/Resources/config/app/routing/shop_invoicing.yml
index b967f6c8..84fc75e4 100644
--- a/src/Resources/config/app/routing/shop_invoicing.yml
+++ b/src/Resources/config/app/routing/shop_invoicing.yml
@@ -3,14 +3,3 @@ sylius_invoicing_plugin_shop_invoice_download:
     methods: [GET]
     defaults:
         _controller: sylius_invoicing_plugin.ui.action.download_invoice
-
-sylius_invoicing_plugin_shop_order_invoices_partial:
-    path: /_partial/invoices/{orderNumber}/
-    methods: [GET]
-    defaults:
-        _controller: sylius_invoicing_plugin.controller.invoice::indexAction
-        _sylius:
-            template: $template
-            repository:
-                method: findByOrderNumber
-                arguments: $orderNumber
diff --git a/src/Resources/config/app/twig_hooks/admin/invoice/show.yaml b/src/Resources/config/app/twig_hooks/admin/invoice/show.yaml
new file mode 100644
index 00000000..29cb5209
--- /dev/null
+++ b/src/Resources/config/app/twig_hooks/admin/invoice/show.yaml
@@ -0,0 +1,198 @@
+sylius_twig_hooks:
+    hooks:
+        'sylius_admin.invoice.show.content':
+            sections:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.header.title_block':
+            title:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title.html.twig'
+                priority: 100
+            actions:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/actions.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.header.title_block.title':
+            number:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title/number.html.twig'
+                priority: 100
+            subtitle:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/title/subtitle.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.header.title_block.actions':
+            back_to_index:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig'
+                priority: 200
+            download:
+                template: '@SyliusInvoicingPlugin/admin/shared/action/download.html.twig'
+                enabled: '%sylius_invoicing.pdf_generator.enabled%'
+                priority: 100
+            resend:
+                template: '@SyliusInvoicingPlugin/admin/shared/action/resend.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections':
+            buyer:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer.html.twig'
+                priority: 200
+            seller:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller.html.twig'
+                priority: 100
+            card:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.buyer':
+            first_name:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/first_name.html.twig'
+                priority: 500
+            company:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/company.html.twig'
+                priority: 400
+            street:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/street.html.twig'
+                priority: 300
+            city:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/city.html.twig'
+                priority: 200
+            country_code:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/country_code.html.twig'
+                priority: 100
+            postcode:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/buyer/postcode.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.seller':
+            company:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/company.html.twig'
+                priority: 600
+            representative:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/representative.html.twig'
+                priority: 500
+            street:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/street.html.twig'
+                priority: 400
+            city:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/city.html.twig'
+                priority: 300
+            tax_id:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/tax_id.html.twig'
+                priority: 200
+            country_code:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/country_code.html.twig'
+                priority: 100
+            postcode:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/seller/postcode.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card':
+            body:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body.html.twig'
+                priority: 100
+            footer:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/footer.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body':
+            table:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body.table':
+            header:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header.html.twig'
+                priority: 200
+            body:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body.html.twig'
+                priority: 100
+            footer:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body.table.header':
+            no:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/no.html.twig'
+                priority: 900
+            name:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/name.html.twig'
+                priority: 800
+            quantity:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig'
+                priority: 700
+            unit_net_price:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig'
+                priority: 600
+            discounted_unit_net_price:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig'
+                priority: 500
+            net_value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig'
+                priority: 400
+            tax_rate:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig'
+                priority: 300
+            tax_amount:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig'
+                priority: 200
+            gross_value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig'
+                priority: 100
+            currency:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body.table.body':
+            no:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/no.html.twig'
+                priority: 900
+            name:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/name.html.twig'
+                priority: 800
+            quantity:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/quantity.html.twig'
+                priority: 700
+            unit_net_price:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/unit_net_price.html.twig'
+                priority: 600
+            discounted_unit_net_price:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/discounted_unit_net_price.html.twig'
+                priority: 500
+            net_value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/net_value.html.twig'
+                priority: 400
+            tax_rate:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/tax_rate.html.twig'
+                priority: 300
+            tax_amount:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/tax_amount.html.twig'
+                priority: 200
+            gross_value:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/gross_value.html.twig'
+                priority: 100
+            currency:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body.table.footer':
+            net_total:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/net_total.html.twig'
+                priority: 300
+            taxes_total:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/taxes_total.html.twig'
+                priority: 200
+            total:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/total.html.twig'
+                priority: 100
+            tax_items:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/tax_items.html.twig'
+                priority: 0
+
+        'sylius_admin.invoice.show.content.sections.card.body.table.footer.tax_items':
+            tax_rate:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_rate.html.twig'
+                priority: 100
+            tax_item:
+                template: '@SyliusInvoicingPlugin/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_item.html.twig'
+                priority: 0
diff --git a/src/Resources/config/app/twig_hooks/admin/order/show.yaml b/src/Resources/config/app/twig_hooks/admin/order/show.yaml
new file mode 100644
index 00000000..a1091ca6
--- /dev/null
+++ b/src/Resources/config/app/twig_hooks/admin/order/show.yaml
@@ -0,0 +1,58 @@
+sylius_twig_hooks:
+    hooks:
+        'sylius_admin.order.show.content.sections#left':
+            invoices:
+                component: 'sylius_invoicing:invoice:list'
+                props:
+                    order: '@=_context.resource'
+                priority: -50
+
+        'sylius_admin.order.show.content.sections.invoices':
+            table:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table.html.twig'
+                priority: 0
+
+        'sylius_admin.order.show.content.sections.invoices.table':
+            head:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/head.html.twig'
+                priority: 100
+            body:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/body.html.twig'
+                priority: 0
+
+        'sylius_admin.order.show.content.sections.invoices.table.head':
+            number:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/head/number.html.twig'
+                priority: 300
+            channel:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/head/channel.html.twig'
+                priority: 200
+            issued_at:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig'
+                priority: 100
+            actions:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/head/actions.html.twig'
+                priority: 0
+
+        'sylius_admin.order.show.content.sections.invoices.table.body':
+            number:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/body/number.html.twig'
+                priority: 300
+            channel:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/body/channel.html.twig'
+                priority: 200
+            issued_at:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig'
+                priority: 100
+            actions:
+                template: '@SyliusInvoicingPlugin/admin/order/show/content/sections/invoices/table/body/actions.html.twig'
+                priority: 0
+
+        'sylius_admin.order.show.content.sections.invoices.table.body.actions':
+            download:
+                template: '@SyliusInvoicingPlugin/admin/shared/action/download.html.twig'
+                enabled: '%sylius_invoicing.pdf_generator.enabled%'
+                priority: 100
+            resend:
+                template: '@SyliusInvoicingPlugin/admin/shared/action/resend.html.twig'
+                priority: 0
diff --git a/src/Resources/config/app/twig_hooks/shop/order/summary.yaml b/src/Resources/config/app/twig_hooks/shop/order/summary.yaml
new file mode 100644
index 00000000..831fa607
--- /dev/null
+++ b/src/Resources/config/app/twig_hooks/shop/order/summary.yaml
@@ -0,0 +1,57 @@
+sylius_twig_hooks:
+    hooks:
+        'sylius_shop.account.order.show.content.summary':
+            invoices:
+                component: 'sylius_invoicing:invoice:list'
+                props:
+                    order: '@=_context.order'
+                priority: 350
+
+        'sylius_shop.account.order.show.content.summary.invoices':
+            card:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card.html.twig'
+                priority: 0
+
+        'sylius_shop.account.order.show.content.summary.invoices.card':
+            head:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/head.html.twig'
+                priority: 100
+            body:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body.html.twig'
+                priority: 0
+
+        'sylius_shop.account.order.show.content.summary.invoices.card.body':
+            table:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table.html.twig'
+                priority: 0
+
+        'sylius_shop.account.order.show.content.summary.invoices.card.body.table':
+            head:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/head.html.twig'
+                priority: 100
+            body:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/body.html.twig'
+                priority: 0
+
+        'sylius_shop.account.order.show.content.summary.invoices.card.body.table.head':
+            number:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/head/number.html.twig'
+                priority: 200
+            issued_at:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/head/issued_at.html.twig'
+                priority: 100
+            actions:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/head/actions.html.twig'
+                priority: 0
+
+        'sylius_shop.account.order.show.content.summary.invoices.card.body.table.body':
+            number:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/body/number.html.twig'
+                priority: 200
+            issued_at:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/body/issued_at.html.twig'
+                priority: 100
+            download:
+                template: '@SyliusInvoicingPlugin/shop/order/show/content/summary/invoices/card/body/table/body/download.html.twig'
+                enabled: '%sylius_invoicing.pdf_generator.enabled%'
+                priority: 0
diff --git a/src/Resources/config/app/winzou_state_machine.php b/src/Resources/config/app/winzou_state_machine.php
new file mode 100644
index 00000000..754f5168
--- /dev/null
+++ b/src/Resources/config/app/winzou_state_machine.php
@@ -0,0 +1,33 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+use winzou\Bundle\StateMachineBundle\winzouStateMachineBundle;
+
+return static function (ContainerConfigurator $container) {
+    if (class_exists(winzouStateMachineBundle::class)) {
+        $container->extension('winzou_state_machine', [
+            'sylius_payment' => [
+                'callbacks' => [
+                    'after' => [
+                        'sylius_invoicing_plugin_payment_complete_producer' => [
+                            'on' => ['complete'],
+                            'do' => ['@sylius_invoicing_plugin.event_producer.order_payment_paid', '__invoke'],
+                            'args' => ['object'],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+    }
+};
diff --git a/src/Resources/config/config.yml b/src/Resources/config/config.yml
index c3d386f8..1e87f1f6 100644
--- a/src/Resources/config/config.yml
+++ b/src/Resources/config/config.yml
@@ -1,3 +1,7 @@
+imports:
+    - { resource: "@SyliusInvoicingPlugin/Resources/config/app/winzou_state_machine.php" }
+    - { resource: 'app/twig_hooks/**/*.yaml' }
+
 parameters:
     sylius_invoicing.invoice_save_path: "%kernel.project_dir%/private/invoices/"
     sylius_invoicing.filesystem_adapter.invoice: "sylius_invoicing_invoice"
@@ -11,25 +15,18 @@ sylius_mailer:
     emails:
         invoice_generated:
             subject: sylius.emails.invoice_generated.subject
-            template: "@SyliusInvoicingPlugin/Invoice/Email/invoiceGenerated.html.twig"
+            template: "@SyliusInvoicingPlugin/admin/invoice/email/invoice_generated.html.twig"
 
 knp_snappy:
     pdf:
         enabled: true
 
-winzou_state_machine:
-    sylius_payment:
-        callbacks:
-            after:
-                sylius_invoicing_plugin_payment_complete_producer:
-                    on: ['complete']
-                    do: ['@sylius_invoicing_plugin.event_producer.order_payment_paid', '__invoke']
-                    args: ['object']
-
 sylius_grid:
     templates:
         filter:
-            invoice_channel: '@SyliusInvoicingPlugin/Grid/Filter/channel.html.twig'
+            invoice_channel: '@SyliusInvoicingPlugin/admin/invoice/index/grid/filter/channel.html.twig'
+        action:
+            download: '@SyliusInvoicingPlugin/admin/shared/action/download.html.twig'
     grids:
         sylius_invoicing_plugin_invoice:
             driver:
@@ -47,20 +44,20 @@ sylius_grid:
                     type: twig
                     label: sylius.ui.order
                     options:
-                        template: '@SyliusInvoicingPlugin/Invoice/Grid/Field/orderNumber.html.twig'
+                        template: '@SyliusInvoicingPlugin/admin/invoice/index/grid/field/order_number.html.twig'
                     sortable: order.number
                 channel:
                     type: twig
                     label: sylius.ui.channel
                     options:
-                        template: "@SyliusInvoicingPlugin/Invoice/Grid/Field/channel.html.twig"
+                        template: "@SyliusAdmin/shared/grid/field/channel.html.twig"
                 total:
                     type: twig
                     label: sylius.ui.total
                     path: .
                     sortable: total
                     options:
-                        template: "@SyliusAdmin/Order/Grid/Field/total.html.twig"
+                        template: "@SyliusAdmin/order/grid/field/order_total.html.twig"
                 issuedAt:
                     type: datetime
                     label: sylius_invoicing_plugin.ui.issued_at
@@ -87,10 +84,8 @@ sylius_grid:
                     show:
                         type: show
                     download:
-                        type: default
-                        label: sylius_invoicing_plugin.ui.download_invoice
+                        type: download
                         enabled: '%sylius_invoicing.pdf_generator.enabled%'
-                        icon: download
                         options:
                             link:
                                 route: sylius_invoicing_plugin_admin_invoice_download
@@ -106,50 +101,6 @@ sylius_grid:
                                 parameters:
                                     id: resource.id
 
-sylius_ui:
-    events:
-        sylius.admin.order.show.summary:
-            blocks:
-                sylius_invoicing_plugin:
-                    template: '@SyliusInvoicingPlugin/Order/Admin/fetchInvoices.html.twig'
-                    priority: 15
-
-        sylius.shop.account.order.show.subcontent:
-            blocks:
-                sylius_invoicing_plugin:
-                    template: '@SyliusInvoicingPlugin/Order/Shop/fetchInvoices.html.twig'
-                    priority: 15
-
-        sylius_invoicing.admin.invoice.buttons:
-            blocks:
-                back_button:
-                    template: '@SyliusInvoicingPlugin/Invoice/Show/_backButton.html.twig'
-                    priority: 30
-                download_button:
-                    template: '@SyliusInvoicingPlugin/Invoice/Admin/_downloadButton.html.twig'
-                    enabled: '%sylius_invoicing.pdf_generator.enabled%'
-                    priority: 20
-                resend_button:
-                    template: '@SyliusInvoicingPlugin/Invoice/Admin/_resendButton.html.twig'
-                    priority: 10
-
-        sylius_invoicing.admin.order.invoices.list.actions.buttons:
-            blocks:
-                download_button:
-                    template: '@SyliusInvoicingPlugin/Invoice/Admin/_downloadButton.html.twig'
-                    enabled: '%sylius_invoicing.pdf_generator.enabled%'
-                    priority: 20
-                resend_button:
-                    template: '@SyliusInvoicingPlugin/Invoice/Admin/_resendButton.html.twig'
-                    priority: 10
-
-        sylius_invoicing.shop.order.invoices.list.actions:
-            blocks:
-                download_button:
-                    template: '@SyliusInvoicingPlugin/Order/Shop/_downloadButton.html.twig'
-                    enabled: '%sylius_invoicing.pdf_generator.enabled%'
-                    priority: 10
-
 framework:
     messenger:
         buses:
diff --git a/src/Resources/config/services/generators.xml b/src/Resources/config/services/generators.xml
index a819f479..0410659f 100644
--- a/src/Resources/config/services/generators.xml
+++ b/src/Resources/config/services/generators.xml
@@ -33,7 +33,7 @@
             <argument type="service" id="sylius_invoicing_plugin.generator.twig_to_pdf" />
             <argument type="service" id="file_locator" />
             <argument type="service" id="Sylius\InvoicingPlugin\Generator\InvoiceFileNameGeneratorInterface" />
-            <argument>@SyliusInvoicingPlugin/Invoice/Download/pdf.html.twig</argument>
+            <argument>@SyliusInvoicingPlugin/shared/download/pdf.html.twig</argument>
             <argument>%sylius.invoicing.template.logo_file%</argument>
         </service>
 
diff --git a/src/Resources/config/services/twig.xml b/src/Resources/config/services/twig.xml
new file mode 100644
index 00000000..9f4c0333
--- /dev/null
+++ b/src/Resources/config/services/twig.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+  ~ This file is part of the Sylius package.
+  ~
+  ~ (c) Sylius Sp. z o.o.
+  ~
+  ~ For the full copyright and license information, please view the LICENSE
+  ~ file that was distributed with this source code.
+  -->
+
+<container xmlns="http://symfony.com/schema/dic/services" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+    <services>
+        <service
+                id="sylius_invoicing.twig.component.invoice.list"
+                class="Sylius\InvoicingPlugin\Twig\Component\Invoice\ListComponent"
+        >
+            <argument type="service" id="sylius_invoicing_plugin.repository.invoice" />
+
+            <tag
+                name="sylius.twig_component"
+                key="sylius_invoicing:invoice:list"
+                template="@SyliusInvoicingPlugin/shared/components/invoices.html.twig"
+            />
+        </service>
+    </services>
+</container>
diff --git a/src/Resources/views/Grid/Filter/channel.html.twig b/src/Resources/views/Grid/Filter/channel.html.twig
deleted file mode 100644
index 81480fcd..00000000
--- a/src/Resources/views/Grid/Filter/channel.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{% form_theme form '@SyliusUi/Form/theme.html.twig' %}
-
-{{ form_row(form) }}
diff --git a/src/Resources/views/Invoice/Admin/_downloadButton.html.twig b/src/Resources/views/Invoice/Admin/_downloadButton.html.twig
deleted file mode 100644
index 068b8cc6..00000000
--- a/src/Resources/views/Invoice/Admin/_downloadButton.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-
-{% set path = path('sylius_invoicing_plugin_admin_invoice_download', {'id': invoice.id}) %}
-
-{{ buttons.default(path, 'sylius_invoicing_plugin.ui.download_invoice'|trans, invoice.id, 'download', 'blue') }}
diff --git a/src/Resources/views/Invoice/Admin/_resendButton.html.twig b/src/Resources/views/Invoice/Admin/_resendButton.html.twig
deleted file mode 100644
index e6f57e3b..00000000
--- a/src/Resources/views/Invoice/Admin/_resendButton.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-
-{% set path = path('sylius_invoicing_plugin_admin_invoice_resend', {'id': invoice.id}) %}
-
-{{ buttons.default(path, 'sylius_invoicing_plugin.ui.resend_invoice'|trans, invoice.id, 'send') }}
diff --git a/src/Resources/views/Invoice/Grid/Field/channel.html.twig b/src/Resources/views/Invoice/Grid/Field/channel.html.twig
deleted file mode 100644
index 7341ba10..00000000
--- a/src/Resources/views/Invoice/Grid/Field/channel.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': data} %}
diff --git a/src/Resources/views/Invoice/Grid/Field/orderNumber.html.twig b/src/Resources/views/Invoice/Grid/Field/orderNumber.html.twig
deleted file mode 100644
index 39987143..00000000
--- a/src/Resources/views/Invoice/Grid/Field/orderNumber.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-<a href="{{ path('sylius_invoicing_admin_order_show_by_number', {'number': data}) }}">#{{ data }}</a>
diff --git a/src/Resources/views/Invoice/Show/_backButton.html.twig b/src/Resources/views/Invoice/Show/_backButton.html.twig
deleted file mode 100644
index 03096ac8..00000000
--- a/src/Resources/views/Invoice/Show/_backButton.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-
-{% set path = path('sylius_invoicing_plugin_admin_invoice_index') %}
-
-{{ buttons.default(path, '', 'back', 'arrow alternate circle left outline') }}
diff --git a/src/Resources/views/Invoice/Show/_billingData.html.twig b/src/Resources/views/Invoice/Show/_billingData.html.twig
deleted file mode 100644
index 8af704a9..00000000
--- a/src/Resources/views/Invoice/Show/_billingData.html.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{% set billingData = invoice.billingData %}
-
-<h4 class="ui top attached styled header">
-    {{ 'sylius_invoicing_plugin.ui.buyer'|trans }}
-</h4>
-<div class="ui attached segment" id="billing-data">
-    <address>
-        <strong>{{ billingData.firstName }} {{ billingData.lastName }}</strong>
-        {% if billingData.company %}
-            {{ billingData.company }}<br/>
-        {% endif %}
-        {{ billingData.street }}<br/>
-        {{ billingData.city }}<br/>
-        <i class="{{ billingData.countryCode|lower }} flag"></i>
-        {{ billingData.countryCode|sylius_country_name|upper }} {{ billingData.postcode }}
-    </address>
-</div>
diff --git a/src/Resources/views/Invoice/Show/_breadcrumb.html.twig b/src/Resources/views/Invoice/Show/_breadcrumb.html.twig
deleted file mode 100644
index 2a4ba37b..00000000
--- a/src/Resources/views/Invoice/Show/_breadcrumb.html.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-{% import '@SyliusAdmin/Macro/breadcrumb.html.twig' as breadcrumb %}
-
-{% set breadcrumbs = [
-    { label: 'sylius.ui.administration'|trans, url: path('sylius_admin_dashboard') },
-    { label: 'sylius_invoicing_plugin.ui.invoices'|trans, url: path('sylius_invoicing_plugin_admin_invoice_index') },
-    { label: invoice.id, url: path('sylius_invoicing_plugin_admin_invoice_show', { 'id': invoice.id }) }
-]
-%}
-
-{{ breadcrumb.crumble(breadcrumbs) }}
diff --git a/src/Resources/views/Invoice/Show/_header.html.twig b/src/Resources/views/Invoice/Show/_header.html.twig
deleted file mode 100644
index 5e7fd8b9..00000000
--- a/src/Resources/views/Invoice/Show/_header.html.twig
+++ /dev/null
@@ -1,20 +0,0 @@
-<h1 class="ui header">
-    <i class="circular inbox icon"></i>
-    <div class="content">
-        {{ 'sylius_invoicing_plugin.ui.invoice'|trans }} {{ invoice.number }}
-        <div class="sub header">
-            <div class="ui horizontal divided list">
-                <div class="item">
-                    {{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}: <span id="invoice-issued-at">{{ invoice.issuedAt|format_datetime }}</span>
-                </div>
-                <div class="item">
-                    {{ 'sylius_invoicing_plugin.ui.issued_for_order'|trans }}: #{{ invoice.order.number }}
-                </div>
-                <div class="item">
-                    {{ 'sylius_invoicing_plugin.ui.issued_from'|trans }}
-                    {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': invoice.channel} %}
-                </div>
-            </div>
-        </div>
-    </div>
-</h1>
diff --git a/src/Resources/views/Invoice/Show/_shopBillingData.html.twig b/src/Resources/views/Invoice/Show/_shopBillingData.html.twig
deleted file mode 100644
index 7c39638e..00000000
--- a/src/Resources/views/Invoice/Show/_shopBillingData.html.twig
+++ /dev/null
@@ -1,22 +0,0 @@
-{% set shopBillingData = invoice.shopBillingData %}
-
-{% if shopBillingData %}
-    <h4 class="ui top attached styled header">
-        {{ 'sylius_invoicing_plugin.ui.seller'|trans }}
-    </h4>
-    <div class="ui attached segment" id="shop-billing-data">
-        <address>
-            {% if shopBillingData.company %}<strong>{{ shopBillingData.company }}</strong>{% endif %}
-            {% if shopBillingData.representative %}<strong>{{ shopBillingData.representative }}</strong>{% endif %}
-            {% if shopBillingData.street %}{{ shopBillingData.street }}<br/>{% endif %}
-            {% if shopBillingData.city %}{{ shopBillingData.city }}<br/>{% endif %}
-            {% if shopBillingData.taxId %}{{ shopBillingData.taxId }}<br/>{% endif %}
-            {% if shopBillingData.countryCode %}
-                <i class="{{ shopBillingData.countryCode|lower }} flag"></i>
-            {% endif %}
-            {% if shopBillingData.countryCode and shopBillingData.postcode %}
-                {{ shopBillingData.countryCode|sylius_country_name|upper }} {{ shopBillingData.postcode }}
-            {% endif %}
-        </address>
-    </div>
-{% endif %}
diff --git a/src/Resources/views/Invoice/show.html.twig b/src/Resources/views/Invoice/show.html.twig
deleted file mode 100644
index 3e8c5812..00000000
--- a/src/Resources/views/Invoice/show.html.twig
+++ /dev/null
@@ -1,157 +0,0 @@
-{% extends '@SyliusAdmin/layout.html.twig' %}
-
-{% import '@SyliusAdmin/Common/Macro/money.html.twig' as money %}
-
-{% block title %}{{ 'sylius.ui.invoice'|trans ~ ' ' ~ invoice.number }} {{ parent() }}{% endblock %}
-
-{% block content %}
-    <div class="ui stackable two column grid">
-        <div class="ten wide column">
-            {% include '@SyliusInvoicingPlugin/Invoice/Show/_header.html.twig' %}
-            {% include '@SyliusInvoicingPlugin/Invoice/Show/_breadcrumb.html.twig' %}
-        </div>
-        <div class="six wide right aligned column">
-            {{ sylius_template_event('sylius_invoicing.admin.invoice.buttons', _context) }}
-        </div>
-    </div>
-
-    <div class="ui stackable grid">
-        <div class="eight wide column">
-            {% include '@SyliusInvoicingPlugin/Invoice/Show/_billingData.html.twig' %}
-        </div>
-        <div class="eight wide column">
-            {% include '@SyliusInvoicingPlugin/Invoice/Show/_shopBillingData.html.twig' %}
-        </div>
-    </div>
-    <div class="ui stackable segment grid">
-        <div class="sixteen wide column">
-            <table class="ui celled compact small table fixed">
-                <thead>
-                <tr>
-                    <th class="one wide">{{ 'sylius_invoicing_plugin.ui.no'|trans }}</th>
-                    <th class="four wide sylius-table-column-name">{{ 'sylius.ui.name'|trans }}</th>
-                    <th class="sylius-table-column-quantity">{{ 'sylius.ui.quantity'|trans }}</th>
-                    <th class="sylius-table-column-unit-net-price">{{ 'sylius_invoicing_plugin.ui.unit_net_price'|trans }}</th>
-                    <th class="sylius-table-column-discounted-unit-net-price">{{ 'sylius_invoicing_plugin.ui.discounted_unit_net_price'|trans }}</th>
-                    <th class="sylius-table-column-subtotal">{{ 'sylius_invoicing_plugin.ui.net_value'|trans }}</th>
-                    <th class="sylius-table-column-tax-rate">{{ 'sylius_invoicing_plugin.ui.tax_rate'|trans }}</th>
-                    <th class="sylius-table-column-tax_total">{{ 'sylius_invoicing_plugin.ui.tax_amount'|trans }}</th>
-                    <th class="sylius-table-column-total">{{ 'sylius_invoicing_plugin.ui.gross_value'|trans }}</th>
-                    <th class="sylius-table-column-total">{{ 'sylius.ui.currency'|trans }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                {% for item in invoice.lineItems %}
-                    <tr>
-                        <td class="single line">
-                            {{ loop.index }}
-                        </td>
-                        <td class="single line line-item-name">
-                            {{ item.name }} {% if item.variantName is not null %}({{ item.variantName }}){% endif %}
-                        </td>
-                        <td class="right aligned line-item-quantity">
-                            {{ item.quantity }}
-                        </td>
-                        <td class="right aligned line-item-unit-net-price">
-                            {{ '%0.2f'|format(item.unitPrice/100) }}
-                        </td>
-                        <td class="right aligned line-item-discounted-unit-net-price">
-                            {{ '%0.2f'|format(item.discountedUnitNetPrice/100) }}
-                        </td>
-                        <td class="right aligned line-item-subtotal">
-                            {{ '%0.2f'|format(item.subtotal/100) }}
-                        </td>
-                        <td {{ sylius_test_html_attribute('line-item-tax-rate') }}>
-                            {% if item.taxRate is null %}0%{% else %}{{ item.taxRate }}{% endif %}
-                        </td>
-                        <td class="right aligned line-item-tax-total">
-                            {{ '%0.2f'|format(item.taxTotal/100) }}
-                        </td>
-                        <td class="right aligned line-item-total">
-                            {{ '%0.2f'|format(item.total/100) }}
-                        </td>
-                        <td class="single line line-item-currency-code">
-                            {{ invoice.currencyCode }}
-                        </td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-                <tfoot>
-                <tr>
-                    <th colspan="8" class="right aligned">
-                        <strong>{{ 'sylius_invoicing_plugin.ui.net_total'|trans }}</strong>:
-                    </th>
-                    <th id="invoice-subtotal" class="right aligned" {{ sylius_test_html_attribute('invoice-net-total') }}>
-                        {{ '%0.2f'|format(invoice.subtotal/100) }}
-                    </th>
-                    <th id="invoice-net-total-currency-code" class="single line" {{ sylius_test_html_attribute('invoice-net-total-currency-code') }}>
-                        {{ invoice.currencyCode }}
-                    </th>
-                </tr>
-                <tr>
-                    <th colspan="8" class="right aligned">
-                        <strong>{{ 'sylius_invoicing_plugin.ui.taxes_total'|trans }}</strong>:
-                    </th>
-                    <th id="invoice-tax-total" class="right aligned" {{ sylius_test_html_attribute('invoice-taxes-total') }}>
-                        {{ '%0.2f'|format(invoice.taxesTotal/100) }}
-                    </th>
-                    <th id="invoice-taxes-total-currency-code" class="single line" {{ sylius_test_html_attribute('invoice-taxes-total-currency-code') }}>
-                        {{ invoice.currencyCode }}
-                    </th>
-                </tr>
-                <tr>
-                    <th colspan="8" class="right aligned">
-                        <strong>{{ 'sylius.ui.total'|trans }}</strong>:
-                    </th>
-                    <th id="invoice-total" class="right aligned" {{ sylius_test_html_attribute('invoice-total') }}>
-                        {{ '%0.2f'|format(invoice.total/100) }}
-                    </th>
-                    <th id="invoice-total-currency-code" class="single line" {{ sylius_test_html_attribute('invoice-total-currency-code') }}>
-                        {{ invoice.currencyCode }}
-                    </th>
-                </tr>
-
-                {% if invoice.taxItems.count() > 0 %}
-                <tr>
-                    <th colspan="8" class="right aligned">
-                        <strong>{{ 'sylius_invoicing_plugin.ui.tax_rate'|trans }}</strong>
-                    </th>
-                    <th class="right aligned">
-                        <strong>{{ 'sylius_invoicing_plugin.ui.tax_amount'|trans }}</strong>
-                    </th>
-                    <th class="left aligned">
-                        <strong>{{ 'sylius.ui.currency'|trans }}</strong>
-                    </th>
-                </tr>
-
-                {% for item in invoice.taxItems %}
-                <tr class="tax-item" {{ sylius_test_html_attribute('invoice-tax-item') }}>
-                    <th colspan="8" class="right aligned">
-                        <strong {{ sylius_test_html_attribute('invoice-tax-item-label') }}>{{ item.label }}</strong>:
-                    </th>
-                    <th class="right aligned tax-item-amount" {{ sylius_test_html_attribute('invoice-tax-item-amount') }}>
-                        {{ '%0.2f'|format(item.amount/100) }}
-                    </th>
-                    <th class="single line" {{ sylius_test_html_attribute('invoice-tax-item-currency-code') }}>
-                        {{ invoice.currencyCode }}
-                    </th>
-                </tr>
-                {% endfor %}
-                {% endif %}
-                </tfoot>
-            </table>
-        </div>
-        <div class="right floated left aligned four wide column">
-            <div class="ui segment" {{ sylius_test_html_attribute('invoice-is-paid') }}>
-                <strong>{{ 'sylius_invoicing_plugin.ui.payment.paid'|trans }}: </strong>
-                <span>
-                {% if invoice.paymentState() is constant('Sylius\\InvoicingPlugin\\Entity\\InvoiceInterface::PAYMENT_STATE_COMPLETED') %}
-                       {{ 'sylius_invoicing_plugin.ui.payment.yes'|trans }}
-                    {% else %}
-                        {{ 'sylius_invoicing_plugin.ui.payment.no'|trans }}
-                    {% endif %}
-                </span>
-            </div>
-        </div>
-    </div>
-{% endblock %}
diff --git a/src/Resources/views/Order/Admin/_invoices.html.twig b/src/Resources/views/Order/Admin/_invoices.html.twig
deleted file mode 100644
index c1eaf313..00000000
--- a/src/Resources/views/Order/Admin/_invoices.html.twig
+++ /dev/null
@@ -1,34 +0,0 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-
-<div class="ui segment" id="order-invoices" style="overflow-x: auto;">
-    <h3 class="ui dividing header" id="shipping-state">{{ 'sylius_invoicing_plugin.ui.invoices'|trans }}</h3>
-    <table class="ui celled compact table">
-        <thead>
-        <tr>
-            <th>{{ 'sylius.ui.number'|trans }}</th>
-            <th>{{ 'sylius.ui.channel'|trans }}</th>
-            <th>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}</th>
-            <th>{{ 'sylius.ui.actions'|trans }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for invoice in invoices %}
-            <tr>
-                <td>
-                    <a href="{{ path('sylius_invoicing_plugin_admin_invoice_show', {'id': invoice.id}) }}" >{{ invoice.number }}</a>
-                </td>
-                <td>
-                    {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': invoice.channel} %}
-                <td>
-                    {{ invoice.issuedAt|format_date }}
-                </td>
-                <td>
-                    <div class="ui buttons">
-                        {{ sylius_template_event('sylius_invoicing.admin.order.invoices.list.actions.buttons', _context) }}
-                    </div>
-                </td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-</div>
diff --git a/src/Resources/views/Order/Admin/fetchInvoices.html.twig b/src/Resources/views/Order/Admin/fetchInvoices.html.twig
deleted file mode 100644
index 00a74c6d..00000000
--- a/src/Resources/views/Order/Admin/fetchInvoices.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ render(url('sylius_invoicing_plugin_admin_order_invoices_partial', {'orderNumber': order.number, 'template': '@SyliusInvoicingPlugin/Order/Admin/_invoices.html.twig'})) }}
diff --git a/src/Resources/views/Order/Shop/_downloadButton.html.twig b/src/Resources/views/Order/Shop/_downloadButton.html.twig
deleted file mode 100644
index 84aeccdb..00000000
--- a/src/Resources/views/Order/Shop/_downloadButton.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
-
-{% set path = path('sylius_invoicing_plugin_shop_invoice_download', { 'id': invoice.id }) %}
-
-{{ buttons.default(path, 'sylius_invoicing_plugin.ui.download_invoice'|trans, invoice.id, 'download') }}
diff --git a/src/Resources/views/Order/Shop/_invoices.html.twig b/src/Resources/views/Order/Shop/_invoices.html.twig
deleted file mode 100644
index 01ad549f..00000000
--- a/src/Resources/views/Order/Shop/_invoices.html.twig
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="ui segment" id="order-invoices">
-    <h3 class="ui dividing header" id="shipping-state">{{ 'sylius_invoicing_plugin.ui.invoices'|trans }}</h3>
-    <table class="ui celled compact small table fixed">
-        <thead>
-        <tr>
-            <th>{{ 'sylius.ui.number'|trans }}</th>
-            <th>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}</th>
-            <th>{{ 'sylius.ui.actions'|trans }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for invoice in invoices %}
-            <tr>
-                <td>
-                    {{ invoice.number }}
-                </td>
-                <td>
-                    {{ invoice.issuedAt|format_date }}
-                </td>
-                <td>
-                    {{ sylius_template_event('sylius_invoicing.shop.order.invoices.list.actions', _context) }}
-                </td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-</div>
-
-<style>
-    #order-invoices th, #order-invoices td {
-        text-align: left !important;
-    }
-
-    #order-invoices td {
-        padding: 1rem 0 1rem .5rem !important;
-    }
-
-    #order-invoices th:nth-child(3) {
-        width: auto;
-    }
-
-    #order-invoices .ui.buttons {
-        display: block;
-    }
-</style>
diff --git a/src/Resources/views/Order/Shop/fetchInvoices.html.twig b/src/Resources/views/Order/Shop/fetchInvoices.html.twig
deleted file mode 100644
index d835839d..00000000
--- a/src/Resources/views/Order/Shop/fetchInvoices.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ render(url('sylius_invoicing_plugin_shop_order_invoices_partial', {'orderNumber': order.number, 'template': '@SyliusInvoicingPlugin/Order/Shop/_invoices.html.twig'})) }}
diff --git a/src/Twig/Component/Invoice/ListComponent.php b/src/Twig/Component/Invoice/ListComponent.php
new file mode 100644
index 00000000..ce23d049
--- /dev/null
+++ b/src/Twig/Component/Invoice/ListComponent.php
@@ -0,0 +1,46 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\InvoicingPlugin\Twig\Component\Invoice;
+
+use Sylius\Component\Core\Model\OrderInterface;
+use Sylius\InvoicingPlugin\Doctrine\ORM\InvoiceRepositoryInterface;
+use Sylius\InvoicingPlugin\Entity\Invoice;
+use Sylius\InvoicingPlugin\Entity\InvoiceInterface;
+use Sylius\TwigHooks\Twig\Component\HookableComponentTrait;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+#[AsTwigComponent]
+class ListComponent
+{
+    use HookableComponentTrait;
+
+    public OrderInterface $order;
+
+    /**
+     * @param InvoiceRepositoryInterface<Invoice> $productReviewRepository
+     */
+    public function __construct(private readonly InvoiceRepositoryInterface $invoiceRepository)
+    {
+    }
+
+    /**
+     * @return array|InvoiceInterface[]
+     */
+    #[ExposeInTemplate('invoices')]
+    public function getInvoices(): array
+    {
+        return $this->invoiceRepository->findByOrderNumber($this->order->getNumber());
+    }
+}
diff --git a/src/Resources/views/Invoice/Email/invoiceGenerated.html.twig b/src/templates/admin/invoice/email/invoice_generated.html.twig
similarity index 100%
rename from src/Resources/views/Invoice/Email/invoiceGenerated.html.twig
rename to src/templates/admin/invoice/email/invoice_generated.html.twig
diff --git a/src/templates/admin/invoice/index/grid/field/order_number.html.twig b/src/templates/admin/invoice/index/grid/field/order_number.html.twig
new file mode 100644
index 00000000..4008a4da
--- /dev/null
+++ b/src/templates/admin/invoice/index/grid/field/order_number.html.twig
@@ -0,0 +1 @@
+<a class="fw-medium" href="{{ path('sylius_invoicing_admin_order_show_by_number', {'number' : data })|raw }}" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.show_order_details'|trans }}">#{{ data }}</a>
diff --git a/src/templates/admin/invoice/index/grid/filter/channel.html.twig b/src/templates/admin/invoice/index/grid/filter/channel.html.twig
new file mode 100644
index 00000000..9f591997
--- /dev/null
+++ b/src/templates/admin/invoice/index/grid/filter/channel.html.twig
@@ -0,0 +1,3 @@
+{% form_theme form '@SyliusAdmin/shared/form_theme.html.twig' %}
+
+{{ form_row(form) }}
diff --git a/src/templates/admin/invoice/show/content/header/title_block/actions.html.twig b/src/templates/admin/invoice/show/content/header/title_block/actions.html.twig
new file mode 100644
index 00000000..6dd05642
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/header/title_block/actions.html.twig
@@ -0,0 +1,3 @@
+<div class="col-12 col-md-auto ms-auto d-print-none">
+    {% hook 'actions' %}
+</div>
diff --git a/src/templates/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig b/src/templates/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig
new file mode 100644
index 00000000..f38628a1
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/header/title_block/actions/back_to_index.html.twig
@@ -0,0 +1,5 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
+<a {{ sylius_test_html_attribute('back') }} href="{{ path('sylius_invoicing_plugin_admin_invoice_index') }}" class="btn">
+    {{ icon({ icon: 'arrow_back_up', class: 'icon' }) }}
+</a>
diff --git a/src/templates/admin/invoice/show/content/header/title_block/title.html.twig b/src/templates/admin/invoice/show/content/header/title_block/title.html.twig
new file mode 100644
index 00000000..c80e5593
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/header/title_block/title.html.twig
@@ -0,0 +1,5 @@
+<div class="col-12 col-md-6">
+    <div class="d-md-flex flex-column gap-2">
+        {% hook 'title' %}
+    </div>
+</div>
diff --git a/src/templates/admin/invoice/show/content/header/title_block/title/number.html.twig b/src/templates/admin/invoice/show/content/header/title_block/title/number.html.twig
new file mode 100644
index 00000000..0fcdf130
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/header/title_block/title/number.html.twig
@@ -0,0 +1,3 @@
+<h1 class="page-title">
+    {{ 'sylius_invoicing_plugin.ui.invoice'|trans }} {{  hookable_metadata.context.resource.number }}
+</h1>
diff --git a/src/templates/admin/invoice/show/content/header/title_block/title/subtitle.html.twig b/src/templates/admin/invoice/show/content/header/title_block/title/subtitle.html.twig
new file mode 100644
index 00000000..0a9cd358
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/header/title_block/title/subtitle.html.twig
@@ -0,0 +1,20 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<div class="mt-1">
+    <ul class="list-inline mb-0">
+        <li class="list-inline-item">
+            <strong>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}:</strong>
+            <span {{ sylius_test_html_attribute('issued-at') }}>{{ invoice.issuedAt|format_datetime }}</span>
+        </li>
+        <li class="list-inline-item">
+            <strong>{{ 'sylius_invoicing_plugin.ui.issued_for_order'|trans }}:</strong>
+            #{{ invoice.order.number }}
+        </li>
+        <li class="list-inline-item">
+            <strong>{{ 'sylius_invoicing_plugin.ui.issued_from'|trans }}:</strong>
+            <div {{ sylius_test_html_attribute('channel') }} class="d-inline">
+                {% include '@SyliusAdmin/shared/grid/field/channel.html.twig' with {'data': invoice.channel} %}
+            </div>
+        </li>
+    </ul>
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections.html.twig b/src/templates/admin/invoice/show/content/sections.html.twig
new file mode 100644
index 00000000..dd8f10ad
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections.html.twig
@@ -0,0 +1,7 @@
+<div class="page-body">
+    <div class="container-xl">
+        <div class="row">
+            {% hook 'sections' %}
+        </div>
+    </div>
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/buyer.html.twig b/src/templates/admin/invoice/show/content/sections/buyer.html.twig
new file mode 100644
index 00000000..dc42ef86
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer.html.twig
@@ -0,0 +1,16 @@
+<div class="col">
+    <div class="card mb-3">
+        <div class="card-header">
+            <div class="card-title">
+                {{ 'sylius_invoicing_plugin.ui.buyer'|trans }}
+            </div>
+        </div>
+        <div class="card-body">
+            <div class="row align-items-center">
+                <address {{ sylius_test_html_attribute('billing-data') }}>
+                    {% hook 'buyer' %}
+                </address>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/city.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/city.html.twig
new file mode 100644
index 00000000..b4a2b489
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/city.html.twig
@@ -0,0 +1 @@
+{{ hookable_metadata.context.resource.billingData.city }}<br/>
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/company.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/company.html.twig
new file mode 100644
index 00000000..88cf80c6
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/company.html.twig
@@ -0,0 +1,5 @@
+{% set billing_data = hookable_metadata.context.resource.billingData %}
+
+{% if billing_data.company %}
+    {{ billing_data.company }}<br/>
+{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/country_code.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/country_code.html.twig
new file mode 100644
index 00000000..b5199bea
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/country_code.html.twig
@@ -0,0 +1 @@
+<span class="flag flag-sm flag-country-{{ hookable_metadata.context.resource.billingData.countryCode|lower }} me-2"></span>
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/first_name.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/first_name.html.twig
new file mode 100644
index 00000000..3149e9ef
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/first_name.html.twig
@@ -0,0 +1,3 @@
+{% set billing_data = hookable_metadata.context.resource.billingData %}
+
+<strong>{{ billing_data.firstName }} {{ billing_data.lastName }}</strong>
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/postcode.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/postcode.html.twig
new file mode 100644
index 00000000..5b90f5a0
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/postcode.html.twig
@@ -0,0 +1,3 @@
+{% set billing_data = hookable_metadata.context.resource.billingData %}
+
+{{ billing_data.countryCode|sylius_country_name|upper }} {{ billing_data.postcode }}
diff --git a/src/templates/admin/invoice/show/content/sections/buyer/street.html.twig b/src/templates/admin/invoice/show/content/sections/buyer/street.html.twig
new file mode 100644
index 00000000..179ffa5e
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/buyer/street.html.twig
@@ -0,0 +1 @@
+{{ hookable_metadata.context.resource.billingData.street }}<br/>
diff --git a/src/templates/admin/invoice/show/content/sections/card.html.twig b/src/templates/admin/invoice/show/content/sections/card.html.twig
new file mode 100644
index 00000000..d5e00f32
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card.html.twig
@@ -0,0 +1,5 @@
+{% set invoice = hookable_metadata.context.resource %}
+
+<div class="card mb-3 mb-2">
+    {% hook 'card' %}
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body.html.twig b/src/templates/admin/invoice/show/content/sections/card/body.html.twig
new file mode 100644
index 00000000..44429c31
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body.html.twig
@@ -0,0 +1,3 @@
+<div class="card-body">
+    {% hook 'body' %}
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table.html.twig
new file mode 100644
index 00000000..e5e75a2c
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table.html.twig
@@ -0,0 +1,5 @@
+<div class="table-responsive">
+    <table class="table table-bordered table-striped table-sm">
+        {% hook 'table' %}
+    </table>
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body.html.twig
new file mode 100644
index 00000000..895f6351
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body.html.twig
@@ -0,0 +1,7 @@
+<tbody>
+    {% for item in hookable_metadata.context.resource.lineItems %}
+        <tr>
+            {% hook 'body' with { item, loop } %}
+        </tr>
+    {% endfor %}
+</tbody>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig
new file mode 100644
index 00000000..3d2cf821
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/currency.html.twig
@@ -0,0 +1 @@
+<td>{{ hookable_metadata.context.resource.currencyCode }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/discounted_unit_net_price.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/discounted_unit_net_price.html.twig
new file mode 100644
index 00000000..8346ff93
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/discounted_unit_net_price.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ '%0.2f'|format(hookable_metadata.context.item.discountedUnitNetPrice/100) }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/gross_value.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/gross_value.html.twig
new file mode 100644
index 00000000..32f0a20d
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/gross_value.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ '%0.2f'|format(hookable_metadata.context.item.total/100) }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/name.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/name.html.twig
new file mode 100644
index 00000000..2d706ddc
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/name.html.twig
@@ -0,0 +1 @@
+<td>{{ hookable_metadata.context.item.name }} {% if hookable_metadata.context.item.variantName is not null %}({{ hookable_metadata.context.item.variantName }}){% endif %}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/net_value.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/net_value.html.twig
new file mode 100644
index 00000000..829fecac
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/net_value.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ '%0.2f'|format(hookable_metadata.context.item.subtotal/100) }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/no.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/no.html.twig
new file mode 100644
index 00000000..468618da
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/no.html.twig
@@ -0,0 +1 @@
+<td>{{ hookable_metadata.context.loop.index }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/quantity.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/quantity.html.twig
new file mode 100644
index 00000000..99592e6b
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/quantity.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ hookable_metadata.context.item.quantity }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_amount.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_amount.html.twig
new file mode 100644
index 00000000..617d43f7
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_amount.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ '%0.2f'|format(hookable_metadata.context.item.taxTotal/100) }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_rate.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_rate.html.twig
new file mode 100644
index 00000000..8e8ebd72
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/tax_rate.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{% if hookable_metadata.context.item.taxRate is null %}0%{% else %}{{ hookable_metadata.context.item.taxRate }}{% endif %}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/body/unit_net_price.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/body/unit_net_price.html.twig
new file mode 100644
index 00000000..cf702eb1
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/body/unit_net_price.html.twig
@@ -0,0 +1 @@
+<td class="text-end">{{ '%0.2f'|format(hookable_metadata.context.item.unitPrice/100) }}</td>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/footer.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/footer.html.twig
new file mode 100644
index 00000000..e9653d75
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/footer.html.twig
@@ -0,0 +1,3 @@
+<tfoot>
+    {% hook 'footer' %}
+</tfoot>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/footer/net_total.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/net_total.html.twig
new file mode 100644
index 00000000..0e610c6d
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/net_total.html.twig
@@ -0,0 +1,5 @@
+<tr>
+    <th colspan="8" class="text-end"><strong>{{ 'sylius_invoicing_plugin.ui.net_total'|trans }}</strong>:</th>
+    <th class="text-end" {{ sylius_test_html_attribute('invoice-net-total') }}>{{ '%0.2f'|format(hookable_metadata.context.resource.subtotal/100) }}</th>
+    <th {{ sylius_test_html_attribute('invoice-net-total-currency-code') }}>{{ hookable_metadata.context.resource.currencyCode }}</th>
+</tr>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items.html.twig
new file mode 100644
index 00000000..02b701dd
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items.html.twig
@@ -0,0 +1,14 @@
+{% if hookable_metadata.context.resource.taxItems.count() > 0 %}
+    <tr>
+        <th colspan="8" class="text-end"><strong>{{ 'sylius_invoicing_plugin.ui.tax_rate'|trans }}</strong></th>
+        <th class="text-end"><strong>{{ 'sylius_invoicing_plugin.ui.tax_amount'|trans }}</strong></th>
+        <th><strong>{{ 'sylius.ui.currency'|trans }}</strong></th>
+    </tr>
+    {% for item in hookable_metadata.context.resource.taxItems %}
+        <tr class="tax-item" {{ sylius_test_html_attribute('invoice-tax-item') }}>
+            <th colspan="8" class="text-end"><strong {{ sylius_test_html_attribute('invoice-tax-item-label') }}>{{ item.label }}</strong>:</th>
+            <th class="text-end" {{ sylius_test_html_attribute('invoice-tax-item-amount') }}>{{ '%0.2f'|format(item.amount/100) }}</th>
+            <th {{ sylius_test_html_attribute('invoice-tax-item-currency-code') }}>{{ hookable_metadata.context.resource.currencyCode }}</th>
+        </tr>
+    {% endfor %}
+{% endif %}
diff --git a/tests/Application/gulpfile.babel.js b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_item.html.twig
similarity index 100%
rename from tests/Application/gulpfile.babel.js
rename to src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_item.html.twig
diff --git a/tests/Application/public/media/image/.gitignore b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_rate.html.twig
similarity index 100%
rename from tests/Application/public/media/image/.gitignore
rename to src/templates/admin/invoice/show/content/sections/card/body/table/footer/tax_items/tax_rate.html.twig
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/footer/taxes_total.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/taxes_total.html.twig
new file mode 100644
index 00000000..17b789d0
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/taxes_total.html.twig
@@ -0,0 +1,5 @@
+<tr>
+    <th colspan="8" class="text-end"><strong>{{ 'sylius_invoicing_plugin.ui.taxes_total'|trans }}</strong>:</th>
+    <th class="text-end" {{ sylius_test_html_attribute('invoice-taxes-total') }}>{{ '%0.2f'|format(hookable_metadata.context.resource.taxesTotal/100) }}</th>
+    <th {{ sylius_test_html_attribute('invoice-taxes-total-currency-code') }}>{{ hookable_metadata.context.resource.currencyCode }}</th>
+</tr>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/footer/total.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/total.html.twig
new file mode 100644
index 00000000..3f6791da
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/footer/total.html.twig
@@ -0,0 +1,5 @@
+<tr>
+    <th colspan="8" class="text-end"><strong>{{ 'sylius.ui.total'|trans }}</strong>:</th>
+    <th class="text-end" {{ sylius_test_html_attribute('invoice-total') }}>{{ '%0.2f'|format(hookable_metadata.context.resource.total/100) }}</th>
+    <th {{ sylius_test_html_attribute('invoice-total-currency-code') }}>{{ hookable_metadata.context.resource.currencyCode }}</th>
+</tr>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header.html.twig
new file mode 100644
index 00000000..8b3926f5
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header.html.twig
@@ -0,0 +1,5 @@
+<thead class="thead-light">
+    <tr>
+        {% hook 'header' %}
+    </tr>
+</thead>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig
new file mode 100644
index 00000000..bb8d9b9d
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/currency.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-total" scope="col">{{ 'sylius.ui.currency'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig
new file mode 100644
index 00000000..e902cb47
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/discounted_unit_net_price.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-discounted-unit-net-price" scope="col">{{ 'sylius_invoicing_plugin.ui.discounted_unit_net_price'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig
new file mode 100644
index 00000000..1a633f05
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/gross_value.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-total" scope="col">{{ 'sylius_invoicing_plugin.ui.gross_value'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/name.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/name.html.twig
new file mode 100644
index 00000000..ec340a10
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/name.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-name" scope="col">{{ 'sylius.ui.name'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig
new file mode 100644
index 00000000..f494a03c
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/net_value.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-subtotal" scope="col">{{ 'sylius_invoicing_plugin.ui.net_value'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/no.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/no.html.twig
new file mode 100644
index 00000000..e9d1b9d9
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/no.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-number" scope="col">{{ 'sylius_invoicing_plugin.ui.no'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig
new file mode 100644
index 00000000..2174fe59
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/quantity.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-quantity" scope="col">{{ 'sylius.ui.quantity'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig
new file mode 100644
index 00000000..ed128b51
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_amount.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-tax_total" scope="col">{{ 'sylius_invoicing_plugin.ui.tax_amount'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig
new file mode 100644
index 00000000..42d100cb
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/tax_rate.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-tax-rate" scope="col">{{ 'sylius_invoicing_plugin.ui.tax_rate'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig b/src/templates/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig
new file mode 100644
index 00000000..0d7c84dc
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/body/table/header/unit_net_price.html.twig
@@ -0,0 +1 @@
+<th class="sylius-table-column-unit-net-price" scope="col">{{ 'sylius_invoicing_plugin.ui.unit_net_price'|trans }}</th>
diff --git a/src/templates/admin/invoice/show/content/sections/card/footer.html.twig b/src/templates/admin/invoice/show/content/sections/card/footer.html.twig
new file mode 100644
index 00000000..68f03fc6
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/card/footer.html.twig
@@ -0,0 +1,12 @@
+<div class="card-footer text-end">
+    <div class="d-inline-block" {{ sylius_test_html_attribute('invoice-is-paid') }}>
+        <strong>{{ 'sylius_invoicing_plugin.ui.payment.paid'|trans }}: </strong>
+        <span>
+            {% if hookable_metadata.context.resource.paymentState is constant('Sylius\\InvoicingPlugin\\Entity\\InvoiceInterface::PAYMENT_STATE_COMPLETED') %}
+                {{ 'sylius_invoicing_plugin.ui.payment.yes'|trans }}
+            {% else %}
+                {{ 'sylius_invoicing_plugin.ui.payment.no'|trans }}
+            {% endif %}
+        </span>
+    </div>
+</div>
diff --git a/src/templates/admin/invoice/show/content/sections/seller.html.twig b/src/templates/admin/invoice/show/content/sections/seller.html.twig
new file mode 100644
index 00000000..c6f4d0b0
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller.html.twig
@@ -0,0 +1,20 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data %}
+    <div class="col">
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title">
+                    {{ 'sylius_invoicing_plugin.ui.seller'|trans }}
+                </div>
+            </div>
+            <div class="card-body">
+                <div class="row align-items-center">
+                    <address {{ sylius_test_html_attribute('shop-billing-data') }}>
+                        {% hook 'seller' %}
+                    </address>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/city.html.twig b/src/templates/admin/invoice/show/content/sections/seller/city.html.twig
new file mode 100644
index 00000000..bee092b0
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/city.html.twig
@@ -0,0 +1,3 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.city %}{{ shop_billing_data.city }}<br/>{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/company.html.twig b/src/templates/admin/invoice/show/content/sections/seller/company.html.twig
new file mode 100644
index 00000000..b0da0fbd
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/company.html.twig
@@ -0,0 +1,3 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.company %}<strong>{{ shop_billing_data.company }}</strong>{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/country_code.html.twig b/src/templates/admin/invoice/show/content/sections/seller/country_code.html.twig
new file mode 100644
index 00000000..f5f15bb2
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/country_code.html.twig
@@ -0,0 +1,5 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.countryCode %}
+    <span class="flag flag-sm flag-country-{{ shop_billing_data.countryCode|lower }} me-2"></span>
+{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/postcode.html.twig b/src/templates/admin/invoice/show/content/sections/seller/postcode.html.twig
new file mode 100644
index 00000000..fedcb1e3
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/postcode.html.twig
@@ -0,0 +1,5 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.countryCode and shop_billing_data.postcode %}
+    {{ shop_billing_data.countryCode|sylius_country_name|upper }} {{ shop_billing_data.postcode }}
+{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/representative.html.twig b/src/templates/admin/invoice/show/content/sections/seller/representative.html.twig
new file mode 100644
index 00000000..d174c930
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/representative.html.twig
@@ -0,0 +1,3 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.representative %}<strong>{{ shop_billing_data.representative }}</strong>{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/street.html.twig b/src/templates/admin/invoice/show/content/sections/seller/street.html.twig
new file mode 100644
index 00000000..80f03ec8
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/street.html.twig
@@ -0,0 +1,3 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.street %}{{ shop_billing_data.street }}<br/>{% endif %}
diff --git a/src/templates/admin/invoice/show/content/sections/seller/tax_id.html.twig b/src/templates/admin/invoice/show/content/sections/seller/tax_id.html.twig
new file mode 100644
index 00000000..ab1b0ca9
--- /dev/null
+++ b/src/templates/admin/invoice/show/content/sections/seller/tax_id.html.twig
@@ -0,0 +1,3 @@
+{% set shop_billing_data = hookable_metadata.context.resource.shopBillingData %}
+
+{% if shop_billing_data.taxId %}{{ shop_billing_data.taxId }}<br/>{% endif %}
diff --git a/src/templates/admin/order/show/content/sections/invoices/table.html.twig b/src/templates/admin/order/show/content/sections/invoices/table.html.twig
new file mode 100644
index 00000000..7ce8220d
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table.html.twig
@@ -0,0 +1,10 @@
+<div class="card mb-3">
+    <div class="card-header">
+        <div class="card-title">
+            {{ 'sylius_invoicing_plugin.ui.invoices'|trans }}
+        </div>
+    </div>
+    <table class="table table-borderless align-middle mb-0">
+        {% hook 'table' %}
+    </table>
+</div>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/body.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/body.html.twig
new file mode 100644
index 00000000..a2121a0e
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/body.html.twig
@@ -0,0 +1,7 @@
+<tbody {{ sylius_test_html_attribute('invoices') }}>
+    {% for invoice in hookable_metadata.context.invoices %}
+        <tr>
+            {% hook 'body' with { invoice } %}
+        </tr>
+    {% endfor %}
+</tbody>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/body/actions.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/body/actions.html.twig
new file mode 100644
index 00000000..82679abd
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/body/actions.html.twig
@@ -0,0 +1,3 @@
+<td>
+    {% hook 'actions' %}
+</td>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/body/channel.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/body/channel.html.twig
new file mode 100644
index 00000000..51f85b49
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/body/channel.html.twig
@@ -0,0 +1,3 @@
+<td>
+    {% include '@SyliusAdmin/shared/grid/field/channel.html.twig' with {'data': hookable_metadata.context.invoice.channel} %}
+</td>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig
new file mode 100644
index 00000000..ff38fe43
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/body/issued_at.html.twig
@@ -0,0 +1,3 @@
+<td {{ sylius_test_html_attribute('issued-at') }}>
+    {{ hookable_metadata.context.invoice.issuedAt|format_date }}
+</td>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/body/number.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/body/number.html.twig
new file mode 100644
index 00000000..45f120a4
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/body/number.html.twig
@@ -0,0 +1,3 @@
+<td>
+    <a href="{{ path('sylius_invoicing_plugin_admin_invoice_show', {'id': hookable_metadata.context.invoice.id}) }}" class="text-decoration-none">{{ hookable_metadata.context.invoice.number }}</a>
+</td>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/head.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/head.html.twig
new file mode 100644
index 00000000..34449406
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/head.html.twig
@@ -0,0 +1,5 @@
+<thead class="border-bottom">
+    <tr>
+        {% hook 'head' %}
+    </tr>
+</thead>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/head/actions.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/head/actions.html.twig
new file mode 100644
index 00000000..204784dd
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/head/actions.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius.ui.actions'|trans }}</th>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/head/channel.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/head/channel.html.twig
new file mode 100644
index 00000000..59186e6a
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/head/channel.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius.ui.channel'|trans }}</th>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig
new file mode 100644
index 00000000..c6d50b86
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/head/issued_at.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}</th>
diff --git a/src/templates/admin/order/show/content/sections/invoices/table/head/number.html.twig b/src/templates/admin/order/show/content/sections/invoices/table/head/number.html.twig
new file mode 100644
index 00000000..d7da088a
--- /dev/null
+++ b/src/templates/admin/order/show/content/sections/invoices/table/head/number.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius.ui.number'|trans }}</th>
diff --git a/src/templates/admin/shared/action/download.html.twig b/src/templates/admin/shared/action/download.html.twig
new file mode 100644
index 00000000..6f43c19a
--- /dev/null
+++ b/src/templates/admin/shared/action/download.html.twig
@@ -0,0 +1,28 @@
+{% if hookable_metadata.context.invoice is defined %}
+    {% set invoice = hookable_metadata.context.invoice %}
+{% elseif hookable_metadata.context.resource is defined %}
+    {% set invoice = hookable_metadata.context.resource %}
+{% else %}
+    {% set invoice = data %}
+{% endif %}
+
+{% set path = path('sylius_invoicing_plugin_admin_invoice_download', {'id': invoice.id}) %}
+
+<a href="{{ path }}" class="btn" {{ sylius_test_html_attribute('download-button') }}>
+    <svg  xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="icon icon-tabler icons-tabler-outline icon-tabler-download"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+        <path d="M7 11l5 5l5 -5" />
+        <path d="M12 4l0 12" />
+    </svg>
+    {{ 'sylius_invoicing_plugin.ui.download_invoice'|trans }}
+</a>
diff --git a/src/templates/admin/shared/action/resend.html.twig b/src/templates/admin/shared/action/resend.html.twig
new file mode 100644
index 00000000..f92e8ec1
--- /dev/null
+++ b/src/templates/admin/shared/action/resend.html.twig
@@ -0,0 +1,16 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
+{% if hookable_metadata.context.invoice is defined %}
+    {% set invoice = hookable_metadata.context.invoice %}
+{% elseif hookable_metadata.context.resource is defined %}
+    {% set invoice = hookable_metadata.context.resource %}
+{% else %}
+    {% set invoice = data %}
+{% endif %}
+
+{% set path = path('sylius_invoicing_plugin_admin_invoice_resend', {'id': invoice.id}) %}
+
+<a href="{{ path }}" class="btn">
+    {{ icon({ icon: 'send', class: 'icon' }) }}
+    {{ 'sylius_invoicing_plugin.ui.resend_invoice'|trans }}
+</a>
diff --git a/src/templates/shared/components/invoices.html.twig b/src/templates/shared/components/invoices.html.twig
new file mode 100644
index 00000000..31d029b5
--- /dev/null
+++ b/src/templates/shared/components/invoices.html.twig
@@ -0,0 +1 @@
+{% hook 'invoices' with { invoices }%}
diff --git a/src/Resources/views/Invoice/Download/pdf.html.twig b/src/templates/shared/download/pdf.html.twig
similarity index 99%
rename from src/Resources/views/Invoice/Download/pdf.html.twig
rename to src/templates/shared/download/pdf.html.twig
index 87be0b37..b5a4b97e 100644
--- a/src/Resources/views/Invoice/Download/pdf.html.twig
+++ b/src/templates/shared/download/pdf.html.twig
@@ -1,4 +1,4 @@
-{% extends '@SyliusInvoicingPlugin/Invoice/Download/pdfLayout.html.twig' %}
+{% extends '@SyliusInvoicingPlugin/shared/download/pdf_layout.html.twig' %}
 
 {% set shopBillingData = invoice.shopBillingData %}
 {% set localeCode = invoice.localeCode %}
diff --git a/src/Resources/views/Invoice/Download/pdfLayout.html.twig b/src/templates/shared/download/pdf_layout.html.twig
similarity index 100%
rename from src/Resources/views/Invoice/Download/pdfLayout.html.twig
rename to src/templates/shared/download/pdf_layout.html.twig
diff --git a/src/templates/shop/order/show/content/summary/invoices/card.html.twig b/src/templates/shop/order/show/content/summary/invoices/card.html.twig
new file mode 100644
index 00000000..6f224ede
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card.html.twig
@@ -0,0 +1,4 @@
+<div class="card border-0 bg-body-tertiary mb-3">
+    {% hook 'card' %}
+</div>
+
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body.html.twig
new file mode 100644
index 00000000..44429c31
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body.html.twig
@@ -0,0 +1,3 @@
+<div class="card-body">
+    {% hook 'body' %}
+</div>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table.html.twig
new file mode 100644
index 00000000..bf647260
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table.html.twig
@@ -0,0 +1,3 @@
+<table class="table table-sm" {{ sylius_test_html_attribute('invoices') }}>
+    {% hook 'table' %}
+</table>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/body.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body.html.twig
new file mode 100644
index 00000000..e45c4a5d
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body.html.twig
@@ -0,0 +1,7 @@
+<tbody>
+    <tr>
+        {% for invoice in hookable_metadata.context.invoices %}
+            {% hook 'body' with { invoice } %}
+        {% endfor %}
+    </tr>
+</tbody>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/download.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/download.html.twig
new file mode 100644
index 00000000..ee050ef3
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/download.html.twig
@@ -0,0 +1,19 @@
+<td>
+    <a href="{{ path('sylius_invoicing_plugin_shop_invoice_download', {'id': hookable_metadata.context.invoice.id}) }}" {{ sylius_test_html_attribute('download-button') }}>
+        <svg  xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-download"
+        >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+            <path d="M7 11l5 5l5 -5" />
+            <path d="M12 4l0 12" />
+        </svg>
+    </a>
+</td>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/issued_at.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/issued_at.html.twig
new file mode 100644
index 00000000..ca1bad11
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/issued_at.html.twig
@@ -0,0 +1,3 @@
+<td>
+    {{ hookable_metadata.context.invoice.issuedAt|format_date }}
+</td>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/number.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/number.html.twig
new file mode 100644
index 00000000..a4b46f22
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/body/number.html.twig
@@ -0,0 +1,3 @@
+<td>
+    {{ hookable_metadata.context.invoice.number }}
+</td>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/head.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head.html.twig
new file mode 100644
index 00000000..ecab3bde
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head.html.twig
@@ -0,0 +1,5 @@
+<thead>
+    <tr>
+        {% hook 'head' %}
+    </tr>
+</thead>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/actions.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/actions.html.twig
new file mode 100644
index 00000000..204784dd
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/actions.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius.ui.actions'|trans }}</th>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/issued_at.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/issued_at.html.twig
new file mode 100644
index 00000000..c6d50b86
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/issued_at.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}</th>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/number.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/number.html.twig
new file mode 100644
index 00000000..d7da088a
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/body/table/head/number.html.twig
@@ -0,0 +1 @@
+<th>{{ 'sylius.ui.number'|trans }}</th>
diff --git a/src/templates/shop/order/show/content/summary/invoices/card/head.html.twig b/src/templates/shop/order/show/content/summary/invoices/card/head.html.twig
new file mode 100644
index 00000000..2812ae02
--- /dev/null
+++ b/src/templates/shop/order/show/content/summary/invoices/card/head.html.twig
@@ -0,0 +1,3 @@
+<div class="card-header pb-3 mb-3 border-bottom">
+    {{ 'sylius_invoicing_plugin.ui.invoices'|trans }}
+</div>
diff --git a/tests/Application/assets/admin/entry.js b/tests/Application/assets/admin/entry.js
index 635f5acc..e69de29b 100644
--- a/tests/Application/assets/admin/entry.js
+++ b/tests/Application/assets/admin/entry.js
@@ -1 +0,0 @@
-import 'sylius/bundle/AdminBundle/Resources/private/entry';
diff --git a/tests/Application/assets/shop/entry.js b/tests/Application/assets/shop/entry.js
index aadc3174..e69de29b 100644
--- a/tests/Application/assets/shop/entry.js
+++ b/tests/Application/assets/shop/entry.js
@@ -1 +0,0 @@
-import 'sylius/bundle/ShopBundle/Resources/private/entry';
diff --git a/tests/Application/config/bundles.php b/tests/Application/config/bundles.php
index f51687e6..84679c8d 100644
--- a/tests/Application/config/bundles.php
+++ b/tests/Application/config/bundles.php
@@ -1,8 +1,6 @@
 <?php
 
-use Sylius\Bundle\CoreBundle\SyliusCoreBundle;
-
-$bundles = [
+return [
     Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
@@ -31,12 +29,7 @@
     Sylius\Bundle\CoreBundle\SyliusCoreBundle::class => ['all' => true],
     Sylius\Bundle\ResourceBundle\SyliusResourceBundle::class => ['all' => true],
     Sylius\Bundle\GridBundle\SyliusGridBundle::class => ['all' => true],
-    Sylius\Calendar\SyliusCalendarBundle::class => ['all' => true],
-    winzou\Bundle\StateMachineBundle\winzouStateMachineBundle::class => ['all' => true],
     Sonata\BlockBundle\SonataBlockBundle::class => ['all' => true],
-    Bazinga\Bundle\HateoasBundle\BazingaHateoasBundle::class => ['all' => true],
-    JMS\SerializerBundle\JMSSerializerBundle::class => ['all' => true],
-    FOS\RestBundle\FOSRestBundle::class => ['all' => true],
     Knp\Bundle\GaufretteBundle\KnpGaufretteBundle::class => ['all' => true],
     Knp\Bundle\MenuBundle\KnpMenuBundle::class => ['all' => true],
     Liip\ImagineBundle\LiipImagineBundle::class => ['all' => true],
@@ -48,7 +41,7 @@
     Sylius\Bundle\ThemeBundle\SyliusThemeBundle::class => ['all' => true],
     Sylius\Bundle\AdminBundle\SyliusAdminBundle::class => ['all' => true],
     Sylius\Bundle\ShopBundle\SyliusShopBundle::class => ['all' => true],
-    ApiPlatform\Core\Bridge\Symfony\Bundle\ApiPlatformBundle::class => ['all' => true],
+    ApiPlatform\Symfony\Bundle\ApiPlatformBundle::class => ['all' => true],
     Sylius\Bundle\ApiBundle\SyliusApiBundle::class => ['all' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true, 'test_cached' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true, 'test_cached' => true],
@@ -58,12 +51,12 @@
     Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle::class => ['all' => true],
     SyliusLabs\DoctrineMigrationsExtraBundle\SyliusLabsDoctrineMigrationsExtraBundle::class => ['all' => true],
     BabDev\PagerfantaBundle\BabDevPagerfantaBundle::class => ['all' => true],
-    SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+    Sylius\TwigExtra\Symfony\SyliusTwigExtraBundle::class => ['all' => true],
+    Sylius\TwigHooks\SyliusTwigHooksBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
+    Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
+    Sylius\Abstraction\StateMachine\SyliusStateMachineAbstractionBundle::class => ['all' => true]
 ];
-
-if (SyliusCoreBundle::VERSION_ID >= '11300') {
-    $bundles[Sylius\Abstraction\StateMachine\SyliusStateMachineAbstractionBundle::class] = ['all' => true];
-}
-
-return $bundles;
diff --git a/tests/Application/config/packages/_sylius.yaml b/tests/Application/config/packages/_sylius.yaml
index 389cb69f..c7a1afa8 100644
--- a/tests/Application/config/packages/_sylius.yaml
+++ b/tests/Application/config/packages/_sylius.yaml
@@ -1,13 +1,11 @@
 imports:
     - { resource: "@SyliusCoreBundle/Resources/config/app/config.yml" }
-
-    - { resource: "@SyliusAdminBundle/Resources/config/app/config.yml" }
-
     - { resource: "@SyliusShopBundle/Resources/config/app/config.yml" }
-
+    - { resource: "@SyliusAdminBundle/Resources/config/app/config.yml" }
     - { resource: "@SyliusInvoicingPlugin/Resources/config/config.yml" }
-
+    - { resource: "@SyliusPayumBundle/Resources/config/app/config.yaml" }
     - { resource: "@SyliusApiBundle/Resources/config/app/config.yaml" }
+
 parameters:
     sylius_core.public_dir: '%kernel.project_dir%/public'
 
diff --git a/tests/Application/config/packages/dev/jms_serializer.yaml b/tests/Application/config/packages/dev/jms_serializer.yaml
deleted file mode 100644
index 2f32a9b1..00000000
--- a/tests/Application/config/packages/dev/jms_serializer.yaml
+++ /dev/null
@@ -1,12 +0,0 @@
-jms_serializer:
-    visitors:
-        json_serialization:
-            options:
-                - JSON_PRETTY_PRINT
-                - JSON_UNESCAPED_SLASHES
-                - JSON_PRESERVE_ZERO_FRACTION
-        json_deserialization:
-            options:
-                - JSON_PRETTY_PRINT
-                - JSON_UNESCAPED_SLASHES
-                - JSON_PRESERVE_ZERO_FRACTION
diff --git a/tests/Application/config/packages/framework.yaml b/tests/Application/config/packages/framework.yaml
index 9b445011..cbbc8bcb 100644
--- a/tests/Application/config/packages/framework.yaml
+++ b/tests/Application/config/packages/framework.yaml
@@ -4,3 +4,4 @@ framework:
     csrf_protection: true
     session:
         handler_id: ~
+    http_method_override: true
diff --git a/tests/Application/config/packages/jms_serializer.yaml b/tests/Application/config/packages/jms_serializer.yaml
deleted file mode 100644
index ed7bc613..00000000
--- a/tests/Application/config/packages/jms_serializer.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-jms_serializer:
-    visitors:
-        xml_serialization:
-            format_output: '%kernel.debug%'
diff --git a/tests/Application/config/packages/prod/jms_serializer.yaml b/tests/Application/config/packages/prod/jms_serializer.yaml
deleted file mode 100644
index c2881820..00000000
--- a/tests/Application/config/packages/prod/jms_serializer.yaml
+++ /dev/null
@@ -1,10 +0,0 @@
-jms_serializer:
-    visitors:
-        json_serialization:
-            options:
-                - JSON_UNESCAPED_SLASHES
-                - JSON_PRESERVE_ZERO_FRACTION
-        json_deserialization:
-            options:
-                - JSON_UNESCAPED_SLASHES
-                - JSON_PRESERVE_ZERO_FRACTION
diff --git a/tests/Application/config/packages/security.yaml b/tests/Application/config/packages/security.yaml
index 2f5c6875..d010f895 100644
--- a/tests/Application/config/packages/security.yaml
+++ b/tests/Application/config/packages/security.yaml
@@ -1,5 +1,4 @@
 security:
-    enable_authenticator_manager: true
     providers:
         sylius_admin_user_provider:
             id: sylius.admin_user_provider.email_or_name_based
@@ -45,7 +44,7 @@ security:
             stateless: true
             entry_point: jwt
             json_login:
-                check_path: "%sylius.security.new_api_admin_route%/authentication-token"
+                check_path: "%sylius.security.new_api_admin_route%/administrators/token"
                 username_path: email
                 password_path: password
                 success_handler: lexik_jwt_authentication.handler.authentication_success
@@ -58,7 +57,7 @@ security:
             stateless: true
             entry_point: jwt
             json_login:
-                check_path: "%sylius.security.new_api_shop_route%/authentication-token"
+                check_path: "%sylius.security.new_api_shop_route%/customers/token"
                 username_path: email
                 password_path: password
                 success_handler: lexik_jwt_authentication.handler.authentication_success
@@ -83,6 +82,12 @@ security:
                 enable_csrf: true
                 csrf_parameter: _csrf_shop_security_token
                 csrf_token_id: shop_authenticate
+            json_login:
+                check_path: sylius_shop_json_login_check
+                username_path: _username
+                password_path: _password
+                success_handler: sylius.authentication.success_handler
+                failure_handler: sylius.authentication.failure_handler
             remember_me:
                 secret: "%env(APP_SECRET)%"
                 name: APP_SHOP_REMEMBER_ME
@@ -93,16 +98,15 @@ security:
                 target: sylius_shop_homepage
                 invalidate_session: false
 
+        image_resolver:
+            pattern: ^/media/cache/resolve
+            security: false
+
         dev:
             pattern:  ^/(_(profiler|wdt)|css|images|js)/
             security: false
 
     access_control:
-        - { path: "%sylius.security.admin_regex%/_partial", role: PUBLIC_ACCESS, ips: [127.0.0.1, ::1] }
-        - { path: "%sylius.security.admin_regex%/_partial", role: ROLE_NO_ACCESS }
-        - { path: "%sylius.security.shop_regex%/_partial", role: PUBLIC_ACCESS, ips: [127.0.0.1, ::1] }
-        - { path: "%sylius.security.shop_regex%/_partial", role: ROLE_NO_ACCESS }
-
         - { path: "%sylius.security.admin_regex%/forgotten-password", role: PUBLIC_ACCESS }
 
         - { path: "%sylius.security.admin_regex%/login", role: PUBLIC_ACCESS }
@@ -114,9 +118,9 @@ security:
         - { path: "%sylius.security.admin_regex%", role: ROLE_ADMINISTRATION_ACCESS }
         - { path: "%sylius.security.shop_regex%/account", role: ROLE_USER }
 
-        - { path: "%sylius.security.new_api_admin_route%/reset-password-requests", role: PUBLIC_ACCESS }
+        - { path: "%sylius.security.new_api_admin_route%/administrators/reset-password", role: PUBLIC_ACCESS }
         - { path: "%sylius.security.new_api_admin_regex%/.*", role: ROLE_API_ACCESS }
-        - { path: "%sylius.security.new_api_admin_route%/authentication-token", role: PUBLIC_ACCESS }
+        - { path: "%sylius.security.new_api_admin_route%/administrators/token", role: PUBLIC_ACCESS }
         - { path: "%sylius.security.new_api_user_account_regex%/.*", role: ROLE_USER }
-        - { path: "%sylius.security.new_api_shop_route%/authentication-token", role: PUBLIC_ACCESS }
+        - { path: "%sylius.security.new_api_shop_route%/customers/token", role: PUBLIC_ACCESS }
         - { path: "%sylius.security.new_api_shop_regex%/.*", role: PUBLIC_ACCESS }
diff --git a/tests/Application/config/packages/test/_sylius.yaml b/tests/Application/config/packages/test/_sylius.yaml
new file mode 100644
index 00000000..7777224b
--- /dev/null
+++ b/tests/Application/config/packages/test/_sylius.yaml
@@ -0,0 +1,8 @@
+parameters:
+  test_default_state_machine_adapter: 'symfony_workflow'
+  test_sylius_state_machine_adapter: '%env(string:default:test_default_state_machine_adapter:TEST_SYLIUS_STATE_MACHINE_ADAPTER)%'
+
+sylius_state_machine_abstraction:
+  graphs_to_adapters_mapping:
+    sylius_payment: '%test_sylius_state_machine_adapter%'
+  default_adapter: '%test_sylius_state_machine_adapter%'
diff --git a/tests/Application/config/packages/validator.yaml b/tests/Application/config/packages/validator.yaml
index 61807db6..8ff7da13 100644
--- a/tests/Application/config/packages/validator.yaml
+++ b/tests/Application/config/packages/validator.yaml
@@ -1,3 +1,3 @@
 framework:
     validation:
-        enable_annotations: true
+        enable_attributes: true
diff --git a/tests/Application/config/packages/winzou_state_machine.yaml b/tests/Application/config/packages/winzou_state_machine.yaml
deleted file mode 100644
index a3ea2702..00000000
--- a/tests/Application/config/packages/winzou_state_machine.yaml
+++ /dev/null
@@ -1,8 +0,0 @@
-winzou_state_machine:
-    sylius_payment:
-        callbacks:
-            after:
-                sylius_invoicing_plugin_payment_complete_producer:
-                    on: ['complete']
-                    do: ['@sylius_invoicing_plugin.event_producer.order_payment_paid', '__invoke']
-                    args: ['object']
diff --git a/tests/Application/config/routes/sylius_shop.yaml b/tests/Application/config/routes/sylius_shop.yaml
index 9116420d..8e3dd427 100644
--- a/tests/Application/config/routes/sylius_shop.yaml
+++ b/tests/Application/config/routes/sylius_shop.yaml
@@ -2,13 +2,25 @@ sylius_shop:
     resource: "@SyliusShopBundle/Resources/config/routing.yml"
     prefix: /{_locale}
     requirements:
-        _locale: ^[a-z]{2}(?:_[A-Z]{2})?$
+        _locale: ^[A-Za-z]{2,4}(_([A-Za-z]{4}|[0-9]{3}))?(_([A-Za-z]{2}|[0-9]{3}))?$
 
 sylius_shop_payum:
-    resource: "@SyliusShopBundle/Resources/config/routing/payum.yml"
+    resource: "@SyliusPayumBundle/Resources/config/routing/integrations/sylius_shop.yaml"
+
+sylius_payment_notify:
+    resource: "@SyliusPaymentBundle/Resources/config/routing/integrations/sylius.yaml"
 
 sylius_shop_default_locale:
     path: /
     methods: [GET]
     defaults:
-        _controller: sylius.controller.shop.locale_switch::switchAction
+        _controller: sylius_shop.controller.locale_switch::switchAction
+
+# see https://web.dev/change-password-url/
+sylius_shop_request_password_reset_token_redirect:
+    path: /.well-known/change-password
+    methods: [GET]
+    controller: Symfony\Bundle\FrameworkBundle\Controller\RedirectController::redirectAction
+    defaults:
+        route: sylius_shop_request_password_reset_token
+        permanent: false
diff --git a/tests/Application/config/sylius/1.13/packages/_sylius.yaml b/tests/Application/config/sylius/1.13/packages/_sylius.yaml
deleted file mode 100644
index a2043583..00000000
--- a/tests/Application/config/sylius/1.13/packages/_sylius.yaml
+++ /dev/null
@@ -1,8 +0,0 @@
-parameters:
-    test_default_state_machine_adapter: 'symfony_workflow'
-    test_sylius_state_machine_adapter: '%env(string:default:test_default_state_machine_adapter:TEST_SYLIUS_STATE_MACHINE_ADAPTER)%'
-
-sylius_state_machine_abstraction:
-    graphs_to_adapters_mapping:
-        sylius_payment: '%test_sylius_state_machine_adapter%'
-    default_adapter: '%test_sylius_state_machine_adapter%'
diff --git a/tests/Application/package.json b/tests/Application/package.json
index d7847319..c1e2c0f9 100644
--- a/tests/Application/package.json
+++ b/tests/Application/package.json
@@ -1,68 +1,28 @@
 {
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
-    "chart.js": "^3.7.1",
-    "jquery": "^3.5.0",
-    "jquery.dirtyforms": "^2.0.0",
-    "lightbox2": "^2.9.0",
-    "semantic-ui-css": "^2.2.0",
-    "slick-carousel": "^1.8.1"
+    "@sylius-ui/admin": "file:../../vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle",
+    "@sylius-ui/shop": "file:../../vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle",
+    "@symfony/ux-live-component": "file:../../vendor/symfony/ux-live-component/assets",
+    "@symfony/ux-autocomplete": "file:../../vendor/symfony/ux-autocomplete/assets"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-external-helpers": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/register": "^7.0.0",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-inject": "^4.0.4",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@semantic-ui-react/css-patch": "^1.1.2",
-    "@symfony/webpack-encore": "^3.1.0",
-    "babel-plugin-fast-async": "^6.1.2",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "dedent": "^0.7.0",
-    "eslint": "^8.23.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-import-resolver-babel-module": "^5.3.1",
-    "eslint-plugin-import": "^2.26.0",
-    "fast-async": "^6.3.8",
-    "gulp": "^4.0.2",
-    "gulp-chug": "^0.5.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-debug": "^4.0.0",
-    "gulp-if": "^3.0.0",
-    "gulp-livereload": "^4.0.2",
-    "gulp-order": "^1.2.0",
-    "gulp-sass": "^5.1.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-uglifycss": "^1.1.0",
-    "merge-stream": "^2.0.0",
-    "rollup": "^2.79.0",
-    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.54.8",
     "sass-loader": "^13.0.0",
-    "upath": "^2.0.1",
-    "yargs": "^17.5.1"
+    "tom-select": "^2.2.2"
   },
   "engines": {
-    "node": "^18 || ^20"
+    "node": "^20"
   },
-  "engineStrict": true,
+  "license": "MIT",
   "scripts": {
-    "watch": "encore dev --watch",
     "build": "encore dev",
     "build:prod": "encore production",
-    "gulp": "gulp build",
     "lint": "yarn lint:js",
-    "lint:js": "eslint gulpfile.babel.js",
-    "postinstall": "semantic-ui-css-patch"
+    "watch": "encore dev --watch"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Sylius/Sylius.git"
-  },
-  "author": "Paweł Jędrzejewski",
-  "license": "MIT"
+  }
 }
diff --git a/tests/Application/src/Kernel.php b/tests/Application/src/Kernel.php
index 38d1d069..65b6a765 100644
--- a/tests/Application/src/Kernel.php
+++ b/tests/Application/src/Kernel.php
@@ -25,6 +25,7 @@
 use Symfony\Component\HttpKernel\Kernel as BaseKernel;
 use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator;
 use Webmozart\Assert\Assert;
+use winzou\Bundle\StateMachineBundle\winzouStateMachineBundle;
 
 final class Kernel extends BaseKernel
 {
@@ -47,6 +48,10 @@ public function registerBundles(): iterable
         foreach ($this->getBundleListFiles() as $file) {
             yield from $this->registerBundlesFromFile($file);
         }
+
+        if (class_exists(winzouStateMachineBundle::class)) {
+            yield new winzouStateMachineBundle();
+        }
     }
 
     protected function configureContainer(ContainerBuilder $container, LoaderInterface $loader): void
diff --git a/tests/Application/templates/bundles/SyliusAdminBundle/Security/_content.html.twig b/tests/Application/templates/bundles/SyliusAdminBundle/Security/_content.html.twig
deleted file mode 100644
index 4edbc696..00000000
--- a/tests/Application/templates/bundles/SyliusAdminBundle/Security/_content.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{% include '@SyliusUi/Security/_login.html.twig' with {
-    'action': path('sylius_admin_login_check'),
-    'paths': {'logo': asset('build/admin/images/logo.png', 'admin')}
-} %}
diff --git a/tests/Application/templates/bundles/SyliusAdminBundle/_scripts.html.twig b/tests/Application/templates/bundles/SyliusAdminBundle/_scripts.html.twig
deleted file mode 100644
index f5f98358..00000000
--- a/tests/Application/templates/bundles/SyliusAdminBundle/_scripts.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ encore_entry_script_tags('admin-entry', null, 'admin') }}
diff --git a/tests/Application/templates/bundles/SyliusAdminBundle/_styles.html.twig b/tests/Application/templates/bundles/SyliusAdminBundle/_styles.html.twig
deleted file mode 100644
index a96144cd..00000000
--- a/tests/Application/templates/bundles/SyliusAdminBundle/_styles.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ encore_entry_link_tags('admin-entry', null, 'admin') }}
diff --git a/tests/Application/templates/bundles/SyliusShopBundle/Layout/Header/_logo.html.twig b/tests/Application/templates/bundles/SyliusShopBundle/Layout/Header/_logo.html.twig
deleted file mode 100644
index 84b8df56..00000000
--- a/tests/Application/templates/bundles/SyliusShopBundle/Layout/Header/_logo.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="column">
-    <a href="{{ path('sylius_shop_homepage') }}">
-        <img src="{{ asset('build/shop/images/logo.png', 'shop') }}" alt="Sylius logo" class="ui small image" />
-    </a>
-</div>
diff --git a/tests/Application/templates/bundles/SyliusShopBundle/_scripts.html.twig b/tests/Application/templates/bundles/SyliusShopBundle/_scripts.html.twig
deleted file mode 100644
index d1655bb9..00000000
--- a/tests/Application/templates/bundles/SyliusShopBundle/_scripts.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ encore_entry_script_tags('shop-entry', null, 'shop') }}
diff --git a/tests/Application/templates/bundles/SyliusShopBundle/_styles.html.twig b/tests/Application/templates/bundles/SyliusShopBundle/_styles.html.twig
deleted file mode 100644
index fd2c7cb4..00000000
--- a/tests/Application/templates/bundles/SyliusShopBundle/_styles.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ encore_entry_link_tags('shop-entry', null, 'shop') }}
diff --git a/tests/Application/webpack.config.js b/tests/Application/webpack.config.js
index 4f4fe541..5d944034 100644
--- a/tests/Application/webpack.config.js
+++ b/tests/Application/webpack.config.js
@@ -1,49 +1,10 @@
 const path = require('path');
-const Encore = require('@symfony/webpack-encore');
 
-const syliusBundles = path.resolve(__dirname, '../../vendor/sylius/sylius/src/Sylius/Bundle/');
-const uiBundleScripts = path.resolve(syliusBundles, 'UiBundle/Resources/private/js/');
-const uiBundleResources = path.resolve(syliusBundles, 'UiBundle/Resources/private/');
+const SyliusAdmin = require('@sylius-ui/admin');
+const SyliusShop = require('@sylius-ui/shop');
 
-// Shop config
-Encore
-  .setOutputPath('public/build/shop/')
-  .setPublicPath('/build/shop')
-  .addEntry('shop-entry', './assets/shop/entry.js')
-  .disableSingleRuntimeChunk()
-  .cleanupOutputBeforeBuild()
-  .enableSourceMaps(!Encore.isProduction())
-  .enableVersioning(Encore.isProduction())
-  .enableSassLoader();
+const adminConfig = SyliusAdmin.getWebpackConfig(path.resolve(__dirname));
 
-const shopConfig = Encore.getWebpackConfig();
+const shopConfig = SyliusShop.getWebpackConfig(path.resolve(__dirname));
 
-shopConfig.resolve.alias['sylius/ui'] = uiBundleScripts;
-shopConfig.resolve.alias['sylius/ui-resources'] = uiBundleResources;
-shopConfig.resolve.alias['sylius/bundle'] = syliusBundles;
-shopConfig.resolve.alias['chart.js/dist/Chart.min'] = path.resolve(__dirname, 'node_modules/chart.js/dist/chart.min.js');
-shopConfig.name = 'shop';
-
-Encore.reset();
-
-// Admin config
-Encore
-  .setOutputPath('public/build/admin/')
-  .setPublicPath('/build/admin')
-  .addEntry('admin-entry', './assets/admin/entry.js')
-  .disableSingleRuntimeChunk()
-  .cleanupOutputBeforeBuild()
-  .enableSourceMaps(!Encore.isProduction())
-  .enableVersioning(Encore.isProduction())
-  .enableSassLoader();
-
-const adminConfig = Encore.getWebpackConfig();
-
-adminConfig.resolve.alias['sylius/ui'] = uiBundleScripts;
-adminConfig.resolve.alias['sylius/ui-resources'] = uiBundleResources;
-adminConfig.resolve.alias['sylius/bundle'] = syliusBundles;
-adminConfig.resolve.alias['chart.js/dist/Chart.min'] = path.resolve(__dirname, 'node_modules/chart.js/dist/chart.min.js');
-adminConfig.externals = { ...adminConfig.externals, window: 'window', document: 'document' };
-adminConfig.name = 'admin';
-
-module.exports = [shopConfig, adminConfig];
+module.exports = [adminConfig, shopConfig];
diff --git a/tests/Behat/Context/Domain/InvoiceEmailContext.php b/tests/Behat/Context/Domain/InvoiceEmailContext.php
index cea9c914..c3684bfc 100644
--- a/tests/Behat/Context/Domain/InvoiceEmailContext.php
+++ b/tests/Behat/Context/Domain/InvoiceEmailContext.php
@@ -5,14 +5,9 @@
 namespace Tests\Sylius\InvoicingPlugin\Behat\Context\Domain;
 
 use Behat\Behat\Context\Context;
-use Sylius\Bundle\CoreBundle\Application\Kernel as SyliusKernel;
 use Sylius\Behat\Service\Checker\EmailCheckerInterface;
 use Webmozart\Assert\Assert;
 
-if (SyliusKernel::MINOR_VERSION <= 11) {
-    class_alias('Sylius\Component\Core\Test\Services\EmailCheckerInterface', 'Sylius\Behat\Service\Checker\EmailCheckerInterface');
-}
-
 final class InvoiceEmailContext implements Context
 {
     private EmailCheckerInterface $emailChecker;
diff --git a/tests/Behat/Context/Order/OrderContext.php b/tests/Behat/Context/Order/OrderContext.php
index 8ce038e9..c815bff2 100644
--- a/tests/Behat/Context/Order/OrderContext.php
+++ b/tests/Behat/Context/Order/OrderContext.php
@@ -6,20 +6,14 @@
 
 use Behat\Behat\Context\Context;
 use Doctrine\Persistence\ObjectManager;
-use SM\Factory\FactoryInterface as StateMachineFactoryInterface;
+use Sylius\Abstraction\StateMachine\StateMachineInterface;
 use Sylius\Component\Core\Model\OrderInterface;
 use Sylius\Component\Payment\PaymentTransitions;
 
 final class OrderContext implements Context
 {
-    private ObjectManager $objectManager;
-
-    private StateMachineFactoryInterface $stateMachineFactory;
-
-    public function __construct(ObjectManager $objectManager, StateMachineFactoryInterface $stateMachineFactory)
+    public function __construct(private ObjectManager $objectManager, private StateMachineInterface $stateMachine)
     {
-        $this->objectManager = $objectManager;
-        $this->stateMachineFactory = $stateMachineFactory;
     }
 
     /**
@@ -35,7 +29,7 @@ public function orderHasJustBeenPaid(OrderInterface $order): void
     private function applyPaymentTransitionOnOrder(OrderInterface $order, $transition): void
     {
         foreach ($order->getPayments() as $payment) {
-            $this->stateMachineFactory->get($payment, PaymentTransitions::GRAPH)->apply($transition);
+            $this->stateMachine->apply($payment, PaymentTransitions::GRAPH, $transition);
         }
     }
 }
diff --git a/tests/Behat/Page/Admin/Invoice/ShowPage.php b/tests/Behat/Page/Admin/Invoice/ShowPage.php
index 871da676..89cc4e3b 100644
--- a/tests/Behat/Page/Admin/Invoice/ShowPage.php
+++ b/tests/Behat/Page/Admin/Invoice/ShowPage.php
@@ -140,9 +140,7 @@ public function hasTotal(string $total, string $currencyCode): bool
 
     public function getChannel(): string
     {
-        $items = $this->getDocument()->findAll('css', '.channel > .channel__item');
-
-        return $items[1]->getText();
+        return $this->getElement('channel')->getText();
     }
 
     public function download(): void
@@ -173,17 +171,18 @@ public function hasDownloadButton(): bool
     protected function getDefinedElements(): array
     {
         return array_merge(parent::getDefinedElements(), [
-            'back' => '#back',
-            'billing_address' => '#billing-data',
+            'back' => '[data-test-back]',
+            'billing_address' => '[data-test-billing-data]',
+            'channel' => '[data-test-channel]',
             'invoice_net_total' => '[data-test-invoice-net-total]',
             'invoice_net_total_currency_code' => '[data-test-invoice-net-total-currency-code]',
             'invoice_taxes_total' => '[data-test-invoice-taxes-total]',
             'invoice_taxes_total_currency_code' => '[data-test-invoice-taxes-total-currency-code]',
             'invoice_total' => '[data-test-invoice-total]',
             'invoice_total_currency_code' => '[data-test-invoice-total-currency-code]',
-            'issued_at' => '#invoice-issued-at',
+            'issued_at' => '[data-test-issued-at]',
             'paid' => '[data-test-invoice-is-paid]',
-            'shop_billing_data' => '#shop-billing-data',
+            'shop_billing_data' => '[data-test-shop-billing-data]',
             'table' => '.table',
         ]);
     }
diff --git a/tests/Behat/Page/Admin/Order/ShowPage.php b/tests/Behat/Page/Admin/Order/ShowPage.php
index 35487045..df420dda 100644
--- a/tests/Behat/Page/Admin/Order/ShowPage.php
+++ b/tests/Behat/Page/Admin/Order/ShowPage.php
@@ -16,7 +16,7 @@ public function getRouteName(): string
 
     public function countRelatedInvoices(): int
     {
-        return count($this->getInvoicesList()) -1;
+        return count($this->getInvoicesList());
     }
 
     public function clickOnFirstInvoiceId(): void
@@ -30,7 +30,7 @@ public function clickOnFirstInvoiceId(): void
     public function downloadFirstInvoice(): void
     {
         $invoice = $this->getFirstInvoice();
-        $invoice->clickLink('Download');
+        $invoice->find('css', '[data-test-download-button]')->click();
     }
 
     public function resendFirstInvoice(): void
@@ -60,13 +60,13 @@ public function hasDownloadButtonForInvoice(): bool
     protected function getDefinedElements(): array
     {
         return array_merge(parent::getDefinedElements(), [
-            'invoices' => '#order-invoices',
+            'invoices' => '[data-test-invoices]',
         ]);
     }
 
     private function getFirstInvoice(): NodeElement
     {
-        return $this->getInvoicesList()[1];
+        return $this->getInvoicesList()[0];
     }
 
     private function getInvoicesList(): array
diff --git a/tests/Behat/Page/Shop/Order/ShowPage.php b/tests/Behat/Page/Shop/Order/ShowPage.php
index 57bac4a1..d95581fc 100644
--- a/tests/Behat/Page/Shop/Order/ShowPage.php
+++ b/tests/Behat/Page/Shop/Order/ShowPage.php
@@ -17,7 +17,7 @@ public function getRouteName(): string
     public function downloadFirstInvoice(): void
     {
         $invoice = $this->getFirstInvoice();
-        $invoice->clickLink('Download');
+        $invoice->find('css', '[data-test-download-button]')->click();
     }
 
     public function isPdfFileDownloaded(): bool
@@ -41,7 +41,7 @@ public function hasDownloadButtonForInvoice(): bool
     protected function getDefinedElements(): array
     {
         return array_merge(parent::getDefinedElements(), [
-            'invoices' => '#order-invoices',
+            'invoices' => '[data-test-invoices]',
         ]);
     }
 
diff --git a/tests/Behat/Resources/services.xml b/tests/Behat/Resources/services.xml
index 7bc5b03b..3c9517ab 100644
--- a/tests/Behat/Resources/services.xml
+++ b/tests/Behat/Resources/services.xml
@@ -11,7 +11,7 @@
             <argument type="service" id="Tests\Sylius\InvoicingPlugin\Behat\Page\Admin\Invoice\ShowPageInterface" />
             <argument type="service" id="Tests\Sylius\InvoicingPlugin\Behat\Page\Admin\Order\ShowPageInterface" />
             <argument type="service" id="sylius_invoicing_plugin.repository.invoice" />
-            <argument type="service" id="sylius.behat.notification_checker"/>
+            <argument type="service" id="sylius.behat.notification_checker.admin"/>
         </service>
 
         <service id="Tests\Sylius\InvoicingPlugin\Behat\Context\Ui\Shop\CustomerBrowsingInvoicesContext" public="true">
@@ -42,7 +42,7 @@
 
         <service id="Tests\Sylius\InvoicingPlugin\Behat\Context\Order\OrderContext" public="true">
             <argument type="service" id="doctrine.orm.entity_manager" />
-            <argument type="service" id="sm.factory" />
+            <argument type="service" id="sylius_abstraction.state_machine" />
         </service>
 
         <service id="Tests\Sylius\InvoicingPlugin\Behat\Context\Ui\Admin\ManagingChannelsContext" public="true">