diff --git a/README.md b/README.md
index 04e1102..3a8958b 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,22 @@ npm start
 
 to start a development server, that will typically be available at [http://localhost:5173](http://localhost:5173). For further available npm scripts, you can review the [package.json](./package.json)
 
+## Style Integration
+
+To import the default stylings, use 
+```css
+@import "path_to_node_modules/@samply/lens/dist/style.css";
+```
+in your main css file.
+
+Web components use "part" instead of "class". Here is how you can overwrite style properties:
+
+```css
+lens-info-button::part(info-button-icon) {
+  width: 20px;
+}
+```
+
 ## Roadmap 
 - On a short term, we plan on publishing the library on [npmjs](https://www.npmjs.com/). We plan to make it available as [@samply/lens](https://www.npmjs.com/package/@samply/lens)
 - After making the library available on npm, we will move the `AppCCP.svelte`, `AppBBMRI.svelte` and `AppGBA.svelte` to their separate repositories that are just using this library.
diff --git a/package.json b/package.json
index 9cc75ef..31de3a7 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "module": "dist/lens.js",
   "main": "dist/lens.umd.js",
   "types": "dist/types.d.ts",
+  "styles": "dist/style.css",
   "files": [
     "dist"
   ],
@@ -13,7 +14,8 @@
     ".": {
       "import": "./dist/lens.js",
       "require": "./dist/lens.umd.js",
-      "types": "./dist/types.d.ts"
+      "types": "./dist/types.d.ts",
+      "styles": "./dist/style.css"
     }
   },
   "license": "MIT",
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
index 9c9b156..616df34 100644
--- a/packages/demo/src/AppCCP.svelte
+++ b/packages/demo/src/AppCCP.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import "../../lib";
-
     import {
         dktkDiagnosisMeasure,
         dktkMedicationStatementsMeasure,
diff --git a/packages/demo/src/AppFragmentDevelopment.svelte b/packages/demo/src/AppFragmentDevelopment.svelte
index 8352827..b60d82b 100644
--- a/packages/demo/src/AppFragmentDevelopment.svelte
+++ b/packages/demo/src/AppFragmentDevelopment.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-    import "../../lib";
     import type { QueryItem, QueryValue } from "../../lib/src/types/queryData";
-    // import "../../../dist/lib/lens-web-componets";
-    import type { CatalogueText } from "../../lib/src/types/texts";
 
     import {
         dktkDiagnosisMeasure,
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
index 6bbe58a..f9fec7c 100644
--- a/packages/demo/src/ccp.css
+++ b/packages/demo/src/ccp.css
@@ -1,12 +1,6 @@
-@import url('./styles/default/searchbars.css');
-@import url('./styles/default/search-button.css');
-@import url('./styles/default/catalogue.css');
-@import url('./styles/default/results-overview.css');
-@import url('./styles/default/result-table.css');
-@import url('./styles/default/result-chart.css');
-@import url('./styles/default/negotiate-button.css');
-@import url('./styles/default/info-button.css');
-@import url('./styles/default/search-modified-display.css');
+/*comment in for npm package usage*/
+/* @import "../../../node_modules/@samply/lens/dist/style.css"; */
+@import "../../lib/src/styles/index.css";
 
 @font-face {
   font-family: 'Open Sans';
@@ -22,7 +16,7 @@
   --light-gray: #dee2e6;
   --lightest-gray: #efefef;
   --dark-gray: #323232;
-  --blue: #00489c;
+  --blue: #007bff;
   --light-blue: #007bff;
   --lightest-blue: #adc7f3;
   --dark-blue: #002d80;
@@ -91,6 +85,7 @@ header {
 .logo-dkfz {
   justify-self: end;
 }
+
 .logo-dkfz img {
   height: 30px;
 }
@@ -134,7 +129,7 @@ footer {
   border: solid 1px var(--lightest-gray);
   background-color: var(--white);
   grid-row: 1/-1;
-  overflow-y: scroll; 
+  overflow-y: scroll;
   height: 100vh;
   position: sticky;
   top: 40px;
@@ -178,7 +173,7 @@ footer {
 
 }
 
-.chart-age-distribution{
+.chart-age-distribution {
   grid-column: span 2;
 }
 
@@ -192,7 +187,8 @@ footer {
   .charts {
     grid-template-columns: repeat(3, 1fr);
   }
-  .chart-age-distribution{
+
+  .chart-age-distribution {
     grid-row: 3/4;
     grid-column: 2/4;
   }
@@ -223,7 +219,7 @@ footer {
   .charts {
     margin-left: 0px;
   }
-  
+
 }
 
 
@@ -249,6 +245,13 @@ footer {
   text-align: right;
 }
 
+
+.result-table-hint-text {
+  padding-top: 20px;
+  display: flex;
+  align-items: end;
+}
+
 /**
 * Overrides
 */
@@ -259,13 +262,16 @@ footer {
 lens-search-bar-multiple::part(lens-searchbar-chip) {
   background-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button) {
   background-color: var(--light-blue);
   border-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button-item) {
   border-color: var(--white);
 }
+
 lens-search-bar-multiple::part(query-delete-button-group) {
   background-color: var(--white);
   border-color: var(--white);
@@ -275,7 +281,9 @@ lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
 
-lens-search-button::part(lens-search-button):hover {background-color: #006adb}
+lens-search-button::part(lens-search-button):hover {
+  background-color: #006adb
+}
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
@@ -293,9 +301,11 @@ lens-catalogue::part(lens-catalogue) {
 lens-catalogue::part(autocomplete-formfield-input):focus {
   border-color: var(--light-blue);
 }
+
 lens-catalogue::part(query-add-button) {
   background-color: var(--light-blue);
 }
+
 lens-catalogue::part(number-input-formfield):focus {
   border-color: var(--light-blue);
   outline: none;
@@ -315,9 +325,9 @@ lens-catalogue::part(number-input-formfield) {
   text-align: center;
   font-size: var(--font-size-s);
   -webkit-appearance: textfield;
-  -moz-appearance:    textfield;
-  appearance:         textfield !important;
- 
+  -moz-appearance: textfield;
+  appearance: textfield !important;
+
 }
 
 lens-catalogue::part(number-input-formfield):focus {
@@ -327,8 +337,8 @@ lens-catalogue::part(number-input-formfield):focus {
 
 lens-catalogue::part(number-input-formfield)::-webkit-outer-spin-button,
 lens-catalogue::part(number-input-formfield)::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 lens-catalogue::part(data-tree-element-toggle-icon) {
@@ -366,7 +376,16 @@ lens-info-button::part(info-button-icon) {
   width: 21px;
 }
 
-.catalogue lens-info-button::part(info-button){
+lens-info-button::part(info-button-icon):hover,
+lens-result-summary::part(info-button-icon):hover,
+lens-result-table::part(info-button-icon):hover,
+lens-chart::part(info-button-icon):hover,
+lens-catalogue::part(info-button-icon):hover {
+  transform: scale(1.1);
+}
+
+
+.catalogue lens-info-button::part(info-button) {
   height: 38px;
   padding: 0;
   top: var(--gap-xs);
@@ -375,27 +394,7 @@ lens-info-button::part(info-button-icon) {
   position: absolute;
 }
 
-.catalogue lens-info-button::part(info-button-dialogue){
+.catalogue lens-info-button::part(info-button-dialogue) {
   max-width: 300px;
   text-align: left;
 }
-
-lens-info-button::part(info-button-dialogue):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-lens-info-button::part(info-button-dialogue):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-.result-table-hint-text {
-  padding-top: 20px;
- display: flex;
- align-items: end;
-}
\ No newline at end of file
diff --git a/packages/demo/src/fragment-development.css b/packages/demo/src/fragment-development.css
index 6ca68de..7ed3345 100644
--- a/packages/demo/src/fragment-development.css
+++ b/packages/demo/src/fragment-development.css
@@ -1,50 +1,5 @@
-@import url('./styles/default/searchbars.css');
-@import url('./styles/default/search-button.css');
-@import url('./styles/default/catalogue.css');
-@import url('./styles/default/results-overview.css');
-@import url('./styles/default/result-table.css');
-@import url('./styles/default/result-chart.css');
-
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  --white: #ffffff;
-  --black: #000000;
-  --gray: #a7a7a7;
-  --light-gray: #dcdcdc;
-  --lightest-gray: #efefef;
-  --dark-gray: #323232;
-  --blue: #0047b9;
-  --light-blue: #0062ff;
-  --lightest-blue: #adc7f3;
-  --dark-blue: #002d80;
-  --green: #00882d;
-  --light-green: #00b33c;
-  --dark-green: #00591a;
-  --red: #b90000;
-  --light-red: #ff0000;
-  --dark-red: #800000;
-  --orange: #ff8a3c;
-  --light-orange: #ffa750;
-
-  --border-radius-small: 5px;
-
-  --gap-xxs: 5px;
-  --gap-xs: 10px;
-  --gap-s: 20px;
-  --gap-m: 30px;
-  --gap-l: 40px;
-  --gap-xl: 50px;
-  --gap-xxl: 60px;
-
-  --font-size-xxs: 10px;
-  --font-size-xs: 12px;
-  --font-size-s: 14px;
-  --font-size-m: 16px;
-  --font-size-l: 18px;
-  --font-size-xl: 24px;
-  --font-size-xxl: 32px;
-}
+@import "../../../node_modules/@samply/lens/dist/style.css";
+@import "../../lib/src/styles/index.css";
 
 /**
 * Demo
diff --git a/packages/demo/src/main.ts b/packages/demo/src/main.ts
index 1548c4d..2fc0469 100644
--- a/packages/demo/src/main.ts
+++ b/packages/demo/src/main.ts
@@ -1,3 +1,10 @@
+/**
+ * comment in for npm package usage
+ */
+// import "@samply/lens";
+
+import "../../lib";
+
 // import "./fragment-development.css";
 // import App from "./AppFragmentDevelopment.svelte";
 
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
index 97269fe..62dcf80 100644
--- a/packages/lib/index.ts
+++ b/packages/lib/index.ts
@@ -11,3 +11,5 @@ export { default as InfoButton } from "./src/components/buttons/InfoButtonCompon
 export { default as lensOptions } from "./src/components/Options.wc.svelte";
 export { default as DataPasser } from "./src/components/DataPasser.wc.svelte";
 export { default as ModifiedSearchComponent } from "./src/components/informational/ModifiedSearchComponent.wc.svelte";
+
+export * from "./src/styles/index.css";
diff --git a/packages/demo/src/styles/default/catalogue.css b/packages/lib/src/styles/catalogue.css
similarity index 80%
rename from packages/demo/src/styles/default/catalogue.css
rename to packages/lib/src/styles/catalogue.css
index 34f386a..95f48ff 100644
--- a/packages/demo/src/styles/default/catalogue.css
+++ b/packages/lib/src/styles/catalogue.css
@@ -3,8 +3,8 @@
 */
 
 lens-catalogue::part(lens-catalogue-toggle-button) {
-  background-color: var(--green);
-  color: var(--white);
+  background-color: var(--button-background-color);
+  color: var(--button-color);
   border: none;
   border-radius: var(--border-radius-small);
   padding: var(--gap-xs) var(--gap-s);
@@ -17,34 +17,24 @@ lens-catalogue::part(lens-catalogue-toggle-button) {
 }
 
 lens-catalogue::part(lens-catalogue-toggle-button):hover {
-  background-color: var(--light-green);
+  background-color: var(--button-background-color-hover);
 }
 
 lens-catalogue::part(toggle-button-open-icon) {
   transform: rotate(180deg);
 }
 
-
 lens-catalogue::part(data-tree-element) {
   position: relative;
 }
 
 lens-catalogue::part(data-tree-element-name) {
-  font-size: var(--font-size-m);
-  color: var(--dark-gray);
-  margin-bottom: 10px;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
   font-family: var(--font-family);
-}
-
-lens-catalogue::part(data-tree-element-name) {
+  color: var(--font-color);
   padding-left: var(--gap-s);
   padding-right: 0;
   font-size: var(--font-size-m);
-  color: var(--dark-gray);
-  margin-bottom: 10px;
+  margin-bottom: var(--gap-xs);
   border: none;
   background-color: unset;
   cursor: pointer;
@@ -75,7 +65,7 @@ lens-catalogue::part(info-button) {
 }
 
 lens-catalogue::part(info-button-icon) {
-  bottom: var(--gap-xxs);
+  bottom: 5px;
   width: 16px;
   height: 16px;
 }
@@ -149,8 +139,8 @@ lens-catalogue::part(criterion-section-groups) {
   */
 
 lens-catalogue::part(query-add-button) {
-  background-color: var(--blue);
-  color: var(--white);
+  background-color: var(--button-background-color);
+  color: var(--button-color);
   border: none;
   border-radius: var(--border-radius-small);
   font-size: var(--font-size-m);
@@ -204,43 +194,6 @@ lens-catalogue::part(number-input-add) {
   margin-top: var(--gap-s);
 }
 
-lens-catalogue::part(number-input-add-button) {
-  background-color: var(--green);
-  color: var(--white);
-  border: none;
-  border-radius: var(--border-radius-small);
-  padding: 0;
-  font-size: var(--font-size-m);
-  cursor: pointer;
-  height: 20px;
-  line-height: 22px;
-  width: 100px;
-}
-
-lens-catalogue::part(number-input-add-button):hover {
-  background-color: var(--light-green);
-}
-
-lens-catalogue::part(number-input-delete-button) {
-  background-color: var(--orange);
-  color: var(--white);
-  border: none;
-  border-radius: var(--border-radius-small);
-  padding: 0;
-  font-size: var(--font-size-m);
-  cursor: pointer;
-  height: 20px;
-  line-height: 22px;
-  width: 20px;
-}
-
-lens-catalogue::part(number-input-delete-button):hover {
-  background-color: var(--light-orange);
-}
-
-
-
-
 /**
   * Autocomplete
   */
@@ -272,7 +225,7 @@ lens-catalogue::part(autocomplete-options) {
   list-style-type: none;
   padding: 0;
   margin: 0;
-  border: solid 1px var(--light-blue);
+  border: solid 1px var(--blue);
   border-top: none;
   width: 100%;
   position: absolute;
@@ -286,24 +239,25 @@ lens-catalogue::part(autocomplete-options) {
 
 
 lens-catalogue::part(autocomplete-options-item) {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
   cursor: pointer;
   padding: var(--gap-xs);
 }
 
 lens-catalogue::part(autocomplete-options-item-focused) {
   color: var(--white);
-  background-color: var(--light-blue);
+  background-color: var(--blue);
 }
 
 lens-catalogue::part(autocomplete-options-item-description) {
-  padding-top: var(--gap-xxs);
   font-size: var(--font-size-xs);
   color: var(--blue);
 }
 
 lens-catalogue::part(autocomplete-options-item-description-focused) {
   color: var(--white);
-  padding-top: var(--gap-xxs);
   font-size: var(--font-size-xs);
 }
 
@@ -316,10 +270,10 @@ lens-catalogue::part(criterion-autocomplete-tooltip) {
   bottom: var(--font-size-m);
   left: 45px;
   padding: var(--gap-xs);
-  background-color: var(--lightest-gray);
+  background-color: var(--white);
   border-radius: var(--border-radius-small);
   border-bottom-left-radius: 0;
-  border: solid 1px var(--green);
+  border: solid 1px var(--blue);
 }
 
 lens-catalogue::part(formfield-error) {
diff --git a/packages/lib/src/styles/index.css b/packages/lib/src/styles/index.css
new file mode 100644
index 0000000..e721bc8
--- /dev/null
+++ b/packages/lib/src/styles/index.css
@@ -0,0 +1,57 @@
+@import url('./searchbars.css');
+@import url('./search-button.css');
+@import url('./catalogue.css');
+@import url('./results-overview.css');
+@import url('./result-table.css');
+@import url('./result-chart.css');
+@import url('./negotiate-button.css');
+@import url('./info-button.css');
+@import url('./search-modified-display.css');
+
+
+:root {
+    --white: #ffffff;
+    --black: #000000;
+    --gray: #a7a7a7;
+    --light-gray: #dcdcdc;
+    --lightest-gray: #efefef;
+    --dark-gray: #323232;
+    --blue: #0047b9;
+    --light-blue: #0062ff;
+    --lightest-blue: #adc7f3;
+    --dark-blue: #002d80;
+    --green: #00882d;
+    --light-green: #00b33c;
+    --dark-green: #00591a;
+    --red: #b90000;
+    --light-red: #ff0000;
+    --dark-red: #800000;
+    --orange: #ff8a3c;
+    --light-orange: #ffa750;
+    
+    --border-radius-small: 5px;
+    
+    --gap-xxs: 5px;
+    --gap-xs: 10px;
+    --gap-s: 20px;
+    --gap-m: 30px;
+    --gap-l: 40px;
+    --gap-xl: 50px;
+    --gap-xxl: 60px;
+    
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    --font-family: var(--font-family-inter);
+    --font-color: var(--dark-gray);
+    --font-size-xxs: 10px;
+    --font-size-xs: 12px;
+    --font-size-s: 14px;
+    --font-size-m: 16px;
+    --font-size-l: 18px;
+    --font-size-xl: 24px;
+    --font-size-xxl: 32px;
+
+    --button-background-color: var(--blue);
+    --button-background-color-hover: var(--light-blue);
+    --button-color: var(--white);
+  }
+  
\ No newline at end of file
diff --git a/packages/demo/src/styles/default/info-button.css b/packages/lib/src/styles/info-button.css
similarity index 87%
rename from packages/demo/src/styles/default/info-button.css
rename to packages/lib/src/styles/info-button.css
index b599c36..3ef44c1 100644
--- a/packages/demo/src/styles/default/info-button.css
+++ b/packages/lib/src/styles/info-button.css
@@ -4,7 +4,7 @@ lens-info-button::part(info-button) {
     height: 100%;
     width: 38px;
     background-color: var(--white);
-    border: solid 1px var(--light-blue);
+    border: solid 1px var(--blue);
     border-radius: var(--border-radius-small);
 }
 
@@ -22,6 +22,6 @@ lens-info-button::part(info-button-dialogue) {
     padding: var(--gap-s);
     top: 40px;
     right: 0px;
-    border: solid 1px var(--light-blue);
+    border: solid 1px var(--blue);
     border-radius: var(--border-radius-small);
 }
diff --git a/packages/demo/src/styles/default/negotiate-button.css b/packages/lib/src/styles/negotiate-button.css
similarity index 100%
rename from packages/demo/src/styles/default/negotiate-button.css
rename to packages/lib/src/styles/negotiate-button.css
diff --git a/packages/demo/src/styles/default/result-chart.css b/packages/lib/src/styles/result-chart.css
similarity index 96%
rename from packages/demo/src/styles/default/result-chart.css
rename to packages/lib/src/styles/result-chart.css
index 4267087..72f2090 100644
--- a/packages/demo/src/styles/default/result-chart.css
+++ b/packages/lib/src/styles/result-chart.css
@@ -44,7 +44,7 @@ lens-chart::part(info-button-dialogue) {
     padding: var(--gap-s);
     top: 40px;
     right: 0px;
-    border: solid 1px var(--light-blue);
+    border: solid 1px var(--blue);
     border-radius: var(--border-radius-small);
     text-align: left;
 }
diff --git a/packages/demo/src/styles/default/result-table.css b/packages/lib/src/styles/result-table.css
similarity index 98%
rename from packages/demo/src/styles/default/result-table.css
rename to packages/lib/src/styles/result-table.css
index 511b713..b824377 100644
--- a/packages/demo/src/styles/default/result-table.css
+++ b/packages/lib/src/styles/result-table.css
@@ -95,6 +95,6 @@ lens-result-table::part(info-button-dialogue) {
     padding: var(--gap-s);
     top: 40px;
     right: 0px;
-    border: solid 1px var(--light-blue);
+    border: solid 1px var(--blue);
     border-radius: var(--border-radius-small);
 }
diff --git a/packages/demo/src/styles/default/results-overview.css b/packages/lib/src/styles/results-overview.css
similarity index 96%
rename from packages/demo/src/styles/default/results-overview.css
rename to packages/lib/src/styles/results-overview.css
index 9b99b57..3a68302 100644
--- a/packages/demo/src/styles/default/results-overview.css
+++ b/packages/lib/src/styles/results-overview.css
@@ -44,6 +44,6 @@ lens-result-summary::part(info-button-dialogue) {
     padding: var(--gap-s);
     top: 40px;
     left: 0px;
-    border: solid 1px var(--light-blue);
+    border: solid 1px var(--blue);
     border-radius: var(--border-radius-small);
 }
diff --git a/packages/demo/src/styles/default/search-button.css b/packages/lib/src/styles/search-button.css
similarity index 96%
rename from packages/demo/src/styles/default/search-button.css
rename to packages/lib/src/styles/search-button.css
index cee0ef5..783a652 100644
--- a/packages/demo/src/styles/default/search-button.css
+++ b/packages/lib/src/styles/search-button.css
@@ -3,7 +3,7 @@
 */
 
 lens-search-button::part(lens-search-button) {
-    color: var(--white);
+    color: var(--button-color);
     border: none;
     border-radius: var(--border-radius-small);
     padding: var(--gap-xs) var(--gap-s);
@@ -41,7 +41,7 @@ lens-search-button::part(lens-search-button-title) {
 */
 
 lens-search-bar-multiple::part(lens-search-button) {
-    color: var(--white);
+    color: var(--button-color);
     border: none;
     border-radius: var(--border-radius-small);
     padding: var(--gap-xs) var(--gap-s);
diff --git a/packages/demo/src/styles/default/search-modified-display.css b/packages/lib/src/styles/search-modified-display.css
similarity index 100%
rename from packages/demo/src/styles/default/search-modified-display.css
rename to packages/lib/src/styles/search-modified-display.css
diff --git a/packages/demo/src/styles/default/searchbars.css b/packages/lib/src/styles/searchbars.css
similarity index 95%
rename from packages/demo/src/styles/default/searchbars.css
rename to packages/lib/src/styles/searchbars.css
index ba71e1f..4d45a72 100644
--- a/packages/demo/src/styles/default/searchbars.css
+++ b/packages/lib/src/styles/searchbars.css
@@ -61,9 +61,8 @@ lens-search-bar-multiple::part(lens-searchbar-chip-name) {
 
 lens-search-bar::part(lens-searchbar-chip),
 lens-search-bar-multiple::part(lens-searchbar-chip) {
-  background-color: var(--light-blue);
+  background-color: var(--blue);
   color: var(--white);
-  border: solid 1px var(--lightest-gray);
   border-radius: var(--border-radius-small);
   padding: 2px var(--gap-s) 2px var(--gap-xs);
   display: flex;
@@ -103,7 +102,7 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options) {
   max-height: 50vh;
   overflow: scroll;
   list-style-type: none;
-  padding: 0;
+  padding: var(--gap-s);
   margin: 0;
   border: solid 1px var(--blue);
   border-top: none;
@@ -112,7 +111,7 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options) {
   left: -1px;
   right: -1px;
   background-color: white;
-  color: black;
+  color: var(--font-color);
   border-bottom-left-radius: var(--border-radius-small);
   border-bottom-right-radius: var(--border-radius-small);
 }
@@ -127,6 +126,9 @@ lens-search-bar-multiple::part(autocomplete-category-category-name) {
 
   lens-search-bar::part(lens-searchbar-autocomplete-options-item),
 lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item) {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
   cursor: pointer;
   padding: var(--gap-xs) var(--gap-m);
 }
@@ -134,16 +136,17 @@ lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item) {
 lens-search-bar::part(lens-searchbar-autocomplete-options-item-focused),
 lens-search-bar-multiple::part(lens-searchbar-autocomplete-options-item-focused) {
   color: var(--white);
-  background-color: var(--light-blue);
+  background-color: var(--blue);
 }
 
 lens-search-bar::part(autocomplete-options-item-description),
 lens-search-bar-multiple::part(autocomplete-options-item-description) {
+  /* border: solid 1px var(--light-gray); */
+  display: flex;
+  align-items: center;
   color: var(--blue);
   font-size: var(--font-size-s);
-  padding-top: var(--gap-xs);
   padding-right: var(--gap-m);
-  /* padding-left: var(--gap-xs); */
 }
 lens-search-bar::part(autocomplete-options-item-description-focused),
 lens-search-bar-multiple::part(autocomplete-options-item-description-focused) {
@@ -177,7 +180,6 @@ lens-search-bar-multiple::part(query-delete-button) {
   padding: 0;
   border-radius: 50%;
   box-sizing: content-box;
-  border: solid var(--blue);
   height: calc(var(--font-size-xs) + 6px);
   width: calc(var(--font-size-xs) + 6px);
 }
diff --git a/vite.config.ts b/vite.config.ts
index 4edc3b1..b8fd437 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -112,7 +112,7 @@ function concatenateDeclarationFiles(folderPath: string): void {
  * this removes the @samply folder and moves the files to the root of the dist folder
  * @param path the path where the files are located
  */
-async function restructureDirectory(path: string): void {
+function restructureDirectory(path: string): void {
     moveFile(`${path}lens.js`, "./dist/lens.js");
     moveFile(`${path}lens.min.js`, "./dist/lens.min.js");
     moveFile(`${path}lens.umd.js`, "./dist/lens.umd.js");