diff --git a/config/admin_routing.yml b/config/admin_routing.yml
index 810f1a203..e97bdc26a 100644
--- a/config/admin_routing.yml
+++ b/config/admin_routing.yml
@@ -24,17 +24,6 @@ sylius_refund_credit_memo:
                 icon: inbox
     type: sylius.resource
 
-sylius_refund_order_credit_memos_list:
-    path: /orders/{orderId}/credit-memos
-    methods: [GET]
-    defaults:
-        _controller: sylius_refund.controller.credit_memo::indexAction
-        _sylius:
-            template: "@SyliusRefundPlugin/admin/order/credit_memo/list.html.twig"
-            repository:
-                method: findByOrderId
-                arguments: $orderId
-
 sylius_refund_credit_memo_details:
     path: /orders/{orderNumber}/credit-memos/{id}
     methods: [GET]
diff --git a/config/app/config.yml b/config/app/config.yml
index f1f51b189..2d72c2506 100644
--- a/config/app/config.yml
+++ b/config/app/config.yml
@@ -17,7 +17,7 @@ sylius_mailer:
     emails:
         units_refunded:
             subject: Units refunded
-            template: "@SyliusRefundPlugin/Email/unitsRefunded.html.twig"
+            template: "@SyliusRefundPlugin/email/units_refunded.html.twig"
 
 framework:
     messenger:
diff --git a/config/app/twig_hooks/admin/order/show.yaml b/config/app/twig_hooks/admin/order/show.yaml
index e468764f9..92a778efe 100644
--- a/config/app/twig_hooks/admin/order/show.yaml
+++ b/config/app/twig_hooks/admin/order/show.yaml
@@ -51,7 +51,10 @@ sylius_twig_hooks:
                 template: '@SyliusRefundPlugin/admin/order/content/sections/credit_memos/header.html.twig'
                 priority: 100
             items:
-                template: '@SyliusRefundPlugin/admin/order/content/sections/credit_memos/items.html.twig'
+                component: 'sylius_refund:admin:credit_memos'
+                props:
+                    order: '@=_context.order'
+                    template: '@SyliusRefundPlugin/admin/order/credit_memo/list.html.twig'
                 priority: 0
 
         'sylius_admin.order.show.content.sections.credit_memos.header':
diff --git a/config/app/twig_hooks/shop/account/order/show.yaml b/config/app/twig_hooks/shop/account/order/show.yaml
index 6d5e33725..d7470f194 100644
--- a/config/app/twig_hooks/shop/account/order/show.yaml
+++ b/config/app/twig_hooks/shop/account/order/show.yaml
@@ -1,8 +1,11 @@
 sylius_twig_hooks:
     hooks:
         'sylius_shop.account.order.show.content.main':
-            credit_memos: #TODO: Change this to twig component
-                template: '@SyliusRefundPlugin/shop/order/credit_memos.html.twig'
+            credit_memos:
+                component: 'sylius_refund:shop:account:credit_memos'
+                props:
+                    order: '@=_context.order'
+                    template: '@SyliusRefundPlugin/shop/order/credit_memos.html.twig'
                 priority: -100
 
         'sylius_shop.account.order.show.content.main.credit_memos':
diff --git a/config/services/generators.xml b/config/services/generators.xml
index 8afac8a32..9755038f0 100644
--- a/config/services/generators.xml
+++ b/config/services/generators.xml
@@ -42,7 +42,7 @@
         <service id="sylius_refund.generator.credit_memo_pdf_file" class="Sylius\RefundPlugin\Generator\CreditMemoPdfFileGenerator">
             <argument type="service" id="sylius_refund.repository.credit_memo" />
             <argument type="service" id="file_locator" />
-            <argument>@SyliusRefundPlugin/Download/creditMemo.html.twig</argument>
+            <argument>@SyliusRefundPlugin/download/credit_memo.html.twig</argument>
             <argument>%sylius_refund.template.logo_file%</argument>
             <argument type="service" id="sylius_refund.generator.twig_to_pdf" />
             <argument type="service" id="sylius_refund.generator.credit_memo_file_name" />
diff --git a/config/services/twig_components.xml b/config/services/twig_components.xml
new file mode 100644
index 000000000..2554c076b
--- /dev/null
+++ b/config/services/twig_components.xml
@@ -0,0 +1,32 @@
+<?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_refund.twig_component.customer_credit_memos" class="Sylius\RefundPlugin\Twig\Component\OrderCreditMemosComponent">
+            <argument type="service" id="sylius_refund.repository.credit_memo" />
+            <tag
+                name="sylius.twig_component"
+                key="sylius_refund:shop:account:credit_memos"
+            />
+            <tag
+                name="sylius.twig_component"
+                key="sylius_refund:admin:credit_memos"
+            />
+        </service>
+    </services>
+</container>
diff --git a/config/shop_routing.yml b/config/shop_routing.yml
index 18d796fb6..6dbfd3795 100644
--- a/config/shop_routing.yml
+++ b/config/shop_routing.yml
@@ -1,14 +1,3 @@
-sylius_refund_plugin_shop_order_credit_memos_partial:
-    path: /_partial/orders/{orderId}/credit-memos/
-    methods: [GET]
-    defaults:
-        _controller: sylius_refund.controller.credit_memo::indexAction
-        _sylius:
-            template: "@SyliusRefundPlugin/shop/order/_creditMemos.html.twig"
-            repository:
-                method: findByOrder
-                arguments: $orderId
-
 sylius_refund_shop_credit_memo_download:
     path: /credit-memos/{id}/download
     methods: [GET]
diff --git a/src/Doctrine/ORM/CreditMemoRepository.php b/src/Doctrine/ORM/CreditMemoRepository.php
index 2e776ad33..9319c0d9d 100644
--- a/src/Doctrine/ORM/CreditMemoRepository.php
+++ b/src/Doctrine/ORM/CreditMemoRepository.php
@@ -18,7 +18,7 @@
 
 class CreditMemoRepository extends EntityRepository implements CreditMemoRepositoryInterface
 {
-    public function findByOrderId(string $orderId): array
+    public function findByOrderId(mixed $orderId): array
     {
         return $this->createQueryBuilder('o')
             ->andWhere('o.order = :orderId')
diff --git a/src/Repository/CreditMemoRepositoryInterface.php b/src/Repository/CreditMemoRepositoryInterface.php
index d16d2570e..22c8fa80a 100644
--- a/src/Repository/CreditMemoRepositoryInterface.php
+++ b/src/Repository/CreditMemoRepositoryInterface.php
@@ -19,5 +19,5 @@
 interface CreditMemoRepositoryInterface extends RepositoryInterface
 {
     /** @return CreditMemoInterface[] */
-    public function findByOrderId(string $orderId): array;
+    public function findByOrderId(mixed $orderId): array;
 }
diff --git a/src/Twig/Component/OrderCreditMemosComponent.php b/src/Twig/Component/OrderCreditMemosComponent.php
new file mode 100644
index 000000000..f880cd542
--- /dev/null
+++ b/src/Twig/Component/OrderCreditMemosComponent.php
@@ -0,0 +1,41 @@
+<?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\RefundPlugin\Twig\Component;
+
+use Sylius\Component\Core\Model\OrderInterface;
+use Sylius\RefundPlugin\Entity\CreditMemoInterface;
+use Sylius\RefundPlugin\Repository\CreditMemoRepositoryInterface;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+#[AsTwigComponent]
+class OrderCreditMemosComponent
+{
+    public ?OrderInterface $order = null;
+
+    public function __construct(private readonly CreditMemoRepositoryInterface $creditMemoRepository)
+    {
+    }
+
+    /** @return array<CreditMemoInterface> */
+    #[ExposeInTemplate(name: 'credit_memos')]
+    public function getCreditMemosForOrder(): array
+    {
+        if ($this->order === null || $this->order->getId() === null) {
+            return [];
+        }
+
+        return $this->creditMemoRepository->findByOrderId($this->order->getId());
+    }
+}
diff --git a/templates/Common/Label/refundPaymentState.html.twig b/templates/Common/Label/refundPaymentState.html.twig
deleted file mode 100644
index 882ed1c9a..000000000
--- a/templates/Common/Label/refundPaymentState.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{%
-    set viewOptions = {
-        completed: { icon: 'adjust', color: 'green' },
-        new: { icon: 'clock', color: 'olive' },
-    }
-%}
-
-{% set value = 'sylius_refund.ui.' ~ data %}
-
-<span class="ui {{ viewOptions[data]['color'] }} label">
-    <i class="{{ viewOptions[data]['icon'] }} icon"></i>
-    {{ value|trans }}
-</span>
diff --git a/templates/admin/credit_memo/show/content/sections/memo_details/table/body/net_value.html.twig b/templates/admin/credit_memo/show/content/sections/memo_details/table/body/net_value.html.twig
index 56d23ca8b..ebad068e5 100644
--- a/templates/admin/credit_memo/show/content/sections/memo_details/table/body/net_value.html.twig
+++ b/templates/admin/credit_memo/show/content/sections/memo_details/table/body/net_value.html.twig
@@ -1,5 +1,5 @@
 {% set item = hookable_metadata.context.item %}
 
 <td>
-    {{ '%0.2f'|format(item.netValue/100) }}
+    {{ (item.netValue / 100)|number_format(2) }}
 </td>
diff --git a/templates/admin/credit_memo/show/list.html.twig b/templates/admin/credit_memo/show/list.html.twig
index d4a29ca8e..55e6ad130 100644
--- a/templates/admin/credit_memo/show/list.html.twig
+++ b/templates/admin/credit_memo/show/list.html.twig
@@ -21,7 +21,7 @@
                 <td>{{ credit_memo.issuedAt|date('d-m-Y') }}</td>
                 <td>
                     <div class="ui buttons">
-                        {% hook 'sylius_admin.order.show.content.sections.credit_memos.credit_memos.item.actions' %}
+                        {% hook 'sylius_admin.order.show.content.sections.credit_memos.credit_memos.items.actions' %}
                     </div>
                 </td>
             </tr>
diff --git a/templates/admin/order/refund/content/sections/form/items/table/body/shipment.html.twig b/templates/admin/order/refund/content/sections/form/items/table/body/shipment.html.twig
index de97d91df..95061f7b5 100644
--- a/templates/admin/order/refund/content/sections/form/items/table/body/shipment.html.twig
+++ b/templates/admin/order/refund/content/sections/form/items/table/body/shipment.html.twig
@@ -21,8 +21,8 @@
 
             <div class="input-group">
                 <div class="input-group-text">{{ order.currencyCode|sylius_currency_symbol }}</div>
-                {% set inputName = "sylius_refund_shipments["~shipping_adjustment.id~"][amount]" %}
-                <input data-refund-input type="number" step="0.01" class="form-control" name="{{ inputName }}" {% if not can_unit_be_refunded(shipping_adjustment.id, shipment_refund_type) %} disabled{% endif %}/>
+                {% set input_name = "sylius_refund_shipments["~shipping_adjustment.id~"][amount]" %}
+                <input data-refund-input type="number" step="0.01" class="form-control" name="{{ input_name }}" {% if not can_unit_be_refunded(shipping_adjustment.id, shipment_refund_type) %} disabled{% endif %}/>
             </div>
         </td>
         <td class="aligned collapsing">
diff --git a/templates/Download/creditMemo.html.twig b/templates/download/credit_memo.html.twig
similarity index 98%
rename from templates/Download/creditMemo.html.twig
rename to templates/download/credit_memo.html.twig
index 73cd497c1..09b1ec94c 100644
--- a/templates/Download/creditMemo.html.twig
+++ b/templates/download/credit_memo.html.twig
@@ -1,4 +1,4 @@
-{% extends '@SyliusRefundPlugin/Download/pdfLayout.html.twig' %}
+{% extends '@SyliusRefundPlugin/download/pdf_layout.html.twig' %}
 
 {% set from = creditMemo.from %}
 {% set to = creditMemo.to %}
diff --git a/templates/Download/pdfLayout.html.twig b/templates/download/pdf_layout.html.twig
similarity index 100%
rename from templates/Download/pdfLayout.html.twig
rename to templates/download/pdf_layout.html.twig
diff --git a/templates/Email/unitsRefunded.html.twig b/templates/email/units_refunded.html.twig
similarity index 100%
rename from templates/Email/unitsRefunded.html.twig
rename to templates/email/units_refunded.html.twig
diff --git a/templates/shop/order/_creditMemos.html.twig b/templates/shop/order/_creditMemos.html.twig
deleted file mode 100644
index 3bb4c5398..000000000
--- a/templates/shop/order/_creditMemos.html.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{% if credit_memos|length > 0 %}
-    <div class="card border-0 bg-body-tertiary mb-3" id="credit-memos">
-        <div class="card-header">{{ 'sylius_refund.ui.credit_memos'|trans }}</div>
-        <div class="card-body">
-            <table class="table align-middle mb-0">
-                <tbody>
-                    {% for credit_memo in credit_memos %}
-                        <tr>
-                            <td>
-                                <div class="d-flex flex-column">
-                                    <strong>{{ credit_memo.issuedAt|date('d-m-Y') }}</strong>
-                                    <span class="text-body-tertiary">{{ credit_memo.number }}</span>
-                                </div>
-                            </td>
-                            <td class="text-end">{{ credit_memo.total|sylius_format_money(credit_memo.currencyCode, credit_memo.localeCode) }}</td>
-                            <td class="w-1">
-                                {% hook 'sylius_shop.account.order.show.content.main.credit_memos' %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        </div>
-    </div>
-{% endif %}
diff --git a/templates/shop/order/credit_memos.html.twig b/templates/shop/order/credit_memos.html.twig
index 1ba29eb27..3bb4c5398 100644
--- a/templates/shop/order/credit_memos.html.twig
+++ b/templates/shop/order/credit_memos.html.twig
@@ -1,3 +1,25 @@
-{% set order = hookable_metadata.context.order %}
-
-{{ render(url('sylius_refund_plugin_shop_order_credit_memos_partial', {'orderId': order.id})) }}
+{% if credit_memos|length > 0 %}
+    <div class="card border-0 bg-body-tertiary mb-3" id="credit-memos">
+        <div class="card-header">{{ 'sylius_refund.ui.credit_memos'|trans }}</div>
+        <div class="card-body">
+            <table class="table align-middle mb-0">
+                <tbody>
+                    {% for credit_memo in credit_memos %}
+                        <tr>
+                            <td>
+                                <div class="d-flex flex-column">
+                                    <strong>{{ credit_memo.issuedAt|date('d-m-Y') }}</strong>
+                                    <span class="text-body-tertiary">{{ credit_memo.number }}</span>
+                                </div>
+                            </td>
+                            <td class="text-end">{{ credit_memo.total|sylius_format_money(credit_memo.currencyCode, credit_memo.localeCode) }}</td>
+                            <td class="w-1">
+                                {% hook 'sylius_shop.account.order.show.content.main.credit_memos' %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+{% endif %}