diff --git a/src/main/resources/templates/OAuthResource/consents.html b/src/main/resources/templates/OAuthResource/consents.html
index eaad278..b1e1c30 100644
--- a/src/main/resources/templates/OAuthResource/consents.html
+++ b/src/main/resources/templates/OAuthResource/consents.html
@@ -4,88 +4,77 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <style>
         body {
-            font-family: Arial, sans-serif;
             background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
         }
 
-        .login-container {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .login-container h2 {
-            text-align: center;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-group label {
-            font-weight: bold;
-            display: block;
-        }
-
-        .form-group input {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-
-        .login-button {
+        .btn {
             width: 100%;
             background-color: #007BFF;
-            color: #fff;
+        }
+
+        .btn:hover {
+            background-color: #0056b3
+        }
+
+        .collection {
             border: none;
-            padding: 10px;
-            border-radius: 5px;
-            cursor: pointer;
         }
 
-        .login-button:hover {
-            background-color: #0056b3;
-        }
-
-        .error-popup {
-            background-color: #ff6b6b;
-            color: #fff;
-            padding: 10px;
-            text-align: center;
-            border-radius: 5px;
-            margin-top: 10px;
+        .collection-item {
+            border: none;
         }
     </style>
 </head>
 <body>
-<div class="login-container">
-    <h2>Consents</h2>
-    <p>Hello <strong>{user.login}</strong></p>
-
-    <p>You are authorizing to <strong>{client.description}</strong>, which requests the following permissions from you:</p>
-
-    <form action="/auth/consent" method="post">
-        <input type="hidden" name="sessionId" value="{sessionId}">
-        <ul>
-            {#each scopes}
-            <li>
-                <label><input type="checkbox" name="scope" value="{it}" checked>{it}</label>
-            </li>
-            {/each}
-        </ul>
-
-        <button type="submit" class="login-button">Confirm</button>
-    </form>
+<div class="container">
+    <div class="row">
+        <div class="col s12 m6 offset-m3">
+            <div class="card">
+                <div class="card-content">
+                    <span class="card-title center-align">Consents</span>
+                    <h6>Hello <strong>{user.login}</strong></h6>
+                    <p>You are authorizing to <strong>{client.description}</strong>, which requests the following permissions from you:</p>
+                    <form action="/auth/consent" method="post">
+                        <input type="hidden" name="sessionId" value="{sessionId}">
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <ul class="collection">
+                                    {#each scopes}
+                                    <li class="collection-item">
+                                        <label>
+                                            <input type="checkbox" name="scope" value="{it}" />
+                                            <span>{it</span>
+                                        </label>
+                                    </li>
+                                    {/each}
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col s12 center-align">
+                                <button class="btn waves-effect waves-light" type="submit">
+                                    Confirm
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 </body>
 </html>
