diff --git a/client/src/App.css b/client/src/App.css
index 87e7dde2..1ce0c782 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -7,8 +7,72 @@
   --main-cardBackground-color: #D8E9FD !important
 }
 
+/* image CSS */
+.centered-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.inline-content img {
+  margin-right: 10px; /* Space between image and text */
+}
+
+.loading-icon {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+}
+
+/* content/text CSS */
+.inline-content {
+  display: flex;
+  align-items: center; /* Align items vertically center */
+}
 /* About page- BCOnexus.js CSS Components */
 
+.About-half-width-box{
+  min-height: 650px; /* Ensure both boxes have a minimum height */
+  min-width: 350px;/* min-width: 275px; Ensure both boxes have a minimum width */
+  width: 90%; /* Half the width of the container minus spacing */
+  margin: 0 auto; /* Add spacing between the boxes */
+  border: 1px solid #ccc; /* Add a border for visual separation */
+  border-radius: 8px; /* Add border radius for rounded corners */
+  display: flex; /* Use flexbox */
+  justify-content: center !important;
+  align-items: center; /* Center content horizontally */
+  text-align: left;
+  padding: 16px;
+}
+
+.centered-title {
+  text-align: center;
+}
+
+.About-Full-Width-Box{
+  width: 100%;
+  min-width: 275px; 
+  border: 1px #ccc; 
+  border-radius: 5%; 
+  display: flex;
+  justify-content: flex-start; 
+  align-items: flex-start;
+  align-content: flex-start;
+  text-align: left;
+  margin-bottom: 50px;
+  margin-top: 20px;
+} 
+
+.about-text {
+  font-family:"lato", sans-serif !important;
+  font-size: x-large !important;
+  margin: left 80px !important;
+  /* color: red; */
+}
+
 .About-bullet {
   /* display: "inline-block";
   margin: "0 2px";
@@ -45,7 +109,10 @@
 
 /* about pages */
 .about-main {
-  margin: 2%;
+  margin-top: 3%;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-bottom: 2%;
 }
 
 .member-image {
@@ -274,6 +341,7 @@
 .home-intro-title {
   font-size: 28px !important;
   font-weight: bold !important;
+  text-align: center !important;
 }
 
 .home-position {
diff --git a/client/src/components/FullWidthBox.js b/client/src/components/FullWidthBox.js
index f786db79..17607f2e 100644
--- a/client/src/components/FullWidthBox.js
+++ b/client/src/components/FullWidthBox.js
@@ -1,4 +1,4 @@
-// src/views/home/HomeView/FdaBox.js
+// 
 
 import React from "react";
 import {
@@ -8,28 +8,51 @@ import {
   CardContent,
   Typography
 } from "@mui/material";
+import PropTypes from 'prop-types';
 
-export default function FullWidthBox({link, title, content, image, imageAlt, cssClass}) {
+export default function FullWidthBox({ link, title, content, image, imageAlt, cssClass }) {
 
   const handleClickOpen = () => {
     if (link !== "") {
-      global.window.open(link)
+      global.window.open(link);
     }
   };
 
   return (
-    <Card className="home-notice">
+    <Card className="About-Full-Width-Box">
       <Box className={cssClass}>
         <CardActionArea onClick={handleClickOpen}>
-          <CardContent >
+          <CardContent>
             <Typography className="home-intro-title">
               {title}
             </Typography>
-            {image && <img src={image} height={100} alt={imageAlt} />} 
-            <Typography >{content}</Typography>
+            <br></br>
+            <div className="inline-content">
+            <Typography className="about-text" component="div" dangerouslySetInnerHTML={{ __html: content }} />
+              {image && <img src={image} height={100} alt={imageAlt} className="centered-image" />} 
+              
+            </div>
+            {/* {image && <img src={image} height={100} alt={imageAlt} className="centered-image" />} 
+            <Typography className="about-text" component="div" dangerouslySetInnerHTML={{ __html: content }} /> */}
           </CardContent>
         </CardActionArea>
       </Box>
     </Card>
   );
 }
+
+FullWidthBox.propTypes = {
+  link: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  imageAlt: PropTypes.string,
+  cssClass: PropTypes.string
+};
+
+FullWidthBox.defaultProps = {
+  link: '',
+  image: '',
+  imageAlt: 'Image',
+  cssClass: ''
+};
\ No newline at end of file
diff --git a/client/src/components/HalfWidthBox.js b/client/src/components/HalfWidthBox.js
new file mode 100644
index 00000000..f6702661
--- /dev/null
+++ b/client/src/components/HalfWidthBox.js
@@ -0,0 +1,42 @@
+import React from "react";
+import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
+import PropTypes from 'prop-types';
+
+export default function HalfWidthBox({ link, title, content, image, imageAlt, cssClass }) {
+  const handleClickOpen = () => {
+    if (link !== "") {
+      global.window.open(link);
+    }
+  };
+
+  return (
+    <Card className="About-half-width-box"> {/* Define a CSS class for half-width box */}
+      <CardActionArea onClick={handleClickOpen}>
+        <CardContent>
+          <Typography className="home-intro-title">
+            {title}
+          </Typography >
+          <br></br>
+          {image && <img src={image} height={100} alt={imageAlt} className="centered-image"/>}
+          <Typography className="about-text" dangerouslySetInnerHTML={{ __html: content }} />
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
+
+HalfWidthBox.propTypes = {
+  link: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  imageAlt: PropTypes.string,
+  cssClass: PropTypes.string
+};
+
+HalfWidthBox.defaultProps = {
+  link: '',
+  image: '',
+  imageAlt: 'Image',
+  cssClass: ''
+};
\ No newline at end of file
diff --git a/client/src/components/LoadingComponent.js b/client/src/components/LoadingComponent.js
new file mode 100644
index 00000000..48cfdc0a
--- /dev/null
+++ b/client/src/components/LoadingComponent.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import biocomputing from "../images/biocomputing.gif"
+import '../App.css'; // Ensure you have styles for the loading icon
+
+
+const LoadingIcon = () => {
+  return (
+    <div className="loading-icon">
+      <img src={biocomputing} alt='loading...' />
+    </div>
+  );
+};
+
+export default LoadingIcon;
diff --git a/client/src/components/auth/Login.js b/client/src/components/auth/Login.js
index fab67234..7739cf30 100644
--- a/client/src/components/auth/Login.js
+++ b/client/src/components/auth/Login.js
@@ -1,6 +1,6 @@
 // src/components/auth/Login.js
 
-import React, { useEffect, useState  } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Navigate, useNavigate } from "react-router-dom";
 import { Formik, Form } from "formik";
@@ -11,11 +11,13 @@ import { Box, Button, Container, Dialog, DialogActions, DialogContent, DialogCon
 import { Link } from "react-router-dom";
 import { forgotPassword, login, googleLogin, orcidLogIn } from "../../slices/accountSlice";
 import { useSearchParams } from "react-router-dom";
+import LoadingComponent from '../LoadingComponent'; // Import the LoadingComponent component
+
+const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+const orcid_id = process.env.REACT_APP_ORCID_CLIENT_ID;
+const orcidUrl = process.env.REACT_APP_ORCID_URL;
+const serverUrl = process.env.REACT_APP_SERVER_URL;
 
-const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID
-const orcid_id = process.env.REACT_APP_ORCID_CLIENT_ID
-const orcidUrl = process.env.REACT_APP_ORCID_URL
-const serverUrl = process.env.REACT_APP_SERVER_URL
 const onGoogleLoginFailure = (response) => {
   console.log(response);
 }
@@ -24,11 +26,11 @@ const Login = () => {
   let navigate = useNavigate();
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [resetEmail, setResetEmail] = React.useState("");
+  const [resetEmail, setResetEmail] = useState("");
   const { isLoggedIn } = useSelector((state) => state.account);
-  const code = searchParams.get("code")
+  const code = searchParams.get("code");
   const initialValues = {
     username: "",
     password: "",
@@ -44,7 +46,7 @@ const Login = () => {
           navigate("/login");
         })
     }
-  }, [])
+  }, [code, dispatch, navigate]);
 
   const validationSchema = Yup.object().shape({
     username: Yup.string().required("This field is required!"),
@@ -59,7 +61,9 @@ const Login = () => {
       )
       .required("This field is required!"),
   });
-  
+
+  const minimumLoadingTime = 5000; //minimum loading tim 3 seconds
+
   const onGoogleLoginSuccess = (response) => {
     setLoading(true);
     const idToken = response.tokenId;
@@ -67,12 +71,13 @@ const Login = () => {
     dispatch(googleLogin(idToken))
       .unwrap()
       .then(() => {
-        navigate("/");
+        setTimeout(() => {
+          navigate("/");
+        }, minimumLoadingTime);
       })
       .catch(() => {
         setLoading(false);
       });
-    setLoading(false);
   }
 
   const handleLogin = (formValue) => {
@@ -85,7 +90,7 @@ const Login = () => {
         navigate("/");
         global.window.location.reload();
       })
-      .catch((error) => {
+      .catch(() => {
         setLoading(false);
       });
   };
@@ -99,7 +104,7 @@ const Login = () => {
       })
       .catch((error) => {
         console.log(error)
-      })
+      });
     setLoading(false);
   }
 
@@ -113,100 +118,99 @@ const Login = () => {
 
   return (
     <Container>
-      <Box display="flex" flexdirection="column" height="100%" >
-        <Container>
-          <Grid item>
-            <Typography variant="h4">Sign in</Typography>
-            <Typography>Sign in using your Portal credentials</Typography>
-            <Typography component={Link} to='/register'>Don&apos;t have an account? Sign up here</Typography>
-          </Grid>
-          <br/>
-          <GoogleLogin
-            clientId={googleClientId}
-            buttonText="Sign with Google"
-            onSuccess={onGoogleLoginSuccess}
-            onFailure={onGoogleLoginFailure}
-            cookiePolicy={"single_host_origin"}
-          /><br/><br/>
-          <a href={`${orcidUrl}/oauth/authorize?client_id=${orcid_id}&response_type=code&scope=/authenticate&redirect_uri=${serverUrl}/login`}>
-            <Button
-              variant="outlined"
+      {loading ? (
+        <LoadingComponent />
+      ) : (
+        <Box display="flex" flexDirection="column" height="100%">
+          <Container>
+            <Grid item>
+              <Typography variant="h4">Sign in</Typography>
+              <Typography>Sign in using your Portal credentials</Typography>
+              <Typography component={Link} to='/register'>Don&apos;t have an account? Sign up here</Typography>
+            </Grid>
+            <br />
+            <GoogleLogin
+              clientId={googleClientId}
+              buttonText="Sign with Google"
+              onSuccess={onGoogleLoginSuccess}
+              onFailure={onGoogleLoginFailure}
+              cookiePolicy={"single_host_origin"}
+            /><br /><br />
+            <a href={`${orcidUrl}/oauth/authorize?client_id=${orcid_id}&response_type=code&scope=/authenticate&redirect_uri=${serverUrl}/login`}>
+              <Button
+                variant="outlined"
+              >
+                <img
+                  alt="ORCID Sign in"
+                  src="https://orcid.org/assets/vectors/orcid.logo.icon.svg"
+                  width="25"
+                />
+                <Typography variant="subtitle1">Sign in with ORCID</Typography>
+              </Button>
+            </a>
+            <Typography variant="h5">Or</Typography>
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleLogin}
             >
-              <img  
-                alt="ORCID Sign in"
-                src="https://orcid.org/assets/vectors/orcid.logo.icon.svg"
-                width="25"
+              <Form>
+                <Grid item>
+                  <MyTextField name="username" type="username" label='User Name' />
+                </Grid>
+
+                <Grid item>
+                  <MyTextField name="password" type="password" label='Password' />
+                </Grid>
+
+                <div className="form-group">
+                  <Button
+                    type="submit"
+                    className="btn btn-primary btn-block"
+                    disabled={loading}
+                    color='primary'
+                    variant="contained"
+                  >
+                    {loading ? <LoadingComponent /> : 'Login'}
+                  </Button>
+                </div>
+                <Button onClick={() => setOpen(true)}>Forgot password? Reset it here</Button>
+              </Form>
+            </Formik>
+          </Container>
+          <Dialog open={open}>
+            <DialogContent>
+              <DialogTitle>Password Reset</DialogTitle>
+              <DialogContentText>
+                Enter your email address. If there is an account associated with that address we will provide you a link to reset your password.
+              </DialogContentText>
+              <TextField
+                required
+                id="email-for-password-reset"
+                label="Email address"
+                variant="filled"
+                value={resetEmail}
+                onChange={(e) => { setResetEmail(e.target.value) }}
               />
-              <Typography variant="subtitle1" >Sign in with ORCID</Typography>
-            </Button>
-          </a>  
-          <Typography variant="h5">Or</Typography>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleLogin}
-          >
-            <Form>
-              <Grid item>
-                <MyTextField name="username" type="username" label='User Name' />
-              </Grid>
-
-              <Grid item>
-                <MyTextField name="password" type="password" label='Password' />
-              </Grid>
-
-              <div className="form-group">
-                <Button 
-                  type="submit"
-                  className="btn btn-primary btn-block"
-                  disabled={loading}
-                  color='primary'
-                  variant="contained"
-                >
-                  {loading && (
-                    <span className="spinner-border spinner-border-sm"></span>
-                  )}
-                  <span>Login</span>
-                </Button>
-              </div>
-              <Button onClick={() => setOpen(true)}>Forgot password? Reset it here</Button>
-            </Form>
-          </Formik>
-        </Container>
-        <Dialog open={open}>
-          <DialogContent>
-            <DialogTitle>Password Reset</DialogTitle>
-            <DialogContentText>
-            Enter your email address.
-            If there is an account associated with that address we will provide you a link to
-            reset your password.
-            </DialogContentText>
-            <TextField
-              required
-              id="email-for-password-reset"
-              label="Email address"
-              variant="filled"
-              value={resetEmail}
-              onChange={(e) =>{setResetEmail(e.target.value)}}
-            />
-          </DialogContent>
-          <DialogActions>
-            <Button
-              id="submit-resetPassword"
-              onClick={handleSubmit}
-              variant="outlined"
-              color="primary"
-              disabled={!resetEmail}
-            >Submit</Button>
-            <Button
-              id="Cancel-resetPassword"
-              onClick={handleClose}
-              variant="outlined"
-              color="secondary"
-            >Cancel</Button>
-          </DialogActions>
-        </Dialog>
-      </Box>
+            </DialogContent>
+            <DialogActions>
+              <Button
+                id="submit-resetPassword"
+                onClick={handleSubmit}
+                variant="outlined"
+                color="primary"
+                disabled={!resetEmail}
+              >Submit</Button>
+              <Button
+                id="Cancel-resetPassword"
+                onClick={handleClose}
+                variant="outlined"
+                color="secondary"
+              >Cancel</Button>
+            </DialogActions>
+          </Dialog>
+        </Box>
+      )}
     </Container>
   );
 };
diff --git a/client/src/images/audience.png b/client/src/images/audience.png
new file mode 100644
index 00000000..0a69df56
Binary files /dev/null and b/client/src/images/audience.png differ
diff --git a/client/src/pages/About.js b/client/src/pages/About.js
index 80d9b033..b5e5f341 100644
--- a/client/src/pages/About.js
+++ b/client/src/pages/About.js
@@ -1,24 +1,26 @@
 
 import React from "react";
-import { Card, CardHeader, Container, Grid } from "@mui/material";
+import { Card, CardHeader, Container, Grid, Typography } from "@mui/material";
 import FullWidthBox from "../components/FullWidthBox";
 import ThirdBox from "../components/ThirdBox";
+import HalfWidthBox from "../components/HalfWidthBox";
 import logoWithName from "../images/biocompute.png";
+import audiencepic from "../images/audience.png"
 import "../App.css";
 
 export default function About() {
   return (
     <Card className="about-main">
       <FullWidthBox
-        link=""
         title="Our Mission"
-        content="A documentation interface for bioinformatics experiments workflow in a 
-        standardized human and machine-readable format. Improve and ease communication of
-        HTS data and information between the research community, the clinical community,
-        and regulatory organizations."
+        content="
+        BioCompute is a standard for workflow communication. It comes with very strong data provenance, researcher attribution, and descriptive metadata features.<br /><br />
+        It is common to hear “x software was used” when reading about a computational pipeline. This is not enough to make informed scientific assessments of work, whether in academic publication reviews, regulatory decisions (e.g. at the FDA), internal process review (particularly for trade secrets), or in educational contexts. Poor workflow communication results in significant delays in reviews, or worse, outright rejection.<br /><br />
+        The BioCompute mission is to overhaul the way that computational analyses in biology are shared, understood, and reproduced between the research community, the clinical community, and regulatory organizations."
         image={logoWithName}
         imageAlt="BioCompute logo and name"
       />
+      
       <FullWidthBox
         link=""
         title="Our Story"
@@ -34,8 +36,61 @@ export default function About() {
             and maintained), the HIVE website, and the Research Objects discussion of BioCompute."
         image=""
       />
-      <CardHeader title="Funding Sources"/>
+      <br></br>
+      <Grid container justifyContent="space-around" spacing={2}>
+        <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
+          <HalfWidthBox justifyContent="left"
+            link=""
+            title="Our Audience"
+            titleClass="centered-title"
+            content="
+              BioCompute serves a broad range of stakeholders within the scientific and biomedical research communities, including but not limited to:<br />
+              <ul style='margin-left: 20px; padding-left: 20px; list-style-position: inside;'>
+                  <li>Researchers and Scientists </li>
+                  <li>Educators and Students </li>
+                  <li>Regulatory Bodies </li>
+                  <li>Bioinformatics and Data Analysts </li>
+                  <li>Software Developers and Engineers </li>
+              </ul>"
+
+            image={audiencepic}
+          />
+        </Grid>
+        <Grid item xs={12} sm={12} md={6} lg={6} xl={6}>
+          <HalfWidthBox
+            link=""
+            title="Benefits of BioCompute Objects(BCOs)"
+            content="
+              <ul style='margin-left: 20px; padding-left: 20px; list-style-position: inside;'>
+                  <li><b>Enhanced Transparency:</b> BCOs provide a clear and detailed account of documented computational analyses, ensuring all steps are visible and understandable.  </li>
+                  <li><b>Improved Reproducibility:</b> BCOs allow for documented analyses to be easily replicated to validate research findings. </li>
+                  <li><b>Streamlined Collaboration:</b> BCOs facilitate better collaboration among researchers by providing a common framework for sharing workflows.  </li>
+                  <li><b>Regulatory Compliance:</b> BCOs support regulatory bodies in evaluating the validity and reliability of computational workflows, thereby enhancing the credibility of research. </li>
+                  <li><b>Educational Value:</b> BCOs can make it easier for students and educators to grasp complect concepts and analyses much more easily through intuitive documentation.  </li>
+              </ul>"
+
+            image=""
+          />
+       </Grid>
+      </Grid>
       <FullWidthBox
+        title="Frequently Asked Questions"
+        content="
+        <ul style='margin-left: 20px; padding-left: 20px; list-style-position: inside;'>
+                  <li><b>What role does standardization play in scientific collaboration?</b></li>
+                  Standardization, as provided by BCOs, is crucial for seamless collaboration across different institutions and disciplines, enabling researchers to build on each other’s work effectively. 
+                  <li><b>How can we improve reproducibility in Biomedical Research?</b></li>
+                  Ensuring that research findings can be replicated by others is a cornerstone of scientific integrity. BCOs address this by providing a clear and detailed framework for documenting analyses. 
+                  <li><b>How can we ensure regulatory compliance in computational workflows?</b></li>
+                  BCOs facilitate compliance by offering a transparent and consistent documentation method, helping regulatory bodies like the FDA evaluate computational analyses more efficiently. 
+              </ul>"
+        image=""
+        />
+      <CardHeader
+        title="Funding Sources"
+        classes={{ title: "home-intro-title" }}
+      />
+      <FullWidthBox 
         link="https://smhs.gwu.edu/news/gw-led-consortium-receives-22m-grant-fund-biocompute-object-specification-project"
         title=""
         content="FDA BAA-19-00123"
diff --git a/client/src/slices/accountSlice.js b/client/src/slices/accountSlice.js
index 358b6880..7c33059c 100644
--- a/client/src/slices/accountSlice.js
+++ b/client/src/slices/accountSlice.js
@@ -390,8 +390,8 @@ export const handleExpiredJWT = createAsyncThunk(
 
 
 const initialState = user
-  ? { isLoggedIn: true, user }
-  : { isLoggedIn: false, user: null };
+  ? { isLoggedIn: true, user, loading: false }
+  : { isLoggedIn: false, user: null, loading: false };
 
 export const accountSlice = createSlice({
   name: "account",
@@ -411,11 +411,16 @@ export const accountSlice = createSlice({
       .addCase(register.rejected, (state) => {
         state.isLoggedIn = false;
       })
+      .addCase(login.pending, (state) => {
+        state.loading = true; // Set loading to true when login is pending
+      })
       .addCase(login.fulfilled, (state, action) => {
+        state.loading = false; // Set loading to false when login is fulfilled
         state.isLoggedIn = true;
         state.user = action.payload.user;
       })
       .addCase(login.rejected, (state) => {
+        state.loading = false; // Set loading to false when login is rejected
         state.isLoggedIn = false;
         state.user = null;
       })
diff --git a/server/.secrets.example b/server/.secrets.example
index 280086e6..a44f7bca 100644
--- a/server/.secrets.example
+++ b/server/.secrets.example
@@ -15,5 +15,6 @@ DJANGO_ORCID_OAUTH2_URL=
 SERVER_VERSION=
 SERVER_URL=
 SERVER_DB_URL=
+USERDB_URL=
 DATABASE=
 EMAIL_BACKEND=
\ No newline at end of file