diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
new file mode 100644
index 00000000..d1842355
--- /dev/null
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -0,0 +1,23 @@
+defmodule AtomicWeb.Components.LegalPagesLinks do
+  @moduledoc """
+  Contains the structure for the legal pages navigation
+  """
+  use AtomicWeb, :component
+
+  def legal_pages_links(assigns) do
+    ~H"""
+    <div class="flex-colunm group mt-2 mb-4 flex w-full flex-wrap place-items-center justify-center gap-x-6 gap-y-1 px-8">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline"><%= gettext("Terms of Service") %></p>
+      </.link>
+      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline"><%= gettext("Privacy Policy") %></p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline"><%= gettext("Cookie Policy") %></p>
+      </.link>
+      <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    </div>
+    """
+  end
+end
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 4062d54b..83371091 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -4,6 +4,7 @@ defmodule AtomicWeb.Components.Sidebar do
 
   alias Phoenix.LiveView.JS
   import AtomicWeb.Components.Icon
+  import AtomicWeb.Components.LegalPagesLinks
   alias Atomic.Organizations
 
   attr :current_user, :map, required: true
@@ -64,6 +65,8 @@ defmodule AtomicWeb.Components.Sidebar do
                 <.live_component id="mobile-organizations" module={AtomicWeb.Components.Organizations} current_user={@current_user} current_organization={@current_organization} organizations={@organizations} />
               <% end %>
             </div>
+            <!-- Legal Pages Links -->
+            <.legal_pages_links />
           </div>
         </div>
       </div>
diff --git a/lib/atomic_web/live/home_live/index.ex b/lib/atomic_web/live/home_live/index.ex
index c4224b28..9af04ca7 100644
--- a/lib/atomic_web/live/home_live/index.ex
+++ b/lib/atomic_web/live/home_live/index.ex
@@ -4,6 +4,7 @@ defmodule AtomicWeb.HomeLive.Index do
 
   import AtomicWeb.Components.{Activity, Announcement, Tabs, Unauthenticated, Dropdown}
   import AtomicWeb.HomeLive.Components.{FollowSuggestions, Schedule}
+  import AtomicWeb.Components.LegalPagesLinks
 
   alias Atomic.Activities
   alias Atomic.Feed
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index 022fe426..6c9c2d19 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -108,5 +108,7 @@
         <.schedule schedule={@schedule_default} current_user={@current_user} tab="all" />
       <% end %>
     </section>
+    <!-- Legal Pages Links -->
+    <.legal_pages_links />
   </div>
 </div>
diff --git a/lib/atomic_web/live/legal_terms_live/components/black_bar.ex b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
new file mode 100644
index 00000000..601d4478
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
@@ -0,0 +1,17 @@
+defmodule AtomicWeb.LegalTermsLive.Components.BlackBar do
+  @moduledoc """
+  Component for Legal Pages Black Bar.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def black_bar(assigns) do
+    ~H"""
+    <section class="flex justify-center bg-zinc-800 p-10 font-semibold text-white">
+      <p class="flex w-full justify-center md:w-2/3">
+        <%= gettext("Lorem ipsum dolor sit amet.") %>
+      </p>
+    </section>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
new file mode 100644
index 00000000..de92e90b
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -0,0 +1,53 @@
+defmodule AtomicWeb.LegalTermsLive.Components.Header do
+  @moduledoc """
+  Component for Legal Pages Header.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  @pages [
+    {"Terms of Service", "tos"},
+    {"Privacy Policy", "privacy"},
+    {"Cookie Policy", "cookies"}
+  ]
+
+  defp link_pages(current_page) do
+    Enum.map(@pages, fn {title, path} ->
+      if title == current_page do
+        {:current, title, path}
+      else
+        {:link, title, path}
+      end
+    end)
+  end
+
+  def header(assigns) do
+    ~H"""
+    <header class="max-w-[2000px] fixed flex w-full place-items-center justify-between bg-white pt-8 pr-8 pb-4 pl-4">
+      <div class="flex place-items-center gap-x-6 md:gap-x-12 lg:pl-12">
+        <div class="flex place-items-center gap-x-4">
+          <!-- Atomic Logo -->
+          <.link navigate={~p"/"}>
+            <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+          </.link>
+        </div>
+        <div class="flex hidden place-items-center gap-x-2 text-sm font-semibold text-zinc-300 sm:block sm:gap-x-4 sm:space-x-2 md:space-x-4">
+          <%= for {type, title, path} <- link_pages(@page_name) do %>
+            <%= case type do %>
+              <% :current -> %>
+                <span class="text-lg text-zinc-400"><%= title %></span>
+              <% :link -> %>
+                <.link class="hover:text-zinc-400" navigate={"/" <> path}><%= title %></.link>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      <!-- Link to Home (hidden on mobile) -->
+      <div class="flex place-items-center lg:pr-12">
+        <.button class="atomic-button atomic-button--white atomic-button--md hidden sm:block" patch={~p"/"}><%= gettext("Back Home") %></.button>
+        <.button class="atomic-button atomic-button--md hero-home block text-zinc-400 sm:hidden" patch={~p"/"}></.button>
+      </div>
+    </header>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/components/main_title.ex b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
new file mode 100644
index 00000000..1836ff3b
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
@@ -0,0 +1,15 @@
+defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
+  @moduledoc """
+  Component for Legal Pages Main Title.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def main_title(assigns) do
+    ~H"""
+    <section class="align-center pt-138 flex h-fit place-items-center px-4 py-40 xl:px-12">
+      <span class="w-86 text-7xl font-semibold text-zinc-800 sm:text-7xl lg:w-8/12 2xl:w-2/5"><%= @page_title %></span>
+    </section>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
new file mode 100644
index 00000000..33ebd972
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
@@ -0,0 +1,18 @@
+defmodule AtomicWeb.CookiesLive.Show do
+  use AtomicWeb, :live_view
+
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_params(_params, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_page, :cookies)
+     |> assign(:page_title, gettext("Cookie Policy"))}
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
new file mode 100644
index 00000000..4abe427e
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
@@ -0,0 +1,78 @@
+<main class="px-4 w-full flex justify-center">
+  <div class="flex flex-col max-w-[2000px]">
+    <!-- Header -->
+    <.header page_name="Cookie Policy" />
+    <!-- Main title -->
+    <.main_title page_title="Cookie Policy" />
+    <!-- Black container -->
+    <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
+    <!-- Content Section -->
+    <section class="w-full px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">How We Use Cookies</h2>
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+      <br />
+      <ul class="list-disc mx-6 mb-8">
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+      </ul>
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+
+      <div class="border my-8"></div>
+
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">What are cookies, pixels, and local storage?</h2>
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+      </p>
+      <br />
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+      </p>
+      <br />
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+      </p>
+
+      <div class="border my-8"></div>
+
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Why do our services use these technologies?</h2>
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+      </p>
+
+      <div class="border my-8"></div>
+
+      <ul class="list-disc mx-6 mb-8">
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+      </ul>
+
+      <div class="border my-8"></div>
+
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, quisquam? Ex harum aliquam dolores est asperiores mollitia, similique magni illum ea repellendus doloribus consequuntur sit distinctio sed dignissimos fuga placeat!
+      </p>
+
+      <div class="border my-8"></div>
+
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Jonas Johanes Johnson</h2>
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+      </p>
+
+      <div class="border my-8"></div>
+    </section>
+  </div>
+</main>
diff --git a/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
new file mode 100644
index 00000000..60d57720
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
@@ -0,0 +1,18 @@
+defmodule AtomicWeb.PrivacyLive.Show do
+  use AtomicWeb, :live_view
+
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_params(_params, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_page, :privacy)
+     |> assign(:page_title, gettext("Privacy Policy"))}
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
new file mode 100644
index 00000000..ef8cc15e
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
@@ -0,0 +1,121 @@
+<main class="px-4 w-full flex justify-center">
+  <div class="flex flex-col max-w-[2000px]">
+    <!-- Header -->
+    <.header page_name="Privacy Policy" />
+    <!-- Main title -->
+    <.main_title page_title="Privacy Policy" />
+    <!-- Black container -->
+    <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
+    <!-- Summary Section -->
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Before you scroll, jonas this</h2>
+      <p class="text-md sm:text-lg">
+        Jonas ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia maxime tempore sapiente reiciendis omnis reprehenderit maiores fuga assumenda porro sequi cupiditate quibusdam, voluptatem blanditiis, quos inventore cumque distinctio atque ad!
+      </p>
+      <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
+      <br />
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+    </section>
+    <!-- Grid Section -->
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-12">
+      <!-- Grid Container -->
+      <div class="grid place-items-center grid-cols-1 sm:place-items-initial sm:grid-cols-2 sm:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
+        <!-- Grid Item 1 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section1" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+        <!-- Grid Item 2 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section2" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+        <!-- Grid Item 3 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section3" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+        <!-- Grid Item 4 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section4" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+        <!-- Grid Item 5 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section5" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+        <!-- Grid Item 6 -->
+        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
+          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
+          <a href="#section6" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        </div>
+      </div>
+      <div class="border my-8"></div>
+    </section>
+    <!-- Terms of Service Content Section -->
+    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+      <div class="flex">
+        <!-- Sticky part -->
+        <div class="hidden xl:block xl:w-1/4 pr-20">
+          <ul class="sticky top-40">
+            <li><a href="#section1" class="text-sm font-semibold pb-2">1. Information We Collect </a></li>
+            <li><a href="#section2" class="text-sm font-semibold pb-2">2. How We Use Information</a></li>
+            <li><a href="#section3" class="text-sm font-semibold pb-2">3. Sharing Information</a></li>
+            <li><a href="#section4" class="text-sm font-semibold pb-2">4. How Long We Keep Information</a></li>
+            <li><a href="#section5" class="text-sm font-semibold pb-2">5. Take Control</a></li>
+            <li><a href="#section6" class="text-sm font-semibold pb-2">6. Your Rights and Ours</a></li>
+            <li><a href="#section7" class="text-sm font-semibold pb-2">7. Atomic's Audience</a></li>
+            <li><a href="#section8" class="text-sm font-semibold pb-2">8. Changes To This Privacy Policy</a></li>
+            <li><a href="#section9" class="text-sm font-semibold pb-2">9. General</a></li>
+            <li><a href="#section10" class="text-sm font-semibold pb-2">10. How To Contact Atomic</a></li>
+          </ul>
+        </div>
+        <!-- Content -->
+        <div class="xl:w-3/4">
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 scroll-mt-24" id="section1">1. Information We Collect</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section2">2. How We Use Information</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section3">3. Sharing Information</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section4">4. How Long We Keep Information</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section5">5. Take Control</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section6">6. Your Rights and Ours</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section7">7. Atomic's Audience</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section8">8. Changes To This Privacy Policy</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section9">9. General</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section10">10. How to Contact Atomic</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+        </div>
+      </div>
+      <div class="border my-8"></div>
+    </section>
+  </div>
+</main>
diff --git a/lib/atomic_web/live/legal_terms_live/tos_live/show.ex b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
new file mode 100644
index 00000000..87db7c86
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -0,0 +1,18 @@
+defmodule AtomicWeb.TermsLive.Show do
+  use AtomicWeb, :live_view
+
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_params(_params, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_page, :terms)
+     |> assign(:page_title, gettext("Terms of Service"))}
+  end
+end
diff --git a/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
new file mode 100644
index 00000000..20d8ae3a
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
@@ -0,0 +1,86 @@
+<main class="px-4 w-full flex justify-center">
+  <div class="flex flex-col max-w-[2000px]">
+    <!-- Header -->
+    <.header page_name="Terms of Service" />
+    <!-- Main title -->
+    <.main_title page_title="Terms of Service" />
+    <!-- Black container -->
+    <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
+    <!-- Summary Section -->
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Summary of our Terms</h2>
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+      <br />
+      <ul class="list-disc mx-6 mb-8">
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est odio explicabo expedita accusamus vero ullam deleniti laboriosam. Blanditiis minima inventore ut dolorum suscipit omnis dolore laudantium quo, mollitia, placeat accusantium.</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus veritatis provident laboriosam perferendis ducimus laborum molestiae fuga non aliquid! Dicta veniam fugiat harum? Nemo sunt voluptate dolorem placeat voluptates suscipit?</li>
+        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sapiente laboriosam quaerat animi sed distinctio dignissimos! Aut iste officia, libero, aspernatur illo nostrum sed autem id, dolorum molestias quae. Cum?</li>
+      </ul>
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+    </section>
+    <!-- Some Text Section -->
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96">
+      <div class="border my-8"></div>
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+      <br />
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+      <div class="border my-8"></div>
+    </section>
+    <!-- Atomic Terms of Service Section -->
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96">
+      <h2 class="font-semibold text-4xl sm:text-6xl mb-8">Atomic Terms of Service</h2>
+      <p class="text-md sm:text-2xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus, ea, voluptates jonas.</p>
+      <br />
+      <p class="text-md sm:text-lg">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quo at repellendus quia pariatur possimus labore laboriosam voluptas totam assumenda. Harum optio suscipit quas fuga laboriosam. Alias, eos! Praesentium, quibusdam! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis blanditiis soluta corporis ea nihil pariatur omnis, corrupti fugit reprehenderit inventore mollitia explicabo neque ex non accusamus rerum earum enim illo!
+      </p>
+      <br />
+      <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui exercitationem eaque, quibusdam sint sapiente excepturi repudiandae expedita, ipsa tempore dignissimos provident ipsum minus ullam rerum commodi quas? Odit, voluptatibus.</p>
+      <div class="border my-8"></div>
+    </section>
+    <!-- Terms of Service Content Section -->
+    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+      <div class="flex">
+        <!-- Sticky part -->
+        <div class="hidden xl:block xl:w-1/4 pr-20">
+          <ul class="sticky top-40">
+            <li><a href="#section1" class="text-sm font-semibold pb-2 transition-all duration-100">1. Who May Use the Services</a></li>
+            <li><a href="#section2" class="text-sm font-semibold pb-2">2. Privacy</a></li>
+            <li><a href="#section3" class="text-sm font-semibold pb-2">3. Content of the Services</a></li>
+            <li><a href="#section4" class="text-sm font-semibold pb-2">4. Using the Services</a></li>
+            <li><a href="#section5" class="text-sm font-semibold pb-2">5. Disclaimers and Limitations of Liability</a></li>
+            <li><a href="#section6" class="text-sm font-semibold pb-2">6. General</a></li>
+          </ul>
+        </div>
+        <!-- Content -->
+        <div class="xl:w-3/4">
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 scroll-mt-24" id="section1">1. Who May Use the Services</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section2">2. Privacy</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section3">3. Content on the Services</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section4">4. Using the Services</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section5">5. Disclaimers and Limitarions of Liability</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section6">6. General</h3>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
+          </p>
+        </div>
+      </div>
+      <div class="border my-8"></div>
+    </section>
+  </div>
+</main>
diff --git a/lib/atomic_web/router.ex b/lib/atomic_web/router.ex
index 9843a8c8..1568a2d7 100644
--- a/lib/atomic_web/router.ex
+++ b/lib/atomic_web/router.ex
@@ -98,6 +98,9 @@ defmodule AtomicWeb.Router do
       live "/activities", ActivityLive.Index, :index
       live "/organizations", OrganizationLive.Index, :index
       live "/announcements", AnnouncementLive.Index, :index
+      live "/tos", TermsLive.Show, :show
+      live "/privacy", PrivacyLive.Show, :show
+      live "/cookies", CookiesLive.Show, :show
 
       live "/activities/:id", ActivityLive.Show, :show
       live "/organizations/:organization_id", OrganizationLive.Show, :show
diff --git a/lib/atomic_web/templates/layout/root.html.heex b/lib/atomic_web/templates/layout/root.html.heex
index 2310c0d3..08bb7f5b 100644
--- a/lib/atomic_web/templates/layout/root.html.heex
+++ b/lib/atomic_web/templates/layout/root.html.heex
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full">
+<html lang="en" class="h-full scroll-smooth">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />