diff --git a/app/api/hartford-address-lookup.js b/app/api/hartford-address-lookup.js
index 1f907b8d..00b5b915 100644
--- a/app/api/hartford-address-lookup.js
+++ b/app/api/hartford-address-lookup.js
@@ -1,4 +1,5 @@
 import getViewersByOffice from '../server/util/get-viewers-by-office'
+import _ from 'lodash'
 
 /*
  * function takes an address in Hartford CT
@@ -40,64 +41,7 @@ const getOfficials = (long, lat, doOnSuccess, address_found) => {
             let officeNames = []
             districts.forEach(district => {
               // the upper legislative body is being used for testing
-              if (district.offices && district.type === 'State Legislative (Lower)') {
-                district.offices.forEach(office => {
-                  officeNames.push({
-                    id: office.id,
-                    name: office.name,
-                    district_number: parseInt(office.name[office.name.length - 1]),
-                    type: district.type,
-                  })
-                })
-              }
-            })
-
-            //officeNames.forEach(office => {
-            //console.log(parseInt(office.name[office.name.length - 1]))
-            //})
-            //TODO remove this later as the tabs should be filled
-            let viewers = []
-            for (let office of officeNames) {
-              let viewer = await getViewersByOffice(String(office.id))
-              viewers.push(viewer)
-            }
-            //send info after success
-            doOnSuccess({ ok: true, address_found, officeNames, viewers })
-          } else {
-            doOnSuccess({ ok: false, error: JSON.parse(data) })
-          }
-        })
-      })
-      .on('error', err => {
-        console.log('Error: ' + err)
-      })
-    https
-      .get(`${process.env.ELECTED_OFFICIALS_URL}?long=${long}&lat=${lat}`, resp => {
-        let data = ''
-        resp.on('data', chunk => {
-          data += chunk
-        })
-
-        resp.on('end', async () => {
-          const success = JSON.parse(data).success
-          if (success) {
-            const officials = JSON.parse(data).data[0].elected_officials
-            const districts = officials.districts
-
-            /*
-             * districts is an array of objects
-             * format:
-             * name: String -> containing district name
-             * id: Number
-             * type: String -> containing type of district e.g. School District
-             * state: 'CT'
-             * offices: [{id, name:???,office_holders}]
-             * */
-
-            let officeNames = []
-            districts.forEach(district => {
-              // the upper legislative body is being used for testing
-              if (district.offices && district.type === 'State Legislative (Lower)') {
+              if (district.offices && district.type === 'State Legislative (Upper)') {
                 district.offices.forEach(office => {
                   officeNames.push({
                     id: office.id,
diff --git a/app/components/web-components/HartfordViewers/index.js b/app/components/web-components/HartfordViewers/index.js
new file mode 100644
index 00000000..40f29ee8
--- /dev/null
+++ b/app/components/web-components/HartfordViewers/index.js
@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react'
+import { createUseStyles } from 'react-jss'
+import FindDistrict from '../HartfordVotes/FindDistrict'
+import { AddressProvider, useCandidates } from '../HartfordVotes/user-address-context'
+
+const useStyles = createUseStyles({
+  landingPage: {
+    fontFamily: 'Libre Franklin',
+    '& button, & a': {
+      fontFamily: 'Libre Franklin, SemiBold',
+      fontWeight: 300,
+    },
+    '& h1, & h2, & h3, & h4': {
+      fontFamily: 'Libre Franklin, Bold',
+    },
+    fontSize: '10px',
+    wordSpacing: '0.3em',
+    letterSpacing: '0.01em',
+    boxSizing: 'border-box',
+    '@media (min-width: 1250px) and (min-height: 1000px)': { fontSize: '16px' },
+
+    '& *': {
+      boxSizing: 'border-box',
+    },
+    width: '100vw',
+    textAlign: 'center',
+  },
+})
+
+const HartfordViewers = ({}) => {
+  return (
+    <>
+      <AddressProvider>
+        <DisplayViewers />
+      </AddressProvider>
+    </>
+  )
+}
+
+const DisplayViewers = ({}) => {
+  const { candidates } = useCandidates()
+
+  //useEffect(() => {}, [candidates])
+  //<iframe src={candidates.viewers[0][0]}/>
+  //<div>{candidates.viewers[0][0]}</div>
+  return <div>{candidates.viewers ? <iframe src={candidates.viewers[0][0]} /> : <FindDistrict />}</div>
+}
+
+export default HartfordViewers
diff --git a/app/components/web-components/HartfordVotes/FindDistrict.js b/app/components/web-components/HartfordVotes/FindDistrict.js
index 81d258f9..3b1c9b1a 100644
--- a/app/components/web-components/HartfordVotes/FindDistrict.js
+++ b/app/components/web-components/HartfordVotes/FindDistrict.js
@@ -95,7 +95,7 @@ const useStyles = createUseStyles({
 const FindDistrict = () => {
   const classes = useStyles()
 
-  const { setCandidates } = useCandidates()
+  const { candidates, setCandidates } = useCandidates()
   const { error, setError } = useError()
   const { notification, setNotification } = useNotification()
   let isPortrait = useMode()
@@ -140,6 +140,7 @@ const FindDistrict = () => {
     '06167',
   ]
 
+  console.log(candidates)
   return (
     <form
       className={classes.findDistrict}
diff --git a/app/components/web-components/index.js b/app/components/web-components/index.js
index bb535d4d..56db64ff 100644
--- a/app/components/web-components/index.js
+++ b/app/components/web-components/index.js
@@ -16,6 +16,7 @@ const WebComponents = {
   HartfordVotes: require('./HartfordVotes'),
   FAQ: require('./FAQ'),
   About: require('./About'),
+  HartfordViewers: require('./HartfordViewers'),
   CcWrapper: require('./cc-wrapper'),
 }
 
diff --git a/app/server/util/get-viewers-by-office.js b/app/server/util/get-viewers-by-office.js
index 1289ddbc..20113840 100644
--- a/app/server/util/get-viewers-by-office.js
+++ b/app/server/util/get-viewers-by-office.js
@@ -4,11 +4,9 @@ import Iota from '../../models/iota'
 export default async function getViewersByOffice(office_id) {
   try {
     const viewers = await Iota.find({ 'bp_info.race.office.id': { $eq: office_id } })
-    console.log(viewers, office_id)
     const urls = await viewers.map(
       v => `${process.env.HOSTNAME === 'localhost:3011' ? 'http' : 'https'}://${process.env.HOSTNAME}${v.path}`
     )
-    console.log(urls)
     return urls
   } catch (error) {
     logger.error('caught error trying to getViewersByOffice', office_id, error.message)
diff --git a/iota.json b/iota.json
index 0f2e35c9..96517108 100644
--- a/iota.json
+++ b/iota.json
@@ -5646,6 +5646,17 @@
       ]
     }
   },
+  {
+    "_id": {
+      "$oid": "5f4c40287c213e40c31e752d"
+    },
+    "path": "/viewer/hartford",
+    "subject": "viewers for candidate conversations in Hartford CT",
+    "description": "for use within an iframe. Users enter their address and a viewer is returned that corresponds to the representational district",
+    "webComponent": {
+      "webComponent": "HartfordViewers"
+    }
+  },
   {
     "_id": {
       "$oid": "5f7ca481e7179a6ea5213f43"
@@ -5805,5 +5816,6 @@
       }
     },
     "parentId": "5f7ca481e7179a6ea5213f43"
+
   }
 ]