diff --git a/src/css/style.css b/src/css/style.css
index 3806ea6..80663b5 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -75,15 +75,13 @@ body {
 }
 
 .btn:hover,
-.btn-large:hover,
-.btn-small:hover {
+.btn:active,
+.btn:focus {
     background-color: #FF6600;
 }
 
 /* For raised buttons */
-.btn:not(.disabled):hover,
-.btn-large:not(.disabled):hover,
-.btn-small:not(.disabled):hover {
+.btn:not(.disabled):hover {
     background-color: #FF6600;
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
@@ -230,3 +228,46 @@ pre {
 .qr-container {
     margin: 15px 0;
 }
+
+.page-header {
+    font-size: 2.1rem;
+    text-align: center;
+}
+
+@media screen and (max-width: 600px) {
+    .page-header {
+        font-size: 1.5rem;
+    }
+
+    .flow-card {
+        height: 100%;
+    }
+
+    .page-footer .footer-copyright {
+        min-height: 0;
+    }
+
+    .footer-copyright {
+        font-size: 0.7rem;
+    }
+
+    .intro-section {
+        text-align: justify;
+    }
+
+    code {
+        font-size: 0.8rem;
+    }
+
+    .code-block {
+        padding: 15px;
+    }
+
+    .circle-3 {
+        width: 80%;
+    }
+
+    .circle-4 {
+        width: 90%;
+    }
+}
\ No newline at end of file
diff --git a/src/flow/code.html b/src/flow/code.html
index a0c76e1..cfffd4f 100644
--- a/src/flow/code.html
+++ b/src/flow/code.html
@@ -139,11 +139,11 @@
 
         function fillExample() {
             const requestExample = baseUrl + "\n"
-                + "    ?response_type=" + responseType + "\n"
-                + "    &client_id=" + getClientId() + "\n"
-                + "    &redirect_uri=" + redirectUri + "\n"
-                + "    &scope=" + scope + "\n"
-                + "    &state=" + state;
+                + "?response_type=" + responseType + "\n"
+                + "&client_id=" + getClientId() + "\n"
+                + "&redirect_uri=" + redirectUri + "\n"
+                + "&scope=" + scope + "\n"
+                + "&state=" + state;
             
             $("#requestUriExample").text(requestExample);
             $("#baseUrl").text(baseUrl);
diff --git a/src/flow/dag-2.html b/src/flow/dag-2.html
index 16c7248..cf421b3 100644
--- a/src/flow/dag-2.html
+++ b/src/flow/dag-2.html
@@ -52,7 +52,7 @@
                 </div>
             </div>
             <div class="row section">
-                <div class="col s6">
+                <div class="col m6 s12">
                     <div class="card horizontal">
                         <div class="card-stacked">
                             <div class="card-content">
@@ -97,7 +97,7 @@
                         </div>
                     </div>
                 </div>
-                <div id="user-panel" class="col s6" style="display: none;">
+                <div id="user-panel" class="col m6 s12" style="display: none;">
                     <div class="card horizontal">
                         <div class="card-stacked">
                             <div class="card-content">
@@ -105,18 +105,18 @@
                                 <p>Device would typically show the user code on it's display (or in console output when connection to display-less device via SSH for example) and where possible, also the URL that the user should visit. Based on the capabilities the URL could be shown as a simple text, or QR code, or if the device didn't have display capable enough, than the URL could be written in a manual distributed with the device.</p>
                                 
                                 <div class="row col s12" style="margin-top: 15px;">
-                                    <div class="col s2"></div>
-                                    <div class="col s3" style="padding-top: 5px;">
+                                    <div class="col m2 s0"></div>
+                                    <div class="col m3 s12" style="padding-top: 5px;">
                                         <h6>User code:</h6>
                                     </div>
-                                    <div class="col s3">
+                                    <div class="col m3 s9">
                                         <input id="user-code" type="text" disabled>
                                     </div>
-                                    <div class="col s2" style="padding-top: 5px;">
+                                    <div class="col m2 s3" style="padding-top: 5px;">
                                         <button title="Copy to clipboard" class="btn-floating waves-effect waves-light" style="background-color: #000000;" onclick="copyUserCodeToClipboard()"><i
                                                 class="material-icons" style="font-size:18px;">content_copy</i></button>
                                     </div>
-                                    <div class="col s2"></div>
+                                    <div class="col m2 s0"></div>
                                 </div>
                                 
                                 <p>Now that we have the user code, we can for example scan a QR code and finalize this flow on our mobile device:</p>
@@ -127,7 +127,7 @@
                                     Or for the purposes of this demo, you can click on the button below to open a new window, and finalize this flow there (<i>If no windows pops up, make sure that the pop-up window is not blocked</i>);
                                 </p>
                                 <div class="row flow-submit-container">
-                                    <a class="waves-effect waves-light btn full-width" onclick="initiateAuthentication()">Authenticate</a>
+                                    <a id="auth-btn" class="waves-effect waves-light btn full-width" onclick="initiateAuthentication()">Authenticate</a>
                                 </div>
                             </div>
                         </div>
@@ -271,6 +271,7 @@
 
         function processCodeFlowResult(data) {
             $("#start-polling-btn").text("Token obtained");
+            $("#auth-btn").addClass("disabled");
             $("#result-panel").show();
             $("#token").text(JSON.stringify(data, null, 2));
             $([document.documentElement, document.body]).animate({
diff --git a/src/flow/pkce-2.html b/src/flow/pkce-2.html
index ff0b0bb..8eb2329 100644
--- a/src/flow/pkce-2.html
+++ b/src/flow/pkce-2.html
@@ -157,13 +157,13 @@
 
         function fillExample() {
             const requestExample = baseUrl + "\n"
-                + "    ?response_type=" + responseType + "\n"
-                + "    &client_id=" + getClientId() + "\n"
-                + "    &redirect_uri=" + redirectUri + "\n"
-                + "    &scope=" + scope + "\n"
-                + "    &state=" + state + "\n"
-                + "    &code_challenge=" + codeChallenge + "\n"
-                + "    &code_challenge_method=S256";
+                + "?response_type=" + responseType + "\n"
+                + "&client_id=" + getClientId() + "\n"
+                + "&redirect_uri=" + redirectUri + "\n"
+                + "&scope=" + scope + "\n"
+                + "&state=" + state + "\n"
+                + "&code_challenge=" + codeChallenge + "\n"
+                + "&code_challenge_method=S256";
             
             $("#requestUriExample").text(requestExample);
             $("#baseUrl").text(baseUrl);
diff --git a/src/flow/pkce.html b/src/flow/pkce.html
index 8c3299d..9d3b0c6 100644
--- a/src/flow/pkce.html
+++ b/src/flow/pkce.html
@@ -65,10 +65,10 @@
                                 <p>Before we can start the authorization process, we need to create a <b>code verifier</b> and a <b>code challenge</b>. The code verifier is a cryptographically random string that is used to verify the identity of the client. The code challenge is a hashed version of the code verifier, which is sent to the authorization server. The authorization server will then compare the code challenge with the code verifier to verify the identity of the client.</p>
                                 </p>
                                 <div class="row" style="margin-top: 20px;">
-                                    <div class="col s3">
+                                    <div class="col m3 s12">
                                         <div class="waves-effect waves-light btn full-width" onclick="generateCodeVerifier()">Generate Code Verifier</div>
                                     </div>
-                                    <div class="col s9">
+                                    <div class="col m9 s12">
                                         <input id="codeVerifier" style="height: 30px;" type="text" disabled/>
                                     </div>
                                 </div>
@@ -76,10 +76,10 @@
                                 <p>Now that we habe the code verified, we need to create the code challenge. We do so by hashing the code verifier using the SHA256 algorithm and then encoding it using the URL-safe Base64 encoding.</p>
 
                                 <div class="row" style="margin-top: 20px;">
-                                    <div class="col s3">
+                                    <div class="col m3 s12">
                                         <div id="code-challenge-btn" class="waves-effect waves-light btn full-width disabled" onclick="generateCodeChallenge()">Generate Code Challenge</div>
                                     </div>
-                                    <div class="col s9">
+                                    <div class="col m9 s12">
                                         <input id="codeChallenge" style="height: 30px;" type="text" disabled />
                                     </div>
                                 </div>
diff --git a/src/index.html b/src/index.html
index 4137c04..6252088 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
     </header>
     <main>
         <div class="container">
-            <div class="section">
+            <div class="section intro-section">
                 <h3 class="header section-header">Welcome to OAuth 2.0 Playground</h3>
                 <p>This playground serves as an interactive platform designed to familiarize developers and students with the
                 intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical
@@ -46,7 +46,7 @@
                 <h3 class="header section-header">Flows</h3>
                 <div class="divider" style="margin-bottom: 10px;"></div>
                 <div class="row">
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
@@ -64,7 +64,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
@@ -82,7 +82,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
@@ -101,7 +101,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
@@ -124,7 +124,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
@@ -151,7 +151,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col s4">
+                    <div class="col m4 s12">
                         <div class="card horizontal">
                             <div class="card-stacked flow-card">
                                 <div class="card-content">
diff --git a/src/layout/header.html b/src/layout/header.html
index 946d895..5b7c6e4 100644
--- a/src/layout/header.html
+++ b/src/layout/header.html
@@ -1,6 +1,6 @@
 <nav>
-    <div class="nav-wrapper">
-        <a href="/" class="brand-logo center">
+    <div class="nav-wrapper page-header">
+        <a href="/" class="">
             OAuth 2.0 Playground
             <span style="font-size: 15px; color:#FF6600; font-weight:bold;">by Y Soft</span>
         </a>