diff --git a/app/(main)/ClientComponents/ServerOverviewClient.tsx b/app/(main)/ClientComponents/ServerOverviewClient.tsx
index ec50d46..3fabbb2 100644
--- a/app/(main)/ClientComponents/ServerOverviewClient.tsx
+++ b/app/(main)/ClientComponents/ServerOverviewClient.tsx
@@ -19,7 +19,7 @@ export default function ServerOverviewClient() {
       <Card>
         <CardContent className="px-6 py-3">
           <section className="flex flex-col gap-1">
-            <p className="text-md font-medium">Total servers</p>
+            <p className="text-sm md:text-base font-medium">Total servers</p>
             <div className="flex items-center gap-2">
               <span className="relative flex h-2 w-2">
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
@@ -40,7 +40,7 @@ export default function ServerOverviewClient() {
       <Card>
         <CardContent className="px-6 py-3">
           <section className="flex flex-col gap-1">
-            <p className="text-md font-medium">Online servers</p>
+            <p className="text-sm md:text-base font-medium">Online servers</p>
             <div className="flex items-center gap-2">
               <span className="relative flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
@@ -62,7 +62,7 @@ export default function ServerOverviewClient() {
       <Card>
         <CardContent className="px-6 py-3">
           <section className="flex flex-col gap-1">
-            <p className="text-md font-medium">Offline servers</p>
+            <p className="text-sm md:text-base font-medium">Offline servers</p>
             <div className="flex items-center gap-2">
               <span className="relative flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
@@ -84,7 +84,7 @@ export default function ServerOverviewClient() {
       <Card>
         <CardContent className="relative px-6 py-3">
           <section className="flex flex-col gap-1">
-            <p className="text-md font-medium">Total bandwidth</p>
+            <p className="text-sm md:text-base font-medium">Total bandwidth</p>
             {data ? (
               <p className="text-lg font-semibold">
                 {formatBytes(data?.total_bandwidth)}
diff --git a/app/(main)/header.tsx b/app/(main)/header.tsx
index 5ef2cc0..098b424 100644
--- a/app/(main)/header.tsx
+++ b/app/(main)/header.tsx
@@ -10,7 +10,7 @@ function Header() {
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
-        <section className="text-md flex items-center font-medium">
+        <section className="text-base flex items-center font-medium">
           <div className="mr-1 flex flex-row items-center justify-start">
             <Image
               width={40}
@@ -39,7 +39,7 @@ function Header() {
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: Function, delay?: number | null) => {
-  const savedCallback = useRef<Function>(() => {});
+  const savedCallback = useRef<Function>(() => { });
 
   useEffect(() => {
     savedCallback.current = callback;
@@ -72,7 +72,7 @@ function Overview() {
 
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
-      <p className="text-md font-semibold">👋 Overview</p>
+      <p className="text-base font-semibold">👋 Overview</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">where the time is</p>
         {mouted && (