diff --git a/public/index.html b/public/index.html
index 3f35080..62aa548 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,13 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/components/Login.js b/src/components/Login.js
index 6e788b0..ce4d61d 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -2,15 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { postLogin } from '../actions/login';
-import {
-  Form,
-  Grid,
-  Image,
-  Divider,
-  Icon,
-  Message,
-  Button,
-} from 'semantic-ui-react';
+import { Form, Image, Divider, Icon, Message, Button } from 'semantic-ui-react';
+import { Container } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import './../styles/Login.css';
 import orgLogo from '../assets/org-logo.jpg';
@@ -112,80 +105,77 @@ class Login extends Component {
   render() {
     const { showPassword, error, submitted } = this.state;
     return (
-      <>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column width={5}>
-              <div className="login">
-                <span>
-                  <b>Login</b>
-                </span>
-                <Divider />
-                <Form>
-                  <Form.Input
-                    name="username"
-                    data-testid="input-username"
-                    value={this.state.username}
-                    onChange={this.onChange}
-                    label="Username"
-                    required
-                    placeholder="Enter your username..."
+      <Container className="container d-flex align-items-center">
+        <Container
+          className="remo d-flex flex-xl-row flex-lg-row flex-md-row flex-column-reverse align-items-center justify-content-center justify-content-xl-around justify-content-lg-around w-100"
+          style={{ height: 'calc(100vh - 56px)' }}
+        >
+          <div className="login">
+            <span>
+              <b>Login</b>
+            </span>
+            <Divider />
+            <Form>
+              <Form.Input
+                name="username"
+                data-testid="input-username"
+                value={this.state.username}
+                onChange={this.onChange}
+                label="Username"
+                required
+                placeholder="Enter your username..."
+              />
+              <Form.Input
+                data-testid="input-password"
+                type={showPassword ? 'text' : 'password'}
+                icon={
+                  <Icon
+                    name={showPassword ? 'eye slash outline' : 'eye'}
+                    data-testid="hide-password"
+                    onClick={this.handleShow}
+                    link
                   />
-                  <Form.Input
-                    data-testid="input-password"
-                    type={showPassword ? 'text' : 'password'}
-                    icon={
-                      <Icon
-                        name={showPassword ? 'eye slash outline' : 'eye'}
-                        data-testid="hide-password"
-                        onClick={this.handleShow}
-                        link
-                      />
-                    }
-                    name="password"
-                    value={this.state.password}
-                    onChange={this.onChange}
-                    label="Password"
-                    required
-                    placeholder="Enter your password..."
-                  />
-                  <Button
-                    data-testid="button-login"
-                    fluid
-                    primary
-                    type="button"
-                    onClick={this.submitLogin}
-                    disabled={!this.state.username || !this.state.password}
-                  >
-                    LOG IN
-                  </Button>
-                </Form>
+                }
+                name="password"
+                value={this.state.password}
+                onChange={this.onChange}
+                label="Password"
+                required
+                placeholder="Enter your password..."
+              />
+              <Button
+                data-testid="button-login"
+                fluid
+                primary
+                type="button"
+                onClick={this.submitLogin}
+                disabled={!this.state.username || !this.state.password}
+              >
+                LOG IN
+              </Button>
+            </Form>
+
+            {/* form validation */}
+            {this.state.usernameerror ? (
+              <Message error content="Username cannot be empty!" />
+            ) : null}
+            {this.state.passworderror ? (
+              <Message error content="Password cannot be empty!" />
+            ) : null}
+            {error && submitted ? (
+              <Message error content={this.props.loginerror.detail} />
+            ) : null}
+            <Divider />
+            <span>
+              Don't have an account? <Link to={register()}>Register here.</Link>
+            </span>
+          </div>
 
-                {/* form validation */}
-                {this.state.usernameerror ? (
-                  <Message error content="Username cannot be empty!" />
-                ) : null}
-                {this.state.passworderror ? (
-                  <Message error content="Password cannot be empty!" />
-                ) : null}
-                {error && submitted ? (
-                  <Message error content={this.props.loginerror.detail} />
-                ) : null}
-                <Divider />
-                <span>
-                  Don't have an account?{' '}
-                  <Link to={register()}>Register here.</Link>
-                </span>
-              </div>
-            </Grid.Column>
-            <Grid.Column width={10}>
-              <div className="logo">
-                <Image src={orgLogo} />
-              </div>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </>
+          <div className="logo">
+            <Image src={orgLogo} />
+          </div>
+        </Container>
+      </Container>
     );
   }
 }
diff --git a/src/components/Register.js b/src/components/Register.js
index e2cae5e..928c55f 100644
--- a/src/components/Register.js
+++ b/src/components/Register.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { postRegister } from '../actions/login';
-import { Form, Grid, Image, Divider, Icon, Message } from 'semantic-ui-react';
+import { Form, Image, Divider, Icon, Message } from 'semantic-ui-react';
+import { Container } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { login } from '../urls';
@@ -163,138 +164,137 @@ class Register extends Component {
       : (mailerror = null);
 
     return (
-      <Grid>
-        <Grid.Row>
-          <Grid.Column width={5}>
-            <div className="login">
-              <span>
-                <b>Register</b>
-              </span>
-              <Divider />
-              <Form>
-                <Form.Input
-                  name="username"
-                  value={this.state.username}
-                  onChange={this.onChange}
-                  label="Username"
-                  required
-                  placeholder="Enter your username..."
-                  data-testid="username"
-                />
-                <Form.Input
-                  name="email"
-                  value={this.state.email}
-                  onChange={this.onChange}
-                  label="Email"
-                  required
-                  placeholder="Enter your email..."
-                  data-testid="email"
-                />
-                <Form.Input
-                  type={showPassword ? 'text' : 'password'}
-                  icon={
-                    <Icon
-                      name={showPassword ? 'eye slash outline' : 'eye'}
-                      data-testid="hide-display-password"
-                      onClick={this.handleShow}
-                      link
-                    />
-                  }
-                  name="password"
-                  value={this.state.password}
-                  onChange={this.onChange}
-                  label="Password"
-                  required
-                  placeholder="Enter your password..."
-                  data-testid="password"
-                />
-                <Form.Input
-                  type={showConfirmPassword ? 'text' : 'password'}
-                  icon={
-                    <Icon
-                      name={showConfirmPassword ? 'eye slash outline' : 'eye'}
-                      data-testid="hide-display-confirm-password"
-                      onClick={this.handleShowConfirm}
-                      link
-                    />
-                  }
-                  name="confirm_password"
-                  value={this.state.confirm_password}
-                  onChange={this.onChange}
-                  label="Confirm Password"
-                  required
-                  placeholder="Confirm your password..."
-                  data-testid="confirm_password"
-                />
-                <Form.Button
-                  fluid
-                  primary
-                  onClick={this.submitRegister}
-                  disabled={
-                    !this.state.username ||
-                    !this.state.email ||
-                    !this.state.password ||
-                    !this.state.confirm_password
-                  }
-                  data-testid="register_btn"
-                >
-                  REGISTER
-                </Form.Button>
-              </Form>
+      <Container className="container d-flex align-items-center">
+        <Container
+          className="remo d-flex flex-xl-row flex-lg-row flex-md-row flex-column-reverse align-items-center justify-content-center justify-content-xl-around justify-content-lg-around w-100"
+          style={{ height: 'calc(100vh - 56px)' }}
+        >
+          <div className="login">
+            <span>
+              <b>Register</b>
+            </span>
+            <Divider />
+            <Form>
+              <Form.Input
+                name="username"
+                value={this.state.username}
+                onChange={this.onChange}
+                label="Username"
+                required
+                placeholder="Enter your username..."
+                data-testid="username"
+              />
+              <Form.Input
+                name="email"
+                value={this.state.email}
+                onChange={this.onChange}
+                label="Email"
+                required
+                placeholder="Enter your email..."
+                data-testid="email"
+              />
+              <Form.Input
+                type={showPassword ? 'text' : 'password'}
+                icon={
+                  <Icon
+                    name={showPassword ? 'eye slash outline' : 'eye'}
+                    data-testid="hide-display-password"
+                    onClick={this.handleShow}
+                    link
+                  />
+                }
+                name="password"
+                value={this.state.password}
+                onChange={this.onChange}
+                label="Password"
+                required
+                placeholder="Enter your password..."
+                data-testid="password"
+              />
+              <Form.Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                icon={
+                  <Icon
+                    name={showConfirmPassword ? 'eye slash outline' : 'eye'}
+                    data-testid="hide-display-confirm-password"
+                    onClick={this.handleShowConfirm}
+                    link
+                  />
+                }
+                name="confirm_password"
+                value={this.state.confirm_password}
+                onChange={this.onChange}
+                label="Confirm Password"
+                required
+                placeholder="Confirm your password..."
+                data-testid="confirm_password"
+              />
+              <Form.Button
+                fluid
+                primary
+                onClick={this.submitRegister}
+                disabled={
+                  !this.state.username ||
+                  !this.state.email ||
+                  !this.state.password ||
+                  !this.state.confirm_password
+                }
+                data-testid="register_btn"
+              >
+                REGISTER
+              </Form.Button>
+            </Form>
 
-              {/* form validation */}
-              {this.state.usernameerror ? (
-                <Message error content="Username cannot be empty!" />
-              ) : null}
-              {this.state.emailerror ? (
-                <Message error content="Email format is not valid!" />
-              ) : null}
-              {this.state.passworderror ? (
+            {/* form validation */}
+            {this.state.usernameerror ? (
+              <Message error content="Username cannot be empty!" />
+            ) : null}
+            {this.state.emailerror ? (
+              <Message error content="Email format is not valid!" />
+            ) : null}
+            {this.state.passworderror ? (
+              <Message
+                error
+                content="Password is too short and not valid! It should contain minimum 12 characters, at least one uppercase letter, one lowercase letter, one number and one special character."
+              />
+            ) : null}
+            {this.state.matcherror ? (
+              <Message error content="Passwords do not match!" />
+            ) : null}
+            {this.state.error && this.state.submitted ? (
+              usererror ? (
                 <Message
-                  error
-                  content="Password is too short and not valid! It should contain minimum 12 characters, at least one uppercase letter, one lowercase letter, one number and one special character."
+                  warning
+                  content="A user with that username already exists."
                 />
-              ) : null}
-              {this.state.matcherror ? (
-                <Message error content="Passwords do not match!" />
-              ) : null}
-              {this.state.error && this.state.submitted ? (
-                usererror ? (
+              ) : (
+                <Message warning content={this.props.registererror} />
+              )
+            ) : (
+              <>
+                {this.state.submitted ? (
                   <Message
-                    warning
-                    content="A user with that username already exists."
+                    success
+                    content="You have registered successfully! Please confirm your email address to Login."
                   />
-                ) : (
-                  <Message warning content={this.props.registererror} />
-                )
-              ) : (
-                <>
-                  {this.state.submitted ? (
-                    <Message
-                      success
-                      content="You have registered successfully! Please confirm your email address to Login."
-                    />
-                  ) : null}
-                </>
-              )}
-              {this.state.error && this.state.submitted ? (
-                mailerror ? (
-                  <Message warning content="Email address not valid." />
-                ) : null
-              ) : null}
-              <Divider />
-              <span>
-                Already have an account? <Link to={login()}>Login here.</Link>
-              </span>
-            </div>
-          </Grid.Column>
-          <Grid.Column width={10}>
-            <div className="logo">
-              <Image src={orgLogo} />
-            </div>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
+                ) : null}
+              </>
+            )}
+            {this.state.error && this.state.submitted ? (
+              mailerror ? (
+                <Message warning content="Email address not valid." />
+              ) : null
+            ) : null}
+            <Divider />
+            <span>
+              Already have an account? <Link to={login()}>Login here.</Link>
+            </span>
+          </div>
+          <div className="logo">
+            <Image src={orgLogo} />
+          </div>
+        </Container>
+      </Container>
     );
   }
 }
diff --git a/src/styles/Login.css b/src/styles/Login.css
index b48e9aa..ae01145 100644
--- a/src/styles/Login.css
+++ b/src/styles/Login.css
@@ -1,11 +1,11 @@
 .login {
   padding: 1em;
-  margin-top: 25vh;
-  margin-left: 10vw;
   border: 0.5px solid rgba(0, 0, 0, 0.1);
   border-radius: 2px;
+  /* width: 100%; */
 }
-.logo {
-  margin-top: 30vh;
-  margin-left: 10vw;
+@media screen and (max-width: 768px) {
+  .login {
+    width: 100%;
+  }
 }