diff --git a/client/src/Components/pages.css b/client/src/Components/pages.css
new file mode 100644
index 0000000000000000000000000000000000000000..c0e0d9cfae79aa4277733b157e09d787180b685c
--- /dev/null
+++ b/client/src/Components/pages.css
@@ -0,0 +1,176 @@
+.cb{
+    background-color: black;
+    color: white;
+}
+.Login{
+    max-width: fill;
+  }
+#cred{
+  width: 400px;
+  position: absolute;
+  top: 30%;
+  left: 40%;
+  background-color: white;
+  
+    -webkit-appearance:  none; 
+    width:  auto;
+    min-width:  100px;
+    border-radius:  24px; 
+    text-align:  center; 
+    padding:  15px 40px;
+    margin-top:  5px; 
+    background-color:  saturate(30%); 
+    color:  black; 
+    font-size:  14px;
+    margin-left:  auto; 
+    font-weight:  500; 
+    box-shadow:  0px 2px 6px -1px rgba(0,0,0,.13); 
+    border:  none;
+    transition:  all .3s ease; 
+    outline: 0; 
+        
+}
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+  }
+  
+  /* Style the links inside the navigation bar */
+  .topnav a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+  
+  /* Change the color of links on hover */
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+    cursor: pointer;
+  }
+  
+  /* Add an active class to highlight the current page */
+  .topnav a.active {
+    background-color: #4CAF50;
+    color: white;
+  }
+  
+  /* Hide the link that should open and close the topnav on small screens */
+  .topnav .icon {
+    display: none;
+  }
+  
+  
+  .button {
+    border: none;
+    color: white;
+    padding: 16px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    width: 400px;
+    border-radius: 25px;
+    position: absolute;
+       
+  }
+  
+  .button1 {
+    background-color: white;
+    color: black;
+    border: 4px solid #4CAF50;
+    top: 40%;
+    left: 40%;
+  }
+  
+  .button1:hover {
+    background-color: #4CAF50;
+    color: white;
+  }
+  
+  .button2 {
+    background-color: white;
+    color: black;
+    border: 4px solid #008CBA;
+    top: 50%;
+    left: 40%;
+        
+}
+  
+  .button2:hover {
+    background-color: #008CBA;
+    color: white;
+  }
+  .button3 {
+    background-color: white;
+    color: black;
+    border: 4px solid red;
+    top: 60%;
+    left: 40%;
+  }
+  .button3:hover {
+    background-color: red;
+    color: white;
+  }
+  .fbutton{
+    display:inline-block;
+    padding:0.5em 3em;
+    border:0.16em solid "#200021";
+    margin:0 0.3em 0.3em 0;
+    box-sizing: border-box;
+    text-decoration:none;
+    text-transform:uppercase;
+    font-family:'Roboto',sans-serif;
+    font-weight:400;
+    color:white;
+    text-align:center;
+    transition: all 0.15s;
+    background-color: rgb(124, 6, 124);
+    width: 300px;
+    }
+    .fbutton:hover{
+    color:#7cfc00;
+    border-color:#7cfc00;
+    }
+    table {
+      font-family: "Lato","sans-serif";   }       /* added custom font-family  */
+       
+      table.one {                                  
+      margin-bottom: 3em; 
+      border-collapse:collapse;   }   
+       
+      td {                            /* removed the border from the table data rows  */
+      text-align: center;     
+      width: 10em;                    
+      padding: 1em;       }       
+       
+      th {                              /* removed the border from the table heading row  */
+      text-align: center;                 
+      padding: 1em;
+      width: 10em;
+      background-color: rgb(124, 6, 124);       /* added a red background color to the heading cells  */
+      color: white;       }                 /* added a white font color to the heading text */
+       
+      tr {    
+      height: 1em;    }
+       
+     
+      table tr:nth-child(odd) {           
+      background-color:#fff; 
+      font-weight: 1000;
+         
+    }
+    input[type="radio"] {
+      -ms-transform: scale(1.5); /* IE 9 */
+      -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
+      transform: scale(1.5);
+  }
+       
+  
\ No newline at end of file