diff --git a/src/api/ADempiere/file-management/resources.ts b/src/api/ADempiere/file-management/resources.ts
new file mode 100644
index 0000000000..f0bf1c3c39
--- /dev/null
+++ b/src/api/ADempiere/file-management/resources.ts
@@ -0,0 +1,45 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Elsio Sanchez elsiosanchez15@outlook.com https://github.com/elsiosanchez
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Get Instance for connection
+import { request } from '@/utils/ADempiere/request'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
+/**
+ * Get resource
+ * @param {number} id
+ * @param {string} resourceName as fileName
+ * @returns {promise}
+ */
+export function requestGetResource({
+  id,
+  //
+  resourceName
+}) {
+  let path = `/file-management/resources/${id}`
+  if (isEmptyValue(resourceName)) {
+    path = `/file-management/resources/file-name/${resourceName}`
+  }
+
+  return request({
+    url: path,
+    method: 'get'
+  })
+}
diff --git a/src/api/ADempiere/user-interface/component/resource.js b/src/api/ADempiere/user-interface/component/resource.js
index c51dea6ba4..ff073db141 100644
--- a/src/api/ADempiere/user-interface/component/resource.js
+++ b/src/api/ADempiere/user-interface/component/resource.js
@@ -22,37 +22,6 @@ import { request } from '@/utils/ADempiere/request'
 // Constants
 import { config } from '@/utils/ADempiere/config'
 
-// Download a resource from file name
-export function requestResource({ resourceUuid, resourceName }, callBack = {
-  onData: () => {},
-  onStatus: () => {},
-  onEnd: () => {}
-}) {
-  const { getResoursePath } = require('@/utils/ADempiere/resource.js')
-  const { urn } = getResoursePath({
-    resourceUuid,
-    resourceName
-  })
-  return request({
-    url: urn,
-    method: 'get',
-    // responseType: 'arraybuffer',
-    baseURL: config.adempiere.resource.url
-  })
-}
-
-export function requestDownloadResource({ resourceUuid, resourceName }) {
-  return request({
-    url: '/user-interface/component/resource/download',
-    method: 'get',
-    // responseType: 'arraybuffer',
-    params: {
-      resource_uuid: resourceUuid,
-      resource_name: resourceName
-    }
-  })
-}
-
 /**
  * Get image with uri request
  * @param {string} file
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/attachment.js b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/attachment.js
index 8573dd4844..a66b23e648 100644
--- a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/attachment.js
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/attachment.js
@@ -22,16 +22,19 @@ import store from '@/store'
 
 // API Request Methods
 import {
-  requestResource,
   sendAttachmentDescription,
   sendAttachmentDescriptionHeader
 } from '@/api/ADempiere/user-interface/component/resource'
 import {
   requestDeleteResourceReference
 } from '@/api/ADempiere/file-management/resource-reference.ts'
+import {
+  requestGetResource
+} from '@/api/ADempiere/file-management/resources.ts'
 
 // Components and Mixins
 import FileRender from '@/components/ADempiere/FileRender/index.vue'
+import ListView from './listView.vue'
 import LoadingView from '@/components/ADempiere/LoadingView/index.vue'
 import UploadResource from './uploadResource.vue'
 import PanelFooter from '@/components/ADempiere/PanelFooter/index.vue'
@@ -42,7 +45,6 @@ import { showMessage } from '@/utils/ADempiere/notification.js'
 import {
   buildLinkHref,
   formatFileSize,
-  getImagePath,
   getImageFromContentType
 } from '@/utils/ADempiere/resource.js'
 
@@ -51,6 +53,7 @@ export default defineComponent({
 
   components: {
     FileRender,
+    ListView,
     LoadingView,
     PanelFooter,
     UploadResource
@@ -115,9 +118,10 @@ export default defineComponent({
           return []
         }
         return storedResourcesList.map(element => {
+          const sourceFile = getSurceFile(element)
           return {
             ...element,
-            src: getSurceFile(element),
+            src: sourceFile,
             isShowMessage: false
           }
         })
@@ -178,21 +182,20 @@ export default defineComponent({
      * @param {Boolean} isDownload
      */
     const handleDownload = async(file, isDownload = true) => {
-      let link
-      if (file.content_type.includes('image')) {
-        const imagen = await fetch(file.src)
-        const imagenblob = await imagen.blob()
-        const imageURL = URL.createObjectURL(imagenblob)
-        link = document.createElement('a')
-        link.href = imageURL
-        link.download = file.name
-        link.click()
-        return
-      }
-
-      requestResource({
-        resourceUuid: file.uuid,
-        resourceName: file.file_name
+      // let link
+      // if (file.content_type.includes('image')) {
+      //   const imagen = await fetch(file.src)
+      //   const imagenblob = await imagen.blob()
+      //   const imageURL = URL.createObjectURL(imagenblob)
+      //   link = document.createElement('a')
+      //   link.href = imageURL
+      //   link.download = file.name
+      //   link.click()
+      //   return
+      // }
+      requestGetResource({
+        id: file.id,
+        resourceName: file.valid_file_name
       }).then(response => {
         buildLinkHref({
           fileName: file.name,
@@ -209,7 +212,7 @@ export default defineComponent({
      */
     function getSurceFile(file) {
       if (file.content_type.includes('image')) {
-        return getImageFromSource(file).uri
+        return getImageFromSource(file)
       }
       return getImageFromContentType({
         contentType: file.content_type,
@@ -221,13 +224,16 @@ export default defineComponent({
      * Image From Source
      * @param {Object} file
      */
-    const getImageFromSource = (file) => {
-      const image = getImagePath({
-        file: file.file_name,
-        width: 900,
-        height: 500
+    const getImageFromSource = async(file) => {
+      const bytes = await requestGetResource({
+        id: file.id,
+        resourceName: file.valid_file_name
       })
-      return image
+
+      const base64_array = bytes.map(part => part.data)
+      const base64_string = base64_array.join('')
+
+      return 'data:' + file.content_type + ';base64,' + base64_string
     }
 
     /**
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/listView.vue b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/listView.vue
new file mode 100644
index 0000000000..5789adc641
--- /dev/null
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/listView.vue
@@ -0,0 +1,165 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-row :gutter="20">
+    <el-col v-for="(file, key) in attachmentList" :key="key" :span="24">
+      <el-card shadow="hover" :class="{ 'image-attachment': true, 'is-current': isCurrent(file) }">
+        <div style="float: left;width: 40%; height: 100px;">
+          <el-image
+            class="image-card-attachment"
+            :src="file.src"
+            fit="contain"
+            :preview-src-list="previewList"
+            style="padding-left: 0px;padding-right: 0px;border: 1px solid rgba(184, 186, 188, 0.64);width: 150px;height: 100px;float: left;margin-top: 5%;"
+          />
+        </div>
+        <div style="float: left;padding-top: 2%;width: 60%;">
+          <el-radio
+            v-if="isSelectable"
+            v-model="resourceReference.id"
+            :label="file.id"
+            @click="resourceReference = file"
+          >
+            {{ file.name }}
+          </el-radio>
+          <p
+            v-else
+            style="font-size: 14px;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-break: break-all;text-align: end;padding-right: 10px;"
+          >
+            {{ file.name }}
+            <br>
+            {{ formatFileSize(file.file_size) }}
+          </p>
+          <!-- <b>{{ file.name }}</b> -->
+          <br>
+          <!-- <span>{{ formatFileSize(file.file_size) }}</span> -->
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import {
+  formatFileSize,
+  getImagePath,
+  getImageFromContentType
+} from '@/utils/ADempiere/resource.js'
+
+export default defineComponent({
+  name: 'ListView',
+
+  props: {
+    isSelectable: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup(props) {
+    const attachmentList = computed({
+      set(value) {
+        store.commit('setListAttachment', value)
+      },
+      get() {
+        const storedResourcesList = store.getters.getListAttachment
+        if (isEmptyValue(storedResourcesList)) {
+          return []
+        }
+        return storedResourcesList.map(element => {
+          return {
+            ...element,
+            src: getSurceFile(element),
+            isShowMessage: false
+          }
+        })
+      }
+    })
+
+    const previewList = computed(() => {
+      return attachmentList.value.map(file => file.src)
+    })
+
+    const resourceReference = computed({
+      set(value) {
+        store.commit('setResourceReference', value)
+      },
+      get() {
+        return store.getters.getResourceReference
+      }
+    })
+
+    /**
+     * Current Filed
+     * @param {Object} file
+     */
+    function isCurrent(file) {
+      if (!props.isSelectable) {
+        return false
+      }
+      if (isEmptyValue(resourceReference.value)) {
+        return false
+      }
+      return resourceReference.value.id === file.id
+    }
+
+    /**
+     * Image From Source
+     * @param {Object} file
+     */
+    const getImageFromSource = (file) => {
+      const image = getImagePath({
+        file: file.file_name,
+        width: 900,
+        height: 500
+      })
+      return image
+    }
+
+    /**
+     * Get Surce File
+     * @param {Object} file
+     */
+    function getSurceFile(file) {
+      if (file.content_type.includes('image')) {
+        return getImageFromSource(file).uri
+      }
+      return getImageFromContentType({
+        contentType: file.content_type,
+        fileName: file.file_name
+      })
+    }
+
+    return {
+      // computeds
+      attachmentList,
+      previewList,
+      // methods
+      formatFileSize,
+      isCurrent
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeDesktop.vue b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeDesktop.vue
index c9400ced31..4800c888c2 100644
--- a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeDesktop.vue
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeDesktop.vue
@@ -193,47 +193,14 @@
         </el-row>
 
         <!-- List View -->
-        <el-row v-else :gutter="20">
-          <el-col v-for="(file, key) in attachmentList" :key="key" :span="24">
-            <el-card shadow="hover" :class="{ 'image-attachment': true, 'is-current': isCurrent(file) }">
-              <div style="float: left;width: 40%; height: 100px;">
-                <el-image
-                  class="image-card-attachment"
-                  :src="file.src"
-                  fit="contain"
-                  :preview-src-list="previewList"
-                  style="padding-left: 0px;padding-right: 0px;border: 1px solid rgba(184, 186, 188, 0.64);width: 150px;height: 100px;float: left;margin-top: 5%;"
-                />
-              </div>
-              <div style="float: left;padding-top: 2%;width: 60%;">
-                <el-radio
-                  v-if="isSelectable"
-                  v-model="resourceReference.id"
-                  :label="file.id"
-                  @click="resourceReference = file"
-                >
-                  {{ file.name }}
-                </el-radio>
-                <p
-                  v-else
-                  style="font-size: 14px;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-break: break-all;text-align: end;padding-right: 10px;"
-                >
-                  {{ file.name }}
-                  <br>
-                  {{ formatFileSize(file.file_size) }}
-                </p>
-                <!-- <b>{{ file.name }}</b> -->
-                <br>
-                <!-- <span>{{ formatFileSize(file.file_size) }}</span> -->
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
+        <list-view v-else :is-selectable="isSelectable" />
       </el-card>
+
       <div v-if="isEmptyValue(attachmentList)">
         <el-empty />
       </div>
     </el-main>
+
     <!-- Add Description -->
     <el-footer
       height="auto"
@@ -306,6 +273,7 @@
 </template>
 
 <script src="./attachment.js" />
+
 <style lang="scss" scoped src="./attchment.scss" />
 <style scoped>
 .attachment-panel {
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeMobile.vue b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeMobile.vue
index f43a718ba9..edf0699d14 100644
--- a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeMobile.vue
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/modeMobile.vue
@@ -191,41 +191,9 @@
       </el-row>
 
       <!-- List View -->
-      <el-row v-else :gutter="20">
-        <el-col v-for="(file, key) in attachmentList" :key="key" :span="24">
-          <el-card shadow="hover" :class="{ 'image-attachment': true, 'is-current': isCurrent(file) }">
-            <div style="float: left;width: 40%; height: 100px;">
-              <el-image
-                class="image-card-attachment"
-                :src="file.src"
-                fit="contain"
-                :preview-src-list="previewList"
-                style="padding-left: 0px;padding-right: 0px;border: 1px solid rgba(184, 186, 188, 0.64);width: 150px;height: 100px;float: left;margin-top: 5%;"
-              />
-            </div>
-            <div style="float: left;padding-top: 2%;width: 60%;">
-              <el-radio
-                v-if="isSelectable"
-                v-model="resourceReference.id"
-                :label="file.id"
-                @click="resourceReference = file"
-              >
-                {{ file.name }}
-              </el-radio>
-              <p
-                v-else
-                style="font-size: 14px;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-break: break-all;text-align: end;padding-right: 10px;"
-              >
-                {{ file.name }}
-                <br>
-                {{ formatFileSize(file.file_size) }}
-              </p>
-              <br>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
+      <list-view v-else :is-selectable="isSelectable" />
     </el-main>
+
     <el-footer
       height="auto"
     >
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 5b0ab055f1..ccc1a8621a 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -49,8 +49,10 @@
 
 <script>
 import { defineComponent, computed, ref } from '@vue/composition-api'
+
 import router from '@/router'
 import store from '@/store'
+
 // Utils and Helper Methods
 import { getImagePath } from '@/utils/ADempiere/resource.js'
 
@@ -63,6 +65,7 @@ export default defineComponent({
       required: true
     }
   },
+
   setup() {
     // Ref
     const title = ref('ADempiere')
@@ -81,8 +84,8 @@ export default defineComponent({
     const storedOrganization = computed(() => {
       return store.getters['user/getOrganization']
     })
-    // Methods
 
+    // Methods
     async function loadImage() {
       const { client } = getRole.value
       if (client.logo) {
diff --git a/src/utils/ADempiere/resource.js b/src/utils/ADempiere/resource.js
index dcaccadee0..5b84e28bb5 100644
--- a/src/utils/ADempiere/resource.js
+++ b/src/utils/ADempiere/resource.js
@@ -127,11 +127,10 @@ export async function getImagePath({
       operation
     })
       .then(async response => {
-        const { data } = response[0]
         image = await buildLinkHref({
           fileName: file,
           mimeType: file.split('.').pop(),
-          outputStream: data
+          outputStream: response
         })
         resolve(image)
         return image
@@ -209,27 +208,34 @@ export function buildBlobAndValues({
   mimeType,
   outputStream
 }) {
-  let dataValues = outputStream
+  let buffer = outputStream
 
   if (getTypeOfValue(outputStream) === 'OBJECT') {
-    dataValues = Object.values(outputStream)
+    buffer = Object.values(outputStream)
   } else if (getTypeOfValue(outputStream) === 'STRING') {
-    dataValues = Buffer.from(outputStream, 'base64')
+    buffer = Buffer.from(outputStream, 'base64')
+  } else if (getTypeOfValue(outputStream) === 'ARRAY') {
+    const base64_array = outputStream.map(part => part.data)
+    const base64_string = base64_array.join('')
+    buffer = Buffer.from(
+      base64_string,
+      'base64'
+    )
   }
 
   const blobFile = new Blob([
-    Uint8Array.from(dataValues)
+    Uint8Array.from(buffer)
   ], {
     type: mimeType
   })
 
   // const blobFile = new Blob(
-  //   [outputStream],
+  //   [buffer],
   //   { type: mimeType }
   // )
 
   return {
-    dataValues,
+    dataValues: buffer,
     blobFile
   }
 }
@@ -250,30 +256,28 @@ export function buildLinkHref({
   outputStream,
   isDownload = false
 }) {
-  return new Promise((resolve) => {
-    if (isEmptyValue(mimeType)) {
-      if (isEmptyValue(extension)) {
-        extension = getExtensionFromFile(fileName)
-      }
-      mimeType = mimeTypeOfReport[extension]
+  if (isEmptyValue(mimeType)) {
+    if (isEmptyValue(extension)) {
+      extension = getExtensionFromFile(fileName)
     }
+    mimeType = mimeTypeOfReport[extension]
+  }
 
-    const { blobFile } = buildBlobAndValues({
-      mimeType,
-      outputStream
-    })
+  const { blobFile } = buildBlobAndValues({
+    mimeType,
+    outputStream
+  })
 
-    const link = document.createElement('a')
-    link.href = window.URL.createObjectURL(blobFile)
-    link.download = fileName
+  const link = document.createElement('a')
+  link.href = window.URL.createObjectURL(blobFile)
+  link.download = fileName
 
-    // download report file
-    if (isDownload) {
-      link.click()
-    }
+  // download report file
+  if (isDownload) {
+    link.click()
+  }
 
-    return resolve(link)
-  })
+  return link
 }
 
 /**