diff --git a/frontend/style.css b/frontend/style.css
index 8f46cab..820b076 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -658,6 +658,51 @@ input[type=checkbox]{
     max-width: 900px;
 
 }
+/*     *****************   TICKETS BODY     ************************      */
+    .tab {
+        overflow: hidden;
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+    }
+  
+
+  .tab button {
+        background-color: inherit;
+        float: left;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        padding: 14px 16px;
+        transition: 0.3s;
+        font-size: 17px;
+    }
+  
+
+  .tab button:hover {
+        background-color: #ddd;
+    }
+  
+
+  .tab button.active {
+        background-color: #ccc;
+    }
+  
+
+  .tabcontent {
+        display: none;
+        padding: 6px 12px;
+        border: 1px solid #ccc;
+        border-top: none;
+    }
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/frontend/tickets.html b/frontend/tickets.html
index e69de29..32eb837 100644
--- a/frontend/tickets.html
+++ b/frontend/tickets.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+    <html lang="en">
+        <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>SeatStock</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="script.js"></script>
+        
+
+
+    </head>
+
+    <body>
+<!--************************   HEADER  *********************-->
+         <logo><a href="index.html">SeatStock</a></logo>
+         <signinButton><a href="signin.html">Sign In</a></signinButton>
+         <faqButton><a href="FAQ.html">How it Works</a></faqButton>
+         <tixButton><a href="tickets.html">Your Tickets</a></tixButton>
+ 
+ 
+ 
+ 
+ 
+ <!--**************************  BODY  ***********************-->
+
+          <div class="tab">
+            <button class="tablinks" onclick="openCity(event, 'Tickets')">Tickets</button>
+            <button class="tablinks" onclick="openCity(event, 'Active-Bids')">Active Bids</button>
+            <button class="tablinks" onclick="openCity(event, 'Active-Asks')">Active Asks</button>
+            <button class="tablinks" onclick="openCity(event, 'History')">History</button>
+          </div>
+
+         <div id="Tickets" class="tabcontent">
+             <h3>London</h3>
+             <p>London is the capital city of England.</p>
+         </div>
+
+         <div id="Active-Bids" class="tabcontent">
+            <h3>Paris</h3>
+            <p>Paris is the capital of France.</p> 
+         </div>
+
+         <div id="Active-Asks" class="tabcontent">
+             <h3>Tokyo</h3>
+             <p>Tokyo is the capital of Japan.</p>
+         </div>
+         <div id="History" class="tabcontent">
+            <h3>Tokyo</h3>
+            <p>Tokyo is the capital of Japan.</p>
+        </div>
+          
+
+
+
+
+        <!--************************  SCRIPT  ****************-->
+        <script>
+            function openCity(evt, cityName) {
+              var i, tabcontent, tablinks;
+              tabcontent = document.getElementsByClassName("tabcontent");
+              for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+              }
+              tablinks = document.getElementsByClassName("tablinks");
+              for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+              }
+              document.getElementById(cityName).style.display = "block";
+              evt.currentTarget.className += " active";
+            }
+        </script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    </body>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</html>
\ No newline at end of file
