diff --git a/app/fantasy_cricket/static/fonts/hackerspace.ttf.REMOVED.git-id b/app/fantasy_cricket/static/fonts/hackerspace.ttf.REMOVED.git-id
new file mode 100644
index 00000000..3f8da77c
--- /dev/null
+++ b/app/fantasy_cricket/static/fonts/hackerspace.ttf.REMOVED.git-id
@@ -0,0 +1 @@
+53fe1c229697eae81ec113266d66ec19b704b6f1
\ No newline at end of file
diff --git a/app/fantasy_cricket/static/icon.png b/app/fantasy_cricket/static/icon.png
new file mode 100644
index 00000000..a81e1258
Binary files /dev/null and b/app/fantasy_cricket/static/icon.png differ
diff --git a/app/fantasy_cricket/static/styles/style.css b/app/fantasy_cricket/static/styles/style.css
index 0c514a00..fb294015 100644
--- a/app/fantasy_cricket/static/styles/style.css
+++ b/app/fantasy_cricket/static/styles/style.css
@@ -1,4 +1,4 @@
-/* This folloeing style sheet is not being used  */
+/* This following style sheet is not being used  */
 body {
  background-image: url("../images/background1.jpg");
 }
diff --git a/app/fantasy_cricket/static/styles/style1.css b/app/fantasy_cricket/static/styles/style1.css
index 1983bd9c..c714e50c 100644
--- a/app/fantasy_cricket/static/styles/style1.css
+++ b/app/fantasy_cricket/static/styles/style1.css
@@ -11,7 +11,7 @@
   height: 100%;
   filter: blur(2px);
 }
-
+ 
 .content{
   position: fixed;
   left: 0;
@@ -30,7 +30,8 @@ h1 {
     margin-bottom: 1em;
 }
 
-.line1 {  
+.line1 { 
+  margin-top: 4em; 
   margin-left: 2em;
   display: grid;
   grid-template-columns: auto auto auto auto auto;
@@ -39,16 +40,15 @@ h1 {
   padding: 10px;
   text-align: center;
   font-size: large;
-  font-weight:20px;
+  font-weight:600;
 }
 
 .line2 {  
-  margin-top: 4em;
   display: grid;
   grid-template-columns: auto auto auto auto auto auto;
   text-align: center;
   font-size: large;
-  font-weight:40px;
+  font-weight:600;  
 }
 
 p {
@@ -84,4 +84,50 @@ figcaption {
   padding-bottom: 30px;
   margin-left: 40px;
   margin-right: 40px;
+}
+
+.fix{
+  display: none;
+}
+
+
+@media only screen and (max-width: 1100px) {
+  .fix{
+    display: inline;
+  }
+  h1 {
+    font-size: 20px;
+  }
+  .button {
+    line-height:20px;
+    font-size: 15px;
+  }
+  figcaption {
+    font-size: 10px; 
+  }
+  .whiteCard{
+    padding: 10px;
+    padding-top:10px ;
+    padding-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .line1 {  
+    margin-top: 1em; 
+    margin-left: 0px;
+    grid-row-gap: 0px;
+    grid-gap:0px;
+    padding: 0px;
+    font-weight:600;
+  }
+  
+  .line2 {  
+    margin-top: 0em;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto;
+    text-align: center;
+    font-size: large;
+    font-weight:600;
+  }
 }
\ No newline at end of file
diff --git a/app/fantasy_cricket/static/styles/style2.css b/app/fantasy_cricket/static/styles/style2.css
index fd8d13d8..9b79e21c 100644
--- a/app/fantasy_cricket/static/styles/style2.css
+++ b/app/fantasy_cricket/static/styles/style2.css
@@ -13,13 +13,12 @@ body {
     margin-left: 20px;
     margin-right: 20px;
 }
-
+  
 .container{
     display: flex;
     flex-direction: row;
     justify-content: center;
     border-radius: 5px;
-  
 }
 
 .space{
@@ -77,4 +76,52 @@ body {
 .team2{
     height:25px;
     width: 25px;
+}
+#grey{
+    width: 100%; 
+	position: fixed;
+	height:100%;
+	background-color: rgb(0, 0, 0,0.9);
+	top:0%;
+	left:0%;
+	display: none;
+}
+#loading{
+    width: 250px; 
+    position: fixed;
+    height:auto;
+	top:30%;
+	left:40%;
+	display: none;
+}
+
+@media only screen and (max-width: 1100px) {
+    #loading{
+        width: 150px;
+        top:30%;
+        left:40%;
+    }
+} 
+
+@media only screen and (max-width: 600px) {
+    #loading{
+        width: 150px;
+        top:30%;
+        left:30%;
+    }
+    .container{
+        flex-direction: column;
+    }
+    .heading{
+        font-size: 20px;
+    }
+    .content{
+        font-size: 15px;
+        background-color:rgb(255,255,255,0.9);
+        padding: 10px;
+        padding-top:5px ;
+        padding-bottom: 5px;
+        margin-left: 30px;
+        margin-right: 30px;
+    }
 }
\ No newline at end of file
diff --git a/app/fantasy_cricket/templates/Playing_11.html b/app/fantasy_cricket/templates/Playing_11.html
index c0f034fd..5647a46c 100644
--- a/app/fantasy_cricket/templates/Playing_11.html
+++ b/app/fantasy_cricket/templates/Playing_11.html
@@ -17,6 +17,9 @@
 <html>
 <head>
 	<title>Choose your playing 11</title>
+	<meta content="width=device-width, initial-scale=1" name="viewport">
+	<!-- Icon that is visible on the tab -->
+    <link rel="icon" href="../static/icon.png">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 	</script>
 	<link
@@ -53,9 +56,9 @@ <h4 class="heading">
 			</div>
 
 			<div class="space"></div>
-
+			<br>
+			
 			<div class="content">
-		
 				<table>
 					<h4 class="heading">
 						{{teams[1]}}
@@ -75,27 +78,14 @@ <h4 class="heading">
 			
 
 		</div>
-		
+
+		<br>
+
 		<input type="submit" class="button" id="submitButton" name="Confirm"></input>
 		</form>
 		
-		<div id="grey" style="
-		width: 100%; 
-		position: fixed;
-		height:100%;
-		background-color: rgb(0, 0, 0,0.9);
-		top:0%;
-		left:0%;
-		display: none;
-		">
-			<img src="../static/loading.gif" alt="Loading" 
-			id="loading"
-			style="width: 300px; position: fixed;
-			height:auto;
-			top:30%;
-			left:40%;
-			display: none;
-			">
+		<div id="grey">
+			<img src="../static/loading.gif" alt="Loading" id="loading">
 			<br><br>
 			<center>
 				<h2 style="color:white; font-size:40px">Loading....</h2>
diff --git a/app/fantasy_cricket/templates/index.html b/app/fantasy_cricket/templates/index.html
index 449f5624..5340b9d4 100644
--- a/app/fantasy_cricket/templates/index.html
+++ b/app/fantasy_cricket/templates/index.html
@@ -29,9 +29,15 @@
       Fantasy-cricket Prediction
     </title>
     <meta name="description" content="A simple website to help you choose your playing 11 in your fantasy cricket game">
+    <!-- Icon that is visible on the tab -->
+    <link rel="icon" href="../static/icon.png">
     <!-- CDN for fontawesome library  -->
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
     <style>
+      @font-face {
+        font-family: hackerspace;
+        src: url(../static/fonts/hackerspace.ttf);
+      }
       .button {
         background          : linear-gradient(to bottom, #081482, #004e92);
         border              : none;
@@ -86,6 +92,7 @@
         background          : linear-gradient(to bottom, #000428, #004e92);
         color               : rgb(240, 234, 234);
         margin              : -10px;
+        font-size           : 50px;
       }
       .reportBox{
         background-color:  #131314;
@@ -103,6 +110,8 @@
       flex-direction: row;
       align-content: space-around;
       padding: 10px;
+      padding-left:30px ;
+      padding-right:30px ;
       bottom: 0;
       position: relative;
     }
@@ -123,8 +132,44 @@
     .content {
       font-size: 20px;
       font-weight: 500;
+      font-family: hackerspace;
+      letter-spacing: 1px;
       color: rgb(100, 166, 252);
     }
+
+    @media only screen and (max-width: 1100px) {
+      .footer{
+        padding-left:15px;
+        padding-right:15px;
+      }
+      .footerSpace {
+        width: 460px;
+      }
+      .card{
+        font-size: 30px;
+        width: 260px;
+      }
+      .header{
+        font-size: 20px;
+      }
+      .content{
+          font-size: 15px;
+      }
+      .footerIcon{
+          font-size: 17px;
+      }
+      .reportBox{
+        padding: 5px;
+        padding-top:10px ;
+        padding-bottom: 10px;
+        margin-left: 20px;
+        margin-right: 20px;
+        border-radius: 16px;
+      }
+      .Rheader{
+        font-size: 20px;
+      }
+    }
     </style>
   </head>
   <body style="background-color: #000000;">
@@ -132,7 +177,7 @@
     <div class="container" style="text-align:centre;">
      
       <div class="jumbotron header">
-        <div style="text-align: center;font-size: 50px; font-weight:100px">
+        <div style="text-align: center;font-weight:100px">
           <div>
             Best Playing 11 Recommendation System
           </div>
@@ -189,7 +234,7 @@ <h3>
     <br>
     <!-- The Report part for missing matches -->
     <div class="reportBox">
-      <h2 style="text-align:center; color: white">
+      <h2 class="Rheader" style="text-align:center; color: white">
         If there is any match missing that you would like us to add <br> Do raise a issue on Github by clicking on the button below
       </h2>
       <br>
diff --git a/app/fantasy_cricket/templates/result.html b/app/fantasy_cricket/templates/result.html
index 61117878..6ad88eba 100644
--- a/app/fantasy_cricket/templates/result.html
+++ b/app/fantasy_cricket/templates/result.html
@@ -16,15 +16,24 @@
 -->
 <html>
   <head>
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <!-- Icon that is visible on the tab -->
+    <link rel="icon" href="../static/icon.png">
     <link
       rel="stylesheet"
       type="text/css"
       href="{{ url_for('static',path='styles/style1.css') }}"
     />
     <style>
-      img {
-        height: 100px;
-        width: 200px;
+      .img {
+        height: 130px;
+        width: auto;
+      }
+      @media(max-width: 1100px) {
+
+        .img{
+          height: 50px;
+        }
       }
     </style>
     <link rel="icon" href="../static/images/icon.jpg" />
@@ -39,15 +48,16 @@ <h1>Your Recommended Team</h1>
 
       <div class="whiteCard">
 
-      <div class="line1"> 
+      <!-- <div class="line1">
+
         <div>
           <img
             class="img"
-
             src="{{url_for('static',path='bat.png')}}"
           />
           <figcaption>{{ t1 }}{{ c1 }}{{ v1 }}</figcaption>
         </div>
+        <br class="fix">
         <div>
           <img
             class="img"
@@ -62,6 +72,7 @@ <h1>Your Recommended Team</h1>
           />
           <figcaption>{{ t3 }}{{ c3 }}{{ v3 }}</figcaption>
         </div>
+        <br class="fix">
         <div>
           <img
             class="img"
@@ -69,6 +80,7 @@ <h1>Your Recommended Team</h1>
           />
           <figcaption>{{ t4 }}{{ c4 }}{{ v4 }}</figcaption>
         </div>
+        <br class="fix">
         <div>
           <img
             class="img"
@@ -76,9 +88,11 @@ <h1>Your Recommended Team</h1>
           />
           <figcaption>{{ t5 }}{{ c5 }}{{ v5 }}</figcaption>
         </div>
-      </div>
+      </div> -->
+
 
     <div class="line2">
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -86,6 +100,7 @@ <h1>Your Recommended Team</h1>
         />
         <figcaption>{{ t6 }}{{ c6 }}{{ v6 }}</figcaption>
       </div>
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -93,6 +108,7 @@ <h1>Your Recommended Team</h1>
         />
         <figcaption>{{ t7 }}{{ c7 }}{{ v7 }}</figcaption>
       </div>
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -100,6 +116,7 @@ <h1>Your Recommended Team</h1>
         />
         <figcaption>{{ t8 }}{{ c8 }}{{ v8 }}</figcaption>
       </div>
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -107,6 +124,7 @@ <h1>Your Recommended Team</h1>
         />
         <figcaption>{{ t9 }}{{ c9 }}{{ v9 }}</figcaption>
       </div>
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -114,6 +132,7 @@ <h1>Your Recommended Team</h1>
         />
         <figcaption>{{ t10 }}{{ c10 }}{{ v10 }}</figcaption>
       </div>
+      <br class="fix">
       <div>
         <img
           class="img"
@@ -123,6 +142,50 @@ <h1>Your Recommended Team</h1>
       </div>
     </div>
 
+
+    <div class="line1">
+      <div>
+        <img
+          class="img"
+          src="{{url_for('static',path='bat.png')}}"
+        />
+        <figcaption>{{ t1 }}{{ c1 }}{{ v1 }}</figcaption>
+      </div>
+      <br class="fix">
+      <div>
+        <img
+          class="img"
+          src="{{url_for('static',path='bat.png')}}"
+        />
+        <figcaption>{{ t2 }}{{ c2 }}{{ v2 }}</figcaption>
+      </div>
+      <div>
+        <img
+          class="img"
+          src="{{url_for('static',path='bat.png')}}"
+        />
+        <figcaption>{{ t3 }}{{ c3 }}{{ v3 }}</figcaption>
+      </div>
+      <br class="fix">
+      <div>
+        <img
+          class="img"
+          src="{{url_for('static',path='bat.png')}}"
+        />
+        <figcaption>{{ t4 }}{{ c4 }}{{ v4 }}</figcaption>
+      </div>
+      <br class="fix">
+      <div>
+        <img
+          class="img"
+          src="{{url_for('static',path='bat.png')}}"
+        />
+        <figcaption>{{ t5 }}{{ c5 }}{{ v5 }}</figcaption>
+      </div>
+    </div>
+
+
+
   </div>
   <br>