diff --git a/CONVENTIONS.md b/CONVENTIONS.md
index af26ea0..33b205b 100644
--- a/CONVENTIONS.md
+++ b/CONVENTIONS.md
@@ -14,6 +14,7 @@
 ## For React Components
 - Use functional components with hooks instead of class based components.
 - Avoid copy pasting code. If you find yourself copying and pasting code, consider refactoring it into a reusable component or function. Use array methods like `map`, `filter`, and `reduce` to avoid duplicating code.
+- Try to use tailwind for css styling as much as possible. If you need to write custom css, use CSS modules. Avoid using global styles, unless they actually need to be global. Take `input.tsx` as reference.
 
 
 ## Commit Message Guidelines
@@ -53,5 +54,6 @@
 - Avoid unnecessary code duplication and strive for code reusability.
 - Write clear and concise documentation for public APIs and important functions. Do not over-document trivial functions.
 - We are using TypeScript in a very lenient and flexible setting. The project can have both JS and TS files, and one of the goals would be to convert all files to TS eventually. Where you are not using types.
+- Try to keep the use of external dependencies to a minimum. This is because the purpose of project is first to learn and then to build. So, we will try to build as much as possible from scratch.
 
 Remember to review and adhere to these conventions to maintain a clean and consistent codebase.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bfad551..8ab09a0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import './App.css';
+import Navbar from './Navbar';
 
 function App() {
     const [count, setCount] = useState(0);
@@ -7,7 +8,7 @@ function App() {
     console.log(a);
     return (
         <>
-            <h1>UNO!!!</h1>
+            <Navbar></Navbar>
             <p>Lets play a game of UNO! Click the button to draw a card.</p>
             <p>Card: {count}</p>
             <button onClick={() => setCount(count + 1)}>Draw a card</button>
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
new file mode 100644
index 0000000..a3ae34e
--- /dev/null
+++ b/frontend/src/Navbar.tsx
@@ -0,0 +1,9 @@
+function Navbar() {
+    return (
+        <div>
+            UNO!!!
+        </div>
+    )
+}
+
+export default Navbar
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
new file mode 100644
index 0000000..333580d
--- /dev/null
+++ b/frontend/src/library/button.tsx
@@ -0,0 +1,17 @@
+// Design a flexible reusable button component that can be used in different parts of the application.
+// The button component should have the following features:
+// - Customize background color, text color, and border color
+// - Customize the size of the button (small, medium, large)
+// - Customize the shape of the button (rectangle, rounded, circle)
+// - Handles click events
+
+
+function Button() {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default Button
diff --git a/frontend/src/library/heading.tsx b/frontend/src/library/heading.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/library/input.module.css b/frontend/src/library/input.module.css
new file mode 100644
index 0000000..4579f33
--- /dev/null
+++ b/frontend/src/library/input.module.css
@@ -0,0 +1,2 @@
+
+/* rules defined in this file are scoped to the js/ts file importing this.  */
\ No newline at end of file
diff --git a/frontend/src/library/input.tsx b/frontend/src/library/input.tsx
new file mode 100644
index 0000000..1455ab5
--- /dev/null
+++ b/frontend/src/library/input.tsx
@@ -0,0 +1,15 @@
+import styles from './input.module.css';
+
+type InputComponentProps = {
+    placeholder?: string;
+};
+
+function Input({ placeholder }: InputComponentProps) {
+    return (
+        <div>
+            <input style={styles} placeholder={placeholder}></input>
+        </div>
+    );
+}
+
+export default Input;