diff --git a/lib/views/home/studio/studio.dart b/lib/views/home/studio/studio.dart
index 5f5f4ca..08c8e37 100644
--- a/lib/views/home/studio/studio.dart
+++ b/lib/views/home/studio/studio.dart
@@ -1,26 +1,130 @@
-import 'package:didvan/config/theme_data.dart';
-import 'package:didvan/constants/assets.dart';
+import 'package:didvan/constants/app_icons.dart';
+import 'package:didvan/models/view/action_sheet_data.dart';
+import 'package:didvan/utils/action_sheet.dart';
+import 'package:didvan/views/home/studio/studio_state.dart';
+import 'package:didvan/views/home/studio/widgets/slider.dart';
+import 'package:didvan/views/home/studio/widgets/tab_bar.dart';
 import 'package:didvan/views/home/widgets/logo_app_bar.dart';
-import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
+import 'package:didvan/views/home/widgets/search_field.dart';
+import 'package:didvan/views/widgets/didvan/divider.dart';
+import 'package:didvan/views/widgets/didvan/icon_button.dart';
+import 'package:didvan/views/widgets/didvan/radial_button.dart';
+import 'package:didvan/views/widgets/item_title.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
-class Studio extends StatelessWidget {
+class Studio extends StatefulWidget {
   const Studio({Key? key}) : super(key: key);
 
+  @override
+  State<Studio> createState() => _StudioState();
+}
+
+class _StudioState extends State<Studio> {
+  final FocusNode _focusNode = FocusNode();
+
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        const LogoAppBar(),
-        Expanded(
-          child: EmptyState(
-            asset: Assets.emptyStudio,
-            title: 'استودیو آینده',
-            subtitle: 'به زودی...',
-            titleColor: Theme.of(context).colorScheme.title,
+    return CustomScrollView(
+      slivers: [
+        SliverToBoxAdapter(
+          child: Row(
+            children: [
+              const Expanded(child: LogoAppBar(type: 'studio')),
+              Padding(
+                padding:
+                    EdgeInsets.only(top: MediaQuery.of(context).padding.top),
+                child: DidvanIconButton(
+                  icon: DidvanIcons.bookmark_regular,
+                  onPressed: () {},
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SliverToBoxAdapter(
+          child: StudioTabBar(),
+        ),
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: SearchField(
+              title: 'جستجو در استودیو',
+              onChanged: (value) {},
+              focusNode: _focusNode,
+            ),
+          ),
+        ),
+        const SliverToBoxAdapter(
+          child: StudioSlider(),
+        ),
+        const SliverPadding(
+          padding: EdgeInsets.symmetric(horizontal: 16),
+          sliver: SliverToBoxAdapter(
+            child: DidvanDivider(
+              verticalPadding: 0,
+            ),
+          ),
+        ),
+        SliverPadding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          sliver: SliverToBoxAdapter(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const ItemTitle(title: 'تازه‌ترین‌ها'),
+                DidvanIconButton(
+                  gestureSize: 36,
+                  icon: DidvanIcons.sort_regular,
+                  onPressed: _showSortDialog,
+                ),
+              ],
+            ),
           ),
         ),
       ],
     );
   }
+
+  void _showSortDialog() {
+    final state = context.read<StudioState>();
+    ActionSheetUtils.showBottomSheet(
+      data: ActionSheetData(
+        content: StatefulBuilder(
+          builder: (context, setState) => Column(
+            children: [
+              DidvanRadialButton(
+                title: 'جدیدترین‌ها',
+                onSelected: () => setState(
+                  () => state.selectedSortTypeIndex = 0,
+                ),
+                value: state.selectedSortTypeIndex == 0,
+              ),
+              const SizedBox(height: 24),
+              DidvanRadialButton(
+                title: 'پربازدیدترین‌ها',
+                onSelected: () => setState(
+                  () => state.selectedSortTypeIndex = 1,
+                ),
+                value: state.selectedSortTypeIndex == 1,
+              ),
+              const SizedBox(height: 24),
+              DidvanRadialButton(
+                title: 'پربحث‌ترین‌ها',
+                onSelected: () => setState(
+                  () => state.selectedSortTypeIndex = 2,
+                ),
+                value: state.selectedSortTypeIndex == 2,
+              ),
+            ],
+          ),
+        ),
+        title: 'مرتب‌‌سازی',
+        titleIcon: DidvanIcons.sort_regular,
+        hasDismissButton: false,
+        confrimTitle: 'مرتب سازی',
+        onConfirmed: () {},
+      ),
+    );
+  }
 }