diff --git a/docker-compose.yaml b/docker-compose.yaml
index 75a87ab..7a84d0a 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,6 +1,18 @@
 version: '3.0'
 
 services:
+  jaeger:
+    image: jaegertracing/jaeger-query:1.51
+    container_name: 'jaeger-quickwit'
+    environment:
+      - GRPC_STORAGE_SERVER=host.docker.internal:7281
+      - SPAN_STORAGE_TYPE=grpc-plugin
+    ports:
+      - 16686:16686
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    networks:
+      - quickwit
   grafana:
     container_name: 'grafana-quickwit-datasource'
     build:
@@ -15,6 +27,12 @@ services:
       - gquickwit:/var/lib/grafana
     extra_hosts:
       - "host.docker.internal:host-gateway"
+    networks:
+      - quickwit
+
+networks:
+  quickwit:
+    driver: bridge
 
 volumes:
   gquickwit:
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
new file mode 100644
index 0000000..11f0239
--- /dev/null
+++ b/src/components/Divider.tsx
@@ -0,0 +1,25 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+export const Divider = ({ hideLine = false }) => {
+  const styles = useStyles2(getStyles);
+
+  if (hideLine) {
+    return <hr className={styles.dividerHideLine} />;
+  }
+
+  return <hr className={styles.divider} />;
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  divider: css({
+    margin: theme.spacing(4, 0),
+  }),
+  dividerHideLine: css({
+    border: 'none',
+    margin: theme.spacing(3, 0),
+  }),
+});
diff --git a/src/configuration/ConfigEditor.tsx b/src/configuration/ConfigEditor.tsx
index efa011c..18e7dba 100644
--- a/src/configuration/ConfigEditor.tsx
+++ b/src/configuration/ConfigEditor.tsx
@@ -3,6 +3,8 @@ import { DataSourceHttpSettings, Input, InlineField, FieldSet } from '@grafana/u
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
 import { QuickwitOptions } from 'quickwit';
 import { coerceOptions } from './utils';
+import { Divider } from 'components/Divider';
+import { DataLinks } from './DataLinks';
 
 interface Props extends DataSourcePluginOptionsEditorProps<QuickwitOptions> {}
 
@@ -27,6 +29,7 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
       <QuickwitDetails value={options} onChange={onSettingsChange} />
+      <QuickwitDataLinks value={options} onChange={onOptionsChange} />
     </>
   );
 };
@@ -35,6 +38,27 @@ type DetailsProps = {
   value: DataSourceSettings<QuickwitOptions>;
   onChange: (value: DataSourceSettings<QuickwitOptions>) => void;
 };
+
+export const QuickwitDataLinks = ({ value, onChange }: DetailsProps) => {
+  return (
+    <div className="gf-form-group">
+      <Divider hideLine />
+      <DataLinks
+        value={value.jsonData.dataLinks}
+        onChange={(newValue) => {
+          onChange({
+            ...value,
+            jsonData: {
+              ...value.jsonData,
+              dataLinks: newValue,
+            },
+          });
+        }}
+      />
+    </div>
+  )
+};
+
 export const QuickwitDetails = ({ value, onChange }: DetailsProps) => {
   return (
     <>
diff --git a/src/configuration/DataLink.tsx b/src/configuration/DataLink.tsx
new file mode 100644
index 0000000..f5a28b1
--- /dev/null
+++ b/src/configuration/DataLink.tsx
@@ -0,0 +1,192 @@
+import { css } from '@emotion/css';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { usePrevious } from 'react-use';
+
+import { DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data';
+import {
+  Button,
+  DataLinkInput,
+  InlineField,
+  InlineSwitch,
+  InlineFieldRow,
+  InlineLabel,
+  Input,
+  useStyles2,
+} from '@grafana/ui';
+
+import { DataSourcePicker } from '@grafana/runtime'
+
+import { DataLinkConfig } from '../types';
+
+interface Props {
+  value: DataLinkConfig;
+  onChange: (value: DataLinkConfig) => void;
+  onDelete: () => void;
+  suggestions: VariableSuggestion[];
+  className?: string;
+}
+
+export const DataLink = (props: Props) => {
+  const { value, onChange, onDelete, suggestions, className } = props;
+  const styles = useStyles2(getStyles);
+  const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
+  const [base64TraceId, setBase64TraceId] = useState(true)
+  const labelWidth = 24
+
+  const handleChange = (field: keyof typeof value) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({
+      ...value,
+      [field]: event.currentTarget.value,
+    });
+  };
+
+  const handleBase64TraceId = (base64TraceId: boolean, config: DataLinkConfig) => {
+    setBase64TraceId(base64TraceId)
+    config = {...config, base64TraceId: base64TraceId };
+  }
+
+  return (
+    <div className={className}>
+      <div className={styles.firstRow}>
+        <InlineField
+          label="Field"
+          htmlFor="elasticsearch-datasource-config-field"
+          labelWidth={labelWidth}
+          tooltip={'Can be exact field name or a regex pattern that will match on the field name.'}
+        >
+          <Input
+            type="text"
+            id="elasticsearch-datasource-config-field"
+            value={value.field}
+            onChange={handleChange('field')}
+            width={100}
+          />
+        </InlineField>
+        <Button
+          variant={'destructive'}
+          title="Remove field"
+          icon="times"
+          onClick={(event) => {
+            event.preventDefault();
+            onDelete();
+          }}
+        />
+      </div>
+
+      <InlineFieldRow>
+        <div className={styles.urlField}>
+          <InlineLabel htmlFor="elasticsearch-datasource-internal-link" width={labelWidth}>
+            {showInternalLink ? 'Query' : 'URL'}
+          </InlineLabel>
+          <DataLinkInput
+            placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}
+            value={value.url || ''}
+            onChange={(newValue) =>
+              onChange({
+                ...value,
+                url: newValue,
+              })
+            }
+            suggestions={suggestions}
+          />
+        </div>
+
+        <div className={styles.urlDisplayLabelField}>
+          <InlineField
+            label="URL Label"
+            htmlFor="elasticsearch-datasource-url-label"
+            labelWidth={14}
+            tooltip={'Use to override the button label.'}
+          >
+            <Input
+              type="text"
+              id="elasticsearch-datasource-url-label"
+              value={value.urlDisplayLabel}
+              onChange={handleChange('urlDisplayLabel')}
+            />
+          </InlineField>
+        </div>
+      </InlineFieldRow>
+
+      <div className={styles.row}>
+        <InlineField label="Field encoded in base64?" labelWidth={labelWidth} tooltip="Quickwit encodes the traceID in base64 by default whereas Jaeger uses hex">
+          <InlineSwitch
+            value={base64TraceId}
+            onChange={() => handleBase64TraceId(!base64TraceId, value)}
+          />
+        </InlineField>
+      </div>
+
+      <div className={styles.row}>
+        <InlineField label="Internal link" labelWidth={labelWidth}>
+          <InlineSwitch
+            label="Internal link"
+            value={showInternalLink || false}
+            onChange={() => {
+              if (showInternalLink) {
+                onChange({
+                  ...value,
+                  datasourceUid: undefined,
+                });
+              }
+              setShowInternalLink(!showInternalLink);
+            }}
+          />
+        </InlineField>
+
+        {showInternalLink && (
+          <DataSourcePicker
+            tracing={true}
+            onChange={(ds: DataSourceInstanceSettings) => {
+              onChange({
+                ...value,
+                datasourceUid: ds.uid,
+              });
+            }}
+            current={value.datasourceUid}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+function useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAction<boolean>>] {
+  const [showInternalLink, setShowInternalLink] = useState<boolean>(!!datasourceUid);
+  const previousUid = usePrevious(datasourceUid);
+
+  // Force internal link visibility change if uid changed outside of this component.
+  useEffect(() => {
+    if (!previousUid && datasourceUid && !showInternalLink) {
+      setShowInternalLink(true);
+    }
+    if (previousUid && !datasourceUid && showInternalLink) {
+      setShowInternalLink(false);
+    }
+  }, [previousUid, datasourceUid, showInternalLink]);
+
+  return [showInternalLink, setShowInternalLink];
+}
+
+const getStyles = () => ({
+  firstRow: css`
+    display: flex;
+  `,
+  nameField: css`
+    flex: 2;
+  `,
+  regexField: css`
+    flex: 3;
+  `,
+  row: css`
+    display: flex;
+    align-items: baseline;
+  `,
+  urlField: css`
+    display: flex;
+    flex: 1;
+  `,
+  urlDisplayLabelField: css`
+    flex: 1;
+  `,
+});
diff --git a/src/configuration/DataLinks.test.tsx b/src/configuration/DataLinks.test.tsx
new file mode 100644
index 0000000..17cfb1d
--- /dev/null
+++ b/src/configuration/DataLinks.test.tsx
@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { DataLinkConfig } from '../types';
+
+import { DataLinks, Props } from './DataLinks';
+
+const setup = (propOverrides?: Partial<Props>) => {
+  const props: Props = {
+    value: [],
+    onChange: jest.fn(),
+    ...propOverrides,
+  };
+
+  return render(<DataLinks {...props} />);
+};
+
+describe('DataLinks tests', () => {
+  it('should render correctly with no fields', async () => {
+    setup();
+
+    expect(screen.getByRole('heading', { name: 'Data links' }));
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
+    expect(await screen.findAllByRole('button')).toHaveLength(1);
+  });
+
+  it('should render correctly when passed fields', async () => {
+    setup({ value: testValue });
+
+    expect(await screen.findAllByRole('button', { name: 'Remove field' })).toHaveLength(2);
+    expect(await screen.findAllByRole('checkbox', { name: 'Internal link' })).toHaveLength(2);
+  });
+
+  it('should call onChange to add a new field when the add button is clicked', async () => {
+    const onChangeMock = jest.fn();
+    setup({ onChange: onChangeMock });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    const addButton = screen.getByRole('button', { name: 'Add' });
+    await userEvent.click(addButton);
+
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  it('should call onChange to remove a field when the remove button is clicked', async () => {
+    const onChangeMock = jest.fn();
+    setup({ value: testValue, onChange: onChangeMock });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    const removeButton = await screen.findAllByRole('button', { name: 'Remove field' });
+    await userEvent.click(removeButton[0]);
+
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
+
+const testValue: DataLinkConfig[] = [
+  {
+    field: 'regex1',
+    url: 'localhost1',
+    base64TraceId: false,
+  },
+  {
+    field: 'regex2',
+    url: 'localhost2',
+    base64TraceId: true,
+  },
+];
diff --git a/src/configuration/DataLinks.tsx b/src/configuration/DataLinks.tsx
new file mode 100644
index 0000000..9f066cc
--- /dev/null
+++ b/src/configuration/DataLinks.tsx
@@ -0,0 +1,88 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
+import { ConfigSubSection } from '@grafana/experimental';
+import { Button, useStyles2 } from '@grafana/ui';
+
+import { DataLinkConfig } from '../types';
+
+import { DataLink } from './DataLink';
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    addButton: css`
+      margin-right: 10px;
+    `,
+    container: css`
+      margin-bottom: ${theme.spacing(2)};
+    `,
+    dataLink: css`
+      margin-bottom: ${theme.spacing(1)};
+    `,
+  };
+};
+
+export type Props = {
+  value?: DataLinkConfig[];
+  onChange: (value: DataLinkConfig[]) => void;
+};
+export const DataLinks = (props: Props) => {
+  const { value, onChange } = props;
+  const styles = useStyles2(getStyles);
+
+  return (
+    <ConfigSubSection
+      title="Data links"
+      description="Add links to existing fields. Links will be shown in log row details next to the field value."
+    >
+      <div className={styles.container}>
+        {value && value.length > 0 && (
+          <div className="gf-form-group">
+            {value.map((field, index) => {
+              return (
+                <DataLink
+                  className={styles.dataLink}
+                  key={index}
+                  value={field}
+                  onChange={(newField) => {
+                    const newDataLinks = [...value];
+                    newDataLinks.splice(index, 1, newField);
+                    onChange(newDataLinks);
+                  }}
+                  onDelete={() => {
+                    const newDataLinks = [...value];
+                    newDataLinks.splice(index, 1);
+                    onChange(newDataLinks);
+                  }}
+                  suggestions={[
+                    {
+                      value: DataLinkBuiltInVars.valueRaw,
+                      label: 'Raw value',
+                      documentation: 'Raw value of the field',
+                      origin: VariableOrigin.Value,
+                    },
+                  ]}
+                />
+              );
+            })}
+          </div>
+        )}
+
+        <Button
+          type="button"
+          variant={'secondary'}
+          className={styles.addButton}
+          icon="plus"
+          onClick={(event) => {
+            event.preventDefault();
+            const newDataLinks = [...(value || []), { field: '', url: '', base64TraceId: true }];
+            onChange(newDataLinks);
+          }}
+        >
+          Add
+        </Button>
+      </div>
+    </ConfigSubSection>
+  );
+};
diff --git a/src/datasource.ts b/src/datasource.ts
index 36cd0a2..acba41e 100644
--- a/src/datasource.ts
+++ b/src/datasource.ts
@@ -4,8 +4,10 @@ import { catchError, mergeMap, map } from 'rxjs/operators';
 
 import {
   AbstractQuery,
+  ArrayVector,
   CoreApp,
   DataFrame,
+  DataLink,
   DataQueryError,
   DataQueryRequest,
   DataQueryResponse,
@@ -16,6 +18,7 @@ import {
   DataSourceWithQueryImportSupport,
   DataSourceWithSupplementaryQueriesSupport,
   dateTime,
+  Field,
   FieldColorModeId,
   FieldType,
   getDefaultTimeRange,
@@ -31,8 +34,12 @@ import {
   SupplementaryQueryType,
   TimeRange,
 } from '@grafana/data';
-import { BucketAggregation, DataLinkConfig, ElasticsearchQuery, Field, FieldMapping, IndexMetadata, Logs, TermsQuery } from './types';
-import { DataSourceWithBackend, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
+import { BucketAggregation, DataLinkConfig, ElasticsearchQuery, Field as QuickwitField, FieldMapping, IndexMetadata, Logs, TermsQuery } from './types';
+import { 
+  DataSourceWithBackend, 
+  getTemplateSrv, 
+  TemplateSrv,
+  getDataSourceSrv } from '@grafana/runtime';
 import { LogRowContextOptions, LogRowContextQueryDirection, QuickwitOptions } from 'quickwit';
 import { ElasticQueryBuilder } from 'QueryBuilder';
 import { colors } from '@grafana/ui';
@@ -83,15 +90,15 @@ export class QuickwitDataSource
     this.languageProvider = new ElasticsearchLanguageProvider(this);
   }
 
-  // /**
-  //  * Ideally final -- any other implementation may not work as expected
-  //  */
-  // query(request: DataQueryRequest<ElasticsearchQuery>): Observable<DataQueryResponse> {
-  //   return super.query(request)
-  //     .pipe(map((response) => {
-  //       return response;
-  //     }));
-  // }
+  query(request: DataQueryRequest<ElasticsearchQuery>): Observable<DataQueryResponse> {
+     return super.query(request)
+       .pipe(map((response) => {
+          response.data.forEach((dataFrame) => {
+            enhanceDataFrameWithDataLinks(dataFrame, this.dataLinks);
+          });
+         return response;
+       }));
+  }
 
     /**
      * Checks the plugin health
@@ -343,7 +350,7 @@ export class QuickwitDataSource
     };
     return from(this.getResource('indexes/' + this.index)).pipe(
       map((index_metadata) => {
-        const shouldAddField = (field: Field) => {
+        const shouldAddField = (field: QuickwitField) => {
           const translated_type = typeMap[field.field_mapping.type];
           if (type?.length === 0) {
             return true;
@@ -573,8 +580,8 @@ export class QuickwitDataSource
 }
 
 // Returns a flatten array of fields and nested fields found in the given `FieldMapping` array. 
-function getAllFields(field_mappings: FieldMapping[]): Field[] {
-  const fields: Field[] = [];
+function getAllFields(field_mappings: FieldMapping[]): QuickwitField[] {
+  const fields: QuickwitField[] = [];
   for (const field_mapping of field_mappings) {
     if (field_mapping.type === 'object' && field_mapping.field_mappings !== undefined) {
       for (const child_field_mapping of getAllFields(field_mapping.field_mappings)) {
@@ -816,6 +823,84 @@ function luceneEscape(value: string) {
   return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, '\\$1');
 }
 
+function base64ToHex(base64String: string) {
+  const binaryString = window.atob(base64String);
+  return Array.from(binaryString).map(char => {
+      const byte = char.charCodeAt(0);
+      return ('0' + byte.toString(16)).slice(-2);
+  }).join('');
+}
+
+export function enhanceDataFrameWithDataLinks(dataFrame: DataFrame, dataLinks: DataLinkConfig[]) {
+  if (!dataLinks.length) {
+    return;
+  }
+  let fields_to_fix_condition = (field: Field) => {
+    return dataLinks.filter((dataLink) => dataLink.field === field.name && dataLink.base64TraceId).length === 1;
+  };
+  const fields_to_keep  = dataFrame.fields.filter((field) => {
+    return !fields_to_fix_condition(field)
+  });
+  let new_fields = dataFrame
+    .fields
+    .filter(fields_to_fix_condition)
+    .map((field) => {
+      let values = field.values.toArray().map((value) => {
+        try {
+          return base64ToHex(value);
+        } catch (e) {
+          console.warn("cannot convert value from base64 to hex", e);
+          return value;
+        };
+      });
+      return {
+        ...field,
+        values: new ArrayVector(values),
+      }
+    });
+
+  if (new_fields.length === 0) {
+    return;
+  }
+
+  dataFrame.fields = [new_fields[0], ...fields_to_keep];
+
+  for (const field of dataFrame.fields) {
+    const linksToApply = dataLinks.filter((dataLink) => dataLink.field === field.name);
+    console.log(linksToApply);
+
+    if (linksToApply.length === 0) {
+      continue;
+    }
+
+    field.config = field.config || {};
+    field.config.links = [...(field.config.links || [], linksToApply.map(generateDataLink))];
+  }
+}
+
+function generateDataLink(linkConfig: DataLinkConfig): DataLink {
+  const dataSourceSrv = getDataSourceSrv();
+
+  if (linkConfig.datasourceUid) {
+    const dsSettings = dataSourceSrv.getInstanceSettings(linkConfig.datasourceUid);
+
+    return {
+      title: linkConfig.urlDisplayLabel || '',
+      url: '',
+      internal: {
+        query: { query: linkConfig.url },
+        datasourceUid: linkConfig.datasourceUid,
+        datasourceName: dsSettings?.name ?? 'Data source not found',
+      },
+    };
+  } else {
+    return {
+      title: linkConfig.urlDisplayLabel || '',
+      url: linkConfig.url,
+    };
+  }
+}
+
 function createContextTimeRange(rowTimeEpochMs: number, direction: string) {
   const offset = 7;
   // For log context, we want to request data from 7 subsequent/previous indices
@@ -831,4 +916,3 @@ function createContextTimeRange(rowTimeEpochMs: number, direction: string) {
     };
   }
 }
-
diff --git a/src/types.ts b/src/types.ts
index 9ef2672..f2a9d9c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -100,6 +100,7 @@ export interface TermsQuery {
 
 export type DataLinkConfig = {
   field: string;
+  base64TraceId: boolean;
   url: string;
   urlDisplayLabel?: string;
   datasourceUid?: string;