diff --git a/.gitignore b/.gitignore
index d564513..100abad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@
 __pycache__/
 venv/
 */.DS_Store
-.idea
\ No newline at end of file
+.idea
+.DS_Store
diff --git a/admin_panel/preview.webp b/admin_panel/preview.webp
new file mode 100644
index 0000000..232a76d
Binary files /dev/null and b/admin_panel/preview.webp differ
diff --git a/ai_image_gen/preview.webp b/ai_image_gen/preview.webp
new file mode 100644
index 0000000..c901525
Binary files /dev/null and b/ai_image_gen/preview.webp differ
diff --git a/api_admin_panel/api_admin_panel/components/output.py b/api_admin_panel/api_admin_panel/components/output.py
index 413c437..d399c5d 100644
--- a/api_admin_panel/api_admin_panel/components/output.py
+++ b/api_admin_panel/api_admin_panel/components/output.py
@@ -1,5 +1,4 @@
 import reflex as rx
-import reflex_chakra as rc
 
 from api_admin_panel.components.drawer import render_drawer
 from api_admin_panel.states.queries import QueryAPI
@@ -38,12 +37,11 @@ def create_pagination():
                 width="100px",
                 weight="bold",
             ),
-            rc.button_group(
+            rx.hstack(
                 rx.icon(
                     tag="chevron-left", on_click=QueryAPI.previous, cursor="pointer"
                 ),
                 rx.icon(tag="chevron-right", on_click=QueryAPI.next, cursor="pointer"),
-                is_attached=True,
             ),
             align_items="center",
             spacing="1",
diff --git a/api_admin_panel/api_admin_panel/components/query.py b/api_admin_panel/api_admin_panel/components/query.py
index 195ba13..92a872e 100644
--- a/api_admin_panel/api_admin_panel/components/query.py
+++ b/api_admin_panel/api_admin_panel/components/query.py
@@ -1,5 +1,4 @@
 import reflex as rx
-import reflex_chakra as rc
 
 from api_admin_panel.states.base import BaseState
 from api_admin_panel.states.queries import QueryAPI, QueryState
@@ -9,7 +8,6 @@
 def item_title(title: str):
     return rx.hstack(
         rx.text(title, font_size="var(--chakra-fontSizes-sm)", **text),
-        rc.accordion_icon(),
         width="100%",
         justify_content="space-between",
     )
@@ -60,16 +58,16 @@ def create_entry(title: str, function: callable):
 def form_item(
     title: str, state: list[dict[str, str]], func: callable, event_trigger: callable
 ):
-    return rc.accordion(
-        rc.accordion_item(
-            rc.accordion_button(item_title(title)),
-            rc.accordion_panel(
+    return rx.accordion.root(
+        rx.accordion.item(
+            rx.accordion.header(rx.accordion.trigger(item_title(title))),
+            rx.accordion.content(
                 item_add_event(event_trigger),
                 width="100%",
                 display="flex",
                 justify_content="end",
             ),
-            rc.accordion_panel(
+            rx.accordion.content(
                 rx.vstack(rx.foreach(state, func), width="100%", spacing="1")
             ),
         ),
@@ -82,10 +80,10 @@ def form_item(
 def form_body_param_item(
     state: list[dict[str, str]], func: callable, event_trigger: callable
 ):
-    return rc.accordion(
-        rc.accordion_item(
-            rc.accordion_button(item_title("Body")),
-            rc.accordion_panel(
+    return rx.accordion.root(
+        rx.accordion.item(
+            rx.accordion.header(rx.accordion.trigger(item_title("Body"))),
+            rx.accordion.content(
                 rx.match(
                     QueryState.current_req,
                     (
@@ -125,10 +123,10 @@ def form_body_param_item(
 
 
 def form_request_item():
-    return rc.accordion(
-        rc.accordion_item(
-            rc.accordion_button(item_title("Requests")),
-            rc.accordion_panel(
+    return rx.accordion.root(
+        rx.accordion.item(
+            rx.accordion.header(rx.accordion.trigger(item_title("Requests"))),
+            rx.accordion.content(
                 rx.hstack(
                     rx.select(
                         QueryState.req_methods,
diff --git a/api_admin_panel/preview.webp b/api_admin_panel/preview.webp
new file mode 100644
index 0000000..02b6b4a
Binary files /dev/null and b/api_admin_panel/preview.webp differ
diff --git a/chat_app/preview.png b/chat_app/preview.webp
similarity index 100%
rename from chat_app/preview.png
rename to chat_app/preview.webp
diff --git a/ci_template/preview.webp b/ci_template/preview.webp
new file mode 100644
index 0000000..2f52e86
Binary files /dev/null and b/ci_template/preview.webp differ
diff --git a/customer_data_app/preview.webp b/customer_data_app/preview.webp
new file mode 100644
index 0000000..002ae9b
Binary files /dev/null and b/customer_data_app/preview.webp differ
diff --git a/futuristic_dashboard/preview.webp b/futuristic_dashboard/preview.webp
new file mode 100644
index 0000000..1b0427b
Binary files /dev/null and b/futuristic_dashboard/preview.webp differ
diff --git a/stock_graph_app/preview.png b/stock_graph_app/preview.webp
similarity index 100%
rename from stock_graph_app/preview.png
rename to stock_graph_app/preview.webp
diff --git a/text_annotation_app/preview.png b/text_annotation_app/preview.webp
similarity index 100%
rename from text_annotation_app/preview.png
rename to text_annotation_app/preview.webp