diff --git a/web/spin-wheel/bg-images/bg1.jpg b/web/spin-wheel/bg-images/bg1.jpg
new file mode 100644
index 0000000..6d3dab2
Binary files /dev/null and b/web/spin-wheel/bg-images/bg1.jpg differ
diff --git a/web/spin-wheel/bg-images/bg2.jpg b/web/spin-wheel/bg-images/bg2.jpg
new file mode 100644
index 0000000..c1323b6
Binary files /dev/null and b/web/spin-wheel/bg-images/bg2.jpg differ
diff --git a/web/spin-wheel/bg-images/bg3.jpg b/web/spin-wheel/bg-images/bg3.jpg
new file mode 100644
index 0000000..81a2f39
Binary files /dev/null and b/web/spin-wheel/bg-images/bg3.jpg differ
diff --git a/web/spin-wheel/bg-images/bg4.jpg b/web/spin-wheel/bg-images/bg4.jpg
new file mode 100644
index 0000000..6b94ad6
Binary files /dev/null and b/web/spin-wheel/bg-images/bg4.jpg differ
diff --git a/web/spin-wheel/index.html b/web/spin-wheel/index.html
index e442efc..67b9f83 100644
--- a/web/spin-wheel/index.html
+++ b/web/spin-wheel/index.html
@@ -1,5 +1,14 @@
 <!DOCTYPE html>
 <head>
+    <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        
+        <!--css-->
+        <link rel="stylesheet" type="text/css" href="style.css" />
+
+        <title>Wheel of Fortune</title>
+        
+        <!--P5.MIN.JS-->
 <script src="p5.min.js" ></script>
 <script>
     console.log("hey there");
@@ -41,7 +50,19 @@ function draw() {
 </head>
 
 <body>
-    <h1>Spin the Oracle Wheel!</h1>
-    <p></p>
+    <div class="bg-image"></div>
+    <div class="bg-text">
+        <h1>Spin the Wheel of Fortune!</h1>
+        <p>Welcome, my dear! 
+            
+            <br>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace. 
 
+            <br>Here are a few things I prepared for you before you begin:
+            <br>Have a strong sense of intention to commit to this exercise for some time.
+            <br>Find a quiet room, free of distraction.
+            <br>Get a notebook and a pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.
+            
+            <br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune you will find at https://issue.xpub.nl/20/wheel. 
+            After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to thankful of an answer to that question by looking at it and the tiny film simultaneously.</p>
+        </div>
 </body>
\ No newline at end of file
diff --git a/web/spin-wheel/style.css b/web/spin-wheel/style.css
new file mode 100644
index 0000000..e165917
--- /dev/null
+++ b/web/spin-wheel/style.css
@@ -0,0 +1,53 @@
+html { 
+    position: relative; /* Make the html element a positioned parent */
+  }
+  
+  html::before { /* Add a pseudo-element to the html element */
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
+    background: url(bg-images/bg1.jpg) no-repeat center center fixed; 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    
+    /* Add animation properties */
+    -webkit-animation: spin 100s linear infinite;
+    -moz-animation: spin 100s linear infinite;
+    -ms-animation: spin 100s linear infinite;
+    -o-animation: spin 100s linear infinite;
+    animation: spin 100s linear infinite;
+  }
+  
+  /* Define the spin animation */
+  @keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  
+  h2 {
+    text-align: center;
+  }
+  
+  p {
+    text-align: center;
+  }
+  
+  
\ No newline at end of file
