diff --git a/src/css/custom.css b/src/css/custom.css
index ffe5288..417757b 100755
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,3 +23,12 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+.logo {
+  width: 600px;
+}
+
+.title {
+  margin-top: 40px;
+  font-size: 48px;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index d03060f..8db5f95 100755
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import classnames from 'classnames';
 import Layout from '@theme/Layout';
+import useTheme from '@theme/hooks/useTheme';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import '../css/custom.css';
 import styles from './styles.module.css';
 
 const features = [
@@ -55,14 +58,18 @@ function Feature({imageUrl, title, description}) {
 
 function Home() {
   const context = useDocusaurusContext();
+  const theme = useTheme();
+  console.log('theme: ', theme);
   const {siteConfig = {}} = context;
+
   return (
     <Layout
       title={`${siteConfig.title} Web Framework`}
       description="Ergonomic way of building web.">
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+      <header className={classnames(styles.heroBanner)}>
         <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
+          <img className="logo" src={useBaseUrl('img/obsidian.svg')} />
+          <h1 className={classnames("hero__title title")}>{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
             <Link
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index caeec63..254cd1b 100755
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -33,3 +33,4 @@
   height: 200px;
   width: 200px;
 }
+
diff --git a/static/img/obsidian.svg b/static/img/obsidian.svg
new file mode 100644
index 0000000..d6ee950
--- /dev/null
+++ b/static/img/obsidian.svg
@@ -0,0 +1,10 @@
+<svg width="754" height="115" viewBox="0 0 754 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50" cy="65" r="50" fill="black"/>
+<path d="M109 25C109 19.4772 113.477 15 119 15H153.688C157.01 15 160.114 16.6492 161.974 19.4014L205.556 83.9031C207.668 87.029 207.841 91.0775 206.004 94.3723L197.361 109.871C195.595 113.037 192.253 115 188.627 115H119C113.477 115 109 110.523 109 105V25Z" fill="black"/>
+<path d="M585.829 21.0926C589.315 13.0756 600.685 13.0756 604.171 21.0926L638.919 101.013C641.79 107.617 636.95 115 629.748 115H560.252C553.05 115 548.21 107.617 551.081 101.013L585.829 21.0926Z" fill="#C9C9C9"/>
+<rect x="486" y="15" width="50" height="100" rx="10" fill="#C9C9C9"/>
+<path d="M377 25C377 19.4772 381.477 15 387 15H422.858C425.51 15 428.054 16.0536 429.929 17.9289L472.119 60.1195C475.057 63.0572 475.873 67.5055 474.168 71.2942L457.153 109.104C455.539 112.692 451.969 115 448.034 115H387C381.477 115 377 110.523 377 105V25Z" fill="#C9C9C9"/>
+<rect x="318" y="15" width="50" height="100" rx="10" fill="#C9C9C9"/>
+<path d="M213.845 28.4C211.488 21.8812 216.317 15 223.249 15H291.768C299.446 15 304.26 23.2948 300.451 29.9614L291.149 46.2385C289.778 48.6384 289.461 51.4989 290.274 54.1407L305.018 102.059C306.997 108.49 302.188 115 295.46 115H227.759C219.757 115 214.997 106.069 219.457 99.4257L229.675 84.2079C231.451 81.5628 231.86 78.2297 230.777 75.2336L213.845 28.4Z" fill="black"/>
+<path d="M654 25.8146C654 18.7281 661.167 13.8901 667.74 16.5402L710.771 33.8915C714.017 35.2003 717.711 34.717 720.511 32.6171L738 19.5C744.592 14.5557 754 19.2595 754 27.5V105C754 110.523 749.523 115 744 115H664C658.477 115 654 110.523 654 105V25.8146Z" fill="#C9C9C9"/>
+</svg>