diff --git a/src/components/BU/BUHero.tsx b/src/components/BU/BUHero.tsx
index fad93d5..11edfa0 100644
--- a/src/components/BU/BUHero.tsx
+++ b/src/components/BU/BUHero.tsx
@@ -1,4 +1,4 @@
-import { breakpoints } from '@/configs/ui.configs'
+import { breakpoints, uiConfigs } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import Image from 'next/image'
import Link from 'next/link'
@@ -131,6 +131,7 @@ const Container = styled.div`
flex-wrap: wrap;
box-sizing: border-box;
padding: 0 16px;
+ margin-top: calc(${uiConfigs.navbarHeight}px);
@media (max-width: ${breakpoints.md}px) {
padding: 0 8px;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index fa5e615..ce65186 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -7,9 +7,9 @@ import { useEffect, useState } from 'react'
export const Navbar = () => {
const [scrolled, setScrolled] = useState(false)
const router = useRouter()
- const isTransparent = router.pathname === '/' || router.pathname === '/[bu]'
+ const isTransparent = router.pathname === '/'
- const background = router.pathname === '/[bu]' ? 'transparent' : 'black'
+ const background = 'black'
useEffect(() => {
const handleScroll = () => {
@@ -60,6 +60,7 @@ const Container = styled.nav<{
display: flex;
background-color: ${({ isTransparent, scrolled, background }) =>
!scrolled && isTransparent ? background : scrolled ? 'black' : background};
+
height: ${uiConfigs.navbarHeight}px;
padding: 4px 16px;
diff --git a/src/pages/[bu].tsx b/src/pages/[bu].tsx
index 9cdf931..a1e8d7f 100644
--- a/src/pages/[bu].tsx
+++ b/src/pages/[bu].tsx
@@ -6,7 +6,6 @@ import {
BUMenus,
BUMilestones,
BUTestimonials,
- BUVideo,
} from '@/components/BU'
import { ChallengeList } from '@/components/Challenges'
import { JobList } from '@/components/Jobs'
@@ -32,7 +31,7 @@ const Page = ({ bu, jobs, issues }: any) => {
return (
<>