From dfbc3cade9027a8ec3019a6bd8f94ef1698a59aa Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Sun, 6 Jul 2025 21:58:28 -0400
Subject: [PATCH] mobile experience improvements

---
 app/about/page.tsx            | 65 ++++++++++++++------------
 app/page.tsx                  | 60 ++++++++++++------------
 app/servers/page.tsx          | 88 +++++++++++++++++------------------
 app/services/page.tsx         | 46 +++++++++---------
 components/core/nav.tsx       | 14 +++---
 components/front/services.tsx | 48 +++++++++----------
 6 files changed, 163 insertions(+), 158 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 6430075..6bc1bc8 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -2,81 +2,86 @@ import { Nav } from "@/components/core/nav";
 import { GiStoneWheel } from "react-icons/gi";
 import { TbUserSquareRounded } from "react-icons/tb";
 import { RiTelegram2Line } from "react-icons/ri";
+import Link from "next/link";
 
 export default function About() {
   return (
     <main>
       <Nav />
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
         <div className="flex flex-row items-center justify-between gap-2">
-          <TbUserSquareRounded size={36} />
-          <h1 className="text-4xl font-bold">
+          <TbUserSquareRounded size={32} className="sm:w-9 sm:h-9" />
+          <h1 className="text-3xl sm:text-4xl font-bold">
             About
           </h1>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-between gap-3">
-        <h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+      <div className="flex flex-col items-center justify-between gap-3 px-4">
+        <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
           p0ntus is a small team of developers working towards
-          <span className="bg-red-400 text-white rounded-full italic ml-2 px-3 pr-4 py-1">one goal</span>.
+          <span className="bg-red-400 text-white rounded-full italic ml-2 px-3 pr-4 py-1">one goal</span>
         </h2>
-        <h2 className="text-xl text-center w-full flex flex-wrap items-center justify-center">
-          we want to make the cloud accessible to <span className="ml-1 italic">everyone</span>.
+        <h2 className="text-lg sm:text-xl text-center w-full flex flex-wrap items-center justify-center">
+          we want to make the cloud accessible to <span className="ml-1 italic">everyone</span>
         </h2>
-        <h2 className="text-lg text-center w-full flex flex-wrap items-center justify-center">
+        <h2 className="text-base sm:text-lg text-center w-full flex flex-wrap items-center justify-center">
           no corporate sponsors, no closed source, no microtransactions.
         </h2>
       </div>
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
         <div className="flex flex-col items-center justify-between gap-3">
-          <GiStoneWheel size={60} />
-          <h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+          <GiStoneWheel size={50} className="sm:w-15 sm:h-15" />
+          <h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
             we don&apos;t reinvent the wheel,
           </h2>
-          <h2 className="text-2xl text-center w-full flex flex-wrap items-center justify-center">
+          <h2 className="text-xl sm:text-2xl text-center w-full flex flex-wrap items-center justify-center">
             but we get the job done.
           </h2>
         </div>
         <div className="flex flex-col items-center justify-between gap-3 my-2 max-w-3xl">
-          <p className="text-md text-center w-full flex flex-wrap items-center justify-center">
+          <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
             we put effort into finding, creating, and building on the best tools avaliable to bring the magic of the cloud to you.
           </p>
-          <p className="text-md text-center w-full flex flex-wrap items-center justify-center">
+          <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
             we believe using cloud services is <span className="ml-1 italic">more than just a way to store your data.</span>
             <span className="font-bold">your experience should be valued.</span>
           </p>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
         <div className="flex flex-col items-center justify-between gap-3">
-          <RiTelegram2Line size={60} />
-          <h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+          <RiTelegram2Line size={50} className="sm:w-15 sm:h-15" />
+          <h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
             let&apos;s talk.
           </h2>
           <div className="flex flex-col items-center justify-between gap-2">
-            <p className="text-md text-center w-full flex flex-wrap items-center justify-center">
+            <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
               we&apos;re always looking for new people to help out.
             </p>
-            <p className="text-md text-center w-full flex flex-wrap items-center justify-center">
+            <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
               we&apos;re here for everything else, too! account support, deployment, service, and more.
             </p>
-            <p className="text-md text-center w-full flex flex-wrap items-center justify-center">
+            <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
               join us on telegram for support, questions, chatting, and more.
             </p>
           </div>
-          <div className="flex flex-row items-center justify-center gap-4 my-3">
-            <button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md">
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 my-3">
+            <Link href="https://t.me/p0ntu5">
+              <button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md w-full sm:w-auto">
                 <RiTelegram2Line size={24} />
-                <span className="text-md">
-                contact
+                <span className="text-sm sm:text-base">
+                  contact
                 </span>
-            </button>
-            <button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md">
+              </button>
+            </Link>
+            <Link href="https://t.me/pontushub">
+              <button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md w-full sm:w-auto">
                 <RiTelegram2Line size={24} />
-                <span className="text-md">
-                join group
+                <span className="text-sm sm:text-base">
+                  join channel
                 </span>
-            </button>
+              </button>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/app/page.tsx b/app/page.tsx
index b6711f5..c71e081 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,82 +7,82 @@ export default function Home() {
   return (
     <main>
       <Nav />
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
-        <h1 className="text-4xl font-bold">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
+        <h1 className="text-3xl sm:text-4xl font-bold text-center">
           p0ntus
         </h1>
-        <h3 className="text-2xl">
+        <h3 className="text-xl sm:text-2xl text-center">
           open source at your fingertips
         </h3>
       </div>
-      <hr className="border-black mt-24 mb-24" />
+      <hr className="border-black dark:border-white mt-16 mb-16 sm:mt-24 sm:mb-24" />
       <div className="max-w-6xl mx-auto w-full px-4 md:px-10">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-x-38 gap-y-16">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 gap-y-16 lg:gap-16">
           <div className="flex flex-col items-center justify-start gap-6 h-full">
-            <h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Services</h2>
-            <h3 className="text-xl italic text-center w-full">what can we offer you?</h3>
-            <div className="grid grid-cols-3 gap-10 my-8">
+            <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Services</h2>
+            <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">what can we offer you?</h3>
+            <div className="grid grid-cols-3 gap-14 sm:gap-10 my-6 sm:my-8">
               <div className="flex flex-col items-center justify-center gap-3">
                 <Link href="/services/git" className="flex flex-col items-center gap-2">
-                  <SiForgejo size={50} />
-                  <h3 className="text-lg font-bold">git</h3>
+                  <SiForgejo size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">git</h3>
                 </Link>
               </div>
               <div className="flex flex-col items-center justify-center gap-3">
                 <Link href="/services/mail" className="flex flex-col items-center gap-2">
-                  <TbMail size={50} />
-                  <h3 className="text-lg font-bold">mail</h3>
+                  <TbMail size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">mail</h3>
                 </Link>
               </div>
               <div className="flex flex-col items-center justify-center gap-3">
                 <Link href="/services/ai" className="flex flex-col items-center gap-2">
-                  <SiOllama size={50} />
-                  <h3 className="text-lg font-bold">ai</h3>
+                  <SiOllama size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">ai</h3>
                 </Link>
               </div>
               <div className="flex flex-col items-center justify-center gap-3">
                 <Link href="/services/tv" className="flex flex-col items-center gap-2">
-                  <SiJellyfin size={50} />
-                  <h3 className="text-lg font-bold">tv</h3>
+                  <SiJellyfin size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">tv</h3>
                 </Link>
               </div>
               <div className="flex flex-col items-center justify-center gap-3">
                 <Link href="/services/keybox" className="flex flex-col items-center gap-2">
-                  <TbKey size={50} />
-                  <h3 className="text-lg font-bold">keybox</h3>
+                  <TbKey size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">keybox</h3>
                 </Link>
               </div>
               <div className="flex flex-col items-center justify-center gap-3">
-                <Link href="/services/keybox" className="flex flex-col items-center gap-2">
-                  <TbServer size={50} />
-                  <h3 className="text-lg font-bold">hosting</h3>
+                <Link href="/services/hosting" className="flex flex-col items-center gap-2">
+                  <TbServer size={40} className="sm:w-12 sm:h-12" />
+                  <h3 className="text-base sm:text-lg font-bold">hosting</h3>
                 </Link>
               </div>
             </div>
           </div>
           <div className="flex flex-col items-center justify-start gap-6 h-full">
-            <h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Where we are</h2>
-            <h3 className="text-xl italic text-center w-full">how can you find us?</h3>
+            <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Where we are</h2>
+            <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">how can you find us?</h3>
             <div className="flex flex-col items-center gap-6 mt-6">
-              <p className="text-lg text-center">
+              <p className="text-base sm:text-lg text-center">
                 p0ntus is fully on the public internet! our servers are mainly located in the united states.
               </p>
-              <p className="text-lg text-center">
+              <p className="text-base sm:text-lg text-center">
                 we also operate servers in the united states, canada and germany.
               </p>
-              <Link href="/servers" className="flex flex-row items-center gap-2 text-lg text-center text-blue-500 hover:underline">
+              <Link href="/servers" className="flex flex-row items-center gap-2 text-base sm:text-lg text-center text-blue-500 hover:underline">
                 our servers <TbArrowRight size={20} />
               </Link>
             </div>
           </div>
           <div className="flex flex-col items-center justify-start gap-6 h-full">
-            <h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Why is p0ntus free?</h2>
-            <h3 className="text-xl italic text-center w-full">what&apos;s the point?</h3>
+            <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Why is p0ntus free?</h2>
+            <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">what&apos;s the point?</h3>
             <div className="flex flex-col items-center gap-6 mt-6">
-              <p className="text-lg text-center">
+              <p className="text-base sm:text-lg text-center">
                 everything today includes microtransactions, and we were fed up with it.
               </p>
-              <p className="text-lg text-center">
+              <p className="text-base sm:text-lg text-center">
                 p0ntus exists to show that it is possible to have a free and open set of services that people have fun using.
               </p>
             </div>
diff --git a/app/servers/page.tsx b/app/servers/page.tsx
index 3ea2399..f6ca551 100644
--- a/app/servers/page.tsx
+++ b/app/servers/page.tsx
@@ -6,43 +6,43 @@ export default function Servers() {
   return (
     <main>
       <Nav />
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
-        <div className="flex flex-row items-center justify-between gap-2">
-          <TbServer size={36} />
-          <h1 className="text-4xl font-bold">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
+          <TbServer size={32} className="sm:w-9 sm:h-9" />
+          <h1 className="text-3xl sm:text-4xl font-bold text-center">
             servers and infrastructure
           </h1>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-between gap-3 my-20">
-        <h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+      <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
+        <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
           where we host out of
         </h2>
-        <div className="grid grid-cols-3 gap-4 my-4">
-          <p className="flex flex-row items-center justify-between gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
-            <Flag code="US" className="w-6 h-6" /> usa
+        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 my-4 w-full max-w-md">
+          <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
+            <Flag code="US" className="w-5 h-5 sm:w-6 sm:h-6" /> usa
           </p>
-          <p className="flex flex-row items-center justify-between gap-2 text-lg bg-red-400 text-white px-4 py-2 rounded-full">
-            <Flag code="CA" className="w-6 h-6" /> canada
+          <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-red-400 text-white px-4 py-2 rounded-full">
+            <Flag code="CA" className="w-5 h-5 sm:w-6 sm:h-6" /> canada
           </p>
-          <p className="flex flex-row items-center justify-between gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
-            <Flag code="DE" className="mr-4 w-6 h-6" /> germany
+          <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
+            <Flag code="DE" className="w-5 h-5 sm:w-6 sm:h-6" /> germany
           </p>
         </div>
       </div>
-      <div className="flex flex-col items-center justify-between gap-3">
-        <h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+      <div className="flex flex-col items-center justify-between gap-3 px-4">
+        <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
           hardware
         </h2>
-        <div className="grid grid-cols-3 gap-4 my-4 w-5xl">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 my-4 w-full max-w-7xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbServer size={36} />
-              <span className="text-2xl font-bold">
+              <TbServer size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 NY-1
               </span>
             </div>
-            <p className="flex flex-col text-sm my-2 gap-4">
+            <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
               <span><span className="font-bold">CPU:</span> 2x Intel Xeon E5-2699 v4 @ 3.60 GHz</span>
               <span><span className="font-bold">RAM:</span> 256GB (8x Samsung 32GB DDR4)</span>
               <span><span className="font-bold">Boot Drive:</span> Samsung Evo 850 250GB</span>
@@ -52,14 +52,14 @@ export default function Servers() {
               <span><span className="font-bold">Provider:</span> ColoCrossing</span>
             </p>
           </div>
-          <div className="flex flex-col gap-2 text-lg bg-red-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-red-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbServer size={36} />
-              <span className="text-2xl font-bold">
+              <TbServer size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 CA-1
               </span>
             </div>
-            <p className="flex flex-col text-sm my-2 gap-4">
+            <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
               <span><span className="font-bold">CPU:</span> 2 cores shared</span>
               <span><span className="font-bold">RAM:</span> 2GB</span>
               <span><span className="font-bold">Disk:</span> 3.5TB Raidz2</span>
@@ -69,14 +69,14 @@ export default function Servers() {
               <span><span className="font-bold">Provider:</span> Serverica</span>
             </p>
           </div>
-          <div className="flex flex-col gap-2 text-lg bg-orange-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-orange-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbServer size={36} />
-              <span className="text-2xl font-bold">
+              <TbServer size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 DE-1
               </span>
             </div>
-            <p className="flex flex-col text-sm my-2 gap-4">
+            <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
               <span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span>
               <span><span className="font-bold">RAM:</span> 1GB</span>
               <span><span className="font-bold">Storage:</span> 153GB</span>
@@ -85,14 +85,14 @@ export default function Servers() {
               <span><span className="font-bold">Provider:</span> Oracle Cloud</span>
             </p>
           </div>
-          <div className="flex flex-col gap-2 text-lg bg-orange-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-orange-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbServer size={36} />
-              <span className="text-2xl font-bold">
+              <TbServer size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 DE-2
               </span>
             </div>
-            <p className="flex flex-col text-sm my-2 gap-4">
+            <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
               <span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span>
               <span><span className="font-bold">RAM:</span> 1GB</span>
               <span><span className="font-bold">Storage:</span> 47GB</span>
@@ -102,25 +102,25 @@ export default function Servers() {
             </p>
           </div>
         </div>
-        <div className="flex flex-col items-center justify-between gap-3 my-20">
-          <h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
+        <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 w-full">
+          <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
             our ip addresses
           </h2>
-          <p className="text-center text-md my-2">
+          <p className="text-center text-sm sm:text-base my-2 px-4">
             if you own a mail server/service, please consider whitelisting our ip addresses.
           </p>
-          <div className="grid grid-cols-3 gap-4 my-4">
-            <p className="flex flex-row items-center gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
-              <Flag code="US" className="w-6 h-6" /> <span className="font-bold">NY1:</span> 192.3.178.206
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 my-4 w-full max-w-4xl px-4">
+            <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-blue-400 text-white px-3 sm:px-4 py-2 rounded-full">
+              <Flag code="US" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">NY1:</span> 192.3.178.206
             </p>
-            <p className="flex flex-row items-center gap-2 text-lg bg-red-400 text-white px-4 py-2 rounded-full">
-              <Flag code="CA" className="w-6 h-6" /> <span className="font-bold">CA1:</span> 209.209.9.109
+            <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-red-400 text-white px-3 sm:px-4 py-2 rounded-full">
+              <Flag code="CA" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">CA1:</span> 209.209.9.109
             </p>
-            <p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
-              <Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE1:</span> 138.2.154.209
+            <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-orange-400 text-white px-3 sm:px-4 py-2 rounded-full">
+              <Flag code="DE" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE1:</span> 138.2.154.209
             </p>
-            <p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
-              <Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE2:</span> 158.180.60.92
+            <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-orange-400 text-white px-3 sm:px-4 py-2 rounded-full">
+              <Flag code="DE" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE2:</span> 158.180.60.92
             </p>
           </div>
         </div>
diff --git a/app/services/page.tsx b/app/services/page.tsx
index c30db4e..ce8d628 100644
--- a/app/services/page.tsx
+++ b/app/services/page.tsx
@@ -7,75 +7,75 @@ export default function Services() {
   return (
     <main>
       <Nav />
-      <div className="flex flex-col items-center justify-between gap-10 my-16">
+      <div className="flex flex-col items-center justify-between gap-6 sm:gap-10 my-12 sm:my-16 px-4">
         <div className="flex flex-row items-center justify-between gap-2">
-          <TbTool size={36} />
-          <h1 className="text-4xl font-bold">
+          <TbTool size={32} className="sm:w-9 sm:h-9" />
+          <h1 className="text-3xl sm:text-4xl font-bold">
             services
           </h1>
         </div>
         <div className="flex flex-col items-center justify-between gap-2">
-          <h2 className="text-3xl font-light text-center w-full flex flex-wrap items-center justify-center">
+          <h2 className="text-2xl sm:text-3xl font-light text-center w-full flex flex-wrap items-center justify-center">
             please select a service.
           </h2>
         </div>
       </div>
-      <div className="grid grid-cols-4 gap-4 my-4 w-3/4 mx-auto">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 my-4 w-full max-w-6xl mx-auto px-4">
         <Link href="/services/git">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <SiForgejo size={36} />
-              <span className="text-2xl font-bold">
+              <SiForgejo size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 git
               </span>
             </div>
           </div>
         </Link>
         <Link href="/services/mail">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbMail size={36} />
-              <span className="text-2xl font-bold">
+              <TbMail size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 email
               </span>
             </div>
           </div>
         </Link>
         <Link href="/services/ai">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <SiOllama size={36} />
-              <span className="text-2xl font-bold">
+              <SiOllama size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 ai
               </span>
             </div>
           </div>
         </Link>
         <Link href="/services/tv">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <SiJellyfin size={36} />
-              <span className="text-2xl font-bold">
+              <SiJellyfin size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 tv
               </span>
             </div>
           </div>
         </Link>
         <Link href="/services/keybox">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbKey size={36} />
-              <span className="text-2xl font-bold">
+              <TbKey size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 keybox
               </span>
             </div>
           </div>
         </Link>
         <Link href="/services/hosting">
-          <div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
+          <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
             <div className="flex flex-row items-center justify-between gap-2">
-              <TbServer size={36} />
-              <span className="text-2xl font-bold">
+              <TbServer size={28} className="sm:w-9 sm:h-9" />
+              <span className="text-xl sm:text-2xl font-bold">
                 hosting
               </span>
             </div>
diff --git a/components/core/nav.tsx b/components/core/nav.tsx
index f77e2d3..0a48d08 100644
--- a/components/core/nav.tsx
+++ b/components/core/nav.tsx
@@ -2,17 +2,17 @@ import Link from "next/link";
 
 export function Nav() {
   return (
-    <div className="flex flex-row items-center justify-between px-5 py-3">
+    <div className="flex flex-col sm:flex-row items-center justify-between px-4 sm:px-5 py-3 gap-3 sm:gap-0">
       <Link href="/">
-        <h1 className="text-3xl font-bold font-mono">
+        <h1 className="text-2xl sm:text-3xl font-bold font-mono">
           p0ntus
         </h1>
       </Link>
-      <div className="flex flex-row gap-4">
-        <Link href="/">Home</Link>
-        <Link href="/about">About</Link>
-        <Link href="/servers">Servers</Link>
-        <Link href="/services">Services</Link>
+      <div className="flex flex-row flex-wrap items-center justify-center gap-3 sm:gap-4 text-sm sm:text-base">
+        <Link href="/" className="hover:underline">Home</Link>
+        <Link href="/about" className="hover:underline">About</Link>
+        <Link href="/servers" className="hover:underline">Servers</Link>
+        <Link href="/services" className="hover:underline">Services</Link>
       </div>
     </div>
   );
diff --git a/components/front/services.tsx b/components/front/services.tsx
index c426d01..68c4608 100644
--- a/components/front/services.tsx
+++ b/components/front/services.tsx
@@ -43,14 +43,14 @@ export function ServicesShell({ slug }: { slug: string }) {
   return (
     <main>
       <Nav />
-      <div className="flex flex-col items-center justify-between gap-4 my-20">
+      <div className="flex flex-col items-center justify-between gap-4 my-12 sm:my-20 px-4">
         <div className="flex flex-row items-center justify-between gap-2">
-          {Icon && <Icon size={36} />}
-          <h1 className="text-4xl font-bold">
+          {Icon && <Icon size={32} className="sm:w-9 sm:h-9" />}
+          <h1 className="text-3xl sm:text-4xl font-bold">
             {service?.name}
           </h1>
         </div>
-        <p className="text-lg">
+        <p className="text-base sm:text-lg text-center">
           {service?.description}
         </p>
         <Link href={`/services`}>
@@ -60,28 +60,28 @@ export function ServicesShell({ slug }: { slug: string }) {
           </button>
         </Link>
       </div>
-      <div className="grid grid-cols-4 gap-4 px-14">
-        <div className={`flex flex-col justify-between gap-4 rounded-2xl px-8 py-4 ${HumanPriceStatusColor(service?.priceStatus as "open" | "invite-only" | "by-request")}`}>
-          <div className="flex flex-row items-center justify-between gap-2 w-full my-2">
-            <h2 className="text-2xl font-semibold text-white">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 px-4 sm:px-8 lg:px-14">
+        <div className={`flex flex-col justify-between gap-4 rounded-2xl px-6 sm:px-8 py-4 ${HumanPriceStatusColor(service?.priceStatus as "open" | "invite-only" | "by-request")}`}>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 w-full my-2">
+            <h2 className="text-xl sm:text-2xl font-semibold text-white">
               {HumanPriceStatus(service?.priceStatus as "open" | "invite-only" | "by-request")}
             </h2>
             {service?.joinLink && (
               <Link href={service.joinLink}>
-                <button className="flex flex-row items-center justify-between gap-2 text-white bg-green-600 px-4 py-2 rounded-full hover:underline transition-all duration-300 cursor-pointer">
+                <button className="flex flex-row items-center justify-center gap-2 text-white bg-green-600 px-4 py-2 rounded-full hover:underline transition-all duration-300 cursor-pointer w-full sm:w-auto">
                   Join!
                 </button>
               </Link>
             )}
           </div>
-          <p className="text-md text-white mb-3">
+          <p className="text-sm sm:text-base text-white mb-3">
             {PriceStatusDesc(service?.priceStatus as "open" | "invite-only" | "by-request", service?.name as string)}
           </p>
         </div>
-        <div className={`flex flex-col justify-between gap-4 rounded-2xl px-8 py-4 bg-gray-200`}>
+        <div className={`flex flex-col justify-between gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200`}>
           <div className="flex flex-row items-center gap-2 w-full my-2">
-            <h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
-              <TbEye size={32} />
+            <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
+              <TbEye size={28} className="sm:w-8 sm:h-8" />
               What admins can see
             </h2>
           </div>
@@ -92,26 +92,26 @@ export function ServicesShell({ slug }: { slug: string }) {
             .filter(([, value]) => value !== undefined)
             .map(([key, value], index) => (
               <div className="flex flex-col w-full mb-2" key={index}>
-                <p className="flex flex-row items-center gap-1 text-md font-semibold text-black">
+                <p className="flex flex-row items-center gap-1 text-sm sm:text-base font-semibold text-black">
                   <value.icon size={16} /> {key}
                 </p>
-                <p className="text-sm text-black">
+                <p className="text-xs sm:text-sm text-black">
                   {value.description}
                 </p>
               </div>
             ))}
         </div>
-        <div className={`flex flex-col gap-4 rounded-2xl px-8 py-4 bg-gray-200`}>
+        <div className={`flex flex-col gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200`}>
           <div className="flex flex-row items-center gap-2 w-full my-2">
-            <h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
-              <TbShieldLock size={32} />
+            <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
+              <TbShieldLock size={28} className="sm:w-8 sm:h-8" />
               Our commitment to privacy
             </h2>
           </div>
-          <p className="text-md text-black">
+          <p className="text-sm sm:text-base text-black">
             Privacy is a big concern to us, too. That&apos;s why we:
           </p>
-          <ul className="list-disc list-inside text-sm text-black">
+          <ul className="list-disc list-inside text-xs sm:text-sm text-black">
             <li>Never share your data to third parties.</li>
             <li>Never use your data for advertising.</li>
             <li>Never use your data for any other purpose than to provide you with the service you have requested.</li>
@@ -120,14 +120,14 @@ export function ServicesShell({ slug }: { slug: string }) {
           </ul>
         </div>
         {service?.quickLinks && (
-          <div className="flex flex-col gap-4 rounded-2xl px-8 py-4 bg-gray-200">
+          <div className="flex flex-col gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200">
             <div className="flex flex-row items-center gap-2 w-full my-2">
-              <h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
-                <TbLink size={32} />
+              <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
+                <TbLink size={28} className="sm:w-8 sm:h-8" />
                 Quick Links
               </h2>
             </div>
-            <ul className="list-disc list-inside text-md text-black">
+            <ul className="list-disc list-inside text-sm sm:text-base text-black">
               {service.quickLinks.map((link, index) => (
                 <Link href={link.url} key={index}>
                   <button className="flex flex-row items-center gap-2 text-black hover:underline transition-all duration-300 cursor-pointer">