Index: src/main/resources/static/SupportTickets.html
===================================================================
--- src/main/resources/static/SupportTickets.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
+++ src/main/resources/static/SupportTickets.html	(revision 3a749593fe57b29d0502b4b05f222bb26b82c2d2)
@@ -8,12 +8,142 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
+<style>
+    body {
+        background: url('images/flight.jpg') no-repeat center center fixed;
+        background-size: cover;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+        font-family: Arial, sans-serif;
+        padding-top: 30px;
+        margin-top: 10px;
+    }
+
+    .header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        background-color: rebeccapurple;
+        padding: 10px;
+        width: 100%;
+        z-index: 10;
+        margin-bottom: 10px;
+    }
+    .header img {
+        width: 40px;
+        height: 40px;
+        margin-right: 20px;
+    }
+
+    .header h1 {
+        color: white;
+        margin: 0;
+        font-size: 15px;
+        padding-right: 50px;
+    }
+
+    .header button {
+        background-color: transparent;
+        border: none;
+        color: white;
+        font-size: 14px;
+    }
+
+    .header button:hover {
+        background-color: transparent;
+        cursor: pointer;
+    }
+
+    select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border: 0;
+        outline: 0;
+        font: inherit;
+        width: 20em;
+        height: 3em;
+        padding: 0 4em 0 1em;
+        background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
+        color: white;
+        border-radius: 0.25em;
+        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+    }
+    select option {
+        color: inherit;
+        background-color: #320a28;
+    }
+    select:focus {
+        outline: none;
+    }
+    select::-ms-expand {
+        display: none;
+    }
+
+    .search-form-container h2 {
+        color: white;
+        padding-top: 110px;
+    }
+
+
+    .flights-list-container h2{
+        padding-top: 110px;
+    }
+    .flights-list .flight-item {
+        margin-bottom: 15px;
+    }
+
+    .flights-list .flight-item span {
+        margin-right: 15px;
+    }
+
+
+    .popup textarea{
+        width: 100%;
+        padding: 10px;
+        margin-top: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        resize: vertical;
+        box-sizing: border-box;
+    }
+
+
+    .popup button {
+        margin-top: 10px;
+        background-color: rebeccapurple;
+        color: white;
+        border: none;
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    .popup button:hover {
+        background-color: mediumpurple;
+    }
+    .ticket-list{
+        margin-top:20px;
+        padding-top:60px;
+    }
+
+
+</style>
 <body>
 
 <div id="app" class="support-ticket-container">
-    <button @click="fetchResolved">Fetch Resolved Tickets</button>
-    <button @click="fetchTickets">Fetch Unresolved Tickets</button>
+    <header class="header">
+        <button @click="fetchResolved">Fetch Resolved Tickets</button>
+        <button @click="fetchTickets">Fetch Unresolved Tickets</button>
+    </header>
+
     <h1>Support Tickets</h1>
     <div class="ticket-list">
-        <div class="ticket-item" v-for="ticket in tickets" :key="ticket.ticketID">
+        <div class="ticket-item" v-for="ticket in tickets" :key="ticket.ticketId">
             <div class="ticket-info">
                 <p><strong>Subject:</strong> {{ ticket.subject }}</p>
@@ -22,5 +152,5 @@
             </div>
             <div class="ticket-actions">
-                <button @click="resolveTicket(ticket.ticketID)">Resolve</button>
+                <button @click="resolveTicket(ticket.ticketId)">Resolve</button>
             </div>
         </div>
@@ -61,15 +191,15 @@
                     });
             },
-            resolveTicket(ticketID) {
-                console.log(ticketID);
+            resolveTicket(ticketId) {
+                console.log(ticketId);
                 const status = 'RESOLVED';
-                axios.put(`http://localhost:8080/api/support-tickets/${ticketID}/status`, status,
+                axios.put(`api/support-tickets/${ticketId}/${status}`, {},
                 {
                     headers: {
-                        'Content-Type': 'text/plain'
+                        'Content-Type': 'application/json'
                     }
                 })
                     .then(() => {
-                        alert(`Ticket ${ticketID} resolved.`);
+                        alert(`Ticket ${ticketId} resolved.`);
                         this.fetchTickets();
                     })
