diff --git a/src/components/Contexts/DTCTimelineContext.jsx b/src/components/Contexts/DTCTimelineContext.jsx
index 9649182..dded562 100644
--- a/src/components/Contexts/DTCTimelineContext.jsx
+++ b/src/components/Contexts/DTCTimelineContext.jsx
@@ -9,15 +9,15 @@ export const DTCTimelineProvider = ({ children }) => {
   const [dtcData, setDTCData] = useState([]);
   const [total, setTotal] = useState(0)
 
-  const getDTCData = async (vin, ecu, startDate, endDate, search,token) => {
+  const getDTCData = async (vin, ecu, troubleCode, startDate, endDate, search, token) => {
     try {
       setBusy(true);
-      const result = await api.getDTCData(vin, ecu, startDate, endDate, search,token);
+      const result = await api.getDTCData(vin, ecu, troubleCode, startDate, endDate, search, token);
       if (result.error) {
         throw new Error(`Get DTC data error. ${result.message}`);
       }
       setDTCData(result.data ?? []);
-      if (result.total){
+      if (result.total) {
         setTotal(result.total)
       }
       return result;
diff --git a/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap
index 3cde435..156a9b6 100644
--- a/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap
+++ b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap
@@ -377,6 +377,42 @@ exports[`Render Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
+                  data-shrink="true"
+                  for="trouble_code_field"
+                  id="trouble_code_field-label"
+                >
+                  Trouble Code
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="trouble_code_field"
+                    name="trouble_code_field"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                    >
+                      <span>
+                        Trouble Code
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
diff --git a/src/components/DTCTimeline/DTCTimeline/index.jsx b/src/components/DTCTimeline/DTCTimeline/index.jsx
index 199bc83..a02a420 100644
--- a/src/components/DTCTimeline/DTCTimeline/index.jsx
+++ b/src/components/DTCTimeline/DTCTimeline/index.jsx
@@ -23,6 +23,7 @@ const MainForm = ({ vin }) => {
   const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedECU, setSelectedECU] = useState("");
+  const [selectedTroubleCode, setSelectedTroubleCode] = useState("");
   const [gmtTimezone, setGmtTimezone] = useState(false);
   const [loading, setLoading] = useState(false);
   const { setMessage } = useStatusContext();
@@ -101,7 +102,7 @@ const MainForm = ({ vin }) => {
         offset: pageSize * pageIndex,
         order: `${orderBy} ${order}`,
       }
-      await getDTCData(vin, selectedECU, start_date, end_date, search, token);
+      await getDTCData(vin, selectedECU, selectedTroubleCode, start_date, end_date, search, token);
       // setDTCData(data);
     } catch (e) {
       setMessage(e.message);
@@ -244,6 +245,21 @@ const MainForm = ({ vin }) => {
                 setSelectedECU(e.target.value);
               }}
             />
+            <TextField
+              id="trouble_code_field"
+              name="trouble_code_field"
+              label="Trouble Code"
+              InputLabelProps={{
+                shrink: true
+              }}
+              defaultValue=""
+              variant="outlined"
+              margin="normal"
+              fullWidth
+              onChange={(e) => {
+                setSelectedTroubleCode(e.target.value);
+              }}
+            />
           </div>
         </Grid>
         <Grid item xs={12}>
diff --git a/src/services/DTCTimelineAPI.js b/src/services/DTCTimelineAPI.js
index 3fce6c6..96aef95 100644
--- a/src/services/DTCTimelineAPI.js
+++ b/src/services/DTCTimelineAPI.js
@@ -8,12 +8,13 @@ import {
 const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const DTCTimelineAPI = {
-  getDTCData: async (vin, ecu, startDate, endDate,search,token) => {
+  getDTCData: async (vin, ecu, troubleCode, startDate, endDate, search, token) => {
     const queryParams = {
       ecu,
+      trouble_code: troubleCode,
       start_time: startDate,
       end_time: endDate,
-      decode:true,
+      decode: true,
       ...search,
     };
     const url = addQueryParams(`${API_ENDPOINT}/dtcs/${vin}`, queryParams);