diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
index 252e71d..bd34d93 100644
--- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import { SelectedBaan } from '..';
 import { CheckCircleIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 
 const profilePic = '/images/pfp-placeholder.svg';
 
@@ -23,8 +24,8 @@ export default function BaanPanel() {
                             key={data.name}
                             className="flex h-full w-full flex-col items-center justify-center gap-4 px-4"
                         >
-                            <div className="relative aspect-3/4 w-full rounded-lg border-2 border-purple lg:w-28">
-                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg rounded-tl-lg bg-purple px-2 font-bold leading-none lg:h-7 lg:text-lg">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
+                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none lg:h-7 lg:text-lg">
                                     {data.num}
                                 </p>
                                 <Image fill src={data.imgUrl} alt={data.name} />
@@ -42,9 +43,11 @@ export default function BaanPanel() {
                     <CheckCircleIcon className="h-8" />
                     ระบบได้ทำการบันทึกเรียบร้อยแล้ว
                 </p>
-                <button className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
-                    เปลี่ยนอันดับ
-                </button>
+                <Link href="/baan-selection">
+                    <button className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
+                        เปลี่ยนอันดับ
+                    </button>
+                </Link>
             </div>
         </div>
     );
diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
index 60b3305..647ca31 100644
--- a/src/components/Profile/BaanSelection/components/GroupPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
@@ -25,14 +25,14 @@ export default function GroupPanel() {
             <p className="h-12 text-center text-xl font-bold text-purple lg:text-3xl">
                 สมาชิกในกลุ่ม(2/3)
             </p>
-            <div className="flex h-full flex-col items-center justify-center gap-4 lg:flex-row">
+            <div className="flex h-full flex-col justify-center gap-4 lg:flex-row">
                 {group.map((data: GroupMember) => {
                     return (
                         <div
                             className="relative flex h-full w-full flex-col items-center gap-4 px-4"
                             key={data.name}
                         >
-                            <div className="relative aspect-3/4 w-full overflow-clip rounded-lg border-2 border-purple lg:w-28">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
                                 <Image src={data.imgUrl} fill alt={data.name} />
                             </div>
                             <div className="relative z-0 flex select-none flex-col text-center text-lg leading-none text-purple">
diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
index 6bf014b..8211639 100644
--- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
@@ -6,14 +6,14 @@ const profilePic = '/images/pfp-placeholder.svg';
 export default function ProfileInfoPanel() {
     return (
         <div className="flex min-h-full flex-col items-center justify-center gap-8 rounded-t-2xl bg-white p-12 xl:rounded-l-2xl xl:rounded-tr-none">
-            <div className="relative aspect-3/4 w-full rounded-lg ring-8 ring-gray-300">
+            <div className="relative aspect-3/4 w-full max-w-xxs rounded-lg ring-8 ring-gray-300">
                 <StarIcon className="absolute h-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow stroke-orange stroke-2 p-2" />
                 <Image src={profilePic} fill alt="profile pic" />
             </div>
             <div className="flex flex-col">
-                <div className="select-none text-center text-3xl font-bold text-purple">
+                <p className="select-none text-center text-3xl font-bold text-purple">
                     แจฮยอน <br /> คงแก่การเรียน
-                </div>
+                </p>
                 <button className="mx-auto mt-8 w-36 rounded-lg bg-pink-400 py-2 text-xl ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
                     แก้ไขข้อมูล
                 </button>
diff --git a/src/components/baan-selection/FilterButton.tsx b/src/components/baan-selection/FilterButton.tsx
index 6bb6041..b6067bd 100644
--- a/src/components/baan-selection/FilterButton.tsx
+++ b/src/components/baan-selection/FilterButton.tsx
@@ -1,34 +1,52 @@
 import { BaanSize } from '@/types/baan';
 
-const FilterButton = (props: any) => {
+interface FilterButtonProps {
+    filter: BaanSize;
+    filterBaan: (f: BaanSize, n: number) => void;
+}
+
+const FilterButton = (props: FilterButtonProps) => {
     return (
-        <div className="mt-8 flex overflow-scroll px-2 py-2 lg:px-4 lg:py-4">
+        <div className="flex w-full flex-wrap gap-6 py-8">
             <button
-                className={`${props.toggleColor[0]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Small && 'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Small, 0)}
             >
                 บ้านขนาดเล็ก (S)
             </button>
             <button
-                className={`${props.toggleColor[1]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Medium &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Medium, 1)}
             >
                 บ้านขนาดกลาง (M)
             </button>
             <button
-                className={`${props.toggleColor[2]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.Large && 'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.Large, 2)}
             >
                 บ้านขนาดใหญ่ (L)
             </button>
             <button
-                className={`${props.toggleColor[3]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.ExtraLarge &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.ExtraLarge, 3)}
             >
                 บ้านขนาดใหญ่พิเศษ (XL)
             </button>
             <button
-                className={`${props.toggleColor[4]} select-size-button whitespace-nowrap`}
+                className={`${
+                    props.filter === BaanSize.ExtraExtraLarge &&
+                    'ring-8 ring-pink-400/50'
+                } w-fit whitespace-nowrap rounded-lg bg-pink-400 px-2 py-1 text-xs ring-4 ring-pink-400/30 transition-all duration-300 ease-in-out hover:ring-8 lg:px-4 lg:py-2 lg:text-sm`}
                 onClick={() => props.filterBaan(BaanSize.ExtraExtraLarge, 4)}
             >
                 บ้านขนาดใหญ่พิเศษพิเศษ (XXL)
diff --git a/src/components/baan-selection/ListBaan.tsx b/src/components/baan-selection/ListBaan.tsx
index ae701cd..2fcf0ee 100644
--- a/src/components/baan-selection/ListBaan.tsx
+++ b/src/components/baan-selection/ListBaan.tsx
@@ -6,32 +6,28 @@ const ListBaan = (props: any) => {
         .filter(
             (e: IBaan) =>
                 e.name.includes(props.input) && isAdded(props.selectedBaan, e)
-        ) //Filter when typing the search bar
+        )
         .map((e: IBaan) => {
             return (
                 <div
                     key={e.name}
-                    className="text-md flex flex-col items-center"
+                    className="text-md mx-auto flex h-min w-min flex-col items-center gap-2"
                 >
                     <div
-                        className={`mx-4 my-4 flex h-32 w-32 items-center justify-center rounded-xl bg-white ring-4 ring-purple lg:h-40 lg:w-40 min-[1600px]:h-56 min-[1600px]:w-56`}
+                        className="relative aspect-square w-36 max-w-full items-center justify-center overflow-clip rounded-xl bg-white ring-4 ring-purple"
                         draggable
                         onDragStart={(event) =>
                             event.dataTransfer.setData(
                                 'Data',
                                 JSON.stringify(e)
                             )
-                        } //Handle dragging event
+                        }
                     >
-                        <Image
-                            src={e.imageUrl}
-                            alt={e.name}
-                            width={300}
-                            height={300}
-                            className="rounded-xl bg-black object-contain"
-                        />
+                        <Image src={e.imageUrl} alt={e.name} fill />
                     </div>
-                    <p>{`${e.name} (${convertSize.get(e.size)})`}</p>
+                    <p>
+                        {e.name} ({convertSize.get(e.size)})
+                    </p>
                 </div>
             );
         });
diff --git a/src/components/baan-selection/SearchBar.tsx b/src/components/baan-selection/SearchBar.tsx
index f2f4d58..306849e 100644
--- a/src/components/baan-selection/SearchBar.tsx
+++ b/src/components/baan-selection/SearchBar.tsx
@@ -3,9 +3,9 @@ import { ChangeEvent } from 'react';
 
 const SearchBar = (props: any) => {
     return (
-        <form className="w-full text-black lg:w-full">
+        <form className="relative w-full text-purple">
             <label htmlFor="search">
-                <MagnifyingGlassIcon className="absolute h-5 w-5 translate-x-3 translate-y-[0.22rem] object-contain lg:h-6 lg:w-6 lg:translate-y-[0.35rem]" />
+                <MagnifyingGlassIcon className="absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 lg:h-6 lg:w-6" />
             </label>
             <input
                 type="text"
@@ -16,14 +16,9 @@ const SearchBar = (props: any) => {
                 onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     props.setInput(e.target.value);
                 }}
-                className="w-full rounded-3xl bg-white py-1 pl-11 pr-4 text-sm ring-8 ring-white/20 max-[400px]:placeholder-white lg:text-lg"
+                className="w-full rounded-3xl bg-white py-1 pl-11 text-sm ring-8 ring-white/20 lg:text-lg"
             />
-            <button>
-                <HomeIcon
-                    color="#E95682D6"
-                    className="absolute -translate-x-8 -translate-y-[0.90rem] object-contain max-lg:h-5 max-lg:w-5 lg:-translate-x-11 lg:-translate-y-[1.3rem]"
-                />
-            </button>
+            <HomeIcon className="absolute right-4 top-1/2 w-5 -translate-y-1/2 text-pink-400 lg:w-6" />
         </form>
     );
 };
diff --git a/src/components/baan-selection/SelectedBaan.tsx b/src/components/baan-selection/SelectedBaan.tsx
index bf1c68a..db23426 100644
--- a/src/components/baan-selection/SelectedBaan.tsx
+++ b/src/components/baan-selection/SelectedBaan.tsx
@@ -7,44 +7,31 @@ const SelectedBaan = (props: any) => {
     return (
         <div
             key={props.num}
-            className="flex flex-col items-center text-sm lg:flex-row"
-            onDrop={props.handleDrop} //Handle the event that user drag new Baan to the div => Go to line 349...
+            className="flex flex-col items-center gap-2 text-sm text-purple lg:flex-row"
+            onDrop={props.handleDrop}
             onDragOver={(e) => e.preventDefault()}
         >
-            <div
-                className={`mx-4 my-3 flex h-20 w-20 items-center justify-center rounded-lg bg-white ring-2 ring-purple lg:h-24 lg:w-24`}
-            >
-                <div className="absolute flex h-5 w-5 -translate-x-8 -translate-y-8 items-center justify-center rounded-md bg-purple text-white lg:h-7 lg:w-7 lg:-translate-x-9 lg:-translate-y-9">
-                    <p>{props.num}</p>
-                </div>
+            <div className="relative flex aspect-square w-32 max-w-full items-center justify-center overflow-clip rounded-lg border-2 border-purple bg-white">
+                <p className="text-md absolute left-0 top-0 z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none text-white lg:h-7 lg:text-lg">
+                    {props.num}
+                </p>
                 {props.id === -1 ? (
                     <p className="text-gray-500">Null</p>
                 ) : (
-                    <Image
-                        src={props.imageUrl}
-                        alt={props.name}
-                        width={100}
-                        height={100}
-                        className="rounded-lg bg-black object-contain"
-                    />
+                    <Image src={props.imageUrl} alt={props.name} fill />
                 )}
             </div>
             {props.id === -1 ? (
-                <div className="flex w-[8.25rem] flex-col items-center justify-center lg:mx-3 lg:flex-row">
-                    <p>ท่านยังไม่ได้เลือกบ้าน</p>
-                </div>
+                <p>ท่านยังไม่ได้เลือกบ้าน</p>
             ) : (
-                <div className="flex flex-col items-center lg:flex-row">
-                    <p className="mx-3 mb-3 lg:mb-0 lg:w-28">{`${
-                        props.name
-                    } (${convertSize.get(props.size)})`}</p>
-                    <button //Event when clicking on the trash button
+                <div className="flex flex-col items-center gap-2 lg:flex-row">
+                    <p>{`${props.name} (${convertSize.get(props.size)})`}</p>
+                    <button
                         onClick={() => {
                             const resetBaan: SelectedBaanRank[] = [
                                 ...props.baan,
-                            ]; //Copy the data from the selected-baan
+                            ];
                             resetBaan[props.num - 1] = {
-                                //Clear the data inside the index to default
                                 ...resetBaan[props.num - 1],
                                 name: '',
                                 size: BaanSize._,
@@ -52,10 +39,9 @@ const SelectedBaan = (props: any) => {
                                 id: -1,
                             };
                             props.setSelectedBaan(resetBaan);
-                            // setSelectedBaan(resetBaan);
                         }}
                     >
-                        <TrashIcon width={20} height={20} />
+                        <TrashIcon className="w-5 hover:opacity-70" />
                     </button>
                 </div>
             )}
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 30ec41d..9fcd644 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import {
     ReactNode,
     createContext,
-    use,
     useCallback,
     useContext,
     useEffect,
@@ -80,7 +79,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
         switch (router.pathname) {
             case '/':
                 if (user) {
-                    if (alreadyRegistered) router.push('/wait-baan-selection');
+                    if (alreadyRegistered) router.push('/profile');
                     else router.push('/register');
                 }
                 break;
@@ -88,10 +87,12 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
                 if (!user) {
                     router.push('/');
                 } else if (alreadyRegistered) {
-                    router.push('/wait-baan-selection');
+                    router.push('/profile');
                 }
                 break;
             case '/wait-baan-selection':
+            case '/profile':
+            case '/baan-selection':
                 if (!user) {
                     router.push('/');
                 } else if (!alreadyRegistered) {
diff --git a/src/pages/baan-selection/index.tsx b/src/pages/baan-selection/index.tsx
index 30e36f2..d064396 100644
--- a/src/pages/baan-selection/index.tsx
+++ b/src/pages/baan-selection/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { useState } from 'react';
 import SelectedBaan from '@/components/baan-selection/SelectedBaan';
 import ListBaan from '@/components/baan-selection/ListBaan';
 import { BaanSize, IBaan } from '@/types/baan';
@@ -9,15 +9,7 @@ import SearchBar from '@/components/baan-selection/SearchBar';
 
 const BaanChoosing = () => {
     const [input, setInput] = useState<string>(''); //Input in search-baan bar
-    const [fill, setFill] = useState<BaanSize>(BaanSize._); //Check if the baan size filter is activated in which button
-    const [toggleColor, setToggleColor] = useState<string[]>([
-        //Set the style of the filter button
-        'unclicked-size-button',
-        'unclicked-size-button',
-        'unclicked-size-button',
-        'unclicked-size-button',
-        'unclicked-size-button',
-    ]);
+    const [filter, setFilter] = useState<BaanSize>(BaanSize._); //Check if the baan size filter is activated in which button
     const [baan, setBaan] = useState<IBaan[]>(testBaanData); //The list of every baans in RPKM...
     const [selectedBaan, setSelectedBaan] = useState<SelectedBaanRank[]>([
         //Baans that the user chooses
@@ -45,31 +37,17 @@ const BaanChoosing = () => {
     ]);
 
     const filterBaan = (f: BaanSize, n: number) => {
-        //Handle when clicking on the filter button by size
-        setBaan(testBaanData); //Reset the data in Baan
-        const toToggle: string[] = [
-            //Reset data in toggle
-            'unclicked-size-button',
-            'unclicked-size-button',
-            'unclicked-size-button',
-            'unclicked-size-button',
-            'unclicked-size-button',
-        ];
-        if (fill == f) setFill(BaanSize._);
-        //If clicking on the same button, reset to default filter (every baan)
+        setBaan(testBaanData);
+        if (filter == f) setFilter(BaanSize._);
         else {
-            setFill(f);
-            setBaan(testBaanData.filter((e: IBaan) => e.size == f)); //Filter baan by size button and change the button color
-            toToggle[n] =
-                'bg-red-500 ring-pink-200/30 transition-all duration-300';
+            setFilter(f);
+            setBaan(testBaanData.filter((e: IBaan) => e.size == f));
         }
-        setToggleColor(toToggle);
     };
+
     const handleDrop = (e: React.DragEvent, n: number) => {
-        //Handle event when dragging
-        if (selectedBaan[n - 1].id !== -1) return; //If there is already a data in the div (not null), exit function
+        if (selectedBaan[n - 1].id !== -1) return;
         const widget: SelectedBaanRank = JSON.parse(
-            //Convert JSON string to SelectedBaanRank
             e.dataTransfer.getData('Data') as string
         );
         const data: SelectedBaanRank[] = [...selectedBaan];
@@ -82,17 +60,18 @@ const BaanChoosing = () => {
         };
         setSelectedBaan(data);
     };
+
     return (
-        <>
-            <div className="min-h-screen w-screen translate-y-24 items-center justify-center lg:z-50 lg:flex lg:-translate-y-[2.5rem] lg:flex-row lg:text-white">
-                <div className="lg:mb-none mx-12 flex flex-col items-center justify-center border bg-white px-8 py-10 text-black max-lg:rounded-t-3xl lg:mx-0 lg:mb-6 lg:ml-auto lg:mr-0 lg:h-[34rem] lg:w-fit lg:items-start lg:rounded-l-3xl min-[1600px]:h-[44rem]">
-                    <h1 className="relative z-0 select-none text-3xl font-bold leading-none tracking-wider lg:mt-8 lg:text-5xl">
+        <div className="flex min-h-screen w-full items-center justify-center px-6 py-24">
+            <div className="flex min-h-max w-full flex-col justify-center xl:flex-row">
+                <div className="flex w-full flex-col items-start gap-2 border bg-white px-8 py-10 text-purple max-xl:rounded-t-3xl xl:w-fit xl:items-start xl:justify-center xl:rounded-l-3xl">
+                    <h1 className="select-none text-3xl font-bold xl:text-5xl">
                         เลือกบ้าน
                     </h1>
-                    <h2 className="lg:text-l relative z-0 my-3 select-none text-xl">
+                    <h2 className="select-none text-xl">
                         เลือก 3 บ้านที่สนใจมากที่สุด
                     </h2>
-                    <div className="mx-auto flex h-full flex-wrap items-start justify-evenly max-[570px]:flex-col lg:flex-col">
+                    <div className="flex w-full flex-wrap justify-between gap-4 xl:flex-col">
                         {selectedBaan.map(
                             (e: SelectedBaanRank, index: number) => {
                                 return (
@@ -110,18 +89,15 @@ const BaanChoosing = () => {
                         )}
                     </div>
                 </div>
-                <div className="lg:mb-none p-auto mx-12 mb-6 h-auto border bg-black/50 px-8 py-8 backdrop-blur-sm max-lg:rounded-b-3xl lg:mx-0 lg:mr-auto lg:h-[34rem] lg:w-3/5 lg:rounded-r-3xl min-[1600px]:h-[44rem]">
-                    <div className="flex items-center">
-                        <div className="mr-2 flex w-32 items-center justify-center">
-                            <h1 className="text-lg lg:text-2xl">ค้นหาบ้าน</h1>
-                        </div>
+                <div className="flex h-full w-full flex-col border bg-black/50 p-8 backdrop-blur-sm max-xl:rounded-b-3xl xl:w-3/5 xl:rounded-r-3xl">
+                    <div className="flex items-center gap-2">
+                        <h1 className="flex w-32 items-center justify-center text-lg lg:text-2xl">
+                            ค้นหาบ้าน
+                        </h1>
                         <SearchBar input={input} setInput={setInput} />
                     </div>
-                    <FilterButton
-                        toggleColor={toggleColor}
-                        filterBaan={filterBaan}
-                    />
-                    <div className="mx-4 mb-20 mt-6 flex flex-wrap items-center justify-evenly rounded-3xl bg-white text-black ring-8 ring-white/40 lg:mb-0 lg:mt-3 lg:h-[20rem] lg:overflow-y-scroll lg:py-4 min-[1600px]:h-[30rem]">
+                    <FilterButton filter={filter} filterBaan={filterBaan} />
+                    <div className="grid w-full grid-flow-row auto-rows-auto grid-cols-1 gap-8 rounded-3xl bg-white p-4 text-purple ring-8 ring-white/40 sm:grid-cols-2 md:grid-cols-4 xl:h-96 xl:overflow-y-auto">
                         <ListBaan
                             baan={baan}
                             selectedBaan={selectedBaan}
@@ -130,7 +106,7 @@ const BaanChoosing = () => {
                     </div>
                 </div>
             </div>
-        </>
+        </div>
     );
 };
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index bfdeb70..02bac95 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -6,10 +6,4 @@
     .input {
         @apply mb-4 w-full rounded-full border-gray-100 bg-gray-100 p-2 px-3;
     }
-    .select-size-button {
-        @apply mr-6 w-fit rounded-lg px-2 py-1 text-xs ring-8 lg:px-4 lg:py-2 lg:text-sm;
-    }
-    .unclicked-size-button {
-        @apply bg-pink-400 ring-pink-400/30 transition-all duration-300 hover:bg-red-400;
-    }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0519a6e..841f2e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,6 +35,9 @@ const config = {
                 '5xl': '3rem',
                 '6xl': '4.5rem',
             },
+            maxWidth: {
+                xxs: '14rem',
+            },
         },
     },
     plugins: [],