diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..7c47cff
--- /dev/null
+++ b/src/components/NavigationBar.tsx
@@ -0,0 +1,26 @@
+import { Spacer } from "@/foundations";
+import { flex, mq } from "@/style-predefines";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import chroma from "chroma-js";
+
+const NavigationContainer = styled.div(
+  ({ theme }) => css`
+    height: 100%;
+    width: ${theme.spacings.xxs * 36}px;
+    padding-top: ${theme.spacings.xxs * 24}px;
+    background-color: ${chroma(theme.backgroundColor.light).darken(0.3).hex()};
+    ${flex(theme, "column", "flex-start", "stretch", "sm")}
+    ${mq.dark} {
+      background-color: ${chroma(theme.backgroundColor.dark).brighten(0.3).hex()};
+    }
+  `
+);
+
+export function NavigationBar() {
+  return (
+    <NavigationContainer>
+      <Spacer />
+    </NavigationContainer>
+  );
+}
diff --git a/src/components/WindowMoveHandler.tsx b/src/components/WindowMoveHandler.tsx
new file mode 100644
index 0000000..b113abe
--- /dev/null
+++ b/src/components/WindowMoveHandler.tsx
@@ -0,0 +1,17 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const Handler = styled.div(
+  ({ theme }) => css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: ${theme.spacings.xxs * 24}px;
+    z-index: 1;
+  `
+);
+
+export function WindowMoveHandler() {
+  return <Handler data-tauri-drag-region />;
+}
diff --git a/src/components/WindowMoveHandler/WindowMoveHandler.tsx b/src/components/WindowMoveHandler/WindowMoveHandler.tsx
deleted file mode 100644
index d4bac7c..0000000
--- a/src/components/WindowMoveHandler/WindowMoveHandler.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-const Handler = styled.div(({ theme }) =>
-  css({
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: theme.spacings.xxs * 24,
-    zIndex: 1,
-  })
-);
-
-export function WindowMoveHandler() {
-  return <Handler data-tauri-drag-region />;
-}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 9118272..bf14e32 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1 +1,2 @@
-export { WindowMoveHandler } from "./WindowMoveHandler/WindowMoveHandler";
+export { NavigationBar } from "./NavigationBar";
+export { WindowMoveHandler } from "./WindowMoveHandler";
diff --git a/src/foundations/Avatar.tsx b/src/foundations/Avatar.tsx
new file mode 100644
index 0000000..021f354
--- /dev/null
+++ b/src/foundations/Avatar.tsx
@@ -0,0 +1,42 @@
+import { flex } from "@/style-predefines";
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { __, always, cond, includes, T } from "ramda";
+import { PropsWithChildren } from "react";
+
+type AvatarProps = {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  square?: boolean;
+  bgColor?: string;
+};
+
+const AvatarContainer = styled("div")<AvatarProps>(({ theme, size, square }) => {
+  const radiusSize = cond([
+    [includes(__, ["xs", "sm", "md"]), always("xxs")],
+    [T, always("xs")],
+  ])(size);
+  return css`
+    height: ${theme.spacings[size]};
+    width: ${theme.spacings[size]};
+    border-radius: ${theme.radius[square ? "none" : radiusSize]};
+    overflow: hidden;
+    ${flex(theme, "row", "center", "center")}
+    .child {
+      overflow: hidden;
+    }
+  `;
+});
+
+export function Avatar({
+  size = "md",
+  square = false,
+  bgColor,
+  children,
+}: PropsWithChildren<AvatarProps>) {
+  const theme = useTheme();
+  return (
+    <AvatarContainer size={size} square={square}>
+      <div className="child">{children}</div>
+    </AvatarContainer>
+  );
+}
diff --git a/src/foundations/Spacer.tsx b/src/foundations/Spacer.tsx
new file mode 100644
index 0000000..e595b67
--- /dev/null
+++ b/src/foundations/Spacer.tsx
@@ -0,0 +1,10 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const Spacer = styled.div(
+  () => css`
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-self: stretch;
+  `
+);
diff --git a/src/foundations/index.tsx b/src/foundations/index.tsx
index e69de29..3743486 100644
--- a/src/foundations/index.tsx
+++ b/src/foundations/index.tsx
@@ -0,0 +1 @@
+export { Spacer } from "./Spacer";
diff --git a/src/pages/MainLayout.tsx b/src/pages/MainLayout.tsx
index 9804969..f80da0b 100644
--- a/src/pages/MainLayout.tsx
+++ b/src/pages/MainLayout.tsx
@@ -1,22 +1,27 @@
-import { WindowMoveHandler } from "@/components";
+import { NavigationBar, WindowMoveHandler } from "@/components";
 import { flex } from "@/style-predefines";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-const LayoutContainer = styled.div(({ theme }) =>
-  css({
-    height: "100vh",
-    width: "100vw",
-    paddingTop: theme.spacings.xxs * 24,
-    ...flex(theme, "row", "flex-start", "stretch"),
-    overflow: "hidden",
-  })
+const LayoutContainer = styled.div(
+  ({ theme }) => css`
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    ${flex(theme, "row", "flex-start", "stretch")}
+    .main-content {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+  `
 );
 
 export function MainLayout() {
   return (
     <LayoutContainer>
       <WindowMoveHandler />
+      <NavigationBar />
+      <div className="main-content">Main Content</div>
     </LayoutContainer>
   );
 }