diff --git a/survey-frontend/src/SurveyContainerComponent.tsx b/survey-frontend/src/SurveyContainerComponent.tsx
index c77e9f8306d46aedb8e7553f745d094848f1da05..c419e97113f61234846d1e7c625b4ee699d589ac 100644
--- a/survey-frontend/src/SurveyContainerComponent.tsx
+++ b/survey-frontend/src/SurveyContainerComponent.tsx
@@ -22,7 +22,7 @@ function SurveyContainerComponent({ loadFrom, saveTo = '', readonly = false }) {
     }, []);
 
     if (surveyModel === undefined) {
-        return 'loading...'
+        return 'loading survey...'
     }
 
     async function getModel() {
@@ -128,7 +128,7 @@ function SurveyContainerComponent({ loadFrom, saveTo = '', readonly = false }) {
 
             </Row>
             <Row>
-                <SurveyNavigationComponent surveyModel={surveyModel} endSurvey={endSurvey} saveSurvey={saveSurvey} validatePage={validatePage}>
+                <SurveyNavigationComponent surveyModel={surveyModel} endSurvey={endSurvey} saveSurvey={saveSurvey} validatePage={validatePage} readonly={readonly}>
                     <SurveyComponent surveyModel={surveyModel} verificationStatus={verificationStatus} />
                 </SurveyNavigationComponent>
             </Row>
diff --git a/survey-frontend/src/SurveyNavigationComponent.tsx b/survey-frontend/src/SurveyNavigationComponent.tsx
index 1bb5ec824bb0810c4b930d704610c6cb6a5bbe2c..3a7acc588db4a9b66b3f75d63b7623f4e1492a36 100644
--- a/survey-frontend/src/SurveyNavigationComponent.tsx
+++ b/survey-frontend/src/SurveyNavigationComponent.tsx
@@ -3,9 +3,8 @@ import ProgressBar from './ProgressBar';
 import { Container, Row } from "react-bootstrap";
 
 
-function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) {
+function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children, readonly }) {
     const [pageNo, setPageNo] = useState(0);
-
     useEffect(() => {
         setPageNo(surveyModel.currentPageNo)
     }, [surveyModel]);
@@ -27,6 +26,9 @@ function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validat
     };
 
     const renderExternalNavigation = () => {
+        if (readonly) {
+            return <></>;
+        }
         return (
             <div className="navigation-block">
                 <div className="navigation-progress-container">