diff --git a/src/css/custom.scss b/src/css/custom.scss
index 78e71fac..1dabf154 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -606,7 +606,7 @@ a:hover,
   width: 100%;
 }
 
-.markdown blockquote {
+blockquote {
   border-color: var(--mf-color-wiki-cta);
   color: var(--mf-color-wiki-cta);
   p {
diff --git a/src/pages/index.js b/src/pages/index.js
index 49414912..6805c516 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -42,8 +42,8 @@ const features = [
 ];
 
 const wrapperStyle = {
-  width: '740px',
-  maxWidth: '740px',
+  width: '680px',
+  maxWidth: '680px',
   margin: '5rem auto',
   // overflow: 'hidden',
 };
@@ -51,7 +51,7 @@ const panelStyle = {
   backgroundColor: 'rgba(255,255,255,0.08)',
   // borderRadius: '6px',
   display: 'flex',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   flexFlow: 'row nowrap',
   flex: '0 0 100%',
   marginBottom: '30px',
@@ -70,10 +70,12 @@ const lamerPanelStyle = {
 const imgWrap = {
   flex: '0 0 33%',
   width: '33%',
+  marginRight: '15px',
 };
 const mainWrap = {
   flexGrow: 1,
-  paddingLeft: '0px',
+  paddingLeft: '10px',
+  paddingRight: '20px',
 };
 const aspectBox = {
   position: 'relative',
@@ -96,15 +98,17 @@ const sectionHeading = {
   fontFamily: '"IBM Plex Mono"',
   fontSize: '24px',
   color: '#a5b9f6',
-  marginBottom: '13px',
 };
 const panelTitleStyle = {
   ...sectionHeading,
   color: 'white',
   marginBottom: '3px',
+  flex: '0 0 100%',
+  width: '100%',
+  textAlign: 'left',
 };
 const textStyle = {
-  fontSize: '17px',
+  fontSize: '14px',
 };
 
 function Panel({
@@ -141,7 +145,10 @@ function Panel({
       <div style={mainWrap}>
         {title && <h3 style={panelTitleStyle}>{title}</h3>}
         {description && (
-          <div dangerouslySetInnerHTML={{ __html: description }} />
+          <div
+            style={textStyle}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
         )}
       </div>
     </div>
@@ -159,48 +166,144 @@ function Home() {
   return (
     <Layout title={siteConfig.title} description={siteConfig.tagline}>
       <div className={classnames('wrapper', wikipath)}>
-        <div className={classnames('inner-wrapper')} style={wrapperStyle}>
-          <header className={classnames('hero', styles.heroBanner)}>
+        <div
+          className={classnames('inner-wrapper', styles.innerWrapper)}
+          style={wrapperStyle}
+        >
+          <header className={classnames(styles.heroBanner)}>
             <div className='container'>
               <img
                 alt='MetaGame Wiki Logo'
                 className={styles.wikiLogo}
                 width='555'
-                src={useBaseUrl('img/wiki-logo.png')}
+                src={
+                  'https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fe93a37b7-2a48-421c-80b7-3079eca8beb7_2048x881.png'
+                }
               />
-              <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+              <p className={styles.heroSubtitle}>
+                <em>A Massive Online Coordination Game</em>
+              </p>
             </div>
           </header>
-          <main>
+          <main className={styles.mainContent}>
+            <div
+              className='row'
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              <div className={'col'}>
+                <h2 id='abstract'>Abstract</h2>
+                <blockquote>
+                  <p>
+                    <em>
+                      “Metagame is any approach to a game that transcends or
+                      operates outside of the prescribed rules of the game, uses
+                      external factors to affect the game, or goes beyond the
+                      supposed limits or environment set by the game.”
+                    </em>{' '}
+                    - From Wiki
+                  </p>
+                </blockquote>
+                <p>
+                  Players of MetaGame are on a quest to change the way people
+                  coordinate around solving problems &amp; creating value.
+                </p>
+                <p>
+                  The quest stretches from fixing the onboarding to the Ethereum
+                  space
+                  <br />
+                  by symmetrifying information &amp; composing the basic
+                  socio-economic infrastructure, to grappling with actual
+                  problems.
+                </p>
+                <ul>
+                  <li>
+                    You know, the opposite of the first crypto-world problems.
+                  </li>
+                </ul>
+                <p>But, it all starts with Seeds…</p>
+                <h2 id='seed-phase'>Seed Phase</h2>
+                <p>
+                  <img
+                    src='https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Ffa305be3-279a-440a-9ba2-cfa2d49281c4_952x186.png'
+                    alt=''
+                  />
+                </p>
+                <p>
+                  The main goal of Seed phase is to build a hub for anyone
+                  interested in decentralized
+                  <br />
+                  organizations &amp; applications.
+                  <br />
+                  Guides &amp; portals to anything one might need to build them
+                  &amp; a community of people to support them.
+                </p>
+                <p>
+                  We’re building a <em>Decentralized Factory</em> for baking the
+                  building blocks we are going to use to compose the bigger
+                  picture.
+                </p>
+                <h2 id='the-bigger-picture'>The Bigger Picture</h2>
+                <p>
+                  <img
+                    src='https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fbe6c92b4-6ead-4a60-acf0-db9cc0251b9c_1310x265.png'
+                    alt=''
+                  />
+                </p>
+                <p>
+                  The long term goal of MetaGame is to build an alternative
+                  society; a global society focused around solving problem - not
+                  squeezing the world for profit.
+                </p>
+                <p>We are building the future we want to live in:</p>
+                <ul>
+                  <li>
+                    A more collaborative, transparent &amp; decentralized
+                    future.
+                  </li>
+                  <li>
+                    A future in which human progress isn’t accelerating its
+                    destruction.
+                  </li>
+                </ul>
+                <p>Read more about the Phases of MetaGame?</p>
+              </div>
+            </div>
+
             {features && features.length && (
               <section className={styles.features}>
                 <div className='container'>
-                  <div
-                    className='row'
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <h2 style={sectionHeading}>So, who is it for?</h2>
-                    {features &&
-                      features.map((props, i, idx) => (
-                        <>
-                          {features.length === i + 1 && (
-                            <h2 style={sectionHeading}>Who is it NOT for?</h2>
-                          )}
-                          <Panel
-                            key={idx}
-                            lastPlayerPanel={
-                              i === features.length - 2 ? 'last-item' : ''
-                            }
-                            lamerPanel={
-                              i === features.length - 1 ? 'lamer-panel' : ''
-                            }
-                            {...props}
-                          />
-                        </>
-                      ))}
+                  <div className='row'>
+                    <div
+                      className={'col'}
+                      style={{
+                        display: 'flex',
+                        flexFlow: 'row wrap',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <h2 style={sectionHeading}>So, who is it for?</h2>
+                      {features &&
+                        features.map((props, i, idx) => (
+                          <>
+                            {features.length === i + 1 && (
+                              <h2 style={sectionHeading}>Who is it NOT for?</h2>
+                            )}
+                            <Panel
+                              key={idx}
+                              lastPlayerPanel={
+                                i === features.length - 2 ? 'last-item' : ''
+                              }
+                              lamerPanel={
+                                i === features.length - 1 ? 'lamer-panel' : ''
+                              }
+                              {...props}
+                            />
+                          </>
+                        ))}
+                    </div>
                   </div>
                 </div>
               </section>
@@ -212,7 +315,7 @@ function Home() {
                     'button button--primary button--lg button--explore',
                     styles.button,
                   )}
-                  to={useBaseUrl('docs/introduction')}
+                  to={useBaseUrl('docs/enter-metagame/signpost')}
                 >
                   EXPLORE
                 </Link>
diff --git a/src/pages/styles.module.scss b/src/pages/styles.module.scss
index 7eca9adc..d5cf3da2 100644
--- a/src/pages/styles.module.scss
+++ b/src/pages/styles.module.scss
@@ -4,7 +4,13 @@
  * and scoped locally.
  */
 
+.innerWrapper {
+  @media screen and (max-width: 500px) {
+    padding: 0 25px;
+  }
+}
 .heroBanner {
+  background: transparent;
   @media screen and (max-width: 500px) {
     padding: 0;
   }
@@ -14,21 +20,25 @@
   position: relative;
   overflow: hidden;
 
+  & > div {
+    padding: 0;
+  }
   .wikiLogo {
     width: 100%;
     margin-bottom: 0;
-    @media screen and (min-width: 768px) {
-      width: 70%;
-    }
-    @media screen and (min-width: 1366px) {
-      width: 50%;
-    }
-    @media screen and (min-width: 1920px) {
-      width: 80%;
-    }
+    // @media screen and (min-width: 768px) {
+    //   width: 90%;
+    // }
+    // @media screen and (min-width: 1366px) {
+    //   width: 100%;
+    // }
+    // @media screen and (min-width: 1920px) {
+    //   width: 100%;
+    // }
   }
 
   .heroSubtitle {
+    font-family: var(--mf-font-mono);
     font-size: 1.2rem;
   }
 
@@ -59,6 +69,23 @@
   }
 }
 
+.mainContent {
+  font-size: 17px;
+  text-align: left;
+
+  h2,
+  h3 {
+    font-family: var(--mf-font-mono);
+    text-align: left;
+    justify-self: stretch;
+    width: 100%;
+    margin: 30px 0;
+  }
+  h3 {
+    margin: 0;
+  }
+}
+
 .buttons {
   display: flex;
   align-items: center;
@@ -154,6 +181,10 @@
   text-align: center;
   padding: 2rem 0 0;
   width: 100%;
+
+  > div {
+    padding: 0;
+  }
 }
 .panel {
   @media screen and (max-width: 500px) {
@@ -161,6 +192,7 @@
     flex-flow: row wrap !important;
     max-width: 90% !important;
     padding: 20px !important;
+    margin: 0 auto !important;
 
     h3 {
       margin-top: 10px;
@@ -228,9 +260,18 @@
 
   ul {
     padding-left: 0;
+    list-style: none;
     list-style-position: inside;
     li {
       padding-left: 0;
+      display: inline-flex;
+      align-items: flex-start;
+
+      &::before {
+        content: '•';
+        display: block;
+        padding-right: 10px;
+      }
     }
   }
   p + p {