diff --git a/themes/medium/components/LogoBar.js b/themes/medium/components/LogoBar.js
index 9bb3aa30..c2719a76 100644
--- a/themes/medium/components/LogoBar.js
+++ b/themes/medium/components/LogoBar.js
@@ -4,7 +4,7 @@ import Link from 'next/link'
 export default function LogoBar () {
   return <div id='top-wrapper' className='w-full flex items-center font-sans'>
         <Link href='/'>
-          <a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
+          <a className='text-md md:text-xl dark:text-gray-200'>{BLOG.TITLE}</a>
         </Link>
   </div>
 }
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
index 1d31d251..69dfb3ce 100644
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -21,7 +21,7 @@ export default function TopNavBar (props) {
           if (link.show) {
             const selected = (router.pathname === link.to) || (router.asPath === link.to)
             return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'px-2 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+            <a className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                 <div className='items-center justify-center flex '>
                   <i className={link.icon} />