diff --git a/components/Box.tsx b/components/Box.tsx
index 5762238..7401b9f 100644
--- a/components/Box.tsx
+++ b/components/Box.tsx
@@ -19,7 +19,7 @@ import {
   display,
 } from 'styled-system';
 
-export const Box = styled('div')(
+export const Box = styled('div')<any>(
   space,
   color,
   width,
diff --git a/components/Button/NavLink.tsx b/components/Button/NavLink.tsx
index 8ad0e41..7fc8c35 100644
--- a/components/Button/NavLink.tsx
+++ b/components/Button/NavLink.tsx
@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import { BaseButton } from './BaseButton';
 import * as React from 'react';
 
-const NavLink = ({ modifiers, ...props }: { modifiers?: string[]; href: string }) => {
+const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: string[]; href: string, ariaLabel: string }) => {
   return (
-    <NavLink.Container>
-      <Link {...props}>
-        <NavLink.Button as={'a'} modifiers={modifiers}>
+    <NavLink.Container {...props}>
+      <Link href={href}>
+        <NavLink.Button href={href} ariaLabel={ariaLabel} as={'a'} modifiers={modifiers}>
           Blog
         </NavLink.Button>
       </Link>
diff --git a/components/Card/CardDesktop.tsx b/components/Card/CardDesktop.tsx
index c739015..695d1a4 100644
--- a/components/Card/CardDesktop.tsx
+++ b/components/Card/CardDesktop.tsx
@@ -69,8 +69,8 @@ const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
   <Fragment>
     {cover && (
       <Container {...props}>
-          <Link href={`/blog/${slug}`}>
-            <Box>
+        <Link href={`/blog/${slug}`}>
+          <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
               <ImageContainer ratio="69%">
                 <p>{cover.url}</p>
                 <Image src={cover.url} alt="" />
@@ -81,7 +81,7 @@ const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
                     <span key={`CardDesktop-${name}-${index}`}>#{name}</span>
                   ))}
                 </Hashtags>
-                <Trafalgar tag="h3" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
+                <Trafalgar tag="h2" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
                   {title}
                 </Trafalgar>
               </ContentContainer>
diff --git a/components/Card/CardMobile.tsx b/components/Card/CardMobile.tsx
index 21c4a07..9b03514 100644
--- a/components/Card/CardMobile.tsx
+++ b/components/Card/CardMobile.tsx
@@ -74,13 +74,13 @@ const CardMobile: React.FunctionComponent<CardMobileProps> = ({
       <Container {...props}>
         <InnerContainer>
           <Link href={`/blog/${slug}`}>
-            <Box>
+            <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
               <ImageContainer ratio="69%">
                 <p>{cover.url}</p>
                 <Image src={cover.url} alt="" />
               </ImageContainer>
               <ContentContainer>
-                <Trafalgar tag="h3">{title}</Trafalgar>
+                <Trafalgar tag="h2">{title}</Trafalgar>
               </ContentContainer>
             </Box>
           </Link>
diff --git a/components/GlobalStyle.tsx b/components/GlobalStyle.tsx
index 2986d08..7dab902 100644
--- a/components/GlobalStyle.tsx
+++ b/components/GlobalStyle.tsx
@@ -17,6 +17,11 @@ const GlobalStyle = createGlobalStyle`
     color: ${Theme.colors.main};
     font-family: ${Theme.fontFamilies.body} ;
   }
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 `;
 
 export default GlobalStyle;
diff --git a/components/Layout.tsx b/components/Layout.tsx
index cc67fc5..e9e4d72 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -7,7 +7,6 @@ import { useEffect } from 'react';
 import Fonts from '../utils/fonts';
 
 type LayoutProps = {
-  title?: string;
   backgroundColor: string;
 };
 const Container = styled(Box)`
@@ -19,7 +18,7 @@ const InnerContainer = styled('div')<{ isFontLoaded: boolean }>`
   transition: 0.5s;
 `;
 
-const Layout: React.FunctionComponent<LayoutProps> = ({ children, title, ...props }) => {
+const Layout: React.FunctionComponent<LayoutProps> = ({ children, ...props }) => {
   const [isFontLoaded, setIsFontLoaded] = useState(false);
   useEffect(() => {
     let isSubscribed = true
@@ -30,7 +29,6 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children, title, ...prop
   return (
     <Container {...props}>
       <Head>
-        <title>{title}</title>
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 703d1c3..a4a139c 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -48,11 +48,20 @@ const NavigationContainer = styled(Flex)`
   `}
 `;
 
-const NavigationLogo = styled('img')`
+const NavigationLogoContainer = styled(Box)`
+  height: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
+  transition: transform 0.5s;
+  
+  &:hover {
+  transform: translateX(-50%) scale(1.11);
+  }
+`
+
+const NavigationLogo = styled('img')`
   height: 100%;
   cursor: pointer;
 `;
@@ -65,12 +74,14 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <NavigationHorizontalPadding>
       <NavigationContainer>
         {shouldDisplayLogo && (
-          <Link href={`/`} >
-            <NavigationLogo src="/static/logo-luck.png" />
+          <Link href="/" >
+            <NavigationLogoContainer as="a" href="/" aria-label={`przejdź do strony głownej`}>
+              <NavigationLogo src="/static/logo-luck.png" alt="Logo Luck" />
+            </NavigationLogoContainer>
           </Link>
         )}
 
-        <NavLink href="/blog" modifiers={navLinkModifiers} />
+        <NavLink href="/blog" ariaLabel="przejdź do blog postow" modifiers={navLinkModifiers} />
       </NavigationContainer>
     </NavigationHorizontalPadding>
   );
diff --git a/next-seo.config.tsx b/next-seo.config.tsx
new file mode 100644
index 0000000..5ddb6fd
--- /dev/null
+++ b/next-seo.config.tsx
@@ -0,0 +1,23 @@
+export const title = 'Luck - Organizacja Mikołajek nie była nigdy tak łatwa!';
+export const description =
+  'Poznaj Aplikcaje Luck, która ułatwi Ci z organizowanie mikołajek. Świetnie się na da na mikołajki klasowe, jak i zarówno te organizowane w domu rodzinnym';
+
+export default {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    url: 'https://luck.org.pl',
+    locale: 'pl_PL',
+    images: [
+      {
+        url: 'https://luck.org.pl/static/logo-luck.png',
+        width: 488,
+        height: 488,
+        alt: 'Luck Logo',
+      },
+    ],
+    site_name: 'Aplikacja Luck',
+  },
+};
diff --git a/package.json b/package.json
index 1412b35..c235c1e 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "next": "^9.0.5",
     "next-apollo": "^3.1.4",
     "next-ga": "^2.3.4",
+    "next-seo": "^2.2.1",
     "nodemon": "^1.19.2",
     "react": "^16.9.0",
     "react-apollo": "^3.1.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5f9f06d..42de10d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import App, { Container } from 'next/app';
 import Router from "next/router";
+import { DefaultSeo } from 'next-seo';
 import { ThemeProvider } from 'styled-components';
 import GlobalStyle from '../components/GlobalStyle';
 import {Theme} from "../utils"
+import SEO from '../next-seo.config';
+
 // @ts-ignore
 import withGA from "next-ga";
 
@@ -15,6 +18,7 @@ class MyApp extends App<{analytics: any}> {
         <ThemeProvider theme={Theme}>
           <>
             <GlobalStyle />
+            <DefaultSeo {...SEO} />
             <Component {...pageProps} analytics={analytics} />
           </>
         </ThemeProvider>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index e0b9dd0..6ed187d 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -32,6 +32,7 @@ class MyDocument extends Document {
       <Html lang="en-US">
         <Head>
           <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Head>
         <body>
diff --git a/pages/blog/BlogLayout.tsx b/pages/blog/BlogLayout.tsx
index 0526406..4e4b928 100644
--- a/pages/blog/BlogLayout.tsx
+++ b/pages/blog/BlogLayout.tsx
@@ -3,7 +3,6 @@ import Layout from '../../components/Layout';
 import { Navigation } from '../../components';
 
 type LayoutProps = {
-  title?: string;
   backgroundColor: string;
 };
 
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index c6e3ac0..270d41f 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -1,15 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { NextSeo } from 'next-seo/lib';
 import RatioContainer from '../../components/RatioContainer';
-import {MediumText, Canon, Flex, TinySecond} from '../../components';
+import { MediumText, Canon, Flex, TinySecond } from '../../components';
 import BlogLayout from './BlogLayout';
 import { mapToPost } from './index';
 import { withApollo, getProcessor, Theme, Post, QueryPostsArgs, Hashtag } from '../../utils';
 import media from '../../utils/media';
 
-const ContentImage = styled("img")`
+const ContentImage = styled('img').attrs({alt: ""})`
   width: 100%;
   
   padding: ${Theme.space.small}px 0;
@@ -26,11 +27,11 @@ const ContentImage = styled("img")`
   ${media.greaterThan('desktop')`
     padding: ${Theme.space.xregular}px 0;
   `}
-`
+`;
 
 const components = {
-  "p": MediumText,
-  "img": ContentImage
+  p: MediumText,
+  img: ContentImage,
 };
 
 const processor = getProcessor(components);
@@ -84,39 +85,63 @@ const HashtagsText = styled(TinySecond)`
 
 const PostContent: React.FunctionComponent<Post> = ({
   title,
+  description,
   content,
+  createdAt,
+  updatedAt,
   cover,
   hashtags = [],
   ...props
 }) => (
-  <Fragment>
+  <>
     {cover && (
-      <Container {...props}>
-        <ImageContainer ratio={["62.5%","34%"]}>
-          <Image src={cover.url} alt="" />
-        </ImageContainer>
-        <ContentContainer>
-          <Canon pb={['small', 'small', 'regular', 'regular']}>{title}</Canon>
-          {processor.processSync(content).contents}
-          <HashtagsText pt={['small', 'small', 'regular', 'regular']}>
-            {(hashtags as Hashtag[]).map(({ name }, index) => (
-              <span key={`PostContent-${name}-${index}`}>#{name}</span>
-            ))}
-          </HashtagsText>
-        </ContentContainer>
-      </Container>
+      <>
+        <NextSeo
+          title={`Luck - ${title}`}
+          description={description}
+          openGraph={{
+            title,
+            description,
+            url: window.location.href,
+            images: [{ url: cover.url }],
+            article: {
+              publishedTime: createdAt,
+              modifiedTime: updatedAt,
+              // authors: [authors],
+              // section: category.name,
+              tags: (hashtags as Hashtag[]).map(({ name }) => name),
+            },
+          }}
+        />
+        <Container {...props}>
+          <ImageContainer ratio={['62.5%', '34%']}>
+            <Image src={cover.url} alt="" />
+          </ImageContainer>
+          <ContentContainer>
+            <Canon pb={['small', 'small', 'regular', 'regular']}>{title}</Canon>
+            {processor.processSync(content).contents}
+            <HashtagsText pt={['small', 'small', 'regular', 'regular']}>
+              {(hashtags as Hashtag[]).map(({ name }, index) => (
+                <span key={`PostContent-${name}-${index}`}>#{name}</span>
+              ))}
+            </HashtagsText>
+          </ContentContainer>
+        </Container>
+      </>
     )}
-  </Fragment>
+  </>
 );
 
 export const POST_QUERY = gql`
   query getPosts($where: JSON) {
     posts(where: $where) {
       title
-      content
       description
+      content
       slug
       isDraft
+      createdAt
+      updatedAt
       cover {
         url
       }
@@ -141,7 +166,7 @@ const Index: StatelessPage = ({ slug, cmsUrl }) => {
   if (loading) return <div>Loading</div>;
 
   return (
-    <BlogLayout title="Blog | Luck" backgroundColor={Theme.colors.main}>
+    <BlogLayout backgroundColor={Theme.colors.main}>
       {data && data.posts[0] && <PostContent {...mapToPost(data.posts[0], cmsUrl)} />}
     </BlogLayout>
   );
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index 66d186c..01bd57e 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -1,14 +1,15 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
+import { NextSeo } from 'next-seo';
 import { withApollo, Theme, Post } from '../../utils';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
-import Card from "../../components/Card"
+import Card from '../../components/Card';
 import { Flex } from '../../components';
 import BlogLayout from './BlogLayout';
-import media from "../../utils/media"
+import media from '../../utils/media';
 // @ts-ignore
-import Masonry from 'react-masonry-css'
+import Masonry from 'react-masonry-css';
 
 const Container = styled(Flex)`
   background-color: ${Theme.colors.main};
@@ -32,29 +33,28 @@ const Container = styled(Flex)`
   `}
 `;
 
-
 const MasonryContainer = styled(Container)`
   .my-masonry-grid {
     display: flex;
-    margin-left: ${-Theme.space.regular / 2}px ; /* gutter size offset */
+    margin-left: ${-Theme.space.regular / 2}px; /* gutter size offset */
     width: 100%;
   }
-  
+
   .my-masonry-grid_column {
-    padding-left: ${Theme.space.regular}px ; /* gutter size */
+    padding-left: ${Theme.space.regular}px; /* gutter size */
     background-clip: padding-box;
   }
 
   .my-masonry-grid_column > div {
     margin-bottom: ${Theme.space.regular}px;
   }
-`
+`;
 
 const breakpointCols = {
   default: 3,
 };
 
-const CardsContainer: React.FunctionComponent<any> = ({children, ...props}) => {
+const CardsContainer: React.FunctionComponent<any> = ({ children, ...props }) => {
   return (
     <Fragment>
       <Container display={['flex', 'flex', 'none']} {...props}>
@@ -64,14 +64,14 @@ const CardsContainer: React.FunctionComponent<any> = ({children, ...props}) => {
         <Masonry
           breakpointCols={breakpointCols}
           className="my-masonry-grid"
-          columnClassName="my-masonry-grid_column">
+          columnClassName="my-masonry-grid_column"
+        >
           {children}
         </Masonry>
       </MasonryContainer>
     </Fragment>
-  )
-}
-
+  );
+};
 
 interface StatelessPage<P = { cmsUrl: string }> extends React.FunctionComponent<P> {
   getInitialProps?: (ctx: any) => Promise<P>;
@@ -90,7 +90,7 @@ export const ALL_POSTS_QUERY = gql`
         url
       }
       hashtags {
-          name
+        name
       }
     }
   }
@@ -108,17 +108,21 @@ const Index: StatelessPage = ({ cmsUrl }) => {
   if (loading) return <div>Loading</div>;
 
   return (
-    <BlogLayout title="Blog | Luck" backgroundColor={Theme.colors.main}>
+    <>
+      <NextSeo
+        title="Luck - blog posty dotyczące aplikacji"
+        description="Blog posty związane z aplikacją Luck. Znajdziesz tu podsumowania, najbliższe plany dotyczące rozwoju, ale także i ciekawostki dotyczące Mikołajek"
+      />
+      <BlogLayout backgroundColor={Theme.colors.main}>
         <CardsContainer>
           {data &&
-          data.posts
-            .filter(({ isDraft }) => !isDraft)
-            .map(post => mapToPost(post, cmsUrl))
-            .map((post, index) => (
-              <Card key={`${post._id}-${index}`} {...post} />
-            ))}
+            data.posts
+              .filter(({ isDraft }) => !isDraft)
+              .map(post => mapToPost(post, cmsUrl))
+              .map((post, index) => <Card key={`${post._id}-${index}`} {...post} />)}
         </CardsContainer>
-    </BlogLayout>
+      </BlogLayout>
+    </>
   );
 };
 
diff --git a/pages/index/WelcomeSection/InputWithButton.tsx b/pages/index/WelcomeSection/InputWithButton.tsx
index 286fa77..42e8643 100644
--- a/pages/index/WelcomeSection/InputWithButton.tsx
+++ b/pages/index/WelcomeSection/InputWithButton.tsx
@@ -84,12 +84,12 @@ const Button = styled(BaseButton).attrs({ as: 'a' })<any>`
   }
 `;
 
-const InputWithButton = ({ href, ...props }: any) => {
+const InputWithButton = ({ href, ariaLabel, ...props }: any) => {
   const [name, setName]=useState<string>("")
   return (
     <Container {...props}>
       <Input onChange={(event) => setName(event.target.value)} placeholder={'Nazwa wydarzenia...'} {...Theme.textStyles.smallText} />
-      <Button href={`${href}?name=${name}`} {...Theme.textStyles.smallText}>
+      <Button href={`${href}?name=${name}`} ariaLabel={ariaLabel} {...Theme.textStyles.smallText}>
         Utwórz
       </Button>
     </Container>
diff --git a/pages/index/WelcomeSection/Logo.tsx b/pages/index/WelcomeSection/Logo.tsx
index e6af595..16543d4 100644
--- a/pages/index/WelcomeSection/Logo.tsx
+++ b/pages/index/WelcomeSection/Logo.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import media from '../../../utils/media';
 
-const Logo = styled('img')`
+const Logo = styled('img').attrs({alt: "Logo Luck"})`
   width: 115px;
   height: 115px;
 
diff --git a/pages/index/WelcomeSection/index.tsx b/pages/index/WelcomeSection/index.tsx
index 35443fb..b15ef50 100644
--- a/pages/index/WelcomeSection/index.tsx
+++ b/pages/index/WelcomeSection/index.tsx
@@ -34,6 +34,7 @@ const  WelcomeSection = ({ handleClickBubble, ...pros }: WelcomeSectionProps) =>
         <InputWithButton
           pt={['40px', '40px', '50px', '70px']}
           href="https://app.luck.org.pl"
+          ariaLabel={`przejdź do aplikacji`}
         />
       </Content>
       <Bubbles handleClickBubble={handleClickBubble} />
diff --git a/pages/index/index.tsx b/pages/index/index.tsx
index 3bd1391..e4b45a4 100644
--- a/pages/index/index.tsx
+++ b/pages/index/index.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
 import Layout from '../../components/Layout';
 import WelcomeSection from './WelcomeSection';
-import {Theme} from "../../utils"
+import { Theme } from '../../utils';
 
 interface IndexProps {
   analytics: any;
 }
 
-const Index = ({analytics}: IndexProps) => {
-
+const Index = ({ analytics }: IndexProps) => {
   const handleClickBubble = () => {
-    analytics.event("Home", "onClickBubble")
-  }
+    analytics.event('Home', 'onClickBubble');
+  };
 
   return (
-    <Layout title="Home"
-            backgroundColor={Theme.colors.mainContrast}>
-      <WelcomeSection handleClickBubble={handleClickBubble}/>
+    <Layout backgroundColor={Theme.colors.mainContrast}>
+      <WelcomeSection handleClickBubble={handleClickBubble} />
     </Layout>
   );
 };
diff --git a/server/server.ts b/server/server.ts
index 1793338..7934a50 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -10,6 +10,11 @@ const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
 
+const robots = `User-agent: *
+Allow: /
+Host: https://luck.org.pl
+`;
+
 app.prepare().then(() => {
   createServer((req: { url: any }, res: any) => {
     // Be sure to pass `true` as the second argument to `url.parse`.
@@ -19,6 +24,10 @@ app.prepare().then(() => {
 
     if (pathname === '/posts' || pathname === '/posty') {
       app.render(req, res, '/blog', query);
+    } else if (pathname === '/robots.txt') {
+      res.statusCode = 200;
+      res.write(robots);
+      res.end();
     } else {
       handle(req, res, parsedUrl);
     }
diff --git a/yarn.lock b/yarn.lock
index b3fde46..9d66851 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5563,6 +5563,11 @@ next-ga@^2.3.4:
     debug "^4.0.0"
     react-ga "^2.5.3"
 
+next-seo@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-2.2.1.tgz#c531fb0a4b079ba50983ee15b0f224568f44a474"
+  integrity sha512-q7mz7Jbm+7EFV9FSwDKFj6VKhHNIt13l9wTn7tKSzhwaTP3CAuMciQzyNY5WVEk+I0QUzBl0y7fn1XNTaDqfRg==
+
 next@^9.0.5:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/next/-/next-9.1.1.tgz#bede2e834548020bc4d3be0c46e3ed7edaac6d14"