diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index c6ba6e496..4eaa2a77e 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -12,6 +12,12 @@ import { useRouter } from 'next/router';
 import useSetUrlParam from '~/lib/useSetUrlParam';
 import { SectionContext } from '~/context';
 
+type Author = {
+  name: string;
+  photo?: string;
+  link?: string;
+  byline?: string;
+};
 export type blogCategories =
   | 'All'
   | 'Community'
@@ -286,14 +292,40 @@ export default function StaticMarkdownPage({
                             />
                           </div>
                         </div>
-                        <div className='flex flex-row items-center'>
-                          <div className='flex flex-row pl-2 mr-2'>
+                        <div
+                          className={`
+                            flex 
+                            flex-row
+                            items-center
+                          `}
+                        >
+                          <div
+                            className={`
+                              flex 
+                              flex-row 
+                              pl-2 
+                              mr-2
+                            `}
+                          >
                             {(frontmatter.authors || []).map(
-                              (author: any, index: number) => {
+                              (author: Author, index: number) => {
+                                const sizeClass =
+                                  frontmatter.authors.length > 2
+                                    ? 'h-8 w-8'
+                                    : 'h-11 w-11';
                                 return (
                                   <div
                                     key={index}
-                                    className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
+                                    className={[
+                                      'bg-slate-50',
+                                      sizeClass,
+                                      'rounded-full',
+                                      '-ml-3',
+                                      'bg-cover',
+                                      'bg-center',
+                                      'border-2',
+                                      'border-white',
+                                    ].join(' ')}
                                     style={{
                                       backgroundImage: `url(${author.photo})`,
                                       zIndex: 10 - index,
@@ -304,11 +336,37 @@ export default function StaticMarkdownPage({
                             )}
                           </div>
 
-                          <div className='flex flex-col items-start'>
+                          <div
+                            className={`
+                              flex 
+                              flex-col
+                              items-start
+                            `}
+                          >
                             <div className='text-sm font-semibold'>
-                              {frontmatter.authors
-                                .map((author: any) => author.name)
-                                .join(' & ')}
+                              {frontmatter.authors.length > 2 ? (
+                                <>
+                                  {frontmatter.authors
+                                    .slice(0, 2)
+                                    .map((author: Author, index: number) => (
+                                      <span key={author.name}>
+                                        {author.name}
+                                        {index === 0 && ' & '}
+                                      </span>
+                                    ))}
+                                  {'...'}
+                                </>
+                              ) : (
+                                frontmatter.authors.map(
+                                  (author: Author, index: number) => (
+                                    <span key={author.name}>
+                                      {author.name}
+                                      {index < frontmatter.authors.length - 1 &&
+                                        ' & '}
+                                    </span>
+                                  ),
+                                )
+                              )}
                             </div>
 
                             <div className='text-slate-500 text-sm dark:text-slate-300'>
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index 90a927eac..5ca75c643 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -394,15 +394,41 @@ export default function communityPages(props: any) {
                     />
                   </div>
                   <div className='flex ml-2 mb-2 '>
-                    <div
-                      className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                      style={{
-                        backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
-                      }}
-                    />
+                    {(blogPosts[0].frontmatter.authors || []).map(
+                      (author: any, index: number) => {
+                        return (
+                          <div
+                            key={index}
+                            className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
+                            style={{
+                              backgroundImage: `url(${author.photo})`,
+                              zIndex: 10 - index,
+                            }}
+                          />
+                        );
+                      },
+                    )}
                     <div className='flex flex-col ml-2'>
                       <p className='text-sm font-semibold dark:text-white'>
-                        {blogPosts[0].frontmatter.authors[0].name}
+                        {blogPosts[0].frontmatter.authors.length > 2 ? (
+                          <>
+                            {blogPosts[0].frontmatter.authors
+                              .slice(0, 2)
+                              .map((author: any, index: number) => (
+                                <span key={author.name}>
+                                  {author.name}
+                                  {index === 0 && ' & '}
+                                </span>
+                              ))}
+                            {'...'}
+                          </>
+                        ) : (
+                          blogPosts[0].frontmatter.authors.map(
+                            (author: any) => (
+                              <span key={author.name}>{author.name}</span>
+                            ),
+                          )
+                        )}
                       </p>
                       <div className='dark:text-slate-300 text-sm'>
                         <span>
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 421319350..a195bd58d 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -467,16 +467,41 @@ const Home = (props: any) => {
                 </div>
 
                 <div className='flex ml-2 mb-2 '>
-                  <div
-                    className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                    style={{
-                      backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
-                    }}
-                  />
+                  {(blogPosts[0].frontmatter.authors || []).map(
+                    (author: any, index: number) => {
+                      return (
+                        <div
+                          key={index}
+                          className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
+                          style={{
+                            backgroundImage: `url(${author.photo})`,
+                            zIndex: 10 - index,
+                          }}
+                        />
+                      );
+                    },
+                  )}
                   <div className='flex flex-col ml-2'>
                     <p className='text-sm font-semibold dark:text-slate-300'>
-                      {blogPosts[0].frontmatter.authors[0].name}
+                      {blogPosts[0].frontmatter.authors.length > 2 ? (
+                        <>
+                          {blogPosts[0].frontmatter.authors
+                            .slice(0, 2)
+                            .map((author: any, index: number) => (
+                              <span key={author.name}>
+                                {author.name}
+                                {index === 0 && ' & '}
+                              </span>
+                            ))}
+                          {'...'}
+                        </>
+                      ) : (
+                        blogPosts[0].frontmatter.authors.map((author: any) => (
+                          <span key={author.name}>{author.name}</span>
+                        ))
+                      )}
                     </p>
+
                     <div className='text-slate-500 text-sm dark:text-slate-300'>
                       <span>
                         {blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
diff --git a/tailwind.config.js b/tailwind.config.js
index 4df42289c..0ec8b5fc2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,53 +3,52 @@ module.exports = {
     './pages/**/*.{js,ts,jsx,tsx,md}',
     './components/**/*.{js,ts,jsx,tsx,md}',
   ],
-  darkMode: "class",
+  darkMode: 'class',
   theme: {
     screens: {
-      'sm': '640px',
+      sm: '640px',
       // => @media (min-width: 640px) { ... }
 
-      'md': '768px',
+      md: '768px',
       // => @media (min-width: 768px) { ... }
 
-      'lg': '1024px',
+      lg: '1024px',
       // => @media (min-width: 1024px) { ... }
 
-      'xl': '1280px',
+      xl: '1280px',
       // => @media (min-width: 1280px) { ... }
 
       '2xl': '1536px',
       // => @media (min-width: 1536px) { ... }
-      'ab1':'890px'
-
+      ab1: '890px',
     },
     fontFamily: {
-      'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
-      'serif': ['ui-serif', 'Georgia'],
-      'mono': ['JetBrains Mono', 'monospace']
+      sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+      serif: ['ui-serif', 'Georgia'],
+      mono: ['JetBrains Mono', 'monospace'],
     },
     fontSize: {
       sm: '0.8rem',
       base: '16px',
       xl: '20px',
-      'h5': '20px',
-      'h4': '25px',
-      'h3': '35px',
-      'h2': '45px',
-      'h1': '60px',
-      'h1mobile': '35px',
-      'h2mobile': '28px',
-      'h3mobile': '25px',
-      'h4mobile': '22px',
-      'h5mobile': '20px'
+      h5: '20px',
+      h4: '25px',
+      h3: '35px',
+      h2: '45px',
+      h1: '60px',
+      h1mobile: '35px',
+      h2mobile: '28px',
+      h3mobile: '25px',
+      h4mobile: '22px',
+      h5mobile: '20px',
     },
-   
+
     extend: {
       backgroundImage: {
-        'gradient-radial': 'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
+        'gradient-radial':
+          'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
       },
       colors: {
-     
         white: '#ffffff',
         black: '#000000',
         primary: '#002CC4',
@@ -57,27 +56,27 @@ module.exports = {
         btnGold: '#AB9700',
         startBlue: '#002CC4',
         endBlue: '#5468FF',
-        linkBlue: '#3B82F6'
+        linkBlue: '#3B82F6',
       },
       gradientColorStopPositions: {
         33: '145.47%',
       },
       lineHeight: {
-        'base': '24px',
-        'header': '74px',
+        base: '24px',
+        header: '74px',
       },
       boxShadow: {
         '3xl': ' 0px 0px 20px 5px rgba(0, 0, 0, 0.05)',
         '4xl': [
           '0 35px 35px rgba(0, 0, 0, 0.25)',
-          '0 45px 65px rgba(0, 0, 0, 0.15)'
+          '0 45px 65px rgba(0, 0, 0, 0.15)',
         ],
-        'xl': ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);'
-      }
-    }
+        xl: ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);',
+      },
+    },
   },
   plugins: [],
-}
+};
 
 /*
   FONT WEIGHT