diff --git a/src/components/atoms/SelectOption/SelectOption.js b/src/components/atoms/SelectOption/SelectOption.js
index cb6752f..9685e79 100644
--- a/src/components/atoms/SelectOption/SelectOption.js
+++ b/src/components/atoms/SelectOption/SelectOption.js
@@ -1,11 +1,59 @@
 import React from 'react';
-import styles from './SelectOption.component.scss';
+import PropTypes from 'prop-types';
+import './SelectOption.component.scss';
 
-const SelectOption = props => {
+const SelectOption = ({meta}) => {
+  const optionList = meta.options.map((_option, index) => {
+    return (
+        <option value={_option.value} key={index}>
+            {_option.label}
+        </option>
+    )
+  })
   return (
-    <div className={styles.root}>
+    <div
+        className={`form-wrapper__form-row c-form-field ${
+            meta.container_class ? meta.container_class : ''
+        }`}
+        aria-required={meta.aria_required}
+    >
+        <label htmlFor={meta.id}>
+            {meta.validation.required.isRequired && (
+                <span className="required-indicator">* </span>
+            )}
+            {meta.label}
+        </label>
+        {meta.secondaryLabel ? (
+            <span className="field--label-description">{meta.secondaryLabel}</span>
+        ) : null}
+        <div className="form-wrapper__field-wrapper">
+            {meta.error && (
+                <span className="form-wrapper__field-error">{meta.errorMessage}</span>
+            )}
+            <select
+                id={meta.id}
+                name={meta.name}
+                onBlur={(e) =>
+                    meta.handlers.onBlurHandler(meta.validation, meta.customBlurHandler, e)
+                }
+                value={
+                    meta.fieldValues.stateValue
+                        ? meta.fieldValues.stateValue
+                        : meta.fieldValues.propsValue
+                        ? meta.fieldValues.propsValue
+                        : meta.value
+                }
+                onChange={meta.handlers.onChangeHandler}
+            >
+                {optionList}
+            </select>
+        </div>
     </div>
   );
 };
 
+SelectOption.props = {
+  meta: PropTypes.object
+}
+
 export default SelectOption;
\ No newline at end of file
diff --git a/src/components/molecules/RuleContainer/RuleContainer.jsx b/src/components/molecules/RuleContainer/RuleContainer.jsx
index d7761e4..6b78fe1 100644
--- a/src/components/molecules/RuleContainer/RuleContainer.jsx
+++ b/src/components/molecules/RuleContainer/RuleContainer.jsx
@@ -8,7 +8,6 @@ import {getFormValues, getFormErrors} from './../../../pages/TCAssignmentHome/se
 import Form from '../common/Form';
 import ruleFormFields from './../../../config/forms-meta/rule-form.json'
 import './RuleContainer.component.scss';
-import sampleResponse from './../../../temp/sampleResponse.json'
 
 const RuleContainer = ({formErrors, formValues, history, dispatchResponse, updateFormErrors, updateFormValues}) => {
 
@@ -16,8 +15,8 @@ const RuleContainer = ({formErrors, formValues, history, dispatchResponse, updat
     const row = formValues['row']
     const column = formValues['column']
 
-    const baseURL = "http://truecallerassignment.herokuapp.com"
-    // const baseURL = "http://localhost:8080"
+    // const baseURL = "http://truecallerassignment.herokuapp.com"
+    const baseURL = "http://localhost:8080"
     const service = "findpath"
     const finalURL = `${baseURL}/${service}?row=${row}&column=${column}`
 
@@ -39,7 +38,6 @@ const RuleContainer = ({formErrors, formValues, history, dispatchResponse, updat
         history.push('/view/demo')
       })
       .catch(err => console.log(err))
-    // dispatchResponse(sampleResponse)
   }
   
   return (
diff --git a/src/pages/TCAssignmentDemo/TCAssignmentDemo.jsx b/src/pages/TCAssignmentDemo/TCAssignmentDemo.jsx
index 989934a..e9642f3 100644
--- a/src/pages/TCAssignmentDemo/TCAssignmentDemo.jsx
+++ b/src/pages/TCAssignmentDemo/TCAssignmentDemo.jsx
@@ -29,7 +29,7 @@ const TCAssignmentDemo = ({route}) => {
           <div className="col-1"/>
           {
             jlist.map((num, keyCol) => {
-              return <div className={`col-1 jCol-${keyCol + 1}`} id={`col-${(keyRow + 1) + "-" + (keyCol + 1)}`} key={keyCol}>{num}</div>
+              return <div className={`col-1 jCol-${keyCol + 1}`} id={`col-${(keyRow + 1) + "-" + (keyCol + 1)}`} key={keyCol} onClick={(ev) => ev.target.classList.add("tile-animation")}>{num}</div>
             })
           }
           <div className="col-1" />
@@ -60,6 +60,9 @@ const TCAssignmentDemo = ({route}) => {
       const rowNcol = tile.split('-')
       const identifier = "col-" + rowNcol[0] + "-" + rowNcol[1]
       const element = document.getElementById(identifier)
+      if (element == null) {
+        console.log(allowedTilesList)
+      }
       previousAllowedTileList.push(element)
       element.classList.add('tile-highlighted')
     })
diff --git a/src/pages/TCAssignmentDemo/TCAssignmentDemo.module.scss b/src/pages/TCAssignmentDemo/TCAssignmentDemo.module.scss
index 6ff9de8..98ae4b2 100644
--- a/src/pages/TCAssignmentDemo/TCAssignmentDemo.module.scss
+++ b/src/pages/TCAssignmentDemo/TCAssignmentDemo.module.scss
@@ -29,6 +29,9 @@
       height: 100%;
       border-radius: 24px;
       background: red;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }