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..f8b46e9c 100644
--- a/.moban.yaml
+++ b/.moban.yaml
@@ -16,6 +16,7 @@ packages:
   - 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/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..c03de2e2 100644
--- a/community/urls.py
+++ b/community/urls.py
@@ -5,12 +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
@@ -87,18 +85,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',
diff --git a/community/views.py b/community/views.py
index 595c02ed..d09ba0cf 100644
--- a/community/views.py
+++ b/community/views.py
@@ -8,21 +8,106 @@
     get_org_name,
     get_owner,
     get_upstream_deploy_url,
+    get_remote_url
 )
+from data.models import Team, Contributor
+
+
+def initialize_org_context_details():
+    org_name = get_org_name()
+    org_details = {
+        'name': org_name,
+        'blog_url': 'https://blog.{}.io/'.format(org_name),
+        'twitter_url': 'https://twitter.com/{}_io/'.format(org_name),
+        'facebook_url': 'https://www.facebook.com/{}Analyzer'.format(
+            org_name),
+        'repo_url': get_remote_url().href,
+        'docs': 'http://{}.io/docs'.format(org_name),
+        'newcomer_docs': 'http://{}.io/newcomer'.format(org_name),
+        'coc': 'http://{}.io/coc'.format(org_name),
+        'logo_url': ('https://api.{}.io/en/latest/_static/images/'
+                     '{}_logo.svg'.format(org_name, org_name)),
+        'gitter_chat': 'https://gitter.im/{}/{}/'.format(org_name,
+                                                         org_name),
+        'github_core_repo': 'https://github.com/{}/{}/'.format(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 = get_org_name()
+        teams = [
+            '{} newcomers'.format(org_name),
+            '{} developers'.format(org_name),
+            '{} admins'.format(org_name)
+        ]
+        team_details = {}
+        for team in teams:
+            team_objs = [Team.objects.get(name=team), ]
+            contributors = Contributor.objects.filter(teams__in=team_objs)
+            team_details[team] = contributors.count()
+        return team_details
+
+    def get_quote_of_the_day(self):
+        import requests
+        qod = requests.get('http://quotes.rest/qod?category=inspire')
+        qod_data = qod.json()
+        if qod.status_code == 429:
+            return None
+        return {
+            'quote': qod_data['contents']['quotes'][0]['quote'],
+            'author': qod_data['contents']['quotes'][0]['author'],
+        }
+
+    def get_top_meta_review_users(self, count):
+        from meta_review.models import Participant
+        participants = Participant.objects.all()[:count]
+        for contrib in participants:
+            contrib.score = int(contrib.score)
+        return participants
 
-        print('Running on Travis: {}, build link: {}'.format(
-            context['isTravis'],
-            context['travisLink']))
+    def get_top_gamification_users(self, count):
+        from gamification.models import Participant
+        return enumerate(Participant.objects.all()[:count])
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        context['org']['team_details'] = dict(self.get_team_details())
+        org_name = context['org']['name']
+        about_org = ('{org_name} (always spelled with a lowercase c!) is one'
+                     ' of the welcoming open-source organizations for'
+                     ' 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.'
+                     ' {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'
+                     ' 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.'.format(org_name=org_name))
+        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..f49162ae
--- /dev/null
+++ b/data/management/commands/create_org_cluster_map_and_activity_graph.py
@@ -0,0 +1,119 @@
+import logging
+import json
+import getorg
+import os
+
+from django.core.management.base import BaseCommand
+
+from data.models import Contributor
+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):
+        logger = logging.getLogger(__name__)
+        output_dir = options.get('output_dir')
+
+        if not output_dir:
+            logger.debug('output_dir arg not provided! Setting output_dir'
+                         ' to cluster_map/')
+            output_dir = 'cluster_map'
+
+        class Location:
+
+            def __init__(self, longitude, latitude):
+                self.longitude = longitude
+                self.latitude = latitude
+
+        org_location_dict = {}
+
+        for contrib in Contributor.objects.all():
+            if not contrib.login.startswith('testuser') and contrib.location:
+                user_location = json.loads(contrib.location)
+                location = Location(user_location['longitude'],
+                                    user_location['latitude'])
+                org_location_dict[contrib.login] = location
+                logger.debug('{} location {} added on map'.format(
+                    contrib.login, user_location))
+        getorg.orgmap.output_html_cluster_map(org_location_dict,
+                                              folder_name=output_dir)
+
+        self.move_and_make_changes_in_files(output_dir)
+
+        # Fetch data for activity graph to be displayed on home-page
+        activity_json('static/activity-data.js')
+
+    def move_and_make_changes_in_files(self, output_dir):
+        # Move leaflet_dist folder to static folder
+        leaflet_source_path = '{}/{}/leaflet_dist/'.format(os.getcwd(),
+                                                           output_dir)
+        leaflet_destination_path = '{}/{}/leaflet_dist/'.format(os.getcwd(),
+                                                                'static')
+        os.renames(leaflet_source_path, leaflet_destination_path)
+        # Move org_locations.js to static folder
+        locations_source_path = '{}/{}/org-locations.js'.format(os.getcwd(),
+                                                                output_dir)
+        locations_destination_path = '{}/{}/org-locations.js'.format(
+            os.getcwd(), 'static')
+        os.rename(locations_source_path, locations_destination_path)
+        # Change map.html to support django
+        with open('{}/map.html'.format(output_dir)) as f:
+            django_supported_htmls = []
+            lines = f.readlines()
+            for index in range(len(lines)):
+                line = lines[index].strip()
+                if line.__contains__('<html>'):
+                    django_supported_htmls.append('{% load staticfiles %}\n')
+                    django_supported_htmls.append(line+'\n')
+                elif line.__contains__('</head>'):
+                    adjust_prop = '''
+                    <style>
+                        #map {
+                        width: 60%;
+                        height: 300px;
+                        margin: auto;
+                        box-shadow: 0px 0px 25px 2px;
+                        }
+                        @media only screen and (max-width:750px){
+                            #map {
+                                width: 90%
+                            }
+                        }
+                    </style>\n
+                    '''
+                    meta_charset = '<meta charset="utf-8">'
+                    adjust_prop = adjust_prop.strip().replace('    ', '')
+                    django_supported_htmls.insert(6, meta_charset+'\n')
+                    django_supported_htmls.append(adjust_prop+'\n')
+                    django_supported_htmls.append(line+'\n')
+                elif line.__contains__('https://'):
+                    line = line.replace('https:', '').replace(' />', '>')
+                    django_supported_htmls.append(line.strip()+'\n')
+                elif line.__contains__('<link '):
+                    line = line.replace('href="', 'href="{% static \'')
+                    line = line.replace('.css', '.css\' %}').replace(' />', '>')
+                    django_supported_htmls.append(line+'\n')
+                elif line.__contains__('<script '):
+                    line = line.replace('src="', 'src="{% static \'')
+                    line = line.replace('.js', '.js\' %}')
+                    if line.__contains__(' type="text/javascript"'):
+                        line = line.replace(' type="text/javascript"', '')
+                    django_supported_htmls.append(line+'\n')
+                elif line.__contains__('Mouse over') or len(line) == 0:
+                    pass
+                else:
+                    django_supported_htmls.append(line+'\n')
+        # Add map.html to templates folder
+        html_map_path = '{}/{}/map.html'
+        html_map_source_path = html_map_path.format(os.getcwd(),
+                                                    output_dir)
+        html_map_destination_path = html_map_path.format(os.getcwd(),
+                                                         'templates')
+        os.remove(html_map_source_path)
+        with open(html_map_destination_path, 'w+') as f:
+            f.writelines(django_supported_htmls)
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/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..509668a8
--- /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: 0px -5px 15px black;
+}
+
+@media only screen and (min-width: 768px) {
+    .community-header-image img{
+        height: 335px;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .activity-graph {
+       display: none;
+    }
+    .join-btn a.btn-large {
+        margin-bottom: 20px;
+    }
+}
+
+.join-btn a.btn-large {
+    min-width: 300px;
+    width: 30%;
+    margin-top: 3%;
+    box-shadow: 0px 0px 25px 2px black;
+    border-radius: 100px;
+    background-color: #edf5af;
+    color: #636060;
+    text-transform: full-width;
+    font-size: 1em;
+    letter-spacing: 0px;
+    padding: 0% 3%;
+}
+
+.leaderboards-btn {
+    float: right;
+    width: 100%;
+    border-bottom-right-radius: 1000px;
+    border-bottom-left-radius: 1000px;
+}
+
+.top-contribuors {
+    -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: 0px 0px 25px 2px;
+    font-size: medium;
+}
+
+@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%
+    }
+}
+
+.top-meta-reviewers {
+    background-color: #fef200;
+}
+
+.top-gamifiers {
+    background-color: #ee8940;
+}
+
+.apply-flex-center {
+    display: flex;
+    justify-content: center;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+.organization_map {
+    text-align: center;
+    padding: 2% 0%;
+}
+
+.quote-of-day div.quote{
+    width: 70%;
+}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 00000000..95c3d787
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,166 @@
+.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;
+}
+
+.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;
+}
+
+.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: 0px -5px 15px black;
+    margin-top: 3%;
+}
+
+.page-footer .footer-copyright {
+    background-color: #263238;
+}
+
+.inline-contents {
+    display: inline-flex;
+}
+
+.search-field {
+    border-radius: 100px;
+    box-shadow: 0px 0px 25px 2px black;
+    color: #454343;
+    background-color: #edf5af;
+    padding: 0px 20px;
+    flex-flow: row;
+    margin: auto;
+    margin-left: 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..5f771f6a
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,96 @@
+/* globals Chart */
+$(document).ready(function(){
+    $('select').formSelect();
+
+    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').on('change', function(){
+        updateChart($('#chart-type').val());
+        });
+
+    updateChart($('#chart-type').val());
+});
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 00000000..d42fa017
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,22 @@
+$(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();
+
+    $(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..358d8332
--- /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' %}">
+        </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..7aa3e618 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' %}">
+  </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">
+      <h3 style="padding-right: 15px">~</h3>
+      <div class="quote">
+        <p style="margin-bottom: 0px">{{ quote_details.quote }}</p>
+        <h6 style="margin-top: 0px">- {{ 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-center 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-contribuors">
+    <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>
+            <td>{{ contrib.rank }}</td>
+            <td>{{ contrib.login }}</td>
+            <td>{{ contrib.score }}</td>
+          </tr>
+        {% endfor %}{# for contrib in top_meta_review_users #}
+        </tbody>
+      </table>
+      <a href="meta-review/" 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>
+            <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="gamification/" class="waves-effect waves-light btn leaderboards-btn">Gamification leaderboard</a>
+    </div>
+  </div>
+
+  <div class="join-btn apply-flex-center">
+    <a href="#!" id="join" class="waves-effect waves-light btn-large">
+      <b>Want to join our community?</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 %}