diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
new file mode 100644
index 0000000..968170e
--- /dev/null
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,72 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '37 13 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+        
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
diff --git a/package-lock.json b/package-lock.json
index 9c490ed..7fdbd2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,38 +1,25 @@
 {
   "name": "browser_extension_template",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "browser_extension_template",
-      "version": "1.0.0",
+      "version": "0.0.1",
       "license": "MIT",
-      "dependencies": {
-        "friendly-helper": "^1.7.1"
-      },
       "devDependencies": {
         "@types/node": "^18.7.4",
         "sass": "^1.39.0",
         "typescript": "^4.2.4"
       }
     },
-    "node_modules/@types/aes-js": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.1.tgz",
-      "integrity": "sha512-SDSGgXT3LRCH6qMWk8OHT1vLSVNuHNvCpKCx2/TYtQMbMGGgxJC9fspwSkQjqzRagrWnCrxuLL3jMNXLXHHvSw=="
-    },
     "node_modules/@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
       "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==",
       "dev": true
     },
-    "node_modules/aes-js": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
-      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
-    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -106,15 +93,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/friendly-helper": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/friendly-helper/-/friendly-helper-1.7.1.tgz",
-      "integrity": "sha512-6X9baO2FZ/EReoJBNOP55fOO21Bu0Lnkr6cM97OHXPBgn+V0LF3rS1Nmxeb/WcQGomSkAO3kBi73HDcrEpUCiA==",
-      "dependencies": {
-        "@types/aes-js": "^3.1.1",
-        "aes-js": "^3.1.2"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -275,22 +253,12 @@
     }
   },
   "dependencies": {
-    "@types/aes-js": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.1.tgz",
-      "integrity": "sha512-SDSGgXT3LRCH6qMWk8OHT1vLSVNuHNvCpKCx2/TYtQMbMGGgxJC9fspwSkQjqzRagrWnCrxuLL3jMNXLXHHvSw=="
-    },
     "@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
       "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==",
       "dev": true
     },
-    "aes-js": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
-      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
-    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -341,15 +309,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "friendly-helper": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/friendly-helper/-/friendly-helper-1.7.1.tgz",
-      "integrity": "sha512-6X9baO2FZ/EReoJBNOP55fOO21Bu0Lnkr6cM97OHXPBgn+V0LF3rS1Nmxeb/WcQGomSkAO3kBi73HDcrEpUCiA==",
-      "requires": {
-        "@types/aes-js": "^3.1.1",
-        "aes-js": "^3.1.2"
-      }
-    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
diff --git a/package.json b/package.json
index 76ea2e9..67ccc8c 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,6 @@
     "last 2 versions",
     "not dead"
   ],
-  "dependencies": {
-    "friendly-helper": "^1.7.1"
-  },
   "authors": [
     {
       "name": "Jonas Pfalzgraf",
diff --git a/public/manifest.json b/public/manifest.json
index 7b2997d..2f57490 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -14,6 +14,9 @@
     "default_title": "BrowserExtensionTemplate",
     "default_popup": "popup.html"
   },
+  "options_ui": {
+    "page": "options.html"
+  },
   "permissions": [
     "notifications"
   ],
diff --git a/public/options.html b/public/options.html
new file mode 100644
index 0000000..1cd3cda
--- /dev/null
+++ b/public/options.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico">
+    <title>{{BET}} Options</title>
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but {{BET}} doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong>
+    </noscript>
+    <div id="app">
+      <img src="./icons/icon128.png" class="logo" />
+      <h1>Settings</h1>
+      <div id="settings">
+      </div>
+    </div>
+    <footer>
+      <script type="module" src="./js/classes/settings.js"></script>
+    </footer>
+  </body>
+</html>
diff --git a/src/app.ts b/src/app.ts
index 27095ba..727e9f0 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,3 +1,5 @@
+import { Session } from "./classes/session.js"
+
 class App {
 
     private static contentEntry: string = "content"
@@ -8,15 +10,19 @@ class App {
     }
 
     async main(): Promise<void> {
-        
+        console.log("Hello World")
     }
 
     async drawData(): Promise<void> {
+        const session = Session.getInstance()
         const contentRoot = <HTMLDivElement>document.getElementById(App.contentEntry)
         const body = document.createElement("div")
         const title = document.createElement("h1")
+        const text = document.createElement("p")
         title.innerText = "Hello World"
+        text.innerText = session.contentTest
         body.appendChild(title)
+        body.appendChild(text)
         contentRoot.appendChild(body)
     }
 }
diff --git a/src/background.ts b/src/background.ts
index f3af3fa..197f02f 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,4 +1,3 @@
-
 class Background {
 
     constructor() {
diff --git a/src/classes/session.ts b/src/classes/session.ts
new file mode 100644
index 0000000..3443233
--- /dev/null
+++ b/src/classes/session.ts
@@ -0,0 +1,55 @@
+export class Session {
+
+    private static instance: Session;
+
+    private constructor() {
+    }
+
+    static getInstance() {
+        if (!Session.instance && !Session.load()) {
+            Session.instance = new Session();
+        }
+        if (!Session.instance && Session.load()) {
+            Session.instance = <Session>Session.load();
+        }
+        Session.save();
+        return Session.instance;
+    }
+
+    public static save() {
+        localStorage.setItem('session', JSON.stringify(this.instance));
+    }
+
+    public static load(): Session | null {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            return result;
+        }
+        return null;
+    }
+
+    public static reloadSession() {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            Session.instance = result;
+        }
+    }
+
+    public static resetSession() {
+        localStorage.removeItem('session');
+        sessionStorage.removeItem('session');
+        this.instance = new Session();
+        Session.save();
+        location.reload();
+    }
+
+    public readonly sessionId: string = crypto.randomUUID();
+
+    public contentTest: string = 'This is a simple example of a web application';
+}
\ No newline at end of file
diff --git a/src/classes/settings.ts b/src/classes/settings.ts
new file mode 100644
index 0000000..772b290
--- /dev/null
+++ b/src/classes/settings.ts
@@ -0,0 +1,29 @@
+import { Session } from "./session.js";
+
+class Settings {
+
+    private session = Session.getInstance();
+
+    constructor() {
+        this.renderSettings();
+    }
+
+    private async renderSettings(): Promise<void> {
+        const settings = <HTMLDivElement>document.getElementById('settings');
+        settings.innerHTML = `
+            <div class="form-group">
+                <label for="contentTest">Content Test</label>
+                <input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+            </div>
+            <button type="button" class="btn btn-primary" id="saveSettings">Save</button>
+        `;
+        const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
+        saveSettings.addEventListener('click', () => {
+            this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
+            Session.save();
+            Session.reloadSession();
+        });
+    }
+}
+
+new Settings();
\ No newline at end of file
diff --git a/src/sass/_mixin.sass b/src/sass/_mixin.sass
index 0e4c93a..41422c9 100644
--- a/src/sass/_mixin.sass
+++ b/src/sass/_mixin.sass
@@ -15,10 +15,12 @@
 
 @mixin partialButton
 	button
-		width: 100% !important
-		height: 100% !important
+		width: 5rem !important
+		height: 2rem !important
 		text-align: center !important
-		margin: 0 !important
+		margin: 0.5rem !important
+		border-color: $seccond-color !important
+		border-radius: 0.5rem !important
 
 		@include respond-to(handhelds)
 			font-size: 3rem
diff --git a/src/sass/_root.sass b/src/sass/_root.sass
index edabad7..e3babc1 100644
--- a/src/sass/_root.sass
+++ b/src/sass/_root.sass
@@ -3,6 +3,6 @@ $main-font-color: white
 $main-font-color-hover: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
 $seccond-color: lightgrey
-$background-color: rgb(119, 178, 255)
+$background-color: #77B2FF
 $background-color-content: rgb(198, 223, 255)
 $logo-image: url('../icons/icon128.png')
diff --git a/tools/deploy.ts b/tools/deploy.ts
index 8b6b7b0..a12bf54 100644
--- a/tools/deploy.ts
+++ b/tools/deploy.ts
@@ -36,7 +36,7 @@ function findHtmlFilesRecursive(source: string): string[] {
 }
 
 function replaceKeywordsInHtmlFile(file: string) {
-  const content = fs.readFileSync(file, 'utf8');
+  let content = fs.readFileSync(file, 'utf8');
   const pairs = appConfig.htmlTemplatePairs;
   pairs.forEach(function (pair: object) {
     // @ts-ignore