diff --git a/app/_common/button/Button.tsx b/app/_common/button/Button.tsx
index f4641ff..f93df56 100644
--- a/app/_common/button/Button.tsx
+++ b/app/_common/button/Button.tsx
@@ -12,7 +12,7 @@ export type ButtonProps = {
 
 const Button:React.FC<ButtonProps> = ({ text, type }) => {
     return (
-        <Link href={"/"} className={`min-w-[42px] h-[42px] px-5 flex items-center justify-between text-white cursor-pointer border-0 bg-black rounded-lg text-base font-normal button ${type === ButtonType.BUTTON_OUTLINE ? 'button__outline !font-thin' : ''}`}>{ text }</Link>
+        <Link href={"/"} className={`min-w-[42px] h-[42px] px-5 flex items-center justify-between text-white cursor-pointer border-0 bg-black rounded-lg text-base font-normal button ${type === ButtonType.BUTTON_OUTLINE ? 'button__outline !font-normal' : ''}`}>{ text }</Link>
     )
 }
 
diff --git a/app/_common/icons/Icons.tsx b/app/_common/icons/Icons.tsx
new file mode 100644
index 0000000..ed159d1
--- /dev/null
+++ b/app/_common/icons/Icons.tsx
@@ -0,0 +1,35 @@
+export const TrendingIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M3.9929 0.625939C4.13088 0.54352 4.2886 0.5 4.44931 0.5C4.59954 0.5 4.74714 0.538023 4.87845 0.610295C8.87544 2.46727 11.1385 6.32323 10.9988 9.54683L10.9988 9.54716C10.9392 10.902 10.4542 12.1551 9.51453 13.0708C8.57487 13.9865 7.2248 14.5218 5.51533 14.5252C4.82872 14.5675 4.14047 14.4731 3.49048 14.2476C2.83534 14.0202 2.2323 13.6641 1.71685 13.2001C1.20139 12.7362 0.783938 12.1739 0.489046 11.5463C0.194154 10.9186 0.027783 10.2383 -0.000275804 9.54542L-0.000578149 9.53795L-0.000522329 9.53795C-0.0209942 8.73621 0.178555 7.94417 0.57646 7.24784C0.974365 6.55151 1.55542 5.97748 2.25655 5.58808C2.37945 5.51982 2.52542 5.50645 2.65867 5.55126C2.79193 5.59607 2.90017 5.69491 2.95686 5.82356C3.20152 6.37877 3.54425 6.88378 3.96732 7.31498C4.46391 6.66783 4.69233 5.83147 4.68558 4.91261C4.67754 3.81878 4.33395 2.64717 3.75882 1.64956C3.66486 1.49271 3.63053 1.30715 3.66234 1.1269C3.69467 0.943739 3.79303 0.77879 3.93881 0.663287C3.956 0.649664 3.97407 0.637188 3.9929 0.625939ZM4.94165 1.7577C5.40397 2.74496 5.67775 3.84365 5.68555 4.90526C5.69502 6.19406 5.31016 7.46724 4.34414 8.38726C4.15969 8.56293 3.87265 8.57185 3.67764 8.40797C3.12295 7.94184 2.65822 7.38047 2.30441 6.75183C1.95725 7.02235 1.66472 7.35895 1.4447 7.74398C1.13805 8.28062 0.98396 8.89087 0.999059 9.50871C1.02217 10.0671 1.15648 10.6152 1.39413 11.121C1.63231 11.628 1.96949 12.0822 2.38581 12.4569C2.80214 12.8315 3.28921 13.1192 3.81836 13.3028C4.34751 13.4865 4.90805 13.5624 5.46699 13.5262C5.47775 13.5255 5.48853 13.5252 5.49931 13.5252C7.00226 13.5252 8.09169 13.061 8.8166 12.3546C9.54444 11.6453 9.94941 10.6483 9.9998 9.50321C10.1142 6.86049 8.3102 3.53981 4.94165 1.7577ZM7.99932 9.02519C8.27546 9.02519 8.49932 9.24904 8.49932 9.52519C8.49932 10.1882 8.23592 10.8241 7.76708 11.293C7.29824 11.7618 6.66236 12.0252 5.99931 12.0252C5.72317 12.0252 5.49931 11.8013 5.49931 11.5252C5.49931 11.249 5.72317 11.0252 5.99931 11.0252C6.39714 11.0252 6.77867 10.8672 7.05997 10.5858C7.34128 10.3045 7.49931 9.92301 7.49931 9.52519C7.49931 9.24904 7.72317 9.02519 7.99932 9.02519Z"></path>
+    </svg>    
+}
+
+export const WebsitesIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M11 0.5C11 0.223858 11.2239 0 11.5 0H12.5C12.8978 0 13.2794 0.158035 13.5607 0.43934C13.842 0.720644 14 1.10217 14 1.5V2.5C14 2.77614 13.7761 3 13.5 3C13.2239 3 13 2.77614 13 2.5V1.5C13 1.36739 12.9473 1.24022 12.8536 1.14645C12.7598 1.05268 12.6326 1 12.5 1H11.5C11.2239 1 11 0.776142 11 0.5Z M13.5 5C13.7761 5 14 5.22386 14 5.5V8.5C14 8.77614 13.7761 9 13.5 9C13.2239 9 13 8.77614 13 8.5V5.5C13 5.22386 13.2239 5 13.5 5Z M13.5 11C13.7761 11 14 11.2239 14 11.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11Z M1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5V12.5C1 12.6326 1.05268 12.7598 1.14645 12.8536C1.24022 12.9473 1.36739 13 1.5 13H4.5C4.77614 13 5 13.2239 5 13.5C5 13.7761 4.77614 14 4.5 14H1.5C1.10217 14 0.720644 13.842 0.43934 13.5607C0.158035 13.2794 0 12.8978 0 12.5V1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0H4.5C4.77614 0 5 0.223858 5 0.5C5 0.776142 4.77614 1 4.5 1H1.5Z M6.5 0.5C6.5 0.223858 6.72386 0 7 0H8.5C8.77614 0 9 0.223858 9 0.5C9 0.776142 8.77614 1 8.5 1H7.5V13H8.5C8.77614 13 9 13.2239 9 13.5C9 13.7761 8.77614 14 8.5 14H7C6.72386 14 6.5 13.7761 6.5 13.5V0.5Z"></path>
+    </svg>
+}
+
+export const TechnologiesIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M0.5 8C0.776142 8 1 8.22386 1 8.5C1 8.63261 1.05268 8.75978 1.14645 8.85355C1.24022 8.94732 1.36739 9 1.5 9C1.77614 9 2 9.22386 2 9.5C2 9.77614 1.77614 10 1.5 10C1.10217 10 0.720644 9.84196 0.43934 9.56066C0.158035 9.27936 0 8.89782 0 8.5C0 8.22386 0.223858 8 0.5 8Z M0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0C1.77614 0 2 0.223858 2 0.5C2 0.776142 1.77614 1 1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5C1 1.77614 0.776142 2 0.5 2C0.223858 2 0 1.77614 0 1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934Z M8 0.5C8 0.223858 8.22386 0 8.5 0C8.89782 0 9.27936 0.158035 9.56066 0.43934C9.84196 0.720644 10 1.10217 10 1.5C10 1.77614 9.77614 2 9.5 2C9.22386 2 9 1.77614 9 1.5C9 1.36739 8.94732 1.24022 8.85355 1.14645C8.75978 1.05268 8.63261 1 8.5 1C8.22386 1 8 0.776142 8 0.5Z M3.5 0.5C3.5 0.223858 3.72386 0 4 0H6C6.27614 0 6.5 0.223858 6.5 0.5C6.5 0.776142 6.27614 1 6 1H4C3.72386 1 3.5 0.776142 3.5 0.5Z M0.5 3.5C0.776142 3.5 1 3.72386 1 4V6C1 6.27614 0.776142 6.5 0.5 6.5C0.223858 6.5 0 6.27614 0 6V4C0 3.72386 0.223858 3.5 0.5 3.5Z M9 4.5C9 4.22386 9.22386 4 9.5 4H12.5C12.8978 4 13.2794 4.15804 13.5607 4.43934C13.842 4.72064 14 5.10217 14 5.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H5.5C5.10217 14 4.72064 13.842 4.43934 13.5607C4.15804 13.2794 4 12.8978 4 12.5V9.5C4 9.22386 4.22386 9 4.5 9H8.5C8.63261 9 8.75979 8.94732 8.85355 8.85355C8.94732 8.75979 9 8.63261 9 8.5V4.5ZM10 5V8.5C10 8.89783 9.84196 9.27936 9.56066 9.56066C9.27936 9.84196 8.89783 10 8.5 10H5V12.5C5 12.6326 5.05268 12.7598 5.14645 12.8536C5.24022 12.9473 5.36739 13 5.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V5.5C13 5.36739 12.9473 5.24022 12.8536 5.14645C12.7598 5.05268 12.6326 5 12.5 5H10Z"></path>
+    </svg>
+}
+
+export const CollectionsIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C7.27614 13 7.5 13.2239 7.5 13.5C7.5 13.7761 7.27614 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7C14 7.27614 13.7761 7.5 13.5 7.5C13.2239 7.5 13 7.27614 13 7C13 3.68629 10.3137 1 7 1Z M13.3237 8.59131C13.5856 8.679 13.7268 8.96235 13.6391 9.2242C13.5505 9.48866 13.4466 9.74606 13.3284 9.99533C13.2101 10.2449 12.912 10.3512 12.6624 10.2329C12.4129 10.1146 12.3065 9.81647 12.4248 9.56695C12.5261 9.35345 12.615 9.13305 12.6908 8.90666C12.7785 8.64481 13.0619 8.50362 13.3237 8.59131ZM12.3707 10.6962C12.5854 10.8699 12.6186 11.1847 12.445 11.3994C12.0963 11.8305 11.6975 12.2192 11.2574 12.5569C11.0383 12.725 10.7244 12.6837 10.5563 12.4646C10.3882 12.2455 10.4296 11.9316 10.6487 11.7635C11.0262 11.4739 11.3684 11.1403 11.6675 10.7705C11.8412 10.5558 12.156 10.5226 12.3707 10.6962ZM10.0856 12.7443C10.1974 12.9968 10.0833 13.2921 9.83081 13.4038C9.57865 13.5155 9.31864 13.6127 9.05183 13.6943C8.78778 13.7752 8.5082 13.6267 8.42736 13.3626C8.34652 13.0986 8.49504 12.819 8.75908 12.7381C8.98748 12.6682 9.2101 12.585 9.42604 12.4894C9.67855 12.3777 9.97386 12.4917 10.0856 12.7443Z"></path>
+    </svg>
+}
+
+export const UIElementsIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H5C5.55228 0.5 6 0.947715 6 1.5V4.5C6 5.05228 5.55228 5.5 5 5.5H1C0.447715 5.5 0 5.05228 0 4.5V1.5ZM5 1.5H1V4.5H5V1.5Z M7.5 1.5C7.5 0.947715 7.94772 0.5 8.5 0.5H10.5C11.0523 0.5 11.5 0.947715 11.5 1.5V4.5C11.5 5.05228 11.0523 5.5 10.5 5.5H8.5C7.94772 5.5 7.5 5.05228 7.5 4.5V1.5ZM10.5 1.5H8.5V4.5H10.5V1.5Z M13.5 0.5C13.7761 0.5 14 0.723858 14 1V5C14 5.27614 13.7761 5.5 13.5 5.5C13.2239 5.5 13 5.27614 13 5V1C13 0.723858 13.2239 0.5 13.5 0.5Z"></path>
+    </svg>
+}
+
+export const BlogIcon:React.FC<{}> = () => {
+    return <svg width={11} height={15} viewBox="0 0 11 15">
+        <path d="M13.5 11C13.7761 11 14 11.2239 14 11.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11Z M13.5 4C13.7761 4 14 4.22386 14 4.5V8.5C14 8.77614 13.7761 9 13.5 9C13.2239 9 13 8.77614 13 8.5V4.5C13 4.22386 13.2239 4 13.5 4Z M5 13.5C5 13.2239 5.22386 13 5.5 13H8.5C8.77614 13 9 13.2239 9 13.5C9 13.7761 8.77614 14 8.5 14H5.5C5.22386 14 5 13.7761 5 13.5Z M1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0H12.5C12.7761 0 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H1.5Z"></path>
+    </svg>
+}
\ No newline at end of file
diff --git a/app/_components/header/Header.tsx b/app/_components/header/Header.tsx
index ebf4cd8..c4a2b3b 100644
--- a/app/_components/header/Header.tsx
+++ b/app/_components/header/Header.tsx
@@ -23,37 +23,37 @@ const Header:React.FC<HeaderProps> = ({}) => {
     return (
         <header className="fixed w-full h-full mt-2">
             <div className={`inner rounded-lg h-fit flex flex-col items-center transition ${active ? 'active' : ''}`}>
-                <div className="flex h-[54px] w-full items-center ps-1.5 pe-1.5 ">
+                <div className="flex h-[54px] w-full bg-transparent items-center ps-1.5 pe-1.5 ">
                     {/* Hamburger menu */}
-                <svg width={16} viewBox="0 0 20 20" className="block xl:hidden mr-3">
-                    <path d="M19.5,17.6H0.5c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5C20,17.4,19.8,17.6,19.5,17.6z M19.5,10.5H0.5C0.2,10.5,0,10.3,0,10s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,10.5,19.5,10.5z M19.5,3.4H0.5C0.2,3.4,0,3.2,0,2.9s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,3.4,19.5,3.4z"></path>
-                </svg>
-                {/* Logo */}
-                <div className="flex items-center justify-between">
-                    <Link href={"/"}>
-                        <svg width="30" height="16" viewBox="0 0 30 16">
-                            <path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z"></path>
-                        </svg>
-                    </Link>
-                </div>
-                {/* Navigation */}
-                <Navigation display={active} handleToggle={handleToggle}/>
-                {/* Search Bar */}
-                <SearchBar handleToggle={handleToggle} state={active}/>
-                {/* Login / Signup */}
-                <div className="flex items-center justify-between h-full gap-4 ml-5">
-                    <Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Log in</Link>
-                    <Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Sign Up</Link>
-                    <svg width={20} viewBox="0 0 20 20" className="block sm:hidden">
-                        <path d="M18.5,13.5L15.7,17l-1.9-1.7l-1.4,1.5l3.4,3.2l4.1-5.2L18.5,13.5z"></path>
-                        <path d="M14.2,11c-0.9-0.4-1.8-0.7-2.8-0.8c2.1-0.6,3.7-2.6,3.7-5C15.2,2.3,12.8,0,10,0C7.1,0,4.8,2.3,4.8,5.2 c0,2.3,1.6,4.3,3.7,5C3.7,10.9,0,15,0,20h2c0-4.4,3.6-8,8-8c1.3,0,2.6,0.3,3.6,0.9L14.2,11L14.2,11z M6.8,5.2C6.8,3.4,8.2,2,10,2 c1.7,0,3.2,1.4,3.2,3.2c0,1.7-1.4,3.2-3.2,3.2C8.2,8.3,6.8,6.9,6.8,5.2z"></path>
+                    <svg width={16} viewBox="0 0 20 20" className="block xl:hidden mr-3">
+                        <path d="M19.5,17.6H0.5c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5C20,17.4,19.8,17.6,19.5,17.6z M19.5,10.5H0.5C0.2,10.5,0,10.3,0,10s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,10.5,19.5,10.5z M19.5,3.4H0.5C0.2,3.4,0,3.2,0,2.9s0.2-0.5,0.5-0.5h18.9c0.3,0,0.5,0.2,0.5,0.5S19.8,3.4,19.5,3.4z"></path>
                     </svg>
-                </div>
-                {/* Additional Buttons */}
-                <div className="hidden lg:flex items-center justify-between gap-4 ml-5">
-                    <Button text="Be Pro" type={ButtonType.DEFAULT} />
-                    <Button text="Submit Website" type={ButtonType.BUTTON_OUTLINE} />    
-                </div>
+                    {/* Logo */}
+                    <div className="flex items-center justify-between">
+                        <Link href={"/"}>
+                            <svg width="30" height="16" viewBox="0 0 30 16">
+                                <path d="m18.4 0-2.803 10.855L12.951 0H9.34L6.693 10.855 3.892 0H0l5.012 15.812h3.425l2.708-10.228 2.709 10.228h3.425L22.29 0h-3.892ZM24.77 13.365c0 1.506 1.12 2.635 2.615 2.635C28.879 16 30 14.87 30 13.365c0-1.506-1.12-2.636-2.615-2.636s-2.615 1.13-2.615 2.636Z"></path>
+                            </svg>
+                        </Link>
+                    </div>
+                    {/* Navigation */}
+                    <Navigation display={active} handleToggle={handleToggle}/>
+                    {/* Search Bar */}
+                    <SearchBar handleToggle={handleToggle} state={active}/>
+                    {/* Login / Signup */}
+                    <div className="flex items-center justify-between h-full gap-4 ml-5">
+                        <Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Log in</Link>
+                        <Link href={"/"} className="hidden sm:flex items-center justify-between font-bold text-base">Sign Up</Link>
+                        <svg width={20} viewBox="0 0 20 20" className="block sm:hidden">
+                            <path d="M18.5,13.5L15.7,17l-1.9-1.7l-1.4,1.5l3.4,3.2l4.1-5.2L18.5,13.5z"></path>
+                            <path d="M14.2,11c-0.9-0.4-1.8-0.7-2.8-0.8c2.1-0.6,3.7-2.6,3.7-5C15.2,2.3,12.8,0,10,0C7.1,0,4.8,2.3,4.8,5.2 c0,2.3,1.6,4.3,3.7,5C3.7,10.9,0,15,0,20h2c0-4.4,3.6-8,8-8c1.3,0,2.6,0.3,3.6,0.9L14.2,11L14.2,11z M6.8,5.2C6.8,3.4,8.2,2,10,2 c1.7,0,3.2,1.4,3.2,3.2c0,1.7-1.4,3.2-3.2,3.2C8.2,8.3,6.8,6.9,6.8,5.2z"></path>
+                        </svg>
+                    </div>
+                    {/* Additional Buttons */}
+                    <div className="hidden lg:flex items-center justify-between gap-4 ml-5">
+                        <Button text="Be Pro" type={ButtonType.DEFAULT} />
+                        <Button text="Submit Website" type={ButtonType.BUTTON_OUTLINE} />    
+                    </div>
                 </div>
                 {/* Navigation Dropdown */}
                 <NavigationDropdown display={active}/>
diff --git a/app/_components/navigation/Navigation.tsx b/app/_components/navigation/Navigation.tsx
index d6ee48b..deb907d 100644
--- a/app/_components/navigation/Navigation.tsx
+++ b/app/_components/navigation/Navigation.tsx
@@ -37,7 +37,7 @@ export type NavigationProps = {
 const Navigation:React.FC<NavigationProps> = ({ display, handleToggle }) => {
     return (
         // Navigation Wrapper
-        <nav className={`hidden xl:flex items-center justify-between ms-[60px] gap-5 transition ${display ? 'hidden' : ''}`}>
+        <nav className={`hidden xl:flex items-center justify-between ms-[60px] gap-5 transition ${display ? '!hidden' : ''}`}>
             {
                 defaultNavigationLinks.map(({routeTo, name, dropdown}, index) => {
                     return (
diff --git a/app/_components/navigationDropdown/NavigationDropdown.tsx b/app/_components/navigationDropdown/NavigationDropdown.tsx
index 3ad34d3..074c7e8 100644
--- a/app/_components/navigationDropdown/NavigationDropdown.tsx
+++ b/app/_components/navigationDropdown/NavigationDropdown.tsx
@@ -1,11 +1,127 @@
+import { BlogIcon, CollectionsIcon, TechnologiesIcon, TrendingIcon, UIElementsIcon, WebsitesIcon } from "@/app/_common/icons/Icons"
+import Link from "next/link"
+import { useState } from "react"
+
+export const navigationData = [
+    {
+        name: "Trending",
+        Icon: TrendingIcon,
+        subLinks: [
+            {
+                name: "Portfolio Websites",
+                count: 8657
+            },
+            {
+                name: "Free Fonts",
+                count: 288
+            },
+            {
+                name: "Animated Websites",
+                count: 10351
+            },
+            {
+                name: "Sites of the Day",
+                count: 6137
+            },
+            {
+                name: "Scrolling",
+                count: 5135
+            },
+            {
+                name: "Portfolio Websites",
+                count: 5071
+            },
+            {
+                name: "One Page Design",
+                count: 6223
+            },
+            {
+                name: "E-commerce layouts",
+                count: 5583
+            },
+            {
+                name: "Architecture Websites",
+                count: 2383
+            },
+            {
+                name: "Photography Websites",
+                count: 1027
+            }
+        ]
+    },
+    {
+        name: "Websites",
+        Icon: WebsitesIcon
+    },
+    {
+        name: "Technologies",
+        Icon: TechnologiesIcon
+    },
+    {
+        name: "Collections",
+        Icon: CollectionsIcon
+    },
+    {
+        name: "UI Elements",
+        Icon: UIElementsIcon
+    },
+    {
+        name: "Blog",
+        Icon: BlogIcon
+    }
+]
+
 export type NavigationDropdownProps = {
     display: boolean
 }
 
 const NavigationDropdown:React.FC<NavigationDropdownProps> = ({ display }) => {
-    return (
-        <div className={`w-full min-h-[450px] bg-grey rounded-lg transition opacity-0 ${display ? 'flex opacity-1': ''}`}>
 
+    const [header, setActiveHeader] = useState<string>(navigationData[0].name);
+
+    const changeActiveHeader = (name: string) => {
+        setActiveHeader(name)
+    }
+
+    const activeHeader = navigationData.find((item) => item.name === header)
+
+    return (
+        <div className={`w-full h-full ${display ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
+            <div className="min-h-[450px] pt-0 pr-[424px] pb-[12px] pl-[57px]">
+                <nav className="flex justify-between w-full h-full">
+                    <ul>
+                        {
+                            navigationData.map(({ name, Icon }, index) => {
+                                return (
+                                    <li key={index} className={`${index===0 ? '' : 'mt-1'}`} onClick={() => changeActiveHeader(name)}>
+                                        <Link href={"/"}>
+                                            <span className={`flex font-normal items-center gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg ${activeHeader?.name === name ? 'bg-white' : 'bg-transparent'}`}>
+                                                <Icon />
+                                                { name }
+                                            </span>
+                                        </Link>
+                                    </li>
+                                )
+                            })
+                        }
+                    </ul>
+                    <ul className="flex justify-center items-between flex-1 flex-col">
+                        {
+                            activeHeader?.subLinks?.map((item, index) => {
+                                return (
+                                    <li key={index}>
+                                        <span className="flex items-center justify-between gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg">
+                                            <p className="flex items-center font-light">{item.name}</p>
+                                            <p className="flex items-center font-light">{item.count}</p>
+                                        </span>
+                                    </li>
+                                )
+                            })
+                        }
+                    </ul>
+                </nav>
+                
+            </div>
         </div>
     )
 }
diff --git a/app/_components/searchbar/SearchBar.tsx b/app/_components/searchbar/SearchBar.tsx
index 7be3eac..cf49b55 100644
--- a/app/_components/searchbar/SearchBar.tsx
+++ b/app/_components/searchbar/SearchBar.tsx
@@ -5,7 +5,7 @@ export type SearchProps = {
 
 const SearchBar:React.FC<SearchProps> = ({ handleToggle, state }) => {
     return (
-        <form action="#" className={`flex flex-1 items-center h-[42px] ml-5 xl:ml-10 brightness-95 bg-color rounded-lg pl-4 transition ${state ? '!bg-white': ''}`}>
+        <form action="#" className={`flex flex-1 items-center h-[42px] ml-5 brightness-95 bg-color rounded-lg pl-4 transition ${state ? '!bg-white !brightness-100': ''}`}>
             <button type="submit">
                 <svg width={14} viewBox="0 0 20 20">
                     <path d="M19.6,18.9l-5-5c1.3-1.5,2.1-3.4,2.1-5.5c0-4.6-3.7-8.2-8.2-8.2S0.2,3.9,0.2,8.5s3.7,8.2,8.2,8.2 c2.1,0,4-0.8,5.5-2.1l5,5c0.2,0.2,0.5,0.2,0.7,0C19.8,19.4,19.8,19.1,19.6,18.9z M1.2,8.5c0-4,3.2-7.2,7.2-7.2s7.2,3.2,7.2,7.2 c0,2-0.8,3.8-2.1,5.1c0,0,0,0,0,0s0,0,0,0c-1.3,1.3-3.1,2.1-5.1,2.1C4.5,15.7,1.2,12.5,1.2,8.5z"></path>
diff --git a/app/globals.scss b/app/globals.scss
index f4de190..4fa1dc9 100644
--- a/app/globals.scss
+++ b/app/globals.scss
@@ -35,6 +35,11 @@ body {
     }
 }
 
+/*********************************** HEIGHT **********************************/
+.h-fill {
+    height: -webkit-fill-available;
+}
+
 /************************************ COLOR **********************************/
 
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 21164f8..c454ba9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { Cabin } from "next/font/google";
+import { Lato } from "next/font/google";
 import "./globals.scss";
 import Header from "./_components/header/Header";
 
-const cabin = Cabin({ subsets: ["latin"] });
+const lato = Lato({ 
+  subsets: ["latin"], 
+  style: ['normal'],
+  weight: ['100', '300', '400', '700', '900'] 
+});
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -18,7 +22,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={cabin.className}>
+      <body className={lato.className}>
         <Header />
         {children}
       </body>