diff --git a/apps/web/app/components/FooterBar.vue b/apps/web/app/components/FooterBar.vue
new file mode 100644
index 0000000..4cdedd5
--- /dev/null
+++ b/apps/web/app/components/FooterBar.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+const docsUrl = useDocsUrl()
+</script>
+
+<template>
+  <footer class="footer">
+    <div class="footer-inner">
+      <div class="footer-left">
+        <span class="brand">TRAWL</span>
+        <span class="sep">·</span>
+        <span class="tagline">bypass anything.</span>
+      </div>
+      <div class="footer-center">
+        <a href="https://github.com/germondai/trawl" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <a :href="docsUrl">Docs</a>
+        <a href="https://github.com/germondai/trawl/issues" target="_blank" rel="noopener noreferrer">Issues</a>
+        <a href="https://github.com/germondai/trawl/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"
+          >AGPL-3.0</a
+        >
+      </div>
+      <div class="footer-right">
+        <span class="copy"
+          >built by
+          <a href="https://github.com/germondai" target="_blank" rel="noopener noreferrer" class="creator"
+            >@germondai</a
+          ></span
+        >
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  border-top: 1px solid var(--border);
+  padding: 24px 0;
+}
+
+.footer-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.brand {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--text);
+}
+
+.sep {
+  color: var(--border-strong);
+  font-size: 12px;
+}
+
+.tagline {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.footer-center {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.footer-center a {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.12s;
+}
+.footer-center a:hover {
+  color: var(--text);
+}
+
+.footer-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.copy {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.creator {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.12s;
+}
+.creator:hover {
+  color: var(--accent);
+}
+
+@media (max-width: 640px) {
+  .footer-inner {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    text-align: center;
+    padding: 0 16px;
+  }
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    justify-content: center;
+  }
+  .footer-center {
+    flex-wrap: wrap;
+    gap: 12px 16px;
+  }
+}
+</style>