diff --git a/package-lock.json b/package-lock.json
index 6bf15bd..d2a9b80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4623,6 +4623,11 @@
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
     },
+    "deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ="
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -5116,6 +5121,14 @@
         }
       }
     },
+    "equals": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/equals/-/equals-1.0.5.tgz",
+      "integrity": "sha1-ISBi3eXhpRDZVfE1mO/MamIbas4=",
+      "requires": {
+        "jkroso-type": "1"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -9021,6 +9034,11 @@
         }
       }
     },
+    "jkroso-type": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jkroso-type/-/jkroso-type-1.1.1.tgz",
+      "integrity": "sha1-vEztbWxF/gdFKCuvyGqfjE/JzmE="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -11919,6 +11937,33 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "pure-react-carousel": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/pure-react-carousel/-/pure-react-carousel-1.23.0.tgz",
+      "integrity": "sha512-7IFS3P7qO/YnfxchHLnRKcgv93goc/sHhfXoRwyKXkI2CFhp28v6p06q6jLmKCP1+wzm3Gniy7u4Q/98VCaKCA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "deep-freeze": "0.0.1",
+        "deepmerge": "^2.2.1",
+        "equals": "^1.0.5",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
+          "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        }
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
diff --git a/package.json b/package.json
index c3e788f..fc575f7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"firebase": "~6.1.0",
 		"firebase-mock": "~2.2.10",
 		"fontfaceobserver": "~2.1.0",
+		"pure-react-carousel": "^1.23.0",
 		"react": "~16.8.6",
 		"react-dom": "~16.8.6",
 		"react-draft-wysiwyg": "~1.13.2",
@@ -66,4 +67,4 @@
 		]
 	},
 	"config-overrides-path": "node_modules/react-app-rewire-disable-chunks"
-}
\ No newline at end of file
+}
diff --git a/src/components/ContentMapping/ContentMapping.ts b/src/components/ContentMapping/ContentMapping.ts
index 5fbcae2..3fef917 100644
--- a/src/components/ContentMapping/ContentMapping.ts
+++ b/src/components/ContentMapping/ContentMapping.ts
@@ -24,6 +24,8 @@ import { WYSIWYGEditor } from '../ContentWidgets/WYSIWYG/WYSIWYGEditor';
 import { WYSIWYGWidget } from '../ContentWidgets/WYSIWYG/WYSIWYGWidget';
 import { Accordion } from '../ContentWidgets/Accordion/Accordion';
 import { AccordionEditor } from '../ContentWidgets/Accordion/AccordionEditor';
+import { VerticalSlideshow } from '../ContentWidgets/VerticalSlideshow/VerticalSlideshow';
+import { VerticalSlideshowEditor } from '../ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor';
 
 export type WidgetEditorProps = {
 	originalContent: ContentSingularData,
@@ -58,7 +60,8 @@ export enum WidgetTypes {
 	GALLERY = "GALLERY",
 	WYSIWYG_EDITOR = "WYSIWYG_EDITOR",
 	BANNER = "BANNER",
-	ACCORDION = "ACCORDION"
+	ACCORDION = "ACCORDION",
+	VERTICAL_SLIDESHOW = "VERTICAL_SLIDESHOW"
 }
 
 export const ContentMapping: ContentMappingType = {
@@ -127,5 +130,11 @@ export const ContentMapping: ContentMappingType = {
 		editor: AccordionEditor,
 		displayName: "Accordion",
 		widgetCategory: WidgetCategories.Display
+	},
+	VERTICAL_SLIDESHOW: {
+		widget: VerticalSlideshow,
+		editor: VerticalSlideshowEditor,
+		displayName: "Vertical Slideshow",
+		widgetCategory: WidgetCategories.Media
 	}
 }
diff --git a/src/components/ContentWidgets/Gallery/Gallery.css b/src/components/ContentWidgets/Gallery/Gallery.css
index c1e5fc7..7b2b68e 100644
--- a/src/components/ContentWidgets/Gallery/Gallery.css
+++ b/src/components/ContentWidgets/Gallery/Gallery.css
@@ -1,91 +1,90 @@
 .gallery-display {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 2px;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0 2px;
 }
 
 .gallery-col {
-    flex: 33.3%;
-    max-width: 33.3%;
-    padding: 0 2px;
+	flex: 33.3%;
+	max-width: 33.3%;
+	padding: 0 2px;
 }
 
 .gallery-col img {
-    width: 100%;
-    margin-top: 4px;
-    vertical-align: middle;
-    cursor: pointer;
+	width: 100%;
+	margin-top: 4px;
+	vertical-align: middle;
+	cursor: pointer;
 }
 
 /* Lightbox */
+
 .gallery-lightbox {
-    padding-top: 100px;
-    position: fixed;
-    z-index: 2;
-    left: 0;
-    top: 0;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+	padding-top: 100px;
+	position: fixed;
+	z-index: 2;
+	left: 0;
+	top: 0;
+	overflow: auto;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.9);
+	/* Black w/ opacity */
 }
 
 .gallery-lightbox span {
-    cursor: pointer;
-    color: var(--white);
-    font-size: 80px;
-    z-index: 1;
+	cursor: pointer;
+	color: var(--white);
+	font-size: 80px;
+	z-index: 1;
 }
 
 .gallery-lightbox-content * {
-    overflow: auto;
+	overflow: auto;
 }
 
 .gallery-lightbox-close {
-    position: fixed;
-    top: 50px;
-    right: 10px;
+	position: fixed;
+	top: 50px;
+	right: 10px;
 }
 
 .gallery-lightbox-content img {
-    position: relative;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+	position: relative;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .gallery-lightbox-prev, .gallery-lightbox-next {
-    position: fixed;
-    top: 50%;
+	position: fixed;
+	top: 50%;
 }
 
 .gallery-lightbox-next {
-    right: 0px;
+	right: 0px;
 }
 
 /* gallery editor */
+
 .gallery-editor input {
-    padding: 15px;
-    margin: 0;
+	padding: 15px;
+	margin: 0;
 }
 
 .gallery-editor button {
-    width: 60px;
-    padding: 12px 0;
-    border-radius: 10%;
-    font-size: 15px
+	width: 60px;
+	padding: 12px 0;
+	border-radius: 10%;
+	font-size: 15px;
 }
 
 .gallery-delete-button {
-    border-color: var(--failure-primary);
-    color: var(--failure-primary);
+	border-color: var(--failure-primary);
+	color: var(--failure-primary);
 }
 
 .accordion-add-new-button {
-    display: block;
-    margin: 15px auto;
-}
-
-
-
-
+	display: block;
+	margin: 15px auto;
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.css b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.css
new file mode 100644
index 0000000..92d5940
--- /dev/null
+++ b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.css
@@ -0,0 +1,25 @@
+.vertical-slideshow {
+	height: 60vh;
+}
+
+.vertical-slideshow-editor input {
+	padding: 15px;
+	margin: 0;
+}
+
+.vertical-slideshow-editor button {
+	width: 60px;
+	padding: 12px 0;
+	border-radius: 10%;
+	font-size: 15px;
+}
+
+.vertical-slideshow-delete-button {
+	border-color: var(--failure-primary);
+	color: var(--failure-primary);
+}
+
+.vertical-slideshow-add-button {
+	display: block;
+	margin: 15px auto;
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.tsx b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.tsx
new file mode 100644
index 0000000..cb8a540
--- /dev/null
+++ b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { ContentSingularData } from '../../_data/ContentSingularData';
+import {
+	CarouselProvider,
+	Image,
+	Slide,
+	Slider
+} from 'pure-react-carousel';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import './VerticalSlideshow.css';
+
+export type SingleVerticalSlideshowContent = {
+	image: string,
+	// alt: string // TODO: support alt tags
+}
+
+export const VerticalSlideshow: React.FC<ContentSingularData> = ({
+	vertical_slideshow_content
+}) => {
+	if (!vertical_slideshow_content) {
+		return <></>
+	}
+
+	return <div className="vertical-slideshow">
+		<CarouselProvider
+			naturalSlideHeight={0.3 * window.innerHeight}
+			naturalSlideWidth={0.6 * window.innerWidth}
+			totalSlides={vertical_slideshow_content.length}
+		>
+			<Slider>
+				{vertical_slideshow_content.map((slideshowContent, idx) => {
+					return <Image
+						key={slideshowContent.image}
+						hasMasterSpinner={true}
+						src={slideshowContent.image}
+					>
+
+					</Image>
+				})}
+			</Slider>
+		</CarouselProvider>
+	</div>
+}
\ No newline at end of file
diff --git a/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor.tsx b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor.tsx
new file mode 100644
index 0000000..bbe45f3
--- /dev/null
+++ b/src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
+
+export const VerticalSlideshowEditor: React.FC<WidgetEditorProps> = ({
+	originalContent,
+	editedContent,
+	setEditedContentOnChange
+}) => {
+	const verticalSlideshowContent = editedContent.vertical_slideshow_content || [];
+
+	const updateSingleSlideshowContent = (image: string, index: number) => {
+		const newContent = verticalSlideshowContent.slice();
+		newContent[index] = {
+			image
+		};
+		setEditedContentOnChange("vertical_slideshow_content", newContent);
+	}
+
+	const deleteSlideshowContent = (index: number) => {
+		const newContent = verticalSlideshowContent.slice();
+		newContent.splice(index, 1);
+		setEditedContentOnChange("vertical_slideshow_content", newContent);
+	}
+
+	return <div className="vertical-slideshow-editor">
+		{verticalSlideshowContent.map((slideshowContent, index) => {
+			return <div key={slideshowContent.image}>
+				<input
+					type="text"
+					onChange={(e) => updateSingleSlideshowContent(e.target.value, index)}
+					value={slideshowContent.image}
+				></input>
+				<button
+					className="vertical-slideshow-delete-button"
+					onClick={() => deleteSlideshowContent(index)}
+				>DELETE</button>
+			</div>
+		})}
+		<div>
+			<button
+				className="vertical-slideshow-add-button"
+				onClick={() => {
+					const newContent = verticalSlideshowContent.slice()
+					newContent.push({ image: "" });
+					setEditedContentOnChange("vertical_slideshow_content", newContent);
+				}}
+			>Add</button>
+		</div>
+	</div>
+}
\ No newline at end of file
diff --git a/src/components/CustomAppBar/AppBarSideDrawer/AppBarSideDrawer.tsx b/src/components/CustomAppBar/AppBarSideDrawer/AppBarSideDrawer.tsx
index a9f87d7..9eb9a18 100644
--- a/src/components/CustomAppBar/AppBarSideDrawer/AppBarSideDrawer.tsx
+++ b/src/components/CustomAppBar/AppBarSideDrawer/AppBarSideDrawer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-// TODO: 
+// TODO 
 export const AppBarSideDrawer: React.FC = () => {
-    return <></>
+	return <></>
 }
\ No newline at end of file
diff --git a/src/components/_data/ContentSingularData.ts b/src/components/_data/ContentSingularData.ts
index bec04ca..f7e9002 100644
--- a/src/components/_data/ContentSingularData.ts
+++ b/src/components/_data/ContentSingularData.ts
@@ -2,6 +2,7 @@ import { BannerContent } from '../ContentWidgets/Banner/Banner';
 import { Tab } from '../ContentWidgets/TabView/TabView';
 import { ImgRowItem } from '../ContentWidgets/ImagesInRow/ImagesInRow';
 import { AccordionPageProps } from '../ContentWidgets/Accordion/Accordion'
+import { SingleVerticalSlideshowContent } from '../ContentWidgets/VerticalSlideshow/VerticalSlideshow';
 
 export type ContentSingularData = {
 	[idx: string]: any
@@ -20,5 +21,6 @@ export type ContentSingularData = {
 	separator_color?: { r: number; g: number; b: number }
 	tabView_content?: Tab[]
 	gallery_content?: string[]
-	wysiwyg_content?: string
+	wysiwyg_content?: string,
+	vertical_slideshow_content?: SingleVerticalSlideshowContent[]
 }
\ No newline at end of file