diff --git a/src/components/Seo/index.tsx b/src/components/Seo/index.tsx
new file mode 100644
index 0000000..374df43
--- /dev/null
+++ b/src/components/Seo/index.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from "react"
+import PropTypes from "prop-types"
+import { useStaticQuery, graphql } from "gatsby"
+
+interface seoType {
+    description: string,
+    title   : string,
+    children: React.ReactNode;
+}
+
+const SEO: FC<seoType> = (props) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+          }
+        }
+      }
+    `
+  )
+
+  const metaDescription = props.description || site.siteMetadata.description
+
+  return (
+    <>
+      <html lang="en" />
+      <title>{props.title}</title>
+      <meta name="description" content={metaDescription} />
+      <meta property="og:title" content={props.title} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:type" content="website" />
+      <meta name="twitter:creator" content={site.siteMetadata.author} /> 
+      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
+      {props.children}
+    </>
+  )
+}
+
+export default SEO
\ No newline at end of file
diff --git a/src/pages/Layout/index.tsx b/src/pages/Layout/index.tsx
index e5a2c65..735265c 100644
--- a/src/pages/Layout/index.tsx
+++ b/src/pages/Layout/index.tsx
@@ -1,36 +1,31 @@
 import React from "react";
-import { graphql, Script } from "gatsby";
+import { graphql, HeadProps, PageProps, Script } from "gatsby";
 import config from '../../../data/site-config';
 import Base from "../../components/Base";
-import SEO from "../../components/seo";
+import SEO from "../../components/Seo";
+import Comment from "../../components/Comment"
 import { MDXProvider } from '@mdx-js/react';
 import './styles.scss';
-import './isso.css';
 
-const Comment = ({post_id}) => {
-  return (
-    <>
-      <Script data-isso="//comments.nochill.in/"
-        src="//comments.nochill.in/js/embed.min.js" 
-        data-isso-css="false"
-        id={post_id}
-        />
-
-      <section id="isso-thread">
-        <noscript>Javascript needs to be activated to view comments.</noscript>
-      </section>
-    </>
-  ) 
+type queryLayoutProps = {
+    mdx: {
+      frontmatter: {
+        title: string,
+        date: string,
+        last_update: string
+      }
+    }
+  children: any
 }
 
-const Layout = ({ data, children }) => {
-  
+const Layout = ({ data, children }: PageProps<queryLayoutProps>) => {
+
+
   const post = data.mdx.frontmatter;
 
   return (
     <Base>
       <div className="post template">
-        <SEO title={`${post.title} | ${config.siteTitle}`} />
         <div className="post page">
           <div className="article figure">
             <div className="HeaderContainer">
@@ -70,3 +65,13 @@ query($id: String) {
 `;
 
 export default Layout;
+
+export const Head = (props: HeadProps<queryLayoutProps>) => {
+  return (
+    <SEO 
+      title={`${props.data.mdx.frontmatter.title} | ${config.siteTitle}`} 
+      description=""
+      children=""
+    />
+  )
+}
diff --git a/src/pages/Layout/isso.css b/src/pages/Layout/isso.css
deleted file mode 100644
index 96d289c..0000000
--- a/src/pages/Layout/isso.css
+++ /dev/null
@@ -1,340 +0,0 @@
-/* ========================================================================== */
-/* Generic styling                                                            */
-/* ========================================================================== */
-#isso-thread * {
-    /* Reset */
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-/* ========================================================================== */
-/* Thread heading area                                                        */
-/* ========================================================================== */
-#isso-thread {
-    padding: 0 0 50px 0;
-    margin: 40px 0 0 0;
-}
-h4.isso-thread-heading {
-    color: #fff;
-    font-weight: bold;
-}
-.isso-feedlink {
-    float: right;
-    padding-left: 1em;
-}
-.isso-feedlink a {
-    font-size: 0.8em;
-    vertical-align: bottom;
-}
-
-/* ========================================================================== */
-/* Comments                                                                   */
-/* ========================================================================== */
-
-.isso-comment {
-    max-width: 68em;
-    margin: 0 auto;
-}
-.isso-preview .isso-comment {
-    padding-top: 0;
-    margin: 0;
-}
-.isso-comment:not(:first-of-type),
-.isso-follow-up .isso-comment {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-bottom: 0.5em;
-}
-.isso-avatar {
-    display: block;
-    float: left;
-    margin: 0.95em 0.95em 0;
-}
-.isso-avatar svg {
-    max-width: 48px;
-    max-height: 48px;
-    width: 100%;
-    height: 100%;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.isso-text-wrapper {
-    display: block;
-    padding: 0.95em;
-}
-.isso-follow-up {
-    padding-left: calc(7% + 20px);
-}
-.isso-comment-footer {
-    font-size: 0.95em;
-}
-.isso-comment-header {
-    font-size: 0.85em;
-}
-.isso-comment-header a {
-    text-decoration: none;
-}
-/* Only for comment header, spacer between up-/downvote should have no padding */
-.isso-comment-header .isso-spacer {
-    padding: 0 6px;
-}
-.isso-spacer,
-.isso-permalink,
-.isso-note,
-.isso-parent {
-    color: gray;
-    font-weight: normal;
-    text-shadow: none;
-}
-.isso-spacer:hover,
-.isso-permalink:hover,
-.isso-note:hover,
-.isso-parent:hover {
-    color: #606060;
-}
-.isso-note {
-    float: right;
-}
-.isso-author {
-    font-weight: bold;
-    color: #cbcbcb;
-}
-.isso-page-author-suffix {
-    font-weight: bold;
-    color: #2c2c2c;
-}
-.isso-textarea,
-.isso-preview {
-    margin-top: 0.2em;
-    width: 100%;
-    border: 1px solid #f0f0f0;
-    border-radius: 2px;
-    box-shadow: 0 0 2px #888;
-}
-.isso-text {
-    color: #fff;
-    word-break: break-word;
-}
-.isso-text p {
-    margin-top: 0.2em;
-}
-.isso-text p:last-child {
-    margin-bottom: 0.2em;
-}
-.isso-text h1,
-.isso-text h2,
-.isso-text h3,
-.isso-text h4,
-.isso-text h5,
-.isso-text h6 {
-    font-size: 130%;
-    font-weight: bold;
-}
-.isso-text pre {
-    background: #eee;
-    border: 1px solid #ddd;
-    padding: 10px 15px;
-    color: #4d4d4c;
-    overflow: auto;
-    line-height: 1.5em;
-}
-.isso-text :not(pre) > code {
-    padding: .2em .4em;
-    margin: 0;
-    font-size: 85%;
-    background-color: #eeeeee;
-    border-radius: 6px;
-}
-.isso-comment-footer {
-    font-size: 0.80em;
-    color: gray;
-    clear: left;
-}
-.isso-feedlink,
-.isso-comment-footer a {
-    font-weight: bold;
-    text-decoration: none;
-}
-.isso-feedlink:hover,
-.isso-comment-footer a:hover {
-    color: #fff;
-    text-shadow: #aaaaaa 0 0 1px;
-}
-.isso-comment-footer > a {
-    position: relative;
-    top: .2em;
-}
-.isso-comment-footer > a + a {
-    padding-left: 1em;
-}
-.isso-comment-footer .isso-votes {
-    color: gray;
-}
-.isso-upvote svg,
-.isso-downvote svg {
-    position: relative;
-    top: .2em;
-}
-/* Reply postbox under existing comment */
-.isso-comment .isso-postbox {
-    margin-top: 0.8em;
-}
-.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
-    display: none;
-}
-
-/* ========================================================================== */
-/* Postbox                                                                    */
-/* ========================================================================== */
-.isso-postbox {
-    max-width: 68em;
-    margin: 0 auto 2em;
-    clear: right;
-}
-.isso-form-wrapper {
-    display: block;
-    padding: 0;
-}
-.isso-textarea,
-.isso-preview {
-    margin: 0 0 .3em;
-    padding: .4em .8em;
-    border-radius: 3px;
-    background-color: #282828;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.isso-textarea {
-    color: #fff;
-    outline: 0;
-    width: 100%;
-    resize: none;
-}
-.isso-form-wrapper input[type=checkbox] {
-    vertical-align: middle;
-    position: relative;
-    bottom: 1px;
-    margin-left: 0;
-}
-.isso-notification-section {
-    font-size: 0.90em;
-    padding-top: .3em;
-    display: none;
-    padding-bottom: 10px;
-}
-.isso-auth-section {
-    display: block;
-}
-.isso-textarea:focus,
-.isso-input-wrapper input:focus,
-.isso-auth-section input:focus {
-    outline: 2px solid #3584e4;
-}
-.isso-input-wrapper {
-    display: inline-block;
-    position: relative;
-    margin: 0 1% 0 0;
-    color: #282828;
-}
-.isso-input-wrapper input {
-    display: block;
-    padding: .3em 10px;
-    max-width: 100%;
-    border-radius: 3px;
-    background-color: #282828;
-    line-height: 1.4em;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    color: #fff;
-}
-.isso-input-wrapper label {
-    display: block;
-    line-height: 1.4em;
-    height: 1.4em;
-    color: #fff !important;
-}
-label {
-	color: #fff;
-}
-.isso-post-action {
-    display: block;
-    float: right;
-    margin: 1.4em 0 0 5px;
-}
-.isso-post-action > input {
-    padding: calc(.3em - 1px);
-    border-radius: 2px;
-    border: 1px solid #ccc;
-    background-color: #ddd;
-    cursor: pointer;
-    outline: 0;
-    line-height: 1.4em;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.isso-post-action > input:hover {
-    background-color: #ccc;
-}
-.isso-post-action > input:active {
-    background-color: #bbb;
-}
-
-/* ========================================================================== */
-/* Postbox (preview mode)                                                     */
-/* ========================================================================== */
-.isso-preview,
-.isso-post-action input[name="edit"],
-.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
-.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
-    display: none;
-}
-.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
-    display: block;
-}
-.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
-    display: inline;
-}
-.isso-preview {
-    background-color: #f8f8f8;
-    background: repeating-linear-gradient(
-        -45deg,
-        #f8f8f8,
-        #f8f8f8 10px,
-        #fff 10px,
-        #fff 20px
-    );
-}
-
-/* ========================================================================== */
-/* Animations                                                                 */
-/* ========================================================================== */
-
-/* "target" means the comment that's being linked to, for example:
- * https://example.com/blog/example/#isso-15
- */
-.isso-target {
-    animation: isso-target-fade 5s ease-out;
-}
-@keyframes isso-target-fade {
-    0% { background-color: #eee5a1; }
-    /* This color should be changed when used on a dark background,
-     * maybe #3f3c1c for example
-     */
-}
-
-/* ========================================================================== */
-/* Media queries                                                              */
-/* ========================================================================== */
-@media screen and (max-width:600px) {
-    .isso-input-wrapper {
-        display: block;
-        max-width: 100%;
-        margin: 0 0 .3em;
-    }
-    .isso-input-wrapper input {
-        width: 100%;
-    }
-    .isso-post-action {
-        margin-top: 0;
-    }
-}
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 3cc5730..b7c94f5 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -3,13 +3,12 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import { useStaticQuery, graphql } from "gatsby"
 
 import Base from "../../components/Base"
-import SEO from "../../components/seo"
+import SEO from "../../components/Seo";
 
 import "./styles.scss";
 
 const AboutPage = () => (
   <Base>
-    <SEO title="About" />
     <div style={{ color: '#eeeeee'}}>
       <h4>Who are you ?</h4>
       <p>nc</p>
@@ -31,6 +30,15 @@ const AboutPage = () => (
   </Base>
 )
 
+export const Head = () => {
+  return (
+    <SEO title="About" 
+      children="" 
+      description=""
+    />
+  )
+}
+
 const Image = () => {
     const data = useStaticQuery(graphql`
     query {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0688c89..274f94d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,11 +2,31 @@ import React, { useEffect } from "react"
 import { graphql } from "gatsby"
 
 import Base from '../components/Base'
-import SEO from "../components/seo"
+import SEO from "../components/Seo"
 import PostList from "../components/PostList"
 import init, { greet } from "snake_game"
 
-const IndexPage = (props) => {
+type articleListType = {
+  data: {
+    allMdx: {
+      edges: [articleType]
+    }
+  }
+}
+
+type articleType = {
+  node: {
+    excerpt: string,
+    frontmatter: {
+      archive: boolean,
+      date: string,
+      slug: string,
+      title: string
+    }
+  }
+}
+
+const IndexPage = (props: articleListType) => {
   const postEdges = props.data.allMdx.edges;
 
   const initWasm = () => {
@@ -22,13 +42,19 @@ const IndexPage = (props) => {
 
   return (
     <Base>
-      <SEO title="Home" />
       <PostList postEdges={postEdges}/>
     </Base>
   )
 }
 
-export default IndexPage
+export default IndexPage;
+
+export const Head = () => {
+  <SEO title="Home" 
+    children="" 
+    description=""
+  />
+}
 
 export const pageQuery = graphql`
   query IndexQuery {
