diff --git a/.ci/build.sh b/.ci/build.sh
index 1f01164d..56c2be06 100755
--- a/.ci/build.sh
+++ b/.ci/build.sh
@@ -27,6 +27,7 @@ python manage.py fetch_deployed_data _site $ISSUES_JSON \
 
 python manage.py migrate
 python manage.py import_contributors_data
+python manage.py create_org_cluster_map_and_activity_graph org_map
 python manage.py import_issues_data
 python manage.py import_merge_requests_data
 python manage.py create_config_data
diff --git a/.coafile b/.coafile
index 8dc3cf12..3b4c1c5b 100644
--- a/.coafile
+++ b/.coafile
@@ -1,6 +1,6 @@
 [all]
 files = **.py, **.js, **.sh
-ignore = .git/**, **/__pycache__/**, gci/client.py, */migrations/**, private/*, openhub/**
+ignore = .git/**, **/__pycache__/**, gci/client.py, */migrations/**, private/*, openhub/**, **/leaflet_dist/**
 max_line_length = 80
 use_spaces = True
 preferred_quotation = '
@@ -42,6 +42,7 @@ files = static/**/*.js
 bears = JSHintBear
 allow_unused_variables = True
 javascript_strictness = False
+environment_jquery = True
 
 [all.yml]
 bears = YAMLLintBear
diff --git a/.moban.yaml b/.moban.yaml
index 574c2d69..5bf25cb1 100644
--- a/.moban.yaml
+++ b/.moban.yaml
@@ -12,10 +12,10 @@ packages:
   - log
   - meta_review
   - model
-  - twitter
   - unassigned_issues
 
 dependencies:
+  - getorg~=0.3.1
   - git+https://gitlab.com/coala/coala-utils.git
   - git-url-parse
   - django>2.1,<2.2
diff --git a/.nocover.yaml b/.nocover.yaml
index 987773ce..b2207eb5 100644
--- a/.nocover.yaml
+++ b/.nocover.yaml
@@ -12,7 +12,6 @@ nocover_file_globs:
   - meta_review/handler.py
   - model/*.py
   - openhub/*.py
-  - twitter/*.py
   # Optional coverage. Once off scripts.
   - inactive_issues/inactive_issues_scraper.py
   - unassigned_issues/unassigned_issues_scraper.py
diff --git a/activity/scraper.py b/activity/scraper.py
index 069bc668..9d8fc794 100644
--- a/activity/scraper.py
+++ b/activity/scraper.py
@@ -136,7 +136,7 @@ def get_data(self):
         return self.data
 
 
-def activity_json(request):
+def activity_json(filename):
 
     org_name = get_org_name()
 
@@ -152,4 +152,5 @@ def activity_json(request):
     real_data = Scraper(parsed_json['issues'], datetime.datetime.today())
     real_data = real_data.get_data()
 
-    return HttpResponse(json.dumps(real_data))
+    with open(filename, 'w+') as f:
+        json.dump(real_data, f, indent=4)
diff --git a/community/urls.py b/community/urls.py
index ed936b9d..cb37e8e2 100644
--- a/community/urls.py
+++ b/community/urls.py
@@ -5,13 +5,10 @@
 from django_distill import distill_url
 from django.conf.urls.static import static
 from django.conf import settings
-from django.views.generic import TemplateView
 
 from community.views import HomePageView, info
 from gci.views import index as gci_index
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
-from activity.scraper import activity_json
-from twitter.view_twitter import index as twitter_index
 from log.view_log import index as log_index
 from data.views import index as contributors_index
 from gamification.views import index as gamification_index
@@ -87,18 +84,6 @@ def get_organization():
         distill_func=get_index,
         distill_file='info.txt',
     ),
-    distill_url(
-        r'static/activity-data.json', activity_json,
-        name='activity_json',
-        distill_func=get_index,
-        distill_file='static/activity-data.json',
-    ),
-    distill_url(
-        r'activity/', TemplateView.as_view(template_name='activity.html'),
-        name='activity',
-        distill_func=get_index,
-        distill_file='activity/index.html',
-    ),
     distill_url(
         r'gci/tasks/rss.xml', gci_tasks_rss(),
         name='gci-tasks-rss',
@@ -111,12 +96,6 @@ def get_organization():
         distill_func=get_index,
         distill_file='gci/index.html',
     ),
-    distill_url(
-        r'twitter/', twitter_index,
-        name='twitter',
-        distill_func=get_index,
-        distill_file='twitter/index.html',
-    ),
     distill_url(
         r'log/', log_index,
         name='log',
diff --git a/community/views.py b/community/views.py
index 595c02ed..5c1bbb2f 100644
--- a/community/views.py
+++ b/community/views.py
@@ -1,28 +1,118 @@
-from django.http import HttpResponse
-from django.views.generic.base import TemplateView
+import logging
+
+import requests
 
 from trav import Travis
 
+from django.http import HttpResponse
+from django.views.generic.base import TemplateView
+
 from .git import (
     get_deploy_url,
     get_org_name,
     get_owner,
     get_upstream_deploy_url,
+    get_remote_url
 )
+from data.models import Team
+from gamification.models import Participant as GamificationParticipant
+from meta_review.models import Participant as MetaReviewer
+
+
+def initialize_org_context_details():
+    org_name = get_org_name()
+    org_details = {
+        'name': org_name,
+        'blog_url': f'https://blog.{org_name}.io/',
+        'twitter_url': f'https://twitter.com/{org_name}_io/',
+        'facebook_url': f'https://www.facebook.com/{org_name}Analyzer',
+        'repo_url': get_remote_url().href,
+        'docs': f'https://{org_name}.io/docs',
+        'newcomer_docs': f'https://{org_name}.io/newcomer',
+        'coc': f'https://{org_name}.io/coc',
+        'logo_url': (f'https://api.{org_name}.io/en/latest/_static/images/'
+                     f'{org_name}_logo.svg'),
+        'gitter_chat': f'https://gitter.im/{org_name}/{org_name}/',
+        'github_core_repo': f'https://github.com/{org_name}/{org_name}/',
+        'licence_type': 'GNU AGPL v3.0'
+    }
+    return org_details
+
+
+def get_header_and_footer(context):
+    context['isTravis'] = Travis.TRAVIS
+    context['travisLink'] = Travis.TRAVIS_BUILD_WEB_URL
+    context['org'] = initialize_org_context_details()
+    print('Running on Travis: {}, build link: {}'.format(context['isTravis'],
+                                                         context['travisLink']
+                                                         ))
+    return context
 
 
 class HomePageView(TemplateView):
     template_name = 'index.html'
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['isTravis'] = Travis.TRAVIS
-        context['travisLink'] = Travis.TRAVIS_BUILD_WEB_URL
+    def get_team_details(self, org_name):
+        teams = [
+            f'{org_name} newcomers',
+            f'{org_name} developers',
+            f'{org_name} admins'
+        ]
+        team_details = {}
+        for team_name in teams:
+            team = Team.objects.get(name=team_name)
+            contributors_count = team.contributors.count()
+            team_details[
+                team_name.replace(org_name, '').strip().capitalize()
+            ] = contributors_count
+        return team_details
+
+    def get_quote_of_the_day(self):
+
+        try:
+            qod = requests.get('http://quotes.rest/qod?category=inspire')
+            qod.raise_for_status()
+        except requests.HTTPError as err:
+            error_info = f'HTTPError while fetching Quote of the day! {err}'
+            logging.error(error_info)
+            return
 
-        print('Running on Travis: {}, build link: {}'.format(
-            context['isTravis'],
-            context['travisLink']))
+        qod_data = qod.json()
+        return {
+            'quote': qod_data['contents']['quotes'][0]['quote'],
+            'author': qod_data['contents']['quotes'][0]['author'],
+        }
 
+    def get_top_meta_review_users(self, count):
+        participants = MetaReviewer.objects.all()[:count]
+        return participants
+
+    def get_top_gamification_users(self, count):
+        return enumerate(GamificationParticipant.objects.all()[:count])
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        org_name = context['org']['name']
+        context['org']['team_details'] = dict(self.get_team_details(org_name))
+        about_org = (f'{org_name} (always spelled with a lowercase c!) is one'
+                     ' of the welcoming open-source organizations for'
+                     f' newcomers. {org_name} stands for “COde AnaLysis'
+                     ' Application” as it works well with animals and thus is'
+                     ' well visualizable which makes it easy to memorize.'
+                     f' {org_name} provides a unified interface for linting'
+                     ' and fixing the code with a single configuration file,'
+                     ' regardless of the programming languages used. You can'
+                     f' use {org_name} from within your favorite editor,'
+                     ' integrate it with your CI and, get the results as JSON'
+                     ', or customize it to your needs with its flexible'
+                     ' configuration syntax.')
+        context['org']['about'] = about_org
+        context['quote_details'] = self.get_quote_of_the_day()
+        context['top_meta_review_users'] = self.get_top_meta_review_users(
+            count=5)
+        context['top_gamification_users'] = self.get_top_gamification_users(
+            count=5)
         return context
 
 
diff --git a/data/management/commands/create_org_cluster_map_and_activity_graph.py b/data/management/commands/create_org_cluster_map_and_activity_graph.py
new file mode 100644
index 00000000..c71647b1
--- /dev/null
+++ b/data/management/commands/create_org_cluster_map_and_activity_graph.py
@@ -0,0 +1,20 @@
+from django.core.management.base import BaseCommand
+
+from data.org_cluster_map_handler import handle as org_cluster_map_handler
+from activity.scraper import activity_json
+
+
+class Command(BaseCommand):
+    help = 'Create a cluster map using contributors geolocation'
+
+    def add_arguments(self, parser):
+        parser.add_argument('output_dir', nargs='?', type=str)
+
+    def handle(self, *args, **options):
+        output_dir = options.get('output_dir')
+        if not output_dir:
+            org_cluster_map_handler()
+        else:
+            org_cluster_map_handler(output_dir)
+        # Fetch & Store data for activity graph to be displayed on home-page
+        activity_json('static/activity-data.js')
diff --git a/data/migrations/0006_auto_20190801_1752.py b/data/migrations/0006_auto_20190801_1752.py
new file mode 100644
index 00000000..aa2d0ef6
--- /dev/null
+++ b/data/migrations/0006_auto_20190801_1752.py
@@ -0,0 +1,18 @@
+# Generated by Django 2.1.7 on 2019-08-01 17:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('data', '0005_auto_20190801_1442'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='contributor',
+            name='teams',
+            field=models.ManyToManyField(related_name='contributors', to='data.Team'),
+        ),
+    ]
diff --git a/data/models.py b/data/models.py
index ed3b854b..02050fcb 100644
--- a/data/models.py
+++ b/data/models.py
@@ -19,7 +19,7 @@ class Contributor(models.Model):
     reviews = models.IntegerField(default=None, null=True)
     issues_opened = models.IntegerField(default=None, null=True)
     location = models.TextField(default=None, null=True)
-    teams = models.ManyToManyField(Team)
+    teams = models.ManyToManyField(Team, related_name='contributors')
 
     def __str__(self):
         return self.login
diff --git a/data/org_cluster_map_handler.py b/data/org_cluster_map_handler.py
new file mode 100644
index 00000000..baf0969b
--- /dev/null
+++ b/data/org_cluster_map_handler.py
@@ -0,0 +1,82 @@
+import os
+import json
+
+import logging
+
+import getorg
+
+from data.models import Contributor
+
+
+def handle(output_dir='cluster_map'):
+    """
+    Creates a organization cluster map using the contributors location
+    stored in the database
+    :param output_dir: Directory where all the required CSS and JS files
+    are copied by 'getorg' package
+    """
+    logger = logging.getLogger(__name__)
+    logger.info("'cluster_map/' is the default directory for storing"
+                " organization map related files. If arg 'output_dir'"
+                ' not provided it will be used as a default directory by'
+                " 'getorg' package.")
+
+    # For creating the organization map, the 'getorg' uses a 'Nominatim' named
+    # package which geocodes the contributor location and then uses that class
+    # to create the map. Since, we're not dealing with that function which use
+    # that 'Nominatim' package because we're fetching a JSON data and storing
+    # it in our db. Therefore, defining our own simple class that can aid us
+    # to create a cluster map.
+    class Location:
+
+        def __init__(self, longitude, latitude):
+            self.longitude = longitude
+            self.latitude = latitude
+
+    org_location_dict = {}
+
+    for contrib in Contributor.objects.filter(location__isnull=False):
+        user_location = json.loads(contrib.location)
+        location = Location(user_location['longitude'],
+                            user_location['latitude'])
+        org_location_dict[contrib.login] = location
+        logger.debug(f'{contrib.login} location {user_location} added on map')
+    getorg.orgmap.output_html_cluster_map(org_location_dict,
+                                          folder_name=output_dir)
+
+    move_and_make_changes_in_files(output_dir)
+
+
+def move_and_make_changes_in_files(output_dir):
+    """
+    Move static files from 'output_dir' to django static folder which
+    is being required by the map.html which is being auto-generated
+    by getorg.
+    :param output_dir: Directory from where the files have to be moved
+    """
+
+    move_leaflet_dist_folder(output_dir)
+
+    os.rename(
+        src=get_file_path(os.getcwd(), output_dir, 'org-locations.js'),
+        dst=get_file_path(os.getcwd(), 'static', 'org-locations.js')
+    )
+
+    os.remove(get_file_path(os.getcwd(), output_dir, 'map.html'))
+
+
+def move_leaflet_dist_folder(output_dir):
+    source_path = get_file_path(os.getcwd(), output_dir, 'leaflet_dist')
+    destination_path = get_file_path(os.getcwd(), 'static', 'leaflet_dist')
+
+    # Remove existing leaflet_dir if exists
+    for root, dirs, files in os.walk(destination_path):
+        for file in files:
+            os.remove(os.path.join(destination_path, file))
+        os.rmdir(root)
+
+    os.renames(source_path, destination_path)
+
+
+def get_file_path(*args):
+    return '/'.join(args)
diff --git a/data/tests/test_org_cluster_map_handler.py b/data/tests/test_org_cluster_map_handler.py
new file mode 100644
index 00000000..8199dcc0
--- /dev/null
+++ b/data/tests/test_org_cluster_map_handler.py
@@ -0,0 +1,22 @@
+from django.test import TestCase
+
+from data.models import Contributor
+from data.org_cluster_map_handler import handle as org_cluster_map_handler
+
+
+class CreateOrgClusterMapAndActivityGraphTest(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        Contributor.objects.create(login='test',
+                                   name='Test User',
+                                   location='{"latitude": 12.9,'
+                                            '"longitude": 77.8}')
+        Contributor.objects.create(login='testuser',
+                                   name='Test User 2')
+
+    def test_with_output_dir(self):
+        org_cluster_map_handler()
+
+    def test_without_output_dir(self):
+        org_cluster_map_handler(output_dir='org_map')
diff --git a/requirements.txt b/requirements.txt
index d2f46479..5c915a34 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,4 @@
+getorg~=0.3.1
 git+https://gitlab.com/coala/coala-utils.git
 git-url-parse
 django>2.1,<2.2
diff --git a/setup.cfg b/setup.cfg
index 4087933a..a3f699bf 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -17,7 +17,6 @@ testpaths =
   log
   meta_review
   model
-  twitter
   unassigned_issues
 
 python_files = test_*.py
@@ -73,7 +72,6 @@ source =
   log
   meta_review
   model
-  twitter
   unassigned_issues
 
 omit =
@@ -86,7 +84,6 @@ omit =
   meta_review/handler.py
   model/*.py
   openhub/*.py
-  twitter/*.py
   inactive_issues/inactive_issues_scraper.py
   unassigned_issues/unassigned_issues_scraper.py
   */migrations/*.py
diff --git a/static/charts.js b/static/charts.js
deleted file mode 100644
index 6169129e..00000000
--- a/static/charts.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/* globals $, Chart */
-var curChart;
-
-function setChart(labels, openedData, closedData, type) {
-  var ctx = document.getElementById("canvas");
-
-  curChart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: labels,
-      datasets: [{
-        label: "Issues Opened",
-        backgroundColor: "RGBA(33, 150, 243, 0.2)",
-        borderColor: "RGBA(33, 150, 243, 1)",
-        data: openedData,
-        fill: true,
-      }, {
-        label: "Issues Closed",
-        backgroundColor: "RGBA(244, 67, 54, 0.2)",
-        borderColor: "RGBA(244, 67, 54, 1)",
-        data: closedData,
-        fill: true,
-      }]
-    },
-    options: {
-      responsive: true,
-      title: {
-        display: true,
-        text: 'Community Activity'
-      },
-      tooltips: {
-        mode: 'index',
-        intersect: false,
-      },
-      hover: {
-        mode: 'nearest',
-        intersect: true
-      },
-      scales: {
-        xAxes: [{
-          display: true,
-          scaleLabel: {
-            display: true,
-            labelString: type
-          }
-        }],
-        yAxes: [{
-          display: true,
-          scaleLabel: {
-            display: true,
-            labelString: 'Number'
-          }
-        }]
-      }
-    }
-  });
-}
-
-function updateChart(type) {
-  if(curChart){ curChart.destroy(); }
-
-  $.getJSON("/static/activity-data.json",
-    function(data) {
-      var labels, openedData, closedData;
-      if(type === "Month") {
-        labels = data.year.labels;
-        openedData = data.year.opened;
-        closedData = data.year.closed;
-      }
-      else if(type === "Week") {
-        labels = data.month.labels;
-        openedData = data.month.opened;
-        closedData = data.month.closed;
-      }
-      else {
-        labels = data.week.labels;
-        openedData = data.week.opened;
-        closedData = data.week.closed;
-      }
-      setChart(labels, openedData, closedData, type);
-  })
-  .fail(function(data, textStatus, error) {
-    var err = textStatus + ", " + error;
-    console.error("Request Failed: " + err);
-  });
-}
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 00000000..d50f0193
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,114 @@
+.activity-graph {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 3%;
+}
+
+.activity-graph-canvas {
+       width: 75%;
+}
+
+.activity-graph .input-field {
+    width: 100px;
+    margin-top: 0;
+}
+
+.community-header-image img {
+    width: 100%;
+    box-shadow: 0 -5px 15px black;
+}
+
+.join-btn a.btn-large {
+    min-width: 300px;
+    width: 30%;
+    margin-top: 3%;
+    box-shadow: 0 0 25px 2px black;
+    border-radius: 100px;
+    background-color: #edf5af;
+    color: #636060;
+    text-transform: full-width;
+    font-size: 1em;
+    letter-spacing: 0;
+    padding: 0 3%;
+}
+
+.leaderboards-btn {
+    float: right;
+    width: 100%;
+    border-bottom-right-radius: 1000px;
+    border-bottom-left-radius: 1000px;
+}
+
+.org-teams-stats {
+    width: 70%;
+    margin: auto;
+}
+
+.organization_map {
+    text-align: center;
+    padding: 2% 0;
+}
+
+.top-meta-reviewers {
+    background-color: #fef200;
+}
+
+.top-gamifiers {
+    background-color: #ee8940;
+}
+
+.top-contributors {
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-flow: row wrap;
+    padding-top: 2%;
+}
+
+.top-meta-reviewers,
+.top-gamifiers {
+    margin: 0 3%;
+    border-radius: 10%;
+    box-shadow: 0 0 25px 2px;
+    font-size: medium;
+}
+
+.quote-of-day div.quote{
+    width: auto;
+    max-width: 70%;
+}
+
+@media only screen and (min-width: 858px) {
+    .community-header-image img{
+        height: 450px;
+
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .activity-graph {
+       display: none;
+    }
+    .join-btn a.btn-large {
+        margin-bottom: 20px;
+    }
+}
+
+@media only screen and (min-width: 900px){
+    .top-meta-reviewers,
+    .top-gamifiers {
+        width: 35%;
+    }
+}
+
+@media only screen and (max-width: 644px){
+    .top-meta-reviewers,
+    .top-gamifiers {
+        margin: 3% 3%;
+        width: 70%
+    }
+}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 00000000..af72908b
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,169 @@
+.apply-flex {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+body {
+    font-family: 'Ubuntu Mono', monospace;
+    background-color: #edf5af;
+}
+
+.bold-text,
+.sidenav.bold-text {
+    font-weight: bold;
+}
+
+.bold-text i.social-icons,
+.sidenav i.social-icons {
+    font-size: 1.5em;
+}
+
+.clickable-row {
+    cursor: pointer;
+}
+
+.custom-green-color-font {
+    color: #2d5d13
+}
+
+.center-content {
+    justify-content: center;
+}
+
+.evenly-spread-content {
+    justify-content: space-evenly;
+}
+
+.gray-font-color {
+    color: #37474f;
+}
+
+footer .footer-icons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    line-height: 3em;
+}
+
+footer.footer-icons.icon {
+    color: white;
+}
+
+footer .social-buttons {
+    background-color: black;
+    text-transform: none;
+}
+
+.large-font {
+    font-size: larger;
+}
+
+.main-content {
+    background-color: #edf5af;
+    padding-bottom: 3%;
+}
+
+.main-content h3 {
+    color: #37474f;
+}
+
+nav {
+    background-color: #37474f;
+}
+
+nav .brand-logo img {
+    width: 60px;
+}
+
+.nav-menu-font-size,
+.sidenav .nav-menu-font-size {
+    font-size: 20px;
+}
+p {
+    font-size: medium;
+}
+
+.page-name {
+    align-items: center;
+    display: flex;
+    text-align: center;
+}
+
+.page-footer {
+    background-color: #37474f;
+    box-shadow: 0 -5px 15px black;
+}
+
+.page-footer .footer-copyright {
+    background-color: #263238;
+}
+
+.inline-contents {
+    display: inline-flex;
+}
+
+.search-field {
+    border-radius: 100px;
+    box-shadow: 0 0 25px 2px black;
+    color: #454343;
+    background-color: #edf5af;
+    padding: 0 20px;
+    flex-flow: row;
+    margin: auto auto auto 0;
+}
+
+#search {
+    border-bottom: none;
+    padding-left: 15px;
+    margin-bottom: 0;
+    font-weight: bold;
+}
+
+#search::placeholder {
+    color: grey;
+}
+
+#search:focus:not(.browser-default) {
+    background-color: #edf5af;
+    border-radius: 100px;
+    font-size: medium;
+    padding-left: 15px;
+    margin-bottom: 0;
+}
+
+.sidenav .dropdown-trigger-sidenav i {
+    float: none;
+}
+
+.student {
+    padding-bottom: 20px;
+}
+
+.students {
+    list-style: none;
+}
+
+.web-page-details {
+    width: 100%;
+}
+
+.web-page-description,
+.data-updated-time,
+.data-fetch-error {
+    text-align: center;
+    font-size: large;
+    color: #2d5d13;
+}
+
+@media only screen and (max-width: 600px) {
+    nav .brand-logo img {
+        width: 55px;
+    }
+}
+
+@media only screen and (max-width: 530px){
+    .page-name {
+        margin: 0;
+    }
+}
diff --git a/static/images/favicon.ico b/static/images/favicon.ico
new file mode 100644
index 00000000..8290d1ba
Binary files /dev/null and b/static/images/favicon.ico differ
diff --git a/static/images/os_community_header.jpg b/static/images/os_community_header.jpg
new file mode 100644
index 00000000..82d28ecb
Binary files /dev/null and b/static/images/os_community_header.jpg differ
diff --git a/static/images/os_community_logo.png b/static/images/os_community_logo.png
new file mode 100644
index 00000000..3b2b2da0
Binary files /dev/null and b/static/images/os_community_logo.png differ
diff --git a/static/js/index.js b/static/js/index.js
new file mode 100644
index 00000000..f8a9383a
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,99 @@
+/* globals Chart */
+$(document).ready(function(){
+    $(".clickable-row").click(function() {
+        window.location = $(this).data("href");
+    });
+
+    var chart_type_selector = $('#chart-type');
+    var curChart;
+
+    function setChart(labels, openedData, closedData, type) {
+      var ctx = document.getElementById("canvas");
+
+      curChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: "Issues Opened",
+            backgroundColor: "RGBA(33, 150, 243, 0.2)",
+            borderColor: "RGBA(33, 150, 243, 1)",
+            data: openedData,
+            fill: true,
+          }, {
+            label: "Issues Closed",
+            backgroundColor: "RGBA(244, 67, 54, 0.2)",
+            borderColor: "RGBA(244, 67, 54, 1)",
+            data: closedData,
+            fill: true,
+          }]
+        },
+        options: {
+          responsive: true,
+          title: {
+            display: true,
+            text: 'Community Activity'
+          },
+          tooltips: {
+            mode: 'index',
+            intersect: false,
+          },
+          hover: {
+            mode: 'nearest',
+            intersect: true
+          },
+          scales: {
+            xAxes: [{
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: type
+              }
+            }],
+            yAxes: [{
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Number'
+              }
+            }]
+          }
+        }
+      });
+    }
+
+    function updateChart(type) {
+      if(curChart){ curChart.destroy(); }
+
+      $.getJSON("/static/activity-data.js",
+        function(data) {
+          var labels, openedData, closedData;
+          if(type === "Month") {
+            labels = data.year.labels;
+            openedData = data.year.opened;
+            closedData = data.year.closed;
+          }
+          else if(type === "Week") {
+            labels = data.month.labels;
+            openedData = data.month.opened;
+            closedData = data.month.closed;
+          }
+          else {
+            labels = data.week.labels;
+            openedData = data.week.opened;
+            closedData = data.week.closed;
+          }
+          setChart(labels, openedData, closedData, type);
+      })
+      .fail(function(data, textStatus, error) {
+        var err = textStatus + ", " + error;
+        console.error("Request Failed: " + err);
+      });
+    }
+
+    chart_type_selector.on('change', function(){
+        updateChart($('#chart-type').val());
+        });
+
+    updateChart(chart_type_selector.val());
+});
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 00000000..f01f9eb4
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,23 @@
+$(document).ready(function(){
+    function activate_dropdown(){
+        if ($('nav').width() < 992 ){
+            $(".dropdown-trigger-sidenav").dropdown({coverTrigger: false});
+        }
+        else {
+            $(".dropdown-trigger").dropdown({hover: true,
+                                             constrainWidth: false,
+                                             coverTrigger: false});
+        }
+    }
+
+    activate_dropdown();
+
+    $('.sidenav').sidenav();
+    $('select').formSelect();
+
+    $(window).resize(function(){
+        activate_dropdown();
+    });
+
+    $('#current-year').html(new Date().getFullYear());
+});
diff --git a/static/main.css b/static/main.css
deleted file mode 100644
index d2f410e3..00000000
--- a/static/main.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.student {
-    padding-bottom: 20px;
-}
-
-.students {
-    list-style: none;
-}
diff --git a/templates/activity.html b/templates/activity.html
deleted file mode 100644
index a16da76f..00000000
--- a/templates/activity.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Community Activity</title>
-      <style>
-        canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        }
-      </style>
-      <meta charset="utf-8">
-      <meta content="text/html">
-  </head>
-  <body>
-    <h1>Community Activity</h1>
-    <br>
-    <br>
-    <div style="width:75%;">
-      <canvas id="canvas"></canvas>
-    </div>
-    <select id="chart-type">
-      <option value="Month">Year</option>
-      <option value="Week">Month</option>
-      <option value="Day">Week</option>
-    </select>
-    <br>
-    <br>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-    <script src="/static/charts.js"></script>
-    <script>
-      $('#chart-type').on('change', function(){
-        updateChart($('#chart-type').val())
-        });
-        updateChart($('#chart-type').val());
-    </script>
-  </body>
-</html>
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 00000000..cdc564a2
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+{% load staticfiles %}
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="text/html">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
+
+    <link href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/main.css' %}">
+    {% block add_css_files %}{% endblock %}
+
+    <script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="{% static 'js/main.js' %}"></script>
+    {% block add_js_files %}{% endblock %}
+
+  </head>
+  <body>
+    <nav>
+      <div class="nav-wrapper bold-text">
+        <a href="/" class="brand-logo">
+          <img src="{% static 'images/os_community_logo.png' %}" alt="OpenSource Community Logo">
+        </a>
+        <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="fa fa-bars"></i></a>
+        <ul class="right hide-on-med-and-down nav-menu-font-size">
+          <li><a href="/" class="nav-menu-font-size">Home</a></li>
+          <li><a href="/#about" class="nav-menu-font-size">About</a></li>
+          <li><a href="#" class="nav-menu-font-size">Join</a></li>
+          <li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
+          <li><a class="dropdown-trigger nav-menu-font-size" href="#organisation" data-target="organisation-dropdown">Organisation <i class="fa fa-caret-down"></i></a></li>
+          <li><a class="dropdown-trigger nav-menu-font-size" href="#contributors" data-target="contributors-dropdown">Contributors <i class="fa fa-caret-down"></i></a></li>
+          <li><a class="dropdown-trigger nav-menu-font-size" href="#openhub" data-target="openhub-dropdown">OpenHub <i class="fa fa-caret-down"></i></a></li>
+          <li><a href="{{ org.twitter_url }}" target="_blank"><i class="fa fa-twitter social-icons"></i></a></li>
+          <li><a href="{{ org.facebook_url }}" target="_blank"><i class="fa fa-facebook-f social-icons"></i></a></li>
+          <li><a href="{{ org.repo_url }}" target="_blank"><i class="fa fa-github social-icons"></i></a></li>
+          <li><a class="dropdown-trigger" href="#user" data-target="user-dropdown"><i class="fa fa-user social-icons"></i></a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <ul class="sidenav bold-text" id="mobile-menu">
+      <li><a href="/#about" class="nav-menu-font-size">About</a></li>
+      <li><a href="#" class="nav-menu-font-size">Join</a></li>
+      <li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
+      <li><a class="dropdown-trigger-sidenav nav-menu-font-size" href="#organisation" data-target="organisation-dropdown">Organisation <i class="fa fa-caret-down"></i></a></li>
+      <li><a class="dropdown-trigger-sidenav nav-menu-font-size" href="#contributors" data-target="contributors-dropdown">Contributors <i class="fa fa-caret-down"></i></a></li>
+      <li><a class="dropdown-trigger-sidenav nav-menu-font-size" href="#openhub" data-target="openhub-dropdown">OpenHub <i class="fa fa-caret-down"></i></a></li>
+      <li><a href="{{ org.twitter_url }}" target="_blank"><i class="fa fa-twitter social-icons" aria-hidden="true"></i></a></li>
+      <li><a href="{{ org.facebook_url }}" target="_blank"><i class="fa fa-facebook-f social-icons"></i></a></li>
+      <li><a href="{{ org.repo_url }}" target="_blank"><i class="fa fa-github social-icons"></i></a></li>
+      <li><a class="dropdown-trigger-sidenav" href="#user" data-target="user-dropdown"><i class="fa fa-user social-icons"></i><i class="fa fa-caret-down"></i></a></li>
+    </ul>
+
+    <ul id="organisation-dropdown" class="dropdown-content">
+      <li><a href="#">Teams</a></li>
+      <li><a href="{% url 'community-data' %}">Contributors Information</a></li>
+      <li><a href="#">Mentors</a></li>
+      <li><a href="{% url 'community-gci' %}">Google Code-in Students</a></li>
+      <li><a href="{% url 'inactive_issues_json' %}" title="List of all the issues on organization's main repository on which assignee has not shown any activity for more than 2 months.">Inactive issues</a></li>
+      <li><a href="{% url 'unassigned_issues_activity_json' %}" title="List of all the issues on organization main repository on which someone has opened a pull request without getting assigned to it.">Unassigned issues activity</a></li>
+      <li><a href="#">Newcomer issues</a></li>
+      <li><a href="{% url 'log' %}">Project CI Build</a></li>
+      {% if isTravis %}
+        <li><a href="{{ travisLink }}" title="This website was built automatically using Travis CI.">TravisCI build info</a></li>
+      {% endif %}{# if isTravis #}
+    </ul>
+
+    <ul id="contributors-dropdown" class="dropdown-content">
+      <li><a href="{% url 'community-gamification' %}">Gamification Leaderboard</a></li>
+      <li><a href="{% url 'meta_review_data' %}">Meta-review</a></li>
+    </ul>
+
+    <ul id="openhub-dropdown" class="dropdown-content">
+      <li><a href="{% url 'community-openhub' %}">Org. Portfolio Projects</a></li>
+      <li><a href="{% url 'community-model' %}">Imported data</a></li>
+    </ul>
+
+    <ul id="user-dropdown" class="dropdown-content">
+      <li><a href="#">Login</a></li>
+    </ul>
+
+    <div class="main-content">
+      {% block main-content %}
+      {% endblock %}
+    </div>
+
+  <footer class="page-footer">
+    <div class="row">
+      <div class="col m3 s12">
+        <h5 class="white-text fine">Site Links</h5>
+          <ul>
+            <li><a class="grey-text text-lighten-3 bold-text" target="_blank" href="{{ org.docs }}">Documentation</a></li>
+            <li><a class="grey-text text-lighten-3 bold-text" target="_blank" href="{{ org.newcomer_docs }}">Newcomer Docs</a></li>
+            <li><a class="grey-text text-lighten-3 bold-text" target="_blank" href="{{ org.coc }}">Code of Conduct</a></li>
+            <li><a class="grey-text text-lighten-3 bold-text" target="_blank" href="{{ org.blog_url }}">Blog</a></li>
+          </ul>
+      </div>
+      <div class="col m9 s12 center">
+        <div class="center">
+          <h3 class="fine white-text">
+            <span>
+              <img class="footer-logo" src="{{ org.logo_url }}" alt="{{ org.name }}">
+            </span>
+            <span>{{ org.name }}</span>
+          </h3>
+        </div>
+        <div class="center footer-icons">
+          <span class="icon">
+            <a href="{{ org.twitter_url }}" target="_blank" class="btn center social-buttons">
+              <i class="fa fa-twitter" aria-hidden="true">
+                Follow us on Twitter
+              </i>
+            </a>
+          </span>
+          <span class="icon">
+            <a href="{{ org.gitter_chat }}" target="_blank" class="btn center social-buttons">
+              <i class="fa fa-commenting-o" aria-hidden="true">
+                Join Chat on Gitter
+              </i>
+            </a>
+          </span>
+          <span class="icon">
+            <a href="{{ org.github_core_repo }}" target="_blank" class="btn center social-buttons">
+              <i class="fa fa-github" aria-hidden="true">
+                Star us on GitHub
+              </i>
+            </a>
+          </span>
+        </div>
+      </div>
+      </div>
+    <div class="footer-copyright bold-text">
+      <div class="container ">
+        <span class="left">
+          ©
+          <span id="current-year"></span>
+          {{ org.name }}
+        </span>
+        <span class="grey-text text-lighten-4 right">{{ org.licence_type }}</span>
+      </div>
+    </div>
+  </footer>
+
+  </body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index 80530eeb..d464c6d2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,29 +1,118 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Community website</title>
-  </head>
-  <body>
-    <img src="static/org_logo.png" alt="org logo" height="42" width="42">
-    <ul>
-      <li><a href="gci/">Google Code-in</a>
-      <li><a href="activity/">GitHub activity</a>
-      <li><a href="twitter/">Twitter Feed</a>
-      <li><a href="info.txt">Build info</a>
-      <li><a href="log/">Logs</a>
-      <li><a href="contributors/">Contributors data</a>
-      <li><a href="meta-review/">Meta-review data</a>
-      <li><a href="gamification/">Gamification leaderboard</a>
-      <li><a title="List of all the issues on organization's main repository on which assignee has not shown any activity for more than 2 months."
-        href="static/inactive-issues.json">Inactive Issues</a>
-      <li><a href="openhub/">OpenHub Data</a>
-      <li><a href="model/">Visit imported data</a>
-      <li><a title="List of all the issues on organization main repository on which someone has opened a pull request without getting assigned to it."
-        href="static/unassigned-issues.json">Unassigned issues activity</a>
-    </ul>
-    {% if isTravis %}
-    <small>This website was built automatically using Travis CI. A link to the build can be found <a href="{{ travisLink }}">here</a>.</small>
-    {% endif %}{# if isTravis #}
-  </body>
-</html>
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block title %}
+  Community | Homepage
+{% endblock %}
+
+{% block add_css_files %}
+<link rel="stylesheet" href="{% static 'css/index.css' %}">
+{% endblock %}
+
+{% block add_js_files %}
+<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
+<script src="{% static 'js/index.js' %}"></script>
+{% endblock %}
+
+{% block main-content %}
+
+  <div class="community-header-image">
+    <img src="{% static 'images/os_community_header.jpg' %}" alt="OpenSource Community">
+  </div>
+
+  <div class="center about-org custom-green-color-font" id="about" style="margin-top: -2%">
+    <div class="center">
+      <h3>Welcome to {{ org.name }}</h3>
+      <p style="margin: 0 10%; color: black">{{ org.about }}</p>
+    </div>
+  </div>
+  {% if quote_details %}
+  <div class="center quote-of-day custom-green-color-font">
+    <div class="center apply-flex center-content">
+      <h3 style="padding-right: 15px">~</h3>
+      <div class="quote">
+        <p style="margin-bottom: 0">{{ quote_details.quote }}</p>
+        <h6 style="margin-top: 0">- {{ quote_details.author }}</h6>
+      </div>
+      <h3 style="padding-left: 15px">~</h3>
+    </div>
+  </div>
+  {% endif %}{# if quote_details #}
+
+  <div class="center org-teams-stats apply-flex evenly-spread-content custom-green-color-font">
+    {% for team_name, members_count in org.team_details.items %}
+    <div class="team" style="margin-right: 20px">
+      <h3 style="margin-bottom: 0">{{ members_count }}</h3>
+      <h4 style="margin-top: 0">{{ team_name }}</h4>
+    </div>
+    {% endfor %}{# for team_name, members_count in org.team_details.items #}
+  </div>
+
+  <div class="organization-map">
+    {% include 'map.html' %}
+  </div>
+
+  <div class="top-contributors">
+    <div class="top-meta-reviewers">
+      <table class="highlight centered">
+        <thead class="custom-green-color-font">
+          <tr>
+            <th>Rank</th>
+            <th>Username</th>
+            <th>Meta-review Score</th>
+          </tr>
+        </thead>
+        <tbody>
+        {% for contrib in top_meta_review_users %}
+          <tr class="clickable-row" data-href="/meta-review/#{{ contrib.login }}">
+            <td>{{ contrib.rank }}</td>
+            <td>{{ contrib.login }}</td>
+            <td>{{ contrib.score|floatformat:0 }}</td>
+          </tr>
+        {% endfor %}{# for contrib in top_meta_review_users #}
+        </tbody>
+      </table>
+      <a href="{% url 'meta_review_data' %}" class="waves-effect waves-light btn leaderboards-btn">Contributors Meta-review</a>
+    </div>
+    <div class="top-gamifiers">
+      <table class="highlight centered">
+        <thead class="custom-green-color-font">
+          <tr>
+            <th>Rank</th>
+            <th>Username</th>
+            <th>Gamification Score</th>
+          </tr>
+        </thead>
+        <tbody>
+        {% for index, contrib in top_gamification_users %}
+          <tr class="clickable-row" data-href="/gamification/#{{ contrib.username }}">
+            <td>{{ index|add:"1" }}</td>
+            <td>{{ contrib.username }}</td>
+            <td>{{ contrib.score }}</td>
+          </tr>
+        {% endfor %}{# for index, contrib in top_gamification_users #}
+        </tbody>
+      </table>
+      <a href="{% url 'community-gamification' %}" class="waves-effect waves-light btn leaderboards-btn">Gamification leaderboard</a>
+    </div>
+  </div>
+
+  <div class="join-btn apply-flex center-content">
+    <a href="#" id="join" class="waves-effect waves-light btn-large">
+      <b>Want to join {{ org.name }}?</b>
+    </a>
+  </div>
+
+  <div class="activity-graph">
+    <div class="activity-graph-canvas">
+      <canvas id="canvas"></canvas>
+    </div>
+    <div class="input-field">
+      <select id="chart-type">
+        <option value="Month">Year</option>
+        <option value="Week">Month</option>
+        <option value="Day">Week</option>
+      </select>
+    </div>
+  </div>
+
+{% endblock %}
diff --git a/templates/map.html b/templates/map.html
new file mode 100644
index 00000000..60fcb77f
--- /dev/null
+++ b/templates/map.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+{% load staticfiles %}
+{# This is an auto-generated file, which is modified to support django-template syntax. #}
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Leaflet debug page</title>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {# Below stylesheets and scripts are being generated by `getorg`. Run #}
+    {#  build command to get these files #}
+    <link rel="stylesheet" href="{% static 'leaflet_dist/screen.css' %}">
+    <link rel="stylesheet" href="{% static 'leaflet_dist/MarkerCluster.css' %}">
+    <link rel="stylesheet" href="{% static 'leaflet_dist/MarkerCluster.Default.css' %}">
+    <script src="{% static 'leaflet_dist/leaflet.markercluster-src.js' %}"></script>
+    <script src="{% static 'org-locations.js' %}"></script>
+
+    <style>
+      #map {
+        width: 60%;
+        height: 300px;
+        margin: auto;
+        box-shadow: 0 0 25px 2px;
+      }
+      @media only screen and (max-width:750px){
+        #map {
+          width: 90%;
+        }
+      }
+    </style>
+
+  </head>
+  <body>
+    <div id="map"></div>
+    <script>
+      var tiles = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
+        {
+          maxZoom: 18,
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
+        }),
+      latlng = L.latLng(30, 10);
+      var map = L.map('map', {center: latlng, zoom: 0.7, layers: [tiles]});
+      var markers = L.markerClusterGroup({
+        showCoverageOnHover: false,
+        maxClusterRadius: 80
+      });
+      for (var i = 0; i < addressPoints.length; i++) {
+        var a = addressPoints[i];
+        var title = a[0];
+        var marker = L.marker(new L.LatLng(a[1], a[2]), { title: title });
+        marker.bindPopup(title);
+        markers.addLayer(marker);
+      }
+      map.addLayer(markers);
+      map.zoomIn();
+    </script>
+  </body>
+</html>
diff --git a/twitter/view_twitter.py b/twitter/view_twitter.py
deleted file mode 100644
index d6e54ff4..00000000
--- a/twitter/view_twitter.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from django.http import HttpResponse
-import requests
-import json
-import logging
-
-from community.git import get_org_name
-
-
-def index(request):
-    logger = logging.getLogger(__name__)
-    logger.info('this package is alive')
-    s = []
-
-    org_twitter_handle = org_name = get_org_name()
-
-    s.append('<link rel="shortcut icon" type="image/png" '
-             'href="../static/favicon.png"/>')
-
-    api_data_dump = json.loads(
-        requests.get('https://gci-leaders.netlify.com/data.json').content)
-    for item in api_data_dump:
-        if item['name'] == org_name:
-            org_twitter_handle = item['twitter_url'].split(
-                'twitter.com/')[-1]
-    if org_twitter_handle is not None:
-        s.append('<a class="twitter-timeline" data-height="1000" '
-                 'data-link-color="#2B7BB9" '
-                 'href="https://twitter.com/{twitter_handle}">'
-                 'Tweets by {twitter_handle}</a> <script async '
-                 'src="https://platform.twitter.com/widgets.js" '
-                 'charset="utf-8"></script>'.format(
-                     twitter_handle=org_twitter_handle))
-
-    return HttpResponse('\n'.join(s))