diff --git a/public/images/pods.png b/public/images/pods.png
new file mode 100644
index 0000000..d9fa282
Binary files /dev/null and b/public/images/pods.png differ
diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index 918068b..e24bea8 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
   'text-base/7 leading-normal tracking-normal'
 )
 
-export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
+export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
 export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')
diff --git a/src/pages/agents/GallerySection.tsx b/src/pages/agents/GallerySection.tsx
index fe4eca1..4f1b89c 100644
--- a/src/pages/agents/GallerySection.tsx
+++ b/src/pages/agents/GallerySection.tsx
@@ -136,7 +136,7 @@ export function GallerySection() {
           </div>
 
           {/* Foreground pill (Desktop) */}
-          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-60 hidden md:block">
             <div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
               <CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
                 <TypeAnimation
diff --git a/src/pages/compute/ComputeDesign.tsx b/src/pages/compute/ComputeDesign.tsx
index a664e25..03d8e03 100644
--- a/src/pages/compute/ComputeDesign.tsx
+++ b/src/pages/compute/ComputeDesign.tsx
@@ -38,7 +38,7 @@ export function ComputeDesign() {
       <div className="mx-auto max-w-7xl border-gray-100">
           <dl className="grid grid-cols-1 gap-4 lg:gap-14  overflow-hidden  text-center  lg:grid-cols-3">
             {stats.map((stat) => (
-              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
+              <div key={stat.id} className="flex flex-col items-center bg-gray-100 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
                 <stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
                 <CT className="">{stat.value}</CT>
                 <CP className="mt-1">{stat.name}</CP>
diff --git a/src/pages/compute/ComputeOverview.tsx b/src/pages/compute/ComputeOverview.tsx
index 12f3b8b..7551996 100644
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/src/pages/compute/ComputeOverview.tsx
@@ -31,9 +31,9 @@ export function ComputeOverview() {
         />
         <CircleBackground
           color="#22d3ee"
-          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
+          className="absolute -bottom-72 left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
         />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
+        <div className="absolute inset-0 bg-radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
       </div>
 
       <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
@@ -69,7 +69,7 @@ export function ComputeOverview() {
               key={card.title}
               className="group relative overflow-hidden rounded-md border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
 
               <div className="relative">
                 <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">
diff --git a/src/pages/home/HomeHosting.tsx b/src/pages/home/HomeHosting.tsx
index 17d206c..fd8ce71 100644
--- a/src/pages/home/HomeHosting.tsx
+++ b/src/pages/home/HomeHosting.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Container } from '@/components/Container'
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { CT, CP, Eyebrow, H3, P } from '@/components/Texts'
 
 /* ✅ Custom Icons (unchanged) */
 
@@ -142,8 +142,8 @@ export function HomeHosting() {
                     hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
                 >
                   <feature.icon className="h-14 w-14" />
-                  <h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
-                  <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
+                  <CT className="mt-4  text-gray-900">{feature.name}</CT>
+                  <CP className="mt-2 text-gray-700 leading-snug">{feature.description}</CP>
                 </li>
               ))}
             </ul>
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
index 4416b30..1f38902 100644
--- a/src/pages/home/HomeTab.tsx
+++ b/src/pages/home/HomeTab.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Link } from "react-router-dom";
-import { Eyebrow, H3, P } from "@/components/Texts";
+import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
 
 const bentoCards = [
   {
@@ -107,10 +107,10 @@ export function HomeTab() {
                 />
                 <div className="px-8 pt-4 pb-6">
                   <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
-                  <p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
-                  <p className="mt-1 max-w-lg text-sm/6 text-gray-600">
+                  <CT  className="mt-2 text-lg  lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
+                  <CP className="mt-1 max-w-lg  text-gray-600">
                     {card.description}
-                  </p>
+                  </CP>
                 </div>
               </div>
               <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
diff --git a/src/pages/network/PrimaryFeatures.tsx b/src/pages/network/PrimaryFeatures.tsx
index 1a55560..66112ce 100644
--- a/src/pages/network/PrimaryFeatures.tsx
+++ b/src/pages/network/PrimaryFeatures.tsx
@@ -185,7 +185,7 @@ const bodyAnimation: MotionProps = {
 function InviteScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="mt-[-2rem]" />
+      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }
@@ -193,7 +193,7 @@ function InviteScreen() {
 function StocksScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="mt-[-2rem]" />
+      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }
@@ -201,7 +201,7 @@ function StocksScreen() {
 function InvestScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="mt-[-2rem]" />
+      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }
diff --git a/src/pages/network/SecondaryFeatures.tsx b/src/pages/network/SecondaryFeatures.tsx
index 5ed9359..816464d 100644
--- a/src/pages/network/SecondaryFeatures.tsx
+++ b/src/pages/network/SecondaryFeatures.tsx
@@ -1,5 +1,6 @@
 import { useId } from 'react'
 import { Container } from '@/components/Container'
+import { CP } from '@/components/Texts'
 
 const features = [
   {
@@ -214,9 +215,9 @@ export function SecondaryFeatures() {
               className="rounded-2xl border border-gray-100 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <CP className="mt-6 font-semibold text-gray-900">
                 {feature.name}
-              </h3>
+              </CP>
               <p className="mt-2 text-gray-700">{feature.description}</p>
             </li>
           ))}
diff --git a/src/pages/pods/PodsPage.tsx b/src/pages/pods/PodsPage.tsx
new file mode 100644
index 0000000..135e56d
--- /dev/null
+++ b/src/pages/pods/PodsPage.tsx
@@ -0,0 +1,11 @@
+import Homepod from './Homepod';
+
+const PodsPage = () => {
+  return (
+    <>
+      <Homepod />
+    </>
+  );
+};
+
+export default PodsPage;