diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx
new file mode 100644
index 0000000..3770a44
--- /dev/null
+++ b/app/components/ui/banner.tsx
@@ -0,0 +1,25 @@
+import { Link } from 'react-router'
+
+import { APP } from '~/data/meta'
+
+export default function Banner() {
+  return (
+    <div className="min-h-[65px] bg-amber-400 sm:mx-10">
+      <div className="relative">
+        <Link
+          to="/#"
+          className="mt-2 h-full py-2"
+        >
+          <img
+            src={'https://placehold.co/1200x70.png'}
+            alt={APP.title}
+            className="h-[70px] w-auto sm:h-full"
+          />
+        </Link>
+        <p className="absolute top-2 mx-10">
+          Lorem ipsum dolor sit, amet consectetur
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index d63cf17..bf4976f 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -29,8 +29,8 @@ const buttonVariants = cva(
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
         icon: 'h-9 w-9',
-        // sm: 'h-8 rounded-md px-3 text-xs',
-        // lg: 'h-10 rounded-md px-8',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
       },
     },
     defaultVariants: {
diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx
index c4582ed..87d3880 100644
--- a/app/components/ui/carousel.tsx
+++ b/app/components/ui/carousel.tsx
@@ -9,71 +9,159 @@ import { Button } from './button'
 export const Carousel = (properties: TNews) => {
   const { title, description, items, type } = properties
   return (
-    <div>
-      <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
-        <div className="grid">
-          <h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
-          <p className="text-2xl font-light text-[#777777] italic">
-            {description}
-          </p>
-        </div>
-        <div className="flex gap-2.5">
-          <CarouselPreviousIcon
-            color="#DCDCDC"
-            className="cursor-pointer"
-          />
-          <CarouselNextIcon
-            color="#2E2F7C"
-            className="cursor-pointer"
-          />
-        </div>
-      </div>
-      <div
-        className={twMerge(
-          'grid gap-x-8',
-          type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
-        )}
-      >
-        {items.map(({ image, title, content }, index) => (
-          <div
-            key={index}
-            className={twMerge(
-              'grid gap-x-8',
-              type === 'hero' ? 'grid-cols-3' : '',
-            )}
-          >
-            <img
-              className={twMerge(
-                'w-full object-cover',
-                type === 'hero'
-                  ? 'col-span-2 aspect-[174/100]'
-                  : 'aspect-[5/4]',
-              )}
-              src={image}
-              alt={title}
+    <>
+      {/* <div >
+        <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
+          <div className="grid">
+            <h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
+            <p className="text-2xl font-light text-[#777777] italic">
+              {description}
+            </p>
+          </div>
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
             />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+            />
+          </div>
+        </div>
+        <div
+          className={twMerge(
+            'grid gap-x-8',
+            type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
+          )}
+        >
+          {items.map(({ image, title, content }, index) => (
             <div
+              key={index}
               className={twMerge(
-                'flex flex-col justify-between',
-                type === 'hero' ? 'gap-7' : 'gap-4',
+                'grid gap-x-8',
+                type === 'hero' ? 'grid-cols-3' : '',
               )}
             >
-              <div>
-                <h3
-                  className={twMerge(
-                    'font-bold',
-                    type === 'hero' ? 'text-4xl' : 'text-2xl',
-                  )}
-                >
-                  {title}
-                </h3>
-                <p className="text-xl text-[#777777]">{content}</p>
+              <img
+                className={twMerge(
+                  'w-full object-cover',
+                  type === 'hero'
+                    ? 'col-span-2 aspect-[174/100]'
+                    : 'aspect-[5/4]',
+                )}
+                src={image}
+                alt={title}
+              />
+              <div
+                className={twMerge(
+                  'flex flex-col justify-between',
+                  type === 'hero' ? 'gap-7' : 'gap-4',
+                )}
+              >
+                <div>
+                  <h3
+                    className={twMerge(
+                      'font-bold',
+                      type === 'hero' ? 'text-4xl' : 'text-2xl',
+                    )}
+                  >
+                    {title}
+                  </h3>
+                  <p className="text-xl text-[#777777]">{content}</p>
+                </div>
+                <Button size="block">View More</Button>
               </div>
-              <Button size="block">View More</Button>
             </div>
+          ))}
+        </div>
+      </div> */}
+
+      <div className="">
+        <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+          <div className="grid">
+            <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+              {title}
+            </h2>
+            <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+              {description}
+            </p>
           </div>
-        ))}
+
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+          </div>
+        </div>
+        <div
+          className={twMerge(
+            'grid sm:grid sm:gap-x-8',
+            type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
+          )}
+        >
+          {items.map(({ image, title, content, tag }, index) => (
+            <div
+              key={index}
+              className={twMerge(
+                'grid sm:gap-x-8',
+                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
+              )}
+            >
+              <img
+                className={twMerge(
+                  'w-full object-cover',
+                  type === 'hero'
+                    ? 'col-span-2 aspect-[174/100]'
+                    : 'aspect-[5/4] rounded-md',
+                )}
+                src={image}
+                alt={title}
+              />
+              <div
+                className={twMerge(
+                  'flex flex-col justify-between',
+                  type === 'hero' ? 'gap-7' : 'gap-4',
+                )}
+              >
+                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
+                  {tag?.map((item) => (
+                    <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
+                      {item}
+                    </span>
+                  ))}
+                </div>
+
+                <div>
+                  <h3
+                    className={twMerge(
+                      'mt-2 w-full font-bold lg:mt-0',
+                      type === 'hero'
+                        ? 'text-2xl sm:text-4xl'
+                        : 'text-xl sm:text-2xl',
+                    )}
+                  >
+                    {title}
+                  </h3>
+                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
+                    {content}
+                  </p>
+                </div>
+                <Button size="block">View More</Button>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/app/components/ui/newsletter.tsx b/app/components/ui/newsletter.tsx
new file mode 100644
index 0000000..1c4f212
--- /dev/null
+++ b/app/components/ui/newsletter.tsx
@@ -0,0 +1,44 @@
+import { Button } from '~/components/ui/button'
+import { APP } from '~/data/meta'
+
+export const UiNewsLetter = () => {
+  return (
+    <>
+      <div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
+        <div className="grid-1">
+          <h2 className="text-2xl font-bold sm:text-4xl">
+            Join Our Newsletter
+          </h2>
+          <p className="text:md sm:text-lg">
+            Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
+            informasi kajian dan networking terbaru? ikuti Newsletter kami and
+            Stay up to Speed!
+          </p>
+        </div>
+        <div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
+          <img
+            src={'https://placehold.co/800x200.png'}
+            alt={APP.title}
+            className="h-full w-auto"
+          />
+        </div>
+        <div className="z-10">
+          <form className="grid gap-5">
+            <input
+              placeholder="Daftarkan Email Disini"
+              className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
+              size={1}
+            />
+            <Button
+              type="submit"
+              variant="newsPrimary"
+              size="block"
+            >
+              Subscribe
+            </Button>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/layouts/footer-links.tsx b/app/layouts/footer-links.tsx
index 0730917..afaf2cc 100644
--- a/app/layouts/footer-links.tsx
+++ b/app/layouts/footer-links.tsx
@@ -6,20 +6,22 @@ import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
 
 export const FooterLinks = () => {
   return (
-    <div className="col-span-3 flex flex-col justify-between">
-      <div className="grid grid-cols-3 gap-4">
+    <div className="col-span-1 flex flex-col justify-between sm:col-span-3">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
         {FOOTER_MENU.map(({ group, items }, index) => (
           <div
             key={index}
-            className="flex flex-col gap-3"
+            className="flex w-full flex-col gap-3"
           >
-            <h3 className="text-2xl font-semibold">{group}</h3>
-            <div>
+            <h3 className="text-xl font-semibold sm:text-2xl">{group}</h3>
+            <div
+              className={`${group === 'Follow Us' ? 'flex-col-2 flex w-full flex-wrap' : ''}`}
+            >
               {items.map(({ url, icon: Icon, title }, subIndex) => (
                 <Link
                   key={subIndex}
                   to={url}
-                  className="flex items-center gap-3 py-2"
+                  className="flex w-1/2 items-center gap-3 py-1 sm:w-full"
                 >
                   {Icon && (
                     <Icon
@@ -35,21 +37,21 @@ export const FooterLinks = () => {
           </div>
         ))}
       </div>
-      <div className="flex justify-between border-t border-white pt-8 text-sm">
-        <div>
-          {new Date().getFullYear()} {APP.title}. All rights reserved.
-        </div>
+      <div className="mt-8 justify-between border-t border-white pt-8 text-center text-xs sm:flex sm:text-sm">
         <div className="flex gap-6">
           {COPYRIGHT_MENU.map(({ url, title }, index) => (
             <Link
               key={index}
               to={url}
-              className="text-white underline"
+              className={`w-full text-white underline`}
             >
               {title}
             </Link>
           ))}
         </div>
+        <div className="mt-2 sm:order-first">
+          {new Date().getFullYear()} {APP.title}. All rights reserved.
+        </div>
       </div>
     </div>
   )
diff --git a/app/layouts/footer-newsletter.tsx b/app/layouts/footer-newsletter.tsx
index 34648b2..eded96b 100644
--- a/app/layouts/footer-newsletter.tsx
+++ b/app/layouts/footer-newsletter.tsx
@@ -5,39 +5,56 @@ import { APP } from '~/data/meta'
 
 export const FooterNewsletter = () => {
   return (
-    <div className="col-span-2 grid gap-y-6">
-      <div className="h-[75px] bg-white p-3">
-        <Link
-          to="/news"
-          className="h-full"
-        >
-          <img
-            src={APP.logo}
-            alt={APP.title}
-            className="h-full w-auto"
+    <>
+      <div className="col-span-2 hidden gap-y-6 sm:grid">
+        <div className="h-[75px] bg-white p-3">
+          <Link
+            to="/news"
+            className="h-full"
+          >
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-full w-auto"
+            />
+          </Link>
+        </div>
+
+        <h2 className="text-4xl font-bold">Join Our Newsletter</h2>
+        <p className="text-lg">
+          Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
+          informasi kajian dan networking terbaru? ikuti Newsletter kami and
+          Stay up to Speed!
+        </p>
+        <form className="grid gap-5">
+          <input
+            placeholder="Daftarkan Email Disini"
+            className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
+            size={1}
           />
-        </Link>
+          <Button
+            type="submit"
+            variant="newsPrimaryOutline"
+            size="block"
+          >
+            Subscribe
+          </Button>
+        </form>
       </div>
-      <h2 className="text-4xl font-bold">Join Our Newsletter</h2>
-      <p className="text-lg">
-        Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat informasi
-        kajian dan networking terbaru? ikuti Newsletter kami and Stay up to
-        Speed!
-      </p>
-      <form className="grid gap-5">
-        <input
-          placeholder="Daftarkan Email Disini"
-          className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
-          size={1}
-        />
-        <Button
-          type="submit"
-          variant="newsPrimaryOutline"
-          size="block"
-        >
-          Subscribe
-        </Button>
-      </form>
-    </div>
+      <div className="block sm:hidden">
+        <div className="h-[60px] bg-white p-3">
+          <Link
+            to="/news"
+            className="h-full"
+          >
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-full w-auto"
+            />
+          </Link>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/app/layouts/header-menu-mobile.tsx b/app/layouts/header-menu-mobile.tsx
new file mode 100644
index 0000000..da37062
--- /dev/null
+++ b/app/layouts/header-menu-mobile.tsx
@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { HeaderSearch } from '~/layouts/header-search'
+
+import { MENU } from './menu'
+
+export default function HeaderMenuMobile() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const handleToggleMenu = (): void => {
+    setIsMenuOpen(!isMenuOpen)
+  }
+  return (
+    <>
+      <div className="relative z-50 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
+        <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
+          {/* Menu */}
+          <div
+            className={`z-50 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
+              isMenuOpen ? 'translate-x-0' : '-translate-x-full'
+            }`}
+          >
+            {/* Tombol Close */}
+            <button
+              onClick={handleToggleMenu}
+              className="fixed top-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-3.5 w-3.5 fill-white"
+                viewBox="0 0 320.591 320.591"
+              >
+                <path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
+                <path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
+              </svg>
+            </button>
+
+            {/* List Menu */}
+            <ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
+              {MENU.map((item) => (
+                <li className="px-3 max-lg:border-b max-lg:py-3">
+                  <Link
+                    key={item.title}
+                    to={item.url}
+                    className={
+                      'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
+                    }
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+
+              <button className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden">
+                Akun
+              </button>
+            </ul>
+          </div>
+
+          {/* Search dan Toggle Button */}
+          <div className="align-center flex w-full justify-center">
+            <button
+              onClick={handleToggleMenu}
+              className="h-[63px] border border-white px-4 lg:hidden"
+            >
+              <svg
+                className="h-7 w-7"
+                fill="#fff"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+            <div className="w-full py-3">
+              <HeaderSearch></HeaderSearch>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/layouts/header-menu.tsx b/app/layouts/header-menu.tsx
index a679d32..aca354e 100644
--- a/app/layouts/header-menu.tsx
+++ b/app/layouts/header-menu.tsx
@@ -1,23 +1,28 @@
 import { Link } from 'react-router'
 
+import HeaderMenuMobile from '~/layouts/header-menu-mobile'
+
 import { HeaderSearch } from './header-search'
 import { MENU } from './menu'
 
 export const HeaderMenu = () => {
   return (
-    <div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
-      {MENU.map((item) => (
-        <Link
-          key={item.title}
-          to={item.url}
-          className={
-            'flex h-full items-center justify-center border-r border-white px-[35px]'
-          }
-        >
-          {item.title}
-        </Link>
-      ))}
-      <HeaderSearch />
-    </div>
+    <>
+      <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
+        {MENU.map((item) => (
+          <Link
+            key={item.title}
+            to={item.url}
+            className={
+              'flex h-full items-center justify-center border-r border-white px-[35px]'
+            }
+          >
+            {item.title}
+          </Link>
+        ))}
+        <HeaderSearch />
+      </div>
+      <HeaderMenuMobile />
+    </>
   )
 }
diff --git a/app/layouts/header-search.tsx b/app/layouts/header-search.tsx
index 844019e..adfa2dc 100644
--- a/app/layouts/header-search.tsx
+++ b/app/layouts/header-search.tsx
@@ -6,14 +6,14 @@ export const HeaderSearch = () => {
     <form className="flex flex-1 justify-between gap-[15px] px-[35px]">
       <input
         placeholder="Cari..."
-        className="flex-1 placeholder:text-white focus:ring-0 focus:outline-none"
+        className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none sm:text-2xl"
         size={1}
       />
       <Button
         type="submit"
         variant="icon"
         size="icon"
-        className="[&_svg]:size-[30px]"
+        className="[&_svg]:size-[20px] sm:[&_svg]:size-[30px]"
       >
         <SearchIcon />
       </Button>
diff --git a/app/layouts/header-top.tsx b/app/layouts/header-top.tsx
index 5c1cefe..66e49f5 100644
--- a/app/layouts/header-top.tsx
+++ b/app/layouts/header-top.tsx
@@ -5,24 +5,31 @@ import { APP } from '~/data/meta'
 
 export const HeaderTop = () => {
   return (
-    <div className="flex h-[100px] items-center justify-between gap-[15px] bg-white px-[50px] py-[20px]">
+    <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
       <Link
         to="/news"
-        className="h-full py-[5px]"
+        className="mt-2 h-full py-2"
       >
         <img
           src={APP.logo}
           alt={APP.title}
-          className="h-full w-auto"
+          className="h-3/4 w-auto sm:h-full"
         />
       </Link>
-      <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
+      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
         {APP.description}
       </div>
       <div className="flex items-center gap-[15px]">
-        <Button>About Us</Button>
-        <Button variant="newsSecondary">Akun</Button>
-        <div className="w-[60px]">
+        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
+          About Us
+        </Button>
+        <Button
+          variant="newsSecondary"
+          className="hidden sm:block"
+        >
+          Akun
+        </Button>
+        <div className="w-[50px] sm:w-[60px]">
           <img
             alt="language"
             src="/flags/id.svg"
diff --git a/app/pages/news/data.ts b/app/pages/news/data.ts
index c06af15..63d4ec2 100644
--- a/app/pages/news/data.ts
+++ b/app/pages/news/data.ts
@@ -24,18 +24,21 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-2.jpg',
+      tag: ['Hukum Property'],
     },
     {
       title: 'How does writing influence your personal brand?',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-3.jpg',
+      tag: ['Hukum'],
     },
     {
       title: 'Helping a local business reinvent itself',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-4.jpg',
+      tag: ['Hukum Property', 'PREMIUM CONTENT'],
     },
   ],
 }
@@ -50,18 +53,21 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-2.jpg',
+      tag: ['Hukum Property', 'PREMIUM CONTENT'],
     },
     {
       title: 'How does writing influence your personal brand?',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-3.jpg',
+      tag: ['Hukum Property', 'PREMIUM CONTENT'],
     },
     {
       title: 'Helping a local business reinvent itself',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       image: '/images/news-4.jpg',
+      tag: ['Hukum Property', 'PREMIUM CONTENT'],
     },
   ],
 }
diff --git a/app/routes/_layout.news.tsx b/app/routes/_layout.news.tsx
index fc5a9a2..7c02deb 100644
--- a/app/routes/_layout.news.tsx
+++ b/app/routes/_layout.news.tsx
@@ -12,15 +12,16 @@ const NewsLayout = () => {
         <HeaderTop />
         <HeaderMenu />
       </header>
-      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
+      <div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
         <img
           src="/images/banner.png"
           alt="banner"
-          className="h-[100px] w-full object-contain"
+          className="h-[50px] w-full object-fill sm:h-[100px] sm:object-contain"
         />
         <Outlet />
       </div>
-      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
+
+      <footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
         <FooterNewsletter />
         <FooterLinks />
       </footer>
diff --git a/app/types/news.ts b/app/types/news.ts
index 46a5d16..df00bd8 100644
--- a/app/types/news.ts
+++ b/app/types/news.ts
@@ -6,5 +6,6 @@ export type TNews = {
     title: string
     content: string
     image: string
+    tag?: Array<string>
   }[]
 }