diff --git a/src/components/Hit.jsx b/src/components/Hit.jsx
index b616981..9b8aabf 100644
--- a/src/components/Hit.jsx
+++ b/src/components/Hit.jsx
@@ -5,10 +5,10 @@ import {
   Highlight,
 } from 'react-instantsearch-hooks-web';
 
-export default function Hit({hit, sendEvent}) {
+export default function Hit({hit}) {
   return (
     <article>
-      <Link to={`card/${hit.objectID}`} onClick={()=>sendEvent('click', hit, 'Card Clicked')}>
+      <Link to={`card/${hit.objectID}`} >
         <img
           className="card"
           src={hit.images.small}
@@ -28,6 +28,5 @@ export default function Hit({hit, sendEvent}) {
 
 Hit.propTypes = {
   hit: PropTypes.object.isRequired,
-  sendEvent: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index a6ef95e..317ae5f 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import algoliasearch from 'algoliasearch/lite';
+import { searchClient, indexName } from '../utilities/algolia';
 import {
   Configure,
   Hits,
@@ -13,8 +13,6 @@ import { Panel } from './Panel';
 import Header from './Header';
 import Hit from './Hit';
 
-const searchClient = algoliasearch('OKF83BFQS4', '2ee1381ed11d3fe70b60605b1e2cd3f4');
-
 export default function Search() {
   return (
     <div>
@@ -22,12 +20,12 @@ export default function Search() {
       <div className="container">
         <InstantSearch
           searchClient={searchClient}
-          indexName="pokemon-cards"
+          indexName={indexName}
           routing={true}
         >
           <InsightsMiddleware />
           <Configure
-            hitsPerPage={12} 
+            hitsPerPage={12}
           />
           <div className="search-panel">
             <div className="search-panel__filters">
diff --git a/src/effects/usePokemonData.js b/src/effects/usePokemonData.js
index 8136f51..cbf761a 100644
--- a/src/effects/usePokemonData.js
+++ b/src/effects/usePokemonData.js
@@ -1,11 +1,7 @@
-import algoliasearch from "algoliasearch";
+import { searchClient, indexName } from '../utilities/algolia';
 import { useEffect, useState } from "react";
 
-const searchClient = algoliasearch(
-  "OKF83BFQS4",
-  "2ee1381ed11d3fe70b60605b1e2cd3f4"
-);
-const index = searchClient.initIndex("pokemon-cards");
+const index = searchClient.initIndex(indexName);
 
 export const usePokemonData = (cardId) => {
   const [pokemonData, setPokemonData] = useState({
diff --git a/src/utilities/algolia.js b/src/utilities/algolia.js
new file mode 100644
index 0000000..7e3cc6f
--- /dev/null
+++ b/src/utilities/algolia.js
@@ -0,0 +1,7 @@
+import algoliasearch from 'algoliasearch'
+
+export const appId = process.env.REACT_APP_ALGOLIA_APP_ID || ''
+export const appKey = process.env.REACT_APP_ALGOLIA_API_KEY || ''
+export const indexName = process.env.REACT_APP_ALGOLIA_INDEX_NAME || ''
+export const userToken = process.env.REACT_APP_USER_TOKEN || ''
+export const searchClient = algoliasearch(appId, appKey)