diff --git a/frontend/src/assets/components/arrow-down.png b/frontend/src/assets/components/arrow-down.png
new file mode 100644
index 0000000..5fb79e2
Binary files /dev/null and b/frontend/src/assets/components/arrow-down.png differ
diff --git a/frontend/src/assets/components/arrow-left.png b/frontend/src/assets/components/arrow-left.png
new file mode 100644
index 0000000..36006be
Binary files /dev/null and b/frontend/src/assets/components/arrow-left.png differ
diff --git a/frontend/src/assets/components/arrow-right.png b/frontend/src/assets/components/arrow-right.png
new file mode 100644
index 0000000..dea156f
Binary files /dev/null and b/frontend/src/assets/components/arrow-right.png differ
diff --git a/frontend/src/assets/components/arrow-up.png b/frontend/src/assets/components/arrow-up.png
new file mode 100644
index 0000000..d5425e1
Binary files /dev/null and b/frontend/src/assets/components/arrow-up.png differ
diff --git a/frontend/src/assets/components/bg-toggle.e1dabcf3.svg b/frontend/src/assets/components/bg-toggle.e1dabcf3.svg
new file mode 100644
index 0000000..072df1f
--- /dev/null
+++ b/frontend/src/assets/components/bg-toggle.e1dabcf3.svg
@@ -0,0 +1 @@
+<svg width="16" height="88" xmlns="http://www.w3.org/2000/svg"><path d="M16 0a22.397 22.397 0 0 1-8.71 12.793l-2.265 1.618A12 12 0 0 0 0 24.175v39.65a12 12 0 0 0 5.025 9.764l2.265 1.618c4.2 3 7.23 7.356 8.588 12.325L16 88V0Z" fill="#E5EDF3" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/components/fgx.svg b/frontend/src/assets/components/fgx.svg
new file mode 100644
index 0000000..f634805
--- /dev/null
+++ b/frontend/src/assets/components/fgx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="408.70703125" height="4.70709228515625" viewBox="0 0 408.70703125 4.70709228515625"><g><g><path d="M4.707065625,0.707099142578125L0.707068625,4.707096142578125L-0.00003737500000000615,3.999996142578125L3.999965625,-0.000006857421875006153L4.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M8.707065625,0.707099142578125L4.707068625,4.707096142578125L3.999962625,3.999996142578125L7.999965625,-0.000006857421875006153L8.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M12.707065625,0.707099142578125L8.707068625,4.707096142578125L7.999962625,3.999996142578125L11.999965625,-0.000006857421875006153L12.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M16.707065625,0.707099142578125L12.707068625,4.707096142578125L11.999962625,3.999996142578125L15.999965625,-0.000006857421875006153L16.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M20.707065625,0.707099142578125L16.707068625,4.707096142578125L15.999962625,3.999996142578125L19.999965625,-0.000006857421875006153L20.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M24.707065625,0.707099142578125L20.707068625,4.707096142578125L19.999962625,3.999996142578125L23.999965625,-0.000006857421875006153L24.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M28.707065625,0.707099142578125L24.707068625,4.707096142578125L23.999962625,3.999996142578125L27.999965625,-0.000006857421875006153L28.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M32.707065625,0.707099142578125L28.707068625,4.707096142578125L27.999962625,3.999996142578125L31.999965625,-0.000006857421875006153L32.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M36.707065625,0.707099142578125L32.707068625,4.707096142578125L31.999962625,3.999996142578125L35.999965625,-0.000006857421875006153L36.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M40.707065625,0.707099142578125L36.707068625,4.707096142578125L35.999962625,3.999996142578125L39.999965625,-0.000006857421875006153L40.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M44.707065625,0.707099142578125L40.707068625,4.707096142578125L39.999962625,3.999996142578125L43.999965625,-0.000006857421875006153L44.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M48.707065625,0.707099142578125L44.707068625,4.707096142578125L43.999962625,3.999996142578125L47.999965625,-0.000006857421875006153L48.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M52.707065625,0.707099142578125L48.707068625,4.707096142578125L47.999962625,3.999996142578125L51.999965625,-0.000006857421875006153L52.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M56.707065625,0.707099142578125L52.707068625,4.707096142578125L51.999962625,3.999996142578125L55.999965625,-0.000006857421875006153L56.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M60.707065625,0.707099142578125L56.707068625,4.707096142578125L55.999962625,3.999996142578125L59.999965625,-0.000006857421875006153L60.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M64.707065625,0.707099142578125L60.707068625,4.707096142578125L59.999962625,3.999996142578125L63.999965625,-0.000006857421875006153L64.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M68.707065625,0.707099142578125L64.707068625,4.707096142578125L63.999962625,3.999996142578125L67.999965625,-0.000006857421875006153L68.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M72.707065625,0.707099142578125L68.707068625,4.707096142578125L67.999962625,3.999996142578125L71.999965625,-0.000006857421875006153L72.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M76.707065625,0.707099142578125L72.707068625,4.707096142578125L71.999962625,3.999996142578125L75.999965625,-0.000006857421875006153L76.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M80.707065625,0.707099142578125L76.707068625,4.707096142578125L75.999962625,3.999996142578125L79.999965625,-0.000006857421875006153L80.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M84.707065625,0.707099142578125L80.707068625,4.707096142578125L79.999962625,3.999996142578125L83.999965625,-0.000006857421875006153L84.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M88.707065625,0.707099142578125L84.707068625,4.707096142578125L83.999962625,3.999996142578125L87.999965625,-0.000006857421875006153L88.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M92.707065625,0.707099142578125L88.707068625,4.707096142578125L87.999962625,3.999996142578125L91.999965625,-0.000006857421875006153L92.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M96.707065625,0.707099142578125L92.707068625,4.707096142578125L91.999962625,3.999996142578125L95.999965625,-0.000006857421875006153L96.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M100.707065625,0.707099142578125L96.707068625,4.707096142578125L95.999962625,3.999996142578125L99.999965625,-0.000006857421875006153L100.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M104.707065625,0.707099142578125L100.707068625,4.707096142578125L99.999962625,3.999996142578125L103.999965625,-0.000006857421875006153L104.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M108.707065625,0.707099142578125L104.707068625,4.707096142578125L103.999962625,3.999996142578125L107.999965625,-0.000006857421875006153L108.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M112.707065625,0.707099142578125L108.707068625,4.707096142578125L107.999962625,3.999996142578125L111.999965625,-0.000006857421875006153L112.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M116.707065625,0.707099142578125L112.707068625,4.707096142578125L111.999962625,3.999996142578125L115.999965625,-0.000006857421875006153L116.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M120.707065625,0.707099142578125L116.707068625,4.707096142578125L115.999962625,3.999996142578125L119.999965625,-0.000006857421875006153L120.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M124.707065625,0.707099142578125L120.707068625,4.707096142578125L119.999962625,3.999996142578125L123.999965625,-0.000006857421875006153L124.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M128.707065625,0.707099142578125L124.707068625,4.707096142578125L123.999962625,3.999996142578125L127.999965625,-0.000006857421875006153L128.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M132.707065625,0.707099142578125L128.707068625,4.707096142578125L127.999962625,3.999996142578125L131.999965625,-0.000006857421875006153L132.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M136.707065625,0.707099142578125L132.707068625,4.707096142578125L131.999962625,3.999996142578125L135.999965625,-0.000006857421875006153L136.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M140.707065625,0.707099142578125L136.707068625,4.707096142578125L135.999962625,3.999996142578125L139.999965625,-0.000006857421875006153L140.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M144.707065625,0.707099142578125L140.707068625,4.707096142578125L139.999962625,3.999996142578125L143.999965625,-0.000006857421875006153L144.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M148.707065625,0.707099142578125L144.707068625,4.707096142578125L143.999962625,3.999996142578125L147.999965625,-0.000006857421875006153L148.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M152.707065625,0.707099142578125L148.707068625,4.707096142578125L147.999962625,3.999996142578125L151.999965625,-0.000006857421875006153L152.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M156.707065625,0.707099142578125L152.707068625,4.707096142578125L151.999962625,3.999996142578125L155.999965625,-0.000006857421875006153L156.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M160.707065625,0.707099142578125L156.707068625,4.707096142578125L155.999962625,3.999996142578125L159.999965625,-0.000006857421875006153L160.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M164.707065625,0.707099142578125L160.707068625,4.707096142578125L159.999962625,3.999996142578125L163.999965625,-0.000006857421875006153L164.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M168.707065625,0.707099142578125L164.707068625,4.707096142578125L163.999962625,3.999996142578125L167.999965625,-0.000006857421875006153L168.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M172.707065625,0.707099142578125L168.707068625,4.707096142578125L167.999962625,3.999996142578125L171.999965625,-0.000006857421875006153L172.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M176.707065625,0.707099142578125L172.707068625,4.707096142578125L171.999962625,3.999996142578125L175.999965625,-0.000006857421875006153L176.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M180.707065625,0.707099142578125L176.707068625,4.707096142578125L175.999962625,3.999996142578125L179.999965625,-0.000006857421875006153L180.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M184.707065625,0.707099142578125L180.707068625,4.707096142578125L179.999962625,3.999996142578125L183.999965625,-0.000006857421875006153L184.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M188.707065625,0.707099142578125L184.707068625,4.707096142578125L183.999962625,3.999996142578125L187.999965625,-0.000006857421875006153L188.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M192.707065625,0.707099142578125L188.707068625,4.707096142578125L187.999962625,3.999996142578125L191.999965625,-0.000006857421875006153L192.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M196.707065625,0.707099142578125L192.707068625,4.707096142578125L191.999962625,3.999996142578125L195.999965625,-0.000006857421875006153L196.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M200.707065625,0.707099142578125L196.707068625,4.707096142578125L195.999962625,3.999996142578125L199.999965625,-0.000006857421875006153L200.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M204.707065625,0.707099142578125L200.707068625,4.707096142578125L199.999962625,3.999996142578125L203.999965625,-0.000006857421875006153L204.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M208.707065625,0.707099142578125L204.707068625,4.707096142578125L203.999962625,3.999996142578125L207.999965625,-0.000006857421875006153L208.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M212.707065625,0.707099142578125L208.707068625,4.707096142578125L207.999962625,3.999996142578125L211.999965625,-0.000006857421875006153L212.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M216.707065625,0.707099142578125L212.707068625,4.707096142578125L211.999962625,3.999996142578125L215.999965625,-0.000006857421875006153L216.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M220.707065625,0.707099142578125L216.707068625,4.707096142578125L215.999962625,3.999996142578125L219.999965625,-0.000006857421875006153L220.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M224.707065625,0.707099142578125L220.707068625,4.707096142578125L219.999962625,3.999996142578125L223.999965625,-0.000006857421875006153L224.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M228.707065625,0.707099142578125L224.707068625,4.707096142578125L223.999962625,3.999996142578125L227.999965625,-0.000006857421875006153L228.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M232.707065625,0.707099142578125L228.707068625,4.707096142578125L227.999962625,3.999996142578125L231.999965625,-0.000006857421875006153L232.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M236.707065625,0.707099142578125L232.707068625,4.707096142578125L231.999962625,3.999996142578125L235.999965625,-0.000006857421875006153L236.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M240.707065625,0.707099142578125L236.707068625,4.707096142578125L235.999962625,3.999996142578125L239.999965625,-0.000006857421875006153L240.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M244.707065625,0.707099142578125L240.707068625,4.707096142578125L239.999962625,3.999996142578125L243.999965625,-0.000006857421875006153L244.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M248.707065625,0.707099142578125L244.707068625,4.707096142578125L243.999962625,3.999996142578125L247.999965625,-0.000006857421875006153L248.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M252.707065625,0.707099142578125L248.707068625,4.707096142578125L247.999962625,3.999996142578125L251.999965625,-0.000006857421875006153L252.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M256.707065625,0.707099142578125L252.707068625,4.707096142578125L251.999962625,3.999996142578125L255.999965625,-0.000006857421875006153L256.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M260.707065625,0.707099142578125L256.707068625,4.707096142578125L255.999962625,3.999996142578125L259.999965625,-0.000006857421875006153L260.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M264.707065625,0.707099142578125L260.707068625,4.707096142578125L259.999962625,3.999996142578125L263.999965625,-0.000006857421875006153L264.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M268.707065625,0.707099142578125L264.707068625,4.707096142578125L263.999962625,3.999996142578125L267.999965625,-0.000006857421875006153L268.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M272.707065625,0.707099142578125L268.707068625,4.707096142578125L267.999962625,3.999996142578125L271.999965625,-0.000006857421875006153L272.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M276.707065625,0.707099142578125L272.707068625,4.707096142578125L271.999962625,3.999996142578125L275.999965625,-0.000006857421875006153L276.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M280.707065625,0.707099142578125L276.707068625,4.707096142578125L275.999962625,3.999996142578125L279.999965625,-0.000006857421875006153L280.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M284.707065625,0.707099142578125L280.707068625,4.707096142578125L279.999962625,3.999996142578125L283.999965625,-0.000006857421875006153L284.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M288.707065625,0.707099142578125L284.707068625,4.707096142578125L283.999962625,3.999996142578125L287.999965625,-0.000006857421875006153L288.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M292.707065625,0.707099142578125L288.707068625,4.707096142578125L287.999962625,3.999996142578125L291.999965625,-0.000006857421875006153L292.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M296.707065625,0.707099142578125L292.707068625,4.707096142578125L291.999962625,3.999996142578125L295.999965625,-0.000006857421875006153L296.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M300.707065625,0.707099142578125L296.707068625,4.707096142578125L295.999962625,3.999996142578125L299.999965625,-0.000006857421875006153L300.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M304.707065625,0.707099142578125L300.707068625,4.707096142578125L299.999962625,3.999996142578125L303.999965625,-0.000006857421875006153L304.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M308.707065625,0.707099142578125L304.707068625,4.707096142578125L303.999962625,3.999996142578125L307.999965625,-0.000006857421875006153L308.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M312.707065625,0.707099142578125L308.707068625,4.707096142578125L307.999962625,3.999996142578125L311.999965625,-0.000006857421875006153L312.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M316.707065625,0.707099142578125L312.707068625,4.707096142578125L311.999962625,3.999996142578125L315.999965625,-0.000006857421875006153L316.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M320.707065625,0.707099142578125L316.707068625,4.707096142578125L315.999962625,3.999996142578125L319.999965625,-0.000006857421875006153L320.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M324.707065625,0.707099142578125L320.707068625,4.707096142578125L319.999962625,3.999996142578125L323.999965625,-0.000006857421875006153L324.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M328.707065625,0.707099142578125L324.707068625,4.707096142578125L323.999962625,3.999996142578125L327.999965625,-0.000006857421875006153L328.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M332.707065625,0.707099142578125L328.707068625,4.707096142578125L327.999962625,3.999996142578125L331.999965625,-0.000006857421875006153L332.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M336.707065625,0.707099142578125L332.707068625,4.707096142578125L331.999962625,3.999996142578125L335.999965625,-0.000006857421875006153L336.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M340.707065625,0.707099142578125L336.707068625,4.707096142578125L335.999962625,3.999996142578125L339.999965625,-0.000006857421875006153L340.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M344.707065625,0.707099142578125L340.707068625,4.707096142578125L339.999962625,3.999996142578125L343.999965625,-0.000006857421875006153L344.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M348.707065625,0.707099142578125L344.707068625,4.707096142578125L343.999962625,3.999996142578125L347.999965625,-0.000006857421875006153L348.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M352.707065625,0.707099142578125L348.707068625,4.707096142578125L347.999962625,3.999996142578125L351.999965625,-0.000006857421875006153L352.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M356.707065625,0.707099142578125L352.707068625,4.707096142578125L351.999962625,3.999996142578125L355.999965625,-0.000006857421875006153L356.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M360.707065625,0.707099142578125L356.707068625,4.707096142578125L355.999962625,3.999996142578125L359.999965625,-0.000006857421875006153L360.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M364.707065625,0.707099142578125L360.707068625,4.707096142578125L359.999962625,3.999996142578125L363.999965625,-0.000006857421875006153L364.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M368.707065625,0.707099142578125L364.707068625,4.707096142578125L363.999962625,3.999996142578125L367.999965625,-0.000006857421875006153L368.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M372.707065625,0.707099142578125L368.707068625,4.707096142578125L367.999962625,3.999996142578125L371.999965625,-0.000006857421875006153L372.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M376.707065625,0.707099142578125L372.707068625,4.707096142578125L371.999962625,3.999996142578125L375.999965625,-0.000006857421875006153L376.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M380.707065625,0.707099142578125L376.707068625,4.707096142578125L375.999962625,3.999996142578125L379.999965625,-0.000006857421875006153L380.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M384.707065625,0.707099142578125L380.707068625,4.707096142578125L379.999962625,3.999996142578125L383.999965625,-0.000006857421875006153L384.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M388.707065625,0.707099142578125L384.707068625,4.707096142578125L383.999962625,3.999996142578125L387.999965625,-0.000006857421875006153L388.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M392.707065625,0.707099142578125L388.707068625,4.707096142578125L387.999962625,3.999996142578125L391.999965625,-0.000006857421875006153L392.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M396.707065625,0.707099142578125L392.707068625,4.707096142578125L391.999962625,3.999996142578125L395.999965625,-0.000006857421875006153L396.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M400.707065625,0.707099142578125L396.707068625,4.707096142578125L395.999962625,3.999996142578125L399.999965625,-0.000006857421875006153L400.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M404.707065625,0.707099142578125L400.707068625,4.707096142578125L399.999962625,3.999996142578125L403.999965625,-0.000006857421875006153L404.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g><g><path d="M408.707065625,0.707099142578125L404.707068625,4.707096142578125L403.999962625,3.999996142578125L407.999965625,-0.000006857421875006153L408.707065625,0.707099142578125Z" fill-rule="evenodd" fill="#B4C0CA" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/src/components/RightDrawer/index.vue b/frontend/src/components/RightDrawer/index.vue
index ec572ce..165d548 100644
--- a/frontend/src/components/RightDrawer/index.vue
+++ b/frontend/src/components/RightDrawer/index.vue
@@ -1,83 +1,97 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";
+<!-- SidePanelItem.vue -->
+<template>
+  <div class="rightContentDrawer">
+    <div @click="drawerOpen = !drawerOpen" class="drawerController1"
+      >
+      <img src="../../assets/components/arrow-left.png" alt="">
+    </div>
+    <a-drawer :get-container="false"
+      :style="{ position: 'absolute' }" v-model:open="drawerOpen" :mask="false" placement="right" width="450" :closable="false"
+      @after-open-change="afterOpenChange" :headerStyle="{ color: '#FAFCFE' }">
+      <div @click="drawerOpen = !drawerOpen" class="drawerController">
+        <img src="../../assets/components/arrow-right.png" alt="">
+      </div>
+      <div style="padding:16px 16px 0">
+        <slot />
+      </div>
+    </a-drawer>
+  </div>
+</template>
 
-const open = ref(true);
+<script setup>
+import { ref, defineOptions, watch } from 'vue';
 
-// 切换抽屉状态
-const toggleDrawer = () => {
-  open.value = !open.value;
-};
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'rightDrawer'
+});
+const drawerOpen = ref(true);
+const shujv = ref('123456789');
+// const afterOpenChange = (open) => {
+//   if (!open) {
+//     drawerOpen.value = false;
+//   }
+// };
 </script>
 
-<template>
-  <!-- <div class="rightContentDrawer"> -->
-  <!-- 保持原有的 drawer 参数不变 -->
-  <a-drawer
-    :mask="false"
-    placement="right"
-    :open="true"
-    width="450"
-    :closable="false"
-    :headerStyle="{ color: '#FAFCFE' }"
-    :rootClassName="{ 'drawer-collapsed': !open }"
-    :getContainer="false"
-    :destroyOnClose="false"
-  >
-    <!-- 箭头按钮 - 始终显示在左侧中间位置 -->
-    <div class="toggle-button" :class="{ collapsed: !open }" @click="toggleDrawer">
-      <span class="arrow-icon" v-if="!open">
-        <LeftOutlined />
-      </span>
-      <span class="arrow-icon" v-else>
-        <RightOutlined />
-      </span>
-    </div>
-    <slot />
-  </a-drawer>
-  <!-- </div> -->
-</template>
-<style scoped lang="scss">
+<style lang="scss">
 .rightContentDrawer {
   height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  // 修复收起时布局塌陷问题
+  flex-shrink: 0;
+
+  .drawerController1 {
+    width: 18px;
+    position: absolute;
+    right: 0px;
+    cursor: pointer;
+    z-index: 10;
+    height: 88px;
+    line-height: 88px;
+    top: 45%;
+    // left: -18px;
+    vertical-align: middle;
+    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
 }
 
-    .toggle-button {
-        width: 18px;
-        position: absolute;
-        right: 10px;
-        cursor: pointer;
-        z-index: 10;
-        height: 88px;
-        line-height: 88px;
-        top: 45%;
-        left: -18px;
-        vertical-align: middle;
-        background-image: url('@/assets/bg-toggle.svg');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
+.ant-drawer {
+  margin: 5px 0px;
+.ant-drawer-content{
+  overflow:visible;
+}
+  .ant-drawer-content-wrapper {
+    border: 2px solid #c5d6e2 !important;
+    box-shadow: 3px 3px 3px 9px #e5edf3 !important;
+  }
 
-        &.collapsed {
-            left: -20px;
-            border-radius: 0 4px 4px 0;
-        }
+  .ant-drawer-body {
+    padding: 0px !important;
+  }
+}
 
-        .arrow-icon {
-            color: rgb(81, 131, 169);
-            font-size: 18px;
-            transition: transform 0.3s ease;
-        }
-    }
-
-    :deep(.ant-drawer) {
-
-        .ant-drawer-content-wrapper {
-            right: 0;
-            bottom: 0px;
-            border: 2px solid #c5d6e2 !important;
-            box-shadow: 3px 3px 3px 9px #e5edf3 !important;
-            display: flex;
-            flex-direction: column;
-        }
-    }
-</style>
+.drawerController {
+  width: 18px;
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+  z-index: 10;
+  height: 88px;
+  line-height: 88px;
+  top: 45%;
+  left: -18px;
+  vertical-align: middle;
+  background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+  background-repeat: no-repeat;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/rightDrawer/index.vue b/frontend/src/modules/rightDrawer/index.vue
new file mode 100644
index 0000000..4bd8389
--- /dev/null
+++ b/frontend/src/modules/rightDrawer/index.vue
@@ -0,0 +1,88 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <div class="rightContentDrawer">
+    <div @click="drawerOpen = !drawerOpen" class="drawerController1"
+      :style="drawerOpen ? 'display:none' : 'display:block'">
+      <img src="../../assets/components/arrow-left.png" alt="">
+    </div>
+    <a-drawer v-model:open="drawerOpen" :mask="false" placement="right" width="450" :closable="false"
+      @after-open-change="afterOpenChange" :headerStyle="{ color: '#FAFCFE' }">
+      <div @click="drawerOpen = !drawerOpen" class="drawerController">
+        <img src="../../assets/components/arrow-right.png" alt="">
+      </div>
+      <div style="padding:16px 16px 0">
+        <slot />
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineOptions, watch } from 'vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'rightDrawer'
+});
+const drawerOpen = ref(true);
+const shujv = ref('123456789');
+// const afterOpenChange = (open) => {
+//   if (!open) {
+//     drawerOpen.value = false;
+//   }
+// };
+</script>
+
+<style lang="less">
+.rightContentDrawer {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  // 修复收起时布局塌陷问题
+  flex-shrink: 0;
+
+  .drawerController1 {
+    width: 18px;
+    position: absolute;
+    right: 0px;
+    cursor: pointer;
+    z-index: 10;
+    height: 88px;
+    line-height: 88px;
+    top: 45%;
+    // left: -18px;
+    vertical-align: middle;
+    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+    background-repeat: no-repeat;
+  }
+
+}
+
+.ant-drawer {
+  margin: 5px 0px;
+
+  .ant-drawer-content-wrapper {
+    border: 2px solid #c5d6e2 !important;
+    box-shadow: 3px 3px 3px 9px #e5edf3 !important;
+  }
+
+  .ant-drawer-body {
+    padding: 0px !important;
+  }
+}
+
+.drawerController {
+  width: 18px;
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+  z-index: 10;
+  height: 88px;
+  line-height: 88px;
+  top: 45%;
+  left: -18px;
+  vertical-align: middle;
+  background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
+  background-repeat: no-repeat;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
index cfbc6cd..cc3818d 100644
--- a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
+++ b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
@@ -11,7 +11,7 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
       </div>
       <div class="rightContent">
         <RightDrawer>
-        789231
+        <!-- 789231 -->
                     <!-- <SidePanel title={currentItem ? currentItem.basename : ""}>
                         <JidiInfoMod />
                         <ShuidianhuangjingjieruMod />
@@ -21,3 +21,12 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
     </div>
   </div>
 </template>
+<style lang="scss">
+  .moduleContent{
+    display: flex;
+    justify-content: space-between;
+    .rightContent{
+      height: 85vh;
+    }
+  }
+</style>