'Adding a button on other webpages causing the common buttons in navbar to change

Hello I am facing a odd issue with the button.Whenever I insert a button from MUI , it just disrupts the common buttons in the Navbar that are present on every pages. Here is my signup page.Also I had a drop down menu(earlier but I got rid of and now have them as buttons instead on the navbar) that was common on all pages as well and adding a button anywhere would basically cause the menus to appear in disorientation.The buttons in Navbar are in a different page

Here is what my signup page looks like.

import { Grid,Paper, Avatar, TextField, Button, Typography,Link } from '@material-ui/core'




const Signup=()=>{
    
   
    const stylePaper={padding :'20px', height:'80vh',maxWidth: 400,  marginLeft:500}
    const btnstyle={margin:'20px 0' }
    return(
        <Grid>
            <Paper elevation={10} style={stylePaper}>
                <Grid align='center'>
                     <Avatar src = "/Login logo.png"/>
                    <h2>Sign Up</h2>
                </Grid>
                <Grid container spacing={7}>
                <Grid item xs = {6}>
                <TextField label='First Name' placeholder='Enter first name' variant='outlined' fullWidth />
                </Grid>
                <Grid item xs = {6}>
                <TextField label='Last Name' placeholder='Enter last name' variant='outlined' fullWidth />
                </Grid>
                </Grid>
                <Grid container spacing = {3}>
                <Grid item xs = {5}>
                <TextField  label='SSN' placeholder='Enter SSN' variant='outlined' />
                </Grid>
                <Grid item xs ={7}>
                <TextField  label='Address' placeholder='Enter address' variant='outlined' />
                </Grid>
                </Grid>
                <TextField  label='Email' placeholder='Enter email' fullWidth required/>
                <TextField label='Password' placeholder='Enter password' type='password' fullWidth required />
                <Grid item>
                <TextField label='Password' placeholder='Enter password' type='password' fullWidth required />
                <Button type='submit' color='primary' variant="contained">Create Account</Button>
                
                </Grid>
               
                
                <Typography >
                     <Link href="#" >
                        Forgot password ?
                </Link>
                </Typography>
                <Typography > Have an account already?
                     <Link href="Login" >
                        Log in 
                </Link>
                </Typography>
            </Paper>
            
        </Grid>
        
    )

}

export default Signup


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source