diff --git a/anms-core/anms/routes/transcoder.py b/anms-core/anms/routes/transcoder.py
index 242864c..7720ef6 100644
--- a/anms-core/anms/routes/transcoder.py
+++ b/anms-core/anms/routes/transcoder.py
@@ -45,16 +45,19 @@ async def paged_transcoder_log(params: Params = Depends()):
         return await paginate(session, select(TranscoderLog).order_by(desc(TranscoderLog.transcoder_log_id)), params)
 
 
-@router.get("/db/search/{query}", status_code=status.HTTP_200_OK, response_model=Page[TL])
+@router.get("/db/search/{query:path}", status_code=status.HTTP_200_OK, response_model=Page[TL])
 async def paged_transcoder_log(query: str, params: Params = Depends()):
     async with get_async_session() as session:
-        query = '%' + query + '%'
-
-        return await paginate(session, select(TranscoderLog).where(or_(
-            TranscoderLog.input_string.ilike(query),
-            TranscoderLog.uri.ilike(query),
-            TranscoderLog.cbor.ilike(query)
-        )).order_by(desc(TranscoderLog.transcoder_log_id)), params)
+        filters = []
+        filters.append(TranscoderLog.input_string.ilike(f'%{query}%'))
+        filters.append(TranscoderLog.uri.ilike(f'%{query}%'))
+        filters.append(TranscoderLog.cbor.ilike(f'%{query}%'))
+        if query.isdigit():
+            filters.append(TranscoderLog.transcoder_log_id == int(query))
+
+        return await paginate(session, select(TranscoderLog)
+                              .where(or_(*filters))
+                              .order_by(desc(TranscoderLog.transcoder_log_id)), params)
 
 @router.get("/db/id/{id}", status_code=status.HTTP_200_OK, response_model=TL)
 async def transcoder_log_by_id(id: str):
diff --git a/anms-ui/public/app/components/management/builder/transcoder.vue b/anms-ui/public/app/components/management/builder/transcoder.vue
index 6f077d4..7670efc 100644
--- a/anms-ui/public/app/components/management/builder/transcoder.vue
+++ b/anms-ui/public/app/components/management/builder/transcoder.vue
@@ -2,70 +2,72 @@
   <div>
     <template v-if="serviceLoading">
       <div class="d-flex justify-content-center mt-3">
-        <b-spinner variant="info" label="Loading..." type="grow"></b-spinner>
+        <b-spinner variant="info"
+          label="Loading..."
+          type="grow"></b-spinner>
       </div>
     </template>
     <template v-if="!serviceLoading">
-    <b-row>
-      <b-col offset="2" cols="8">
-        <div class="input-group mb-3">
-          <input
-            type="text"
-            class="form-control"
-            placeholder="Search by ID String, URI, or CBOR"
-            v-model="searchString"
-            @change="handleSearchStringChange($event)"
-            v-on:keyup.enter="handlePageChange(1)"
-          />
-          <div class="input-group-append">
-            <button
-              class="btn btn-outline-secondary"
-              type="button"
-              @click="handlePageChange(1)"
-            >
-              Search
-            </button>
+      <b-row>
+        <b-col offset="2"
+          cols="8">
+          <div class="input-group mb-3">
+            <input type="text"
+              class="form-control"
+              placeholder="Search by ID, Input String, URI, or CBOR"
+              v-model="searchString"
+              @change="handleSearchStringChange($event)"
+              v-on:keyup.enter="handlePageChange(1)" />
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary"
+                type="button"
+                @click="handlePageChange(1)">
+                Search
+              </button>
+            </div>
           </div>
-        </div>
-        <div class="mb-3">
-          Items per Page:
-          <select v-model="pageSize" @change="handlePageSizeChange($event)">
-            <option v-for="size in pageSizes" :key="size" :value="size">
-              {{ size }}
-            </option>
-          </select>
-        </div>
-        <b-pagination
-          v-model="page"
-          :total-rows="count"
-          :per-page="pageSize"
-          aria-controls="transcoder-table"
-          @change="handlePageChange"
-        ></b-pagination>
-        <div class="b-table">
-        <p>Select CBOR to send to Agents tab</p>
-        <b-table scr
-          id="transcoder-table"
-          :items="currentTranscoderLogs"
-          :fields="fields"
-          :per-page="pageSize"
-          hover
-          bordered
-          :sort-by.sync="sortField"
-          :sort-desc.sync="sortDesc"
-        >
-          <template #cell(cbor)="{ item }">
-            <h5 v-b-tooltip.hover
-      title="send to agents page"
-      @click="sendTranscoderCode(item.cbor)">
-              {{ item.cbor }}
-            </h5>
-          </template>
-        </b-table>
-        </div>
-      </b-col>
-    </b-row>
-  </template>
+          <div class="b-table">
+            <p>Select CBOR to send to Agents tab</p>
+            <b-table scr
+              id="transcoder-table"
+              :items="currentTranscoderLogs"
+              :fields="fields"
+              :per-page="pageSize"
+              hover
+              bordered
+              :sort-by.sync="sortField"
+              :sort-desc.sync="sortDesc">
+              <template #cell(cbor)="{ item }">
+                <h5 v-b-tooltip.hover
+                  title="send to agents page"
+                  @click="sendTranscoderCode(item.cbor)">
+                  {{ item.cbor }}
+                </h5>
+              </template>
+            </b-table>
+            <div class="d-flex float-right">
+              <div class="my-2 mx-3">
+                Items per Page:
+                <select v-model="pageSize"
+                  @change="handlePageSizeChange($event)">
+                  <option v-for="size in pageSizes"
+                    :key="size"
+                    :value="size">
+                    {{ size }}
+                  </option>
+                </select>
+              </div>
+              <b-pagination v-model="page"
+                class="m-0"
+                :total-rows="count"
+                :per-page="pageSize"
+                aria-controls="transcoder-table"
+                @change="handlePageChange"></b-pagination>
+            </div>
+          </div>
+        </b-col>
+      </b-row>
+    </template>
   </div>
 </template>
 
@@ -78,7 +80,7 @@ export default {
   data() {
     return {
       fields: [
-       {key:"transcoder_log_id", sortable:true},	{key:"input_string", sortable:true},	{key:"parsed_as", sortable:true}, {key:"cbor", sortable:false},	{key:"ari",sortable:false},{key:"uri", sortable:false},
+        { key: "transcoder_log_id", sortable: true }, { key: "input_string", sortable: true }, { key: "parsed_as", sortable: true }, { key: "cbor", sortable: false }, { key: "ari", sortable: false }, { key: "uri", sortable: false },
       ],
       nodeMan: null,
       node: null,
@@ -90,24 +92,24 @@ export default {
       loading: true,
       errored: false,
       pageSizes: [5, 10, 20, 50, 100],
-      selected:null,
-      transcoderWorkerId:"",
-      sortField:"",
-      sortDesc:false,
+      selected: null,
+      transcoderWorkerId: "",
+      sortField: "",
+      sortDesc: false,
     };
   },
   mounted() {
     const vm = this;
     vm.reloadTranscoderLog();
     vm.transcoderWorkerId = setInterval(() => {
-        console.log("Calling schedule transcoder Log refresh in App");
-        vm.reloadTranscoderLog();
+      console.log("Calling schedule transcoder Log refresh in App");
+      vm.reloadTranscoderLog();
     }, status_refresh_rate);
   },
   beforeDestroy() {
-      console.log("Clearing interval with id:", this.transcoderWorkerId);
-      clearInterval(this.transcoderWorkerId);
-    },
+    console.log("Clearing interval with id:", this.transcoderWorkerId);
+    clearInterval(this.transcoderWorkerId);
+  },
   computed: {
     ...mapGetters("transcoder", {
       currentTranscoderLogs: "currentTranscoderLogs",
@@ -139,10 +141,8 @@ export default {
     handlePageSizeChange(event) {
       const vm = this;
       vm.setPageSize(event.target.value);
-      // vm.setPage(1);
-      // vm.reloadTranscoderLog();
+      handlePageChange(1);
     },
-    
     handleSearchStringChange(event) {
       const vm = this;
       vm.setSearchString(event.target.value);
@@ -151,9 +151,14 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 .b-table {
   max-height: calc(100vh - 300px);
   overflow-y: auto;
 }
+
+.page-item.active .page-link {
+  border-color: var(--success);
+  color: var(--success)
+}
 </style>
diff --git a/anms-ui/server/components/transcoder.js b/anms-ui/server/components/transcoder.js
index 940591e..6a99407 100644
--- a/anms-ui/server/components/transcoder.js
+++ b/anms-ui/server/components/transcoder.js
@@ -96,8 +96,12 @@
         return next(Boom.badData('Invalid size=' + req.query.size));
       }
       const params = {'page': req.query.page, 'size': req.query.size };
-      const url = utils.generateAnmsCoreUrl(['transcoder', 'db', 'search', transcoderQuery], params);
+      const url = utils.generateAnmsCoreUrl(['transcoder', 'db', 'search', encodeURIComponent(transcoderQuery)], params);
+      console.log("[getTranscoderPagedBySearch]: url");
+      console.log(url);
       const transcoderLog = await axios.get(url);
+      console.log("[getTranscoderPagedBySearch]: transcoderLog.data");
+      console.log(transcoderLog.data);
       return res.status(200).json(transcoderLog.data);
     }
     catch (err) {