diff --git a/Dependency-Graph/app.json b/Dependency-Graph/app.json
index 89df1ac..14a0efb 100644
--- a/Dependency-Graph/app.json
+++ b/Dependency-Graph/app.json
@@ -2,7 +2,7 @@
   "id": "3c9a4c22-42f6-4e8f-8b96-744c7fef331f",
   "name": "Dependency-Graph",
   "publisher": "ANJ",
-  "version": "3.6.0.0",
+  "version": "3.8.0.3",
   "brief": "App to generate the dependency tree",
   "description": "App to generate the dependency tree of the extensions we have installed.",
   "privacyStatement": "https://github.com/NovoaDev/Dependency-Graph-BCExt",
diff --git a/Dependency-Graph/src/Base/MarkdownFactboxANJ.Page.al b/Dependency-Graph/src/Base/MarkdownFactboxANJ.Page.al
index 9e9aa0d..7e193ec 100644
--- a/Dependency-Graph/src/Base/MarkdownFactboxANJ.Page.al
+++ b/Dependency-Graph/src/Base/MarkdownFactboxANJ.Page.al
@@ -7,7 +7,7 @@ page 80805 MarkdownFactbox_ANJ
     Caption = 'Markdown Text', comment = 'ESP="Texto Markdown"';
     Editable = false;
     PageType = CardPart;
-    UsageCategory = Administration;
+    UsageCategory = None;
 
     layout
     {
@@ -15,6 +15,7 @@ page 80805 MarkdownFactbox_ANJ
         {
             field(MarkdownText; MarkdownText)
             {
+                Editable = false;
                 MultiLine = true;
                 ShowCaption = false;
             }
diff --git a/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerANJ.ControlAddin.al b/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerANJ.ControlAddin.al
index 4783bf4..c33c1b4 100644
--- a/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerANJ.ControlAddin.al
+++ b/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerANJ.ControlAddin.al
@@ -3,11 +3,13 @@
 /// </summary>
 controladdin MarkdownViewer_ANJ
 {
-    HorizontalStretch = true;
+    HorizontalShrink = true;
+    RequestedHeight = 600;
+    RequestedWidth = 650;
     Scripts = 'src\ControlAddinViewer\Scripts.js', 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.3.0/mermaid.min.js';
     StartupScript = 'src\ControlAddinViewer\Start.js';
-    VerticalStretch = true;
-
+    StyleSheets = 'src\ControlAddinViewer\Style.css';
+    VerticalShrink = true;
 
     /// <summary>
     /// Ready.
diff --git a/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerFSANJ.ControlAddin.al b/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerFSANJ.ControlAddin.al
new file mode 100644
index 0000000..eb601f7
--- /dev/null
+++ b/Dependency-Graph/src/ControlAddinViewer/MarkdownViewerFSANJ.ControlAddin.al
@@ -0,0 +1,22 @@
+/// <summary>
+/// ControlAddIn "MarkdownViewer_ANJ._ANJ"
+/// </summary>
+controladdin MarkdownViewerFS_ANJ
+{
+    HorizontalStretch = true;
+    Scripts = 'src\ControlAddinViewer\Scripts.js', 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.3.0/mermaid.min.js';
+    StartupScript = 'src\ControlAddinViewer\Start.js';
+    VerticalStretch = true;
+
+
+    /// <summary>
+    /// Ready.
+    /// </summary>
+    event Ready();
+
+    /// <summary>
+    /// Draw.
+    /// </summary>
+    /// <param name="Markdown">Text.</param>
+    procedure Draw(Markdown: Text);
+}
\ No newline at end of file
diff --git a/Dependency-Graph/src/ControlAddinViewer/Scripts.js b/Dependency-Graph/src/ControlAddinViewer/Scripts.js
index 6e7bab1..3e507e3 100644
--- a/Dependency-Graph/src/ControlAddinViewer/Scripts.js
+++ b/Dependency-Graph/src/ControlAddinViewer/Scripts.js
@@ -9,7 +9,7 @@ https://www.hougaard.com/
 function Draw(Markdown) {
     try {
         const insertSvg = function (svgCode, bindFunctions) {
-            document.getElementById('controlAddIn').innerHTML = svgCode;
+            document.getElementById('controlAddIn').innerHTML = '<div class=\'MermaidDiv\'>' + svgCode + '</div>';
         };
         mermaid.mermaidAPI.render('chart', Markdown, insertSvg);
     }
diff --git a/Dependency-Graph/src/ControlAddinViewer/Style.css b/Dependency-Graph/src/ControlAddinViewer/Style.css
new file mode 100644
index 0000000..b6bf04e
--- /dev/null
+++ b/Dependency-Graph/src/ControlAddinViewer/Style.css
@@ -0,0 +1,11 @@
+iframe {
+    margin: 0 auto;
+}
+
+.MermaidDiv {
+    width: 100%;
+    height: auto;
+    word-wrap: break-word;
+    padding-left: 1%;
+    padding-right: 1;
+}
\ No newline at end of file
diff --git a/Dependency-Graph/src/Markdown/MarkdownViewerANJ.Page.al b/Dependency-Graph/src/Markdown/MarkdownViewerANJ.Page.al
index 09c5217..71d8683 100644
--- a/Dependency-Graph/src/Markdown/MarkdownViewerANJ.Page.al
+++ b/Dependency-Graph/src/Markdown/MarkdownViewerANJ.Page.al
@@ -40,8 +40,9 @@ page 80804 MarkdownViewer_ANJ
     begin
         CurrPage.MarkdownViewer_ANJ.Draw(Markdown);
     end;
+
     /// <summary>
-    /// Draw.
+    /// SetMarkdown.
     /// </summary>
     /// <param name="AuxMarkdown">Text.</param>
     internal procedure SetMarkdown(AuxMarkdown: Text)
diff --git a/Dependency-Graph/src/Markdown/MarkdownViewerFullANJ.Page.al b/Dependency-Graph/src/Markdown/MarkdownViewerFullANJ.Page.al
index 12b95c1..bcc892d 100644
--- a/Dependency-Graph/src/Markdown/MarkdownViewerFullANJ.Page.al
+++ b/Dependency-Graph/src/Markdown/MarkdownViewerFullANJ.Page.al
@@ -12,7 +12,7 @@ page 80806 MarkdownViewerFull_ANJ
     {
         area(Content)
         {
-            usercontrol(MarkdownViewer_ANJ; MarkdownViewer_ANJ)
+            usercontrol(MarkdownViewerFS_ANJ; MarkdownViewerFS_ANJ)
             {
             }
         }
@@ -23,7 +23,7 @@ page 80806 MarkdownViewerFull_ANJ
         MarkdownMermaidFieldID: Integer;
     begin
         MarkdownMermaidFieldID := 15;
-        CurrPage.MarkdownViewer_ANJ.Draw(MarkdownMgmt.GetMarkdown(MarkdownMermaidFieldID));
+        CurrPage.MarkdownViewerFS_ANJ.Draw(MarkdownMgmt.GetMarkdown(MarkdownMermaidFieldID));
     end;
 
     var
diff --git a/README.es-ES.md b/README.es-ES.md
deleted file mode 100644
index 5372a81..0000000
--- a/README.es-ES.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Dependency Graph 
-[![en](https://img.shields.io/badge/lang-en-pink.svg)](https://github.com/NovoaDev/Dependency-Graph-BCExt/blob/main/README.md)
-[![es](https://img.shields.io/badge/lang-es-black.svg)](https://github.com/NovoaDev/Dependency-Graph-BCExt/blob/main/README.es-ES.md)
-
-Pequeña herramienta diseñada para crear un gráfico que muestra las extensiones instaladas y sus respectivas dependencias, todo ello desde el entorno de **Business Central** en el que se esté ejecutando la extensión. Además, permite previsualizar y descargar el texto generado para agregarlo fácilmente a la documentación del cliente en formato Markdown. <br> <br>
-**PD:** <br>
-Aunque existen numerosas herramientas más avanzadas disponibles, esta ha sido creada con el simple propósito de practicar, pero podría resultar útil para otros usuarios.
-
-## Prerrequisitos
-### Azure
-#### Crear Registro de Aplicación 
-**Tipos de cuenta compatibles:** <br>
-Solo cuentas de la organización. <br>
-**URI de redirección:** <br>
-"Web" https://businesscentral.dynamics.com/OAuthLanding.htm <br>
-![PortalAzure001](/res/PortalAzure001es-ES.png)
-
-#### Crear Secreto de Cliente
-![PortalAzure002](/res/PortalAzure002es-ES.png)
-
-#### Asignar permisos de API (Con consentimiento del Administrador) 
-API.ReadWrite.All <br>
-Automation.ReadWrite.All <br>
-![PortalAzure003](/res/PortalAzure003es-ES.png)
-
-### Business Central
-Crear nuevo registro en **Aplicaciones de Azure Active Directory** Indicando el ID de aplicación creado en Azure. <br>
-Agregar conjuntos de permisos de usuario **D365 AUTOMATION** y **EXTEN. MGT. - ADMIN**. <br>
-Cambiar estado a **activado** <br>
-**Conceder consentimiento** <br>
-![1AADBC](/res/1AADBCes-ES.png)
-
-## Página configuración del gráfico de dependencia
-![2DGSetup](/res/2DGSetupes-ES.png)
-- Registros de aplicaciones - **Azure** <br>
-Configuración del ID de Registro en **Azure** necesario para el funcionamiento.
-
-- Figuras de las app dentro del diagrama <br>
-Permite seleccionar con qué figura se representará una aplicación según su alcance.
-
-- Incluir al generar el gráfico <br>
-Características a incluir para la generación del gráfico: <br>
-    - Aplicaciones de Microsoft. 
-    - Texto enlace entre dependencias.
-
-- Última vez que se generó <br>
-Histórico.
-
-- Gráfico de dependencia <br>
-Acción para acceder a la página de generación de datos para el gráfico.
-
-## Página mostrar en gráfico de dependencia
-![3ShowInDG](/res/3ShowInDGes-ES.png)
-### Subpágina Extensiones 
-Lista de extensiones instaladas. Podremos modificar el campo **Nombre para mostrar** y **Mostrar en gráfico**. Cada vez que desmarquemos la opción **Mostrar en gráfico** de una extensión con dependencias, tendremos que generar nuevamente los datos de la tabla de relaciones. Esto se realiza mediante la acción de la subpágina llamada **Actualizar la tabla de relaciones**.
-
-### Subpágina Relaciones
-Lista de relaciones entre extensiones. Podremos modificar el campo **Texto de enlace** para agregar un texto entre dependencias y **Mostrar en gráfico**.
-
-### Acciones
-#### Generar datos
-El botón genera los datos en las tablas intermedias que están relacionadas con las subpáginas correspondientes a las secciones de **extensiones** y **relaciones**. Estas tablas son las que utilizaremos para personalizar el gráfico.
-### Visualizar gráfico de dependencia
-El botón abrirá una nueva página donde podremos ver el gráfico como borrador. 
-![4DGV.png](/res/4DGV.png)
-
-### Descargar Markdown como un .md
-El botón descargará un archivo .md con el contenido del gráfico, el cual podrás agregar fácilmente a cualquier documento.
-![5DPDownload](/res/5DPDownload.png)
-
-**Nota:** <br>
-Tanto para la acción de visualizar como para descargar el gráfico, se generará utilizando los datos que se encuentren en las subpáginas extensiones y relaciones, las cuales deben estar marcadas con la opción Mostrar en gráfico.
\ No newline at end of file
diff --git a/README.md b/README.md
index 5d270e9..69fa48f 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 # Dependency Graph 
-[![in](https://img.shields.io/badge/lang-en-pink.svg)](https://github.com/NovoaDev/Dependency-Graph-BCExt/blob/main/README.md)
-[![en](https://img.shields.io/badge/lang-es-black.svg)](https://github.com/NovoaDev/Dependency-Graph-BCExt/blob/main/README.es-ES.md)
-
 Small tool designed to create a graph showing installed extensions and their respective dependencies, all from the **Business Central** environment in which the extension is running. In addition, it allows you to preview and download the generated text to easily add it to the client's documentation in Markdown format. <br> <br>
 **PS:** <br>
 Although there are numerous more advanced tools available, this one has been created for the simple purpose of practice, but it could prove useful for other users.
 
-## Prerequisites
+## Usage
+![Usage.gif](/res/Usage.gif.png)
+
+## Previous configuration
 ### Azure
 #### Create App registrations
 **Supported account types:** <br>
@@ -48,26 +48,4 @@ Features to include for chart generation: <br>
 Historical.
 
 - Dependency graph <br>
-Action to access the data generation page for the graph.
-
-## Show in dependency graph page
-![3ShowInDG](/res/3ShowInDG.png)
-### Extensions subpage 
-List of installed extensions. We can modify the field **Display name** and **Show in chart**. Every time we uncheck the **Show in graph** option of an extension with dependencies, we will have to generate the data from the relationship table again. This is done by the action on the subpage named **Update Relationship Table**.
-
-### Relationships subpage
-List of relationships between extensions. We can modify the **Link text** field to add a text between dependencies and **Show in graphic**.
-
-### Actions
-#### Generate data
-The button generates the data in the intermediate tables that are related to the subpages corresponding to the **extensions** and **relationships** sections. These tables are the ones we will use to customize the graph.
-### Display dependency graph
-The button will open a new page where we can see the graph as a draft. 
-![4DGV.png](/res/4DGV.png)
-
-### Download Markdown as a .md
-The button will download an .md file with the content of the chart, which you can easily add to any document.
-![5DPDownload](/res/5DPDownload.png)
-
-**Note:** <br>
-Both for the action of viewing and downloading the graph, it will be generated using the data found in the extensions and relationships subpages, which must be marked with the Show in graph option.
\ No newline at end of file
+Action to access the data generation page for the graph.
\ No newline at end of file
diff --git a/res/3ShowInDG.png b/res/3ShowInDG.png
deleted file mode 100644
index f15886c..0000000
Binary files a/res/3ShowInDG.png and /dev/null differ
diff --git a/res/3ShowInDGes-ES.png b/res/3ShowInDGes-ES.png
deleted file mode 100644
index 4bd7fba..0000000
Binary files a/res/3ShowInDGes-ES.png and /dev/null differ
diff --git a/res/4DGV.png b/res/4DGV.png
deleted file mode 100644
index 38c0bde..0000000
Binary files a/res/4DGV.png and /dev/null differ
diff --git a/res/5DPDownload.png b/res/5DPDownload.png
deleted file mode 100644
index d6b533a..0000000
Binary files a/res/5DPDownload.png and /dev/null differ
diff --git a/res/PortalAzure001es-ES.png b/res/PortalAzure001es-ES.png
deleted file mode 100644
index 993bc9b..0000000
Binary files a/res/PortalAzure001es-ES.png and /dev/null differ
diff --git a/res/PortalAzure002es-ES.png b/res/PortalAzure002es-ES.png
deleted file mode 100644
index 7f22108..0000000
Binary files a/res/PortalAzure002es-ES.png and /dev/null differ
diff --git a/res/PortalAzure003es-ES.png b/res/PortalAzure003es-ES.png
deleted file mode 100644
index 82bd2ad..0000000
Binary files a/res/PortalAzure003es-ES.png and /dev/null differ
diff --git a/res/Usage.gif b/res/Usage.gif
new file mode 100644
index 0000000..7917bc5
Binary files /dev/null and b/res/Usage.gif differ