diff --git a/src/components/BoemlyAccordion/BoemlyAccordion.tsx b/src/components/BoemlyAccordion/BoemlyAccordion.tsx
index 66ef56d5..2703e16f 100644
--- a/src/components/BoemlyAccordion/BoemlyAccordion.tsx
+++ b/src/components/BoemlyAccordion/BoemlyAccordion.tsx
@@ -18,7 +18,7 @@ export const BoemlyAccordion: React.FC<BoemlyAccordionProps> = ({
   defaultIndex,
 }: BoemlyAccordionProps) => {
   const textColor = variant === 'black' ? 'gray.500' : 'white';
-  const initialExpandedValues = defaultIndex.map((index) => rows[index].id.toString());
+  const initialExpandedValues = defaultIndex?.map((index) => rows[index].id.toString());
 
   return (
     <Accordion.Root defaultValue={initialExpandedValues} collapsible visual={variant}>
diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.tsx
index aa9e054f..d1d35aae 100644
--- a/src/components/BoemlyFormControl/BoemlyFormControl.tsx
+++ b/src/components/BoemlyFormControl/BoemlyFormControl.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import {
   Checkbox,
diff --git a/src/components/BoemlyTabs/BoemlyTabs.tsx b/src/components/BoemlyTabs/BoemlyTabs.tsx
index 6d0787a7..03b2bf7f 100644
--- a/src/components/BoemlyTabs/BoemlyTabs.tsx
+++ b/src/components/BoemlyTabs/BoemlyTabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useMemo, useState } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import LineTabButton from './LineTabButton';
diff --git a/src/components/BoemlyTag/BoemlyTag.tsx b/src/components/BoemlyTag/BoemlyTag.tsx
index c418836b..8b1901ac 100644
--- a/src/components/BoemlyTag/BoemlyTag.tsx
+++ b/src/components/BoemlyTag/BoemlyTag.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import { Tag, TagRootProps } from '@chakra-ui/react';
 
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 01287e13..fb106d67 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   CloseButton,
   Flex,
diff --git a/src/components/Expandable/Expandable.tsx b/src/components/Expandable/Expandable.tsx
index 1ec32c04..664cce59 100644
--- a/src/components/Expandable/Expandable.tsx
+++ b/src/components/Expandable/Expandable.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Heading, IconButton, Flex, Text, Spinner } from '@chakra-ui/react';
 import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
diff --git a/src/components/ForceClientSideRender/ForceClientSideRender.tsx b/src/components/ForceClientSideRender/ForceClientSideRender.tsx
index 634d8e7d..effceb4c 100644
--- a/src/components/ForceClientSideRender/ForceClientSideRender.tsx
+++ b/src/components/ForceClientSideRender/ForceClientSideRender.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 interface ForceClientSideRenderProps {
diff --git a/src/components/ImageRadioItem/ImageRadioItem.tsx b/src/components/ImageRadioItem/ImageRadioItem.tsx
index d5e7a0b6..1c6b8dc2 100644
--- a/src/components/ImageRadioItem/ImageRadioItem.tsx
+++ b/src/components/ImageRadioItem/ImageRadioItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { chakra, useToken } from '@chakra-ui/react';
 import { motion, MotionConfig, useAnimation } from 'framer-motion';
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index d2162e69..caac9869 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box } from '@chakra-ui/react';
 import { useWindowScroll } from '@reactuses/core';
 import React, { ReactNode, useEffect, useState } from 'react';
diff --git a/src/components/MobileMenuBurger/MobileMenuBurger.tsx b/src/components/MobileMenuBurger/MobileMenuBurger.tsx
index e656a107..53a317c2 100644
--- a/src/components/MobileMenuBurger/MobileMenuBurger.tsx
+++ b/src/components/MobileMenuBurger/MobileMenuBurger.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Flex, IconButton } from '@chakra-ui/react';
 import { useAnimation } from 'framer-motion';
 import React, { useEffect } from 'react';
diff --git a/src/components/OverflownText/OverflownText.tsx b/src/components/OverflownText/OverflownText.tsx
index dec99f60..399d83fe 100644
--- a/src/components/OverflownText/OverflownText.tsx
+++ b/src/components/OverflownText/OverflownText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, useState, useEffect } from 'react';
 import type { TextProps } from '@chakra-ui/react';
 import { Text } from '@chakra-ui/react';
diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
index e0d418b1..d0eed328 100644
--- a/src/components/RichText/RichText.tsx
+++ b/src/components/RichText/RichText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useRef } from 'react';
 import { Box, Heading, HeadingProps, Link, Text, TextProps } from '@chakra-ui/react';
 import { ImageContainer } from './styles';
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 6d07dac4..a2ceb016 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -102,3 +102,25 @@ SearchableMultiSelect.args = {
     { label: 'Option 4', value: 'option_4' },
   ],
 };
+
+export const NotFullWidth = Template.bind({});
+NotFullWidth.args = {
+  placeholder: 'Select',
+  isFullWidth: false,
+  options: [
+    { label: 'Short', value: 'short' },
+    {
+      label: 'This is a much longer option label that extends beyond the trigger',
+      value: 'long_1',
+    },
+    {
+      label: 'Another very long option with even more text to demonstrate auto width',
+      value: 'long_2',
+    },
+    { label: 'Medium length option', value: 'medium' },
+    {
+      label: 'Extra long option label with a lot of descriptive text for demonstration purposes',
+      value: 'extra_long',
+    },
+  ],
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index cd9933df..edf59d4c 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
   Box,
@@ -81,7 +83,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
 
   // Use controlled value if provided, otherwise use internal state
   const isControlled = value !== undefined;
-  const selectedOptions = isControlled ? value : internalSelectedOptions;
+  const selectedOptions = (isControlled ? value : internalSelectedOptions) ?? [];
 
   const filteredOptions = useMemo(() => {
     if (isSearchable && searchTerm) {
@@ -209,7 +211,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             onClose();
           }
         }}
-        positioning={{ placement: 'bottom-start', flip: false, sameWidth: true }}
+        positioning={{ placement: 'bottom-start', flip: false, sameWidth: false }}
       >
         {/* Trigger */}
         <Popover.Trigger asChild>
@@ -284,7 +286,8 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             maxHeight={dynamicMaxHeight}
             overflowY="auto"
             zIndex="popover"
-            width={dropdownWidth || menuWidth}
+            width={dropdownWidth || 'auto'}
+            minWidth={menuWidth}
           >
             {isSearchable && (
               <InputGroup mb="4" startElement={<MagnifyingGlassIcon color="gray.500" />}>
@@ -356,7 +359,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
                         bg: disabled ? undefined : isSelected ? 'primary.200' : 'gray.100',
                       }}
                     >
-                      <Flex justify="space-between" align="center" width="100%">
+                      <Flex justify="space-between" align="center" width="100%" gap="3">
                         <Text
                           fontSize={selectRecipe.variants?.size[size]?.fontSize}
                           fontWeight={isSelected ? 'bold' : 'normal'}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 1d1a8651..41d625a3 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, FlexProps, Slider, Text, useMediaQuery } from '@chakra-ui/react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { BoemlyFormControl } from '../BoemlyFormControl';
diff --git a/src/components/SplitScreen/SplitScreen.tsx b/src/components/SplitScreen/SplitScreen.tsx
index cafe11e8..cb450029 100644
--- a/src/components/SplitScreen/SplitScreen.tsx
+++ b/src/components/SplitScreen/SplitScreen.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, useMediaQuery } from '@chakra-ui/react';
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { useAnimation } from 'framer-motion';
diff --git a/src/components/ui/provider.tsx b/src/components/ui/provider.tsx
index 6cc8e6b1..78a324a6 100644
--- a/src/components/ui/provider.tsx
+++ b/src/components/ui/provider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { ChakraProvider, SystemContext } from '@chakra-ui/react';
 import * as React from 'react';
 import defaultTheme from '../../theme';
diff --git a/src/constants/colorPalettes.ts b/src/constants/colorPalettes.ts
index e548e74c..86ec9e19 100644
--- a/src/constants/colorPalettes.ts
+++ b/src/constants/colorPalettes.ts
@@ -1,4 +1,4 @@
-import type { ButtonColorPalettes } from '../types/ButtonColorScheme';
+import type { ButtonColorPalettes } from '../types/ButtonColorPalette';
 
 export const COLOR_PALETTES: ButtonColorPalettes[] = [
   'primary',
diff --git a/src/types/ButtonColorScheme.ts b/src/types/ButtonColorPalette.ts
similarity index 100%
rename from src/types/ButtonColorScheme.ts
rename to src/types/ButtonColorPalette.ts