diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx
index 7a1a0abb5..c864a5279 100644
--- a/src/forge/Main/CoderDepot.jsx
+++ b/src/forge/Main/CoderDepot.jsx
@@ -63,7 +63,7 @@ function CoderDepot(props){
   const [ website , setWebsite ] = useState(projectDetail.website ||undefined);
   const [ lesson_url , setLessonUrl ] = useState(projectDetail.lesson_url || undefined);
   const [ topics, setTopics] = useState(projectDetail.topics || undefined);
-  const [ readme , setReadme ] = useState(projectReadMe || undefined);
+  const [ readme , setReadme ] = useState((projectReadMe && JSON.parse(decodeURIComponent(projectReadMe))) || undefined);
   const [ defaultBranch , setDefaultBranch ] = useState(projectDetail.default_branch || undefined);
   const [ editReadme , setEditReadme ] = useState(false);
   const [ pullsFlag , setPullsFlag ] = useState(true);
diff --git a/src/redux/actions/server.js b/src/redux/actions/server.js
index 799609c3d..65d632f3a 100644
--- a/src/redux/actions/server.js
+++ b/src/redux/actions/server.js
@@ -65,6 +65,7 @@ export const setProjectReadMe = ({ owner,projectsId, branch }) => {
   return (dispatch) => {
     return getProjectReadMe(owner, projectsId, branch).then(res => {
       if (res && res.data) {
+        res.data = encodeURIComponent( JSON.stringify(res.data) )
         dispatch({
           type: types.GET_PROJECT_README,
           payload: res.data