diff --git a/package-lock.json b/package-lock.json
index baf5bd4..d20bba4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3018,6 +3018,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
       "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
diff --git a/src/components/layouts/Navbar.js b/src/components/layouts/Navbar.js
index 6867fa7..7142a14 100644
--- a/src/components/layouts/Navbar.js
+++ b/src/components/layouts/Navbar.js
@@ -2,16 +2,15 @@ import React from "react";
 
 import logo from "../../assets/img/logo.svg";
 
-export default class Navbar extends React.Component {
 
-    render() {
-        return (
-            <div className="navbar">
+const Navbar = () => {
+    return (
+        <div className="navbar">
                 <div className="navbar-logo-container">
                     <img src={logo} className="navbar-logo-img" alt="logo"/>
                 </div>
             </div>
-        )
-    }
+    )
+}
 
-} 
\ No newline at end of file
+export default Navbar
\ No newline at end of file
diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js
index 4e43996..ebc6195 100644
--- a/src/components/profile/Profile.js
+++ b/src/components/profile/Profile.js
@@ -1,90 +1,85 @@
-import React from "react";
+import React,{useState, useEffect} from "react";
 import axios from "axios";
 
 import email from "../../assets/img/email.png";
 import anonymous_avatar from "../../assets/img/anonymous.png"
 
-export default class Profile extends React.Component {
-    constructor() {
-        super()
-        this.state = {
-            profile: {}
-        }
-    }
 
-    componentDidMount() {
-        axios.get(`https://api.github.com/user`)
-        .then((response) => {
-            this.setState({profile: response.data})
-        })
-    }
+const Profile = () => {
+    const [profile,setProfile] = useState({})
 
-    handleNavigateToProfile = () => {
-        window.location = this.state.profile.html_url
+    const handleNavigateToProfile = () => {
+        window.location = profile.html_url
     }
-
-    render() {
-        return (
-            <div className="profile-content-container">
+    
+    useEffect(() => {
+            axios.get(`https://api.github.com/user`)
+            .then((response) => {
+                setProfile(response.data)
+            })
+    })
+    
+    return (
+        <div className="profile-content-container">
                 <img
-                src={this.state.profile.avatar_url ? this.state.profile.avatar_url : anonymous_avatar}
+                src={profile.avatar_url ? profile.avatar_url : anonymous_avatar}
                 alt="avatar"
                 className="profile-avatar"
                 />
-                <h3 onClick={this.handleNavigateToProfile} className="profile-name">
-                    {this.state.profile.name} <br/>
-                    { this.state.profile.login &&
+                <h3 onClick={handleNavigateToProfile} className="profile-name">
+                    {profile.name} <br/>
+                    { profile.login &&
                         <span className="profile-login">
-                            @{this.state.profile.login}
+                            @{profile.login}
                         </span>
                     }
                 </h3>
                 <div className="profile-info">
-                    <span>{this.state.profile.bio}</span>
+                    <span>{profile.bio}</span>
                     <div className="profile-social-items">
-                        { this.state.profile.followers && 
+                        { profile.followers && 
                             <span className="profile-social-item">
                                 <svg text="muted" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-people">
                                     <path fill-rule="evenodd" d="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path>
                                 </svg>
-                                <span><b>{this.state.profile.followers}</b> followers</span>
+                                <span><b>{profile.followers}</b> followers</span>
                             </span>
                         }
-                        { this.state.profile.following &&
+                        { profile.following &&
                             <span className="profile-social-item">
                                 <span>.</span>
-                                <span><b>{this.state.profile.following}</b> following</span>
+                                <span><b>{profile.following}</b> following</span>
                             </span> 
                         }
                             
                     </div>
                     <div className="profile-info-items">
                         
-                        {this.state.profile.email &&
+                        {profile.email &&
                             (
                                 <span className="profile-info-item">
                                     <img src={email} className="profile-info-icon" alt="email"/>
-                                    <span>{this.state.profile.email}</span>
+                                    <span>{profile.email}</span>
                                 </span>
                             )
                         }
-                        {this.state.profile.location && 
+                        {profile.location && 
                             (
                                 <span className="profile-info-item">
                                     <svg className="octicon octicon-location" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                                         <path fill-rule="evenodd" d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z"></path>
                                     </svg>
-                                    <span>{this.state.profile.location}</span>
+                                    <span>{profile.location}</span>
                                 </span>
                             )
                         }
-                        {this.state.profile.company &&
+                        {profile.company &&
                             (
                                 <span className="profile-info-item">
                                     <svg className="octicon octicon-organization" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                                         <path fill-rule="evenodd" d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"></path>
                                     </svg>
-                                    <span>{this.state.profile.company}</span>
+                                    <span>{profile.company}</span>
                                 </span>
                             )
                         }
@@ -92,7 +87,7 @@ export default class Profile extends React.Component {
                     </div>
                 </div>
             </div>
-        )
-    }
+    )
+}
 
-} 
\ No newline at end of file
+export default Profile
\ No newline at end of file
diff --git a/src/components/repositories/RepositoriesList.js b/src/components/repositories/RepositoriesList.js
index d24787c..b1a37a5 100644
--- a/src/components/repositories/RepositoriesList.js
+++ b/src/components/repositories/RepositoriesList.js
@@ -1,60 +1,56 @@
-import React from "react";
+import React,{useState,useEffect} from "react";
 import axios from "axios";
 import SingleRepository from "./SingleRepository";
 
-export default class RepositoriesList extends React.Component {
-    constructor() {
-        super()
-        this.state = {
-            filters: {
-                page: 1,
-                per_page: 10,
-                visibility: "public"
-            },
-            repos: []
-        }
-    }
-
-    componentDidMount() {
-        this.fetchRepos();
-    }
+const RepositoriesList = () => {
+    const [filters,setFilters] = useState({
+        page: 1,
+        per_page: 10,
+        visibility: "public"
+    }) 
+    const [repos,setRepos] = useState([])
 
-    fetchRepos = () => {
-        this.setState({ repos: "loading" })
+    
+    const fetchRepos = () => {
+        setRepos("loading")
         axios.get("https://api.github.com/user/repos", {
-            params: this.state.filters
+            params: filters
         })
         .then((response) => {
-            this.setState({ repos: response.data })
+           setRepos(response.data)
         })
         .catch((error) => {
             console.log(error)
-            this.setState({ repos: [] })
+            setRepos([])
         })
     }
 
-    handleNextPage = () => {
-        this.setState({
-            filters: { ...this.state.filters, page: this.state.filters.page + 1}
-        }, () => {
-            this.fetchRepos();
-        })
+    useEffect(() => {
+        fetchRepos();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    },[filters])
+    
+    const handleNextPage = () => {
+        setFilters((prev)=>({
+            ...prev,
+            page : filters.page + 1
+        }))
+        
     }
 
-    handlePrevPage = () => {
-        this.setState({
-            filters: { ...this.state.filters, page: this.state.filters.page - 1}
-        }, () => {
-            this.fetchRepos();
-        })
+    const handlePrevPage = () => {
+        setFilters( (prev) => ({
+            ...prev,
+            page : filters.page - 1
+        }))
     }
 
-    render() {
-        return (
-            <div className="repositories-container">
+
+    return (
+        <div className="repositories-container">
                 <h2 className="repositories-header">Popular Repositories:</h2>
 
-                    {this.state.repos === "loading" ?
+                    {repos === "loading" ?
 
                         (
                             <div className="repositories-list-container">
@@ -65,7 +61,7 @@ export default class RepositoriesList extends React.Component {
                     :
 
                         (
-                            this.state.repos.length === 0 ?
+                            repos.length === 0 ?
                                 (
                                     <div className="repositories-list-container">
                                         <span>No repositories ...</span>
@@ -75,7 +71,7 @@ export default class RepositoriesList extends React.Component {
                                 (
                                     <div className="repositories-list-container">
                                         {
-                                            this.state.repos.map((repo, index) => (
+                                            repos.map((repo, index) => (
                                                 <div className="single-repository-container" key={index}>
                                                     <SingleRepository repo={repo} />
                                                 </div>
@@ -84,14 +80,14 @@ export default class RepositoriesList extends React.Component {
                                     
                                         <div className="repositoies-list-navigation-buttons-container">
                                             <button 
-                                            onClick={this.handlePrevPage}
+                                            onClick={handlePrevPage}
                                             className="repositoies-list-navigation-button"
-                                            disabled={this.state.filters.page === 1}
+                                            disabled={filters.page === 1}
                                             >
                                                 {"<"}
                                             </button>
                                             <button 
-                                            onClick={this.handleNextPage}
+                                            onClick={handleNextPage}
                                             className="repositoies-list-navigation-button"
                                             >
                                                 {">"}
@@ -102,6 +98,7 @@ export default class RepositoriesList extends React.Component {
                         )
                     }   
             </div>
-        )
-    }
-}
\ No newline at end of file
+    )
+}
+
+export default RepositoriesList
\ No newline at end of file
diff --git a/src/components/repositories/SingleRepository.js b/src/components/repositories/SingleRepository.js
index e16a350..8eb21ea 100644
--- a/src/components/repositories/SingleRepository.js
+++ b/src/components/repositories/SingleRepository.js
@@ -1,45 +1,39 @@
-import React from "react";
+import React,{useState,useEffect} from "react";
 
-export default class SingleRepository extends React.Component {
-    constructor() {
-        super()
 
-        this.state = {
-            repo: {}
-        }
-    }
-
-    componentDidMount() {
-        this.setState({ repo: this.props.repo })
-    }
+const SingleRepository = (props) => {
+    const [repo,setRepo] = useState({})
+    
+    useEffect(() => {
+        setRepo(props.repo)
+    })
 
-    handleNavigateToRepository = () => {
-        window.open(this.props.repo.html_url, '_blank');
+    const handleNavigateToRepository = () => {
+        window.open(repo.html_url, '_blank');
     }
 
-    render() {
-        return (
-            <div>
-                {this.state.repo && 
+    return (
+        <div>
+                {repo && 
                     (
                         <div className="single-repository-content">
                             <div className="single-repository-header">
-                                <h4 onClick={this.handleNavigateToRepository} className="single-repository-name">{this.state.repo.name}</h4>
+                                <h4 onClick={handleNavigateToRepository} className="single-repository-name">{repo.name}</h4>
                                 <div>
                                     <span className="single-repository-visibility-badge">
-                                        {this.state.repo.visibility}
+                                        {repo.visibility}
                                     </span>
                                 </div>
                             </div>
                             <div>
-                                {this.state.repo.description}
+                                {repo.description}
                             </div>
                             <div className="single-repository-info-container">
-                                {this.state.repo.language && 
+                                {repo.language && 
                                     (
                                         <div className="single-repository-info-item">
                                             <span className="single-repository-language-dot"></span>
-                                            <span>{this.state.repo.language}</span>
+                                            <span>{repo.language}</span>
                                         </div>
                                     )
                                 }
@@ -47,13 +41,13 @@ export default class SingleRepository extends React.Component {
                                     <svg aria-label="star" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-star">
                                         <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
                                     </svg>
-                                    <span>{this.state.repo.stargazers_count}</span>
+                                    <span>{repo.stargazers_count}</span>
                                 </div>
                                 <div className="single-repository-info-item">
                                     <svg aria-label="fork" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-repo-forked">
                                         <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
                                     </svg>
-                                    <span>{this.state.repo.forks}</span>
+                                    <span>{repo.forks}</span>
                                 </div>
                             </div>
                         </div>
@@ -61,7 +55,7 @@ export default class SingleRepository extends React.Component {
                     )
                 }
             </div>
-        )
-    }
+    )
+}
 
-} 
\ No newline at end of file
+export default SingleRepository
\ No newline at end of file