diff --git a/src/components/Tour.ts b/src/components/Tour.ts
index 95d9af00..33c0c884 100644
--- a/src/components/Tour.ts
+++ b/src/components/Tour.ts
@@ -3,6 +3,9 @@ import "shepherd.js/dist/css/shepherd.css";
 
 const style = document.createElement("style");
 style.textContent = `
+  .shepherd-button-secondary {
+    background-color: #6c757d !important;
+  }
   .shepherd-button {
     background-color: #050c40 !important; 
     color: white !important;
@@ -22,6 +25,11 @@ tour.addStep({
   id: "intro",
   text: "Welcome to the Template Playground! This brief tour will help you get acquainted with the key features of the platform.",
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: tour.next,
@@ -37,6 +45,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: tour.next,
@@ -52,6 +65,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: tour.next,
@@ -67,6 +85,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: tour.next,
@@ -82,6 +105,11 @@ tour.addStep({
     on: "bottom",
   },
   buttons: [
+    {
+      text: "Skip",
+      action: tour.cancel,
+      classes: "shepherd-button-secondary",
+    },
     {
       text: "Next",
       action: tour.next,