diff --git a/functions/handlers/post.js b/functions/handlers/post.js
index 340220c..c24d9a8 100644
--- a/functions/handlers/post.js
+++ b/functions/handlers/post.js
@@ -56,7 +56,7 @@ exports.getallPostsforUser = (req, res) => {
     .catch(function(err) {
       return res
         .status(500)
-        .json("Failed to retrieve user's posts from database.", err);
+        .json({message: "Failed to retrieve user's posts from database.", error: err});
     });
 };
 
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 70b67d0..2b31bb5 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/twistter-frontend/src/Writing_Microblogs.js
@@ -8,6 +8,7 @@ import TextField from '@material-ui/core/TextField';
 // import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withStyles from "@material-ui/styles/withStyles";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const styles = {
   container: {
@@ -21,6 +22,13 @@ const styles = {
   },
   textField: {
     marginBottom: 15
+  },
+  progress: {
+    position: "absolute"
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
   }
 }
 
@@ -31,7 +39,8 @@ class Writing_Microblogs extends Component {
       value: "",
       title: "",
       topics: "",
-      characterCount: 250
+      characterCount: 250,
+      loading: false
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -56,11 +65,15 @@ class Writing_Microblogs extends Component {
       microBlogTitle: this.state.title,
       microBlogTopics: this.state.topics.split(", ")
     };
+
+    this.setState({
+      loading: true
+    })
     const headers = {
       headers: { "Content-Type": "application/json" }
     };
 
-    axios
+    let postPromise = axios
       .post("/putPost", postData, headers) // TODO: add topics
       .then(res => {
         // alert("Post was shared successfully!");
@@ -71,8 +84,9 @@ class Writing_Microblogs extends Component {
         console.error(err);
       });
     console.log(postData.microBlogTopics);
+    let topicPromises = [];
     postData.microBlogTopics.forEach(topic => {
-      axios
+      topicPromises.push(axios
         .post("/putTopic", {
           following: topic
         })
@@ -81,10 +95,24 @@ class Writing_Microblogs extends Component {
         })
         .catch(err => {
           console.error(err);
-        });
+        })
+      )
     });
     event.preventDefault();
-    this.setState({ value: "", title: "", characterCount: 250, topics: "" });
+    topicPromises.push(postPromise);
+    Promise.all(topicPromises)
+      .then(() => {
+        this.setState({ 
+          value: "", 
+          title: "", 
+          characterCount: 250, 
+          topics: "",
+          loading: false
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      })
   }
 
   handleChangeforPost(event) {
@@ -149,12 +177,14 @@ class Writing_Microblogs extends Component {
             autoComplete='off'
           />
           <Button
+            className={classes.button}
             onClick={this.handleSubmit}
-            // disabled={loading}
+            disabled={this.state.loading}
             variant="outlined"
             color="primary"
             >
               Share Post
+            {this.state.loading && <CircularProgress size={30} className={classes.progress} />}
           </Button>
         </form>
       </div>
diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index 150df29..3f47289 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -35,12 +35,14 @@ const styles = {
 class Home extends Component {
   state = {
     likes: [],
+    loading: false,
     following: null,
     topics: null
   };
 
   componentDidMount() {
-    axios
+    this.setState({loading: true});
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
@@ -50,7 +52,7 @@ class Home extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let postPromise = axios
       .get("/getallPosts")
       .then(res => {
         // console.log(res.data);
@@ -60,6 +62,16 @@ class Home extends Component {
       })
       .catch(err => console.log(err));
 
+      Promise.all([userPromise, postPromise])
+        .then(() => {
+          this.setState({
+            loading: false
+          })
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+
     this.props.getLikes();
   }
 
@@ -175,7 +187,9 @@ class Home extends Component {
       <p>Loading post...</p>
     );
 
-    return authenticated ? (
+    return (
+      authenticated ? (
+        this.state.loading ? (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>) :
       <Grid container>
         <Grid item sm={4} xs={8}>
           <Writing_Microblogs />
@@ -183,42 +197,39 @@ class Home extends Component {
         <Grid item sm={4} xs={8}>
           {postMarkup}
         </Grid>
-      </Grid>
-    ) : loading ? (
-      <CircularProgress
-        size={60}
-        style={{ marginTop: "300px" }}
-      ></CircularProgress>
-    ) : (
-      <div>
-        <div>
-          <img src={logo} className="app-logo" alt="logo" />
-          <br />
-          <br />
-          <b>Welcome to Twistter!</b>
-          <br />
-          <br />
-          <b>See the most interesting topics people are following right now.</b>
-        </div>
+      </Grid> 
+     ) : loading ?
+          (<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
+        :
+          (
+            <div>
+              <div>
+                <img src={logo} className="app-logo" alt="logo" />
+                <br/><br/>
+                <b>Welcome to Twistter!</b> 
+                <br/><br/>
+                <b>See the most interesting topics people are following right now.</b> 
+              </div>
 
-        <br />
-        <br />
-        <br />
-        <br />
+              <br />
+              <br />
+              <br />
+              <br />
 
-        <div>
-          <b>Join today or sign in if you already have an account.</b>
-          <br />
-          <br />
-          <form action="./signup">
-            <button className="authButtons signup">Sign up</button>
-          </form>
-          <br />
-          <form action="./login">
-            <button className="authButtons login">Sign in</button>
-          </form>
-        </div>
-      </div>
+              <div>
+                <b>Join today or sign in if you already have an account.</b>
+                <br />
+                <br />
+                <form action="./signup">
+                  <button className="authButtons signup">Sign up</button>
+                </form>
+                <br />
+                <form action="./login">
+                  <button className="authButtons login">Sign in</button>
+                </form>
+              </div>
+            </div>
+          )
     );
   }
 }
diff --git a/twistter-frontend/src/pages/directMessages.js b/twistter-frontend/src/pages/directMessages.js
index eadadf9..2201ac6 100644
--- a/twistter-frontend/src/pages/directMessages.js
+++ b/twistter-frontend/src/pages/directMessages.js
@@ -377,7 +377,7 @@ export class directMessages extends Component {
 		const open = Boolean(this.state.anchorEl);
 		const id = open ? 'simple-popover' : undefined;
 
-        let dmListMarkup = this.state.dmData ? (
+    let dmListMarkup = this.state.dmData ? (
 			this.state.dmData.map((channel) => (
 				<Card
 					onClick={this.handleClickChannel}
@@ -524,35 +524,35 @@ export class directMessages extends Component {
 											onChange={this.handleChangeAddDMUsername}
 											value={this.state.createDMUsername}
 											label="Username"
-                                            variant="outlined"
-                                            helperText={errors.createDirectMessage}
-                                            error={errors.createDirectMessage ? true : false}
+                      variant="outlined"
+                      helperText={errors.createDirectMessage}
+                      error={errors.createDirectMessage ? true : false}
 											style={{
-                                                width: 265,
-                                                marginRight: 10,
-                                                marginLeft: 10,
-                                                textAlign: 'center',
+                        width: 265,
+                        marginRight: 10,
+                        marginLeft: 10,
+                        textAlign: 'center',
 											}}
 										/>
 									</Grid>
-                                    <Grid item> 
-                                        <Button
-                                            className={classes.createButton}
-                                            variant="outlined"
-                                            color="primary"
-                                            onClick={this.handleClickCreate}
-                                            disabled={
-                                                creatingDirectMessage ||
-                                                this.state.createDMUsername === ""    
-                                            }
-                                        >
-                                            Create
-                                            {creatingDirectMessage && 
-											    <CircularProgress size={30} style={{position: "absolute"}}/>
-                                                // Won't accept classes style for some reason
-                                            }
-                                        </Button>
-                                    </Grid>
+                  <Grid item> 
+                    <Button
+                      className={classes.createButton}
+                      variant="outlined"
+                      color="primary"
+                      onClick={this.handleClickCreate}
+                      disabled={
+                        creatingDirectMessage ||
+                        this.state.createDMUsername === ""    
+                      }
+                    >
+                      Create
+                      {creatingDirectMessage && 
+                      // Won't accept classes style for some reason
+                      <CircularProgress size={30} style={{position: "absolute"}}/>
+                      }
+                    </Button>
+                  </Grid>
 								</Grid>
 							</Grid>
 							<Grid item sm />
@@ -572,13 +572,13 @@ export class directMessages extends Component {
 						<Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
 							{dmListMarkup}
 						</Grid>
-                        <Grid item className={classes.dmItemsLower}>
-                            <Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
-								<Box className={classes.dmListItemContainer}>
-                                    {addDMMarkup}
-                                </Box>
-							</Card>
-                        </Grid>
+              <Grid item className={classes.dmItemsLower}>
+                <Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
+                  <Box className={classes.dmListItemContainer}>
+                    {addDMMarkup}
+                  </Box>
+							  </Card>
+              </Grid>
 					</Grid>
 				</Grid>
 				<Grid item className={classes.messagesGrid} sm>
@@ -596,30 +596,30 @@ export class directMessages extends Component {
 										variant="outlined"
 										multiline
 										rows={2}
-                                        margin="dense"
-                                        value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""}
-                                        onChange={this.handleChangeMessage}
+                    margin="dense"
+                    value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""}
+                    onChange={this.handleChangeMessage}
 									/>
-                                    <Fab 
-                                        className={classes.messageButton}
-                                        onClick={this.handleClickSend}
-                                        disabled={
-                                            sendingDirectMessage ||
-                                            !this.state.drafts[this.state.selectedChannel.dmId] ||
-                                            this.state.drafts[this.state.selectedChannel.dmId] === ""
-                                        }
-                                    >
+                    <Fab 
+                      className={classes.messageButton}
+                      onClick={this.handleClickSend}
+                      disabled={
+                        sendingDirectMessage ||
+                        !this.state.drafts[this.state.selectedChannel.dmId] ||
+                        this.state.drafts[this.state.selectedChannel.dmId] === ""
+                      }
+                    >
 										<SendIcon style={{ color: '#FFFFFF' }} />
-                                        {
-                                            sendingDirectMessage && 
-                                            <CircularProgress size={30} style={{position: "absolute"}}/>
-                                            // Won't accept classes style for some reason
-                                        }
+                    {
+                      sendingDirectMessage && 
+                      <CircularProgress size={30} style={{position: "absolute"}}/>
+                      // Won't accept classes style for some reason
+                    }
 									</Fab>
 								</Box>
 							</Card>
 						)}
-                        {!this.state.hasChannelSelected &&
+            {!this.state.hasChannelSelected &&
 						this.state.dmData && <Typography>Select a DM on the left</Typography>}
 					</Box>
 				</Grid>
diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index 0ed10e0..99b26a1 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/twistter-frontend/src/pages/otherUser.js
@@ -22,6 +22,7 @@ import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import DoneIcon from "@material-ui/icons/Done";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 // component
 import "../App.css";
@@ -79,6 +80,7 @@ class user extends Component {
       posts: null,
       myTopics: null,
       followingList: null
+      loading: false
     };
   }
 
@@ -133,7 +135,8 @@ class user extends Component {
   };
 
   componentDidMount() {
-    axios
+    this.setState({loading: true});
+    let otherUserPromise = axios
       .post("/getUserDetails", {
         handle: this.state.profile
       })
@@ -145,7 +148,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let userPromise = axios
       .get("/user")
       .then(res => {
         // console.log(res.data.credentials.following);
@@ -165,7 +168,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let posts = axios
       .post("/getOtherUsersPosts", {
         handle: this.state.profile
       })
@@ -193,6 +196,14 @@ class user extends Component {
       .catch(function(err) {
         console.log(err);
       });
+    
+      Promise.all([otherUserPromise, userPromise, posts])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error);
+        })
   }
 
   render() {
@@ -300,6 +311,7 @@ class user extends Component {
     );
 
     return (
+      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 6a189b6..59c096e 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -13,6 +13,7 @@ import CardMedia from "@material-ui/core/CardMedia";
 import CardContent from "@material-ui/core/CardContent";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -76,7 +77,8 @@ class user extends Component {
       profile: null,
       imageUrl: null,
       topics: null,
-      newTopic: ""
+      newTopic: "",
+      loading: false
     };
   }
 
@@ -127,7 +129,8 @@ class user extends Component {
   }
 
   componentDidMount() {
-    axios
+    this.setState({loading: true})
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
@@ -141,7 +144,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let postsPromise = axios
       .get("/getallPostsforUser")
       .then(res => {
         // console.log(res.data);
@@ -150,6 +153,14 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
+      Promise.all([userPromise, postsPromise])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error)
+        })
   }
 
   formatDate(dateString) {
@@ -259,6 +270,7 @@ class user extends Component {
     ) : null;
 
     return (
+      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
       <div>
         {/* <Paper className={classes.paper}> */}
         <Grid container direction="column">