diff --git a/core/frontend/src/components/autopilot/EndpointCard.vue b/core/frontend/src/components/autopilot/EndpointCard.vue
index a7451d6a59..b6bfdea065 100644
--- a/core/frontend/src/components/autopilot/EndpointCard.vue
+++ b/core/frontend/src/components/autopilot/EndpointCard.vue
@@ -1,13 +1,8 @@
 <template>
   <v-card
-    width="80%"
-    height="130px"
-    class="d-flex justify-space-between align-center justify-center"
+    class="endpoint-card d-flex justify-space-between align-center justify-center"
   >
-    <div
-      class="align-center justify-center ml-5"
-      style="width: 20%;"
-    >
+    <div class="endpoint-name align-center justify-center">
       <p class="text-h6 text-center ma-0">
         {{ endpoint.name }}
       </p>
@@ -17,7 +12,7 @@
     </div>
     <div
       min-width="106px"
-      class="d-flex flex-column justify-center elevation-0 pa-1"
+      class="endpoint-details d-flex flex-column justify-center elevation-0 pa-1"
     >
       <v-simple-table
         dense
@@ -40,7 +35,7 @@
     </div>
     <div
       width="62px"
-      class="d-flex flex-column justify-center elevation-0 pa-1 mr-5"
+      class="endpoint-flags d-flex justify-center elevation-0 pa-1"
     >
       <v-icon
         v-tooltip="persistency.tooltip"
@@ -216,6 +211,21 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+.endpoint-card {
+  width: 80%;
+  height: 130px;
+}
+
+.endpoint-name {
+  width: 20%;
+  margin-left: 20px;
+}
+
+.endpoint-flags {
+  flex-direction: column;
+  margin-right: 20px;
+}
+
 .endpoint-buttons {
   gap: 8px;
   display: flex;
@@ -225,4 +235,44 @@ export default Vue.extend({
   transform: translateY(-50%);
   flex-direction: column;
 }
+
+@media (max-width: 600px) {
+  .endpoint-card {
+    width: 100%;
+    height: auto;
+    flex-wrap: wrap;
+    row-gap: 8px;
+    padding: 12px 0;
+  }
+
+  .endpoint-details,
+  .endpoint-flags {
+    flex: 1 1 50%;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .endpoint-name,
+  .endpoint-buttons {
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+
+  .endpoint-name {
+    width: auto;
+    margin-left: 0;
+  }
+
+  .endpoint-flags {
+    flex-direction: row;
+    align-items: center;
+    margin-right: 0;
+  }
+
+  .endpoint-buttons {
+    position: static;
+    flex-direction: row;
+    transform: none;
+  }
+}
 </style>
diff --git a/core/frontend/src/components/autopilot/EndpointManager.vue b/core/frontend/src/components/autopilot/EndpointManager.vue
index cf17185773..f64a6f47e3 100644
--- a/core/frontend/src/components/autopilot/EndpointManager.vue
+++ b/core/frontend/src/components/autopilot/EndpointManager.vue
@@ -2,8 +2,7 @@
   <div class="endpoints-manager d-flex flex-column align-center">
     <div
       v-if="are_endpoints_available && !updating_endpoints && !updating_router"
-      class="d-flex flex-column align-center justify-center ma-0 pa-0"
-      style="width: 80%;"
+      class="endpoints-list d-flex flex-column align-center justify-center ma-0 pa-0"
     >
       <v-divider
         width="80%"
@@ -212,4 +211,19 @@ export default Vue.extend({
   width: 80%;
   margin-bottom: 100px;
 }
+
+.endpoints-list {
+  width: 80%;
+}
+
+@media (max-width: 600px) {
+  .endpoints-manager {
+    width: 100%;
+    padding: 0 12px;
+  }
+
+  .endpoints-list {
+    width: 100%;
+  }
+}
 </style>
diff --git a/core/frontend/vite.config.js b/core/frontend/vite.config.js
index 8085f3068a..2514d554e0 100644
--- a/core/frontend/vite.config.js
+++ b/core/frontend/vite.config.js
@@ -243,6 +243,8 @@ export default defineConfig(({ command, mode }) => {
         },
         '^/ardupilot-manager': {
           target: SERVER_ADDRESS,
+          changeOrigin: true,
+          autoRewrite: true,
         },
         '^/bag': {
           target: SERVER_ADDRESS,