diff --git a/app/Filament/Resources/StickerDetailResource.php b/app/Filament/Resources/StickerDetailResource.php
index 51f8715..e7e71d9 100644
--- a/app/Filament/Resources/StickerDetailResource.php
+++ b/app/Filament/Resources/StickerDetailResource.php
@@ -36,13 +36,36 @@ class StickerDetailResource extends Resource
             ->schema([
                 Forms\Components\Select::make('sticker_structure_detail_id')
                     ->label('Sticker ID')
+                    ->reactive()
                     ->relationship('stickerStructureDetail', 'sticker_id')
                      ->options(function (callable $get) {
                         return StickerStructureDetail::pluck('sticker_id', 'id');
                     })
-                    ->required(),
+                    ->required()
+                    ->afterStateUpdated(function (callable $get, callable $set) {
+                        // if ($get('element_id')) {
+                        //     return;
+                        // }
+
+                        $structureId = $get('sticker_structure_detail_id');
+
+                        if (!$structureId) {
+                            $set('element_id', null);
+                            return;
+                        }
+
+                        $maxId = StickerDetail::where('sticker_structure_detail_id', $structureId)
+                            ->max('element_id');
+
+                        $nextId = $maxId ? ((int) $maxId + 1) : 1;
+
+                        $formattedId = str_pad($nextId, 3, '0', STR_PAD_LEFT);
+
+                        $set('element_id', $formattedId);
+                    }),
                 Forms\Components\Select::make('design_element_type')
                     ->label('Design Element Type')
+                    ->reactive()
                     ->options([
                         'Text' => 'Text',
                         'Shape' => 'Shape',
@@ -50,7 +73,9 @@ class StickerDetailResource extends Resource
                         'QR' => 'QR',
                     ]),
                 Forms\Components\TextInput::make('element_id')
-                    ->label('Element ID'),
+                    ->label('Element ID')
+                    ->readOnly()
+                    ->reactive(),
                 Forms\Components\Select::make('element_type')
                     ->label('Element Type')
                     ->options([
@@ -80,19 +105,60 @@ class StickerDetailResource extends Resource
                         ->toArray()
                     ),
                 Forms\Components\TextInput::make('string_value')
-                    ->label('String Value'),
+                    ->label('String Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
                 Forms\Components\TextInput::make('string_font')
-                    ->label('String Font'),
+                    ->label('String Font')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
                 Forms\Components\TextInput::make('string_size')
-                    ->label('String Size'),
-                Forms\Components\TextInput::make('element_colour')
-                    ->label('Element Colour'),
-                Forms\Components\TextInput::make('string_align')
-                    ->label('String Align'),
+                    ->label('String Size')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
+                Forms\Components\Select::make('element_colour')
+                    ->label('Element Colour')
+                    ->options([
+                        '' => 'Default (Black)',
+                        '#000000' => 'Black',
+                        '#FFFFFF' => 'White',
+                        '#FF0000' => 'Red',
+                        '#00FF00' => 'Lime',
+                        '#0000FF' => 'Blue',
+                        '#FFFF00' => 'Yellow',
+                        '#00FFFF' => 'Cyan',
+                        '#FF00FF' => 'Magenta',
+                        '#800000' => 'Maroon',
+                        '#808000' => 'Olive',
+                        '#008000' => 'Green',
+                        '#800080' => 'Purple',
+                        '#008080' => 'Teal',
+                        '#808080' => 'Gray',
+                        '#C0C0C0' => 'Silver',
+                        '#FFA500' => 'Orange',
+                        '#FFC0CB' => 'Pink',
+                        '#A52A2A' => 'Brown',
+                        '#87CEEB' => 'Sky Blue',
+                    ])
+                    ->nullable()
+                    ->reactive(),
+                Forms\Components\Select::make('string_align')
+                    ->label('String Align')
+                    ->options([
+                        'Left' => 'Left',
+                        'Right' => 'Right',
+                        'Center' => 'Center',
+                    ])
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
                 Forms\Components\TextInput::make('string_x_value')
-                    ->label('String X Value'),
+                    ->label('String X Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
                 Forms\Components\TextInput::make('string_y_value')
-                    ->label('String Y Value'),
+                    ->label('String Y Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Text'),
                 Forms\Components\Select::make('shape_name')
                     ->label('Shape Name')
                     ->reactive()
@@ -100,48 +166,81 @@ class StickerDetailResource extends Resource
                         'Line' => 'Line',
                         'Rectangle' => 'Rectangle',
                         'CurvedRectangle' => 'CurvedRectangle',
-                    ]),
+                    ])
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\TextInput::make('shape_pen_size')
-                    ->label('Shape Pen Size'),
+                    ->label('Shape Pen Size')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\TextInput::make('curve_radius')
                     ->label('Curve Radius')
                     ->reactive()
                     ->visible(fn ($get) => $get('shape_name') == 'CurvedRectangle'),
                 Forms\Components\TextInput::make('shape_x1_value')
-                    ->label('Shape X1 Value'),
+                    ->label('Shape X1 Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\TextInput::make('shape_y1_value')
-                    ->label('Shape Y1 Value'),
+                    ->label('Shape Y1 Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\TextInput::make('shape_x2_value')
-                    ->label('Shape X2 Value'),
+                    ->label('Shape X2 Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\TextInput::make('shape_y2_value')
-                    ->label('Shape Y2 Value'),
+                    ->label('Shape Y2 Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Shape'),
                 Forms\Components\FileUpload::make('image_path')
                     ->label('Image')
                     ->image()
                     ->directory('sticker-images')
                     ->visibility('public')
                     ->preserveFilenames(false)
-                    ->required(false),
+                    ->required(false)
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('image_type')
-                    ->label('Image Type'),
+                    ->label('Image Type')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('image_x')
-                    ->label('Image X'),
+                    ->label('Image X')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('image_y')
-                    ->label('Image Y'),
+                    ->label('Image Y')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('image_width')
-                    ->label('Image Width'),
+                    ->label('Image Width')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('image_height')
-                    ->label('Image Height'),
+                    ->label('Image Height')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'Image'),
                 Forms\Components\TextInput::make('qr_value')
-                    ->label('QR Value'),
+                    ->label('QR Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'QR'),
                 Forms\Components\TextInput::make('qr_align')
-                    ->label('QR Align'),
+                    ->label('QR Align')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'QR'),
                 Forms\Components\TextInput::make('qr_size')
-                    ->label('QR Size'),
+                    ->label('QR Size')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'QR'),
                 Forms\Components\TextInput::make('qr_x_value')
-                    ->label('QR X Value'),
+                    ->label('QR X Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'QR'),
                 Forms\Components\TextInput::make('qr_y_value')
-                    ->label('QR Y Value'),
+                    ->label('QR Y Value')
+                    ->reactive()
+                    ->visible(fn ($get) => $get('design_element_type') == 'QR'),
                 Forms\Components\Hidden::make('created_by')
                     ->label('created_by')
                     ->default(Filament::auth()->user()?->name),
@@ -189,9 +288,9 @@ class StickerDetailResource extends Resource
                 Tables\Columns\TextColumn::make('string_size')
                     ->label('String Size')
                     ->alignCenter(),
-                Tables\Columns\TextColumn::make('element_colour')
-                    ->label('Element Colour')
-                    ->alignCenter(),
+                // Tables\Columns\TextColumn::make('element_colour')
+                //     ->label('Element Colour')
+                //     ->alignCenter(),
                 Tables\Columns\TextColumn::make('string_align')
                     ->label('String Align')
                     ->alignCenter(),