diff --git a/docs/src/components/PubBadge.tsx b/docs/src/components/PubBadge.tsx
index 9176c970..a45817f4 100644
--- a/docs/src/components/PubBadge.tsx
+++ b/docs/src/components/PubBadge.tsx
@@ -8,14 +8,7 @@ export const PubBadge: FunctionComponent<Props> = (props) => {
   const { name } = props;
 
   return (
-    <a
-      href={`https://pub.dartlang.org/packages/${name}`}
-      style={{
-        display: 'inline-block',
-        marginLeft: '0.25rem',
-        marginRight: '0.25rem',
-      }}
-    >
+    <a href={`https://pub.dartlang.org/packages/${name}`}>
       <img
         alt="pub"
         src={`https://img.shields.io/pub/v/${name}.svg?label=${name}&logo=dart&color=blue&style=for-the-badge`}
diff --git a/docs/src/components/Shield.tsx b/docs/src/components/Shield.tsx
index 2dc5a062..25e760fb 100644
--- a/docs/src/components/Shield.tsx
+++ b/docs/src/components/Shield.tsx
@@ -9,11 +9,6 @@ const GithubWorkflowStatus = ({
 }) => (
   <a
     href={`https://github.com/mobxjs/mobx.dart/actions/workflows/${workflow}.yml`}
-    style={{
-      display: 'inline-block',
-      marginLeft: '0.25rem',
-      marginRight: '0.25rem',
-    }}
   >
     <img
       alt={label}
@@ -31,14 +26,7 @@ export const PublishStatus = () => (
 );
 
 export const CoverageStatus = () => (
-  <a
-    href="https://codecov.io/gh/mobxjs/mobx.dart"
-    style={{
-      display: 'inline-block',
-      marginLeft: '0.25rem',
-      marginRight: '0.25rem',
-    }}
-  >
+  <a href="https://codecov.io/gh/mobxjs/mobx.dart">
     <img
       alt="Coverage Status"
       src="https://img.shields.io/codecov/c/github/mobxjs/mobx.dart?logo=codecov&style=for-the-badge"
@@ -47,14 +35,7 @@ export const CoverageStatus = () => (
 );
 
 export const NetlifyStatus = () => (
-  <a
-    href="https://app.netlify.com/sites/mobx/deploys"
-    style={{
-      display: 'inline-block',
-      marginLeft: '0.25rem',
-      marginRight: '0.25rem',
-    }}
-  >
+  <a href="https://app.netlify.com/sites/mobx/deploys">
     <img
       alt="Netlify Status"
       src="https://img.shields.io/netlify/05330d31-0411-4aac-a278-76615bcaff9e?logo=netlify&style=for-the-badge"
@@ -63,14 +44,7 @@ export const NetlifyStatus = () => (
 );
 
 export const DiscordChat = () => (
-  <a
-    href="https://discord.gg/dNHY52k"
-    style={{
-      display: 'inline-block',
-      marginLeft: '0.25rem',
-      marginRight: '0.25rem',
-    }}
-  >
+  <a href="https://discord.gg/dNHY52k">
     <img
       alt="Join the chat at https://discord.gg/dNHY52k"
       src="https://img.shields.io/discord/637471236116447233?style=for-the-badge&logo=discord"
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index caa1b837..75284085 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -17,34 +17,50 @@ import { TestimonialList } from '../components/Testimonial';
 
 import MobXLogo from '../images/mobx.svg';
 
-<div className={'container'}>
-  <div className={'grid grid-cols-2 gap-4'}>
-    <div>
-      <div className={'text-6xl font-extrabold'}>
-        [MobX](https://github.com/mobxjs/mobx) for Dart and Flutter
-      </div>
-      <div className={'text-xl text-gray-600 mb-12'}>Hassle free state-management for your Dart and Flutter apps</div>
-
-      <div>
-        <PubBadge name="mobx" />
-        <PubBadge name="flutter_mobx" />
-        <PubBadge name="mobx_codegen" />
-      </div>
-
-      <div>
-        <BuildStatus /> <PublishStatus /> <CoverageStatus /> <NetlifyStatus />
-      </div>
-
-      <DiscordChat />
+<div className={'mb-16 grid grid-cols-2 gap-8 items-center justify-items-center'}>
+  <div>
+    <div className={'text-6xl font-extrabold'}>
+      [MobX](https://github.com/mobxjs/mobx) for Dart and Flutter
     </div>
-    <div>
-      <MobXLogo
-        alt={'MobX logo'}
-        width={512}
-      />
 
+    <div className={'text-3xl mb-8'}>
+      Hassle free state-management for your Dart and Flutter apps.
     </div>
 
+    <div className={'text-xl text-gray-500 mb-32'}>
+      Use the power of `Observables`, `Actions` and `Reactions` to supercharge the state in your apps.
+    </div>
+
+    <a
+      className={'border-blue-800 border bg-blue-500 hover:bg-blue-600 hover:transition-colors text-2xl p-6 rounded-lg hover:no-underline text-white hover:text-white mr-4'}
+      href={'/getting-started'}>Get Started 🚀</a>
+    <a
+      className={'border-blue-500 border-2 border-solid text-2xl p-6 rounded-lg hover:no-underline hover:border-blue-600 hover:transition-colors '}
+      href={'/concepts'}>Learn
+      More...</a>
+
+  </div>
+
+{' '}
+
+{' '}
+
+<MobXLogo alt={'MobX logo'} width={512} />
+
+</div>
+
+<div className={'bg-amber-100'}>
+  <div className={'flex flex-wrap gap-4'}>
+    <PubBadge name="mobx" />
+    <PubBadge name="flutter_mobx" />
+    <PubBadge name="mobx_codegen" />
+
+    <BuildStatus />
+    <PublishStatus />
+    <CoverageStatus />
+    <NetlifyStatus />
+    <DiscordChat />
+
   </div>
 
 </div>