diff --git a/package-lock.json b/package-lock.json
index 0c8890d..b191362 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "bulma": "^1.0.2",
+        "classnames": "^2.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -5433,6 +5435,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bulma": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz",
+      "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A=="
+    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -5604,6 +5611,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -20600,6 +20612,11 @@
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
       "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
     },
+    "bulma": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz",
+      "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -20719,6 +20736,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
diff --git a/package.json b/package.json
index cc266c4..d568c9c 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^1.0.2",
+    "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
diff --git a/src/App.js b/src/App.js
index 3784575..e35df82 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,28 @@
+import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Navbar from './components/Navbar';
+import FormField from './components/FormField';
+import CoolButton from './components/CoolButton';
+import Message from './components/Message';
+
 
 function App() {
   return (
     <div className="App">
+      <Navbar />
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <FormField label="Name" type="text" placeholder="e.g. Alex Smith" />
+        <FormField label="Email" type="email" placeholder="e.g. alexsmith@gmail.com" />
+        <CoolButton isSmall isDanger isRounded>Button 1</CoolButton>
+        <CoolButton isSmall isSuccess>Button 2</CoolButton>
+        <Message isInfo title="Hello World">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>.
+        </Message>
         <a
           className="App-link"
           href="https://reactjs.org"
diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js
new file mode 100644
index 0000000..d22c545
--- /dev/null
+++ b/src/components/CoolButton.js
@@ -0,0 +1,19 @@
+// src/components/CoolButton.js
+
+import React from 'react';
+import classNames from 'classnames';
+
+function CoolButton({ children, isPrimary, isSuccess, isDanger, isLight, isRounded, isSmall }) {
+  const classes = classNames('button', {
+    'is-primary': isPrimary,
+    'is-success': isSuccess,
+    'is-danger': isDanger,
+    'is-light': isLight,
+    'is-rounded': isRounded,
+    'is-small': isSmall,
+  });
+
+  return <button className={classes}>{children}</button>;
+}
+
+export default CoolButton;
diff --git a/src/components/FormField.js b/src/components/FormField.js
new file mode 100644
index 0000000..0fba7a6
--- /dev/null
+++ b/src/components/FormField.js
@@ -0,0 +1,16 @@
+// src/components/FormField.js
+
+import React from 'react';
+
+function FormField({ label, type, placeholder }) {
+  return (
+    <div className="field">
+      <label className="label">{label}</label>
+      <div className="control">
+        <input className="input" type={type} placeholder={placeholder} />
+      </div>
+    </div>
+  );
+}
+
+export default FormField;
diff --git a/src/components/Message.js b/src/components/Message.js
new file mode 100644
index 0000000..65876ab
--- /dev/null
+++ b/src/components/Message.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Message({ isInfo, title, children }) {
+  const className = isInfo ? 'message is-info' : 'message';
+
+  return (
+    <article className={className}>
+      <div className="message-header">
+        <p>{title}</p>
+        <button className="delete" aria-label="delete"></button>
+      </div>
+      <div className="message-body">
+        {children}
+      </div>
+    </article>
+  );
+}
+
+export default Message;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..2807803
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import CoolButton from './CoolButton';
+
+function Navbar() {
+  return (
+    <nav className="navbar is-transparent">
+      <div className="navbar-brand">
+        <a className="navbar-item" href="/">
+          <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28" />
+        </a>
+      </div>
+
+      <div id="navbarExampleTransparentExample" className="navbar-menu">
+        <div className="navbar-start">
+          <a className="navbar-item" href="/">
+            Home
+          </a>
+        </div>
+        <div className="navbar-end">
+          <div className="navbar-item">
+            <div className="buttons">
+              <CoolButton isPrimary>Login</CoolButton>
+              <CoolButton isLight>Signup</CoolButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;