diff --git a/new/package.json b/new/package.json
index 9ea66672..ba448028 100644
--- a/new/package.json
+++ b/new/package.json
@@ -22,6 +22,26 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "prettier": {
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "requirePragma": false,
+    "insertPragma": false,
+    "proseWrap": "preserve",
+    "htmlWhitespaceSensitivity": "css",
+    "vueIndentScriptAndStyle": false,
+    "endOfLine": "lf",
+    "embeddedLanguageFormatting": "auto"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/new/src/App.tsx b/new/src/App.tsx
index 34610129..205b7e1f 100644
--- a/new/src/App.tsx
+++ b/new/src/App.tsx
@@ -30,4 +30,4 @@ function App() {
   )
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/new/src/components/ScenarioOverview/ScenarioOverview.tsx b/new/src/components/ScenarioOverview/ScenarioOverview.tsx
index 58784d4d..f44e01be 100644
--- a/new/src/components/ScenarioOverview/ScenarioOverview.tsx
+++ b/new/src/components/ScenarioOverview/ScenarioOverview.tsx
@@ -91,32 +91,23 @@ export function MenuBar() {
     return(
         <StyledDrawer variant="permanent">
             <List>
-                <ListItem sx={{ paddingTop: 0.1, paddingBottom: 0.1 }}>
-                    <ListItemText primary={<Typography variant="h6">SUMMARY</Typography>} />
-                </ListItem>
                 <List>
                     <ListItem sx={{ paddingTop: 0.1, paddingBottom: 0.1 }}>
-                        <ListItemText primary={
-                            <Link href="http://localhost:3000" underline="none" sx={{ color: 'inherit' }}>
-                                All Scenarios
-                            </Link>}
-                        />
-                    </ListItem>
-                    <ListItem sx={{ paddingTop: 0.1, paddingBottom: 0.1 }}>
-                        <ListItemText primary={
-                            <Link href="http://localhost:3000" underline="none" sx={{ color: 'inherit' }}>
-                                Failed Scenarios
-                            </Link>}
-                        />
-                    </ListItem>
-                    <ListItem sx={{ paddingTop: 0.1, paddingBottom: 0.1 }}>
-                        <ListItemText primary={
-                            <Link href="http://localhost:3000" underline="none" sx={{ color: 'inherit' }}>
-                                Pending Scenarios
-                            </Link>}
-                        />
+                        <ListItemText primary={<Typography variant="h6">SUMMARY</Typography>} />
                     </ListItem>
+                    <List>
+                        {['All Scenarios', 'Failed Scenarios', 'Pending Scenarios'].map((scenario, index) => (
+                            <ListItem key={index} sx={{ paddingTop: 0.1, paddingBottom: 0.1 }}>
+                                <ListItemText primary={
+                                    <Link href="http://localhost:3000" underline="none" sx={{ color: 'inherit' }}>
+                                        {scenario}
+                                    </Link>}
+                                />
+                            </ListItem>
+                        ))}
+                    </List>
                 </List>
+                {/* Workshop: Use forEach to implement missing subitems. */}
                 <ListItem>
                     <ListItemText primary={<Typography variant="h6">TAGS</Typography>} />
                 </ListItem>
diff --git a/new/src/components/Scenarios/SingleScenarioView.tsx b/new/src/components/Scenarios/SingleScenarioView.tsx
index 33e2e086..e4011f1f 100644
--- a/new/src/components/Scenarios/SingleScenarioView.tsx
+++ b/new/src/components/Scenarios/SingleScenarioView.tsx
@@ -14,7 +14,7 @@ export function SingleScenarioView(props: { reportName: string; scenario: Scenar
                         <MenuBar/>
                     </div>
                 </Grid>
-                <Grid item xs={12} md={11}>
+                <Grid item xs={12} md={11}> {/* Workshop: Extract to new component.  */}
                     <Grid container direction="column">
                         <Grid item xs={12}>
                             <div style={{ height: '20em'}}>
diff --git a/new/src/components/casesTable/CasesTable.tsx b/new/src/components/casesTable/CasesTable.tsx
index 2fbb70df..7021740e 100644
--- a/new/src/components/casesTable/CasesTable.tsx
+++ b/new/src/components/casesTable/CasesTable.tsx
@@ -28,4 +28,4 @@ interface Column {
 export function casesTable(props: CasesTableProps) {
 
     return (<div></div>);
-}
\ No newline at end of file
+}
diff --git a/new/src/index.tsx b/new/src/index.tsx
index 032464fb..ba9c4453 100644
--- a/new/src/index.tsx
+++ b/new/src/index.tsx
@@ -1,12 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./i18n/en.json";
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
+i18n.use(initReactI18next).init({
+    resources: {
+        en: { translation: en }
+    },
+    lng: "en",
+    fallbackLng: "en",
+    interpolation: {
+        escapeValue: false
+    }
+});
+
 root.render(
   <React.StrictMode>
     <App />