diff --git a/svelte/src/lib/assets/github.svg b/svelte/src/lib/assets/github.svg
new file mode 100644
index 0000000000..8b0623d50f
--- /dev/null
+++ b/svelte/src/lib/assets/github.svg
@@ -0,0 +1,3 @@
+<svg height="512" width="512" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="m256 0c-141.39 0-256 114.61-256 256 0 113.1 73.345 209.05 175.07 242.91 12.81 2.35 17.48-5.56 17.48-12.35 0-6.06-.22-22.17-.35-43.53-71.21 15.46-86.23-34.32-86.23-34.32-11.645-29.58-28.429-37.45-28.429-37.45-23.244-15.88 1.76-15.56 1.76-15.56 25.699 1.8 39.209 26.38 39.209 26.38 22.84 39.12 59.92 27.82 74.51 21.27 2.32-16.54 8.93-27.82 16.25-34.22-56.84-6.45-116.611-28.43-116.611-126.52 0-27.94 9.981-50.8 26.351-68.7-2.64-6.47-11.42-32.5 2.5-67.74 0 0 21.5-6.889 70.41 26.24 20.41-5.69 42.32-8.52 64.09-8.61 21.73.1 43.64 2.92 64.09 8.61 48.87-33.129 70.32-26.24 70.32-26.24 13.97 35.24 5.19 61.27 2.55 67.74 16.41 17.9 26.32 40.76 26.32 68.7 0 98.35-59.86 119.99-116.89 126.32 9.19 7.91 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.22 0 6.85 4.6 14.82 17.6 12.32 101.65-33.92 174.93-129.8 174.93-242.88 0-141.39-114.63-256-256.02-256"/>
+</svg>
diff --git a/svelte/src/lib/assets/twitter.svg b/svelte/src/lib/assets/twitter.svg
new file mode 100644
index 0000000000..24de16d801
--- /dev/null
+++ b/svelte/src/lib/assets/twitter.svg
@@ -0,0 +1,4 @@
+<svg height="512" width="512" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
+</svg>
diff --git a/svelte/src/lib/assets/zulip.svg b/svelte/src/lib/assets/zulip.svg
new file mode 100644
index 0000000000..c92746ca2f
--- /dev/null
+++ b/svelte/src/lib/assets/zulip.svg
@@ -0,0 +1,3 @@
+<svg height="512" width="512" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M485.686 76.557c0 25.792-11.583 48.707-29.236 62.61L285.082 292.209c-3.182 2.728-7.32-1.67-5.024-5.342l62.86-125.855c1.761-3.523-.524-7.854-4.138-7.854H94.97c-37.76 0-68.656-34.465-68.656-76.58C26.314 34.453 57.21 0 94.971 0h322.058c37.761-.023 68.657 34.442 68.657 76.556ZM94.97 512h322.058c37.761 0 68.657-34.464 68.657-76.58 0-42.125-30.896-76.578-68.657-76.578H173.22c-3.614 0-5.899-4.33-4.137-7.854l62.859-125.855c2.296-3.671-1.842-8.07-5.024-5.342L55.55 372.812c-17.653 13.89-29.236 36.819-29.236 62.61 0 42.115 30.896 76.579 68.657 76.579z"/>
+</svg>
diff --git a/svelte/src/lib/components/Footer.svelte b/svelte/src/lib/components/Footer.svelte
new file mode 100644
index 0000000000..ba1a0a48e2
--- /dev/null
+++ b/svelte/src/lib/components/Footer.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { resolve } from '$app/paths';
+
+  import GitHub from '$lib/assets/github.svg?component';
+  import Twitter from '$lib/assets/twitter.svg?component';
+  import Zulip from '$lib/assets/zulip.svg?component';
+</script>
+
+<footer class="footer">
+  <div class="content width-limit">
+    <div>
+      <h1>Rust</h1>
+      <ul role="list">
+        <li><a href="https://www.rust-lang.org/">rust-lang.org</a></li>
+        <li><a href="https://foundation.rust-lang.org/">Rust Foundation</a></li>
+        <li><a href="https://www.rust-lang.org/governance/teams/dev-tools#team-crates-io">The crates.io team</a></li>
+      </ul>
+    </div>
+
+    <div>
+      <h1>Get Help</h1>
+      <ul role="list">
+        <li><a href="https://doc.rust-lang.org/cargo/">The Cargo Book</a></li>
+        <li><a href={resolve('/support')}>Support</a></li>
+        <li><a href="https://status.crates.io/">System Status</a></li>
+        <li><a href="https://github.com/rust-lang/crates.io/issues/new/choose">Report a bug</a></li>
+      </ul>
+    </div>
+
+    <div>
+      <h1>Policies</h1>
+      <ul role="list">
+        <li><a href={resolve('/policies')}>Usage Policy</a></li>
+        <li><a href={resolve('/policies/security')}>Security</a></li>
+        <li><a href="https://foundation.rust-lang.org/policies/privacy-policy/">Privacy Policy</a></li>
+        <li><a href="https://www.rust-lang.org/policies/code-of-conduct">Code of Conduct</a></li>
+        <li><a href={resolve('/data-access')}>Data Access</a></li>
+      </ul>
+    </div>
+
+    <div>
+      <h1>Social</h1>
+      <ul role="list">
+        <li><a href="https://github.com/rust-lang/crates.io/"><GitHub /> rust-lang/crates.io</a></li>
+        <li><a href="https://rust-lang.zulipchat.com/#streams/318791/t-crates-io"><Zulip /> #t-crates-io</a></li>
+        <li><a href="https://twitter.com/cratesiostatus"><Twitter /> @cratesiostatus</a></li>
+      </ul>
+    </div>
+  </div>
+</footer>
+
+<style>
+  :root,
+  :global([data-theme='classic']) {
+    --footer-bg-color: var(--header-bg-color);
+    --footer-header-color: var(--yellow500);
+    --footer-header-shadow-color: var(--green900);
+    --footer-link-color: #fff;
+    --footer-link-hover-color: var(--yellow500);
+    --footer-link-hover-shadow-color: var(--green900);
+  }
+
+  .footer {
+    display: grid;
+    justify-items: center;
+    background: var(--footer-bg-color);
+  }
+
+  .content {
+    display: grid;
+    gap: var(--space-xl) var(--space-m);
+    padding: var(--space-l);
+
+    @media only screen and (min-width: 551px) {
+      grid-template-columns: repeat(2, 1fr);
+      justify-content: center;
+      padding: var(--space-xl) var(--space-m);
+    }
+
+    @media only screen and (min-width: 751px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    & h1 {
+      margin: 0 0 var(--space-s);
+      font-size: 20px;
+      font-weight: 500;
+      color: var(--footer-header-color);
+      text-shadow: 1px 1px 1px var(--footer-header-shadow-color);
+    }
+
+    & ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > * + * {
+        margin-top: var(--space-xs);
+      }
+    }
+
+    & li {
+      height: 1rem;
+    }
+
+    & a {
+      display: inline-flex;
+      /* slightly increased click targets */
+      margin: calc(var(--space-2xs) * -1);
+      padding: var(--space-2xs);
+      color: #fff;
+      font-size: 16px;
+      line-height: 1em;
+      white-space: nowrap;
+      transition: var(--transition-medium);
+
+      &:hover {
+        color: var(--footer-link-hover-color);
+        text-shadow: 1px 1px 1px var(--footer-link-hover-shadow-color);
+        /* apply color fade only on mouse-out */
+        transition: var(--transition-instant);
+
+        & :global(svg) {
+          filter: drop-shadow(1px 1px 1px var(--footer-link-hover-shadow-color));
+        }
+      }
+    }
+
+    & :global(svg) {
+      height: 1.25em;
+      width: 1.25em;
+      margin: -0.125em var(--space-xs) -0.125em 0;
+      flex-shrink: 0;
+    }
+  }
+</style>
diff --git a/svelte/src/routes/+layout.svelte b/svelte/src/routes/+layout.svelte
index 1fd1f578f6..edb234cc98 100644
--- a/svelte/src/routes/+layout.svelte
+++ b/svelte/src/routes/+layout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import Footer from '$lib/components/Footer.svelte';
   import Header from '$lib/components/Header.svelte';
 
   import '$lib/css/global.css';
 
   // TODO: import ProgressBar from '$lib/components/ProgressBar.svelte';
-  // TODO: import Footer from '$lib/components/Footer.svelte';
 
   let { children } = $props();
 
@@ -29,7 +29,7 @@
   </div>
 </main>
 
-<!-- TODO: <Footer /> -->
+<Footer />
 
 <style>
   .main {