diff --git a/ippisite/ippidb/static/css/main.css b/ippisite/ippidb/static/css/main.css
index d7fdcbb8e7be243efef16d633e3f05d120465656..99c2eaa56f31963d5db3627659d4a52c3effbd9c 100644
--- a/ippisite/ippidb/static/css/main.css
+++ b/ippisite/ippidb/static/css/main.css
@@ -356,10 +356,47 @@ div.hidden {
 
 /* -- Home page choices -- */
 
-.background_choices {
-    margin: 40px;
+.compound_choices {
     position: relative;
     background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    text-align: center;
+    height: fit-content;
+    box-shadow:  0 3px 11px 0 rgb(0 0 0 / 20%);
+}
+
+.compound_background {
+    position: relative;
+    background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    text-align: center;
+    height: fit-content;
+}
+
+.compound_choices:hover{
+    background: #b1b6b8 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+}
+
+.pocket_choices {
+    position: relative;
+    background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    text-align: center;
+    height: fit-content;
+    box-shadow:  0 3px 11px 0 rgb(0 0 0 / 20%);
+}
+
+.pocket_choices:hover {
+    background: #cae6f0 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+}
+
+.pocket_background {
+    position: relative;
+    background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    text-align: center;
+    height: fit-content;
+}
+
+.icons {
+    padding: 10%;
+    font-size: 1.5em;
 }
 
 .choices_background {
@@ -448,6 +485,15 @@ div.hidden {
     display:block;
   }
 
+  .front-vertical-align {
+      padding-top: 80px;
+  }
+
+  .back-vertical-align {
+      padding-top: 25px;
+  }
+
+
 /* -- Breadcrumb -- */
 
 .breadNav {
@@ -1220,4 +1266,44 @@ div.hidden {
 
 .btn.float-right+.btn.float-right {
     margin-right: 5px
-}
\ No newline at end of file
+}
+
+/* Modal */
+
+.modal-xl {
+    width:  100%;
+    max-width:1200px;
+    height: fit-content;
+    max-height: 1200px;
+}
+
+.close_choices_modal {
+    margin: 0px !important;
+    right: 32px !important;
+    top: 32px !important;
+    width: 32px !important;
+    height: 32px !important;
+    opacity: 0.5;
+    border: none !important;
+    color: #495057 !important;
+    cursor: pointer;
+    float: right;
+    text-align: right;
+    font-size: 2em;
+    background-color: white !important;
+}
+
+.close_choices_modal:hover {
+    opacity: 1;
+}
+
+.align_modal {
+    display: inline-block;
+}
+
+.modal_choices_title {
+    float: left;
+    text-align: right;
+    font-family: "PlayfairDisplayReg";
+    font-size: 2em;
+}
diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js
index a8d3a4050bfc7231f04aacc9541fb56eda13f253..92952f7faadf3247cb36f6ef747b84edf0023059 100644
--- a/ippisite/ippidb/static/js/ippidb.js
+++ b/ippisite/ippidb/static/js/ippidb.js
@@ -277,4 +277,11 @@ var toggleCheckBox = function (id) {
     } else {
         queryUrl.changeSelection(id, null);
     }
-}
\ No newline at end of file
+}
+
+$(document).ready(function () {
+    $(".modalhref").click(function(e){
+        $(".modal").modal('hide');
+        window.open($(this).find("a").last()[0].href, '_self');
+    });
+});
\ No newline at end of file
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 623af9ee1cb1caf3f13a5965de423a752b023bbe..9aedefb5d98cf9665e662912d027f657b95616ce 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -99,7 +99,7 @@
                         <a href="{% url 'compound_list' %}">Query compounds</a>
                     </li>
                     <li>
-                        <a href="{% url 'cavities' %}">Query pockets</a>
+                        <a href="{% url 'cavities' %}">Query cavities</a>
                     </li>
                     <li>
                         <a href="{% url 'tutorials' %}">Tutorials</a>
diff --git a/ippisite/ippidb/templates/index.html b/ippisite/ippidb/templates/index.html
index 8de21d8751e5894bcdf28b8e5d1d17edf18e6938..13aef5048c3086146510ca229299cb76e6ef8252 100644
--- a/ippisite/ippidb/templates/index.html
+++ b/ippisite/ippidb/templates/index.html
@@ -65,207 +65,265 @@
 										<a class="next" onclick='plusSlides(1)'>&#10095;</a>
 									</div>
 								</div>
-								<div class="background_choices">
-								<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
 
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
-
-												<div class="flip-card-front">
-													<a href="/compounds">
-														<div style="top:30%; left:35%; position:absolute;">
-															<i class="fas fa-search fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Query</p>
-														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="/compounds">
-														<div style="padding-top: 3.5em;">
-															<div class="choices_title">
-																Query
-															</div>
-															<div class="choices_description">Build sophisticated
-																queries
-																and
-																interrogate iPPI-DB using a large catalog of
-																criteria.
-															</div>
-														</div>
-													</a>
-												</div>
-											</div>
-										</div>
+								<div class="row mt-4">
+									<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
+									<div class="compound_choices" data-toggle="modal" data-target="#compoundModal">
+									    <div class="icons">
+											<i style="font-size: 5em;" class="icon icon-conceptual icon-chemical"></i>
+											<div class="choices_title">Compounds</div>
+									    </div>
 									</div>
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
-												<div class="flip-card-front">
-													<a href="/about-pca">
-														<div style="top:30%; left:10%; position:absolute;">
-															<i class="far fa-compass fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Navigate the PPI chemical space</p>
-														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="/about-pca">
-														<div style="padding-top: 3.5em;">
-															<div class="choices_title">
-																Navigate the PPI chemical space
-															</div>
-															<div class="choices_description">Explore iPPI-DB
-																compounds
-																by
-																navigating within an interactive Principal
-																Component
-																Analysis
-																individual map.
-															</div>
-														</div>
-													</a>
-												</div>
-											</div>
-										</div>
 									</div>
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
-												<div class="flip-card-front">
-													<a href="/about-le-lle">
-														<div style="top:30%; left:20%; position:absolute;">
-															<i class="fas fa-snowboarding fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Surf the efficiency plot</p>
-														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="/about-le-lle">
-														<div style="padding-top: 3.5em;">
-															<div class="choices_title">
-																Surf the efficiency plot
-															</div>
-															<div class="choices_description">Select iPPI-DB
-																compounds using
-																an
-																interactive efficiency plot that highlights their
-																ligand
-																(LE)
-																and lipophilic efficiencies (LLE).
-															</div>
-														</div>
-													</a>
-												</div>
-											</div>
+									<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
+									<div class="pocket_choices"  data-toggle="modal" data-target="#pocketModal">
+										<div class="icons">
+											<i style="font-size: 5em;" class="icon icon-conceptual icon-structures-3d"></i>
+											<div class="choices_title">Pockets</div>
 										</div>
 									</div>
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
-
-												<div class="flip-card-front">
-													<a href="/contribute">
-														<div style="top:30%; left:35%; position:absolute;">
-															<i class="fas fa-plus fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Contribute</p>
-														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="/contribute">
-														<div style="padding-top: 2.5em; ">
-															<div class="choices_title">
-																Contribute
-															</div>
-															<div class="choices_description">You have read or written a
-																publication describing new iPPI compounds. Let it be a
-																benefit
-																for the whole PPI community by using our intuitive
-																Contribute
-																process. You are just few clicks away from adding new
-																precious
-																data to iPPI-DB.
-															</div>
-														</div>
-													</a>
-												</div>
-											</div>
-										</div>
 									</div>
 								</div>
-								<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
+								<div class="modal fade" id="compoundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+									<div class="modal-dialog modal-xl" role="document">
+									  <div class="modal-content">
+										<div class="modal-header align_modal">
+											<div class="modal_choices_title">Compounds</div>
+										    <button type="button" class="close_choices_modal" data-dismiss="modal" aria-label="Close">&times;</button>
+										</div>
+										<div class="modal-body">
+											<div class="row mt-4">
+											<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+											<div class="compound_background">
+												<div class="row ml-2 mr-2" >
+													<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
 
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
 
-												<div class="flip-card-front">
-													<a href="{% url 'cavities' %}">
-														<div style="top:30%; left:15%; position:absolute;">
-															<i class="fas fa-search fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Interrogate pockets database</p>
+																<div class="flip-card-front">
+																	<a href="/compounds">
+																	    <div class="front-vertical-align">
+																			<i class="fas fa-search fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Query</p>
+																	    </div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="/compounds">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Query
+																			</div>
+																			<div class="choices_description">Build sophisticated
+																				queries
+																				and
+																				interrogate iPPI-DB using a large catalog of
+																				criteria.
+																			</div>
+																		</div>
+																	</a>
+																</div>
+																
+															</div>
 														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="{% url 'cavities' %}">
-														<div style="padding-top: 3.5em;">
-															<div class="choices_title">
-																Interrogate pockets database
+													</div>
+													<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
+																<div class="flip-card-front">
+																	<a href="/about-pca">
+																		<div class="front-vertical-align">
+																			<i class="far fa-compass fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Navigate the PPI chemical space</p>
+																		</div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="/about-pca">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Navigate the PPI chemical space
+																			</div>
+																			<div class="choices_description">Explore iPPI-DB
+																				compounds
+																				by
+																				navigating within an interactive Principal
+																				Component
+																				Analysis
+																				individual map.
+																			</div>
+																		</div>
+																	</a>
+																</div>
 															</div>
-															<div class="choices_description">
-																Interrogate pockets database and explore pockets 
-																descriptors, predictive interactibility and 
-																druggability, tridimensional structures...
+														</div>
+													</div>
+													<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
+																<div class="flip-card-front">
+																	<a href="/about-le-lle">
+																		<div class="front-vertical-align">
+																			<i class="fas fa-snowboarding fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Surf the efficiency plot</p>
+																		</div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="/about-le-lle">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Surf the efficiency plot
+																			</div>
+																			<div class="choices_description">Select iPPI-DB
+																				compounds using
+																				an
+																				interactive efficiency plot that highlights their
+																				ligand
+																				(LE)
+																				and lipophilic efficiencies (LLE).
+																			</div>
+																		</div>
+																	</a>
+																</div>
 															</div>
 														</div>
-													</a>
+													</div>
+													<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
+
+																<div class="flip-card-front">
+																	<a href="/contribute">
+																		<div class="front-vertical-align">
+																			<i class="fas fa-plus fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Contribute</p>
+																		</div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="/contribute">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Contribute
+																			</div>
+																			<div class="choices_description">You have read or written a
+																				publication describing new iPPI compounds. Let it be a
+																				benefit
+																				for the whole PPI community by using our intuitive
+																				Contribute
+																				process. You are just few clicks away from adding new
+																				precious
+																				data to iPPI-DB.
+																			</div>
+																		</div>
+																	</a>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
+											</div>
+											</div>
 										</div>
-									</div>
-									<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
-										<div class="choices_background flip-card">
-											<div class="flip-card-inner">
-												<div class="flip-card-front">
-													<a href="{% url 'networks' %}">
-														<div style="top:30%; left:15%; position:absolute;">
-															<i class="far fa-compass fa-4x"></i>
-															<p
-																style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
-																Navigate the PPI pocketome</p>
-														</div>
-													</a>
-												</div>
-												<div class="flip-card-back">
-													<a href="{% url 'networks' %}">
-														<div style="padding-top: 3.5em;">
-															<div class="choices_title">
-																Navigate the PPI pocketome
+								      </div>
+								   </div>
+							    </div>
+								<div class="modal fade" id="pocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+									<div class="modal-dialog modal-xl" role="document">
+									  <div class="modal-content">
+										<div class="modal-header align_modal">
+										  <div class="modal_choices_title">Pockets</div>
+										  <button type="button" class="close_choices_modal" data-dismiss="modal" aria-label="Close">&times;</button>
+										</div>
+										<div class="modal-body">
+											<div class="row mt-4">
+											<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+											<div class="pocket_background">
+												<div class="row ml-2 mr-2">
+													<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6" style="padding: 10px;">
+				
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
+				
+																<div class="flip-card-front">
+																	<a href="{% url 'cavities' %}">
+																		<div class="front-vertical-align">
+																			<i class="fas fa-search fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Interrogate pockets database</p>
+																		</div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="{% url 'cavities' %}">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Interrogate pockets database
+																			</div>
+																			<div class="choices_description">
+																				Interrogate pockets database and explore pockets 
+																				descriptors, predictive interactibility and 
+																				druggability, tridimensional structures...
+																			</div>
+																		</div>
+																	</a>
+																</div>
 															</div>
-															<div class="choices_description">Explore iPPI-DB 
-																pocketome by navigating 
-																within an interactive network.
+														</div>
+													</div>
+													<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6" style="padding: 10px;">
+														<div class="choices_background flip-card modalhref" style="height: 300px">
+															<div class="flip-card-inner">
+																<div class="flip-card-front">
+																	<a href="{% url 'networks' %}">
+																		<div class="front-vertical-align">
+																			<i class="far fa-compass fa-4x"></i>
+																			<p
+																				style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
+																				Navigate the PPI pocketome</p>
+																		</div>
+																	</a>
+																</div>
+																<div class="flip-card-back">
+																	<a href="{% url 'networks' %}">
+																		<div class="back-vertical-align">
+																			<div class="choices_title">
+																				Navigate the PPI pocketome
+																			</div>
+																			<div class="choices_description">Explore iPPI-DB 
+																				pocketome by navigating 
+																				within an interactive network.
+																			</div>
+																		</div>
+																	</a>
+																</div>
 															</div>
 														</div>
-													</a>
+													</div>
 												</div>
 											</div>
+											</div>
+											</div>
 										</div>
 									</div>
-								</div>
-							    </div>
+								 </div>
+							  </div>
+
+							</div>
+						</div>
+
 								<div>
 									<div class="aklgmt_title">
 										Aknowledgments