diff --git a/app/actions/actionTypes.js b/app/actions/actionTypes.js
index 98d0ed7..273f45b 100644
--- a/app/actions/actionTypes.js
+++ b/app/actions/actionTypes.js
@@ -45,7 +45,8 @@ const actionType = {
   UNLOCK_ACCOUNT_ERROR: 'UNLOCK_ACCOUNT_ERROR',
   GET_USER_BALANCE_LOADING: 'GET_USER_BALANCE_LOADING',
   GET_USER_BALANCE_SUCCESS: 'GET_USER_BALANCE_SUCCESS',
-  GET_USER_BALANCE_ERROR: 'GET_USER_BALANCE_ERROR'
+  GET_USER_BALANCE_ERROR: 'GET_USER_BALANCE_ERROR',
+  SHUFFLE_ALL_BOOKS: 'SHUFFLE_ALL_BOOKS'
 }
 
 export default actionType
diff --git a/app/actions/helpers.js b/app/actions/helpers.js
new file mode 100644
index 0000000..6de2ccb
--- /dev/null
+++ b/app/actions/helpers.js
@@ -0,0 +1,8 @@
+ export function shuffleArray(array){
+  let a = array
+  for (let i = a.length; i; i--) {
+      let j = Math.floor(Math.random() * i);
+      [a[i - 1], a[j]] = [a[j], a[i - 1]];
+  }
+  return a
+}
\ No newline at end of file
diff --git a/app/actions/libraryActions.js b/app/actions/libraryActions.js
index 04e1820..defe2a1 100644
--- a/app/actions/libraryActions.js
+++ b/app/actions/libraryActions.js
@@ -4,7 +4,7 @@ import actionType from './actionTypes'
 import { sessionService } from 'redux-react-session'
 import axios from 'axios'
 import NotificationType from '../components/notifications/NotificationTypes'
-
+import {shuffleArray} from './helpers'
 export const action = (type, flag) => {
   return {
     type: type,
@@ -316,3 +316,11 @@ export const unlockAccount = (session, user, password, flag) => {
     })
   }
 }
+
+export const shuffleAllBooks = (books) =>{
+  return (dispatch) => {
+    console.log("books",books)
+    let shuffleBookList = books.length ? shuffleArray(books) : books
+    dispatch(action(actionType.SHUFFLE_ALL_BOOKS,shuffleBookList))
+  }
+}
diff --git a/app/components/BooksPage.js b/app/components/BooksPage.js
index 302ecfd..2514211 100644
--- a/app/components/BooksPage.js
+++ b/app/components/BooksPage.js
@@ -54,6 +54,7 @@ export class BooksPage extends React.Component {
     if(!this.props.books.allBooks.length) {
         this.props.getAllBooks()
     }
+    this.props.shuffleAllBooks(this.props.books.allBooks)
   }
   componentWillReceiveProps (nextProps) {
     if(!nextProps.isExistingMember.user) {
diff --git a/app/components/utils/Image.js b/app/components/utils/Image.js
index c268e13..773c50b 100644
--- a/app/components/utils/Image.js
+++ b/app/components/utils/Image.js
@@ -10,6 +10,14 @@ export default class Image extends React.Component {
     }
     this.imageEl = ''
   }
+  componentWillReceiveProps (nextProps) {
+    console.log(nextProps)
+    if(nextProps) {
+      this.setState({
+        src: nextProps.src
+      })
+    }
+  }
   handleLoad () {
     this.setState({
       loading: false
diff --git a/app/reducers/libraryReducer.js b/app/reducers/libraryReducer.js
index c75326b..eded241 100644
--- a/app/reducers/libraryReducer.js
+++ b/app/reducers/libraryReducer.js
@@ -264,6 +264,12 @@ export const allBooksReducers = (state = [], action) => {
         allBooks : books
       }
     }
+    case 'SHUFFLE_ALL_BOOKS': {
+      return {
+        ...state,
+        allBooks: action.payload
+      }
+    }
     default:
       return state
   }