diff --git a/frontend/public/index.html b/frontend/public/index.html
index 6f5043ee..f99516e3 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -5,7 +5,7 @@
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 68769f4d..ed963c83 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -3,12 +3,14 @@ import styles from './app.module.css';
import { Chat } from './components/chat';
import { Input } from './components/input';
import { useMessages } from './useMessages';
+import { NavBar } from './components/navbar';
export const App = () => {
const { sendMessage, messages, waiting } = useMessages();
return (
+
diff --git a/frontend/src/components/button.module.css b/frontend/src/components/button.module.css
new file mode 100644
index 00000000..b16c0f1d
--- /dev/null
+++ b/frontend/src/components/button.module.css
@@ -0,0 +1,42 @@
+.button_container {
+ background-color: var(--primary);
+ border-radius: 20px;
+}
+
+.button {
+ height: 40px;
+ box-sizing: border-box;
+ color: var(--grey-900);
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ border-radius: 20px;
+ border: none;
+ padding: 0 24px;
+ background-color: transparent;
+ display: inline-flex;
+ align-items: center;
+}
+
+.button:hover {
+ background-color: rgb(255 255 255 / 0.15);
+ box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+ cursor: pointer;
+}
+
+.button:active:enabled {
+ background-color: var(--primary-dark);
+}
+
+.button_container:has(.button:disabled) {
+ background-color: var(--grey-400);
+ opacity: 0.5;
+}
+
+.icon {
+ margin-right: 8px;
+}
+
+.button:has(.icon) {
+ padding-left: 16px;
+}
diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx
new file mode 100644
index 00000000..35c2f0a0
--- /dev/null
+++ b/frontend/src/components/button.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './button.module.css';
+
+interface ButtonProps {
+ text: string;
+ icon?: string;
+ disabled?: boolean;
+ onClick: () => void;
+}
+
+export const Button = ({ text, icon, disabled, onClick }: ButtonProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/frontend/src/components/navbar.module.css b/frontend/src/components/navbar.module.css
new file mode 100644
index 00000000..ac98d7e4
--- /dev/null
+++ b/frontend/src/components/navbar.module.css
@@ -0,0 +1,10 @@
+.container {
+ width: 100%;
+ height: 80px;
+ padding: 0 36px;
+ background-color: var(--grey-900);
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
new file mode 100644
index 00000000..545f03d6
--- /dev/null
+++ b/frontend/src/components/navbar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './navbar.module.css';
+import ChatIcon from '../icons/chat.svg';
+import { Button } from './button';
+import logo from '../icons/primary-logo-dark.svg';
+
+export const NavBar = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 874edf35..794618ff 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,10 +1,25 @@
html,
body,
#app-root {
- font-family: 'Source Sans 3', sans-serif;
+ font-family: 'Roboto', sans-serif;
height: 100%;
margin: 0;
+ --primary: #f29900;
+ --primary-dark: #f28900;
+ --grey-50: #faf7f5;
+ --grey-100: #f5f2f0;
+ --grey-200: #eeebe9;
+ --grey-300: #e0dddc;
+ --grey-400: #bdbbb9;
+ --grey-500: #9e9c9b;
+ --grey-600: #757473;
+ --grey-700: #62605f;
+ --grey-800: #424141;
+ --grey-900: #212120;
+ --black: #000000;
+ --white: #ffffff;
+
--background-color-primary: #282828;
--blue: #007bff;
--border-primary: #424242;