diff --git a/.gitignore b/.gitignore
index 4691b9f85..4eb3774c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,6 +45,7 @@ Thumbs.db
 *.pem
 
 .env
+.env.local
 .nx/*
 .next
 
diff --git a/packages/sdks/vue-sdk/README.md b/packages/sdks/vue-sdk/README.md
index c9551b930..7c3af8a6f 100644
--- a/packages/sdks/vue-sdk/README.md
+++ b/packages/sdks/vue-sdk/README.md
@@ -53,6 +53,7 @@ app.mount('#app');
   <!-- errorTransformer="errorTransformer" errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. -->
   <!-- form="{ email: 'test@domain.com' }" form is an object the initial form context that is used in screens inputs in the flow execution. Used to inject predifined input values on flow start such as custom inputs, custom attrbiutes and other inputs. Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.". NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
   <!-- client="{ version: '1.2.3' }" client is an object the initial client context in the flow execution. Keys passed can be accessed in flows actions and conditions prefixed with "client.". NOTE: client is not required. If not provided, context key will be empty. -->
+  <!-- styleId="my-awesome-style" Use a custom style name or keep empty to use the default style. -->
 </template>
 
 <script setup>
@@ -99,7 +100,7 @@ This can be helpful to implement application-specific logic. Examples:
 		<div v-if="isSessionLoading || isUserLoading">Loading ...</div>
 		<div v-else-if="isAuthenticated">
 			<div>Hello {{ user?.name }}</div>
-			<button @click="logout">Logout</button>
+			<button @click="logout()">Logout</button>
 		</div>
 		<div v-else>You are not logged in</div>
 	</div>
@@ -108,8 +109,8 @@ This can be helpful to implement application-specific logic. Examples:
 <script setup>
 import { useDescope, useSession, useUser } from '@descope/vue-sdk';
 
-const { isAuthenticated, isSessionLoading } = useSession();
-const { user, isUserLoading } = useUser();
+const { isAuthenticated, isLoading: isSessionLoading } = useSession();
+const { user, isLoading: isUserLoading } = useUser();
 const { logout } = useDescope();
 </script>
 ```
diff --git a/packages/sdks/vue-sdk/src/Descope.vue b/packages/sdks/vue-sdk/src/Descope.vue
index 6b4fa4bc4..508992dff 100644
--- a/packages/sdks/vue-sdk/src/Descope.vue
+++ b/packages/sdks/vue-sdk/src/Descope.vue
@@ -13,6 +13,7 @@
       :telemetryKey.attr="telemetryKey"
       :redirect-url="redirectUrl"
       :auto-focus="autoFocus"
+      :style-id="styleId"
       :validate-on-blur="validateOnBlur"
       :store-last-authenticated-user="storeLastAuthenticatedUser"
       :errorTransformer.prop="errorTransformer"
@@ -93,6 +94,9 @@ const props = defineProps({
   client: {
     type: Object,
   },
+  styleId: {
+    type: String,
+  },
 });
 // const emit = defineEmits(['success', 'error', 'ready']);
 const emit = defineEmits<{
diff --git a/packages/sdks/vue-sdk/tests/Descope.test.ts b/packages/sdks/vue-sdk/tests/Descope.test.ts
index 5cc5e20dc..153824011 100644
--- a/packages/sdks/vue-sdk/tests/Descope.test.ts
+++ b/packages/sdks/vue-sdk/tests/Descope.test.ts
@@ -36,6 +36,7 @@ describe('Descope.vue', () => {
         errorTransformer,
         form: { test: 'a' },
         client: { test: 'b' },
+        styleId: 'test-style-id',
       },
     });
 
@@ -54,6 +55,7 @@ describe('Descope.vue', () => {
     expect(wrapper.vm.errorTransformer).toBe(errorTransformer);
     expect(descopeWc.attributes('form')).toBe('{"test":"a"}');
     expect(wrapper.vm.client).toStrictEqual({ test: 'b' });
+    expect(descopeWc.attributes('style-id')).toBe('test-style-id');
   });
 
   it('renders a DescopeWc component with empty props', () => {
diff --git a/packages/sdks/web-component/src/lib/descope-wc/index.ts b/packages/sdks/web-component/src/lib/descope-wc/index.ts
index d69931302..e20dc3905 100644
--- a/packages/sdks/web-component/src/lib/descope-wc/index.ts
+++ b/packages/sdks/web-component/src/lib/descope-wc/index.ts
@@ -8,4 +8,5 @@ if (!customElements.get('descope-wc')) {
 }
 export default DescopeWc;
 
-export type { AutoFocusOptions, ThemeOptions, ILogger } from '../types';
+export type ILogger = Partial<DescopeWc['logger']>;
+export type { AutoFocusOptions, ThemeOptions } from '../types';
diff --git a/packages/sdks/web-component/src/lib/types.ts b/packages/sdks/web-component/src/lib/types.ts
index dd4b3d9b9..23baa4a8b 100644
--- a/packages/sdks/web-component/src/lib/types.ts
+++ b/packages/sdks/web-component/src/lib/types.ts
@@ -157,13 +157,6 @@ export interface Context {
   abTestingKey?: number;
 }
 
-export interface ILogger {
-  info(title: string, description: string, state: any): void;
-  warn(title: string, description?: string): void;
-  debug(title: string, description?: string): void;
-  error(title: string, description?: string, ...optionalParams: any[]): void;
-}
-
 export type DescopeUI = Record<string, () => Promise<void>> & {
   componentsThemeManager: Record<string, any>;
 };