diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index c45046d76..bad5d0f71 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -162,6 +162,12 @@ export class DbTableWidgetsComponent implements OnInit {
 }
 `,
     JSON: `// No settings required`,
+    Language: `// Configure language display options
+// show_flag: Display country flag emoji next to language name
+// Example:
+{
+  "show_flag": true
+}`,
     Markdown: `// No settings required`,
     Money: `// Configure money widget settings
 // example:
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.css b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.css
new file mode 100644
index 000000000..d37c35d34
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.css
@@ -0,0 +1,49 @@
+.language-form-field {
+  width: 100%;
+}
+
+.language-input-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.language-flag-prefix {
+  font-size: 20px;
+  margin-right: 8px;
+  line-height: 1;
+}
+
+.language-input {
+  flex: 1;
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
+}
+
+.language-flag {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.language-name {
+  flex: 1;
+}
+
+.language-native {
+  margin-left: 8px;
+  opacity: 0.8;
+  font-size: 13px;
+  font-style: italic;
+}
+
+.language-code {
+  margin-left: 8px;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+mat-option {
+  display: flex;
+  align-items: center;
+}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html
new file mode 100644
index 000000000..7a6570ebb
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html
@@ -0,0 +1,22 @@
+<mat-form-field class="language-form-field" appearance="outline">
+    <mat-label>{{normalizedLabel}}</mat-label>
+    <div class="language-input-container">
+        <span *ngIf="selectedLanguageFlag && showFlag" class="language-flag-prefix">{{selectedLanguageFlag}}</span>
+        <input type="text" matInput
+            [required]="required" [disabled]="disabled" [readonly]="readonly"
+            attr.data-testid="record-{{label}}-language"
+            [formControl]="languageControl"
+            [matAutocomplete]="auto"
+            class="language-input">
+    </div>
+    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+        <mat-option *ngFor="let language of filteredLanguages | async"
+            [value]="language"
+            (onSelectionChange)="language && onLanguageSelected(language)">
+            <span *ngIf="language.flag && showFlag" class="language-flag">{{language.flag}}</span>
+            <span class="language-name">{{language.label}}</span>
+            <span *ngIf="language.nativeName && language.label !== language.nativeName" class="language-native">{{language.nativeName}}</span>
+            <span *ngIf="language.value" class="language-code">({{language.value}})</span>
+        </mat-option>
+    </mat-autocomplete>
+</mat-form-field>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts
new file mode 100644
index 000000000..649add210
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts
@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LanguageEditComponent } from './language.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('LanguageEditComponent', () => {
+  let component: LanguageEditComponent;
+  let fixture: ComponentFixture<LanguageEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        LanguageEditComponent,
+        BrowserAnimationsModule
+      ],
+      providers: [provideHttpClient()]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LanguageEditComponent);
+    component = fixture.componentInstance;
+    component.widgetStructure = { widget_params: {} } as any;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load languages on init', () => {
+    component.ngOnInit();
+    expect(component.languages.length).toBeGreaterThan(0);
+  });
+
+  it('should set initial value when value is provided', () => {
+    component.value = 'en';
+    component.ngOnInit();
+    expect(component.selectedLanguageFlag).toBeTruthy();
+  });
+
+  it('should parse widget params for show_flag', () => {
+    component.widgetStructure = {
+      widget_params: { show_flag: false }
+    } as any;
+    component.ngOnInit();
+    expect(component.showFlag).toBe(false);
+  });
+});
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts
new file mode 100644
index 000000000..c5835378a
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts
@@ -0,0 +1,116 @@
+import { LANGUAGES, getLanguageFlag, Language } from '../../../../consts/languages';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
+import { map, startWith } from 'rxjs/operators';
+
+import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
+import { CommonModule } from '@angular/common';
+import { FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Observable } from 'rxjs';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit-language',
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule],
+  templateUrl: './language.component.html',
+  styleUrls: ['./language.component.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class LanguageEditComponent extends BaseEditFieldComponent {
+  @Input() value: string;
+
+  public languages: {value: string | null, label: string, flag: string, nativeName?: string}[] = [];
+  public languageControl = new FormControl<{value: string | null, label: string, flag: string, nativeName?: string} | string>('');
+  public filteredLanguages: Observable<{value: string | null, label: string, flag: string, nativeName?: string}[]>;
+  public showFlag: boolean = true;
+  public selectedLanguageFlag: string = '';
+
+  originalOrder = () => { return 0; }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.parseWidgetParams();
+    this.loadLanguages();
+    this.setupAutocomplete();
+    this.setInitialValue();
+  }
+
+  private parseWidgetParams(): void {
+    if (this.widgetStructure?.widget_params) {
+      try {
+        const params = typeof this.widgetStructure.widget_params === 'string'
+          ? JSON.parse(this.widgetStructure.widget_params)
+          : this.widgetStructure.widget_params;
+
+        if (params.show_flag !== undefined) {
+          this.showFlag = params.show_flag;
+        }
+      } catch (e) {
+        console.error('Error parsing language widget params:', e);
+      }
+    }
+  }
+
+  private setupAutocomplete(): void {
+    this.filteredLanguages = this.languageControl.valueChanges.pipe(
+      startWith(''),
+      map(value => {
+        // Update flag when value changes
+        if (typeof value === 'object' && value !== null) {
+          this.selectedLanguageFlag = value.flag;
+        } else if (typeof value === 'string') {
+          // Clear flag if user is typing
+          this.selectedLanguageFlag = '';
+        }
+        return this._filter(typeof value === 'string' ? value : (value?.label || ''));
+      })
+    );
+  }
+
+  private setInitialValue(): void {
+    if (this.value) {
+      const language = this.languages.find(l => l.value && l.value.toLowerCase() === this.value.toLowerCase());
+      if (language) {
+        this.languageControl.setValue(language);
+        this.selectedLanguageFlag = language.flag;
+      }
+    }
+  }
+
+  private _filter(value: string): {value: string | null, label: string, flag: string, nativeName?: string}[] {
+    const filterValue = value.toLowerCase();
+    return this.languages.filter(language =>
+      language.label?.toLowerCase().includes(filterValue) ||
+      (language.value && language.value.toLowerCase().includes(filterValue)) ||
+      (language.nativeName && language.nativeName.toLowerCase().includes(filterValue))
+    );
+  }
+
+  onLanguageSelected(selectedLanguage: {value: string | null, label: string, flag: string, nativeName?: string}): void {
+    this.value = selectedLanguage.value;
+    this.selectedLanguageFlag = selectedLanguage.flag;
+    this.onFieldChange.emit(this.value);
+  }
+
+  displayFn(language: any): string {
+    if (!language) return '';
+    // Only return the language label, flag is shown separately
+    return typeof language === 'string' ? language : language.label;
+  }
+
+  private loadLanguages(): void {
+    this.languages = LANGUAGES.map(language => ({
+      value: language.code,
+      label: language.name,
+      flag: getLanguageFlag(language),
+      nativeName: language.nativeName
+    })).toSorted((a, b) => a.label.localeCompare(b.label));
+
+    if (this.widgetStructure?.widget_params?.allow_null || this.structure?.allow_null) {
+      this.languages = [{ value: null, label: '', flag: '' }, ...this.languages];
+    }
+  }
+}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css
index d5062f6f0..7e6b36f97 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css
@@ -1,6 +1,17 @@
 .code-editor-box {
   min-height: 200px;
-  border: 1px solid #ccc;
   border-radius: 4px;
   overflow: hidden;
 }
+
+@media (prefers-color-scheme: light) {
+  .code-editor-box {
+    border: 1px solid #ccc;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .code-editor-box {
+    border: 1px solid #404040;
+  }
+}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.css b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.css
new file mode 100644
index 000000000..17911d54f
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.css
@@ -0,0 +1,4 @@
+.language-flag {
+  margin-right: 6px;
+  font-size: 1.2em;
+}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html
new file mode 100644
index 000000000..0615634dd
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html
@@ -0,0 +1,4 @@
+<span class="field-value">
+  <span *ngIf="showFlag && languageFlag" class="language-flag">{{ languageFlag }}</span>
+  <span class="field-view-value">{{ languageName }}</span>
+</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts
new file mode 100644
index 000000000..08ef242f0
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LanguageRecordViewComponent } from './language.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('LanguageRecordViewComponent', () => {
+  let component: LanguageRecordViewComponent;
+  let fixture: ComponentFixture<LanguageRecordViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LanguageRecordViewComponent, BrowserAnimationsModule],
+      providers: [provideHttpClient()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LanguageRecordViewComponent);
+    component = fixture.componentInstance;
+    component.value = 'en';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display language name from code', () => {
+    component.value = 'en';
+    component.ngOnInit();
+    expect(component.languageName).toBe('English');
+  });
+
+  it('should display em dash when value is empty', () => {
+    component.value = null;
+    component.ngOnInit();
+    expect(component.languageName).toBe('—');
+  });
+});
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts
new file mode 100644
index 000000000..656ae30cc
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts
@@ -0,0 +1,51 @@
+import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages';
+import { Component, Injectable, OnInit } from '@angular/core';
+
+import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
+import { CommonModule } from '@angular/common';
+
+@Injectable()
+@Component({
+  selector: 'app-language-record-view',
+  templateUrl: './language.component.html',
+  styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './language.component.css'],
+  imports: [CommonModule]
+})
+export class LanguageRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit {
+  static type = 'language';
+
+  public languageName: string = '';
+  public languageFlag: string = '';
+  public showFlag: boolean = true;
+
+  ngOnInit(): void {
+    this.parseWidgetParams();
+
+    if (this.value) {
+      const language = LANGUAGES.find(l => l.code.toLowerCase() === this.value.toLowerCase());
+      this.languageName = language ? language.name : this.value;
+      if (language) {
+        this.languageFlag = getLanguageFlag(language);
+      }
+    } else {
+      this.languageName = '—';
+      this.languageFlag = '';
+    }
+  }
+
+  private parseWidgetParams(): void {
+    if (this.widgetStructure?.widget_params) {
+      try {
+        const params = typeof this.widgetStructure.widget_params === 'string'
+          ? JSON.parse(this.widgetStructure.widget_params)
+          : this.widgetStructure.widget_params;
+
+        if (params.show_flag !== undefined) {
+          this.showFlag = params.show_flag;
+        }
+      } catch (e) {
+        console.error('Error parsing language widget params:', e);
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css b/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css
index 27736edaf..5b2ca4ec5 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css
@@ -1,11 +1,25 @@
 .markdown-container {
   padding: 16px;
-  background: #f9f9f9;
   border-radius: 4px;
-  border: 1px solid #e0e0e0;
   min-height: 100px;
 }
 
+@media (prefers-color-scheme: light) {
+  .markdown-container {
+    background: #f9f9f9;
+    border: 1px solid #e0e0e0;
+    color: rgba(0, 0, 0, 0.64);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-container {
+    background: #2a2a2a;
+    border: 1px solid #404040;
+    color: rgba(255, 255, 255, 0.64);
+  }
+}
+
 .markdown-container ::ng-deep h1,
 .markdown-container ::ng-deep h2,
 .markdown-container ::ng-deep h3,
@@ -27,22 +41,56 @@
 }
 
 .markdown-container ::ng-deep code {
-  background: #f5f5f5;
   padding: 2px 4px;
   border-radius: 3px;
   font-family: monospace;
 }
 
+@media (prefers-color-scheme: light) {
+  .markdown-container ::ng-deep code {
+    background: #f5f5f5;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-container ::ng-deep code {
+    background: #3a3a3a;
+  }
+}
+
 .markdown-container ::ng-deep pre {
-  background: #f5f5f5;
   padding: 12px;
   border-radius: 4px;
   overflow-x: auto;
 }
 
+@media (prefers-color-scheme: light) {
+  .markdown-container ::ng-deep pre {
+    background: #f5f5f5;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-container ::ng-deep pre {
+    background: #3a3a3a;
+  }
+}
+
 .markdown-container ::ng-deep blockquote {
-  border-left: 4px solid #ddd;
   padding-left: 16px;
   margin-left: 0;
-  color: #666;
+}
+
+@media (prefers-color-scheme: light) {
+  .markdown-container ::ng-deep blockquote {
+    border-left: 4px solid #ddd;
+    color: #666;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-container ::ng-deep blockquote {
+    border-left: 4px solid #555;
+    color: #aaa;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.css b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.css
new file mode 100644
index 000000000..02b00a9c4
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.css
@@ -0,0 +1,27 @@
+.field-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.value-wrapper {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+  display: flex;
+  align-items: center;
+}
+
+.language-flag {
+  margin-right: 6px;
+  font-size: 1.2em;
+}
+
+.copy-button {
+  visibility: hidden;
+  margin-left: 4px;
+}
+
+.field-wrapper:hover .copy-button {
+  visibility: visible;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html
new file mode 100644
index 000000000..85f344d1e
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html
@@ -0,0 +1,14 @@
+<div class="field-display">
+  <span class="field-value">
+    <span *ngIf="showFlag && languageFlag" class="language-flag">{{ languageFlag }}</span>
+    <span>{{ languageName }}</span>
+  </span>
+  <button type="button" mat-icon-button
+      class="field-copy-button"
+      matTooltip="Copy"
+      [cdkCopyToClipboard]="languageName"
+      (cdkCopyToClipboardCopied)="onCopyToClipboard.emit('Field value was copied to clipboard.')"
+      (click)="$event.stopPropagation()">
+      <mat-icon>content_copy</mat-icon>
+  </button>
+</div>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts
new file mode 100644
index 000000000..f6d5f0e89
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts
@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LanguageDisplayComponent } from './language.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('LanguageDisplayComponent', () => {
+  let component: LanguageDisplayComponent;
+  let fixture: ComponentFixture<LanguageDisplayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LanguageDisplayComponent, BrowserAnimationsModule],
+      providers: [provideHttpClient()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LanguageDisplayComponent);
+    component = fixture.componentInstance;
+    component.value = 'en';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display language name from code', () => {
+    component.value = 'fr';
+    component.ngOnInit();
+    expect(component.languageName).toBe('French');
+  });
+
+  it('should display em dash when value is empty', () => {
+    component.value = null;
+    component.ngOnInit();
+    expect(component.languageName).toBe('—');
+  });
+
+  it('should respect show_flag widget parameter', () => {
+    component.widgetStructure = {
+      widget_params: { show_flag: false }
+    } as any;
+    component.ngOnInit();
+    expect(component.showFlag).toBe(false);
+  });
+});
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts
new file mode 100644
index 000000000..ae7d5e2cf
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts
@@ -0,0 +1,54 @@
+import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages';
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-language-display',
+  templateUrl: './language.component.html',
+  styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './language.component.css'],
+  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class LanguageDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+  static type = 'language';
+
+  public languageName: string = '';
+  public languageFlag: string = '';
+  public showFlag: boolean = true;
+
+  ngOnInit(): void {
+    this.parseWidgetParams();
+
+    if (this.value) {
+      const language = LANGUAGES.find(l => l.code.toLowerCase() === this.value.toLowerCase());
+      this.languageName = language ? language.name : this.value;
+      if (language) {
+        this.languageFlag = getLanguageFlag(language);
+      }
+    } else {
+      this.languageName = '—';
+      this.languageFlag = '';
+    }
+  }
+
+  private parseWidgetParams(): void {
+    if (this.widgetStructure?.widget_params) {
+      try {
+        const params = typeof this.widgetStructure.widget_params === 'string'
+          ? JSON.parse(this.widgetStructure.widget_params)
+          : this.widgetStructure.widget_params;
+
+        if (params.show_flag !== undefined) {
+          this.showFlag = params.show_flag;
+        }
+      } catch (e) {
+        console.error('Error parsing language widget params:', e);
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css b/frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css
index 6c6f41777..03a09e89e 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css
@@ -32,9 +32,20 @@
 }
 
 .markdown-preview ::ng-deep code {
-  background: #f5f5f5;
   padding: 1px 3px;
   border-radius: 2px;
   font-family: monospace;
   font-size: 0.9em;
 }
+
+@media (prefers-color-scheme: light) {
+  .markdown-preview ::ng-deep code {
+    background: #f5f5f5;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-preview ::ng-deep code {
+    background: #3a3a3a;
+  }
+}
diff --git a/frontend/src/app/consts/languages.ts b/frontend/src/app/consts/languages.ts
new file mode 100644
index 000000000..a198a147f
--- /dev/null
+++ b/frontend/src/app/consts/languages.ts
@@ -0,0 +1,201 @@
+export interface Language {
+  code: string;
+  name: string;
+  nativeName?: string;
+  flagCountryCode?: string; // ISO 3166-1 alpha-2 country code for flag emoji
+}
+
+export function getLanguageFlag(language: Language): string {
+  if (!language.flagCountryCode || language.flagCountryCode.length !== 2) return '';
+  const codePoints = language.flagCountryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
+}
+
+export const LANGUAGES: Language[] = [
+  { code: 'aa', name: 'Afar', nativeName: 'Afaraf', flagCountryCode: 'ET' },
+  { code: 'ab', name: 'Abkhazian', nativeName: 'аҧсуа бызшәа', flagCountryCode: 'GE' },
+  { code: 'af', name: 'Afrikaans', nativeName: 'Afrikaans', flagCountryCode: 'ZA' },
+  { code: 'ak', name: 'Akan', nativeName: 'Akan', flagCountryCode: 'GH' },
+  { code: 'am', name: 'Amharic', nativeName: 'አማርኛ', flagCountryCode: 'ET' },
+  { code: 'an', name: 'Aragonese', nativeName: 'aragonés', flagCountryCode: 'ES' },
+  { code: 'ar', name: 'Arabic', nativeName: 'العربية', flagCountryCode: 'SA' },
+  { code: 'as', name: 'Assamese', nativeName: 'অসমীয়া', flagCountryCode: 'IN' },
+  { code: 'av', name: 'Avaric', nativeName: 'авар мацӀ', flagCountryCode: 'RU' },
+  { code: 'ay', name: 'Aymara', nativeName: 'aymar aru', flagCountryCode: 'BO' },
+  { code: 'az', name: 'Azerbaijani', nativeName: 'azərbaycan dili', flagCountryCode: 'AZ' },
+  { code: 'ba', name: 'Bashkir', nativeName: 'башҡорт теле', flagCountryCode: 'RU' },
+  { code: 'be', name: 'Belarusian', nativeName: 'беларуская мова', flagCountryCode: 'BY' },
+  { code: 'bg', name: 'Bulgarian', nativeName: 'български език', flagCountryCode: 'BG' },
+  { code: 'bh', name: 'Bihari languages', nativeName: 'भोजपुरी', flagCountryCode: 'IN' },
+  { code: 'bi', name: 'Bislama', nativeName: 'Bislama', flagCountryCode: 'VU' },
+  { code: 'bm', name: 'Bambara', nativeName: 'bamanankan', flagCountryCode: 'ML' },
+  { code: 'bn', name: 'Bengali', nativeName: 'বাংলা', flagCountryCode: 'BD' },
+  { code: 'bo', name: 'Tibetan', nativeName: 'བོད་ཡིག', flagCountryCode: 'CN' },
+  { code: 'br', name: 'Breton', nativeName: 'brezhoneg', flagCountryCode: 'FR' },
+  { code: 'bs', name: 'Bosnian', nativeName: 'bosanski jezik', flagCountryCode: 'BA' },
+  { code: 'ca', name: 'Catalan', nativeName: 'català', flagCountryCode: 'ES' },
+  { code: 'ce', name: 'Chechen', nativeName: 'нохчийн мott', flagCountryCode: 'RU' },
+  { code: 'ch', name: 'Chamorro', nativeName: 'Chamoru', flagCountryCode: 'GU' },
+  { code: 'co', name: 'Corsican', nativeName: 'corsu', flagCountryCode: 'FR' },
+  { code: 'cr', name: 'Cree', nativeName: 'ᓀᐦᐃᔭᐍᐏᐣ', flagCountryCode: 'CA' },
+  { code: 'cs', name: 'Czech', nativeName: 'čeština', flagCountryCode: 'CZ' },
+  { code: 'cu', name: 'Church Slavonic', nativeName: 'ѩзыкъ словѣньскъ', flagCountryCode: 'BG' },
+  { code: 'cv', name: 'Chuvash', nativeName: 'чӑваш чӗлхи', flagCountryCode: 'RU' },
+  { code: 'cy', name: 'Welsh', nativeName: 'Cymraeg', flagCountryCode: 'GB' },
+  { code: 'da', name: 'Danish', nativeName: 'dansk', flagCountryCode: 'DK' },
+  { code: 'de', name: 'German', nativeName: 'Deutsch', flagCountryCode: 'DE' },
+  { code: 'dv', name: 'Divehi', nativeName: 'ދިވެހި', flagCountryCode: 'MV' },
+  { code: 'dz', name: 'Dzongkha', nativeName: 'རྫོང་ཁ', flagCountryCode: 'BT' },
+  { code: 'ee', name: 'Ewe', nativeName: 'Eʋegbe', flagCountryCode: 'GH' },
+  { code: 'el', name: 'Greek', nativeName: 'Ελληνικά', flagCountryCode: 'GR' },
+  { code: 'en', name: 'English', nativeName: 'English', flagCountryCode: 'GB' },
+  { code: 'eo', name: 'Esperanto', nativeName: 'Esperanto', flagCountryCode: 'EU' },
+  { code: 'es', name: 'Spanish', nativeName: 'español', flagCountryCode: 'ES' },
+  { code: 'et', name: 'Estonian', nativeName: 'eesti', flagCountryCode: 'EE' },
+  { code: 'eu', name: 'Basque', nativeName: 'euskara', flagCountryCode: 'ES' },
+  { code: 'fa', name: 'Persian', nativeName: 'فارسی', flagCountryCode: 'IR' },
+  { code: 'ff', name: 'Fulah', nativeName: 'Fulfulde', flagCountryCode: 'SN' },
+  { code: 'fi', name: 'Finnish', nativeName: 'suomi', flagCountryCode: 'FI' },
+  { code: 'fj', name: 'Fijian', nativeName: 'vosa Vakaviti', flagCountryCode: 'FJ' },
+  { code: 'fo', name: 'Faroese', nativeName: 'føroyskt', flagCountryCode: 'FO' },
+  { code: 'fr', name: 'French', nativeName: 'français', flagCountryCode: 'FR' },
+  { code: 'fy', name: 'Western Frisian', nativeName: 'Frysk', flagCountryCode: 'NL' },
+  { code: 'ga', name: 'Irish', nativeName: 'Gaeilge', flagCountryCode: 'IE' },
+  { code: 'gd', name: 'Scottish Gaelic', nativeName: 'Gàidhlig', flagCountryCode: 'GB' },
+  { code: 'gl', name: 'Galician', nativeName: 'galego', flagCountryCode: 'ES' },
+  { code: 'gn', name: 'Guarani', nativeName: "Avañe'ẽ", flagCountryCode: 'PY' },
+  { code: 'gu', name: 'Gujarati', nativeName: 'ગુજરાતી', flagCountryCode: 'IN' },
+  { code: 'gv', name: 'Manx', nativeName: 'Gaelg', flagCountryCode: 'IM' },
+  { code: 'ha', name: 'Hausa', nativeName: 'هَوُسَ', flagCountryCode: 'NG' },
+  { code: 'he', name: 'Hebrew', nativeName: 'עברית', flagCountryCode: 'IL' },
+  { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी', flagCountryCode: 'IN' },
+  { code: 'ho', name: 'Hiri Motu', nativeName: 'Hiri Motu', flagCountryCode: 'PG' },
+  { code: 'hr', name: 'Croatian', nativeName: 'hrvatski jezik', flagCountryCode: 'HR' },
+  { code: 'ht', name: 'Haitian', nativeName: 'Kreyòl ayisyen', flagCountryCode: 'HT' },
+  { code: 'hu', name: 'Hungarian', nativeName: 'magyar', flagCountryCode: 'HU' },
+  { code: 'hy', name: 'Armenian', nativeName: 'Հայերեն', flagCountryCode: 'AM' },
+  { code: 'hz', name: 'Herero', nativeName: 'Otjiherero', flagCountryCode: 'NA' },
+  { code: 'ia', name: 'Interlingua', nativeName: 'Interlingua', flagCountryCode: 'EU' },
+  { code: 'id', name: 'Indonesian', nativeName: 'Bahasa Indonesia', flagCountryCode: 'ID' },
+  { code: 'ie', name: 'Interlingue', nativeName: 'Interlingue', flagCountryCode: 'EU' },
+  { code: 'ig', name: 'Igbo', nativeName: 'Asụsụ Igbo', flagCountryCode: 'NG' },
+  { code: 'ii', name: 'Sichuan Yi', nativeName: 'ꆈꌠ꒿', flagCountryCode: 'CN' },
+  { code: 'ik', name: 'Inupiaq', nativeName: 'Iñupiaq', flagCountryCode: 'US' },
+  { code: 'io', name: 'Ido', nativeName: 'Ido', flagCountryCode: 'EU' },
+  { code: 'is', name: 'Icelandic', nativeName: 'Íslenska', flagCountryCode: 'IS' },
+  { code: 'it', name: 'Italian', nativeName: 'italiano', flagCountryCode: 'IT' },
+  { code: 'iu', name: 'Inuktitut', nativeName: 'ᐃᓄᒃᑎᑐᑦ', flagCountryCode: 'CA' },
+  { code: 'ja', name: 'Japanese', nativeName: '日本語', flagCountryCode: 'JP' },
+  { code: 'jv', name: 'Javanese', nativeName: 'ꦧꦱꦗꦮ', flagCountryCode: 'ID' },
+  { code: 'ka', name: 'Georgian', nativeName: 'ქართული', flagCountryCode: 'GE' },
+  { code: 'kg', name: 'Kongo', nativeName: 'Kikongo', flagCountryCode: 'CD' },
+  { code: 'ki', name: 'Kikuyu', nativeName: 'Gĩkũyũ', flagCountryCode: 'KE' },
+  { code: 'kj', name: 'Kuanyama', nativeName: 'Kuanyama', flagCountryCode: 'AO' },
+  { code: 'kk', name: 'Kazakh', nativeName: 'қазақ тілі', flagCountryCode: 'KZ' },
+  { code: 'kl', name: 'Kalaallisut', nativeName: 'kalaallisut', flagCountryCode: 'GL' },
+  { code: 'km', name: 'Central Khmer', nativeName: 'ខេមរភាសា', flagCountryCode: 'KH' },
+  { code: 'kn', name: 'Kannada', nativeName: 'ಕನ್ನಡ', flagCountryCode: 'IN' },
+  { code: 'ko', name: 'Korean', nativeName: '한국어', flagCountryCode: 'KR' },
+  { code: 'kr', name: 'Kanuri', nativeName: 'Kanuri', flagCountryCode: 'NG' },
+  { code: 'ks', name: 'Kashmiri', nativeName: 'कश्मीरी', flagCountryCode: 'IN' },
+  { code: 'ku', name: 'Kurdish', nativeName: 'Kurdî', flagCountryCode: 'IQ' },
+  { code: 'kv', name: 'Komi', nativeName: 'коми кыв', flagCountryCode: 'RU' },
+  { code: 'kw', name: 'Cornish', nativeName: 'Kernewek', flagCountryCode: 'GB' },
+  { code: 'ky', name: 'Kirghiz', nativeName: 'Кыргызча', flagCountryCode: 'KG' },
+  { code: 'la', name: 'Latin', nativeName: 'latine', flagCountryCode: 'VA' },
+  { code: 'lb', name: 'Luxembourgish', nativeName: 'Lëtzebuergesch', flagCountryCode: 'LU' },
+  { code: 'lg', name: 'Ganda', nativeName: 'Luganda', flagCountryCode: 'UG' },
+  { code: 'li', name: 'Limburgan', nativeName: 'Limburgs', flagCountryCode: 'NL' },
+  { code: 'ln', name: 'Lingala', nativeName: 'Lingála', flagCountryCode: 'CD' },
+  { code: 'lo', name: 'Lao', nativeName: 'ພາສາລາວ', flagCountryCode: 'LA' },
+  { code: 'lt', name: 'Lithuanian', nativeName: 'lietuvių kalba', flagCountryCode: 'LT' },
+  { code: 'lu', name: 'Luba-Katanga', nativeName: 'Tshiluba', flagCountryCode: 'CD' },
+  { code: 'lv', name: 'Latvian', nativeName: 'latviešu valoda', flagCountryCode: 'LV' },
+  { code: 'mg', name: 'Malagasy', nativeName: 'fiteny malagasy', flagCountryCode: 'MG' },
+  { code: 'mh', name: 'Marshallese', nativeName: 'Kajin M̧ajeļ', flagCountryCode: 'MH' },
+  { code: 'mi', name: 'Maori', nativeName: 'te reo Māori', flagCountryCode: 'NZ' },
+  { code: 'mk', name: 'Macedonian', nativeName: 'македонски јазик', flagCountryCode: 'MK' },
+  { code: 'ml', name: 'Malayalam', nativeName: 'മലയാളം', flagCountryCode: 'IN' },
+  { code: 'mn', name: 'Mongolian', nativeName: 'Монгол хэл', flagCountryCode: 'MN' },
+  { code: 'mr', name: 'Marathi', nativeName: 'मराठी', flagCountryCode: 'IN' },
+  { code: 'ms', name: 'Malay', nativeName: 'Bahasa Melayu', flagCountryCode: 'MY' },
+  { code: 'mt', name: 'Maltese', nativeName: 'Malti', flagCountryCode: 'MT' },
+  { code: 'my', name: 'Burmese', nativeName: 'ဗမာစာ', flagCountryCode: 'MM' },
+  { code: 'na', name: 'Nauru', nativeName: 'Dorerin Naoero', flagCountryCode: 'NR' },
+  { code: 'nb', name: 'Norwegian Bokmål', nativeName: 'Norsk bokmål', flagCountryCode: 'NO' },
+  { code: 'nd', name: 'North Ndebele', nativeName: 'isiNdebele', flagCountryCode: 'ZW' },
+  { code: 'ne', name: 'Nepali', nativeName: 'नेपाली', flagCountryCode: 'NP' },
+  { code: 'ng', name: 'Ndonga', nativeName: 'Owambo', flagCountryCode: 'NA' },
+  { code: 'nl', name: 'Dutch', nativeName: 'Nederlands', flagCountryCode: 'NL' },
+  { code: 'nn', name: 'Norwegian Nynorsk', nativeName: 'Norsk nynorsk', flagCountryCode: 'NO' },
+  { code: 'no', name: 'Norwegian', nativeName: 'Norsk', flagCountryCode: 'NO' },
+  { code: 'nr', name: 'South Ndebele', nativeName: 'isiNdebele', flagCountryCode: 'ZA' },
+  { code: 'nv', name: 'Navajo', nativeName: 'Diné bizaad', flagCountryCode: 'US' },
+  { code: 'ny', name: 'Chichewa', nativeName: 'chiCheŵa', flagCountryCode: 'MW' },
+  { code: 'oc', name: 'Occitan', nativeName: 'occitan', flagCountryCode: 'FR' },
+  { code: 'oj', name: 'Ojibwa', nativeName: 'ᐊᓂᔑᓈᐯᒧᐎᓐ', flagCountryCode: 'CA' },
+  { code: 'om', name: 'Oromo', nativeName: 'Afaan Oromoo', flagCountryCode: 'ET' },
+  { code: 'or', name: 'Oriya', nativeName: 'ଓଡ଼ିଆ', flagCountryCode: 'IN' },
+  { code: 'os', name: 'Ossetian', nativeName: 'ирон æвзаг', flagCountryCode: 'GE' },
+  { code: 'pa', name: 'Punjabi', nativeName: 'ਪੰਜਾਬੀ', flagCountryCode: 'IN' },
+  { code: 'pi', name: 'Pali', nativeName: 'पाऴि', flagCountryCode: 'IN' },
+  { code: 'pl', name: 'Polish', nativeName: 'polski', flagCountryCode: 'PL' },
+  { code: 'ps', name: 'Pashto', nativeName: 'پښتو', flagCountryCode: 'AF' },
+  { code: 'pt', name: 'Portuguese', nativeName: 'português', flagCountryCode: 'PT' },
+  { code: 'qu', name: 'Quechua', nativeName: 'Runa Simi', flagCountryCode: 'PE' },
+  { code: 'rm', name: 'Romansh', nativeName: 'rumantsch grischun', flagCountryCode: 'CH' },
+  { code: 'rn', name: 'Rundi', nativeName: 'Ikirundi', flagCountryCode: 'BI' },
+  { code: 'ro', name: 'Romanian', nativeName: 'română', flagCountryCode: 'RO' },
+  { code: 'ru', name: 'Russian', nativeName: 'русский', flagCountryCode: 'RU' },
+  { code: 'rw', name: 'Kinyarwanda', nativeName: 'Ikinyarwanda', flagCountryCode: 'RW' },
+  { code: 'sa', name: 'Sanskrit', nativeName: 'संस्कृतम्', flagCountryCode: 'IN' },
+  { code: 'sc', name: 'Sardinian', nativeName: 'sardu', flagCountryCode: 'IT' },
+  { code: 'sd', name: 'Sindhi', nativeName: 'सिन्धी', flagCountryCode: 'PK' },
+  { code: 'se', name: 'Northern Sami', nativeName: 'Davvisámegiella', flagCountryCode: 'NO' },
+  { code: 'sg', name: 'Sango', nativeName: 'yângâ tî sängö', flagCountryCode: 'CF' },
+  { code: 'si', name: 'Sinhala', nativeName: 'සිංහල', flagCountryCode: 'LK' },
+  { code: 'sk', name: 'Slovak', nativeName: 'slovenčina', flagCountryCode: 'SK' },
+  { code: 'sl', name: 'Slovenian', nativeName: 'slovenski jezik', flagCountryCode: 'SI' },
+  { code: 'sm', name: 'Samoan', nativeName: 'gagana fa\'a Samoa', flagCountryCode: 'WS' },
+  { code: 'sn', name: 'Shona', nativeName: 'chiShona', flagCountryCode: 'ZW' },
+  { code: 'so', name: 'Somali', nativeName: 'Soomaaliga', flagCountryCode: 'SO' },
+  { code: 'sq', name: 'Albanian', nativeName: 'Shqip', flagCountryCode: 'AL' },
+  { code: 'sr', name: 'Serbian', nativeName: 'српски језик', flagCountryCode: 'RS' },
+  { code: 'ss', name: 'Swati', nativeName: 'SiSwati', flagCountryCode: 'SZ' },
+  { code: 'st', name: 'Southern Sotho', nativeName: 'Sesotho', flagCountryCode: 'LS' },
+  { code: 'su', name: 'Sundanese', nativeName: 'Basa Sunda', flagCountryCode: 'ID' },
+  { code: 'sv', name: 'Swedish', nativeName: 'svenska', flagCountryCode: 'SE' },
+  { code: 'sw', name: 'Swahili', nativeName: 'Kiswahili', flagCountryCode: 'TZ' },
+  { code: 'ta', name: 'Tamil', nativeName: 'தமிழ்', flagCountryCode: 'IN' },
+  { code: 'te', name: 'Telugu', nativeName: 'తెలుగు', flagCountryCode: 'IN' },
+  { code: 'tg', name: 'Tajik', nativeName: 'тоҷикӣ', flagCountryCode: 'TJ' },
+  { code: 'th', name: 'Thai', nativeName: 'ไทย', flagCountryCode: 'TH' },
+  { code: 'ti', name: 'Tigrinya', nativeName: 'ትግርኛ', flagCountryCode: 'ER' },
+  { code: 'tk', name: 'Turkmen', nativeName: 'Türkmen', flagCountryCode: 'TM' },
+  { code: 'tl', name: 'Tagalog', nativeName: 'Wikang Tagalog', flagCountryCode: 'PH' },
+  { code: 'tn', name: 'Tswana', nativeName: 'Setswana', flagCountryCode: 'BW' },
+  { code: 'to', name: 'Tonga', nativeName: 'faka Tonga', flagCountryCode: 'TO' },
+  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe', flagCountryCode: 'TR' },
+  { code: 'ts', name: 'Tsonga', nativeName: 'Xitsonga', flagCountryCode: 'ZA' },
+  { code: 'tt', name: 'Tatar', nativeName: 'татар теле', flagCountryCode: 'RU' },
+  { code: 'tw', name: 'Twi', nativeName: 'Twi', flagCountryCode: 'GH' },
+  { code: 'ty', name: 'Tahitian', nativeName: 'Reo Tahiti', flagCountryCode: 'PF' },
+  { code: 'ug', name: 'Uighur', nativeName: 'ئۇيغۇرچە', flagCountryCode: 'CN' },
+  { code: 'uk', name: 'Ukrainian', nativeName: 'Українська', flagCountryCode: 'UA' },
+  { code: 'ur', name: 'Urdu', nativeName: 'اردو', flagCountryCode: 'PK' },
+  { code: 'uz', name: 'Uzbek', nativeName: 'Oʻzbek', flagCountryCode: 'UZ' },
+  { code: 've', name: 'Venda', nativeName: 'Tshivenḓa', flagCountryCode: 'ZA' },
+  { code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt', flagCountryCode: 'VN' },
+  { code: 'vo', name: 'Volapük', nativeName: 'Volapük', flagCountryCode: 'EU' },
+  { code: 'wa', name: 'Walloon', nativeName: 'walon', flagCountryCode: 'BE' },
+  { code: 'wo', name: 'Wolof', nativeName: 'Wollof', flagCountryCode: 'SN' },
+  { code: 'xh', name: 'Xhosa', nativeName: 'isiXhosa', flagCountryCode: 'ZA' },
+  { code: 'yi', name: 'Yiddish', nativeName: 'ייִדיש', flagCountryCode: 'IL' },
+  { code: 'yo', name: 'Yoruba', nativeName: 'Yorùbá', flagCountryCode: 'NG' },
+  { code: 'za', name: 'Zhuang', nativeName: 'Saɯ cueŋƅ', flagCountryCode: 'CN' },
+  { code: 'zh', name: 'Chinese', nativeName: '中文', flagCountryCode: 'CN' },
+  { code: 'zu', name: 'Zulu', nativeName: 'isiZulu', flagCountryCode: 'ZA' }
+];
diff --git a/frontend/src/app/consts/record-edit-types.ts b/frontend/src/app/consts/record-edit-types.ts
index 9e172b121..6b698ba9a 100644
--- a/frontend/src/app/consts/record-edit-types.ts
+++ b/frontend/src/app/consts/record-edit-types.ts
@@ -10,6 +10,7 @@ import { ForeignKeyEditComponent } from '../components/ui-components/record-edit
 import { IdEditComponent } from '../components/ui-components/record-edit-fields/id/id.component';
 import { ImageEditComponent } from '../components/ui-components/record-edit-fields/image/image.component';
 import { JsonEditorEditComponent } from '../components/ui-components/record-edit-fields/json-editor/json-editor.component';
+import { LanguageEditComponent } from '../components/ui-components/record-edit-fields/language/language.component';
 import { LongTextEditComponent } from 'src/app/components/ui-components/record-edit-fields/long-text/long-text.component'
 import { MarkdownEditComponent } from '../components/ui-components/record-edit-fields/markdown/markdown.component';
 import { MoneyEditComponent } from '../components/ui-components/record-edit-fields/money/money.component';
@@ -45,6 +46,7 @@ export const UIwidgets = {
     Foreign_key: ForeignKeyEditComponent,
     Image: ImageEditComponent,
     JSON: JsonEditorEditComponent,
+    Language: LanguageEditComponent,
     Markdown: MarkdownEditComponent,
     Money: MoneyEditComponent,
     Number: NumberEditComponent,
diff --git a/frontend/src/app/consts/record-view-types.ts b/frontend/src/app/consts/record-view-types.ts
index 2e663fa92..e90b35cac 100644
--- a/frontend/src/app/consts/record-view-types.ts
+++ b/frontend/src/app/consts/record-view-types.ts
@@ -9,6 +9,7 @@ import { ForeignKeyRecordViewComponent } from '../components/ui-components/recor
 import { IdRecordViewComponent } from '../components/ui-components/record-view-fields/id/id.component';
 import { ImageRecordViewComponent } from '../components/ui-components/record-view-fields/image/image.component';
 import { JsonEditorRecordViewComponent } from '../components/ui-components/record-view-fields/json-editor/json-editor.component';
+import { LanguageRecordViewComponent } from '../components/ui-components/record-view-fields/language/language.component';
 import { LongTextRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/long-text/long-text.component';
 import { MarkdownRecordViewComponent } from '../components/ui-components/record-view-fields/markdown/markdown.component';
 import { MoneyRecordViewComponent } from '../components/ui-components/record-view-fields/money/money.component';
@@ -33,6 +34,7 @@ export const UIwidgets = {
     Time: TimeRecordViewComponent,
     DateTime: DateTimeRecordViewComponent,
     JSON: JsonEditorRecordViewComponent,
+    Language: LanguageRecordViewComponent,
     Markdown: MarkdownRecordViewComponent,
     Textarea: LongTextRecordViewComponent,
     String: TextRecordViewComponent,
diff --git a/frontend/src/app/consts/table-display-types.ts b/frontend/src/app/consts/table-display-types.ts
index 0abf9ae22..abb6edf7f 100644
--- a/frontend/src/app/consts/table-display-types.ts
+++ b/frontend/src/app/consts/table-display-types.ts
@@ -9,6 +9,7 @@ import { ForeignKeyDisplayComponent } from '../components/ui-components/table-di
 import { IdDisplayComponent } from '../components/ui-components/table-display-fields/id/id.component';
 import { ImageDisplayComponent } from '../components/ui-components/table-display-fields/image/image.component';
 import { JsonEditorDisplayComponent } from '../components/ui-components/table-display-fields/json-editor/json-editor.component';
+import { LanguageDisplayComponent } from '../components/ui-components/table-display-fields/language/language.component';
 import { LongTextDisplayComponent } from 'src/app/components/ui-components/table-display-fields/long-text/long-text.component';
 import { MarkdownDisplayComponent } from '../components/ui-components/table-display-fields/markdown/markdown.component';
 import { MoneyDisplayComponent } from '../components/ui-components/table-display-fields/money/money.component';
@@ -38,6 +39,7 @@ export const UIwidgets = {
     Foreign_key: ForeignKeyDisplayComponent,
     Image: ImageDisplayComponent,
     JSON: JsonEditorDisplayComponent,
+    Language: LanguageDisplayComponent,
     Markdown: MarkdownDisplayComponent,
     Money: MoneyDisplayComponent,
     Number: NumberDisplayComponent,