diff --git a/app/components/SeatingMap.js b/app/components/SeatingMap.js
new file mode 100644
index 0000000..b9b1fe1
--- /dev/null
+++ b/app/components/SeatingMap.js
@@ -0,0 +1,64 @@
+import React from 'react'
+
+const buildSectionElements = (sections) => {
+  return sections.map((section, index) => {
+    const seatElements = section.seats.map((seat) => (
+      <a
+        href={seat.venueFloorSeatPath}
+        aria-label={seat.ariaLabel}
+        key={seat.venueFloorSeatPath}
+       >
+        <use
+          width="12px"
+          height="12px"
+          xlinkHref={seat.href}
+          x={seat.x}
+          y={seat.y}
+        />
+      </a>
+    ))
+
+    return <g key={index}>{seatElements}</g>
+  })
+}
+
+export default class extends React.Component {
+  render() {
+    const { sections } = this.props
+    const sectionElements = buildSectionElements(sections)
+
+    return(
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        className="syos-seat-map"
+        width="1600px"
+        height="1600px"
+        viewBox="0 0 1600 1600"
+      >
+        <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
+        <svg style={{display: "none"}}>
+          <symbol
+            id="seat-icon-unselected"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+            <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
+          </symbol>
+
+          <symbol
+            id="seat-icon-selected"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+          </symbol>
+        </svg>
+        { sectionElements }
+      </svg>
+    )
+  }
+}
diff --git a/app/views/seats/index.js b/app/views/seats/index.js
index d4c6d11..87f49ed 100644
--- a/app/views/seats/index.js
+++ b/app/views/seats/index.js
@@ -1,29 +1,8 @@
 import React from 'react'
-import Layout from '../../components/Layout'
 import SeatDialog from '../../components/SeatDialog'
 import Cart from '../../components/Cart'
-
-const buildSectionElements = (sections) => {
-  return sections.map((section, index) => {
-    const seatElements = section.seats.map((seat) => (
-      <a
-        href={seat.venueFloorSeatPath}
-        aria-label={seat.ariaLabel}
-        key={seat.venueFloorSeatPath}
-       >
-        <use
-          width="12px"
-          height="12px"
-          xlinkHref={seat.href}
-          x={seat.x}
-          y={seat.y}
-        />
-      </a>
-    ))
-
-    return <g key={index}>{seatElements}</g>
-  })
-}
+import SeatingMap from '../../components/SeatingMap'
+import Layout from '../../components/Layout'
 
 export default (props) => {
   const {
@@ -33,8 +12,6 @@ export default (props) => {
     seat,
   } = props
 
-  const sectionElements = buildSectionElements(sections)
-
   return (
     <Layout {...props}>
       <SeatDialog {...seat} />
@@ -49,39 +26,8 @@ export default (props) => {
           className="syos-frame"
         >
           <div className="syos-frame__map">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-              className="syos-seat-map"
-              width="1600px"
-              height="1600px"
-              viewBox="0 0 1600 1600"
-            >
-              <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
-              <svg style={{display: "none"}}>
-                <symbol
-                  id="seat-icon-unselected"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-                  <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
-                </symbol>
-
-                <symbol
-                  id="seat-icon-selected"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-                </symbol>
-              </svg>
-              { sectionElements }
-            </svg>
+            <SeatingMap sections={sections} />
           </div>
-
           <div className="syos-frame__sidebar">
             <Cart cart={cart} />
           </div>