diff --git a/page.html b/page.html
index e458458..f5bfb5f 100644
--- a/page.html
+++ b/page.html
@@ -10,10 +10,308 @@
 		<link rel="alternate" type="text/plain" title="OBO-format representation of EDAM" href="http://edamontology.org/EDAM.obo"/>
 		<link rel="alternate" type="text/csv; charset=utf-8" title="CSV representation of EDAM" href="http://edamontology.org/EDAM.csv"/>
 		<link rel="alternate" type="text/tab-separated-values; charset=utf-8" title="TSV representation of EDAM" href="http://edamontology.org/EDAM.tsv"/>
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
 		<script src="document.min.js" userjs="user.js" icon="favicon.ico" id="DOC" onerror="var l=document.createElement('link'),s=document.createElement('script');l.rel='stylesheet';l.href='http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css';l.id='bootstrap.css';l.auto='1';document.head.insertBefore(l,document.getElementById('DOC'));s.src='http://aplib.github.io/document.min.js';document.head.appendChild(s);"></script>
+	  <style>
+
+			.navbar-default {
+				height: 55px;
+				}
+
+			.navbar-brand {
+        font-size: 1.5em;
+				}
+
+      .navbar{
+        margin-left: 30px;
+        margin-right: 30px;
+        position: -webkit-sticky;
+	      position: sticky;
+	      top: 0;
+        overflow: fixed;
+      }
+  
+      .navbar-nav{
+        font-size: 1.5em;
+      }
+      .navbar-collapse{
+        background-color: whitesmoke;
+      }
+
+      @media (max-width: 1200px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+        top: 0;
+        border-width: 0 0 1px;
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+        margin-top: 7.5px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+        display:block !important;
+    }
+}
+
+    footer{
+	position: fixed;
+	bottom: 0;
+}
+
+@media (max-height:800px){
+	footer { position: static; }
+	header { padding-top:40px; }
+}
+
+
+.footer-distributed{
+	background-color: whitesmoke;
+	box-sizing: border-box;
+	width: 100%;
+	text-align: left;
+	font: bold 16px sans-serif;
+	padding: 50px 50px 60px 50px;
+	margin-top: 80px;
+}
+
+.footer-distributed .footer-left,
+.footer-distributed .footer-center,
+.footer-distributed .footer-right{
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* Footer left */
+
+
+.footer-distributed .footer-left{
+	width: 30%;
+}
+.footer-distributed a{
+  color: darkblue;
+}
+
+.footer-distributed h3{
+	color:  black;
+	font: normal 36px 'Cookie', cursive;
+	margin: 0;
+}
+
+/* The company logo */
+
+.footer-distributed .footer-left img{
+	width: 30%;
+}
+
+.footer-distributed h3 span{
+	color:  darkblue;
+  font-weight: bold;
+}
+
+/* Footer links */
+
+.footer-distributed .footer-links{
+	color:  black;
+	margin: 20px 0 12px;
+}
+
+.footer-distributed .footer-links a{
+	display:inline-block;
+	line-height: 1.8;
+	text-decoration: none;
+	color:  inherit;
+}
+
+.footer-distributed .footer-company-name{
+	color:  #8f9296;
+	font-size: 14px;
+	font-weight: normal;
+	margin: 0;
+}
+
+/* Footer Center */
+
+.footer-distributed .footer-center{
+	width: 35%;
+}
+
+
+.footer-distributed .footer-center i{
+	background-color:  #33383b;
+	color: #ffffff;
+	font-size: 25px;
+	width: 38px;
+	height: 38px;
+	border-radius: 50%;
+	text-align: center;
+	line-height: 42px;
+	margin: 10px 15px;
+	vertical-align: middle;
+}
+
+.footer-distributed .footer-center i.fa-envelope{
+	font-size: 17px;
+	line-height: 38px;
+}
+
+.footer-distributed .footer-center p{
+	display: inline-block;
+	color: black;
+	vertical-align: middle;
+	margin:0;
+}
+
+.footer-distributed .footer-center p span{
+	display:block;
+	font-weight: normal;
+	font-size:14px;
+	line-height:2;
+}
+
+.footer-distributed .footer-center p a{
+	color:  darkblue;
+	text-decoration: none;
+}
+
+
+/* Footer Right */
+
+.footer-distributed .footer-right{
+	width: 30%;
+}
+
+.footer-distributed .footer-company-about{
+	line-height: 20px;
+	color:  black;
+	font-size: 13px;
+	font-weight: normal;
+	margin: 0;
+}
+
+.footer-distributed .footer-company-about span{
+	display: block;
+	color:  black;
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.footer-distributed .footer-icons{
+	margin-top: 25px;
+}
+
+.footer-distributed .footer-icons a{
+	display: inline-block;
+	width: 35px;
+	height: 35px;
+	cursor: pointer;
+	background-color:  #33383b;
+	border-radius: 2px;
+
+	font-size: 20px;
+	color: #ffffff;
+	text-align: center;
+	line-height: 35px;
+
+	margin-right: 3px;
+	margin-bottom: 5px;
+}
+
+/* Here is the code for Responsive Footer */
+/* You can remove below code if you don't want Footer to be responsive */
+
+
+@media (max-width: 880px) {
+
+	.footer-distributed .footer-left,
+	.footer-distributed .footer-center,
+	.footer-distributed .footer-right{
+		display: block;
+		width: 100%;
+		margin-bottom: 40px;
+		text-align: center;
+	}
+
+	.footer-distributed .footer-center i{
+		margin-left: 0;
+	}
+
+  .mail{
+    color: black;
+  }
+
+  .fa-envelope a{
+    color: darkblue;
+  }
+
+}
+		
+		</style>
 	</head>
 	<body>
 
+	<nav class="navbar navbar-default" >
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">EDAM</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="#Viewing">Viewing</a></li>
+		<li><a href="#Download">Downloads</a></li>
+		<li><a href="#Documentation">Documentation</a></li>
+		<li><a href="#Scope">Scope</a></li>
+		<li><a href="#Architecture">Architecture</a></li>
+
+ 
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><button type="button" href="#Documentation" class="btn btn-default navbar-btn"><a href="#Contacts">CONTACT US</a></button></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Credentials<span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#License">Licence</a></li>
+            <li><a href="#Publications">Publications</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
+
+
 <!--header-panel
 # EDAM - Ontology of bioscientific data analysis
 -->
@@ -143,8 +441,61 @@
 -->
 
 <!--footer-panel
-<small>Last update: 2021-Mar-27</small>
+<small>Last update: 2021-April-24</small>
 -->
+<footer class="footer-distributed">
+
+  <div class="footer-left">
+    <!-- <img src="img/logo.png"> -->
+    <h3><span>EDAM</span></h3>
+
+    <p class="footer-links">
+      <a href="#">Home</a>
+      |
+      <a href="https://edamontologydocs.readthedocs.io/en/latest/index.html">Documentation</a>
+      |
+      <a href="#Download">Downloads</a>
+      <br>
+      <br>
+      <a href="#">Mailing Lists:</a>
+      <div>
+        <i class="fa fa-envelope"></i>
+        <a href="http://elixirmail.cbs.dtu.dk/mailman/listinfo/edam-announce ">Announcements</a>
+        <br>
+        <br>
+        <i class="fa fa-envelope"></i>
+        <a href="http://elixirmail.cbs.dtu.dk/mailman/listinfo/edam">General Discussions</a>
+      </div>
+    </p>
+  </div>
+
+  <div class="footer-center">
+    <br>
+    <div>
+      <i class="fa fa-envelope"></i>
+      <p><a href="mailto:edam@elixir-dk.org">edam@elixir-dk.org</a></p>
+      <br>
+      <a href="https://twitter.com/edamontology"><i class="fa fa-twitter"></i>Twitter</a>
+      <br>
+      <a href="https://github.com/edamontology"><i class="fa fa-github"></i>GitHub</a>
+    </div>
+  </div>
+  <div class="footer-right">
+    <br>
+    <br>
+    <p class="footer-company-about">
+      <span>About the company</span>
+      EDAM is a comprehensive ontology of well-established, familiar concepts that are prevalent within computational biology,
+      bioinformatics, and bioimage informatics.
+    </p>
+      <br>
+      <br>
+      <p class="footer-company-name">CC BY-SA 4.0</p>
+    </div>
+  </div>
+</footer>
+</body>
+</html>
 
 		<noscript><div class="alert alert-warning">This website requires your browser to have JavaScript enabled.</div></noscript>
 	</body>