diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
index edba40b53..910715186 100644
--- a/frontend/src/Setting.tsx
+++ b/frontend/src/Setting.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import Arrow2 from './assets/dropdown-arrow.svg';
+import ArrowLeft from './assets/arrow-left.svg';
+import ArrowRight from './assets/arrow-right.svg';
 
 const Setting = () => {
   const list = ['General', 'Prompts', 'Documents', 'Widgets'];
@@ -11,21 +13,58 @@ const Setting = () => {
     else if (active === 'Widgets') return <Widgets />;
     else return <></>;
   };
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const scrollStep = 100;
+  const scrollLeft = () => {
+    if (scrollableRef.current) {
+      if (scrollableRef.current.scrollLeft > 0) {
+        scrollableRef.current.scrollLeft -= scrollStep; // Adjust the scroll amount as needed
+      }
+    }
+  };
+
+  const scrollRight = () => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollLeft += scrollStep; // Adjust the scroll amount as needed
+    }
+  };
   return (
     <div className="pt-20 pl-2 md:p-12">
       <p className="text-2xl font-bold text-eerie-black">Settings</p>
-      <div className="mt-4 flex flex-row overflow-x-scroll md:overflow-x-hidden">
-        {list.map((item, index) => (
-          <div
-            key={index}
-            className={`my-auto mr-6 mb-5 flex h-9 cursor-pointer items-center gap-4 rounded-3xl px-4 font-bold text-purple-30 hover:bg-purple-3000 ${
-              active === item ? 'bg-purple-3000' : ''
-            }`}
-            onClick={() => setActive(item)}
-          >
-            {item}
+      <div className="flex flex-row items-center">
+        <div className="md:hidden " onClick={scrollLeft}>
+          <div className=" h-8 w-8 rounded-full border-2 border-purple-30 hover:bg-gray-100">
+            <img
+              src={ArrowLeft}
+              className="h-6 w-6 p-1"
+              style={{ marginTop: '2px' }}
+            />
+          </div>
+        </div>
+        <div className="mt-4 flex flex-row overflow-hidden" ref={scrollableRef}>
+          {list.map((item, index) => (
+            <div
+              key={index}
+              className={`my-auto mr-6 mb-5 flex h-9 cursor-pointer items-center gap-4 rounded-3xl px-4 font-bold hover:text-purple-30 ${
+                active === item
+                  ? 'bg-purple-3000 text-purple-30'
+                  : 'text-gray-6000'
+              }`}
+              onClick={() => setActive(item)}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+        <div className="md:hidden " onClick={scrollRight}>
+          <div className=" h-8 w-8 rounded-full border-2 border-purple-30 hover:bg-gray-100">
+            <img
+              src={ArrowRight}
+              className="h-6 w-6 p-1"
+              style={{ marginTop: '2px', marginLeft: '3px' }}
+            />
           </div>
-        ))}
+        </div>
       </div>
       {returnActiveTabs()}
     </div>
@@ -45,18 +84,18 @@ const General = () => {
         <p className="font-bold text-jet">Select Theme</p>
         <div className="relative my-4 flex gap-2 px-2">
           <div
-            className="flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
+            className="-ml-2 flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
             onClick={() => setIsThemeListOpen(!isThemeListOpen)}
           >
             {theme && (
-              <p className="my-3 mx-4 overflow-hidden text-ellipsis">{theme}</p>
+              <p className="my-3 mx-6 overflow-hidden text-ellipsis">{theme}</p>
             )}
             <img
               src={Arrow2}
               alt="arrow"
               className={`${
                 !isThemeListOpen ? 'rotate-0' : 'rotate-180'
-              } ml-auto mr-3 w-3 transition-all`}
+              } ml-auto mr-6 w-3 transition-all`}
             />
           </div>
           {isThemeListOpen && (
@@ -86,11 +125,11 @@ const General = () => {
         <p className="font-bold text-jet">Select Language</p>
         <div className="relative my-4 flex gap-2 px-2">
           <div
-            className="flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
+            className="-ml-2 flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
             onClick={() => setIsLanguageListOpen(!isLanguageListOpen)}
           >
             {language && (
-              <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
+              <p className="my-3 mx-6 overflow-hidden text-ellipsis whitespace-nowrap">
                 {language}
               </p>
             )}
@@ -99,7 +138,7 @@ const General = () => {
               alt="arrow"
               className={`${
                 !isLanguageListOpen ? 'rotate-0' : 'rotate-180'
-              } ml-auto mr-3 w-3 transition-all`}
+              } ml-auto mr-6 w-3 transition-all`}
             />
           </div>
           {isLanguageListOpen && (
diff --git a/frontend/src/assets/arrow-left.svg b/frontend/src/assets/arrow-left.svg
new file mode 100644
index 000000000..8c7c79723
--- /dev/null
+++ b/frontend/src/assets/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3183 20.8523C12.4198 20.9597 12.4991 21.0861 12.5518 21.2242C12.6044 21.3622 12.6294 21.5093 12.6252 21.657C12.621 21.8047 12.5878 21.9502 12.5274 22.0851C12.467 22.2199 12.3807 22.3416 12.2733 22.4431C12.1659 22.5446 12.0395 22.6239 11.9014 22.6766C11.7634 22.7293 11.6163 22.7542 11.4686 22.75C11.3208 22.7459 11.1754 22.7126 11.0405 22.6522C10.9057 22.5919 10.784 22.5055 10.6825 22.3981L1.12001 12.2731C0.922533 12.0642 0.812501 11.7877 0.812501 11.5002C0.812501 11.2128 0.922533 10.9362 1.12001 10.7273L10.6825 0.601207C10.7833 0.49145 10.905 0.40282 11.0403 0.340468C11.1757 0.278115 11.3221 0.243281 11.4711 0.23799C11.62 0.232697 11.7685 0.257054 11.908 0.309644C12.0474 0.362231 12.175 0.442004 12.2834 0.544328C12.3917 0.646653 12.4787 0.769488 12.5392 0.9057C12.5997 1.04191 12.6325 1.18878 12.6357 1.33779C12.639 1.48679 12.6126 1.63495 12.5581 1.77367C12.5036 1.91238 12.4221 2.03889 12.3183 2.14583L3.48476 11.5002L12.3183 20.8523Z" fill="#7D54D1"/>
+</svg>
diff --git a/frontend/src/assets/arrow-right.svg b/frontend/src/assets/arrow-right.svg
new file mode 100644
index 000000000..a36d6e8fe
--- /dev/null
+++ b/frontend/src/assets/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.681741 20.8523C0.580245 20.9597 0.500899 21.0861 0.448232 21.2242C0.395564 21.3622 0.370607 21.5093 0.374785 21.657C0.378964 21.8047 0.412197 21.9502 0.472586 22.0851C0.532974 22.2199 0.619336 22.3416 0.726741 22.4431C0.834146 22.5446 0.96049 22.6239 1.09856 22.6766C1.23663 22.7293 1.38372 22.7542 1.53144 22.75C1.67915 22.7459 1.8246 22.7126 1.95947 22.6522C2.09434 22.5919 2.216 22.5055 2.31749 22.3981L11.88 12.2731C12.0775 12.0642 12.1875 11.7877 12.1875 11.5002C12.1875 11.2128 12.0775 10.9362 11.88 10.7273L2.31749 0.601207C2.21666 0.49145 2.09503 0.40282 1.95967 0.340468C1.8243 0.278115 1.67789 0.243281 1.52895 0.23799C1.38 0.232697 1.23149 0.257054 1.09204 0.309644C0.95259 0.362231 0.824978 0.442004 0.716618 0.544328C0.608256 0.646653 0.521307 0.769488 0.46082 0.9057C0.400333 1.04191 0.367515 1.18878 0.364269 1.33779C0.361025 1.48679 0.387418 1.63495 0.441917 1.77367C0.496417 1.91238 0.577936 2.03889 0.681739 2.14583L9.51524 11.5002L0.681741 20.8523Z" fill="#7D54D1"/>
+</svg>
diff --git a/frontend/src/assets/settingGear.svg b/frontend/src/assets/settingGear.svg
index 0b9af06be..abbde123e 100644
--- a/frontend/src/assets/settingGear.svg
+++ b/frontend/src/assets/settingGear.svg
@@ -1,70 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg 
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   width="448"
-   height="448"
-   viewBox="0 0 448 448"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="settings-gear.svg">
-  <title
-     id="title3334">settings-gear</title>
-  <metadata
-     id="metadata199">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>settings-gear</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs197" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1100"
-     inkscape:window-height="894"
-     id="namedview195"
-     showgrid="true"
-     inkscape:zoom="1.2291667"
-     inkscape:cx="292.34697"
-     inkscape:cy="222.24072"
-     inkscape:window-x="260"
-     inkscape:window-y="260"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg2"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4169"
-       spacingx="16"
-       spacingy="16"
-       empspacing="2" />
-  </sodipodi:namedview>
-  <path
-     inkscape:connector-curvature="0"
-     class="icon-vso-bg"
-     d="m 374.84801,275.296 c -2.24,6.6248 -4.80001,13.0228 -7.872,19.2332 l 32.54398,68.446 c -10.72,13.5688 -22.97599,25.8244 -36.54398,36.5764 l -68.48002,-32.5752 c -6.17599,3.1024 -12.60798,5.6308 -19.23199,7.9044 l -25.44,71.5204 C 241.344,447.3924 232.736,448 224,448 c -8.704,0 -17.312,-0.616 -25.792,-1.596 l -25.44,-71.5204 c -6.624,-2.268 -13.056,-4.802 -19.264,-7.9044 L 85.023999,399.5236 C 71.456,388.7716 59.199997,376.516 48.447997,362.9472 l 32.544002,-68.4488 c -3.007996,-6.1768 -5.6,-12.5748 -7.84,-19.1996 L 1.6000001,249.8272 C 0.63999994,241.3432 0,232.736 0,224 0,215.264 0.63999994,206.6568 1.6000001,198.1756 L 73.151999,172.7348 c 2.24,-6.622 4.800001,-13.0228 7.872003,-19.2304 L 48.511999,85.0556 C 59.263999,71.5204 71.519998,59.2312 85.087997,48.5128 L 153.568,81.0572 c 6.176,-3.0744 12.608,-5.6336 19.264,-7.9044 L 198.208,1.5988 C 206.688,0.6412 215.296,0 224,0 c 8.736,0 17.344,0.644 25.856,1.596 l 25.44,71.5568 c 6.62399,2.24 13.024,4.7992 19.232,7.8708 l 68.47999,-32.5444 c 13.56801,10.7212 25.82401,23.0076 36.544,36.5456 l -32.54398,68.446 c 3.07199,6.2104 5.63198,12.6084 7.87198,19.2332 L 446.432,198.1448 C 447.39214,206.6568 448,215.264 448,224 c 0,8.736 -0.60786,17.3432 -1.59994,25.8244 L 374.8481,275.296 Z M 224,127.9992 c -53.024,0 -96,42.9772 -96,96.0008 0,53.0236 42.976,96.0008 96,96.0008 53.024,0 95.99999,-42.9772 95.99999,-96.0008 0,-53.0236 -42.97599,-96.0008 -95.99999,-96.0008 z m 0,48.0004 c -26.528,0 -48,21.504 -48,48.0004 0,26.4964 21.472,48.0004 48,48.0004 26.528,0 48,-21.504 48,-48.0004 0,-26.4964 -21.472,-48.0004 -48,-48.0004 z"
-     id="iconBg" />
-</svg>
\ No newline at end of file
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black"/>
+</svg>