diff --git a/client/src/actions/bidActionCreator.js b/client/src/actions/bidActionCreator.js
index 184032f..8f867fa 100644
--- a/client/src/actions/bidActionCreator.js
+++ b/client/src/actions/bidActionCreator.js
@@ -17,3 +17,15 @@ export function error(error) {
     error: error
   };
 }
+
+export function success() {
+  return {
+    type: 'BID_SUCCESS'
+  };
+}
+
+export function reset() {
+  return {
+    type: 'RESET'
+  };
+}
diff --git a/client/src/components/Auction.jsx b/client/src/components/Auction.jsx
index 7362488..1e619c9 100644
--- a/client/src/components/Auction.jsx
+++ b/client/src/components/Auction.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Image } from 'semantic-ui-react';
+import { Container, Image, Message, Icon } from 'semantic-ui-react';
 import * as Auctions from '../actions/auctionActionCreator.jsx';
 import * as UserActions from '../actions/userActionCreator.jsx';
 import { connect } from 'react-redux';
@@ -126,6 +126,7 @@ class Auction extends Component {
       } else if(bid.bid > buyout) {
         alert('How about bidding for the buyout amount?');
       } else {
+        dispatch(Bids.toggleSend());
         fetch(`/auctions/${auctionId}/bids`, {
           method: 'POST',
           headers: new Headers({
@@ -138,15 +139,18 @@ class Auction extends Component {
         })
         .then(response => {
           if (!response.ok) {
-            throw Error(response.json());
+            const error = new Error(response.statusText);
+            error.status = response.status;
+            throw error;
           }
           return response.json();
         })
         .then(data => {
-          bid.current_bid = data.current_bid;
-          bid.current_bid_id = data.current_bid_id;
-          dispatch(Auctions.updateBid(bid));
-          alert(`You have successfully bid $${data.current_bid}`);
+          const sentBid = {};
+          sentBid.current_bid = data.current_bid;
+          sentBid.current_bid_id = data.current_bid_id;
+          dispatch(Auctions.updateBid(sentBid));
+          dispatch(Bids.success());
         })
         .catch(err => {
           dispatch(Bids.error(err));
@@ -167,7 +171,13 @@ class Auction extends Component {
     const { bid, user } = this.props;
     if (Object.keys(auction).length === 0) {
       return (
-        <p>loading~~~</p>
+        <Message icon>
+          <Icon name="circle notched" loading />
+          <Message.Content>
+            <Message.Header>Just a second!</Message.Header>
+            Content is on the way.
+          </Message.Content>
+        </Message>
       );
     } else {
       const end = new Moment(auction.end_date);
diff --git a/client/src/components/AuctionDetail.jsx b/client/src/components/AuctionDetail.jsx
index d14a907..c4f4946 100644
--- a/client/src/components/AuctionDetail.jsx
+++ b/client/src/components/AuctionDetail.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Container, Image, Grid, Button, Form, Input } from 'semantic-ui-react';
 import Moment from 'moment';
+import Messages from './Messages.jsx';
 
 let inputNode = null;
 
@@ -69,6 +70,7 @@ const AuctionDetail = ({auction, bid, setBid, handleClick, user, handleSave, han
                 }}>Submit</Button>
             </span>
           </Form.Group>
+          <Messages />
         </Container>
       </Grid.Column>
     </Grid>
diff --git a/client/src/components/Auctions.jsx b/client/src/components/Auctions.jsx
index 9f292a6..1389a33 100644
--- a/client/src/components/Auctions.jsx
+++ b/client/src/components/Auctions.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Container, Image, Grid, Divider } from 'semantic-ui-react';
+import { Container, Image, Grid, Divider, Message, Icon } from 'semantic-ui-react';
 import * as actions from '../actions/auctionActionCreator.jsx';
 import * as UserActions from '../actions/userActionCreator.jsx';
 
@@ -26,13 +26,15 @@ class Auctions extends React.Component {
     })
     .then((response) => {
       if (!response.ok) {
-        throw Error(response.json());
+        const error = new Error(response.statusText);
+        error.status = response.status;
+        throw error;
       } 
-        dispatch(actions.fetchingAuctions(false));
-        return response.json();
+      dispatch(actions.fetchingAuctions(false));
+      return response.json();
       })
     .then((auctions) => {
-     dispatch(actions.ongoingAuctionsFetchedSuccess(auctions));
+      dispatch(actions.ongoingAuctionsFetchedSuccess(auctions));
     })
     .catch((err) => {
       dispatch(actions.fetchingAuctions(false));
@@ -46,33 +48,55 @@ class Auctions extends React.Component {
   }
 
   render() {
-    const { auctions } = this.props;
-    if (auctions.length === 0) {
-      return <div>loading~~</div>;
-    } else {
+    const { auctions, isFetching, hasErrored, error } = this.props;
+    if (isFetching) {
+      return (
+        <Message icon>
+          <Icon name="circle notched" loading />
+          <Message.Content>
+            <Message.Header>Just a second!</Message.Header>
+            Auctions are on the way.
+          </Message.Content>
+        </Message>
+      );
+    }
+
+    if (hasErrored) {
       return (
         <Container>
-          <Grid>
-            <Grid.Row columns={3}>
-              {auctions.map(auction => (
-                <Grid.Column className="frame-squre" key={auction.id}>
-                  <div className="imageLink thumbnails" style={{backgroundImage: `url(${auction.artwork.image_url})`}} onClick={() => this.goToAuction(auction.id)} >
-                  <a className="ui ribbon label black">${_formatMoney(+auction.current_bid)}</a>
-                  </div>
-                  <Container>
-                    <h4 className="artName">
-                      {auction.artwork.art_name}
-                    </h4>
-                    <p className="artworkDescription">{auction.artwork.description}</p>
-                  </Container>
-                </Grid.Column>
-                )
-              )}
-            </Grid.Row>
-          </Grid>
+          <Message
+            header="Something Went Wrong!"
+            content="There's been an error loading this page. How about checking out some art and coming back in a minute?"
+          />
         </Container>
       );
     }
+    return (
+      <Container>
+        <Grid>
+          <Grid.Row columns={3}>
+            {auctions.map(auction => (
+              <Grid.Column className="frame-squre" key={auction.id}>
+                <div className="imageLink thumbnails" style={{backgroundImage: `url(${auction.artwork.image_url})`}} onClick={() => this.goToAuction(auction.id)} >
+                <a className="ui ribbon label black">${_formatMoney(+auction.current_bid)}</a>
+                </div>
+                <Container>
+                  <h4 className="artName">
+                    {auction.artwork.art_name}
+                  </h4>
+                  <p className="artworkDescription">{auction.artwork.description}</p>
+                </Container>
+              </Grid.Column>
+              )
+            )}
+          </Grid.Row>
+        </Grid>
+        <Message
+          header="There doesn't seem to be any content here. Maybe you should make some."
+          content="Signing up is quick and easy, click here to get started."
+        />
+      </Container>
+    );
   }
 }
 
diff --git a/client/src/components/Home.jsx b/client/src/components/Home.jsx
index 76dbaf5..fe34775 100644
--- a/client/src/components/Home.jsx
+++ b/client/src/components/Home.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, Card, Image, Divider, Container, Dimmer, Loader } from 'semantic-ui-react';
+import { Grid, Card, Image, Divider, Icon, Container, Dimmer, Loader, Message } from 'semantic-ui-react';
 import ImageGallery from 'react-image-gallery';
 import { connect } from 'react-redux';
 import * as Auctions from '../actions/auctionActionCreator.jsx';
@@ -21,6 +21,50 @@ const _formatMoney = (money) => {
   return money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 };
 
+const MessageWrapper = ({ data, isFetching, hasErrored, error, Component, history }) => {
+  if (isFetching) {
+    return (
+      <Message icon>
+        <Icon name="circle notched" loading />
+        <Message.Content>
+          <Message.Header>Just a second!</Message.Header>
+          Content is on the way.
+        </Message.Content>
+      </Message>
+    );
+  }
+
+  if (hasErrored) {
+    return (
+      <Container>
+        <Message
+          header="Something Went Wrong!"
+          content="There's been an error loading this page. How about checking out some art and coming back in a minute?"
+        />
+      </Container>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Container>
+        <Message
+          header="There doesn't seem to be any content here. Maybe you should make some."
+          content="Signing up is quick and easy, click here to get started."
+        />
+      </Container>
+    );
+  }
+  
+  return (
+    <Component
+      data={data}
+      history={history}
+    />
+  );
+
+};
+
 // render the description ... as floating right of the image
 // closed auctions should be rendered differently from the ongoing ones
 const MainArt = ({ art, history }) => {
@@ -36,33 +80,30 @@ const MainArt = ({ art, history }) => {
   );
 };
 
-const MainArts = ({ mainArts, history }) => {
-  if (!mainArts[0]) {
-    return <p>loading...</p>;
-  } else {
-    let images = [];
-    mainArts.forEach((item) => {
-      const imageObj = {
-        original: `${item.artwork.image_url}?${item.id}`,
-        description: `${item.first_name} ${item.last_name} Closing Price: $${_formatMoney(+item.buyout_price)}`, 
-      };
-      images.push(imageObj);
-    });
-    // shoud add acution id to onImage click
-    return (
-      <div className="carousel">
-        <ImageGallery
-          items={images}
-          slideInterval={7000}
-          autoPlay={true}
-          showThumbnails={false}
-          showFullscreenButton={false}
-          showPlayButton={false}
-          onClick={(e) => {onImageClick(e, history)}}
-        />
-      </div>
-    );
-  }
+const MainArts = ({ data, history }) => {
+  const mainArts = data;
+  let images = [];
+  mainArts.forEach((item) => {
+    const imageObj = {
+      original: `${item.artwork.image_url}?${item.id}`,
+      description: `${item.first_name} ${item.last_name} Closing Price: $${_formatMoney(+item.buyout_price)}`, 
+    };
+    images.push(imageObj);
+  });
+  // shoud add acution id to onImage click
+  return (
+    <div className="carousel">
+      <ImageGallery
+        items={images}
+        slideInterval={7000}
+        autoPlay={true}
+        showThumbnails={false}
+        showFullscreenButton={false}
+        showPlayButton={false}
+        onClick={(e) => {onImageClick(e, history)}}
+      />
+    </div>
+  );
 };
 
 const HomeAuction = ({ homeAuction, history }) => {
@@ -82,18 +123,15 @@ const HomeAuction = ({ homeAuction, history }) => {
   );
 };
 
-const HomeAuctions = ({ homeAuctions, history }) => {
-  if (!homeAuctions[0]) {
-    return <p>loading~~~</p>;
-  } else {
-    return (
-      <Grid columns="equal">
-        <Grid.Row className="frame-squre" columns={3}>
-          {homeAuctions.map(homeAuction => <HomeAuction key={homeAuction.artwork.id} homeAuction={homeAuction} history={history} />)}
-        </Grid.Row>
-      </Grid>
-    );
-  }
+const HomeAuctions = ({ data, history }) => {
+  const homeAuctions = data;
+  return (
+    <Grid columns="equal">
+      <Grid.Row className="frame-square" columns={3}>
+        {homeAuctions.map(homeAuction => <HomeAuction key={homeAuction.artwork.id} homeAuction={homeAuction} history={history} />)}
+      </Grid.Row>
+    </Grid>
+  );
 };
 
 const clickArtist = (id, history, dispatch) => {
@@ -116,18 +154,15 @@ const HomeArtist = ({ artist, history }) => {
   );
 };
 
-const HomeArtists = ({ homeArtists, history }) => {
-  if (!homeArtists[0]) {
-    return <div>loading~~~~</div>;
-  } else {
-    return (
-      <Grid>
-        <Grid.Row columns={3}>
-          {homeArtists.map(homeArtist => <HomeArtist key={homeArtist.id} artist={homeArtist} history={history} />)}
-        </Grid.Row>
-      </Grid>
-    );
-  }
+const HomeArtists = ({ data, history }) => {
+  const homeArtists = data;
+  return (
+    <Grid>
+      <Grid.Row columns={3}>
+        {homeArtists.map(homeArtist => <HomeArtist key={homeArtist.id} artist={homeArtist} history={history} />)}
+      </Grid.Row>
+    </Grid>
+  );
 };
 
 class Home extends Component {
@@ -143,7 +178,9 @@ class Home extends Component {
     fetch(`/home`)
     .then((response) => {
       if (!response.ok) {
-        throw Error(response.statusText);
+        const error = new Error(response.statusText);
+        error.status = response.error;
+        throw error;
       }
       dispatch(Auctions.fetchingAuctions(false));
       return response.json();
@@ -156,20 +193,42 @@ class Home extends Component {
     })
     .catch(() => {
       dispatch(Auctions.fetchingAuctions(false));
-      dispatch(Auctions.fetchAuctionErrored(true));
+      dispatch(Auctions.fetchAuctionErrored(true, err));
     });
   }
 
   render () {
+    const { mainArts, homeAuctions, homeArtists, hasErrored, error, history, isFetching } = this.props;
     return (
       <div>
-        <MainArts mainArts={this.props.mainArts} history={this.props.history} />
+        <MessageWrapper
+          Component={MainArts}
+          data={mainArts}
+          isFetching={isFetching}
+          hasErrored={hasErrored}
+          error={error}
+          history={history}
+        />
         <Divider />
         <h3>Auctions</h3>
-        <HomeAuctions homeAuctions={this.props.homeAuctions} history={this.props.history} />
+        <MessageWrapper
+          Component={HomeAuctions}
+          data={homeAuctions}
+          isFetching={isFetching}
+          hasErrored={hasErrored}
+          error={error}
+          history={history}
+        />
         <h3>Artists</h3>
         <Divider />
-        <HomeArtists homeArtists={this.props.homeArtists} history={this.props.history} />
+        <MessageWrapper
+          Component={HomeArtists}
+          data={homeArtists}
+          isFetching={isFetching}
+          hasErrored={hasErrored}
+          error={error}
+          history={history}
+        />
       </div>
     );
   }
@@ -181,7 +240,10 @@ const mapStateToProps = (state) => {
   return {
     mainArts: state.auctions.fetchedPassedAuctions,
     homeAuctions: state.auctions.fetchedOngoingAuctions,
-    homeArtists: state.auctions.fetchedFeaturedArts
+    homeArtists: state.auctions.fetchedFeaturedArts,
+    isFetching: state.auctions.isFetching,
+    hasErrored: state.auctions.hasErrored,
+    error: state.auctions.fetchAuctionsError
   };
 };
 
diff --git a/client/src/components/Messages.jsx b/client/src/components/Messages.jsx
new file mode 100644
index 0000000..792fb2c
--- /dev/null
+++ b/client/src/components/Messages.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Message, Icon } from 'semantic-ui-react';
+
+class Messages extends React.Component {
+  render() {
+    const { sendingBid, bidErrored, success, bid } = this.props;
+
+    if (sendingBid) {
+      return (
+        <Message icon>
+          <Icon name="circle notched" loading />
+          <Message.Content>
+            <Message.Header>Just a second!</Message.Header>
+            Your bid is on the way.
+          </Message.Content>
+        </Message>
+      );
+    }
+
+    if (bidErrored) {
+      return (
+        <Message
+          header="Something Went Wrong!"
+          content="There's been an error sending your bid. How about checking out some art and coming back in a minute?"
+        />
+      );
+    }
+
+    if (success) {
+      return (
+        <Message
+          header={`You Bid $${bid}.00`}
+          content="Congratulations. You're the highest bidder."
+        />
+      );
+    }
+
+    return null;
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.bid.error,
+    hasErrored: state.bid.bidErrored,
+    sendingBid: state.bid.sendingBid,
+    success: state.bid.success,
+    bid: state.bid.bid
+  };
+};
+
+export default connect(mapStateToProps)(Messages);
diff --git a/client/src/reducers/bidReducer.js b/client/src/reducers/bidReducer.js
index 7f8b07a..282e7e2 100644
--- a/client/src/reducers/bidReducer.js
+++ b/client/src/reducers/bidReducer.js
@@ -25,6 +25,16 @@ const bidReducer = (state = initialState, action) => {
         error: action.error,
         bidErrored: true
       };
+    case 'BID_SUCCESS':
+      return {
+        ...state,
+        success: true,
+        sendingBid: false
+      };
+    case 'RESET':
+      return {
+        initialState
+      };
     default:
       return state;
   }
diff --git a/server/database/dummyData.js b/server/database/dummyData.js
index a40507f..6aaf4c2 100644
--- a/server/database/dummyData.js
+++ b/server/database/dummyData.js
@@ -676,7 +676,7 @@ const auctions = [
 		owner_id: 2,
 		artwork_id: 6,
 		start_date: '2017-04-09 14:27:07',
-		end_date: '2017-05-05 14:27:07',
+		end_date: '2018-05-05 14:27:07',
 		start_price: 13000,
 		buyout_price: 20000,
 		current_bid_id: null,