diff --git a/gitlab-extension@infinicode.de/components/buttons/iconButton.js b/gitlab-extension@infinicode.de/components/buttons/iconButton.js
index f217223..50ba97e 100644
--- a/gitlab-extension@infinicode.de/components/buttons/iconButton.js
+++ b/gitlab-extension@infinicode.de/components/buttons/iconButton.js
@@ -1,10 +1,10 @@
-const { GObject, St, Clutter } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-const ComponentsHelper = Me.imports.helpers.components
+import * as ComponentsHelper from '../../helpers/components.js'
 
-var IconButton = GObject.registerClass({}, class IconButton extends St.Button {
+export const IconButton = GObject.registerClass({}, class IconButton extends St.Button {
   _init ({ icon_name, isCustomIcon, onClick, icon_size = 18, text, style_class, ...props }) {
     super._init({
       reactive: true,
diff --git a/gitlab-extension@infinicode.de/components/cards/commitCard.js b/gitlab-extension@infinicode.de/components/cards/commitCard.js
index a121df1..bb5ed6e 100644
--- a/gitlab-extension@infinicode.de/components/cards/commitCard.js
+++ b/gitlab-extension@infinicode.de/components/cards/commitCard.js
@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
+export const CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _init (commitItem, pipeline) {
     super._init({
       style_class: 'card message commit-card',
@@ -67,7 +67,7 @@ var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _createHeaderInfoSection () {
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
-      x_align: St.Align.END
+      x_align: Clutter.ActorAlign.END
     })
 
     const lastModifiedLabel = new St.Label({
@@ -122,7 +122,7 @@ var CommitCard = GObject.registerClass({}, class CommitCard extends St.Button {
   _createLinkIcon () {
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,
diff --git a/gitlab-extension@infinicode.de/components/cards/pipelineCard.js b/gitlab-extension@infinicode.de/components/cards/pipelineCard.js
index 86e7f60..5fa1588 100644
--- a/gitlab-extension@infinicode.de/components/cards/pipelineCard.js
+++ b/gitlab-extension@infinicode.de/components/cards/pipelineCard.js
@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Button {
+export const PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Button {
   _init (pipelineItem, commit) {
     super._init({
       style_class: 'card message pipeline-card',
@@ -66,7 +66,7 @@ var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Butto
   _createHeaderInfoSection () {
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
-      x_align: St.Align.END
+      x_align: Clutter.ActorAlign.END
     })
 
     const lastModifiedLabel = new St.Label({
@@ -121,7 +121,7 @@ var PipelineCard = GObject.registerClass({}, class PipelineCard extends St.Butto
   _createLinkIcon () {
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,
diff --git a/gitlab-extension@infinicode.de/components/cards/projectCard.js b/gitlab-extension@infinicode.de/components/cards/projectCard.js
index bbeefbe..86bff1c 100644
--- a/gitlab-extension@infinicode.de/components/cards/projectCard.js
+++ b/gitlab-extension@infinicode.de/components/cards/projectCard.js
@@ -1,15 +1,15 @@
-const { Gio, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { IconButton } from '../buttons/iconButton.js'
+import { Icon } from '../icon/icon.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Icon } = Me.imports.components.icon.icon
-const { Translations } = Me.imports.helpers.translations
+import * as DataHelper from '../../helpers/data.js'
 
-const DataHelper = Me.imports.helpers.data
-
-var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button {
+export const ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button {
   _init (projectItem, pipeline) {
     super._init({
       style_class: 'card message project-card',
@@ -64,8 +64,8 @@ var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button
     let headerInfoSection = new St.BoxLayout({
       style_class: 'info-section-box',
       x_expand: false,
-      x_align: St.Align.END,
-      y_align: St.Align.MIDDLE
+      x_align: Clutter.ActorAlign.END,
+      y_align: Clutter.ActorAlign.CENTER
     })
 
     const lastModifiedLabel = new St.Label({
@@ -118,7 +118,7 @@ var ProjectCard = GObject.registerClass({}, class ProjectCard extends St.Button
     const linkIconBin = new St.Bin({
       style_class: 'link-icon-bin',
       x_expand: false,
-      x_align: St.Align.END,
+      x_align: Clutter.ActorAlign.END,
       child: new IconButton({
         icon_name: 'open-link-symbolic',
         isCustomIcon: true,
diff --git a/gitlab-extension@infinicode.de/components/flatList/flatList.js b/gitlab-extension@infinicode.de/components/flatList/flatList.js
index d7affc3..e999711 100644
--- a/gitlab-extension@infinicode.de/components/flatList/flatList.js
+++ b/gitlab-extension@infinicode.de/components/flatList/flatList.js
@@ -1,22 +1,15 @@
-const { Clutter, GObject, St, Gtk } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
+import Graphene from 'gi://Graphene'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { ScaleLayout } from '../scaleLayout/scaleLayout.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { ScaleLayout } = Me.imports.components.scaleLayout.scaleLayout
-const { Translations } = Me.imports.helpers.translations
 
-let Graphene
+export const MESSAGE_ANIMATION_TIME = 100
 
-try {
-  Graphene = imports.gi.Graphene
-} catch (e) {
-  // no graphene older gnome
-}
-
-var MESSAGE_ANIMATION_TIME = 100
-
-var FlatList = GObject.registerClass({
+export const FlatList = GObject.registerClass({
   Signals: {
     'clicked-item': {
       param_types: [GObject.TYPE_OBJECT]
@@ -30,8 +23,8 @@ var FlatList = GObject.registerClass({
       x_expand: true,
       y_expand: true,
       clip_to_allocation: true,
-      hscrollbar_policy: Gtk.PolicyType.NEVER,
-      vscrollbar_policy: Gtk.PolicyType.AUTOMATIC
+      hscrollbar_policy: St.PolicyType.NEVER,
+      vscrollbar_policy: St.PolicyType.AUTOMATIC
     })
 
     this._content = new St.BoxLayout({
diff --git a/gitlab-extension@infinicode.de/components/gitlab/projectSelectButtons.js b/gitlab-extension@infinicode.de/components/gitlab/projectSelectButtons.js
index ad81153..f62cd87 100644
--- a/gitlab-extension@infinicode.de/components/gitlab/projectSelectButtons.js
+++ b/gitlab-extension@infinicode.de/components/gitlab/projectSelectButtons.js
@@ -1,11 +1,9 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { SettingsHandler } from '../../helpers/settings.js'
 
-const { SettingsHandler } = Me.imports.helpers.settings
-
-var ProjectSelectButtons = GObject.registerClass({}, class ProjectSelectButtons extends St.BoxLayout {
+export const ProjectSelectButtons = GObject.registerClass({}, class ProjectSelectButtons extends St.BoxLayout {
   _init () {
     super._init({
       style_class: 'project-select-buttons'
diff --git a/gitlab-extension@infinicode.de/components/icon/icon.js b/gitlab-extension@infinicode.de/components/icon/icon.js
index eb327a9..ae46c46 100644
--- a/gitlab-extension@infinicode.de/components/icon/icon.js
+++ b/gitlab-extension@infinicode.de/components/icon/icon.js
@@ -1,11 +1,9 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import * as ComponentsHelper from '../../helpers/components.js'
 
-const ComponentsHelper = Me.imports.helpers.components
-
-var Icon = GObject.registerClass({}, class Icon extends St.Icon {
+export const Icon = GObject.registerClass({}, class Icon extends St.Icon {
   _init ({ icon_name, isCustomIcon, ...props }) {
     const iconOptions = { }
 
diff --git a/gitlab-extension@infinicode.de/components/scaleLayout/scaleLayout.js b/gitlab-extension@infinicode.de/components/scaleLayout/scaleLayout.js
index d329c72..b8ba0d0 100644
--- a/gitlab-extension@infinicode.de/components/scaleLayout/scaleLayout.js
+++ b/gitlab-extension@infinicode.de/components/scaleLayout/scaleLayout.js
@@ -1,6 +1,7 @@
-const { Clutter, GObject } = imports.gi;
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
 
-var ScaleLayout = GObject.registerClass(
+export const ScaleLayout = GObject.registerClass(
     class ScaleLayout extends Clutter.BinLayout {
       _init (params) {
         this._container = null
diff --git a/gitlab-extension@infinicode.de/components/screenWrapper/screenWrapper.js b/gitlab-extension@infinicode.de/components/screenWrapper/screenWrapper.js
index 11df932..3c42e02 100644
--- a/gitlab-extension@infinicode.de/components/screenWrapper/screenWrapper.js
+++ b/gitlab-extension@infinicode.de/components/screenWrapper/screenWrapper.js
@@ -1,11 +1,10 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-const { ProjectsScreen } = Me.imports.components.screens.projectsScreen.projectsScreen
-const { ProjectDetailsScreen } = Me.imports.components.screens.projectDetailsScreen.projectDetailsScreen
+import { ProjectDetailsScreen } from '../screens/projectDetailsScreen/projectDetailsScreen.js'
+import { ProjectsScreen } from '../screens/projectsScreen/projectsScreen.js'
 
-var ScreenWrapper = GObject.registerClass(
+export const ScreenWrapper = GObject.registerClass(
     class ScreenWrapper extends St.Widget {
       _init (mainEventHandler) {
         super._init({
diff --git a/gitlab-extension@infinicode.de/components/screens/projectDetailsScreen/projectDetailsScreen.js b/gitlab-extension@infinicode.de/components/screens/projectDetailsScreen/projectDetailsScreen.js
index 330cf4f..621d507 100644
--- a/gitlab-extension@infinicode.de/components/screens/projectDetailsScreen/projectDetailsScreen.js
+++ b/gitlab-extension@infinicode.de/components/screens/projectDetailsScreen/projectDetailsScreen.js
@@ -1,23 +1,22 @@
-const { Clutter, GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { CommitCard } from '../../cards/commitCard.js'
+import { FlatList } from '../../flatList/flatList.js'
+import { PipelineCard } from '../../cards/pipelineCard.js'
+import { ProjectCard } from '../../cards/projectCard.js'
+import { SearchBar } from '../../searchBar/searchBar.js'
+import { Translations } from '../../../helpers/translations.js'
 
-const { CommitCard } = Me.imports.components.cards.commitCard
-const { FlatList } = Me.imports.components.flatList.flatList
-const { PipelineCard } = Me.imports.components.cards.pipelineCard
-const { ProjectCard } = Me.imports.components.cards.projectCard
-const { SearchBar } = Me.imports.components.searchBar.searchBar
-const { Translations } = Me.imports.helpers.translations
-
-const GitLabService = Me.imports.services.gitlab
+import * as GitLabService from '../../../services/gitlab.js'
 
 const TABS = {
   COMMITS: 'commits',
   PIPELINES: 'pipelines'
 }
 
-var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen extends St.BoxLayout {
+export const ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen extends St.BoxLayout {
   _init (projectItem, mainEventHandler) {
     super._init({
       style_class: 'screen project-details-screen',
@@ -101,7 +100,7 @@ var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen
   //     vertical: false
   //   })
   //
-  //   this.scroll.add_actor(this.box, { expand: false, x_fill: false, x_align: St.Align.LEFT })
+  //   this.scroll.add_actor(this.box, { expand: false, x_fill: false, x_align: Clutter.ActorAlign.LEFT })
   // }
 
   _extract_filterable_search_text (commit, pipeline) {
@@ -212,9 +211,9 @@ var ProjectDetailsScreen = GObject.registerClass({}, class ProjectDetailsScreen
 
     // refresh data
     if (this._selectedTab === TABS.COMMITS) {
-      this._loadCommits()
+      this._loadCommits().catch(e => log(e))
     } else if (this._selectedTab === TABS.PIPELINES) {
-      this._loadPipelines()
+      this._loadPipelines().catch(e => log(e))
     }
   }
 })
diff --git a/gitlab-extension@infinicode.de/components/screens/projectsScreen/projectsScreen.js b/gitlab-extension@infinicode.de/components/screens/projectsScreen/projectsScreen.js
index 9081c06..12e1e81 100644
--- a/gitlab-extension@infinicode.de/components/screens/projectsScreen/projectsScreen.js
+++ b/gitlab-extension@infinicode.de/components/screens/projectsScreen/projectsScreen.js
@@ -1,30 +1,28 @@
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { clearCache } from '../../../helpers/data.js'
+import { FlatList } from '../../flatList/flatList.js'
+import { ProjectSelectButtons } from '../../gitlab/projectSelectButtons.js'
+import { ProjectCard } from '../../cards/projectCard.js'
+import { SearchBar } from '../../searchBar/searchBar.js'
 
-const { clearCache } = Me.imports.helpers.data
-const { FlatList } = Me.imports.components.flatList.flatList
-const { ProjectSelectButtons } = Me.imports.components.gitlab.projectSelectButtons
-const { ProjectCard } = Me.imports.components.cards.projectCard
-const { SearchBar } = Me.imports.components.searchBar.searchBar
-
-const {
+import {
   SettingsHandler,
   GITLAB_ACCOUNTS,
   SELECTED_GITLAB_ACCOUNT_INDEX
-} = Me.imports.helpers.settings
+} from '../../../helpers/settings.js'
 
-const { Translations } = Me.imports.helpers.translations
+import { Translations } from '../../../helpers/translations.js'
 
-const GitLabService = Me.imports.services.gitlab
+import * as GitLabService from '../../../services/gitlab.js'
 
 const SETTINGS_KEYS_TO_REFRESH = [
   GITLAB_ACCOUNTS,
   SELECTED_GITLAB_ACCOUNT_INDEX
 ]
 
-var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.BoxLayout {
+export const ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.BoxLayout {
   _init (mainEventHandler) {
     super._init({
       style_class: 'screen projects-screen',
@@ -49,14 +47,14 @@ var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.B
 
     searchBar.connect('refresh', () => {
       clearCache()
-      this._loadData()
+      this._loadData().catch(e => log(e))
     })
 
     searchBar.connect('text-change', (sender, searchText) => this._filter_results(searchText))
 
     this._settingsChangedId = this._settings.connect('changed', (value, key) => {
       if (SETTINGS_KEYS_TO_REFRESH.includes(key)) {
-        this._loadData()
+        this._loadData().catch(e => log(e))
       }
 
       this._projectSelectButtons.visible = this._settings.gitlab_accounts.length > 1
@@ -71,7 +69,7 @@ var ProjectsScreen = GObject.registerClass({}, class ProjectsScreen extends St.B
 
     this.connect('destroy', this._onDestroy.bind(this))
 
-    this._loadData()
+    this._loadData().catch(e => log(e))
   }
 
   _filter_results (searchText) {
diff --git a/gitlab-extension@infinicode.de/components/searchBar/searchBar.js b/gitlab-extension@infinicode.de/components/searchBar/searchBar.js
index b1d92a7..d0d582e 100644
--- a/gitlab-extension@infinicode.de/components/searchBar/searchBar.js
+++ b/gitlab-extension@infinicode.de/components/searchBar/searchBar.js
@@ -1,13 +1,12 @@
-const { GObject, St } = imports.gi
+import Clutter from 'gi://Clutter'
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const ExtensionUtils = imports.misc.extensionUtils
+import { Translations } from '../../helpers/translations.js'
+import { SettingsHandler } from '../../helpers/settings.js'
+import { IconButton } from '../buttons/iconButton.js'
 
-const Me = ExtensionUtils.getCurrentExtension()
-
-const { IconButton } = Me.imports.components.buttons.iconButton
-const { Translations } = Me.imports.helpers.translations
-
-var SearchBar = GObject.registerClass({
+export const SearchBar = GObject.registerClass({
   Signals: {
     'text-change': {
       param_types: [GObject.TYPE_STRING]
@@ -79,7 +78,7 @@ var SearchBar = GObject.registerClass({
   _createButtonBox () {
     const buttonBox = new St.BoxLayout({
       style_class: 'button-box',
-      x_align: St.Align.END
+      x_align: Clutter.ActorAlign.END
     })
 
     const refreshIconButton = new IconButton({
@@ -94,8 +93,9 @@ var SearchBar = GObject.registerClass({
       icon_name: 'emblem-system-symbolic',
       icon_size: 18,
       onClick: () => {
+        const settings = new SettingsHandler()
         this._mainEventHandler.emit('hide-panel')
-        ExtensionUtils.openPrefs();
+        settings.extensionObject.openPreferences();
       }
     })
 
diff --git a/gitlab-extension@infinicode.de/components/settings/aboutPage.js b/gitlab-extension@infinicode.de/components/settings/aboutPage.js
index 79830dd..2c4f947 100644
--- a/gitlab-extension@infinicode.de/components/settings/aboutPage.js
+++ b/gitlab-extension@infinicode.de/components/settings/aboutPage.js
@@ -1,16 +1,18 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Adw from 'gi://Adw'
+import GdkPixbuf from 'gi://GdkPixbuf'
+import GLib from 'gi://GLib'
+import GObject from 'gi://GObject'
+import Gtk from 'gi://Gtk'
 
-const { Adw, GdkPixbuf, Gio, GLib, GObject, Gtk } = imports.gi
+import * as Config from 'resource:///org/gnome/Shell/Extensions/js/misc/config.js';
 
-const { SettingsHandler } = Me.imports.helpers.settings
-const { Translations } = Me.imports.helpers.translations
+import { Translations } from '../../helpers/translations.js'
 
-var AboutPage = GObject.registerClass({
+export const AboutPage = GObject.registerClass({
       GTypeName: 'GitlabExtension-AboutPage',
     },
     class AboutPagePreferencesPage extends Adw.PreferencesPage {
-      _init () {
+      _init (extensionPath, metadata) {
         super._init({
           title: Translations.SETTINGS.TITLE_ABOUT,
           icon_name: 'help-about-symbolic',
@@ -51,8 +53,8 @@ var AboutPage = GObject.registerClass({
           title: Translations.MISC.EXTENSION_VERSION,
         })
         let releaseVersion
-        if (Me.metadata.version) {
-          releaseVersion = Me.metadata.version
+        if (metadata?.version) {
+          releaseVersion = metadata?.version
         } else {
           releaseVersion = 'unknown'
         }
@@ -65,8 +67,8 @@ var AboutPage = GObject.registerClass({
           title: Translations.MISC.GIT_COMMIT
         })
         let commitVersion
-        if (Me.metadata.commit) {
-          commitVersion = Me.metadata.commit
+        if (metadata?.commit) {
+          commitVersion = metadata?.commit
         }
         commitRow.add_suffix(new Gtk.Label({
           label: commitVersion ? commitVersion : '',
@@ -79,7 +81,7 @@ var AboutPage = GObject.registerClass({
           title: Translations.MISC.GNOME_VERSION,
         })
         gnomeVersionRow.add_suffix(new Gtk.Label({
-          label: imports.misc.config.PACKAGE_VERSION + '',
+          label: Config.PACKAGE_VERSION + '',
         }))
         extensionInfoGroup.add(gnomeVersionRow)
 
@@ -113,7 +115,7 @@ var AboutPage = GObject.registerClass({
           title: Translations.MISC.SESSION_TYPE,
         })
         let windowingLabel
-        if (Me.metadata.isWayland) {
+        if (metadata?.isWayland) {
           windowingLabel = 'Wayland'
         } else {
           windowingLabel = 'X11'
@@ -129,16 +131,16 @@ var AboutPage = GObject.registerClass({
         let linksGroup = new Adw.PreferencesGroup()
         let linksBox = new Adw.ActionRow()
 
-        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(Me.path + '/media/donate-icon.svg', -1, 50, true)
+        let pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(extensionPath + '/media/donate-icon.svg', -1, 50, true)
         let donateImage = Gtk.Picture.new_for_pixbuf(pixbuf)
         let donateLinkButton = new Gtk.LinkButton({
           child: donateImage,
           uri: 'https://www.paypal.com/donate/?hosted_button_id=US78C8SZ6UHHQ',
         })
 
-        pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(Me.path + '/media/source-icon.svg', -1, 50, true)
+        pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(extensionPath + '/media/source-icon.svg', -1, 50, true)
         let sourceCodeImage = Gtk.Picture.new_for_pixbuf(pixbuf)
-        let projectUrl = Me.metadata.url
+        let projectUrl = metadata?.url
         let projectLinkButton = new Gtk.LinkButton({
           child: sourceCodeImage,
           uri: projectUrl,
@@ -166,8 +168,8 @@ var AboutPage = GObject.registerClass({
       }
     })
 
-var GNU_SOFTWARE = '<span size="small">' +
+export const GNU_SOFTWARE = '<span size="small">' +
     'This program comes with absolutely no warranty.\n' +
     'See the <a href="https://gnu.org/licenses/old-licenses/gpl-2.0.html">' +
     'GNU General Public License, version 2 or later</a> for details.' +
-    '</span>';
+    '</span>'
diff --git a/gitlab-extension@infinicode.de/components/settings/gitlabAccountListPage.js b/gitlab-extension@infinicode.de/components/settings/gitlabAccountListPage.js
index fafcad3..d4098f3 100644
--- a/gitlab-extension@infinicode.de/components/settings/gitlabAccountListPage.js
+++ b/gitlab-extension@infinicode.de/components/settings/gitlabAccountListPage.js
@@ -1,17 +1,17 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Adw from 'gi://Adw'
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
+import Gtk from 'gi://Gtk'
 
-const { Adw, Gio, GObject, Gtk } = imports.gi
 
-const { SettingsHandler } = Me.imports.helpers.settings
-const { Translations } = Me.imports.helpers.translations
+import { Translations } from '../../helpers/translations.js'
 
-const { NewItemModel } = Me.imports.components.settings.subcomponents.newItemModel
-const { NewGitlabAccountRow } = Me.imports.components.settings.subcomponents.newGitlabAccountRow
-const { GitlabAccountModelList } = Me.imports.components.settings.subcomponents.gitlabAccountModelList
-const { GitlabAccountRow } = Me.imports.components.settings.subcomponents.gitlabAccountRow
+import { NewItemModel } from './subcomponents/newItemModel.js'
+import { NewGitlabAccountRow } from './subcomponents/newGitlabAccountRow.js'
+import { GitlabAccountModelList } from './subcomponents/gitlabAccountModelList.js'
+import { GitlabAccountRow } from './subcomponents/gitlabAccountRow.js'
 
-var GitlabAccountListPage = GObject.registerClass({
+export const GitlabAccountListPage = GObject.registerClass({
       GTypeName: 'GitlabExtension-GitlabAccountListPage',
     },
     class GitlabAccountListPreferencePage extends Adw.PreferencesPage {
diff --git a/gitlab-extension@infinicode.de/components/settings/settingsPage.js b/gitlab-extension@infinicode.de/components/settings/settingsPage.js
index 7ae48db..d867577 100644
--- a/gitlab-extension@infinicode.de/components/settings/settingsPage.js
+++ b/gitlab-extension@infinicode.de/components/settings/settingsPage.js
@@ -1,12 +1,11 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Adw from 'gi://Adw'
+import GObject from 'gi://GObject'
+import Gtk from 'gi://Gtk'
 
-const { Adw, Gio, GObject, Gtk } = imports.gi
+import { SettingsHandler } from '../../helpers/settings.js'
+import { Translations } from '../../helpers/translations.js'
 
-const { SettingsHandler } = Me.imports.helpers.settings
-const { Translations } = Me.imports.helpers.translations
-
-var SettingsPage = GObject.registerClass({
+export const SettingsPage = GObject.registerClass({
       GTypeName: 'GitlabExtension-SettingsPage',
     },
     class GitlabSettingsPreferencePage extends Adw.PreferencesPage {
diff --git a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountItem.js b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountItem.js
index 6c1c294..f2264b4 100644
--- a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountItem.js
+++ b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountItem.js
@@ -1,11 +1,8 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import GObject from 'gi://GObject'
 
-const { GObject } = imports.gi
+import { DEFAULT_GITLAB_DATA } from '../../../helpers/settings.js'
 
-const { DEFAULT_GITLAB_DATA } = Me.imports.helpers.settings
-
-var GitlabAccountItem = GObject.registerClass({
+export const GitlabAccountItem = GObject.registerClass({
   GTypeName: 'GitlabExtension-GitlabAccountItem',
   Properties: {
     'id': GObject.ParamSpec.string('id', 'id', 'id', GObject.ParamFlags.READWRITE, null),
diff --git a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountModelList.js b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountModelList.js
index 2d4babe..59acf95 100644
--- a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountModelList.js
+++ b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountModelList.js
@@ -1,18 +1,16 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
 
-const { Gio, GObject } = imports.gi
+import { GitlabAccountItem } from '../../../components/settings/subcomponents/gitlabAccountItem.js'
 
-const { GitlabAccountItem } = Me.imports.components.settings.subcomponents.gitlabAccountItem
-
-const { SettingsHandler, GITLAB_ACCOUNTS, DEFAULT_GITLAB_DATA } = Me.imports.helpers.settings
-const { Translations } = Me.imports.helpers.translations
+import { DEFAULT_GITLAB_DATA, GITLAB_ACCOUNTS, SettingsHandler } from '../../../helpers/settings.js'
+import { Translations } from '../../../helpers/translations.js'
 
 const SETTING_KEYS_TO_REFRESH = [
   GITLAB_ACCOUNTS
 ]
 
-var GitlabAccountModelList = GObject.registerClass({
+export const GitlabAccountModelList = GObject.registerClass({
   GTypeName: 'GitlabExtension-GitlabAccountModelList',
 }, class GitlabAccountModelList extends GObject.Object {
   static [GObject.interfaces] = [Gio.ListModel]
diff --git a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountRow.js b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountRow.js
index 6e161b5..1584c1e 100644
--- a/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountRow.js
+++ b/gitlab-extension@infinicode.de/components/settings/subcomponents/gitlabAccountRow.js
@@ -1,14 +1,14 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Adw from 'gi://Adw'
+import Gdk from 'gi://Gdk'
+import GLib from 'gi://GLib'
+import GObject from 'gi://GObject'
+import Gtk from 'gi://Gtk'
+import Pango from 'gi://Pango'
 
-const { Adw, Gdk, Gio, GLib, GObject, Gtk, Pango } = imports.gi
-const Gettext = imports.gettext.domain(Me.metadata['gettext-domain'])
-const _ = Gettext.gettext
+import { SETTINGS_SCHEMA_DOMAIN, SettingsHandler } from '../../../helpers/settings.js'
+import { Translations } from '../../../helpers/translations.js'
 
-const { SettingsHandler, SETTINGS_SCHEMA_DOMAIN } = Me.imports.helpers.settings
-const { initTranslations, Translations } = Me.imports.helpers.translations
-
-var GitlabAccountRow = GObject.registerClass({
+export const GitlabAccountRow = GObject.registerClass({
   GTypeName: 'GitlabExtension-GitlabAccountRow',
 }, class GitlabAccountRowClass extends Adw.PreferencesRow {
   constructor (item, gitlabAccountModelList) {
diff --git a/gitlab-extension@infinicode.de/components/settings/subcomponents/newGitlabAccountRow.js b/gitlab-extension@infinicode.de/components/settings/subcomponents/newGitlabAccountRow.js
index 9f38b35..fd1a89b 100644
--- a/gitlab-extension@infinicode.de/components/settings/subcomponents/newGitlabAccountRow.js
+++ b/gitlab-extension@infinicode.de/components/settings/subcomponents/newGitlabAccountRow.js
@@ -1,11 +1,10 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import Adw from 'gi://Adw'
+import GObject from 'gi://GObject'
+import Gtk from 'gi://Gtk'
 
-const { Adw, Gio, GObject, Gtk } = imports.gi
+import { Translations } from '../../../helpers/translations.js'
 
-const { Translations } = Me.imports.helpers.translations
-
-var NewGitlabAccountRow = GObject.registerClass({
+export const NewGitlabAccountRow = GObject.registerClass({
       GTypeName: 'GitlabExtension-NewGitlabAccountRow',
     },
     class NewGitlabAccountRowClass extends Adw.PreferencesRow {
diff --git a/gitlab-extension@infinicode.de/components/settings/subcomponents/newItemModel.js b/gitlab-extension@infinicode.de/components/settings/subcomponents/newItemModel.js
index 59b1495..b2d73c2 100644
--- a/gitlab-extension@infinicode.de/components/settings/subcomponents/newItemModel.js
+++ b/gitlab-extension@infinicode.de/components/settings/subcomponents/newItemModel.js
@@ -1,6 +1,7 @@
-const { Gio, GObject } = imports.gi
+import Gio from 'gi://Gio'
+import GObject from 'gi://GObject'
 
-var NewItemModel = GObject.registerClass({
+export const NewItemModel = GObject.registerClass({
   GTypeName: 'GitlabExtension-NewItemModel',
 }, class GitlabNewItemModelClass extends GObject.Object {
   static [GObject.interfaces] = [Gio.ListModel]
diff --git a/gitlab-extension@infinicode.de/extension.js b/gitlab-extension@infinicode.de/extension.js
index 27804f4..8cb96f1 100644
--- a/gitlab-extension@infinicode.de/extension.js
+++ b/gitlab-extension@infinicode.de/extension.js
@@ -22,19 +22,19 @@
  *
  */
 
-const { GObject, St } = imports.gi
+import GObject from 'gi://GObject'
+import St from 'gi://St'
 
-const Main = imports.ui.main
-const PanelMenu = imports.ui.panelMenu
+import { Extension, gettext as _ } from 'resource:///org/gnome/shell/extensions/extension.js'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import * as Main from 'resource:///org/gnome/shell/ui/main.js'
+import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js'
+import { ScreenWrapper } from './components/screenWrapper/screenWrapper.js'
 
-const { EventHandler } = Me.imports.helpers.eventHandler
-const { ScreenWrapper } = Me.imports.components.screenWrapper.screenWrapper
-const { SettingsHandler } = Me.imports.helpers.settings
-
-const ComponentsHelper = Me.imports.helpers.components
+import * as ComponentsHelper from './helpers/components.js'
+import { EventHandler } from './helpers/eventHandler.js'
+import { initSettings, SettingsHandler } from './helpers/settings.js'
+import { initTranslations } from './helpers/translations.js'
 
 const MenuPosition = {
   LEFT: 0,
@@ -42,7 +42,7 @@ const MenuPosition = {
   RIGHT: 2
 }
 
-var GitLabPanelMenuButton = GObject.registerClass(
+export const GitLabPanelMenuButton = GObject.registerClass(
     class GitLabMenuButton extends PanelMenu.Button {
       _init () {
         super._init(0.5)
@@ -123,22 +123,21 @@ var GitLabPanelMenuButton = GObject.registerClass(
     }
 )
 
-var gitlabPanelMenuButton
-
-function init (extensionMeta) {
-  ExtensionUtils.initTranslations()
-}
+let _extensionPanelMenuButton
 
-function enable () {
-  gitlabPanelMenuButton = new GitLabPanelMenuButton()
-  Main.panel.addToStatusArea('gitlabMenu', gitlabPanelMenuButton)
-  gitlabPanelMenuButton.checkPositionInPanel()
-}
-
-function disable () {
-  if (gitlabPanelMenuButton) {
-    gitlabPanelMenuButton.destroy()
+export default class GitlabExtension extends Extension {
+  enable () {
+    initSettings(this)
+    initTranslations(_)
+    _extensionPanelMenuButton = new GitLabPanelMenuButton()
+    Main.panel.addToStatusArea('gitlabMenu', _extensionPanelMenuButton)
+    _extensionPanelMenuButton.checkPositionInPanel()
   }
 
-  gitlabPanelMenuButton = null
+  disable () {
+    if (_extensionPanelMenuButton) {
+      _extensionPanelMenuButton.destroy()
+      _extensionPanelMenuButton = null
+    }
+  }
 }
diff --git a/gitlab-extension@infinicode.de/helpers/components.js b/gitlab-extension@infinicode.de/helpers/components.js
index 501bb38..aead1e6 100644
--- a/gitlab-extension@infinicode.de/helpers/components.js
+++ b/gitlab-extension@infinicode.de/helpers/components.js
@@ -1,6 +1,7 @@
-const { Gio, GObject } = imports.gi
+import Gio from 'gi://Gio'
+import { SettingsHandler } from './settings.js'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-
-var getCustomIconPath = iconName => Gio.icon_new_for_string(Me.dir.get_child('icons').get_path() + '/' + iconName + '.svg')
+export const getCustomIconPath = iconName => {
+  const settings = new SettingsHandler()
+  return Gio.icon_new_for_string(settings.extensionObject.path + '/icons/' + iconName + '.svg')
+}
diff --git a/gitlab-extension@infinicode.de/helpers/data.js b/gitlab-extension@infinicode.de/helpers/data.js
index 1e438d5..6ee60a2 100644
--- a/gitlab-extension@infinicode.de/helpers/data.js
+++ b/gitlab-extension@infinicode.de/helpers/data.js
@@ -1,5 +1,4 @@
-const ByteArray = imports.byteArray;
-const { GLib } = imports.gi
+import GLib from 'gi://GLib'
 
 let CACHE = {}
 const CACHE_TIME = 10 * 1000
@@ -9,13 +8,14 @@ const _MS_PER_MINUTE = 1000 * 60
 const _MS_PER_HOUR = 1000 * 60 * 60
 const _MS_PER_DAY = 1000 * 60 * 60 * 24
 
-var isNullOrUndefined = value => typeof value === 'undefined' || value === null
-var isNullOrEmpty = value => isNullOrUndefined(value) || value.length === 0
-var fallbackIfNaN = value => typeof value === 'undefined' || value === null || isNaN(value) ? '--' : value
+export const isNullOrUndefined = value => typeof value === 'undefined' || value === null
+export const isNullOrEmpty = value => isNullOrUndefined(value) || value.length === 0
+export const fallbackIfNaN = value => typeof value === 'undefined' || value === null || isNaN(value) ? '--' : value
 
-var decodeBase64JsonOrDefault = (encodedJson, defaultValue) => {
+export const decodeBase64JsonOrDefault = (encodedJson, defaultValue) => {
   try {
-    const value = JSON.parse(ByteArray.toString(GLib.base64_decode(encodedJson)))
+    const utf8decoder = new TextDecoder();
+    const value = JSON.parse(utf8decoder.decode(GLib.base64_decode(encodedJson)))
 
     if (!value) {
       return defaultValue
@@ -28,11 +28,11 @@ var decodeBase64JsonOrDefault = (encodedJson, defaultValue) => {
   }
 }
 
-var clearCache = () => {
+export const clearCache = () => {
   CACHE = {}
 }
 
-var cacheOrDefault = async (cacheKey, evaluator, cacheDuration = CACHE_TIME) => {
+export const cacheOrDefault = async (cacheKey, evaluator, cacheDuration = CACHE_TIME) => {
   const [timestamp, data] = CACHE[cacheKey] || []
 
   if (timestamp && data && timestamp + cacheDuration >= Date.now()) {
@@ -46,7 +46,7 @@ var cacheOrDefault = async (cacheKey, evaluator, cacheDuration = CACHE_TIME) =>
   return freshData
 }
 
-var getPipelineStatusIconName = status => {
+export const getPipelineStatusIconName = status => {
   switch (status) {
     case 'created':
       return 'creating-symbolic'
@@ -81,7 +81,7 @@ var getPipelineStatusIconName = status => {
   }
 }
 
-var getHumanReadableData = (relevantDate, compareToDate) => {
+export const getHumanReadableData = (relevantDate, compareToDate) => {
   if (!compareToDate) {
     compareToDate = new Date()
   }
diff --git a/gitlab-extension@infinicode.de/helpers/eventHandler.js b/gitlab-extension@infinicode.de/helpers/eventHandler.js
index 237cd04..db149e9 100644
--- a/gitlab-extension@infinicode.de/helpers/eventHandler.js
+++ b/gitlab-extension@infinicode.de/helpers/eventHandler.js
@@ -1,6 +1,3 @@
-const { GObject } = imports.gi
-const Signals = imports.signals
+import * as Signals from 'resource:///org/gnome/shell/misc/signals.js'
 
-var EventHandler = class EventHandler {}
-
-Signals.addSignalMethods(EventHandler.prototype)
+export const EventHandler = class EventEmitter extends Signals.EventEmitter {}
diff --git a/gitlab-extension@infinicode.de/helpers/fetch.js b/gitlab-extension@infinicode.de/helpers/fetch.js
index b2ec027..16ca951 100644
--- a/gitlab-extension@infinicode.de/helpers/fetch.js
+++ b/gitlab-extension@infinicode.de/helpers/fetch.js
@@ -1,4 +1,4 @@
-const Soup = imports.gi.Soup
+import Soup from 'gi://Soup'
 
 const DEFAULT_TIME_OUT_IN_SECONDS = 10
 const DEFAULT_CHROME_USER_AGENT = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36'
@@ -59,7 +59,7 @@ const generateQueryString = params => {
   return `?${paramKeyValues.join('&')}`
 }
 
-var fetch = ({ url, method = 'GET', headers, queryParameters }) => {
+export const fetch = ({ url, method = 'GET', headers, queryParameters }) => {
   return new Promise(resolve => {
     url = url + generateQueryString(queryParameters)
 
diff --git a/gitlab-extension@infinicode.de/helpers/settings.js b/gitlab-extension@infinicode.de/helpers/settings.js
index 54f5715..06e0b3c 100644
--- a/gitlab-extension@infinicode.de/helpers/settings.js
+++ b/gitlab-extension@infinicode.de/helpers/settings.js
@@ -1,28 +1,28 @@
-const { GLib, Gio } = imports.gi
+import GLib from 'gi://GLib'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { decodeBase64JsonOrDefault, isNullOrEmpty, isNullOrUndefined } from './data.js'
 
-const { decodeBase64JsonOrDefault, isNullOrEmpty, isNullOrUndefined } = Me.imports.helpers.data
+let _settings = null
+let _extensionObject = {}
 
-var POSITION_IN_PANEL_KEY = 'position-in-panel'
-var GITLAB_TOKEN = 'gitlab-token'
-var GITLAB_ACCOUNTS = 'gitlab-accounts'
-var SELECTED_GITLAB_ACCOUNT_INDEX = 'selected-gitlab-account-index'
+export const initSettings = extensionObject => {
+  _extensionObject = extensionObject
+}
+
+export const POSITION_IN_PANEL_KEY = 'position-in-panel'
+export const GITLAB_TOKEN = 'gitlab-token'
+export const GITLAB_ACCOUNTS = 'gitlab-accounts'
+export const SELECTED_GITLAB_ACCOUNT_INDEX = 'selected-gitlab-account-index'
 
-var SETTINGS_SCHEMA_DOMAIN = 'org.gnome.shell.extensions.gitlab'
+export const SETTINGS_SCHEMA_DOMAIN = 'org.gnome.shell.extensions.gitlab'
 
-var DEFAULT_GITLAB_DATA = {
+export const DEFAULT_GITLAB_DATA = {
   name: 'gitlab.com',
   apiEndpoint: 'https://gitlab.com/api/v4',
   onlyOwnedProjects: false
 }
 
-var SettingsHandler = class SettingsHandler {
-  constructor () {
-    this._settings = ExtensionUtils.getSettings()
-  }
-
+export const SettingsHandler = class SettingsHandler {
   get position_in_panel () {
     return this._settings.get_enum(POSITION_IN_PANEL_KEY)
   }
@@ -58,6 +58,18 @@ var SettingsHandler = class SettingsHandler {
     this._settings.set_string(GITLAB_ACCOUNTS, GLib.base64_encode(JSON.stringify(v)))
   }
 
+  get extensionObject () {
+    return _extensionObject
+  }
+
+  get _settings () {
+    if (!_settings) {
+      _settings = this.extensionObject.getSettings()
+    }
+
+    return _settings
+  }
+
   connect (identifier, onChange) {
     return this._settings.connect(identifier, onChange)
   }
diff --git a/gitlab-extension@infinicode.de/helpers/translations.js b/gitlab-extension@infinicode.de/helpers/translations.js
index 799920e..7b00be9 100644
--- a/gitlab-extension@infinicode.de/helpers/translations.js
+++ b/gitlab-extension@infinicode.de/helpers/translations.js
@@ -1,48 +1,49 @@
-const Gettext = imports.gettext
-const _ = Gettext.gettext
+export let Translations = {}
 
-var Translations = {
-  EXTENSION: {
-    NAME: _('Gitlab Extension'),
-    DESCRIPTION: _('GitLab will provide you a couple of information about your projects and pipelines in the Panel.')
-  },
+export const initTranslations = (_) => {
+  Translations = {
+    EXTENSION: {
+      NAME: _('Gitlab Extension'),
+      DESCRIPTION: _('GitLab Data right in your Gnome Shell Panel.')
+    },
 
-  BACK: _('back'),
-  COMMITS: _('Commits'),
-  FILTER_PLACEHOLDER: _('Filter Results'),
-  LAST_UPDATED: _('Updated %s ago'),
-  LOADING_DATA: _('Loading Data'),
-  LOADING_DATA_ERROR: _('Error loading data'),
-  LOADING_DATA_ERROR_SPECIFIC: _('Error Loading %s: %s'),
-  PIPELINES: _('Pipelines'),
-  TOKEN_ERROR: _('No accounts configured. Please open settings and add at least one gitlab account.'),
+    BACK: _('back'),
+    COMMITS: _('Commits'),
+    FILTER_PLACEHOLDER: _('Filter Results'),
+    LAST_UPDATED: _('Updated %s ago'),
+    LOADING_DATA: _('Loading Data'),
+    LOADING_DATA_ERROR: _('Error loading data'),
+    LOADING_DATA_ERROR_SPECIFIC: _('Error Loading %s: %s'),
+    PIPELINES: _('Pipelines'),
+    TOKEN_ERROR: _('No accounts configured. Please open settings and add at least one gitlab account.'),
 
-  SETTINGS: {
-    DEFAULT_NAME: _('Config %d'),
-    ACCOUNT_NAME: _('Name'),
-    TOKEN: _('Token'),
-    API_ENDPOINT: _('API Endpoint'),
-    ONLY_OWNED_PROJECTS: _('Only Owned Projects'),
-    ALL_PROJECTS: _('All Projects'),
-    ADD_CONFIG: _('Add Gitlab Config'),
+    SETTINGS: {
+      DEFAULT_NAME: _('Config %d'),
+      ACCOUNT_NAME: _('Name'),
+      TOKEN: _('Token'),
+      API_ENDPOINT: _('API Endpoint'),
+      ONLY_OWNED_PROJECTS: _('Only Owned Projects'),
+      ALL_PROJECTS: _('All Projects'),
+      ADD_CONFIG: _('Add Gitlab Config'),
 
-    TITLE_GENERAL: _('General'),
-    TITLE_SETTINGS: _('Settings'),
-    TITLE_ABOUT: _('About'),
-    TITLE_ACCOUNTS: _('Accounts'),
-    TITLE_ACCOUNT_LIST: _('Account List'),
+      TITLE_GENERAL: _('General'),
+      TITLE_SETTINGS: _('Settings'),
+      TITLE_ABOUT: _('About'),
+      TITLE_ACCOUNTS: _('Accounts'),
+      TITLE_ACCOUNT_LIST: _('Account List'),
 
-    POSITION_IN_PANEL: _('Position in Panel'),
-    POSITION_IN_PANEL_LEFT: _('Left'),
-    POSITION_IN_PANEL_CENTER: _('Center'),
-    POSITION_IN_PANEL_RIGHT: _('Right'),
-  },
+      POSITION_IN_PANEL: _('Position in Panel'),
+      POSITION_IN_PANEL_LEFT: _('Left'),
+      POSITION_IN_PANEL_CENTER: _('Center'),
+      POSITION_IN_PANEL_RIGHT: _('Right'),
+    },
 
-  MISC: {
-    OS: _('OS'),
-    EXTENSION_VERSION: _('Extension Version'),
-    GIT_COMMIT: _('Git Commit'),
-    GNOME_VERSION: _('GNOME Version'),
-    SESSION_TYPE: _('Session Type'),
-  },
+    MISC: {
+      OS: _('OS'),
+      EXTENSION_VERSION: _('Extension Version'),
+      GIT_COMMIT: _('Git Commit'),
+      GNOME_VERSION: _('GNOME Version'),
+      SESSION_TYPE: _('Session Type'),
+    },
+  }
 }
diff --git a/gitlab-extension@infinicode.de/metadata.json b/gitlab-extension@infinicode.de/metadata.json
index af09de2..9facdaa 100644
--- a/gitlab-extension@infinicode.de/metadata.json
+++ b/gitlab-extension@infinicode.de/metadata.json
@@ -5,10 +5,9 @@
   "settings-schema": "org.gnome.shell.extensions.gitlab",
   "gettext-domain": "gnome-shell-extension-gitlab",
   "shell-version": [
-    "43",
-    "44"
+    "45"
   ],
   "url": "https://github.com/cinatic/gitlab-extension",
   "uuid": "gitlab-extension@infinicode.de",
-  "version": 8
+  "version": 11
 }
diff --git a/gitlab-extension@infinicode.de/po/de.po b/gitlab-extension@infinicode.de/po/de.po
index af68674..e95d652 100644
--- a/gitlab-extension@infinicode.de/po/de.po
+++ b/gitlab-extension@infinicode.de/po/de.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gnome-shell-extension-gitlab-extension\n"
 "Report-Msgid-Bugs-To: fh@infinicode.de\n"
-"POT-Creation-Date: 2022-04-16 10:55+0200\n"
+"POT-Creation-Date: 2023-10-20 17:08+0200\n"
 "PO-Revision-Date: 2020-11-29 15:22+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -23,9 +23,7 @@ msgid "Gitlab Extension"
 msgstr ""
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:7
-msgid ""
-"GitLab will provide you a couple of information about your projects and "
-"pipelines in the Panel."
+msgid "GitLab Data right in your Gnome Shell Panel."
 msgstr ""
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:10
diff --git a/gitlab-extension@infinicode.de/po/gitlab-extension@infinicode.de.pot b/gitlab-extension@infinicode.de/po/gitlab-extension@infinicode.de.pot
index 582d802..6e99bc4 100644
--- a/gitlab-extension@infinicode.de/po/gitlab-extension@infinicode.de.pot
+++ b/gitlab-extension@infinicode.de/po/gitlab-extension@infinicode.de.pot
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gnome-shell-extension-gitlab-extension\n"
 "Report-Msgid-Bugs-To: fh@infinicode.de\n"
-"POT-Creation-Date: 2023-06-03 22:44+0200\n"
+"POT-Creation-Date: 2023-10-22 12:57+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -22,9 +22,7 @@ msgid "Gitlab Extension"
 msgstr ""
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:7
-msgid ""
-"GitLab will provide you a couple of information about your projects and "
-"pipelines in the Panel."
+msgid "GitLab Data right in your Gnome Shell Panel."
 msgstr ""
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:10
diff --git a/gitlab-extension@infinicode.de/po/nl.po b/gitlab-extension@infinicode.de/po/nl.po
index b663fce..3e0c4dd 100644
--- a/gitlab-extension@infinicode.de/po/nl.po
+++ b/gitlab-extension@infinicode.de/po/nl.po
@@ -7,26 +7,25 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gnome-shell-extension-gitlab-extension\n"
 "Report-Msgid-Bugs-To: fh@infinicode.de\n"
-"POT-Creation-Date: 2022-04-16 10:55+0200\n"
-"PO-Revision-Date: 2021-07-14 18:23+0200\n"
+"POT-Creation-Date: 2022-04-16 11:24+0200\n"
+"PO-Revision-Date: 2023-01-02 22:09+0100\n"
 "Last-Translator: Heimen Stoffels <vistausss@fastmail.com>\n"
 "Language-Team: \n"
 "Language: nl\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"X-Generator: Poedit 3.0\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"X-Generator: Poedit 3.2.2\n"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:6
 msgid "Gitlab Extension"
-msgstr ""
+msgstr "GitLab-uitbreiding"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:7
-msgid ""
-"GitLab will provide you a couple of information about your projects and "
-"pipelines in the Panel."
+msgid "GitLab Data right in your Gnome Shell Panel."
 msgstr ""
+"GitLab toont informatie over uw projecten en pijplijnen op de bovenbalk."
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:10
 msgid "back"
@@ -73,7 +72,7 @@ msgstr ""
 #: gitlab-extension@infinicode.de/helpers/translations.js:21
 #, javascript-format
 msgid "Config %d"
-msgstr ""
+msgstr "%d instellen"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:22
 msgid "Name"
@@ -85,28 +84,27 @@ msgstr "Toegangssleutel"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:24
 msgid "API Endpoint"
-msgstr "API-endpoint"
+msgstr "Api-endpoint"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:25
 msgid "Only Owned Projects"
 msgstr "Alleen eigen projecten"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:26
-#, fuzzy
 msgid "All Projects"
-msgstr "Alleen eigen projecten"
+msgstr "Alle projecten"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:27
 msgid "Add Gitlab Config"
-msgstr ""
+msgstr "GitLab-configuratie toevoegen"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:29
 msgid "General"
-msgstr ""
+msgstr "Algemeen"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:30
 msgid "Settings"
-msgstr ""
+msgstr "Voorkeuren"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:31
 msgid "About"
@@ -117,9 +115,8 @@ msgid "Accounts"
 msgstr "Accounts"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:33
-#, fuzzy
 msgid "Account List"
-msgstr "Accounts"
+msgstr "Accountlijst"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:35
 msgid "Position in Panel"
@@ -139,25 +136,23 @@ msgstr "Rechts"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:42
 msgid "OS"
-msgstr ""
+msgstr "Besturingssysteem"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:43
 msgid "Extension Version"
-msgstr ""
+msgstr "Uitbreidingsversie"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:44
-#, fuzzy
 msgid "Git Commit"
-msgstr "Commits"
+msgstr "Git-commit"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:45
-#, fuzzy
 msgid "GNOME Version"
-msgstr "Versie: "
+msgstr "GNOME-versie"
 
 #: gitlab-extension@infinicode.de/helpers/translations.js:46
 msgid "Session Type"
-msgstr ""
+msgstr "Sessietype"
 
 #, fuzzy
 #~ msgid ""
diff --git a/gitlab-extension@infinicode.de/prefs.js b/gitlab-extension@infinicode.de/prefs.js
index 250bd66..3a80381 100644
--- a/gitlab-extension@infinicode.de/prefs.js
+++ b/gitlab-extension@infinicode.de/prefs.js
@@ -1,30 +1,36 @@
-const { Gdk, Gio, GObject, Gtk } = imports.gi
+import Gdk from 'gi://Gdk'
+import Gtk from 'gi://Gtk'
 
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
+import { ExtensionPreferences, gettext as _ } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js'
 
-const { AboutPage } = Me.imports.components.settings.aboutPage
-const { GitlabAccountListPage } = Me.imports.components.settings.gitlabAccountListPage
-const { SettingsPage } = Me.imports.components.settings.settingsPage
+import { initTranslations } from './helpers/translations.js'
+import { initSettings } from './helpers/settings.js'
 
-function init () {
-  ExtensionUtils.initTranslations()
-}
+import { AboutPage } from './components/settings/aboutPage.js'
+import { GitlabAccountListPage } from './components/settings/gitlabAccountListPage.js'
+import { SettingsPage } from './components/settings/settingsPage.js'
 
-function fillPreferencesWindow (window) {
-  let iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
-  if (!iconTheme.get_search_path().includes(Me.path + '/media')) {
-    iconTheme.add_search_path(Me.path + '/media')
-  }
 
-  window.set_search_enabled(true)
+export default class GitlabExtensionPreferences extends ExtensionPreferences {
+  fillPreferencesWindow (window) {
+    initSettings(this)
+    initTranslations(_)
+
+    let iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
+    if (!iconTheme.get_search_path().includes(this.path + '/media')) {
+      iconTheme.add_search_path(this.path + '/media')
+    }
 
-  const gitlabAccountListPage = new GitlabAccountListPage()
-  window.add(gitlabAccountListPage)
+    window.set_search_enabled(true)
 
-  const settingsPage = new SettingsPage()
-  window.add(settingsPage)
+    const gitlabAccountListPage = new GitlabAccountListPage()
+    window.add(gitlabAccountListPage)
 
-  const aboutPage = new AboutPage()
-  window.add(aboutPage)
+    const settingsPage = new SettingsPage()
+    window.add(settingsPage)
+
+    const aboutPage = new AboutPage(this.path, this.metadata)
+    window.add(aboutPage)
+  }
 }
+
diff --git a/gitlab-extension@infinicode.de/services/gitlab.js b/gitlab-extension@infinicode.de/services/gitlab.js
index e5b9a9c..42cca73 100644
--- a/gitlab-extension@infinicode.de/services/gitlab.js
+++ b/gitlab-extension@infinicode.de/services/gitlab.js
@@ -1,15 +1,12 @@
-const ExtensionUtils = imports.misc.extensionUtils
-const Me = ExtensionUtils.getCurrentExtension()
-
-const { cacheOrDefault } = Me.imports.helpers.data
-const { fetch } = Me.imports.helpers.fetch
-const { SettingsHandler } = Me.imports.helpers.settings
+import { cacheOrDefault } from '../helpers/data.js'
+import { fetch } from '../helpers/fetch.js'
+import { SettingsHandler } from '../helpers/settings.js'
 
 const headers = token => ({
   'PRIVATE-TOKEN': token
 })
 
-var getOwnedProjects = async ({ per_page }) => {
+export const getOwnedProjects = async ({ per_page }) => {
   const settings = new SettingsHandler()
 
   const { name: accountName, apiEndpoint, token, onlyOwnedProjects } = settings.selected_gitlab_account || {}
@@ -27,7 +24,7 @@ var getOwnedProjects = async ({ per_page }) => {
   })
 }
 
-var getCommits = async ({ projectId, per_page }) => {
+export const getCommits = async ({ projectId, per_page }) => {
   const settings = new SettingsHandler()
 
   const { apiEndpoint, token } = settings.selected_gitlab_account || {}
@@ -41,7 +38,7 @@ var getCommits = async ({ projectId, per_page }) => {
   return fetch({ url, headers: headers(token), queryParameters })
 }
 
-var getPipelines = async ({ projectId, per_page }) => {
+export const getPipelines = async ({ projectId, per_page }) => {
   const settings = new SettingsHandler()
 
   const { apiEndpoint, token } = settings.selected_gitlab_account || {}