diff --git a/package-lock.json b/package-lock.json
index 480d72e..7f1496d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12752,7 +12752,6 @@
 			"version": "6.11.4",
 			"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
 			"integrity": "sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==",
-			"dev": true,
 			"requires": {
 				"prop-types": "^15.6.2",
 				"unquote": "^1.1.0"
diff --git a/package.json b/package.json
index 1c7c848..520ba66 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"@typescript-eslint/parser": "^3.2.0",
 		"airtable": "^0.8.1",
 		"inquirer": "^7.1.0",
+		"markdown-to-jsx": "^6.11.4",
 		"prop-types": "^15.7.2",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
diff --git a/src/App.js b/src/App.js
index 680e2e6..b150653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ import AllWorkshops from './components/Pages/AllWorkshops/AllWorkshops';
 import WorkshopOverview from './components/Pages/workshopOverview/WorkshopOverview';
 // import WorkshopFeedback from './components/Pages/WorkshopFeedback';
 // import WorkshopWorksheet from './components/Pages/WorkshopWorksheet';
-// import WorkshopContent from './components/Pages/WorkshopContent';
+import WorkshopContent from './components/Pages/WorkshopContent/WorkshopContent';
 
 import './App.css';
 
@@ -25,9 +25,9 @@ function App() {
 							</Route>
 							<Route exact path="/workshops" component={AllWorkshops} />
 							<Route exact path="/workshop/overview/:ID" component={WorkshopOverview} />
-							{/* <Route exact path="/workshop/feedback/:ID" component={WorkshopFeedback} />
+							{/* <Route exact path="/workshop/feedback/:ID" component={WorkshopFeedback} /> */}
 							<Route exact path="/workshop/content/:ID" component={WorkshopContent} />
-							<Route exact path="/workshop/worksheet/:ID" component={WorkshopWorksheet} /> */}
+							{/* <Route exact path="/workshop/worksheet/:ID" component={WorkshopWorksheet} /> */}
 						</Switch>
 					</main>
 				</div>
diff --git a/src/components/Pages/WorkshopContent/WorkshopContent.js b/src/components/Pages/WorkshopContent/WorkshopContent.js
new file mode 100644
index 0000000..3a1ae6c
--- /dev/null
+++ b/src/components/Pages/WorkshopContent/WorkshopContent.js
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+// import Markdown from 'markdown-to-jsx';
+
+import * as SC from './style';
+
+import WorkshopHeader from '../../WorkshopHeader/WorkshopHeader';
+import BackButton from '../../buttons/BackButton';
+import PrimaryButton from '../../buttons/PrimaryButton';
+
+import getFromJSON from '../../../utils/getFromJSON';
+import api from '../../../api/api';
+
+export default function WorkshopContent({ match: { params } }) {
+	const [errorState, setErrorState] = React.useState('');
+	const [workshop, setWorkshop] = React.useState({});
+
+	useEffect(() => {
+		api
+			.getSpecificWorkshop(params.ID)
+			.then((res) => {
+				setWorkshop(getFromJSON(res));
+			})
+			.catch(() => {
+				setErrorState(
+					<h2>
+						<br />
+						<br />
+						This workshop couldnt be found
+					</h2>,
+				);
+			});
+	}, [params.ID]);
+
+	return (
+		<>
+			<WorkshopHeader images={workshop.images} date={workshop.date_created} tags={workshop.tags} title={workshop.title} />
+			<SC.MainContainer>
+				{/* <Markdown>{workshop.content}</Markdown> */}
+				<p>{workshop.content}</p>
+				<SC.ButtonsWrapper>
+					<BackButton />
+					<PrimaryButton innerText="DOWNLOAD ALL" />
+				</SC.ButtonsWrapper>
+				{errorState}
+			</SC.MainContainer>
+		</>
+	);
+}
+
+WorkshopContent.propTypes = {
+	match: PropTypes.shape({
+		params: PropTypes.shape({
+			ID: PropTypes.string,
+		}),
+	}).isRequired,
+};
diff --git a/src/components/Pages/WorkshopContent/style.js b/src/components/Pages/WorkshopContent/style.js
new file mode 100644
index 0000000..3ce82d0
--- /dev/null
+++ b/src/components/Pages/WorkshopContent/style.js
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import * as vars from '../../../styles/variables';
+
+export const MainContainer = styled.section`
+	display: flex;
+	flex-direction: column;
+	max-width: ${vars.mainContainerWidth};
+	margin: 0 auto;
+`;
+
+export const ButtonsWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+`;
diff --git a/src/components/Pages/workshopOverview/MainSection.js b/src/components/Pages/workshopOverview/MainSection.js
index a1cf0b1..f5a9786 100644
--- a/src/components/Pages/workshopOverview/MainSection.js
+++ b/src/components/Pages/workshopOverview/MainSection.js
@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
+import { Link } from 'react-router-dom';
+
 import PrimaryButton from '../../buttons/PrimaryButton';
 import SecondaryButton from '../../buttons/SecondaryButton';
 
@@ -40,15 +42,15 @@ const ButtonWrapper = styled.div`
 	margin-top: 4rem;
 `;
 
-export default function Main({ content }) {
+export default function Main({ overview, id }) {
 	return (
 		<MainWrapper>
 			<ContentDiv>
 				<Title>Overview</Title>
-				<ContentText>{content}</ContentText>
+				<ContentText>{overview}</ContentText>
 			</ContentDiv>
 			<ButtonWrapper>
-				<PrimaryButton innerText="Workshop" />
+				<PrimaryButton as={Link} to={`/workshop/content/${id}`} innerText="Workshop" />
 				<SecondaryButton innerText="Submit Feedback" />
 			</ButtonWrapper>
 		</MainWrapper>
@@ -56,5 +58,6 @@ export default function Main({ content }) {
 }
 
 Main.propTypes = {
-	content: PropTypes.string.isRequired,
+	overview: PropTypes.string.isRequired,
+	id: PropTypes.string.isRequired,
 };
diff --git a/src/components/Pages/workshopOverview/WorkshopOverview.js b/src/components/Pages/workshopOverview/WorkshopOverview.js
index 1404d73..2896e74 100644
--- a/src/components/Pages/workshopOverview/WorkshopOverview.js
+++ b/src/components/Pages/workshopOverview/WorkshopOverview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import api from '../../../api/api';
-import getFromJSON from './getFromJSON';
+import getFromJSON from '../../../utils/getFromJSON';
 
 import Intro from './TitleSection';
 import Main from './MainSection';
@@ -41,9 +41,10 @@ export default function WorkshopOverview({ match: { params } }) {
 		<MainContainer>
 			<WorkshopHeader images={workshop.images} date={workshop.date_created} tags={workshop.tags} title={workshop.title} />
 			<Intro authorArr={workshop.workshop_authors} equipment={null} />
-			<Main content={workshop.overview} />
+			<Main overview={workshop.overview} id={params.ID} />
 			<Comments feedbackArr={workshop.feedback} />
 			<BackButton to="/workshops" />
+
 			{errorState}
 		</MainContainer>
 	);
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 06eb5ef..ac7d517 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -10,6 +10,7 @@ export const offWhite = '#fbf9fa';
 export const medButtonHeight = '42px';
 export const smallButtonHeight = '38px';
 export const titleBarVerticalPadding = '8px';
+export const mainContainerWidth = '700px';
 
 // font-families
 export const headerFont = 'DIN, sans-serif';
diff --git a/src/components/Pages/workshopOverview/getFromJSON.js b/src/utils/getFromJSON.js
similarity index 100%
rename from src/components/Pages/workshopOverview/getFromJSON.js
rename to src/utils/getFromJSON.js