diff --git a/pages/index.js b/pages/index.js
index 91c3f14..eeaa7be 100755
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,14 +1,13 @@
 import Layout from "../components/main"
-import LatestEpisodes from "../components/latestepisodes"
-import Link from 'next/link'
+import FeatureImage from "../components/featureimage"
+import PublishedInfo from '../components/publishedinfo.js'
 import getConfig from 'next/config'
 import Head from 'next/head'
-import Image from 'next/image';
 import config from '../data/internal/config';
 import { FEEDS, getFeed } from "../lib/rss"
 import { generatePodcastFeeds, generateRssFeed } from "../data/internal/feed-generator"
 import { generateSitemap } from "../data/internal/sitemap-generator"
-import { getLatestPodcastEpisode } from "../data/external/cms"
+import { getLatestContent, getLatestPodcastEpisode } from "../data/external/cms"
 import { getLatestGalleryImage } from "../data/external/cms"
 
 export async function getStaticProps(context) {
@@ -18,6 +17,8 @@ export async function getStaticProps(context) {
   generateSitemap()
   const { serverRuntimeConfig } = getConfig()
 
+  console.log(serverRuntimeConfig)
+
   const qs = require('qs')
   const query = qs.stringify({
       pagination: {
@@ -46,7 +47,11 @@ export async function getStaticProps(context) {
   const firstimage = await getLatestGalleryImage()
 
   const pagedata = {'title': 'Angry Beanie'}
-  
+
+  const combined = getLatestContent()
+
+  console.log(combined)
+
   return {
       props: { article, pagedata, config: serverRuntimeConfig, firstimage, episodedata: epdata, siteConfig: config},
       revalidate: 60 // will be passed to the page component as props
@@ -54,85 +59,40 @@ export async function getStaticProps(context) {
 }
 
 function HomePage (props) {
-    return (
-      <div>
-        <Head>
-          <title>{props.pagedata.title}</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
-          <meta name="description" content="Angry Beanie"></meta>
-          <meta charSet="utf-8" />
-          <meta property="og-title" content="Angry Beanie - Home"></meta>
+  var featureImage
+
+    if (props.article.FeatureImage.data) {
+        if (props.article.FeatureImage.data.attributes.formats.large) {
+            featureImage = props.article.FeatureImage.data.attributes.formats.large
+            featureImage.name = props.article.FeatureImage.data.attributes.alternativeText
+        } 
+    }
+
+    var article_desc = props.article.Abstract.replace(new RegExp('<[^>]*>', 'g'), '') 
+
+    console.log(props.serverRuntimeConfig)
+
+   return <Layout pagedata={props.pagedata}>
+    <Head>
+            <meta name="twitter:card" content={ article_desc } key="twcard" />
+            <meta name="twitter:creator" content="angrybeanie" key="twhandle" />
+            <meta name="og:url" content={config.siteURL + "/news/" + props.article.Slug}></meta>
+            <meta name="og:type" content="article"></meta>
+            <meta name="og:title" content={ props.article.Title } key="title"></meta>
+            <meta name="og:description" content={ article_desc } key="description"></meta>
+            { props.article.FeatureImage.data != null &&
+                <meta name="og:image" content={props.config.media_path + featureImage.url}></meta>
+            }
         </Head>
-        <div className="container">
-          <div className="frontPageImage">
-            <img className="header_image img-fluid" src="/images/logo.png" alt="Angry Beanie" />
-          </div>
-          <div className="row">
-          <div className="col-sm-4">
-            <div className="card">
-            <div className="card-img-top">
-                {/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
-                <Image 
-                src={props.config.media_path + props.article.FeatureImage.data.attributes.formats.thumbnail.url}
-                alt={props.article.Title}
-                layout="fixed"
-                height={props.article.FeatureImage.data.attributes.formats.thumbnail.height}
-                width={props.article.FeatureImage.data.attributes.formats.thumbnail.width}
-                className="card-img-top"
-                ></Image> 
-              </div>
-              <div className="card-title">
-                <h3>Latest Blog Post</h3>
-              </div>
-              <div className="card-body">
-                <Link href="/news/[slug]" as={"/news/" + props.article.Slug}>{props.article.Title}</Link>
-                <div dangerouslySetInnerHTML={{ __html:props.article.Abstract}}></div>
-              </div>
-            </div>
-          </div>
-          {props.episodedata.data.map((episode) => ( 
-          <div className="col-sm-4">
-            <div className="card">
-              <div className="card-img-top">
-                {/* <img src={props.episodedata.Logo.data.attributes.url} alt={episode.show} height={props.episodedata.Logo.data.attributes.height}></img> */}
-                <Image 
-                src={props.config.media_path + props.episodedata.Logo.data.attributes.formats.thumbnail.url}
-                alt={episode.show}
-                layout="fixed"
-                height={props.episodedata.Logo.data.attributes.formats.thumbnail.height}
-                width={props.episodedata.Logo.data.attributes.formats.thumbnail.width}
-                className="card-img-top"
-                ></Image> 
-              </div>
-              <div className="card-title">
-                <h3>Latest Podcast</h3>
-              </div>
-              <div className="card-body">
-                <Link href={"/podcasts/shows/" + props.episodedata.data[0].attributes.podcast_sery.Slug + "/" + props.episodedata.data[0].attributes.Slug}>{props.episodedata.data[0].attributes.Title}</Link>
-                <div dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
-              </div>
-            </div>
-          </div>
-          ))}
-          <div className="col-sm-4">
-            <div className="card">
-              <div className="card-img-top">
-                <a href={"/galleryimages/" + props.firstimage.data[0].attributes.Slug}>
-                    <img className="featuredFlickr" src={ props.config.media_path + props.firstimage.data[0].attributes.Image.data.attributes.formats.thumbnail.url }></img>
-                </a>
-              </div>
-              <div className="card-title">
-                <h3>Latest Photo</h3>
-              </div>
-              <div className="card-body">
-                
-              </div>
-            </div>
-          </div>
+        <div className="main_content col-md-9 col-sm-12">
+            { props.article.FeatureImage.data != null &&
+                <FeatureImage imagedata = {featureImage} basepath = {props.config.media_path} ></FeatureImage>
+            }
+            <h1 className="page_title col-sm-12">{ props.article.Title }</h1>
+            <PublishedInfo publishData={props.article}></PublishedInfo>
+            <div className="article_body" dangerouslySetInnerHTML={{ __html: props.article.Body }}></div>
         </div>
-      </div>
-      </div>
-    );
+  </Layout>
 }
   
 export default HomePage
\ No newline at end of file
