diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx
index ac826889..9662f995 100644
--- a/src/components/Tutorials/NewTutorial/index.jsx
+++ b/src/components/Tutorials/NewTutorial/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { AppstoreAddOutlined } from "@ant-design/icons";
 import { useDispatch, useSelector } from "react-redux";
 import { createTutorial } from "../../../store/actions";
@@ -19,7 +19,6 @@ import DescriptionIcon from "@mui/icons-material/Description";
 import MovieIcon from "@mui/icons-material/Movie";
 import Select from "react-select";
 import { common } from "@mui/material/colors";
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: "flex",
@@ -34,7 +33,6 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: deepPurple[500]
   }
 }));
-
 const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
   const firebase = useFirebase();
   const firestore = useFirestore();
@@ -43,11 +41,13 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
+  const [imageIconClicked,setImageIconClicked]=useState(false)
   const [formValue, setformValue] = useState({
     title: "",
     summary: "",
     owner: ""
   });
+  const [tutorialImage, setTutorialImage] = useState(null);
 
   const loadingProp = useSelector(
     ({
@@ -63,15 +63,12 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
       }
     }) => error
   );
-
   useEffect(() => {
     setLoading(loadingProp);
   }, [loadingProp]);
-
   useEffect(() => {
     setError(errorProp);
   }, [errorProp]);
-
   const organizations = useSelector(
     ({
       profile: {
@@ -79,7 +76,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
       }
     }) => organizations
   );
-
   const userHandle = useSelector(
     ({
       firebase: {
@@ -87,7 +83,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
       }
     }) => handle
   );
-
   const displayName = useSelector(
     ({
       firebase: {
@@ -95,11 +90,9 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
       }
     }) => displayName
   );
-
   //This name should be replaced by displayName when implementing backend
   const sampleName = "User Name Here";
   const allowOrgs = organizations && organizations.length > 0;
-
   const orgList =
     allowOrgs > 0
       ? organizations
@@ -115,12 +108,14 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
 
   useEffect(() => {
     setVisible(viewModal);
+    setImageIconClicked(false)
   }, [viewModal]);
 
   const onSubmit = formData => {
     formData.preventDefault();
     const tutorialData = {
       ...formValue,
+      tutorialImage: tutorialImage,
       created_by: userHandle,
       is_org: userHandle !== formValue.owner,
       completed: false
@@ -128,7 +123,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     console.log(tutorialData);
     createTutorial(tutorialData)(firebase, firestore, dispatch, history);
   };
-
   const onOwnerChange = value => {
     setformValue(prev => ({
       ...prev,
@@ -138,13 +132,33 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
 
   const handleChange = e => {
     const { name, value } = e.target;
-
     setformValue(prev => ({
       ...prev,
       [name]: value
     }));
   };
 
+  const fileInputRef = useRef(null);
+
+  const handleIconClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleFileChange = event => {
+    setImageIconClicked(true)
+    const selectedFile = event.target.files[0];
+
+    if (selectedFile) {
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        const base64Result = reader.result;
+        setTutorialImage(base64Result);
+      };
+      reader.readAsDataURL(selectedFile);
+    }
+  };
+
   const classes = useStyles();
   return (
     <Modal
@@ -194,7 +208,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             />
           </Typography>
         </Box>
-
         <form id="tutorialNewForm">
           <TextField
             prefix={
@@ -210,7 +223,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             style={{ marginBottom: "2rem" }}
             onChange={e => handleChange(e)}
           />
-
           <TextField
             prefix={
               <AppstoreAddOutlined style={{ color: "rgba(0,0,0,.25)" }} />
@@ -227,7 +239,14 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
           />
 
           <IconButton>
-            <ImageIcon />
+            <ImageIcon onClick={handleIconClick} sx={{color : imageIconClicked ? '#1876d3' : ''}} />
+            <input
+              type="file"
+              accept="image/png, image/jpeg"
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              onChange={handleFileChange}
+            />
           </IconButton>
           <IconButton>
             <MovieIcon />
@@ -235,7 +254,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
           <IconButton>
             <DescriptionIcon />
           </IconButton>
-
           <div className="mb-0">
             <div style={{ float: "right" }}>
               <Button
@@ -277,5 +295,4 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     </Modal>
   );
 };
-
-export default NewTutorial;
+export default NewTutorial;
\ No newline at end of file
diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js
index 7d273c1d..ce434375 100644
--- a/src/store/actions/tutorialsActions.js
+++ b/src/store/actions/tutorialsActions.js
@@ -122,7 +122,8 @@ export const createTutorial =
   tutorialData => async (firebase, firestore, dispatch, history) => {
     try {
       dispatch({ type: actions.CREATE_TUTORIAL_START });
-      const { title, summary, owner, created_by, is_org } = tutorialData;
+      const { title, summary, owner, tutorialImage, created_by, is_org } =
+        tutorialData;
 
       const setData = async () => {
         const document = firestore.collection("tutorials").doc();
@@ -139,7 +140,7 @@ export const createTutorial =
           title,
           tutorial_id: documentID,
           featured_image: "",
-          icon: "",
+          icon: tutorialImage,
           url: "",
           background_color: "#ffffff",
           text_color: "#000000",
@@ -230,36 +231,36 @@ export const getCurrentTutorialData =
 
 export const addNewTutorialStep =
   ({ owner, tutorial_id, title, time, id }) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_START });
+  async (firebase, firestore, dispatch) => {
+    try {
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_START });
 
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(id)
-          .set({
-            content: `Switch to editor mode to begin <b>${title}</b> step`,
-            id,
-            time,
-            title,
-            visibility: true,
-            deleted: false
-          });
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(id)
+        .set({
+          content: `Switch to editor mode to begin <b>${title}</b> step`,
+          id,
+          time,
+          title,
+          visibility: true,
+          deleted: false
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
 
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS });
-      } catch (e) {
-        console.log("CREATE_TUTORIAL_STEP_FAIL", e.message);
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message });
-      }
-    };
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS });
+    } catch (e) {
+      console.log("CREATE_TUTORIAL_STEP_FAIL", e.message);
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message });
+    }
+  };
 
 export const clearCreateTutorials = () => dispatch =>
   dispatch({ type: actions.CLEAR_CREATE_TUTORIALS_STATE });
@@ -305,78 +306,78 @@ export const setCurrentStepContent =
 
 export const hideUnHideStep =
   (owner, tutorial_id, step_id, visibility) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        /* not being used */
-        // const type = await checkUserOrOrgHandle(owner)(firebase);
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(step_id)
-          .update({
-            [`visibility`]: !visibility,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      /* not being used */
+      // const type = await checkUserOrOrgHandle(owner)(firebase);
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(step_id)
+        .update({
+          [`visibility`]: !visibility,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const publishUnpublishTutorial =
   (owner, tutorial_id, isPublished) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .update({
-            ["isPublished"]: !isPublished
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .update({
+          ["isPublished"]: !isPublished
+        });
 
-        getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const removeStep =
   (owner, tutorial_id, step_id, current_step_no) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(step_id)
-          .delete()
-
-        // const data = await firestore
-        //   .collection("tutorials")
-        //   .doc(tutorial_id)
-        //   .collection("steps")
-        //   .doc(step_id)
-        //   .get();
-
-        await setCurrentStepNo(
-          current_step_no > 0 ? current_step_no - 1 : current_step_no
-        )(dispatch);
-
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+  async (firebase, firestore, dispatch) => {
+    try {
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(step_id)
+        .delete();
+
+      // const data = await firestore
+      //   .collection("tutorials")
+      //   .doc(tutorial_id)
+      //   .collection("steps")
+      //   .doc(step_id)
+      //   .get();
+
+      await setCurrentStepNo(
+        current_step_no > 0 ? current_step_no - 1 : current_step_no
+      )(dispatch);
+
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const setCurrentStep = data => async dispatch =>
   dispatch({ type: actions.SET_EDITOR_DATA, payload: data });
@@ -465,69 +466,69 @@ export const remoteTutorialImages =
 
 export const updateStepTitle =
   (owner, tutorial_id, step_id, step_title) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials/${tutorial_id}/steps`;
-        await firestore
-          .collection(dbPath)
-          .doc(step_id)
-          .update({
-            [`title`]: step_title,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials/${tutorial_id}/steps`;
+      await firestore
+        .collection(dbPath)
+        .doc(step_id)
+        .update({
+          [`title`]: step_title,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  };
 
 export const updateStepTime =
   (owner, tutorial_id, step_id, step_time) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials/${tutorial_id}/steps`;
-
-        await firestore
-          .collection(dbPath)
-          .doc(step_id)
-          .update({
-            [`time`]: step_time,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials/${tutorial_id}/steps`;
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await firestore
+        .collection(dbPath)
+        .doc(step_id)
+        .update({
+          [`time`]: step_time,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
+
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const setTutorialTheme =
   ({ tutorial_id, owner, bgColor, textColor }) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials`;
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials`;
 
-        await firestore.collection(dbPath).doc(tutorial_id).update({
-          text_color: textColor,
-          background_color: bgColor,
-          updatedAt: firestore.FieldValue.serverTimestamp()
-        });
+      await firestore.collection(dbPath).doc(tutorial_id).update({
+        text_color: textColor,
+        background_color: bgColor,
+        updatedAt: firestore.FieldValue.serverTimestamp()
+      });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };