diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..3a9ce9d
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,34 @@
+import { Flex, FlexProps } from "@chakra-ui/react";
+
+export interface NavBarProps extends FlexProps {}
+
+export const NavBar = ({ children, ...props }: NavBarProps) => {
+	return (
+		<Flex
+			as="nav"
+			justifyContent="center"
+			h="50px"
+			position="sticky"
+			top="0"
+			w="100%"
+			paddingLeft="15px"
+			paddingRight="15px"
+			borderBottomWidth="1px"
+			borderColor="violet.400"
+			_before={{
+				content: '""',
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				bgGradient: "bg-gradient",
+				filter: "brightness(0.6)",
+				zIndex: -1,
+			}}
+			{...props}
+		>
+			{children}
+		</Flex>
+	);
+};
diff --git a/src/layout/TopBar/Mobile.tsx b/src/layout/TopBar/Mobile.tsx
index e8c0e0c..9f57a25 100644
--- a/src/layout/TopBar/Mobile.tsx
+++ b/src/layout/TopBar/Mobile.tsx
@@ -21,6 +21,7 @@ import { IoChevronDown, IoChevronUp } from "react-icons/io5";
 import { useRouter } from "next/router";
 import { trpc } from "@util/trpc";
 import { DarkModeButton } from "@component/DarkModeButton";
+import { NavBar } from "@component/NavBar";
 
 export const MobileTopBar = () => {
 	const user = trpc.me.me.useQuery().data;
@@ -33,16 +34,7 @@ export const MobileTopBar = () => {
 	};
 
 	return (
-		<Flex
-			justifyContent="space-between"
-			alignItems="center"
-			bgColor="blackAlpha.600"
-			h="50px"
-			paddingLeft="15px"
-			paddingRight="15px"
-			borderBottomWidth="1px"
-			borderColor="violet.400"
-		>
+		<NavBar justifyContent="space-between">
 			<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
 				<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
 					<Image height="35px" src="/images/header.png" alt="shibaac" />
@@ -153,6 +145,6 @@ export const MobileTopBar = () => {
 					</VStack>
 				</Flex>
 			)}
-		</Flex>
+		</NavBar>
 	);
 };
diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
index 2abc2bb..c615f1a 100644
--- a/src/layout/TopBar/index.tsx
+++ b/src/layout/TopBar/index.tsx
@@ -9,6 +9,7 @@ import TextInput from "@component/TextInput";
 import DropdownButton from "@component/DropdownButton";
 import { useRouter } from "next/router";
 import { DarkModeButton } from "@component/DarkModeButton";
+import { NavBar } from "@component/NavBar";
 
 export interface NavigationItems {
 	text: string;
@@ -44,15 +45,7 @@ export const TopBar = () => {
 	const router = useRouter();
 
 	return (
-		<Flex
-			justifyContent="center"
-			bgColor="blackAlpha.600"
-			h="50px"
-			paddingLeft="15px"
-			paddingRight="15px"
-			borderBottomWidth="1px"
-			borderColor="violet.400"
-		>
+		<NavBar>
 			<HStack>
 				<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
 					<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
@@ -132,6 +125,6 @@ export const TopBar = () => {
 					</Text>
 				</TopBarItem>
 			</Link>
-		</Flex>
+		</NavBar>
 	);
 };
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 7f43b24..b0ddbbb 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -13,7 +13,7 @@ const Layout = ({ children }: PropsWithChildren) => {
 		<>
 			<Head title="News" />
 			{TopBarComponent && <TopBarComponent />}
-			<Flex role="main" w={{ lg: "1050px", base: "100%" }} bgColor={bgColor} mt="2em" marginX={"auto"} padding="1em">
+			<Flex as="main" w={{ lg: "1050px", base: "100%" }} bgColor={bgColor} mt="2em" marginX={"auto"} padding="1em">
 				{children}
 			</Flex>
 			<Text userSelect="none" fontSize="sm" position="fixed" color="white" bottom="5" left="50%" transform="translateX(-50%)">
