diff --git a/package.json b/package.json
index 3bd50a2..a383aac 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
     "@types/node": "^18.11.18",
     "@webcomponents/webcomponentsjs": "^2.7.0",
     "sass": "^1.39.0",
-    "typescript": "^4.2.4",
     "ts-loader": "^9.4.2",
+    "typescript": "^4.2.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"
   },
@@ -45,6 +45,7 @@
     "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
   },
   "dependencies": {
-    "@webcomponents/custom-elements": "^1.5.1"
+    "@webcomponents/custom-elements": "^1.5.1",
+    "bootstrap": "^5.2.3"
   }
 }
\ No newline at end of file
diff --git a/src/sass/_button.sass b/src/sass/_button.sass
deleted file mode 100644
index de19aab..0000000
--- a/src/sass/_button.sass
+++ /dev/null
@@ -1,226 +0,0 @@
-@import 'mixin'
-
-.btn-neutral
-  color: #fff
-  background-color: #000
-  border-color: #000
-  @include partialButton
-
-.btn-neutral:hover
-  color: #000
-  background-color: #fff
-  border-color: #fff
-
-.btn-neutral:focus, .btn-neutral.focus
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
-
-.btn-neutral.disabled, .btn-neutral:disabled
-  color: #fff
-  background-color: #000
-  border-color: #000
-
-.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active,
-.show > .btn-neutral.dropdown-toggle
-  color: #000
-  background-color: #fff
-  border-color: #fff
-
-.btn-primary
-  color: #fff
-  background-color: #007bff
-  border-color: #007bff
-  @include partialButton
-
-.btn-primary:hover
-  color: #fff
-  background-color: #0069d9
-  border-color: #0062cc
-
-.btn-primary:focus, .btn-primary.focus
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
-
-.btn-primary.disabled, .btn-primary:disabled
-  color: #fff
-  background-color: #007bff
-  border-color: #007bff
-
-.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
-.show > .btn-primary.dropdown-toggle
-  color: #fff
-  background-color: #0062cc
-  border-color: #005cbf
-
-.btn-secondary
-  color: #fff
-  background-color: #6c757d
-  border-color: #6c757d
-  @include partialButton
-
-.btn-secondary:hover
-  color: #fff
-  background-color: #5a6268
-  border-color: #545b62
-
-.btn-secondary:focus, .btn-secondary.focus
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5)
-
-.btn-secondary.disabled, .btn-secondary:disabled
-  color: #fff
-  background-color: #6c757d
-  border-color: #6c757d
-
-.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
-.show > .btn-secondary.dropdown-toggle
-  color: #fff
-  background-color: #545b62
-  border-color: #4e555b
-
-.btn-success
-  color: #fff
-  background-color: #28a745
-  border-color: #28a745
-  @include partialButton
-
-.btn-success:hover
-  color: #fff
-  background-color: #218838
-  border-color: #1e7e34
-
-.btn-success:focus, .btn-success.focus
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5)
-
-.btn-success.disabled, .btn-success:disabled
-  color: #fff
-  background-color: #28a745
-  border-color: #28a745
-
-.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
-.show > .btn-success.dropdown-toggle
-  color: #fff
-  background-color: #1e7e34
-  border-color: #1c7430
-
-.btn-info
-  color: #fff
-  background-color: #17a2b8
-  border-color: #17a2b8
-  @include partialButton
-
-.btn-info:hover
-  color: #fff
-  background-color: #138496
-  border-color: #117a8b
-
-.btn-info:focus, .btn-info.focus
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5)
-
-.btn-info.disabled, .btn-info:disabled
-  color: #fff
-  background-color: #17a2b8
-  border-color: #17a2b8
-
-.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
-.show > .btn-info.dropdown-toggle
-  color: #fff
-  background-color: #117a8b
-  border-color: #10707f
-
-.btn-warning
-  color: #212529
-  background-color: #ffc107
-  border-color: #ffc107
-  @include partialButton
-
-.btn-warning:hover
-  color: #212529
-  background-color: #e0a800
-  border-color: #d39e00
-
-.btn-warning:focus, .btn-warning.focus
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5)
-
-.btn-warning.disabled, .btn-warning:disabled
-  color: #212529
-  background-color: #ffc107
-  border-color: #ffc107
-
-.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
-.show > .btn-warning.dropdown-toggle
-  color: #212529
-  background-color: #d39e00
-  border-color: #c69500
-
-.btn-danger
-  color: #fff
-  background-color: #dc3545
-  border-color: #dc3545
-  @include partialButton
-
-.btn-danger:hover
-  color: #fff
-  background-color: #c82333
-  border-color: #bd2130
-
-.btn-danger:focus, .btn-danger.focus
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5)
-
-.btn-danger.disabled, .btn-danger:disabled
-  color: #fff
-  background-color: #dc3545
-  border-color: #dc3545
-
-.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
-.show > .btn-danger.dropdown-toggle
-  color: #fff
-  background-color: #bd2130
-  border-color: #b21f2d
-
-.btn-light
-  color: #212529
-  background-color: #f8f9fa
-  border-color: #f8f9fa
-  @include partialButton
-
-.btn-light:hover
-  color: #212529
-  background-color: #e2e6ea
-  border-color: #dae0e5
-
-.btn-light:focus, .btn-light.focus
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5)
-
-.btn-light.disabled, .btn-light:disabled
-  color: #212529
-  background-color: #f8f9fa
-  border-color: #f8f9fa
-
-.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
-.show > .btn-light.dropdown-toggle
-  color: #212529
-  background-color: #dae0e5
-  border-color: #d3d9df
-
-.btn-dark
-  color: #fff
-  background-color: #343a40
-  border-color: #343a40
-  @include partialButton
-
-.btn-dark:hover
-  color: #fff
-  background-color: #23272b
-  border-color: #1d2124
-
-.btn-dark:focus, .btn-dark.focus
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5)
-
-.btn-dark.disabled, .btn-dark:disabled
-  color: #fff
-  background-color: #343a40
-  border-color: #343a40
-
-.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
-.show > .btn-dark.dropdown-toggle
-  color: #fff
-  background-color: #1d2124
-  border-color: #171a1d
diff --git a/src/sass/_input.sass b/src/sass/_input.sass
deleted file mode 100644
index 4e4c4e8..0000000
--- a/src/sass/_input.sass
+++ /dev/null
@@ -1,36 +0,0 @@
-@import 'root'
-
-.text-input
-  width: 80%
-  height: 2rem
-  border: none
-  border-radius: 0.5rem
-  padding: 0.5rem
-  margin-bottom: 0.5rem
-  font-size: 1rem
-  font-family: 'Roboto', sans-serif
-  color: $seccondary-color
-  background-color: $background-color-content
-  &:focus
-    outline: none
-    background-color: $background-color-content-focus
-    color: $seccondary-color
-    box-shadow: 0px 0px 30px silver
-  &:disabled
-    background-color: $background-color-content-disabled
-    color: $seccondary-color-disabled
-    box-shadow: none
-  &:hover
-    background-color: $background-color-content-hover
-    color: $seccondary-color-hover
-    box-shadow: 0px 0px 30px silver
-  &:active
-    background-color: $background-color-content-active
-    color: $seccondary-color-active
-    box-shadow: 0px 0px 30px silver
-
-label
-  font-size: 1rem
-  font-family: 'Roboto', sans-serif
-  color: $main-font-color
-  margin-bottom: 0.5rem
diff --git a/src/sass/_root.sass b/src/sass/_root.sass
index b380612..3a50f8d 100644
--- a/src/sass/_root.sass
+++ b/src/sass/_root.sass
@@ -5,6 +5,12 @@ $main-font-color-focus: lightgrey
 $main-font-color-disabled: lightgrey
 $main-font-color-active: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
+$primary-color: #007bff
+$primary-color-hover: #0069d9
+$primary-color-focus: #0062cc
+$primary-color-disabled: #0069d9
+$primary-color-active: #0062cc
+$background-color-content-shadow: #0069d9
 $seccond-color: #6c757d
 $seccondary-color: darkgrey
 $seccondary-color-hover: black
diff --git a/src/sass/app.sass b/src/sass/app.sass
index 4c0cfae..f953809 100644
--- a/src/sass/app.sass
+++ b/src/sass/app.sass
@@ -1,8 +1,7 @@
 @import 'root'
 @import 'mixin'
 @import 'content'
-@import 'button'
-@import 'input'
+@import "../../node_modules/bootstrap/scss/bootstrap"
 
 body
   height: 30rem
diff --git a/src/settings.ts b/src/settings.ts
index 60538bd..24d6bb8 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -14,8 +14,8 @@ class Settings {
 		const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
         settings.innerHTML = `
             <div class="form-group">
-                <input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
 				<label for="contentTest">Content Test</label>
+                <input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
             </div>
         `;
 		settings.innerHTML += saveButton;