diff --git a/package-lock.json b/package-lock.json
index 0c8890d..a6e201c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "bulma": "^0.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -5433,6 +5434,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -20600,6 +20606,11 @@
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
       "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
     },
+    "bulma": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index cc266c4..ad6c4d5 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^0.9.4",
     "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..b8ea5ea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,31 @@
-import logo from './logo.svg';
-import './App.css';
+
+import  "./App.css";
+import Navbar from "./components/Navbar.js";
+import FormField from "./components/FormField";
+import SignupForm from "./components/SignupForm.js";
+import Message from "./components/Message.js";
+import CoolButton from "./components/CoolButton.js";
+
+
+import  "bulma/css/bulma.css";
+
+
+  
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+return  <div  className="App">
+  <SignupForm />
+  <Message isInfo title="Hello World">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <strong>Pellentesque risus mi</strong>.
+  </Message>
+  <CoolButton  isSuccess  >Button 1</CoolButton>
+  <CoolButton> Button 2 </CoolButton>
+
+</div>;
+
 }
 
-export default App;
+export  default App;
+
diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js
new file mode 100644
index 0000000..7a3c2eb
--- /dev/null
+++ b/src/components/CoolButton.js
@@ -0,0 +1,19 @@
+
+
+import React from 'react';
+
+function CoolButton({ isSuccess, children }) {
+  // Constructing className based on props
+  let className = 'button';
+  if (isSuccess) {
+    className += ' is-success';
+  }
+
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+
+export default CoolButton;
diff --git a/src/components/FormField.css b/src/components/FormField.css
new file mode 100644
index 0000000..91de85f
--- /dev/null
+++ b/src/components/FormField.css
@@ -0,0 +1,20 @@
+.field {
+    margin-bottom: 1rem;
+  }
+  
+  .label {
+    color: #333;
+    font-weight: bold;
+  }
+  
+  .input {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+  }
+  
+  .control {
+    margin-top: 0.5rem;
+  }
+  
\ No newline at end of file
diff --git a/src/components/FormField.js b/src/components/FormField.js
new file mode 100644
index 0000000..a403b47
--- /dev/null
+++ b/src/components/FormField.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './FormField.css';
+
+const 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..b6465e4
--- /dev/null
+++ b/src/components/Message.js
@@ -0,0 +1,20 @@
+
+
+import React from 'react';
+
+function Message({ isInfo, title, children }) {
+  const classes = isInfo ? 'message is-info' : 'message';
+  
+  return (
+    <div className={classes}>
+      <div className="message-header">
+        <p>{title}</p>
+      </div>
+      <div className="message-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Message;
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..709653f
--- /dev/null
+++ b/src/components/Navbar.css
@@ -0,0 +1,41 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    padding: 10px 20px;
+  }
+  
+  .navbar a {
+    text-decoration: none;
+    color: rgb(15, 49, 108);
+    margin-right: 20px;
+    margin-top: 10px;
+  }
+  
+  .btn {
+    display: flex; /* Add */
+    align-items: center;
+    float: right;
+    margin-top:10px; /* Add */
+  }
+
+  .home-btn{
+    margin-bottom: 10px;
+    align-items: center;
+  }
+  
+  .log-btn,
+  .sign-btn {
+    color: white;
+    background-color: #85144b;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 20px;
+    margin-right:20px;
+    
+     
+  }
+  
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..6903073
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import "./Navbar.css"
+
+const Navbar = () => {
+  return (
+    <div>
+      <nav class="navbar" role="navigation" aria-label="main navigation" >
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="https://bulma.io/images/bulma-logo.png" 
+      alt="Bulma: Free, open source, and modern CSS 
+      framework based on Flexbox" width="112" height="28" />
+    </a>
+
+    
+      <a role="button" class="home-btn" href="#home">Home</a>
+      <div class="btn"> 
+        <button class="log-btn">Login</button>
+        <button class="sign-btn">Signup</button>
+      </div>
+      
+  
+  </div>
+</nav>
+       
+
+    </div>
+  )
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/SignupForm.css b/src/components/SignupForm.css
new file mode 100644
index 0000000..12b173e
--- /dev/null
+++ b/src/components/SignupForm.css
@@ -0,0 +1,20 @@
+.btn-submit{
+    background-color: rgb(104, 104, 237);
+    width:80px;
+    height:40px;
+    border-radius: 6px;
+    font-weight: 600;
+    
+}
+
+.btn-submit:hover{
+    cursor:pointer;
+    background-color: rgb(11, 11, 236);
+    height:42px;
+    width: 80px;
+    border: 3px solid rgb(231, 146, 0);
+    border-radius: 5px;
+   
+
+
+}
\ No newline at end of file
diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js
new file mode 100644
index 0000000..f9b6917
--- /dev/null
+++ b/src/components/SignupForm.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Navbar from './Navbar';
+import FormField from './FormField';
+import "./SignupForm.css"
+
+const SignupForm = () => {
+  return (
+    <div>
+      <Navbar />
+      <form>
+        <FormField label="Name" type="text" placeholder="e.g Alex Smith" />
+        <FormField label="Email" type="email" placeholder="e.g. alexsmith@gmail.com" />
+        <FormField label="Password" type="password" placeholder="Enter your password" />
+        <button type="submit" class="btn-submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default SignupForm;