diff --git a/components/_shared/ScrollIndicator.tsx b/components/_shared/ScrollIndicator.tsx
index 38f9d1e..e6e703f 100644
--- a/components/_shared/ScrollIndicator.tsx
+++ b/components/_shared/ScrollIndicator.tsx
@@ -64,6 +64,7 @@ const ScrollIndicator: React.FC<{
               <div className="h-full absolute flex flex-col justify-evenly w-full items-center border-[#333333] border-t-[1px] border-b-[1px] w-1">
                 {stops.map((stop, index) => (
                   <button
+                    aria-label="test"
                     className={`transition-all ease-in-out origin-center duration-100 rounded-full border-[1px] border-[#333333] w-[10px] h-[10px] bg-[#fff] ${
                       active == index ? 'scale-150' : ''
                     } flex justify-center items-center`}
diff --git a/components/_shared/image_header/ImageHeader.tsx b/components/_shared/image_header/ImageHeader.tsx
index c22b547..e21afc9 100644
--- a/components/_shared/image_header/ImageHeader.tsx
+++ b/components/_shared/image_header/ImageHeader.tsx
@@ -32,19 +32,20 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
 
   return (
     <>
-      <div className={image?.url ? `xl:grid xl:grid-cols-2` : ''}>
+      <div className={image?.url ? `lg:grid lg:grid-cols-2` : ''}>
         <div className={`${image?.url ? 'w-full z-10' : 'hidden'}`}>
           <div
             className={`h-full flex items-center
-              ${AR(
-                'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:ml-0',
-                'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:mr-0'
-              )}
-              w-[calc(100%+5rem)] xl:w-[calc(100%+4rem)] md:w-auto
+              ${
+                AR()
+                //'md:mr-[-7rem] md:ml-[-7rem] xl:ml-0',
+                // 'md:ml-[-7rem] md:mr-[-7rem] xl:mr-0'
+              }
+              w-[calc(100%]  md:w-auto
               bg-center bg-no-repeat bg-cover"
             `}
           >
-            <div className="w-[100vw] xl:w-[calc(100%+10rem)] relative h-full">
+            <div className="w-full  relative h-full">
               <Image
                 src={image.url}
                 alt={`${title}`}
@@ -59,25 +60,29 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
             </div>
           </div>
         </div>
-        <div className="w-full">
+        <div
+          className={`w-auto -mx-5  md:-mx-20 ${
+            AR(' lg:mr-0', 'lg:ml-0')
+            //'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
+            //'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
+          }`}
+        >
           <div
-            className={`h-full w-full xl:pt-[40px] pb-[40px] ${AR(
-              'ml-[10rem]',
-              'mr-[10rem]'
-            )} z-0 overflow-visible`}
+            className={`h-full w-full xl:pt-[40px] pb-[40px] z-0 overflow-visible`}
           >
             {/* 5rem (ml) + 5rem (body padding) = 10rem*/}
             <div
               className={`bg-[#F7FAFC] pb-5 xl:pb-0 h-full
-             ${AR(
-               'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
-               'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
-             )}
+             ${
+               AR()
+               //'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
+               //'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
+             }
              ${AR(
                'px-10 md:pl-[4rem] xl:pl-[7rem]',
                'px-10 md:pl-[4rem] xl:pr-[7rem]'
              )} 
-             w-[calc(100%+5rem)] xl:w-[calc(100%+10rem)] md:w-auto
+             w-full 
            `}
             >
               <div className="pt-[3rem] flex flex-col h-full justify-between">
@@ -89,7 +94,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                     <style>{scrollbarCss}</style>
                     <Scrollbar
                       rtl={AR(true, false) as boolean}
-                      style={{ height: '7.5em' }}
+                      style={{ height: '9em' }}
                     >
                       <p className="text-[#7C7C7C] w-[99%] line-clamp-5 group-hover:line-clamp-none transition-all">
                         {children}
@@ -97,7 +102,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                     </Scrollbar>
                   </div>
                 </div>
-                <div className="pb-[3rem]">
+                <div className="pb-[3rem] mt-5">
                   <Badge
                     text={badgeText}
                     color={color}
diff --git a/components/home/NavTemplate.tsx b/components/home/NavTemplate.tsx
index d7bf544..9d39a87 100644
--- a/components/home/NavTemplate.tsx
+++ b/components/home/NavTemplate.tsx
@@ -9,7 +9,7 @@ const languages = ['ar', 'en'];
 
 const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
   const router = useRouter();
-  const navRef = useRef();
+  const navRef = useRef<null | HTMLDivElement>(null);
   const [iseMenuScrollable, setIsMenuScrollable] = useState(false);
 
   function handleLocale(e: MouseEvent<HTMLButtonElement>) {
@@ -19,7 +19,7 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
   }
 
   function checkScrollableMenu() {
-    const navbar = navRef.current;
+    const navbar: HTMLDivElement = navRef.current;
     if (navbar) setIsMenuScrollable(navbar.scrollWidth > navbar.offsetWidth);
   }
 
diff --git a/components/organization/MainOptions.tsx b/components/organization/MainOptions.tsx
index cc3b14a..7e7a536 100644
--- a/components/organization/MainOptions.tsx
+++ b/components/organization/MainOptions.tsx
@@ -153,7 +153,9 @@ const MainOptions: React.FC<any> = ({
       </div>
       {children?.length > 0 && (
         <div className="mb-20">
-          <h1 className="font-semibold text-3xl mb-6">{t('og-h-sub')}</h1>
+          <h1 className="font-semibold text-2xl sm:text-3xl mb-6">
+            {t('og-h-sub')}
+          </h1>
           <SubOrgsCarousel orgs={subOrgs} orgOnClick={onSubOrgClick} />
         </div>
       )}
diff --git a/components/resource/About.tsx b/components/resource/About.tsx
index 2467f76..63aff74 100644
--- a/components/resource/About.tsx
+++ b/components/resource/About.tsx
@@ -38,7 +38,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
   return (
     <>
       <div className="flex flex-col mb-10">
-        <div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold text-[36px] items-baseline">
+        <div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold  text-2xl lg:text-[36px] lg:leading-[56px] items-baseline">
           {resource.format === 'CSV' ? (
             <img
               src="/images/csv-icon.svg"
diff --git a/components/resource/NavBreadCrumbs.tsx b/components/resource/NavBreadCrumbs.tsx
index 3cb6158..06d8901 100644
--- a/components/resource/NavBreadCrumbs.tsx
+++ b/components/resource/NavBreadCrumbs.tsx
@@ -6,10 +6,10 @@ export default function NavBreadCrumbs({ navInfo }) {
   return (
     <div className=" mt--2 mb-8 font-avenir">
       <div className="flex flex-1 bg-[#F7FAFC] bg-waves pl-2">
-        <ol className="flex text-[13px] items-center font-[500] tracking-widest uppercase text-[#464646] px-12 py-8 space-x-2">
+        <ol className="hoverable-scroll overflow-auto flex text-[13px] items-center font-[500] md:tracking-widest uppercase text-[#464646] px-5 lg:px-12 py-8 space-x-2">
           <li>
             <Link href="/search">
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {t('datasets')}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -23,7 +23,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           </li>
           <li>
             <Link href={`/@${navInfo.orgName}`}>
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {navInfo.orgTitle}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -37,7 +37,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           </li>
           <li>
             <Link href={`/@${navInfo.orgName}/${navInfo.datasetName}`}>
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {navInfo.datasetTitle}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -49,7 +49,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           <li>
             <span>&gt;</span>
           </li>
-          <li>{navInfo.resourceTitle}</li>
+          <li className="whitespace-nowrap">{navInfo.resourceTitle}</li>
         </ol>
       </div>
     </div>
diff --git a/components/resource/ResourceExplorer.tsx b/components/resource/ResourceExplorer.tsx
index e57212f..02ebda4 100644
--- a/components/resource/ResourceExplorer.tsx
+++ b/components/resource/ResourceExplorer.tsx
@@ -109,7 +109,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
   return (
     <div className="grid xl:grid-cols-12 grid-cols-1 pl-0 w-full">
       {/* Preview: show Data Explorer if tabular data + datastore active */}
-      <div className="col-span-12 p-10 bg-[#F7FAFC] rounded-2xl">
+      <div className="col-span-12 p-5 md:p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex xl:flex-row flex-col justify-between mb-4">
           <div className="flex font-avenir text-[20px] text-[#808080] font-normal pl-4 w-2/3 xl:flex-row flex-col">
             <div className="flex xl:mr-3 items-baseline mb-2">
diff --git a/components/search/FiltersBar.tsx b/components/search/FiltersBar.tsx
index d4fbebe..53c8cb3 100644
--- a/components/search/FiltersBar.tsx
+++ b/components/search/FiltersBar.tsx
@@ -261,11 +261,11 @@ export default function FiltersBar({
   sideFilter.organization.forEach((el) => fixTranslations(el));
 
   return (
-    <div className="">
+    <div className="w-full">
       {filters === t('topics') && (
         <>
-          <div className="w-100 max-w-6xl bg-white">
-            <div id="topics">
+          <div className="">
+            <div id="topics" className="mx-5 bg-white rounded-xl py-2">
               <TopicsCarousel
                 items={topics}
                 active={{ name: null }}
@@ -276,7 +276,7 @@ export default function FiltersBar({
             </div>
           </div>
 
-          <div className="w-100 max-w-6xl mt-2">
+          <div className="w-100 max-w-6xl mt-2 mx-auto px-5">
             <div className="relative">
               <div className="peer">
                 <FilterCarousel identifier="sub-topics-carousel">
@@ -284,7 +284,7 @@ export default function FiltersBar({
                     <SwiperSlide key={index} className="p-1">
                       <button
                         key={sub.id}
-                        className="group relative flex flex-wrap bg-gray-200 h-full w-full rounded-xl overflow-hidden"
+                        className="group relative flex flex-wrap bg-gray-200 h-40 w-full rounded-xl overflow-hidden"
                         onClick={(e) => filterSearch(e, 'groups', sub)}
                       >
                         <img
@@ -294,7 +294,7 @@ export default function FiltersBar({
                           }
                           alt={sub.title}
                           width="100%"
-                          className="top-0 w-full h-full object-scale-down z-0"
+                          className="top-0 w-full h-full object-cover z-0"
                         />
                         <span
                           className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 transition-all border-[#22B373] rounded-b-l z-10"
@@ -336,7 +336,7 @@ export default function FiltersBar({
         </>
       )}
       {filters === t('organization') && (
-        <div className="w-100 max-w-6xl mt-2">
+        <div className="w-100 lg:max-w-6xl mx-5 mt-2">
           <div className="relative">
             <div className="peer">
               <FilterCarousel identifier="orgs-carousel">
@@ -344,13 +344,13 @@ export default function FiltersBar({
                   <SwiperSlide key={index} className="p-1">
                     <button
                       key={org.id}
-                      className="group relative flex flex-wrap bg-gray-200 w-40 h-40 rounded-xl overflow-hidden"
+                      className="group relative flex flex-wrap bg-gray-200 w-full h-40 rounded-xl overflow-hidden"
                       onClick={(e) => filterSearch(e, 'organization', org)}
                     >
                       <img
                         src={org.image || '/images/org-default.png'}
                         alt={org.name}
-                        className="absolute left-0 top-0 w-full object-scale-down z-0 rounded-xl"
+                        className="absolute left-0 top-0 w-full h-full  object-cover z-0 rounded-xl"
                       />
                       <span
                         className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 transition-all border-[#22B373] rounded-b-l z-10"
@@ -392,26 +392,28 @@ export default function FiltersBar({
       )}
 
       {filters === t('ds-bt-time') && (
-        <div className="w-full can mt-2 bg-white">
-          {Object.keys(timeFrames).map((timeframe, index) => (
-            <button
-              key={index}
-              className={`py-2 px-4 rounded-xl font-avenir ${
-                currentTimeIndex === index
-                  ? 'bg-button-gradient text-white'
-                  : 'text-black'
-              }`}
-              onClick={() => setTimeSearchValue(timeframe, index)}
-            >
-              {timeframe}
-            </button>
-          ))}
+        <div className="min-w-full px-5">
+          <div className="w-full rounded-xl mt-2 can mt-2 bg-white flex flex-col sm:flex-row">
+            {Object.keys(timeFrames).map((timeframe, index) => (
+              <button
+                key={index}
+                className={`py-2 px-4 rounded-xl font-avenir ${
+                  currentTimeIndex === index
+                    ? 'bg-button-gradient text-white'
+                    : 'text-black'
+                }`}
+                onClick={() => setTimeSearchValue(timeframe, index)}
+              >
+                {timeframe}
+              </button>
+            ))}
+          </div>
         </div>
       )}
 
       {currentTimeIndex === 0 && filters === t('ds-bt-time') && (
-        <div className="w-full mt-4">
-          <div className="flex flex-col w-1/2  pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
+        <div className="w-full mt-4 px-5">
+          <div className="flex flex-col w-full lg:w-1/2  pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
             <div>
               <MultiRangeSlider
                 min={0}
@@ -456,7 +458,7 @@ export default function FiltersBar({
       )}
       {(sideFilter.groups.length > 0 ||
         sideFilter.organization.length > 0) && (
-        <div className="flex flex-col">
+        <div className="flex flex-col mx-5 mt-5">
           <span className="font-bold">{t('active-filters')}</span>
           {sideFilter.groups.length > 0 && (
             <div className="flex w-100 max-w-6xl items-between">
diff --git a/components/search/NewForm.tsx b/components/search/NewForm.tsx
index ea485b6..32da8cf 100644
--- a/components/search/NewForm.tsx
+++ b/components/search/NewForm.tsx
@@ -54,7 +54,7 @@ const SearchForm: React.FC<{
       <h1 className="text-3xl text-center font-extrabold !mt-0 mb-8 capitalize z-10">
         {t('ds-h-sear')}
       </h1>
-      <div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-xl xl:max-w-none xl:w-9/12 px-4 sm:px-0 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
+      <div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-3xl xl:max-w-none xl:w-9/12 px-4 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
         <form
           className="flex flex-1 relative xl:w-1/2 bg-white rounded-xl px-4 py-2 items-center"
           onSubmit={(e) => e.preventDefault()}
@@ -77,7 +77,7 @@ const SearchForm: React.FC<{
         <p className="text-lg text-center xl:text-left bg-button-gradient bg-clip-text text-transparent">
           {t('ds-p-filt')}
         </p>
-        <div className="flex flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full sm:w-fit !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
+        <div className="flex w-auto flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full  !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
           <div className="flex text-sm">
             <div
               className={`flex space-x-1 ${
@@ -129,7 +129,7 @@ const SearchForm: React.FC<{
           </div>
         </div>
       </div>
-      <div className="mt-4 z-10">
+      <div className="mt-4 z-10 xl:flex xl:flex-wrap items-center w-full sm:max-w-3xl xl:max-w-none xl:w-9/12 px-4 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
         <FiltersBar
           qvariables={variables}
           setQvariables={setQvariables}
diff --git a/components/search/filters/FilterCarousel.tsx b/components/search/filters/FilterCarousel.tsx
index 88c0321..f0acc80 100644
--- a/components/search/filters/FilterCarousel.tsx
+++ b/components/search/filters/FilterCarousel.tsx
@@ -22,20 +22,20 @@ const FilterCarousel: React.FC<{ identifier: string }> = ({
         onSwiper={(instance) => setSwiper(instance)}
         breakpoints={{
           1: {
-            slidesPerView: 3,
-            slidesPerGroup: 3,
+            slidesPerView: 1,
+            slidesPerGroup: 1,
           },
           460: {
-            slidesPerView: 3,
-            slidesPerGroup: 3,
+            slidesPerView: 2,
+            slidesPerGroup: 2,
           },
           720: {
-            slidesPerView: 5,
-            slidesPerGroup: 5,
+            slidesPerView: 3,
+            slidesPerGroup: 3,
           },
           1200: {
-            slidesPerView: 5,
-            slidesPerGroup: 5,
+            slidesPerView: 4,
+            slidesPerGroup: 4,
           },
           1280: {
             slidesPerView: 6,
diff --git a/components/search/filters/TopicFilterCarousel.tsx b/components/search/filters/TopicFilterCarousel.tsx
index 9bb3d55..447536f 100644
--- a/components/search/filters/TopicFilterCarousel.tsx
+++ b/components/search/filters/TopicFilterCarousel.tsx
@@ -34,16 +34,16 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
 
   return (
     <>
-      <div className="relative group">
+      <div className="relative group w-full">
         <div
-          className={`transition-all opacity-0 group-hover:opacity-100 absolute hidden lg:block top-[50%] -translate-y-2/4 ml-[-1.5rem] md:left-0 z-50 nav-prev-button${
+          className={`transition-all opacity-1 md:opacity-0 md:group-hover:opacity-100 absolute  top-[50%] -translate-y-2/4 ml-[-1.5rem] left-[30px] z-50 nav-prev-button${
             identifier ? '--' + identifier : ''
           }`}
         >
           <NavButton size="small" orientation="left" />
         </div>
         <div
-          className={`transition-all opacity-0 group-hover:opacity-100  absolute hidden lg:block top-[50%] -translate-y-2/4 mr-[-1.5rem] md:right-0 z-50 nav-next-button${
+          className={`transition-all  opacity-1 md:opacity-0 md:group-hover:opacity-100 absolute  top-[50%] -translate-y-2/4 mr-[-1.5rem] right-[30px] z-50 nav-next-button${
             identifier ? '--' + identifier : ''
           }`}
         >
@@ -55,25 +55,21 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
           onSwiper={(instance) => setSwiper(instance)}
           breakpoints={{
             1: {
+              slidesPerView: 1,
+              slidesPerGroup: 1,
+            },
+            460: {
               slidesPerView: 2,
               slidesPerGroup: 2,
             },
-            460: {
+            720: {
               slidesPerView: 3,
               slidesPerGroup: 3,
             },
-            720: {
-              slidesPerView: 5,
-              slidesPerGroup: 5,
-            },
             1200: {
               slidesPerView: 5,
               slidesPerGroup: 5,
             },
-            1280: {
-              slidesPerView: 6,
-              slidesPerGroup: 6,
-            },
           }}
           initialSlide={items.findIndex((item) => item.name == active.name)}
           navigation={{
@@ -82,8 +78,9 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
           }}
         >
           {items.map((item, index) => (
-            <SwiperSlide key={index}>
+            <SwiperSlide key={index} className="text-center">
               <button
+                className="text-ellipsis overflow-hidden ..."
                 onClick={(e) => {
                   const slidesPerView = swiper.params.slidesPerView;
                   const currentSlide = index; //  or swiper.clickedIndex
diff --git a/pages/[org]/[dataset]/r/[resource]/index.tsx b/pages/[org]/[dataset]/r/[resource]/index.tsx
index d3cd081..ffca87c 100644
--- a/pages/[org]/[dataset]/r/[resource]/index.tsx
+++ b/pages/[org]/[dataset]/r/[resource]/index.tsx
@@ -59,7 +59,7 @@ const Resource: React.FC<{ variables: any }> = ({ variables }) => {
           orgTitle: result.organization.title,
         }}
       />
-      <main className="flex flex-wrap pl-12 pr-20 mb-70">
+      <main className={`flex flex-wrap mb-70 px-5 lg:px-12 lg:mr-10`}>
         <ScrollIndicator
           firstImage={{
             url: '/images/scroll_indicator_icon_1.svg',
@@ -77,7 +77,7 @@ const Resource: React.FC<{ variables: any }> = ({ variables }) => {
           ]}
         />
         {/* Dataset About section */}
-        <div id="about">
+        <div id="about" className="w-full">
           <About variables={variables} />
         </div>
         {/* Resource display */}
diff --git a/pages/[org]/index.tsx b/pages/[org]/index.tsx
index 76fb762..a8c7d96 100644
--- a/pages/[org]/index.tsx
+++ b/pages/[org]/index.tsx
@@ -72,7 +72,7 @@ const Organization: React.FC<any> = ({ variables }) => {
         <title>{`${t('organization')} | ${t('title')}`}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="py-12 mx-10 md:mx-28 pb-20 text-[#4D4D4D]">
+      <main className="py-12 mx-5 md:mx-20 pb-20 text-[#4D4D4D]">
         <ScrollIndicator
           firstImage={{
             url: activeOrg?.org?.icon?.url || '/images/no_icon_org.svg',
diff --git a/pages/search.tsx b/pages/search.tsx
index d1053bf..13802fe 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -78,7 +78,7 @@ const Search: React.FC<Props> = ({ variables }) => {
           }}
         />
         <div className="container mx-auto">
-          <div className="mb-12 mx-10 md:mx-16 lg:mx-28 mt-12">
+          <div className="mb-12 mx-5 md:mx-12 lg:mx-28 mt-12">
             <div className="px-4">
               <h1 className="font-semibold text-xl sm:text-2xl">
                 {amount}{' '}
@@ -103,7 +103,7 @@ const Search: React.FC<Props> = ({ variables }) => {
               />
             </div>
           </div>
-          <div className="mx-10 md:mx-28" id="dev-exp">
+          <div className="mx-10 md:mx-12 lg:mx-28" id="dev-exp">
             <DeveloperExperience
               api={
                 typeof window !== 'undefined'
diff --git a/styles/globals.css b/styles/globals.css
index 3c40efc..d2604a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -175,7 +175,8 @@ div.MuiDataGrid-filterFormDeleteIcon {
 
 .slider {
   position: relative;
-  width: 250px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .slider__track,
@@ -289,7 +290,7 @@ div.MuiDataGrid-filterFormDeleteIcon {
   pointer-events: none;
   position: absolute;
   height: 0;
-  width: 250px;
+  width: calc(100% - 3rem - 16px);
   outline: none;
 }
 
@@ -332,7 +333,7 @@ div.MuiDataGrid-filterFormDeleteIcon {
 .triangle:before {
   content: '';
   position: absolute;
-  left: 10px;
+  left: 30px;
   bottom: 100%;
   margin: 0 auto;
   width: 0;
@@ -420,6 +421,14 @@ svg.star-svg {
     z-index: 1;
     pointer-events: none; /* Allows clicks to pass through the transparent area */
   }
+
+  [lang="ar"] .menu-scrollable-indicator{
+    left:0;
+    right:auto;
+    height: calc(100% - 6px);
+  }
+
+  
 }
 
 .scrollbar-invisible::-webkit-scrollbar{