From 5b82e0a9893d12138f02228d0806974c28f4b885 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 14 Nov 2024 22:10:16 +0000
Subject: [PATCH 01/22] feat: add links and copy notice to sidebar

---
 lib/atomic_web/components/sidebar.ex | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 4062d54b..b8ca6334 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -23,6 +23,9 @@ defmodule AtomicWeb.Components.Sidebar do
     </div>
     <!-- Navigation -->
     <.navigation current_user={@current_user} current_organization={@current_organization} current_page={@current_page} is_authenticated={@is_authenticated} />
+
+    <!-- Legal pages and copyright notice -->
+    <.legal_pages />
     """
   end
 
@@ -63,6 +66,8 @@ defmodule AtomicWeb.Components.Sidebar do
                 <div class="text-xs font-semibold leading-6 text-zinc-400"><%= gettext("Your organizations") %></div>
                 <.live_component id="mobile-organizations" module={AtomicWeb.Components.Organizations} current_user={@current_user} current_organization={@current_organization} organizations={@organizations} />
               <% end %>
+              <!-- Legal pages and copyright notice -->
+            <.legal_pages />
             </div>
           </div>
         </div>
@@ -90,6 +95,8 @@ defmodule AtomicWeb.Components.Sidebar do
         <div class="absolute bottom-0 w-full">
           <.sidebar_dropdown current_user={@current_user} orientation={:up} />
         </div>
+        <!-- Legal pages and copyright notice -->
+        <.legal_pages />
       </div>
     </div>
     """
@@ -146,6 +153,24 @@ defmodule AtomicWeb.Components.Sidebar do
     """
   end
 
+  defp legal_pages(assigns) do
+    ~H"""
+      <div class="w-full flex flex-wrap gap-y-1 gap-x-2 group shrink-0 mt-2">
+        <.link navigate={~p"/tos"} class="shrink-0 select-none">
+          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Terms of Service</p>
+        </.link>
+        <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Privacy Policy</p>
+        </.link>
+        <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Cookie Policy</p>
+        </.link>
+        <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    </div>
+
+    """
+  end
+
   defp dropdown_items(nil), do: []
   defp dropdown_items(current_user), do: authenticated_dropdown_items(current_user)
 

From 5eefd51a6eabf381f49a9aa2d70ef0a2a37f95e9 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 14 Nov 2024 22:12:01 +0000
Subject: [PATCH 02/22] feat: add new pages routes to router

---
 lib/atomic_web/router.ex | 3 +++
 1 file changed, 3 insertions(+)

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

From a59072150168bec1f98ed9749c78d2ed61a8a72a Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 14 Nov 2024 23:47:15 +0000
Subject: [PATCH 03/22] feat: add pages for legal terms without styling

---
 .../live/legal_terms_live/cookies_live/show.ex   | 16 ++++++++++++++++
 .../legal_terms_live/cookies_live/show.html.heex |  7 +++++++
 .../live/legal_terms_live/privacy_live/show.ex   | 11 +++++++++++
 .../legal_terms_live/privacy_live/show.html.heex |  7 +++++++
 .../live/legal_terms_live/tos_live/show.ex       | 11 +++++++++++
 .../legal_terms_live/tos_live/show.html.heex     |  7 +++++++
 6 files changed, 59 insertions(+)
 create mode 100644 lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
 create mode 100644 lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
 create mode 100644 lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
 create mode 100644 lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
 create mode 100644 lib/atomic_web/live/legal_terms_live/tos_live/show.ex
 create mode 100644 lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex

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..f5ca2719
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
@@ -0,0 +1,16 @@
+defmodule AtomicWeb.CookiesLive.Show do
+  use AtomicWeb, :live_view
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  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..e9783445
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
@@ -0,0 +1,7 @@
+<div class="min-h-[100vh] lg:border-r">
+    <.page title="Cookie Policy">
+        <div class="px-4">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+        </div>
+    </.page>
+</div>
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..ef63e8af
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
@@ -0,0 +1,11 @@
+defmodule AtomicWeb.PrivacyLive.Show do
+  use AtomicWeb, :live_view
+
+  @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..2377454a
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
@@ -0,0 +1,7 @@
+<div class="min-h-[100vh] lg:border-r">
+    <.page title="Privacy Policy">
+        <div class="px-4">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+        </div>
+    </.page>  
+</div>
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..967d0e0c
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -0,0 +1,11 @@
+defmodule AtomicWeb.TermsLive.Show do
+  use AtomicWeb, :live_view
+
+  @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..e24b6e53
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
@@ -0,0 +1,7 @@
+<div class="min-h-[100vh] lg:border-r">
+    <.page title="Terms of Service">
+        <div class="px-4">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+        </div>
+    </.page>  
+</div>

From 839933418fbb09065ede6716f40185ad1667b065 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 15 Nov 2024 12:11:45 +0000
Subject: [PATCH 04/22] change

---
 lib/atomic_web/components/sidebar.ex                |  5 -----
 lib/atomic_web/live/home_live/index.html.heex       | 13 +++++++++++++
 .../live/legal_terms_live/cookies_live/show.ex      |  2 +-
 .../live/legal_terms_live/privacy_live/show.ex      |  5 +++++
 .../live/legal_terms_live/tos_live/show.ex          |  5 +++++
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index b8ca6334..d86fd743 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -66,8 +66,6 @@ defmodule AtomicWeb.Components.Sidebar do
                 <div class="text-xs font-semibold leading-6 text-zinc-400"><%= gettext("Your organizations") %></div>
                 <.live_component id="mobile-organizations" module={AtomicWeb.Components.Organizations} current_user={@current_user} current_organization={@current_organization} organizations={@organizations} />
               <% end %>
-              <!-- Legal pages and copyright notice -->
-            <.legal_pages />
             </div>
           </div>
         </div>
@@ -95,8 +93,6 @@ defmodule AtomicWeb.Components.Sidebar do
         <div class="absolute bottom-0 w-full">
           <.sidebar_dropdown current_user={@current_user} orientation={:up} />
         </div>
-        <!-- Legal pages and copyright notice -->
-        <.legal_pages />
       </div>
     </div>
     """
@@ -167,7 +163,6 @@ defmodule AtomicWeb.Components.Sidebar do
         </.link>
         <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
     </div>
-
     """
   end
 
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index 022fe426..f68d6c92 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -108,5 +108,18 @@
         <.schedule schedule={@schedule_default} current_user={@current_user} tab="all" />
       <% end %>
     </section>
+    <!-- Legal Pages -->
+    <section class="w-full flex flex-wrap gap-y-1 gap-x-6 group px-12 my-2">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">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">Privacy Policy</p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
+      </.link>
+      <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    </section>
   </div>
 </div>
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
index f5ca2719..75dbd5c1 100644
--- a/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
@@ -3,7 +3,7 @@ defmodule AtomicWeb.CookiesLive.Show do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, socket}
+    {:ok, socket, layout: false}
   end
 
   @impl true
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
index ef63e8af..3a97e42d 100644
--- a/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
@@ -1,6 +1,11 @@
 defmodule AtomicWeb.PrivacyLive.Show do
   use AtomicWeb, :live_view
 
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
   @impl true
   def handle_params(_params, _, socket) do
     {:noreply,
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
index 967d0e0c..faec4603 100644
--- a/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -1,6 +1,11 @@
 defmodule AtomicWeb.TermsLive.Show do
   use AtomicWeb, :live_view
 
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
   @impl true
   def handle_params(_params, _, socket) do
     {:noreply,

From 1917294acf3ec92b4634572efe236754b59dce05 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 15 Nov 2024 21:09:04 +0000
Subject: [PATCH 05/22] add terms of services(tos) page (incomplete
 design/content)

---
 .../live/legal_terms_live/tos_live/show.ex    |  9 +++
 .../legal_terms_live/tos_live/show.html.heex  | 69 +++++++++++++++++--
 2 files changed, 72 insertions(+), 6 deletions(-)

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
index faec4603..e2b5db52 100644
--- a/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -13,4 +13,13 @@ defmodule AtomicWeb.TermsLive.Show do
      |> assign(:current_page, :terms)
      |> assign(:page_title, gettext("Terms of Service"))}
   end
+
+  def test(assigns) do
+    ~H'''
+    <div>
+      Jonas' test
+    </div>
+    '''
+  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
index e24b6e53..4dd1969f 100644
--- 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
@@ -1,7 +1,64 @@
-<div class="min-h-[100vh] lg:border-r">
-    <.page title="Terms of Service">
-        <div class="px-4">
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+<main class="px-4">
+    <!-- Header -->
+    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
+        <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <.link navigate={~p"/"}>
+                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+            </.link>
+            <p class="text-2xl font-semibold text-zinc-400 select-none">Terms of Service</p>
         </div>
-    </.page>  
-</div>
+        <!-- Link heading back to the home page (small devices only)-->
+        <div class="flex place-items-center hidden sm:block lg:pr-12">
+            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+        </div>
+    </header>
+
+    <!--Title-->
+    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Terms of Service</span>
+    </section>
+
+    <!--Black box-->
+
+    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
+        <p class="w-full flex justify-center md:w-2/3">
+            Lorem ipsum dolor sit amet.
+        </p>
+    </section>
+
+    <!--Summary of Terms content-->
+
+    <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>
+    
+    <!--Division with text-->
+    
+    <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 content-->
+        
+    <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>
+</main>  

From 7760b22602bf4f3d9a964db099a28b06328a1244 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sat, 16 Nov 2024 23:38:23 +0000
Subject: [PATCH 06/22] develop design for tos and privacy pages
 (functionalities incomplete)

---
 .../cookies_live/show.html.heex               | 33 ++++++--
 .../privacy_live/show.html.heex               | 81 +++++++++++++++++--
 .../legal_terms_live/tos_live/show.html.heex  | 32 ++++++++
 3 files changed, 134 insertions(+), 12 deletions(-)

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
index e9783445..d89f83b0 100644
--- 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
@@ -1,7 +1,28 @@
-<div class="min-h-[100vh] lg:border-r">
-    <.page title="Cookie Policy">
-        <div class="px-4">
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+<main class="px-4">
+    <!-- Header -->
+    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
+        <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <.link navigate={~p"/"}>
+                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+            </.link>
+            <p class="text-2xl font-semibold text-zinc-400 select-none">Cookie Policy</p>
         </div>
-    </.page>
-</div>
+        <!-- Link heading back to the home page (small devices only)-->
+        <div class="flex place-items-center hidden sm:block lg:pr-12">
+            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+        </div>
+    </header>
+
+    <!--Title-->
+    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Cookie Policy</span>
+    </section>
+
+    <!--Black box-->
+
+    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
+        <p class="w-full flex justify-center md:w-2/3">
+            Lorem ipsum dolor sit amet.
+        </p>
+    </section>
+</main>
\ No newline at end of file
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
index 2377454a..e50265e4 100644
--- 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
@@ -1,7 +1,76 @@
-<div class="min-h-[100vh] lg:border-r">
-    <.page title="Privacy Policy">
-        <div class="px-4">
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, dolorem commodi iste perspiciatis, similique harum porro laboriosam deleniti exercitationem voluptatibus atque consectetur tempora adipisci. Ea quam vero minima placeat reprehenderit! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque consequuntur, dicta doloremque non a aut vel placeat quis laboriosam veritatis repudiandae enim fugit eos, voluptatum voluptate dolores alias perspiciatis est?
+<main class="px-4">
+    <!-- Header -->
+    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
+        <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <.link navigate={~p"/"}>
+                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+            </.link>
+            <p class="text-2xl font-semibold text-zinc-400 select-none">Privacy Policy</p>
         </div>
-    </.page>  
-</div>
+        <!-- Link heading back to the home page (small devices only)-->
+        <div class="flex place-items-center hidden sm:block lg:pr-12">
+            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+        </div>
+    </header>
+
+    <!--Title-->
+    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Privacy Policy</span>
+    </section>
+
+    <!--Black box-->
+
+    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
+        <p class="w-full flex justify-center md:w-2/3">
+            Lorem ipsum dolor sit amet.
+        </p>
+    </section>
+
+    <!--Before you scroll read this-->
+
+    <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>
+        <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>
+
+    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-12">
+        <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">
+            <%= for i <- 1 .. 6 do %>
+                <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 class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+                </div>
+             <% end %>
+        </div>
+        
+        <div class="border my-8"></div>
+    </section>
+
+    <!--Terms of Service content (sticky part)-->
+
+    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-4">
+        <div class="flex">
+            <div class="hidden xl:block xl:w-1/4 pr-20">
+                <ul class="sticky top-40">
+                    <%= for i <- 1.. 6 do%>
+                        <li> <a href="#" class="text-sm font-semibold pb-2 cursor-default"><%= i %>. Who May Use the Services</a></li>
+                    <% end %>
+                </ul>
+            </div>  
+            <div class="xl:w-3/4">
+                <%= for i <- 1.. 6 do%>
+                    <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 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>
+                <% end %>
+
+            </div>    
+        </div>
+        
+
+        <div class="border my-8"></div>
+    </section>
+    
+
+</main>
\ No newline at end of file
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
index 4dd1969f..00339578 100644
--- 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
@@ -61,4 +61,36 @@
         <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 (sticky part)-->
+
+    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+        <div class="flex">
+            <div class="hidden xl:block xl:w-1/4 pr-20">
+                <ul class="sticky top-40">
+                    <%= for i <- 1.. 6 do%>
+                        <li> <a href="#" class="text-sm font-semibold pb-2 cursor-default"><%= i %>. Who May Use the Services</a></li>
+                    <% end %>
+                </ul>
+            </div>  
+            <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 Limitations 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>
+    
 </main>  

From dbc2370e5154b26463de7ce21d7407ee43e3d290 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 17 Nov 2024 22:17:20 +0000
Subject: [PATCH 07/22] feat: completed design for legal pages

---
 lib/atomic_web/live/home_live/index.html.heex |  2 +-
 .../cookies_live/show.html.heex               | 58 +++++++++++++++++++
 .../privacy_live/show.html.heex               | 41 ++++++++++---
 .../legal_terms_live/tos_live/show.html.heex  | 15 +++--
 4 files changed, 100 insertions(+), 16 deletions(-)

diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index f68d6c92..4fbc13ab 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -109,7 +109,7 @@
       <% end %>
     </section>
     <!-- Legal Pages -->
-    <section class="w-full flex flex-wrap gap-y-1 gap-x-6 group px-12 my-2">
+    <section class="w-full flex flex-wrap gap-y-1 gap-x-6 group px-12 mb-4 mt-2">
       <.link navigate={~p"/tos"} class="shrink-0 select-none">
         <p class="text-xs font-semibold text-zinc-400 hover:underline">Terms of Service</p>
       </.link>
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
index d89f83b0..868b4c89 100644
--- 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
@@ -25,4 +25,62 @@
             Lorem ipsum dolor sit amet.
         </p>
     </section>
+
+    <!--Summary of Terms content-->
+
+    <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">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>
 </main>
\ No newline at end of file
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
index e50265e4..c16172a1 100644
--- 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
@@ -50,21 +50,44 @@
 
     <!--Terms of Service content (sticky part)-->
 
-    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-4">
+    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
         <div class="flex">
             <div class="hidden xl:block xl:w-1/4 pr-20">
                 <ul class="sticky top-40">
-                    <%= for i <- 1.. 6 do%>
-                        <li> <a href="#" class="text-sm font-semibold pb-2 cursor-default"><%= i %>. Who May Use the Services</a></li>
-                    <% end %>
+                    <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>  
             <div class="xl:w-3/4">
-                <%= for i <- 1.. 6 do%>
-                    <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 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>
-                <% end %>
-
+                <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>
         
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
index 00339578..f6c31f37 100644
--- 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
@@ -68,9 +68,12 @@
         <div class="flex">
             <div class="hidden xl:block xl:w-1/4 pr-20">
                 <ul class="sticky top-40">
-                    <%= for i <- 1.. 6 do%>
-                        <li> <a href="#" class="text-sm font-semibold pb-2 cursor-default"><%= i %>. Who May Use the Services</a></li>
-                    <% end %>
+                    <li> <a href="#section1" class="text-sm font-semibold pb-2">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>  
             <div class="xl:w-3/4">
@@ -78,11 +81,11 @@
                 <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>
+                <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 Limitations of Liability</h3>
+                <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>
@@ -92,5 +95,5 @@
 
         <div class="border my-8"></div>
     </section>
-    
+
 </main>  

From cb0bf7bb810cccb09084819d82a68145867a2931 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 18 Nov 2024 20:56:10 +0000
Subject: [PATCH 08/22] feat: add proper comments

---
 .../cookies_live/show.html.heex               | 14 ++---
 .../privacy_live/show.html.heex               | 63 +++++++++++++------
 .../legal_terms_live/tos_live/show.html.heex  | 28 ++++-----
 3 files changed, 64 insertions(+), 41 deletions(-)

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
index 868b4c89..220196a7 100644
--- 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
@@ -2,32 +2,32 @@
     <!-- Header -->
     <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
         <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <!-- Atomic Logo -->
             <.link navigate={~p"/"}>
                 <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
             </.link>
+            <!-- Section Name -->
             <p class="text-2xl font-semibold text-zinc-400 select-none">Cookie Policy</p>
         </div>
-        <!-- Link heading back to the home page (small devices only)-->
+        <!-- Link to Home (hidden on mobile) -->
         <div class="flex place-items-center hidden sm:block lg:pr-12">
             <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
         </div>
     </header>
 
-    <!--Title-->
-    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+    <!-- Main title -->
+    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
         <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Cookie Policy</span>
     </section>
 
-    <!--Black box-->
-
+    <!-- Black container -->
     <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
         <p class="w-full flex justify-center md:w-2/3">
             Lorem ipsum dolor sit amet.
         </p>
     </section>
 
-    <!--Summary of Terms content-->
-
+    <!-- Content 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">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>
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
index c16172a1..6ba1a07e 100644
--- 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
@@ -2,56 +2,82 @@
     <!-- Header -->
     <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
         <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <!-- Atomic Logo -->
             <.link navigate={~p"/"}>
                 <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
             </.link>
+            <!-- Section Name -->
             <p class="text-2xl font-semibold text-zinc-400 select-none">Privacy Policy</p>
         </div>
-        <!-- Link heading back to the home page (small devices only)-->
+        <!-- Link to Home (hidden on mobile) -->
         <div class="flex place-items-center hidden sm:block lg:pr-12">
             <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
         </div>
     </header>
 
-    <!--Title-->
-    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+    <!-- Main title -->
+    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
         <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Privacy Policy</span>
     </section>
 
-    <!--Black box-->
-
+    <!-- Black container -->
     <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
         <p class="w-full flex justify-center md:w-2/3">
             Lorem ipsum dolor sit amet.
         </p>
     </section>
 
-    <!--Before you scroll read this-->
-
+    <!-- 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">
-            <%= for i <- 1 .. 6 do %>
-                <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 class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
-                </div>
-             <% end %>
+            <!-- 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 (sticky part)-->
-
+    <!-- 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
@@ -67,6 +93,7 @@
                     <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>
@@ -90,8 +117,6 @@
                 <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>
     
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
index f6c31f37..55305550 100644
--- 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
@@ -2,35 +2,36 @@
     <!-- Header -->
     <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
         <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <!-- Atomic Logo -->
             <.link navigate={~p"/"}>
                 <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
             </.link>
+            <!-- Section Name -->
             <p class="text-2xl font-semibold text-zinc-400 select-none">Terms of Service</p>
         </div>
-        <!-- Link heading back to the home page (small devices only)-->
+        <!-- Link to Home (hidden on mobile) -->
         <div class="flex place-items-center hidden sm:block lg:pr-12">
             <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
         </div>
     </header>
 
-    <!--Title-->
-    <section class="flex place-items-center align-center h-fit px-4 py-40 pt-138">
+    <!-- Main title -->
+    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
         <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Terms of Service</span>
     </section>
 
-    <!--Black box-->
-
+    <!-- Black container -->
     <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
         <p class="w-full flex justify-center md:w-2/3">
             Lorem ipsum dolor sit amet.
         </p>
     </section>
 
-    <!--Summary of Terms content-->
-
+    <!-- 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>
+        <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
         <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>
@@ -40,8 +41,7 @@
         <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>
     
-    <!--Division with text-->
-    
+    <!-- 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>
@@ -50,8 +50,7 @@
         <div class="border my-8"></div>
     </section>
 
-    <!--Atomic Terms of Service content-->
-        
+    <!-- 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>
@@ -62,10 +61,10 @@
         <div class="border my-8"></div>
     </section>
 
-    <!--Terms of Service content (sticky part)-->
-
+    <!-- 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. Who May Use the Services</a></li>
@@ -76,6 +75,7 @@
                     <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>
@@ -91,8 +91,6 @@
                 <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>
 

From 07f249b94fa3e857ca0ac5ae8cf1852fb32b5559 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 18 Nov 2024 21:31:08 +0000
Subject: [PATCH 09/22] feat: add links to mobile sidebar

---
 lib/atomic_web/components/sidebar.ex          | 13 +++++++++++++
 lib/atomic_web/live/home_live/index.html.heex |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index d86fd743..ddcb423b 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -67,6 +67,19 @@ 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 -->
+            <div class="w-full flex flex-wrap justify-center flex-colunm place-items-center gap-y-1 gap-x-6 group mb-4 mt-2">
+              <.link navigate={~p"/tos"} class="shrink-0 select-none">
+                <p class="text-xs font-semibold text-zinc-400 hover:underline">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">Privacy Policy</p>
+              </.link>
+              <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+                <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
+              </.link>
+              <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index 4fbc13ab..def0291c 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -108,8 +108,8 @@
         <.schedule schedule={@schedule_default} current_user={@current_user} tab="all" />
       <% end %>
     </section>
-    <!-- Legal Pages -->
-    <section class="w-full flex flex-wrap gap-y-1 gap-x-6 group px-12 mb-4 mt-2">
+    <!-- Legal Pages Links -->
+    <section class="w-full flex flex-wrap justify-center gap-y-1 gap-x-6 group px-2 mb-4 mt-2">
       <.link navigate={~p"/tos"} class="shrink-0 select-none">
         <p class="text-xs font-semibold text-zinc-400 hover:underline">Terms of Service</p>
       </.link>

From 78933443c1744ad1f58058723e205e4248cce31f Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 18 Nov 2024 22:54:12 +0000
Subject: [PATCH 10/22] feat: add components for commom structures

---
 lib/atomic_web/components/sidebar.ex          |  6 ++---
 .../legal_terms_live/components/black_bar.ex  | 14 +++++++++++
 .../legal_terms_live/components/header.ex     | 23 +++++++++++++++++
 .../legal_terms_live/components/main_title.ex | 12 +++++++++
 .../legal_terms_live/cookies_live/show.ex     |  2 ++
 .../cookies_live/show.html.heex               | 21 ++++++----------
 .../legal_terms_live/privacy_live/show.ex     |  2 ++
 .../privacy_live/show.html.heex               | 21 ++++++----------
 .../live/legal_terms_live/tos_live/show.ex    | 11 ++------
 .../legal_terms_live/tos_live/show.html.heex  | 25 +++----------------
 10 files changed, 75 insertions(+), 62 deletions(-)
 create mode 100644 lib/atomic_web/live/legal_terms_live/components/black_bar.ex
 create mode 100644 lib/atomic_web/live/legal_terms_live/components/header.ex
 create mode 100644 lib/atomic_web/live/legal_terms_live/components/main_title.ex

diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index ddcb423b..adb7c39e 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -70,13 +70,13 @@ defmodule AtomicWeb.Components.Sidebar do
             <!-- Legal Pages Links -->
             <div class="w-full flex flex-wrap justify-center flex-colunm place-items-center gap-y-1 gap-x-6 group mb-4 mt-2">
               <.link navigate={~p"/tos"} class="shrink-0 select-none">
-                <p class="text-xs font-semibold text-zinc-400 hover:underline">Terms of Service</p>
+                <p class="text-xs font-semibold text-zinc-400">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">Privacy Policy</p>
+                <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
               </.link>
               <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-                <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
+                <p class="text-xs font-semibold text-zinc-400">Cookie Policy</p>
               </.link>
               <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
             </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..e94b5116
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
@@ -0,0 +1,14 @@
+defmodule AtomicWeb.LegalTermsLive.Components.BlackBar do
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def black_bar(assigns) do
+    ~H"""
+    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
+        <p class="w-full flex justify-center md:w-2/3">
+            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..7b9956f8
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -0,0 +1,23 @@
+defmodule AtomicWeb.LegalTermsLive.Components.Header do
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def header(assigns) do
+    ~H"""
+    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
+        <div class="flex place-items-center gap-x-4 lg:pl-12">
+            <!-- Atomic Logo -->
+            <.link navigate={~p"/"}>
+                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+            </.link>
+            <!-- Section Name -->
+            <p class="text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
+        </div>
+        <!-- Link to Home (hidden on mobile) -->
+        <div class="flex place-items-center hidden sm:block lg:pr-12">
+            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+        </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..80711c7c
--- /dev/null
+++ b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
@@ -0,0 +1,12 @@
+defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def main_title(assigns) do
+    ~H"""
+    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
+      <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 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
index 75dbd5c1..44a0f020 100644
--- a/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
@@ -1,6 +1,8 @@
 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}
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
index 220196a7..5fc0dc58 100644
--- 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
@@ -1,19 +1,12 @@
 <main class="px-4">
     <!-- Header -->
-    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
-        <div class="flex place-items-center gap-x-4 lg:pl-12">
-            <!-- Atomic Logo -->
-            <.link navigate={~p"/"}>
-                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-            </.link>
-            <!-- Section Name -->
-            <p class="text-2xl font-semibold text-zinc-400 select-none">Cookie Policy</p>
-        </div>
-        <!-- Link to Home (hidden on mobile) -->
-        <div class="flex place-items-center hidden sm:block lg:pr-12">
-            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
-        </div>
-    </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" />
 
     <!-- Main title -->
     <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
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
index 3a97e42d..4cf80192 100644
--- a/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
@@ -1,6 +1,8 @@
 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}
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
index 6ba1a07e..f8cebdc4 100644
--- 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
@@ -1,19 +1,12 @@
 <main class="px-4">
     <!-- Header -->
-    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
-        <div class="flex place-items-center gap-x-4 lg:pl-12">
-            <!-- Atomic Logo -->
-            <.link navigate={~p"/"}>
-                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-            </.link>
-            <!-- Section Name -->
-            <p class="text-2xl font-semibold text-zinc-400 select-none">Privacy Policy</p>
-        </div>
-        <!-- Link to Home (hidden on mobile) -->
-        <div class="flex place-items-center hidden sm:block lg:pr-12">
-            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
-        </div>
-    </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" />
 
     <!-- Main title -->
     <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
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
index e2b5db52..c4570cd3 100644
--- a/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -1,6 +1,8 @@
 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}
@@ -13,13 +15,4 @@ defmodule AtomicWeb.TermsLive.Show do
      |> assign(:current_page, :terms)
      |> assign(:page_title, gettext("Terms of Service"))}
   end
-
-  def test(assigns) do
-    ~H'''
-    <div>
-      Jonas' test
-    </div>
-    '''
-  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
index 55305550..c7af5757 100644
--- 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
@@ -1,31 +1,12 @@
 <main class="px-4">
     <!-- Header -->
-    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
-        <div class="flex place-items-center gap-x-4 lg:pl-12">
-            <!-- Atomic Logo -->
-            <.link navigate={~p"/"}>
-                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-            </.link>
-            <!-- Section Name -->
-            <p class="text-2xl font-semibold text-zinc-400 select-none">Terms of Service</p>
-        </div>
-        <!-- Link to Home (hidden on mobile) -->
-        <div class="flex place-items-center hidden sm:block lg:pr-12">
-            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
-        </div>
-    </header>
+    <.header page_name="Terms of Service"/>
 
     <!-- Main title -->
-    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
-        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Terms of Service</span>
-    </section>
+    <.main_title page_title="Terms of Service" />
 
     <!-- Black container -->
-    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
-        <p class="w-full flex justify-center md:w-2/3">
-            Lorem ipsum dolor sit amet.
-        </p>
-    </section>
+    <.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">

From b7013c3a285585acc8694129352c2dfd5c4bb495 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 18 Nov 2024 23:28:38 +0000
Subject: [PATCH 11/22] feat: add components and create nav through the pages

---
 .../legal_terms_live/components/header.ex     | 32 ++++++++++++++-----
 .../cookies_live/show.html.heex               | 16 ++--------
 .../privacy_live/show.html.heex               | 16 ++--------
 .../legal_terms_live/tos_live/show.html.heex  |  2 +-
 4 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 7b9956f8..1b30fce0 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -4,14 +4,30 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="w-full fixed flex bg-white justify-between px-8 pt-8 pb-4">
-        <div class="flex place-items-center gap-x-4 lg:pl-12">
-            <!-- Atomic Logo -->
-            <.link navigate={~p"/"}>
-                <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-            </.link>
-            <!-- Section Name -->
-            <p class="text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
+    <header class="w-full fixed flex bg-white place-items-center justify-between px-8 pt-8 pb-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-12 sm:gap-x-4">
+              <!-- Atomic Logo -->
+              <.link navigate={~p"/"}>
+                  <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+              </.link>
+              <!-- Section Name -->
+              <p class="text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
+            </div>
+            <div class="hidden sm:block flex place-items-center gap-x-2 sm:gap-x-4 sm:space-x-2 md:space-x-4 text-zinc-300 font-semibold text-sm">
+            <%= if @page_name == "Terms of Service" do %>
+              <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+              <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+            <% end %>
+            <%= if @page_name == "Privacy Policy" do %>
+              <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+              <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+            <% end %>
+            <%= if @page_name == "Cookie Policy" do %>
+              <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+              <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+            <% end %>
+            </div>
         </div>
         <!-- Link to Home (hidden on mobile) -->
         <div class="flex place-items-center hidden sm:block lg:pr-12">
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
index 5fc0dc58..d5f7407f 100644
--- 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
@@ -1,25 +1,13 @@
 <main class="px-4">
     <!-- Header -->
-    <.header page_name="Terms of Service"/>
+    <.header page_name="Cookie Policy"/>
 
     <!-- Main title -->
-    <.main_title page_title="Terms of Service" />
+    <.main_title page_title="Cookie Policy" />
 
     <!-- Black container -->
     <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
 
-    <!-- Main title -->
-    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
-        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Cookie Policy</span>
-    </section>
-
-    <!-- Black container -->
-    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
-        <p class="w-full flex justify-center md:w-2/3">
-            Lorem ipsum dolor sit amet.
-        </p>
-    </section>
-
     <!-- Content 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">How We Use Cookies</h2>
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
index f8cebdc4..32b3d5ee 100644
--- 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
@@ -1,25 +1,13 @@
 <main class="px-4">
     <!-- Header -->
-    <.header page_name="Terms of Service"/>
+    <.header page_name="Privacy Policy"/>
 
     <!-- Main title -->
-    <.main_title page_title="Terms of Service" />
+    <.main_title page_title="Privacy Policy" />
 
     <!-- Black container -->
     <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
 
-    <!-- Main title -->
-    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
-        <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5">Privacy Policy</span>
-    </section>
-
-    <!-- Black container -->
-    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
-        <p class="w-full flex justify-center md:w-2/3">
-            Lorem ipsum dolor sit amet.
-        </p>
-    </section>
-
     <!-- 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>
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
index c7af5757..a1cc5751 100644
--- 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
@@ -1,7 +1,7 @@
 <main class="px-4">
     <!-- Header -->
     <.header page_name="Terms of Service"/>
-
+    
     <!-- Main title -->
     <.main_title page_title="Terms of Service" />
 

From 3a9f93529f213819ec2fb3bec9127925fa5f2318 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 19 Nov 2024 14:04:08 +0000
Subject: [PATCH 12/22] feat: add link to home (mobile) and add smooth behavior

---
 .../live/legal_terms_live/components/header.ex           | 9 +++++----
 .../live/legal_terms_live/tos_live/show.html.heex        | 6 +++---
 lib/atomic_web/templates/layout/root.html.heex           | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 1b30fce0..0148bea6 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -6,13 +6,13 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
     ~H"""
     <header class="w-full fixed flex bg-white place-items-center justify-between px-8 pt-8 pb-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-12 sm:gap-x-4">
+            <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>
               <!-- Section Name -->
-              <p class="text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
+              <p class="hidden sm:block text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
             </div>
             <div class="hidden sm:block flex place-items-center gap-x-2 sm:gap-x-4 sm:space-x-2 md:space-x-4 text-zinc-300 font-semibold text-sm">
             <%= if @page_name == "Terms of Service" do %>
@@ -30,8 +30,9 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
             </div>
         </div>
         <!-- Link to Home (hidden on mobile) -->
-        <div class="flex place-items-center hidden sm:block lg:pr-12">
-            <.link class="atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+        <div class="flex place-items-center lg:pr-12">
+            <.link class="hidden sm:block atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
+            <.link class="block sm:hidden atomic-button atomic-button--md hero-home text-zinc-400" navigate={~p"/"}></.link>
         </div>
     </header>
     """
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
index a1cc5751..7f30d2f2 100644
--- 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
@@ -48,14 +48,14 @@
             <!-- 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. Who May Use the Services</a></li>
+                    <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>  
+            </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>
@@ -70,7 +70,7 @@
                 <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>
         <div class="border my-8"></div>
     </section>
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" />

From f0b64bfb0aa02c24c9b5b8294ebb8d25951dca32 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 19 Nov 2024 14:14:09 +0000
Subject: [PATCH 13/22] feat: run mix format

---
 lib/atomic_web/components/sidebar.ex          |  25 +-
 .../legal_terms_live/components/black_bar.ex  |   8 +-
 .../legal_terms_live/components/header.ex     |  56 ++---
 .../legal_terms_live/components/main_title.ex |   4 +-
 .../legal_terms_live/cookies_live/show.ex     |   2 +-
 .../cookies_live/show.html.heex               | 119 +++++-----
 .../legal_terms_live/privacy_live/show.ex     |   2 +-
 .../privacy_live/show.html.heex               | 222 ++++++++++--------
 .../live/legal_terms_live/tos_live/show.ex    |   2 +-
 .../legal_terms_live/tos_live/show.html.heex  | 159 +++++++------
 10 files changed, 314 insertions(+), 285 deletions(-)

diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index adb7c39e..b4ce48e2 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -23,7 +23,6 @@ defmodule AtomicWeb.Components.Sidebar do
     </div>
     <!-- Navigation -->
     <.navigation current_user={@current_user} current_organization={@current_organization} current_page={@current_page} is_authenticated={@is_authenticated} />
-
     <!-- Legal pages and copyright notice -->
     <.legal_pages />
     """
@@ -68,7 +67,7 @@ defmodule AtomicWeb.Components.Sidebar do
               <% end %>
             </div>
             <!-- Legal Pages Links -->
-            <div class="w-full flex flex-wrap justify-center flex-colunm place-items-center gap-y-1 gap-x-6 group mb-4 mt-2">
+            <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">
               <.link navigate={~p"/tos"} class="shrink-0 select-none">
                 <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
               </.link>
@@ -164,17 +163,17 @@ defmodule AtomicWeb.Components.Sidebar do
 
   defp legal_pages(assigns) do
     ~H"""
-      <div class="w-full flex flex-wrap gap-y-1 gap-x-2 group shrink-0 mt-2">
-        <.link navigate={~p"/tos"} class="shrink-0 select-none">
-          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Terms of Service</p>
-        </.link>
-        <.link navigate={~p"/privacy"} class="shrink-0 select-none">
-          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Privacy Policy</p>
-        </.link>
-        <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-          <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Cookie Policy</p>
-        </.link>
-        <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    <div class="group mt-2 flex w-full shrink-0 flex-wrap gap-x-2 gap-y-1">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Terms of Service</p>
+      </.link>
+      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Privacy Policy</p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Cookie Policy</p>
+      </.link>
+      <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
     </div>
     """
   end
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
index e94b5116..ffd8b514 100644
--- a/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
@@ -4,10 +4,10 @@ defmodule AtomicWeb.LegalTermsLive.Components.BlackBar do
 
   def black_bar(assigns) do
     ~H"""
-    <section class="flex justify-center bg-zinc-800 text-white font-semibold p-10">
-        <p class="w-full flex justify-center md:w-2/3">
-            Lorem ipsum dolor sit amet.
-        </p>
+    <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">
+        Lorem ipsum dolor sit amet.
+      </p>
     </section>
     """
   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
index 0148bea6..c88f92c5 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -4,36 +4,36 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="w-full fixed flex bg-white place-items-center justify-between px-8 pt-8 pb-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>
-              <!-- Section Name -->
-              <p class="hidden sm:block text-2xl font-semibold text-zinc-400 select-none"><%= @page_name %></p>
-            </div>
-            <div class="hidden sm:block flex place-items-center gap-x-2 sm:gap-x-4 sm:space-x-2 md:space-x-4 text-zinc-300 font-semibold text-sm">
-            <%= if @page_name == "Terms of Service" do %>
-              <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
-              <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
-            <% end %>
-            <%= if @page_name == "Privacy Policy" do %>
-              <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
-              <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
-            <% end %>
-            <%= if @page_name == "Cookie Policy" do %>
-              <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
-              <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
-            <% end %>
-            </div>
+    <header class="fixed flex w-full place-items-center justify-between bg-white px-8 pt-8 pb-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>
+          <!-- Section Name -->
+          <p class="hidden select-none text-2xl font-semibold text-zinc-400 sm:block"><%= @page_name %></p>
         </div>
-        <!-- Link to Home (hidden on mobile) -->
-        <div class="flex place-items-center lg:pr-12">
-            <.link class="hidden sm:block atomic-button atomic-button--white atomic-button--md" navigate={~p"/"}>Back home</.link>
-            <.link class="block sm:hidden atomic-button atomic-button--md hero-home text-zinc-400" navigate={~p"/"}></.link>
+        <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">
+          <%= if @page_name == "Terms of Service" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+          <% end %>
+          <%= if @page_name == "Privacy Policy" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+          <% end %>
+          <%= if @page_name == "Cookie Policy" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+          <% end %>
         </div>
+      </div>
+      <!-- Link to Home (hidden on mobile) -->
+      <div class="flex place-items-center lg:pr-12">
+        <.link class="atomic-button atomic-button--white atomic-button--md hidden sm:block" navigate={~p"/"}>Back home</.link>
+        <.link class="atomic-button atomic-button--md hero-home block text-zinc-400 sm:hidden" navigate={~p"/"}></.link>
+      </div>
     </header>
     """
   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
index 80711c7c..0cdb3e83 100644
--- a/lib/atomic_web/live/legal_terms_live/components/main_title.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
@@ -4,8 +4,8 @@ defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
 
   def main_title(assigns) do
     ~H"""
-    <section class="flex place-items-center align-center h-fit px-4 xl:px-12 py-40 pt-138">
-      <span class="text-7xl sm:text-9xl text-zinc-800 font-semibold w-86 lg:w-8/12 2xl:w-2/5"><%= @page_title %></span>
+    <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-9xl lg:w-8/12 2xl:w-2/5"><%= @page_title %></span>
     </section>
     """
   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
index 44a0f020..33ebd972 100644
--- a/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.CookiesLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.LegalTermsLive.Components.{Header,MainTitle,BlackBar}
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
 
   @impl true
   def mount(_params, _session, socket) do
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
index d5f7407f..c4a51864 100644
--- 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
@@ -1,67 +1,76 @@
 <main class="px-4">
-    <!-- Header -->
-    <.header page_name="Cookie Policy"/>
+  <!-- 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="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>
 
-    <!-- Main title -->
-    <.main_title page_title="Cookie Policy" />
+    <div class="border my-8"></div>
 
-    <!-- Black container -->
-    <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
+    <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>
 
-    <!-- Content 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">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>
 
-        <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>
 
-        <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>
 
-        <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>
 
-        <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>
 
-        <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>
 
-        <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>
 
-        <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>
 
-        <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>
-</main>
\ No newline at end of file
+    <div class="border my-8"></div>
+  </section>
+</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
index 4cf80192..60d57720 100644
--- a/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.PrivacyLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.LegalTermsLive.Components.{Header,MainTitle,BlackBar}
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
 
   @impl true
   def mount(_params, _session, socket) do
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
index 32b3d5ee..305c95cc 100644
--- 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
@@ -1,105 +1,119 @@
 <main class="px-4">
-    <!-- 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>
-    
-
-</main>
\ No newline at end of file
+  <!-- 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>
+</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
index c4570cd3..87db7c86 100644
--- a/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.TermsLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.LegalTermsLive.Components.{Header,MainTitle,BlackBar}
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
 
   @impl true
   def mount(_params, _session, socket) do
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
index 7f30d2f2..23dff7cd 100644
--- 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
@@ -1,78 +1,85 @@
 <main class="px-4">
-    <!-- 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>
-        <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
-        <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>
+  <!-- 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>
+    <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
+    <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>
-        <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>
-
-</main>  
+      </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>
+</main>

From 11dfab2d49d8d3fab4a36a6c5ef8f7c80cfa26bc Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 19 Nov 2024 14:23:19 +0000
Subject: [PATCH 14/22] feat: add @moduledoc's

---
 lib/atomic_web/live/legal_terms_live/components/black_bar.ex  | 3 +++
 lib/atomic_web/live/legal_terms_live/components/header.ex     | 3 +++
 lib/atomic_web/live/legal_terms_live/components/main_title.ex | 3 +++
 3 files changed, 9 insertions(+)

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
index ffd8b514..318030b5 100644
--- a/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
@@ -1,4 +1,7 @@
 defmodule AtomicWeb.LegalTermsLive.Components.BlackBar do
+  @moduledoc """
+  Component for Legal Pages Black Bar.
+  """
   use Phoenix.Component
   use AtomicWeb, :component
 
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index c88f92c5..41370f5b 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -1,4 +1,7 @@
 defmodule AtomicWeb.LegalTermsLive.Components.Header do
+  @moduledoc """
+  Component for Legal Pages Header.
+  """
   use Phoenix.Component
   use AtomicWeb, :component
 
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
index 0cdb3e83..32cfb79d 100644
--- a/lib/atomic_web/live/legal_terms_live/components/main_title.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
@@ -1,4 +1,7 @@
 defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
+  @moduledoc """
+  Component for Legal Pages Main Title.
+  """
   use Phoenix.Component
   use AtomicWeb, :component
 

From 261499151e90e6eeda059b16a795d2383d3f590c Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 20 Nov 2024 23:01:56 +0000
Subject: [PATCH 15/22] feat: add component for legal pages links

---
 .../components/legal_pages_links.ex           | 24 ++++++++++++++
 lib/atomic_web/components/sidebar.ex          | 33 ++-----------------
 lib/atomic_web/live/home_live/index.ex        |  1 +
 lib/atomic_web/live/home_live/index.html.heex | 13 +-------
 .../legal_terms_live/components/header.ex     |  2 +-
 5 files changed, 29 insertions(+), 44 deletions(-)
 create mode 100644 lib/atomic_web/components/legal_pages_links.ex

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..e9cc6645
--- /dev/null
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -0,0 +1,24 @@
+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">
+          <.link navigate={~p"/tos"} class="shrink-0 select-none">
+            <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
+          </.link>
+          <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+            <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
+          </.link>
+          <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+            <p class="text-xs font-semibold text-zinc-400">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 b4ce48e2..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
@@ -23,8 +24,6 @@ defmodule AtomicWeb.Components.Sidebar do
     </div>
     <!-- Navigation -->
     <.navigation current_user={@current_user} current_organization={@current_organization} current_page={@current_page} is_authenticated={@is_authenticated} />
-    <!-- Legal pages and copyright notice -->
-    <.legal_pages />
     """
   end
 
@@ -67,18 +66,7 @@ defmodule AtomicWeb.Components.Sidebar do
               <% end %>
             </div>
             <!-- Legal Pages Links -->
-            <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">
-              <.link navigate={~p"/tos"} class="shrink-0 select-none">
-                <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
-              </.link>
-              <.link navigate={~p"/privacy"} class="shrink-0 select-none">
-                <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
-              </.link>
-              <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-                <p class="text-xs font-semibold text-zinc-400">Cookie Policy</p>
-              </.link>
-              <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
-            </div>
+            <.legal_pages_links />
           </div>
         </div>
       </div>
@@ -161,23 +149,6 @@ defmodule AtomicWeb.Components.Sidebar do
     """
   end
 
-  defp legal_pages(assigns) do
-    ~H"""
-    <div class="group mt-2 flex w-full shrink-0 flex-wrap gap-x-2 gap-y-1">
-      <.link navigate={~p"/tos"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Terms of Service</p>
-      </.link>
-      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Privacy Policy</p>
-      </.link>
-      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Cookie Policy</p>
-      </.link>
-      <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
-    </div>
-    """
-  end
-
   defp dropdown_items(nil), do: []
   defp dropdown_items(current_user), do: authenticated_dropdown_items(current_user)
 
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 def0291c..6c9c2d19 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -109,17 +109,6 @@
       <% end %>
     </section>
     <!-- Legal Pages Links -->
-    <section class="w-full flex flex-wrap justify-center gap-y-1 gap-x-6 group px-2 mb-4 mt-2">
-      <.link navigate={~p"/tos"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400 hover:underline">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">Privacy Policy</p>
-      </.link>
-      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
-      </.link>
-      <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
-    </section>
+    <.legal_pages_links />
   </div>
 </div>
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 41370f5b..92b4fefb 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -7,7 +7,7 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="fixed flex w-full place-items-center justify-between bg-white px-8 pt-8 pb-4">
+    <header class="fixed flex w-full place-items-center justify-between bg-white pl-4 pr-8 pt-8 pb-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 -->

From 37af61292239dcdc23d138f2277d8e920b89253c Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 20 Nov 2024 23:09:00 +0000
Subject: [PATCH 16/22] feat: run mix format

---
 .../components/legal_pages_links.ex           | 39 +++++++++----------
 .../legal_terms_live/components/header.ex     |  2 +-
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
index e9cc6645..38e28169 100644
--- a/lib/atomic_web/components/legal_pages_links.ex
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -1,24 +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">
-          <.link navigate={~p"/tos"} class="shrink-0 select-none">
-            <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
-          </.link>
-          <.link navigate={~p"/privacy"} class="shrink-0 select-none">
-            <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
-          </.link>
-          <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-            <p class="text-xs font-semibold text-zinc-400">Cookie Policy</p>
-          </.link>
-          <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
-        </div>
-      """
-    end
+  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">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
+      </.link>
+      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400">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/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 92b4fefb..7b8bede3 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -7,7 +7,7 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="fixed flex w-full place-items-center justify-between bg-white pl-4 pr-8 pt-8 pb-4">
+    <header class="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 -->

From d8f10f80f818a82a9fa0e2c8778eb65378dfa42b Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 25 Nov 2024 23:38:07 +0000
Subject: [PATCH 17/22] fix: links with unexpected behavior

---
 lib/atomic_web/components/legal_pages_links.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
index 38e28169..caee6089 100644
--- a/lib/atomic_web/components/legal_pages_links.ex
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -6,7 +6,7 @@ defmodule AtomicWeb.Components.LegalPagesLinks do
 
   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">
+    <div class="flex-colunm group mt-2 mb-4 px-8 flex w-full flex-wrap place-items-center justify-center gap-x-6 gap-y-1">
       <.link navigate={~p"/tos"} class="shrink-0 select-none">
         <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
       </.link>

From 68240d8a198727b88c3129a9ed374ea164706c89 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 25 Nov 2024 23:39:21 +0000
Subject: [PATCH 18/22] feat: add hover styles to links

---
 lib/atomic_web/components/legal_pages_links.ex | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
index caee6089..4b9ab3c0 100644
--- a/lib/atomic_web/components/legal_pages_links.ex
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -8,13 +8,13 @@ defmodule AtomicWeb.Components.LegalPagesLinks do
     ~H"""
     <div class="flex-colunm group mt-2 mb-4 px-8 flex w-full flex-wrap place-items-center justify-center gap-x-6 gap-y-1">
       <.link navigate={~p"/tos"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Terms of Service</p>
       </.link>
       <.link navigate={~p"/privacy"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Privacy Policy</p>
       </.link>
       <.link navigate={~p"/cookies"} class="shrink-0 select-none">
-        <p class="text-xs font-semibold text-zinc-400">Cookie Policy</p>
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
       </.link>
       <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
     </div>

From 4f7581880deced073247c74477f3bf576d6e488e Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 26 Nov 2024 00:02:34 +0000
Subject: [PATCH 19/22] feat: improve design for larger screens

---
 .../legal_terms_live/components/header.ex     |   2 +-
 .../legal_terms_live/components/main_title.ex |   2 +-
 .../cookies_live/show.html.heex               | 130 +++++-----
 .../privacy_live/show.html.heex               | 234 +++++++++---------
 .../legal_terms_live/tos_live/show.html.heex  | 168 ++++++-------
 5 files changed, 271 insertions(+), 265 deletions(-)

diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 7b8bede3..69bbcd7c 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -7,7 +7,7 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="fixed flex w-full place-items-center justify-between bg-white pt-8 pr-8 pb-4 pl-4">
+    <header class="fixed flex w-full max-w-[2000px] 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 -->
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
index 32cfb79d..1836ff3b 100644
--- a/lib/atomic_web/live/legal_terms_live/components/main_title.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/main_title.ex
@@ -8,7 +8,7 @@ defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
   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-9xl lg:w-8/12 2xl:w-2/5"><%= @page_title %></span>
+      <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
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
index c4a51864..c8e9367a 100644
--- 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
@@ -1,76 +1,78 @@
-<main class="px-4">
-  <!-- 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="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>
+<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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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>
+      <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 class="border my-8"></div>
+    </section>
+  </div>  
 </main>
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
index 305c95cc..330b0c80 100644
--- 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
@@ -1,119 +1,121 @@
-<main class="px-4">
-  <!-- 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>
+<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>
-      <!-- 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 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>
-      <!-- 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 class="border my-8"></div>
+    </section>
+  </div>  
 </main>
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
index 23dff7cd..2c700500 100644
--- 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
@@ -1,85 +1,87 @@
-<main class="px-4">
-  <!-- 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>
-    <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
-    <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>
+<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>
+      <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
+      <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>
-      <!-- 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 class="border my-8"></div>
+    </section>
+  </div>  
 </main>

From 0f438feb97899b1096bb29890a6844e9b256b362 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 26 Nov 2024 22:50:50 +0000
Subject: [PATCH 20/22] fix: links styling

---
 .../legal_terms_live/components/header.ex     | 38 ++++++++++++-------
 .../legal_terms_live/tos_live/show.html.heex  |  1 -
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 69bbcd7c..786426bb 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -5,6 +5,22 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
   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="fixed flex w-full max-w-[2000px] place-items-center justify-between bg-white pt-8 pr-8 pb-4 pl-4">
@@ -14,22 +30,16 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
           <.link navigate={~p"/"}>
             <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
           </.link>
-          <!-- Section Name -->
-          <p class="hidden select-none text-2xl font-semibold text-zinc-400 sm:block"><%= @page_name %></p>
-        </div>
+          </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">
-          <%= if @page_name == "Terms of Service" do %>
-            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
-            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
-          <% end %>
-          <%= if @page_name == "Privacy Policy" do %>
-            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
-            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
-          <% end %>
-          <%= if @page_name == "Cookie Policy" do %>
-            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
-            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+        <%= 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={~p"/#{path}"}><%= title %></.link>
           <% end %>
+        <% end %>
         </div>
       </div>
       <!-- Link to Home (hidden on mobile) -->
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
index 2c700500..67409129 100644
--- 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
@@ -10,7 +10,6 @@
     <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>
-      <!-- Used br tag but it can be replaced for a margin or padding on each element. Just seems more practical. -->
       <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>

From 5581af6e5b62e54300b50538702b4591c78fc34d Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Tue, 26 Nov 2024 22:59:08 +0000
Subject: [PATCH 21/22] fix: dinamic paths

---
 lib/atomic_web/components/legal_pages_links.ex |  2 +-
 .../live/legal_terms_live/components/header.ex | 18 +++++++++---------
 .../cookies_live/show.html.heex                |  2 +-
 .../privacy_live/show.html.heex                |  2 +-
 .../legal_terms_live/tos_live/show.html.heex   |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
index 4b9ab3c0..601f86b2 100644
--- a/lib/atomic_web/components/legal_pages_links.ex
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -6,7 +6,7 @@ defmodule AtomicWeb.Components.LegalPagesLinks do
 
   def legal_pages_links(assigns) do
     ~H"""
-    <div class="flex-colunm group mt-2 mb-4 px-8 flex w-full flex-wrap place-items-center justify-center gap-x-6 gap-y-1">
+    <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">Terms of Service</p>
       </.link>
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 786426bb..74fec04e 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -23,23 +23,23 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
 
   def header(assigns) do
     ~H"""
-    <header class="fixed flex w-full max-w-[2000px] place-items-center justify-between bg-white pt-8 pr-8 pb-4 pl-4">
+    <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>
         <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={~p"/#{path}"}><%= title %></.link>
+          <%= 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 %>
-        <% end %>
         </div>
       </div>
       <!-- Link to Home (hidden on mobile) -->
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
index c8e9367a..4abe427e 100644
--- 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
@@ -74,5 +74,5 @@
 
       <div class="border my-8"></div>
     </section>
-  </div>  
+  </div>
 </main>
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
index 330b0c80..ef8cc15e 100644
--- 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
@@ -117,5 +117,5 @@
       </div>
       <div class="border my-8"></div>
     </section>
-  </div>  
+  </div>
 </main>
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
index 67409129..20d8ae3a 100644
--- 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
@@ -82,5 +82,5 @@
       </div>
       <div class="border my-8"></div>
     </section>
-  </div>  
+  </div>
 </main>

From bf19a053276d0f45aa064099dafaad258fa04b10 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 30 Dec 2024 20:43:47 +0000
Subject: [PATCH 22/22] chore: implement requested changes

---
 lib/atomic_web/components/legal_pages_links.ex              | 6 +++---
 .../live/legal_terms_live/components/black_bar.ex           | 2 +-
 lib/atomic_web/live/legal_terms_live/components/header.ex   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/atomic_web/components/legal_pages_links.ex b/lib/atomic_web/components/legal_pages_links.ex
index 601f86b2..d1842355 100644
--- a/lib/atomic_web/components/legal_pages_links.ex
+++ b/lib/atomic_web/components/legal_pages_links.ex
@@ -8,13 +8,13 @@ defmodule AtomicWeb.Components.LegalPagesLinks 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">Terms of Service</p>
+        <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">Privacy Policy</p>
+        <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">Cookie Policy</p>
+        <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>
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
index 318030b5..601d4478 100644
--- a/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/black_bar.ex
@@ -9,7 +9,7 @@ defmodule AtomicWeb.LegalTermsLive.Components.BlackBar 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">
-        Lorem ipsum dolor sit amet.
+        <%= gettext("Lorem ipsum dolor sit amet.") %>
       </p>
     </section>
     """
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index 74fec04e..de92e90b 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -44,8 +44,8 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
       </div>
       <!-- Link to Home (hidden on mobile) -->
       <div class="flex place-items-center lg:pr-12">
-        <.link class="atomic-button atomic-button--white atomic-button--md hidden sm:block" navigate={~p"/"}>Back home</.link>
-        <.link class="atomic-button atomic-button--md hero-home block text-zinc-400 sm:hidden" navigate={~p"/"}></.link>
+        <.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>
     """