diff --git a/index.html b/index.html
index 219832bf..dc8eded0 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,24 @@
 
 <body>
   <div class="container">
-    <h1>Welcome to your website!</h1>
+    <h1>Random Number Generator</h1>
+      <div id="numGen">
+        <script>
+                 var number = Math.random();
+                number *= 100
+                number = Math.round(number)
+                document.write(number)
+                document.getElementById('numGen').style.color = '#66C4FF';
+        
+        </script>
+    
+    </div>    
+       <div id="But">
+        <button id="Generate"> Generate </button>
+    </div>
+
     <button id="clap-button" class="button">👏</button>
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index afc46f0c..67a66d41 100644
--- a/style.css
+++ b/style.css
@@ -37,4 +37,55 @@ body {
 
 .button:active {
   border: 5px solid #ffd300;
-}
\ No newline at end of file
+}
+
+/* Random Number */
+
+
+#numGen {
+
+  width: 220px;
+  padding: 50px;
+  margin: auto;
+  border: 2px solid var(--color-hyper-500);
+  background: var(--color-800);
+  border-radius: 12px;
+  text-align: center;
+  font-weight: bold;
+  font-size:4em;
+  font-family: 'Rubik', sans-serif;
+  
+}
+
+#But {
+ 
+    display: block;
+    width: 100%;
+    padding: 15px 0;
+    margin: 30px 0 50px 0;
+    border-radius: 5px;
+    text-align: center;
+    
+}
+
+#Generate {
+    border: 1px solid var(--color-paleBlue);
+    width: 25%;
+    padding:10px;
+
+    font-size: 14px;
+    border-radius: 12px;
+    background-color: var(--color-hyper-500);
+    cursor: pointer;
+    color: #66C4FF;
+    font-family: 'Rubik', sans-serif;
+    font-size: 18px;
+
+}
+
+#Generate:hover {
+    transform: scale(1.15);
+    background-color: #66C4FF;
+    color: var(--color-hyper-500);
+    border: 1px solid var(--color-hyper-500);
+}
