diff --git a/src/App.tsx b/src/App.tsx
index 76738b6..18604de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,17 +6,19 @@ import './App.css';
 import BenchmarkDetail from './components/Benchmarks/BenchmarkDetail';
 import Benchmarks from './components/Benchmarks/Benchmarks';
 import CreateBenchmark from './components/Benchmarks/CreateBenchmark';
+import UserBenchmarks from './components/Benchmarks/UserBenchmarks';
 import Landing from './components/Landing';
 import Login from './components/Login';
 import Register from './components/Register';
 import PrivateRoute from './components/Routing/PrivateRoute';
 import Rules from './components/rules/Rules';
+import User from './components/User';
 
 function App() {
   const queryClient = new QueryClient();
 
   return (
-    <div className="wrapper transition duration-500 dark:bg-gray-600 h-screen">
+    <div className="wrapper transition duration-500 dark:bg-gray-600 h-screen bg-gray-50">
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
           <Switch>
@@ -29,8 +31,13 @@ function App() {
             <Route path="/register">
               <Register />
             </Route>
+            <PrivateRoute path="/user/:id" component={User} />
             <PrivateRoute exact path="/benchmarks" component={Benchmarks} />
             <PrivateRoute exact path="/rules" component={Rules} />
+            <PrivateRoute
+              path="/benchmarks/user/:id"
+              component={UserBenchmarks}
+            />
             <PrivateRoute
               exact
               path="/benchmarks/create"
diff --git a/src/components/Benchmarks/UserBenchmarks.tsx b/src/components/Benchmarks/UserBenchmarks.tsx
new file mode 100644
index 0000000..9b5efaf
--- /dev/null
+++ b/src/components/Benchmarks/UserBenchmarks.tsx
@@ -0,0 +1,97 @@
+import { RouteComponentProps } from 'react-router-dom';
+import { useBenchmarksForUser } from '../../hooks/benchmark';
+import Header from '../Page/Header';
+import Page from '../Page/Page';
+import benchmarkModel from './BenchmarkModel';
+import BenchmarkRow from './BenchmarkRow';
+
+type UserParams = {
+  id: string;
+};
+
+const UserBenchmarks = ({ match }: RouteComponentProps<UserParams>) => {
+  let benchmarks: benchmarkModel[] = [];
+  const {
+    isLoading: isBenchmarksLoading,
+    isError: isBenchmarksError,
+    data: benchmarksData,
+    error,
+  } = useBenchmarksForUser(match.params.id);
+
+  if (isBenchmarksLoading) {
+    return <span>Loading....</span>;
+  }
+
+  if (isBenchmarksError) {
+    if (error) {
+      return <span>Error: {error.message}</span>;
+    }
+  }
+
+  if (benchmarksData) {
+    benchmarks = benchmarksData;
+  }
+
+  return (
+    <Page>
+      <Header
+        title="My Benchmarks"
+        button="Create"
+        navTo="/benchmarks/create"
+      />
+      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="flex flex-col">
+          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50 dark:bg-gray-800">
+                    <tr>
+                      <th
+                        scope="col"
+                        className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Title
+                      </th>
+                      <th
+                        scope="col"
+                        className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Subject
+                      </th>
+                      <th
+                        scope="col"
+                        className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Difficulty
+                      </th>
+                      <th
+                        scope="col"
+                        className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        Creator
+                      </th>
+                      <th scope="col" className="relative px-6 py-3">
+                        <span className="sr-only">View</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white dark:bg-gray-300 divide-y divide-gray-200">
+                    {benchmarks.map((benchmark: benchmarkModel) => (
+                      <BenchmarkRow
+                        key={benchmark.id?.toString()}
+                        benchmark={benchmark}
+                      />
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};
+
+export default UserBenchmarks;
diff --git a/src/components/Page/Navbar.tsx b/src/components/Page/Navbar.tsx
index 911491a..e9eac3b 100644
--- a/src/components/Page/Navbar.tsx
+++ b/src/components/Page/Navbar.tsx
@@ -5,7 +5,7 @@ import Gravatar from 'react-gravatar';
 import { Link, useHistory } from 'react-router-dom';
 import useDarkMode from 'use-dark-mode';
 import { useToken } from '../../hooks/token';
-import useProfile from '../../hooks/users';
+import { useProfile } from '../../hooks/users';
 
 const navigation = ['Benchmarks', 'Rules'];
 const profile = ['Your Profile', 'Settings', 'Sign out'];
@@ -71,29 +71,27 @@ export default function Navbar() {
 
                   <div className="hidden md:block">
                     <div className="ml-10 flex items-baseline space-x-4">
-                      {navigation.map(
-                        (item, itemIdx) => (
-                          // itemIdx === 0 ? (
-                          //     <Fragment key={item}>
-                          //         {/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
-                          //         <a
-                          //             href={"/" + item.toLowerCase()}
-                          //             className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"
-                          //         >
-                          //             {item}
-                          //         </a>
-                          //     </Fragment>
-                          // ) : (
-                          <Link
-                            key={item}
-                            to={'/' + item.toLowerCase()}
-                            className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
-                          >
-                            {item}
-                          </Link>
-                        ),
-                        // )
-                      )}
+                      <Link
+                        key={'benchmarks'}
+                        to={'/benchmarks'}
+                        className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+                      >
+                        {'All benchmarks'}
+                      </Link>
+                      <Link
+                        key={'my-benchmarks'}
+                        to={`/benchmarks/user/${profileData?.username}`}
+                        className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+                      >
+                        {'My benchmarks'}
+                      </Link>
+                      <Link
+                        key={'profile'}
+                        to={`/user/${profileData?.username}`}
+                        className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+                      >
+                        {'My profile'}
+                      </Link>
                     </div>
                   </div>
                 </div>
@@ -184,6 +182,16 @@ export default function Navbar() {
                                   )}
                                 </Menu.Item>
                               ))} */}
+                              <Menu.Item key="profile">
+                                <a
+                                  className={
+                                    'block px-4 py-2 text-sm text-gray-700'
+                                  }
+                                  href={'/user/' + profileData?.username}
+                                >
+                                  Profile
+                                </a>
+                              </Menu.Item>
                               <Menu.Item key="logout">
                                 <button
                                   className={
diff --git a/src/components/User.tsx b/src/components/User.tsx
new file mode 100644
index 0000000..2469f54
--- /dev/null
+++ b/src/components/User.tsx
@@ -0,0 +1,180 @@
+import { DateTime } from 'luxon';
+import Gravatar from 'react-gravatar';
+import { RouteComponentProps } from 'react-router-dom';
+import { useBenchmarksForUser } from '../hooks/benchmark';
+import { useUser } from '../hooks/users';
+import benchmarkModel from './Benchmarks/BenchmarkModel';
+import BenchmarkRow from './Benchmarks/BenchmarkRow';
+import Header from './Page/Header';
+import Page from './Page/Page';
+
+type UserParams = {
+  id: string;
+};
+
+const User = ({ match }: RouteComponentProps<UserParams>) => {
+  const {
+    isLoading: isProfileLoading,
+    isError: isProfileError,
+    data: profileData,
+    error,
+  } = useUser(match.params.id);
+
+  let benchmarks: benchmarkModel[] = [];
+  const { data: benchmarksData } = useBenchmarksForUser(match.params.id);
+
+  if (isProfileLoading) {
+    return <span>Loading....</span>;
+  }
+
+  if (isProfileError) {
+    if (error) {
+      return <span>Error: {error.message}</span>;
+    }
+  }
+
+  if (benchmarksData) {
+    benchmarks = benchmarksData;
+  }
+
+  return (
+    <Page>
+      <Header title="Profile" />
+
+      <div className="w-full text-white bg-gray-50">
+        <div className="container mx-auto my-5 p-5">
+          <div className="md:flex no-wrap md:-mx-2 ">
+            {/* <!-- Left Side --> */}
+            <div className="w-full md:w-3/12 md:mx-2">
+              {/* <!-- Profile Card --> */}
+              <div className="bg-white p-3 border-t-4 border-green-400">
+                <div className="image overflow-hidden">
+                  <Gravatar
+                    size={500}
+                    email={profileData?.email}
+                    className="h-auto w-full mx-auto rounded"
+                  />
+                </div>
+                <h1 className="text-gray-900 font-bold text-xl leading-8 my-1">
+                  {profileData?.name}
+                </h1>
+                <h3 className="text-gray-600 font-lg text-semibold leading-6">
+                  Developer
+                </h3>
+                {/* <p className="text-sm text-gray-500 hover:text-gray-600 leading-6">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Reprehenderit, eligendi dolorum sequi illum qui unde
+                  aspernatur non deserunt
+                </p> */}
+                <ul className="bg-gray-100 text-gray-600 hover:text-gray-700 hover:shadow py-2 px-3 mt-3 divide-y rounded shadow-sm">
+                  <li className="flex items-center py-3">
+                    <span>Status</span>
+                    <span className="ml-auto">
+                      <span className="bg-green-500 py-1 px-2 rounded text-white text-sm">
+                        Active
+                      </span>
+                    </span>
+                  </li>
+                  <li className="flex items-center py-3">
+                    <span>Member since</span>
+                    <span className="ml-auto">
+                      {profileData?.createdAt
+                        ? DateTime.fromISO(profileData?.createdAt).toISODate()
+                        : ''}
+                    </span>
+                  </li>
+                </ul>
+              </div>
+              {/* <!-- End of profile card --> */}
+              <div className="my-4"></div>
+            </div>
+            {/* <!-- Right Side --> */}
+            <div className="w-full md:w-9/12 mx-2 h-64">
+              {/* <!-- Profile tab --> */}
+
+              {/* <!-- Experience and education --> */}
+              <div className="bg-white p-3 shadow-sm rounded-sm">
+                <div className="grid grid-cols-1">
+                  <div>
+                    <div className="flex items-center space-x-2 font-semibold text-gray-900 leading-8 mb-3">
+                      <span className="text-green-500">
+                        <svg
+                          className="h-5"
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                          />
+                        </svg>
+                      </span>
+                      <span className="tracking-wide">
+                        Published benchmarks
+                      </span>
+                    </div>
+                    <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                      <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                          <table className="min-w-full divide-y divide-gray-200">
+                            <thead className="bg-gray-50 dark:bg-gray-800">
+                              <tr>
+                                <th
+                                  scope="col"
+                                  className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                >
+                                  Title
+                                </th>
+                                <th
+                                  scope="col"
+                                  className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                >
+                                  Subject
+                                </th>
+                                <th
+                                  scope="col"
+                                  className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                >
+                                  Difficulty
+                                </th>
+                                <th
+                                  scope="col"
+                                  className="dark:text-gray-100 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                >
+                                  Creator
+                                </th>
+                                <th scope="col" className="relative px-6 py-3">
+                                  <span className="sr-only">View</span>
+                                </th>
+                              </tr>
+                            </thead>
+                            <tbody className="bg-white dark:bg-gray-300 divide-y divide-gray-200">
+                              {benchmarks.map((benchmark: benchmarkModel) => (
+                                <BenchmarkRow
+                                  key={benchmark.id?.toString()}
+                                  benchmark={benchmark}
+                                />
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {/* <!-- End of Experience and education grid --> */}
+              </div>
+              {/* <!-- End of profile tab --> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};
+
+export default User;
diff --git a/src/hooks/benchmark.ts b/src/hooks/benchmark.ts
index 0aaa428..374159c 100644
--- a/src/hooks/benchmark.ts
+++ b/src/hooks/benchmark.ts
@@ -22,6 +22,15 @@ export function useBenchmarkSList() {
   });
 }
 
+export function useBenchmarksForUser(username: string) {
+  return useQuery<benchmarkModel[], Error>(`benchmark`, async () => {
+    const { data } = await authenticatedRequest({
+      url: `users/${username}/benchmarks`,
+    });
+    return data;
+  });
+}
+
 export async function createBenchmark(bench: {
   title: string;
   subject: string;
diff --git a/src/hooks/users.ts b/src/hooks/users.ts
index b82946b..dc86925 100644
--- a/src/hooks/users.ts
+++ b/src/hooks/users.ts
@@ -15,9 +15,28 @@ function useProfile() {
     return JSON.parse(window.atob(base64));
   }
 
-  return useQuery<{ email: string }, Error>('profile', async () => {
+  return useQuery<{ email: string; name: string; username: string }, Error>(
+    'profile',
+    async () => {
+      if (token) {
+        const username = parseJwt(token).username;
+        const { data } = await authenticatedRequest({
+          url: `users/${username}`,
+        });
+        return data;
+      }
+    },
+  );
+}
+
+function useUser(username: string) {
+  const { token } = useToken();
+
+  return useQuery<
+    { email: string; name: string; username: string; createdAt: string },
+    Error
+  >('profile', async () => {
     if (token) {
-      const username = parseJwt(token).username;
       const { data } = await authenticatedRequest({
         url: `users/${username}`,
       });
@@ -26,4 +45,4 @@ function useProfile() {
   });
 }
 
-export default useProfile;
+export { useProfile, useUser };