diff --git a/client/src/Components/Admin/admin-page.jsx b/client/src/Components/Admin/admin-page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3ad3ec8cdeaeb5b4f48c4015aca3b3637379997
--- /dev/null
+++ b/client/src/Components/Admin/admin-page.jsx
@@ -0,0 +1,84 @@
+import React, { Component,Fragment } from 'react'
+import * as Forms from '../Admin-forms'
+import {Redirect} from 'react-router-dom'
+import icon from '../Student/icon.png'
+import '../pages.css'
+
+class Admin extends Component {
+ constructor(props) {
+   super(props)
+ 
+   this.state = {
+     s_form: '',
+     logout: false,
+   }
+   this.clickHandler=this.clickHandler.bind(this);
+ }
+ clickHandler(){
+    return(
+        <div style={{position:"absolute",top:"30%",left:"3.5%"}}>
+            <p style={{fontFamily:"sans-serif",color:"#0ff517",fontSize:"20px",marginLeft:"100px"}}><b>SELECT FORM</b></p>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'A'})}}>Add User</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'B'})}}>Remove User</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'C'})}}>Add Book</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'D'})}}>Remove Book</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'E'})}}>Update User</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'F'})}}>Update book</button></div>
+            <div style={{marginLeft:"20px"}}><button className="fbutton" style={{backgroundColor:"red"}} onClick={(e) => {this.setState({s_form: 'make_admin'})}}>Make Admin</button></div>   
+      </div>
+    )
+ }
+  renderform(s_form){
+   
+    if(!s_form)
+    {
+        return(<h2 align="center">Form renders here!</h2>)
+    }
+    const Fm = Forms[s_form];
+    return <Fm />
+   
+    
+ }
+
+
+  render() {
+    if(this.state.logout)
+    return <Redirect to='/alogin'/>
+    else
+  return (
+   <Fragment>
+      <div style={{width:"fill",height:"53px",backgroundColor:" #333"}}>
+      <img src={icon} width="53px" height="53px"/>
+      <div style={{position:"absolute",left:"55px",top:"0px",color:"#f2f2f2",fontSize:"30px"}}><b>BMS</b></div>
+      <div class="dropdown" style={{position:"absolute",marginLeft:"2%",right:'110px',top:'0px'}}>
+            <button class="dropbtn" style={{height:'53px',width:'150px'}}><b>Search</b></button>
+            <div class="dropdown-content">
+             <a href="#" onClick={(e) => {this.setState({s_form: 'bsearch'})}}><b>Search book</b></a>
+             <a href="#" onClick={(e) => {this.setState({s_form: 'usearch'})}}><b>Search user</b></a>
+             <a href="#" onClick={(e) => {this.setState({s_form: 'borr_search'})}}><b>Search borrower</b></a>
+            </div>
+      </div>
+      <div class="topnav">
+          <a onClick={(e) =>{this.setState({logout:true})}} style={{position:"absolute",right:"3px",top:"0px",color:'white'}}><b>Logout</b></a>
+      </div>
+      </div>
+         <div>
+         <div>
+         <h1 style={{color:"#fff",fontFamily:"serif",marginLeft:"1%"}}><b>Hello Admin</b></h1>
+            <h1 style={{color:"red",fontFamily:"serif",marginLeft:"40%",position:"absolute",top:"10%"}}><b>FUNCTIONALITIES</b></h1>
+         </div>
+        
+         <section>
+             {this.clickHandler()}
+             <div style={{position:"absolute",right:"5%",top:"30%",width:"600px",backgroundColor:"#fed000",color:"#242424",borderRadius:"30px",fontFamily:"serif",textAlign:'center'}}>
+                 {}
+                 {this.renderform(this.state.s_form)}
+             </div>
+         </section>
+         </div>
+     </Fragment>
+    )
+  }
+}
+
+export default Admin;