diff --git a/src/commons/application/Application.tsx b/src/commons/application/Application.tsx
index 61af7a3eeb..88f7c52a39 100644
--- a/src/commons/application/Application.tsx
+++ b/src/commons/application/Application.tsx
@@ -88,7 +88,7 @@ const Application: React.FC = () => {
       };
     }
 
-    const message = Messages.ExtensionPing();
+    const message = Messages.ExtensionPing(window.origin);
     sendToWebview(message);
 
     window.addEventListener('message', event => {
@@ -116,17 +116,27 @@ const Application: React.FC = () => {
           }
           break;
         case MessageTypeNames.Text:
-          const code = message.code;
+          const { workspaceLocation, code } = message;
           console.log(`FRONTEND: TextMessage: ${code}`);
-          // TODO: Don't change ace editor directly
-          // const elements = document.getElementsByClassName('react-ace');
-          // if (elements.length === 0) {
-          //   return;
-          // }
-          // // @ts-expect-error: ace is not available at compile time
-          // const editor = ace.edit(elements[0]);
-          // editor.setValue(code);
-          dispatch(WorkspaceActions.updateEditorValue('assessment', 0, code));
+          dispatch(WorkspaceActions.updateEditorValue(workspaceLocation, 0, code));
+          break;
+        case MessageTypeNames.EvalEditor:
+          dispatch(WorkspaceActions.evalEditor(message.workspaceLocation));
+          break;
+        case MessageTypeNames.Navigate:
+          window.location.pathname = message.route;
+          // TODO: Figure out why this doesn't work, this is faster in theory
+          // navigate(message.route);
+          break;
+        case MessageTypeNames.McqQuestion:
+          dispatch(WorkspaceActions.showMcqPane(message.workspaceLocation, message.options));
+          break;
+        case MessageTypeNames.McqAnswer:
+          console.log(`FRONTEND: MCQAnswerMessage: ${message}`);
+          dispatch(SessionActions.submitAnswer(message.questionId, message.choice));
+          break;
+        case MessageTypeNames.AssessmentAnswer:
+          dispatch(SessionActions.submitAnswer(message.questionId, message.answer));
           break;
       }
     });
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
index 71ec517059..9b213f5097 100644
--- a/src/commons/assessment/Assessment.tsx
+++ b/src/commons/assessment/Assessment.tsx
@@ -20,10 +20,11 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import classes from 'src/styles/Academy.module.scss';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';
@@ -60,6 +61,23 @@ const Assessment: React.FC = () => {
   const { courseId, role, assessmentOverviews: assessmentOverviewsUnfiltered } = useSession();
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    if (assessmentOverviewsUnfiltered && courseId) {
+      sendToWebview(
+        Messages.NotifyAssessmentsOverview(
+          assessmentOverviewsUnfiltered.map(oa => ({
+            type: oa.type,
+            closeAt: oa.closeAt,
+            id: oa.id,
+            isPublished: oa.isPublished,
+            title: oa.title
+          })),
+          courseId
+        )
+      );
+    }
+  }, [assessmentOverviewsUnfiltered, courseId]);
+
   const toggleClosedAssessments = () => setShowClosedAssessments(!showClosedAssessments);
   const toggleOpenAssessments = () => setShowOpenedAssessments(!showOpenedAssessments);
   const toggleUpcomingAssessments = () => setShowUpcomingAssessments(!showUpcomingAssessments);
diff --git a/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx b/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx
index 20138018e5..23412daa51 100644
--- a/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx
+++ b/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx
@@ -96,6 +96,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
   const [sessionId, setSessionId] = useState('');
   const [isSubmitted, setIsSubmitted] = useState(false);
   const { isMobileBreakpoint } = useResponsive();
+  const isVscode = useTypedSelector(state => state.vscode.isVscode);
 
   const assessment = useTypedSelector(state => state.session.assessments[props.assessmentId]);
   const assessmentOverviews = useTypedSelector(state => state.session.assessmentOverviews);
@@ -244,10 +245,10 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
   useEffect(() => {
     if (!selectedTab) return;
 
-    if (!isMobileBreakpoint && mobileOnlyTabIds.includes(selectedTab)) {
+    if ((!isMobileBreakpoint || isVscode) && mobileOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.questionOverview);
     }
-  }, [isMobileBreakpoint, props, selectedTab, setSelectedTab]);
+  }, [isMobileBreakpoint, isVscode, props, selectedTab, setSelectedTab]);
 
   /* ==================
      onChange handlers
@@ -391,7 +392,38 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     );
     handleClearContext(question.library, true);
     handleUpdateHasUnsavedChanges(false);
-    sendToWebview(Messages.NewEditor(`assessment${assessment.id}`, props.questionId, ''));
+
+    const chapter = question.library.chapter;
+    const questionType = question.type;
+
+    switch (questionType) {
+      case QuestionTypes.mcq:
+        const mcqQuestionData = question;
+        sendToWebview(
+          Messages.McqQuestion(
+            workspaceLocation,
+            `assessment${assessment.id}`,
+            mcqQuestionData.id,
+            chapter,
+            mcqQuestionData.choices.map(choice => choice.content)
+          )
+        );
+        break;
+      case QuestionTypes.programming || QuestionTypes.voting:
+        const prepend = question.prepend;
+        const code = question.answer ?? question.solutionTemplate;
+        sendToWebview(
+          Messages.NewEditor(
+            workspaceLocation,
+            `assessment${assessment.id}`,
+            props.questionId,
+            chapter,
+            prepend,
+            code
+          )
+        );
+        break;
+    }
     if (options.editorValue) {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
       handleEditorValueChange(0, options.editorValue);
@@ -416,6 +448,18 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     const handleContestEntryClick = (_submissionId: number, answer: string) => {
       // TODO: Hardcoded to make use of the first editor tab. Refactoring is needed for this workspace to enable Folder mode.
       handleEditorValueChange(0, answer);
+      // Hacky way to view the editor, might cause issues
+      sendToWebview(
+        Messages.NewEditor(
+          workspaceLocation,
+          `submission${_submissionId}`,
+          questionId,
+          question.library.chapter,
+          '',
+          answer
+        )
+      );
+      //
     };
 
     const tabs: SideContentTab[] = [
@@ -736,9 +780,10 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     );
 
     return {
-      editorButtons: !isMobileBreakpoint
-        ? [runButton, saveButton, resetButton, chapterSelect]
-        : [saveButton, resetButton],
+      editorButtons:
+        !isMobileBreakpoint || isVscode
+          ? [runButton, saveButton, resetButton, chapterSelect]
+          : [saveButton, resetButton],
       flowButtons: [previousButton, questionView, nextButton]
     };
   };
@@ -885,6 +930,14 @@ It is safe to close this window.`}
                   (assessment!.questions[questionId] as IProgrammingQuestion).solutionTemplate
                 );
                 handleUpdateHasUnsavedChanges(true);
+                if (isVscode) {
+                  sendToWebview(
+                    Messages.ResetEditor(
+                      workspaceLocation,
+                      (assessment!.questions[questionId] as IProgrammingQuestion).solutionTemplate
+                    )
+                  );
+                }
               }}
               options={{ minimal: false, intent: Intent.DANGER }}
             />
@@ -968,7 +1021,7 @@ It is safe to close this window.`}
       {submissionOverlay}
       {overlay}
       {resetTemplateOverlay}
-      {!isMobileBreakpoint ? (
+      {isVscode || !isMobileBreakpoint ? (
         <Workspace {...workspaceProps} />
       ) : (
         <MobileWorkspace {...mobileWorkspaceProps} />
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index fa2e63c235..3f940b7b45 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -227,17 +227,19 @@ const Workspace: React.FC<WorkspaceProps> = props => {
             <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
           )}
           <div className="right-parent" ref={setFullscreenRefs}>
-            <Tooltip
-              className="fullscreen-button"
-              content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-              portalContainer={fullscreenContainerRef.current || undefined}
-            >
-              <Button
-                minimal
-                icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
-                onClick={toggleFullscreen}
-              />
-            </Tooltip>
+            {!isVscode && (
+              <Tooltip
+                className="fullscreen-button"
+                content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+                portalContainer={fullscreenContainerRef.current || undefined}
+              >
+                <Button
+                  minimal
+                  icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+                  onClick={toggleFullscreen}
+                />
+              </Tooltip>
+            )}
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}
diff --git a/src/commons/workspace/WorkspaceActions.ts b/src/commons/workspace/WorkspaceActions.ts
index 49da980224..a46c6cf5c9 100644
--- a/src/commons/workspace/WorkspaceActions.ts
+++ b/src/commons/workspace/WorkspaceActions.ts
@@ -111,9 +111,8 @@ const newActions = createActions('workspace', {
   updateEditorValue: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,
-    newEditorValue: string,
-    isFromVscode: boolean = false
-  ) => ({ workspaceLocation, editorTabIndex, newEditorValue, isFromVscode }),
+    newEditorValue: string
+  ) => ({ workspaceLocation, editorTabIndex, newEditorValue }),
   setEditorBreakpoint: (
     workspaceLocation: WorkspaceLocation,
     editorTabIndex: number,
@@ -241,6 +240,10 @@ const newActions = createActions('workspace', {
     workspaceLocation: WorkspaceLocation,
     storyEnv?: string
   ) => ({ errorMsg, workspaceLocation, storyEnv }),
+  showMcqPane: (workspaceLocation: WorkspaceLocation, options: string[]) => ({
+    workspaceLocation,
+    options
+  }),
   toggleUsingCse: (usingCse: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
     usingCse,
     workspaceLocation
diff --git a/src/commons/workspace/__tests__/WorkspaceActions.ts b/src/commons/workspace/__tests__/WorkspaceActions.ts
index f9c236617c..65dade0f70 100644
--- a/src/commons/workspace/__tests__/WorkspaceActions.ts
+++ b/src/commons/workspace/__tests__/WorkspaceActions.ts
@@ -258,8 +258,7 @@ test('updateEditorValue generates correct action object', () => {
     payload: {
       workspaceLocation: assessmentWorkspace,
       editorTabIndex,
-      newEditorValue,
-      isFromVscode: false
+      newEditorValue
     }
   });
 });
diff --git a/src/commons/workspace/reducers/editorReducer.ts b/src/commons/workspace/reducers/editorReducer.ts
index fa83906b49..dc314a2cd3 100644
--- a/src/commons/workspace/reducers/editorReducer.ts
+++ b/src/commons/workspace/reducers/editorReducer.ts
@@ -1,5 +1,4 @@
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
-import Messages, { sendToWebview } from 'src/features/vscode/messages';
 
 import WorkspaceActions from '../WorkspaceActions';
 import { getWorkspaceLocation } from '../WorkspaceReducer';
@@ -53,9 +52,6 @@ export const handleEditorActions = (builder: ActionReducerMapBuilder<WorkspaceMa
       }
 
       state[workspaceLocation].editorTabs[editorTabIndex].value = newEditorValue;
-      if (!action.payload.isFromVscode) {
-        sendToWebview(Messages.Text(newEditorValue));
-      }
     })
     .addCase(WorkspaceActions.setEditorBreakpoint, (state, action) => {
       const workspaceLocation = getWorkspaceLocation(action);
diff --git a/src/features/vscode/messages.ts b/src/features/vscode/messages.ts
index 4d0dbf15d2..3c8004b171 100644
--- a/src/features/vscode/messages.ts
+++ b/src/features/vscode/messages.ts
@@ -2,21 +2,103 @@
 // It also needs to be copied to source-academy/frontend:src/features/vscode/messages.ts
 // Ideally it is split into multiple files, but for ease of copying, it is kept as one file.
 
+/** A subset of the WorkspaceLocation type found in source-academy/frontend */
+import { Chapter, Variant } from 'js-slang/dist/types';
+
+const VscWorkspaceLocationArray = ['assessment', 'playground'];
+export const isVscWorkspaceLocation = (s: any) => VscWorkspaceLocationArray.includes(s);
+export type VscWorkspaceLocation = 'assessment' | 'playground';
+
+export type VscAssessmentOverview = {
+  type: string;
+  closeAt: string;
+  id: number;
+  isPublished?: boolean;
+  title: string;
+};
+
 // ================================================================================
 // Message type definitions
 // ================================================================================
+// Note to devs: Ctrl+clicking each type will not work. Use a search instead.
 const Messages = createMessages({
   /** Sent from the iframe to the extension */
-  ExtensionPing: () => ({}),
+  ExtensionPing: (frontendOrigin: string) => ({ frontendOrigin }),
   /** Sent from the extension to the iframe */
   ExtensionPong: (token: string | null) => ({ token }),
   IsVsc: () => ({}),
-  NewEditor: (assessmentName: string, questionId: number, code: string) => ({
+  NewEditor: (
+    workspaceLocation: VscWorkspaceLocation,
+    assessmentName: string,
+    questionId: number,
+    chapter: number,
+    prepend: string,
+    initialCode: string
+  ) => ({
+    workspaceLocation,
     assessmentName,
     questionId,
+    chapter,
+    prepend,
+    initialCode
+  }),
+  Text: (workspaceLocation: VscWorkspaceLocation, code: string) => ({
+    workspaceLocation,
     code
   }),
-  Text: (code: string) => ({ code })
+  EvalEditor: (workspaceLocation: VscWorkspaceLocation) => ({
+    workspaceLocation: workspaceLocation
+  }),
+  NotifyAssessmentsOverview: (assessmentOverviews: VscAssessmentOverview[], courseId: number) => ({
+    assessmentOverviews,
+    courseId
+  }),
+  Navigate: (route: string) => ({
+    route
+  }),
+  McqQuestion: (
+    workspaceLocation: VscWorkspaceLocation,
+    assessmentName: string,
+    questionId: number,
+    chapter: number,
+    options: string[]
+  ) => ({
+    workspaceLocation,
+    assessmentName,
+    questionId,
+    chapter,
+    options
+  }),
+  McqAnswer: (
+    workspaceLocation: VscWorkspaceLocation,
+    assessmentName: string,
+    questionId: number,
+    choice: number
+  ) => ({
+    workspaceLocation,
+    assessmentName,
+    questionId,
+    choice
+  }),
+  ChangeChapter: (
+    assessmentName: string,
+    questionId: number,
+    chapter: Chapter,
+    variant: Variant
+  ) => ({
+    assessmentName,
+    questionId,
+    chapter,
+    variant
+  }),
+  ResetEditor: (workspaceLocation: VscWorkspaceLocation, initialCode: string) => ({
+    workspaceLocation,
+    initialCode
+  }),
+  AssessmentAnswer: (questionId: number, answer: string) => ({
+    questionId,
+    answer
+  })
 });
 
 export default Messages;
@@ -75,19 +157,29 @@ export const MessageTypeNames = (() =>
 // Wrapper functions
 // ================================================================================
 
-export const FRONTEND_ELEMENT_ID = 'frontend';
-
+/**
+ * API to send a Message to the VSC extension.
+ * To only be used within source-academy/frontend.
+ */
 export function sendToWebview(message: MessageType) {
+  // In reality, the message is passed to the Webview context (middleman) first.
   window.parent.postMessage(message, '*');
 }
-export function sendToFrontend(document: Document, message: MessageType) {
-  const iframe: HTMLIFrameElement = document.getElementById(
-    FRONTEND_ELEMENT_ID
-  ) as HTMLIFrameElement;
-  const contentWindow = iframe.contentWindow;
-  if (!contentWindow) {
+
+/** Stub type of vscode.WebviewPanel */
+// Would be great to figure out how this can be typed to vscode.WebviewPanel in source-academy/vscode;
+// but to never in source-academy/frontend
+type VscodeWebviewPanel = any;
+
+/**
+ * API to send a Message to the Frontend iframe.
+ * To only be used within source-academy/vscode.
+ */
+export function sendToFrontend(panel: VscodeWebviewPanel, message: MessageType) {
+  if (!panel) {
+    console.error('VSC panel does not exist! Not sending message.');
     return;
   }
-  // TODO: Don't hardcode this!
-  contentWindow.postMessage(message, 'http://localhost:8000');
+  // In reality, the message is passed to the Webview context (middleman) first.
+  panel.webview.postMessage(message);
 }
diff --git a/src/pages/academy/game/Game.tsx b/src/pages/academy/game/Game.tsx
index c3b125c6ab..f624e03a3e 100644
--- a/src/pages/academy/game/Game.tsx
+++ b/src/pages/academy/game/Game.tsx
@@ -21,6 +21,7 @@ const Game: React.FC = () => {
 
   const [isTestStudent, setIsTestStudent] = React.useState(false);
   const [isUsingMock, setIsUsingMock] = React.useState(false);
+  const isVscode = useTypedSelector(state => state.vscode.isVscode);
 
   React.useEffect(() => {
     dispatch(AchievementActions.getAchievements());
@@ -129,20 +130,22 @@ const Game: React.FC = () => {
   return (
     <>
       <div id="game-display" ref={setGameDisplayRefs}>
-        <Tooltip
-          className="fullscreen-button"
-          content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-          portalContainer={gameDisplayRef.current || undefined}
-          renderTarget={({ isOpen, ...targetProps }) => (
-            <Button
-              {...targetProps}
-              minimal
-              icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
-              onClick={enhancedToggleFullscreen}
-              style={{ left: iconLeft, padding: iconPadding }}
-            />
-          )}
-        />
+        {!isVscode && (
+          <Tooltip
+            className="fullscreen-button"
+            content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+            portalContainer={gameDisplayRef.current || undefined}
+            renderTarget={({ isOpen, ...targetProps }) => (
+              <Button
+                {...targetProps}
+                minimal
+                icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+                onClick={enhancedToggleFullscreen}
+                style={{ left: iconLeft, padding: iconPadding }}
+              />
+            )}
+          />
+        )}
       </div>
       {isTestStudent && (
         <div className="Horizontal">
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 02bd08ee99..d9c06bd46f 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -41,6 +41,7 @@ import {
   shortenURL,
   updateShortURL
 } from 'src/features/playground/PlaygroundActions';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 
 import {
   getDefaultFilePath,
@@ -193,6 +194,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
   const { isSicpEditor } = props;
   const workspaceLocation: WorkspaceLocation = isSicpEditor ? 'sicp' : 'playground';
   const { isMobileBreakpoint } = useResponsive();
+  const isVscode = useTypedSelector(state => state.vscode.isVscode);
 
   const [deviceSecret, setDeviceSecret] = useState<string | undefined>();
   const location = useLocation();
@@ -358,12 +360,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
   useEffect(() => {
     if (!selectedTab) return;
 
-    if (isMobileBreakpoint && desktopOnlyTabIds.includes(selectedTab)) {
+    if (!isVscode && isMobileBreakpoint && desktopOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.mobileEditor);
     } else if (!isMobileBreakpoint && mobileOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.introduction);
     }
-  }, [isMobileBreakpoint, selectedTab, setSelectedTab]);
+  }, [isMobileBreakpoint, isVscode, selectedTab, setSelectedTab]);
 
   const onEditorValueChange = React.useCallback(
     (editorTabIndex: number, newEditorValue: string) => {
@@ -373,6 +375,26 @@ const Playground: React.FC<PlaygroundProps> = props => {
     [handleEditorValueChange]
   );
 
+  useEffect(() => {
+    // Only the playground is expected to work with VSC for now
+    if (workspaceLocation === 'sicp') {
+      return;
+    }
+    const initialCode = editorTabs[0]?.value ?? '';
+    sendToWebview(
+      Messages.NewEditor(
+        workspaceLocation,
+        'playground',
+        1,
+        playgroundSourceChapter,
+        '',
+        initialCode
+      )
+    );
+    // We don't want to re-send this message even when the variables change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // const onChangeTabs = useCallback(
   //   (
   //     newTabId: SideContentType,
@@ -489,6 +511,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
 
       pushLog(input);
 
+      sendToWebview(Messages.ChangeChapter('playground', 1, chapter, variant));
       handleChapterSelect(chapter, variant);
       // Hardcoded for Playground only for now, while we await workspace refactoring
       // to decouple the SicpWorkspace from the Playground.
@@ -1029,7 +1052,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     }
   };
 
-  return isMobileBreakpoint ? (
+  return !isVscode && isMobileBreakpoint ? (
     <div className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}>
       <MobileWorkspace {...mobileWorkspaceProps} />
     </div>