diff --git a/package-lock.json b/package-lock.json
index 143302ab..6309d9a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "express": "^4.18.2",
         "jsonwebtoken": "^9.0.2",
         "react": "^18.2.0",
+        "react-axios": "^2.0.6",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
@@ -1567,6 +1568,12 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -1579,6 +1586,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "peer": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1847,6 +1864,18 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2098,6 +2127,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -2839,6 +2877,26 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2848,6 +2906,20 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4472,7 +4544,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4573,6 +4644,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "peerDependencies": {
+        "axios": "^0.27.2",
+        "prop-types": "^15.8.1",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4588,8 +4669,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.0",
diff --git a/package.json b/package.json
index eb2dc20c..a2522c41 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
+    "react-axios": "^2.0.6",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
diff --git a/src/client/App.css b/src/client/App.css
index 635ac03f..126828cb 100644
--- a/src/client/App.css
+++ b/src/client/App.css
@@ -39,4 +39,16 @@
 
 ul {
   list-style: none;
-}
\ No newline at end of file
+}
+
+.button {
+  background-color: rgb(151, 151, 151);
+  border-radius: 20px;
+  outline: none;
+  border: none;
+  line-height: 30px;
+  cursor: pointer;
+  color: white;
+  width: 100px;
+  margin-top: 20px;
+}
diff --git a/src/client/App.jsx b/src/client/App.jsx
index bae3b635..52af3991 100644
--- a/src/client/App.jsx
+++ b/src/client/App.jsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import './App.css';
-import MovieForm from './components/MovieForm';
-import UserForm from './components/UserForm';
+import { useEffect, useState } from "react";
+import "./App.css";
+import MovieForm from "./components/MovieForm";
+import UserForm from "./components/UserForm";
 
 const port = import.meta.env.VITE_PORT;
 const apiUrl = `http://localhost:${port}`;
@@ -11,40 +11,79 @@ function App() {
 
   useEffect(() => {
     fetch(`${apiUrl}/movie`)
-      .then(res => res.json())
-      .then(res => setMovies(res.data));
+      .then((res) => res.json())
+      .then((res) => setMovies(res.data));
   }, []);
 
-  /**
-   * HINTS!
-   * 1. This handle___ functions below use async/await to handle promises, but the
-   * useEffect above is using .then to handle them. Both are valid approaches, but
-   * we should ideally use one or the other. Pick whichever you prefer.
-   *
-   * 2. The default method for the `fetch` API is to make a GET request. To make other
-   * types of requests, we must provide an object as the second argument of `fetch`.
-   * The values that you must provide are:
-   * - method
-   * - headers
-   * - body (if needed)
-   * For the "headers" property, you must state the content type of the body, i.e.:
-   *   headers: {
-   *     'Content-Type': 'application/json'
-   *   }
-   * */
-
   const handleRegister = async ({ username, password }) => {
+    const data = {
+      username,
+      password,
+    };
+
+    const options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    };
 
+    const registerUserData = await fetch(`${apiUrl}/user/register`, options);
+    const registeredUser = await registerUserData.json();
+    return alert(registeredUser.message);
   };
 
   const handleLogin = async ({ username, password }) => {
+    const data = {
+      username,
+      password,
+    };
+
+    const options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    };
+
+    const logInUserData = await fetch(`${apiUrl}/user/login`, options);
+
+    const loggedUser = await logInUserData.json();
+
+    const userToken = loggedUser.data;
 
+    localStorage.setItem("token", userToken);
+    return alert(loggedUser.message);
   };
 
   const handleCreateMovie = async ({ title, description, runtimeMins }) => {
+    const data = {
+      title,
+      description,
+      runtimeMins,
+    };
+    const options = {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify(data),
+    };
 
-  }
+    const newMovieData = await fetch(`${apiUrl}/movie`, options);
 
+    const newMovie = await newMovieData.json();
+
+    if (newMovie.data) {
+      setMovies([...movies, newMovie.data]);
+    } 
+
+    return alert(newMovie.message);
+  };
+
+  const handleLogOut = () => {
+    localStorage.removeItem("token");
+    return alert("User Log Out sucessfully");
+  };
   return (
     <div className="App">
       <h1>Register</h1>
@@ -56,9 +95,12 @@ function App() {
       <h1>Create a movie</h1>
       <MovieForm handleSubmit={handleCreateMovie} />
 
+      <button className="button" onClick={handleLogOut}>
+        Log Out
+      </button>
       <h1>Movie list</h1>
       <ul>
-        {movies.map(movie => {
+        {movies.map((movie) => {
           return (
             <li key={movie.id}>
               <h3>{movie.title}</h3>
diff --git a/src/client/components/MovieForm.jsx b/src/client/components/MovieForm.jsx
index a3d92402..f642f330 100644
--- a/src/client/components/MovieForm.jsx
+++ b/src/client/components/MovieForm.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import '../App.css'
 
 export default function MovieForm({ handleSubmit }) {
     const [movie, setMovie] = useState({ title: '', description: '', runtimeMins: 60 });
@@ -22,7 +23,7 @@ export default function MovieForm({ handleSubmit }) {
             <input type='text' name='title' placeholder="Title" value={movie.title} onChange={handleChange} />
             <input type='text' name='description' placeholder="Description" value={movie.description} onChange={handleChange} />
             <input type='number' name='runtimeMins' placeholder="Runtime (minutes)" value={movie.runtimeMins} onChange={handleChange} />
-            <button type="submit">Submit</button>
+            <button type="submit" className="button">Submit</button>
         </form>
     );
 }
\ No newline at end of file
diff --git a/src/client/components/UserForm.jsx b/src/client/components/UserForm.jsx
index 328f90b4..2eee2b35 100644
--- a/src/client/components/UserForm.jsx
+++ b/src/client/components/UserForm.jsx
@@ -1,27 +1,42 @@
 import { useState } from "react";
+import "../App.css";
 
 export default function UserForm({ handleSubmit }) {
-    const [user, setUser] = useState({ username: '', password: '' });
+  const [user, setUser] = useState({ username: "", password: "" });
 
-    const handleSubmitDecorator = (e) => {
-        e.preventDefault();
-        handleSubmit(user);
-    };
+  const handleSubmitDecorator = (e) => {
+    e.preventDefault();
+    handleSubmit(user);
+  };
 
-    const handleChange = (e) => {
-        const { name, value } = e.target;
+  const handleChange = (e) => {
+    const { name, value } = e.target;
 
-        setUser({
-            ...user,
-            [name]: value
-        });
-    };
+    setUser({
+      ...user,
+      [name]: value,
+    });
+  };
 
-    return (
-        <form onSubmit={handleSubmitDecorator}>
-            <input type="text" name="username" placeholder="Username" value={user.username} onChange={handleChange} />
-            <input type="password" name="password" placeholder="Password" value={user.password} onChange={handleChange} />
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
\ No newline at end of file
+  return (
+    <form onSubmit={handleSubmitDecorator}>
+      <input
+        type="text"
+        name="username"
+        placeholder="Username"
+        value={user.username}
+        onChange={handleChange}
+      />
+      <input
+        type="password"
+        name="password"
+        placeholder="Password"
+        value={user.password}
+        onChange={handleChange}
+      />
+      <button type="submit" className="button">
+        Submit
+      </button>
+    </form>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 7d30acef..e9a38c39 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   monospace;
 }
+
diff --git a/src/main.jsx b/src/main.jsx
index 7749a5cf..ac9f9635 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './client/App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./client/App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/src/server/controllers/movie.js b/src/server/controllers/movie.js
index d4733b61..6fc88041 100644
--- a/src/server/controllers/movie.js
+++ b/src/server/controllers/movie.js
@@ -1,31 +1,31 @@
-import jwt from 'jsonwebtoken';
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient();
-
-const jwtSecret = 'mysecret';
+import jwt from "jsonwebtoken";
+import { createMovieDb, getAllMoviesDb } from "../domains/movie.js";
+const jwtSecret = "mysecret";
 
 const getAllMovies = async (req, res) => {
-    const movies = await prisma.movie.findMany();
+  const movies = await getAllMoviesDb();
 
-    res.json({ data: movies });
+  res.status(200).json({ data: movies });
 };
 
 const createMovie = async (req, res) => {
-    const { title, description, runtimeMins } = req.body;
+  const { title, description, runtimeMins } = req.body;
 
-    try {
-        const token = null;
-        // todo verify the token
-    } catch (e) {
-        return res.status(401).json({ error: 'Invalid token provided.' })
-    }
+  try {
+    const token = req.headers.authorization.split(" ")[1];
 
-    const createdMovie = null;
+    // todo verify the token
+    jwt.verify(token, jwtSecret);
+  } catch (err) {
+    return res.status(401).json({ error: "Invalid token provided." });
+  }
 
-    res.json({ data: createdMovie });
-};
+  const createdMovie = await createMovieDb(title, description, runtimeMins);
 
-export {
-    getAllMovies,
-    createMovie
+  return res.status(201).json({
+    newMovie: createdMovie,
+    message: "New movie created successfully",
+  });
 };
+
+export { getAllMovies, createMovie };
diff --git a/src/server/controllers/user.js b/src/server/controllers/user.js
index 05db4183..72e9a815 100644
--- a/src/server/controllers/user.js
+++ b/src/server/controllers/user.js
@@ -1,39 +1,47 @@
-import bcrypt from 'bcrypt';
-import jwt from 'jsonwebtoken';
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient();
+import bcrypt from "bcrypt";
+import jwt from "jsonwebtoken";
+import { findUser, registerNewUserdb } from "../domains/user.js";
 
-const jwtSecret = 'mysecret';
+const jwtSecret = "mysecret";
 
 const register = async (req, res) => {
-    const { username, password } = req.body;
-
-    const createdUser = null;
-
-    res.json({ data: createdUser });
+  const { username, password } = req.body;
+
+  if (!username || !password)
+    return res
+      .status(400)
+      .json({ error: "Enter a valid username and password" });
+
+  try {
+    const hash = await bcrypt.hash(password, 12);
+
+    const createdUser = await registerNewUserdb(username, hash);
+    return res
+      .status(201)
+      .json({ data: createdUser, message: "Created user successfully" });
+  } catch (err) {
+    return res.status(500).json({ error: err.message });
+  }
 };
 
 const login = async (req, res) => {
-    const { username, password } = req.body;
+  const { username, password } = req.body;
 
-    const foundUser = null;
+  const foundUser = await findUser(username);
 
-    if (!foundUser) {
-        return res.status(401).json({ error: 'Invalid username or password.' });
-    }
+  if (!foundUser) {
+    return res.status(401).json({ error: "Invalid username or password." });
+  }
 
-    const passwordsMatch = false;
+  const passwordsMatch = await bcrypt.compare(password, foundUser.password);
 
-    if (!passwordsMatch) {
-        return res.status(401).json({ error: 'Invalid username or password.' });
-    }
+  if (!passwordsMatch) {
+    return res.status(401).json({ error: "Invalid username or password." });
+  }
 
-    const token = null;
+  const token = jwt.sign(username, jwtSecret);
 
-    res.json({ data: token });
+  res.json({ data: token, message: "User logged in sucess" });
 };
 
-export {
-    register,
-    login
-};
+export { register, login };
diff --git a/src/server/domains/movie.js b/src/server/domains/movie.js
new file mode 100644
index 00000000..8f672322
--- /dev/null
+++ b/src/server/domains/movie.js
@@ -0,0 +1,14 @@
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
+
+const getAllMoviesDb = async () => await prisma.movie.findMany({});
+
+const createMovieDb = async (title, description, runtimeMins) =>
+  await prisma.movie.create({
+    data: {
+      title,
+      description,
+      runtimeMins,
+    },
+  });
+export { getAllMoviesDb, createMovieDb };
diff --git a/src/server/domains/user.js b/src/server/domains/user.js
new file mode 100644
index 00000000..4e32a8bb
--- /dev/null
+++ b/src/server/domains/user.js
@@ -0,0 +1,18 @@
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
+
+const registerNewUserdb = async (username, hash) =>
+  await prisma.user.create({
+    data: {
+      username: username,
+      password: hash,
+    },
+  });
+
+const findUser = async (username) =>
+  await prisma.user.findFirst({
+    where: {
+      username,
+    },
+  });
+export { registerNewUserdb, findUser };
diff --git a/src/server/index.js b/src/server/index.js
index 1edd415d..d40ecaba 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -1,40 +1,34 @@
 // Load our .env file
-import { config } from 'dotenv';
+import { config } from "dotenv";
 config();
 
 // Import express and cors
-import express from 'express';
-import cors from 'cors';
+import express from "express";
+import cors from "cors";
 
 // Set up express
 const app = express();
-app.disable('x-powered-by');
+app.disable("x-powered-by");
 app.use(cors());
 // Tell express to use a JSON parser middleware
 app.use(express.json());
 // Tell express to use a URL Encoding middleware
 app.use(express.urlencoded({ extended: true }));
 
+import userRouter from "./routers/user.js";
+app.use("/user", userRouter);
 
-
-
-import userRouter from './routers/user.js';
-app.use('/user', userRouter);
-
-import movieRouter from './routers/movie.js';
-app.use('/movie', movieRouter);
-
-
-
+import movieRouter from "./routers/movie.js";
+app.use("/movie", movieRouter);
 
 // Set up a default "catch all" route to use when someone visits a route
 // that we haven't built
-app.get('*', (req, res) => {
-    res.json({ ok: true });
+app.get("*", (req, res) => {
+  res.json({ ok: true });
 });
 
 // Start our API server
 const port = process.env.VITE_PORT;
 app.listen(port, () => {
-    console.log(`\n Server is running on http://localhost:${port}\n`);
+  console.log(`\n Server is running on http://localhost:${port}\n`);
 });
diff --git a/src/server/routers/movie.js b/src/server/routers/movie.js
index a606c4c9..99a943f4 100644
--- a/src/server/routers/movie.js
+++ b/src/server/routers/movie.js
@@ -1,9 +1,9 @@
-import express from 'express';
-import { getAllMovies, createMovie } from '../controllers/movie.js';
+import express from "express";
+import { getAllMovies, createMovie } from "../controllers/movie.js";
 
 const router = express.Router();
 
-router.get('/', getAllMovies);
-router.post('/', createMovie);
+router.get("/", getAllMovies);
+router.post("/", createMovie);
 
 export default router;
diff --git a/src/server/routers/user.js b/src/server/routers/user.js
index 086a7f7b..ef578c57 100644
--- a/src/server/routers/user.js
+++ b/src/server/routers/user.js
@@ -1,9 +1,9 @@
-import express from 'express';
-import { register, login } from '../controllers/user.js';
+import express from "express";
+import { register, login } from "../controllers/user.js";
 
 const router = express.Router();
 
-router.post('/register', register);
-router.post('/login', login);
+router.post("/register", register);
+router.post("/login", login);
 
 export default router;