diff --git a/config/app.yaml b/config/app.yaml
index b830ec2..e8bcbad 100644
--- a/config/app.yaml
+++ b/config/app.yaml
@@ -5,6 +5,11 @@ sylius_ui:
                 alerts: '@SynoliaSyliusAdminOauthPlugin/alerts.html.twig'
                 google_oauth_button: '@SynoliaSyliusAdminOauthPlugin/google_auth_button.html.twig'
                 microsoft_oauth_button: '@SynoliaSyliusAdminOauthPlugin/microsoft_auth_button.html.twig'
+        sylius.admin.layout.stylesheets:
+            blocks:
+                stylesoauth:
+                    template: "@SynoliaSyliusAdminOauthPlugin/_styles.html.twig"
+                    enabled: true
 
 twig:
     globals:
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..bb9e3dd
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,26 @@
+.oAuthButtonBlock {
+    margin: 0.5rem 0 0.5rem 0;
+    align-items: center;
+}
+
+.microsoftOAuth button {
+    padding:8px;
+    background-color: white;
+    width: 100%;
+    border: 1px lightgray solid;
+    border-radius: 4px;
+    height: 2.8rem;
+}
+
+.microsoftOAuth a {
+    width: 100%;
+    display: flex;
+    color: black;
+    font-size: 1rem;
+    justify-content: center;
+    font-weight: lighter;
+}
+
+.microsoftOAuth img {
+    margin-right: .5rem;
+}
diff --git a/templates/_styles.html.twig b/templates/_styles.html.twig
new file mode 100644
index 0000000..34caf34
--- /dev/null
+++ b/templates/_styles.html.twig
@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{ asset('bundles/synoliasyliusadminoauthplugin/main.css') }}" />
diff --git a/templates/google_auth_button.html.twig b/templates/google_auth_button.html.twig
index 343d2b0..4f76c6d 100644
--- a/templates/google_auth_button.html.twig
+++ b/templates/google_auth_button.html.twig
@@ -1,5 +1,5 @@
 {% if google_client_id is not null %}
-    <div style="margin: 0.5rem 0 0.5rem 0">
+<div class="oAuthButtonBlock googleOAuth">
     <script src="https://accounts.google.com/gsi/client" async defer></script>
 
     <div id="g_id_onload"
diff --git a/templates/microsoft_auth_button.html.twig b/templates/microsoft_auth_button.html.twig
index adc8833..c843b8f 100644
--- a/templates/microsoft_auth_button.html.twig
+++ b/templates/microsoft_auth_button.html.twig
@@ -1,9 +1,9 @@
 {% if microsoft_client_id is not null %}
-    <div style="margin: 0.5rem 0 0.5rem 0; align-items: center">
-        <button style="padding:8px; background-color: white; width: 100%; border: 1px lightgray solid; border-radius: 4px; height: 2.8rem;" disabled>
-            <a href="{{ path('connect_admin_azure') }}" style="width: 100%; display: flex; color: black; font-size: 1rem; justify-content: center; font-weight: lighter">
-                <img style="margin-right: .5rem;" src="https://learn.microsoft.com/fr-fr/azure/active-directory/develop/media/howto-add-branding-in-apps/ms-symbollockup_mssymbol_19.png" alt="microsoft icon">
-                <span style="">{{ "sylius.authentication.admin.microsoft_login_button_label"|trans }}</span>
+    <div class="oAuthButtonBlock microsoftOAuth">
+        <button disabled>
+            <a href="{{ path('connect_admin_azure') }}">
+                <img src="https://learn.microsoft.com/fr-fr/azure/active-directory/develop/media/howto-add-branding-in-apps/ms-symbollockup_mssymbol_19.png" alt="microsoft icon">
+                <span>{{ "sylius.authentication.admin.microsoft_login_button_label"|trans }}</span>
             </a>
         </button>
     </div>