diff --git a/src/main/Frontend/Images/Union.png b/src/main/Frontend/Images/Union.png
new file mode 100644
index 0000000..53663bb
Binary files /dev/null and b/src/main/Frontend/Images/Union.png differ
diff --git a/src/main/Frontend/Images/logout.png b/src/main/Frontend/Images/logout.png
new file mode 100644
index 0000000..c6d5fc6
Binary files /dev/null and b/src/main/Frontend/Images/logout.png differ
diff --git a/src/main/Frontend/desktop.html b/src/main/Frontend/desktop.html
new file mode 100644
index 0000000..f072e8f
--- /dev/null
+++ b/src/main/Frontend/desktop.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%;">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- Links to include the path to Bootstrap5 in order to use the custom classes -->
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" 
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
+    crossorigin="anonymous">
+  <link
+    rel="stylesheet"
+    href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    crossorigin="anonymous"
+  />
+  <!-- JavaScript Bundle with Popper -->
+  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
+    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
+    crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+
+<body style="margin: 0; padding: 0; height: 100%;">
+  <div style="width: 100%; height: 100%; background: #2A3240; justify-content: flex-start; align-items: flex-start; display: inline-flex">
+    <!-- Your existing content here -->
+    <div class="DesktopAddProfileBreed" style="width: 100%; height: 100%; background: #2A3240; justify-content: flex-start; align-items: flex-start; display: inline-flex">
+      <div class="SideMenu" style="width: 20%; height: 95%; padding-bottom: 40px; padding-left: 30px; padding-right: 30px; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex">
+        <div class="Row" style="width: 331px; height: 78px; position: relative; display: flex; justify-content: center; align-items: center; margin-top: 20px;">
+          <div class="Text" style="text-align: center; color: white; font-size: 40px; font-family: RocknRoll One; font-weight: 400">
+            E-H
+            <div class="Icon" style="display: inline-block; width: 12%; height: 12%">
+              <img class="Vector" src="Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
+            </div>
+            YV
+            <div class="Icon" style="display: inline-block; width: 12%; height: 12%">
+              <img class="Vector" src="Images/Union.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; vertical-align: center; padding-bottom: 10px;">
+            </div>
+            N
+          </div>
+        </div>
+        
+        <div class="LineDivider" style="align-self: stretch; margin-top: 2px; height: 0px; border: 1.50px #606873 solid"></div>
+        <div class="LogoFrame" style="align-self: stretch; height: 100px; padding-top: 24px; padding-bottom: 24px"></div>
+        <div class="Content" style="align-self: stretch; flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 36px; display: flex">
+          <div class="Frame280113" style="width: 220px; flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 42px; display: flex">
+            <div class="SectionContainer" style="height: 96px"></div>
+          </div>
+          <div class="AvatarText" style="align-self: stretch; padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 16px; background: #606873; border-radius: 14px; border: 1px #606873 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
+            <div class="Text" style="flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
+              <div class="Hello" style="align-self: stretch; color: #ECEFF2; font-size: 14px; font-weight: 400; line-height: 22px; word-wrap: break-word">Hello</div>
+              <div class="Esther" style="align-self: stretch; color: white; font-size: 18px; font-weight: 600; line-height: 26px; word-wrap: break-word">Esther</div>
+            </div>
+            <div class="Icon" style="width: 20px; height: 20px; position: relative; overflow: hidden;">
+              <img class="Vector" src="Images/logout.png" alt="Logout Icon" style="width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="PrimaryContentContainer" style="width: 80%; height: 98%; padding: 10px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
+        <div class="PrimaryCard" style="align-self: stretch; flex: 1 1 0; background: #FAFAFA; border-radius: 16px; overflow: hidden; flex-direction: column; justify-content: center; align-items: center; display: flex">
+          <div class="Frame280236" style="width: 20%; height: 98px; padding-top: 37px; padding-right: 42px; justify-content: flex-start; align-items: flex-start; gap: 681px; display: inline-flex">
+            <div class="VeterinaryList" style="width: 247px; height: 43px; text-align: center; color: black; font-size: 20px; font-weight: 600; line-height: 30px; word-wrap: break-word">
+              Veterinary List
+            </div>
+          </div>
+          
+          <div class="Content" style="width: 80%; height: 849px; padding-top: 24px; padding-bottom: 85px; padding-left: 24px; padding-right: 24px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 24px; display: flex">
+            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#filter-vet-modal" style="position: fixed; bottom: 2.5em; right: 2.5em; background-color: #1B85F3; border: none; color: white;">
+              Filter Veterinarian
+            </button>
+            <table class="table table-hover table-sm" style="width: 100%;">
+              <tr class = "table-active" style="text-align: center;">
+                  <th>Name</th>
+                  <th>Clinic Name</th>
+                  <th colspan="2">Delete</th>
+              </tr>
+            </table>
+          <!-- FILTER -->
+            <div class="modal fade" id="filter-vet-modal" tabindex="-1" aria-labelledby="filter-vet-modal-label" aria-hidden="true">
+              <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="filter-vet-modal-label">Search</h5>
+                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body"><form action="/filter_vet" method="POST">
+                            <label for="fname" class="form-label">Name:</label>
+                            <input type="text" class="form-control" name="fname"> 
+
+                            <label for="fclinic" class="form-label">Clinic:</label>
+                            <input type="text" class="form-control" name="fclinic">
+
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                <button type="submit" class="btn btn-warning" style="background-color: #1B85F3; border: none; color: white;">
+                                  Filter
+                                </button>                                
+                            </div>
+                        </form>      
+                    </div>
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+      crossorigin="anonymous"
+   ></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      type="text/javascript"
+      src="{{ url_for('static', filename='index.js') }}"
+    ></script>
+</body>
+
+</html>
