diff --git a/index.html b/index.html
index da3af6f..e6b4bbc 100644
--- a/index.html
+++ b/index.html
@@ -9,25 +9,19 @@
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
     <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
   </head>
-  <body>
+  <body ng-app="demoApp">
     <section class="page-header">
       <h1 class="project-name">Angular-timezone-selector</h1>
       <h2 class="project-tagline">Autocomplete selector for timezones in Angular JS</h2>
-      <a href="https://github.com/mishguruorg/angular-timezone-selector" class="btn">View on GitHub</a>
-      <a href="https://github.com/mishguruorg/angular-timezone-selector/zipball/master" class="btn">Download .zip</a>
-      <a href="https://github.com/mishguruorg/angular-timezone-selector/tarball/master" class="btn">Download .tar.gz</a>
+      <p>An open source release from <a class="logo" href='https://mish.guru' target="_blank">mish guru</a></p>
     </section>
 
     <section class="main-content">
-      <h3>
-<a id="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
+      <h3>Demo</h3>
 
-<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
+      <p>Selected timezone {{timezone}}</p>
+      <timezone-selector ng-model="timezone">
 
-<pre><code>$ cd your_repo_root/repo_name
-$ git fetch origin
-$ git checkout gh-pages
-</code></pre>
 
 <p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
 
@@ -59,7 +53,11 @@ $ git checkout gh-pages
 
     </section>
 
-  
+  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
+  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js'></script>
+  <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js'></script>
+  <script type="text/javascript" src='js/angular-timezone-selector.js'></script>
+
   </body>
 </html>
 
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index b5f20c2..2587a03 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -243,3 +243,12 @@ a {
 @media screen and (max-width: 42em) {
   .site-footer {
     font-size: 0.9rem; } }
+
+@import url(http://fonts.googleapis.com/css?family=Raleway:900);
+
+.logo {
+  margin-bottom: 2rem;
+  font-family: 'Raleway';
+  font-weight: 900;
+  color: rgb(41, 255, 142);
+}
\ No newline at end of file
