diff --git a/gatsby-node.js b/gatsby-node.js
index 16d1564dd..a63ea42db 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,3 +1,4 @@
+const siteConfig = require('./site-config');
 const { createFilePath } = require('gatsby-source-filesystem');
 const appInsights = require('applicationinsights');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
@@ -237,6 +238,13 @@ exports.createPages = async ({ graphql, actions }) => {
         isPermanent: true,
       });
     });
+
+    const profilePage = require.resolve('./src/pages/profile.js');
+    createPage({
+      path: `${siteConfig.pathPrefix}/people/`,
+      matchPath: `${siteConfig.pathPrefix}/people/:gitHubUsername`,
+      component: profilePage,
+    });
   });
 };
 
diff --git a/site-config.js b/site-config.js
index 16eb9a725..f39841aa8 100644
--- a/site-config.js
+++ b/site-config.js
@@ -6,6 +6,7 @@ const titles = {
   '/user/': `User Rules`,
   '/orphaned/': `Orphaned Rules`,
   '/archived/': `Archived Rules`,
+  '/profile/': `Profile`,
 };
 
 module.exports = {
diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js
index a091fede6..96f89a1ea 100644
--- a/src/components/dropdown-card/dropdown-card.js
+++ b/src/components/dropdown-card/dropdown-card.js
@@ -1,26 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useAuth0 } from '@auth0/auth0-react';
-import GitHubIcon from '-!svg-react-loader!../../images/github.svg';
+import { navigate } from 'gatsby';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const DropdownCard = () => {
+const DropdownCard = ({ setOpen }) => {
   const { logout, user } = useAuth0();
   return (
     <>
       <div className="dropdown-list">
-        <div className="dropdown-userinfo-container">
-          <p className="dropdown-username">@{user.nickname}</p>
-          <a
-            className="github-link"
-            href={`https://www.github.com/${user.nickname}`}
-          >
-            <GitHubIcon className="dropdown-github-icon" />
-            Manage GitHub Account
-          </a>
-        </div>
+        <p className="dropdown-username">@{user.nickname}</p>
+        <button
+          className="dropdown-btn dropdown-icon dropdown-github-icon"
+          onClick={() => {
+            setOpen(false);
+            window.open(`https://www.github.com/${user.nickname}`);
+          }}
+        >
+          GitHub Profile
+        </button>
+        <button
+          className="dropdown-btn dropdown-icon dropdown-user-icon"
+          onClick={() => {
+            setOpen(false);
+            navigate('/profile');
+          }}
+        >
+          SSW.Rules Profile
+        </button>
         <hr />
         <button
-          className="dropdown-signout-btn-container"
+          className="dropdown-btn dropdown-icon dropdown-signout-icon"
           onClick={() => {
             logout({ returnTo: process.env.AUTH0_REDIRECT_URI });
           }}
diff --git a/src/components/dropdown-icon/dropdown-icon.js b/src/components/dropdown-icon/dropdown-icon.js
index 294e60b54..152bc8a06 100644
--- a/src/components/dropdown-icon/dropdown-icon.js
+++ b/src/components/dropdown-icon/dropdown-icon.js
@@ -20,7 +20,7 @@ const DropdownIcon = () => {
   return (
     <div className="dropdown" ref={drop}>
       <DropdownBadge onClick={() => setOpen((open) => !open)} />
-      {open && <DropdownCard />}
+      {open && <DropdownCard setOpen={setOpen} />}
     </div>
   );
 };
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 4d2fdc404..9fdf9225b 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -1,8 +1,3 @@
-import React from 'react';
-import preval from 'preval.macro';
-import moment from 'moment';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import {
   faFacebook,
   faInstagram,
@@ -11,8 +6,13 @@ import {
   faTiktok,
   faYoutube,
 } from '@fortawesome/free-brands-svg-icons';
-import { pathPrefix } from '../../../site-config';
+import { faHeart } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import moment from 'moment';
+import preval from 'preval.macro';
+import React from 'react';
 import GitHubButton from 'react-github-btn';
+import { pathPrefix } from '../../../site-config';
 
 const buildTimestamp = preval`module.exports = new Date().getTime();`;
 
@@ -33,8 +33,8 @@ const Footer = () => {
               rel="noreferrer"
               className="action-button-label footer-greybar-link"
             >
-              Star us on GitHub
-            </a>{' '}.
+              Star us on GitHub.
+            </a>{' '}
           </span>
           <GitHubButton
             href="https://github.com/SSWConsulting/SSW.Rules"
diff --git a/src/components/profile-content/profile-content.js b/src/components/profile-content/profile-content.js
new file mode 100644
index 000000000..c5a538205
--- /dev/null
+++ b/src/components/profile-content/profile-content.js
@@ -0,0 +1,224 @@
+import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg';
+import { useAuth0 } from '@auth0/auth0-react';
+import {
+  faArrowCircleRight,
+  faBook,
+  faFileLines,
+  faQuoteLeft,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'gatsby';
+import MD from 'gatsby-custom-md';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import useAppInsights from '../../hooks/useAppInsights';
+import { GetBookmarksForUser, RemoveBookmark } from '../../services/apiService';
+import { useAuthService } from '../../services/authService';
+import GreyBox from '../greybox/greybox';
+import { Filter } from '../profile-filter-menu/profile-filter-menu';
+import RadioButton from '../radio-button/radio-button';
+
+const ProfileContent = (props) => {
+  const [bookmarkedRules, setBookmarkedRules] = useState([]);
+  const [change, setChange] = useState(0);
+  const [viewStyle, setViewStyle] = useState('titleOnly');
+  const { user, isAuthenticated } = useAuth0();
+  const { fetchIdToken } = useAuthService();
+  const { trackException } = useAppInsights();
+  const handleOptionChange = (e) => {
+    setViewStyle(e.target.value);
+  };
+
+  async function onRemoveClick(ruleGuid) {
+    const jwt = await fetchIdToken();
+    if (isAuthenticated) {
+      if (props.filter == Filter.Bookmarks) {
+        RemoveBookmark({ ruleGuid: ruleGuid, UserId: user.sub }, jwt)
+          .then(() => {
+            setChange(change + 1);
+            props.setState(props.state + 1);
+          })
+          .catch((err) => {
+            trackException(err, 3);
+          });
+      }
+    }
+  }
+
+  function getBookmarkList() {
+    GetBookmarksForUser(user.sub)
+      .then((success) => {
+        const allRules = props.data.allMarkdownRemark.nodes;
+        const bookmarkedGuids =
+          success.bookmarkedRules.size != 0
+            ? success.bookmarkedRules.map((r) => r.ruleGuid)
+            : null;
+        const bookmarkedRulesMap = allRules.filter((value) =>
+          bookmarkedGuids.includes(value.frontmatter.guid)
+        );
+        const bookmarkedRulesSpread = bookmarkedRulesMap.map((r) => ({
+          ...r.frontmatter,
+          excerpt: r.excerpt,
+          htmlAst: r.htmlAst,
+        }));
+        setBookmarkedRules(bookmarkedRulesSpread);
+        props.setBookmarkedRulesCount(bookmarkedRulesSpread.length);
+      })
+      .catch((err) => {
+        trackException(err, 3);
+      });
+  }
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      getBookmarkList();
+    }
+  }, [isAuthenticated, props.filter, change, props.state]);
+
+  return (
+    <>
+      <div className="border-b border-solid border-b-gray-100 grid grid-cols-1 gap-5 p-4 text-center lg:grid-cols-5">
+        <div></div>
+        <RadioButton
+          id="customRadioInline1"
+          name="customRadioInline1"
+          value="titleOnly"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="View titles only"
+          icon={faQuoteLeft}
+        />
+        <RadioButton
+          id="customRadioInline3"
+          name="customRadioInline1"
+          value="blurb"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="Show blurb"
+          icon={faFileLines}
+        />
+        <RadioButton
+          id="customRadioInline2"
+          name="customRadioInline1"
+          value="all"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="Gimme everything!"
+          icon={faBook}
+        />
+      </div>
+      {bookmarkedRules ? (
+        <RuleList
+          rules={props.filter == Filter.Bookmarks ? bookmarkedRules : null}
+          viewStyle={viewStyle}
+          state={props.state}
+          type={props.filter == Filter.Bookmarks ? 'bookmark' : ''}
+          onRemoveClick={onRemoveClick}
+        />
+      ) : (
+        <p className="no-content-message">Loading...</p>
+      )}
+    </>
+  );
+};
+ProfileContent.propTypes = {
+  data: PropTypes.object.isRequired,
+  filter: PropTypes.number.isRequired,
+  setState: PropTypes.func.isRequired,
+  state: PropTypes.number.isRequired,
+  setBookmarkedRulesCount: PropTypes.func.isRequired,
+};
+
+const RuleList = ({ rules, viewStyle, type, onRemoveClick, state }) => {
+  const linkRef = useRef();
+  const components = {
+    greyBox: GreyBox,
+  };
+
+  useEffect(() => {}, [state]);
+
+  return (
+    <>
+      {rules.length == 0 ? (
+        <>
+          <div className="no-content-message">
+            <p className="no-tagged-message">
+              {type == 'bookmark'
+                ? 'No bookmarks? Use them to save rules for later!'
+                : ''}
+            </p>
+          </div>
+        </>
+      ) : (
+        <div className="p-12">
+          <ol className="rule-number">
+            {rules.map((rule) => {
+              return (
+                <div key={rule.guid} className="mb-3">
+                  <li key={rule.guid}>
+                    <section className="rule-content-title sm:pl-2">
+                      <div className="rule-header-container justify-between">
+                        <h2 className="flex flex-col justify-center">
+                          <Link ref={linkRef} to={`/${rule.uri}`}>
+                            {rule.title}
+                          </Link>
+                        </h2>
+                        {type == 'bookmark' ? (
+                          <div className="profile-rule-buttons flex flex-col justify-center">
+                            <button
+                              className="tooltip"
+                              onClick={() => onRemoveClick(rule.guid)}
+                            >
+                              <BookmarkIcon className="bookmark-icon-pressed" />
+                              <span className="tooltiptext">
+                                Remove Bookmark
+                              </span>
+                            </button>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+                      </div>
+                    </section>
+                    <section
+                      className={`rule-content px-4 mb-4 pb-4
+                            ${viewStyle === 'blurb' ? 'visible' : 'hidden'}`}
+                    >
+                      <div dangerouslySetInnerHTML={{ __html: rule.excerpt }} />
+                      <p className="pt-5 pb-0">
+                        <Link
+                          ref={linkRef}
+                          to={`/${rule.uri}`}
+                          title={`Read more about ${rule.title}`}
+                        >
+                          <FontAwesomeIcon icon={faArrowCircleRight} /> Read
+                          more
+                        </Link>
+                      </p>
+                    </section>
+                    <section
+                      className={`rule-content px-4 mb-4
+                            ${viewStyle === 'all' ? 'visible' : 'hidden'}`}
+                    >
+                      <MD components={components} htmlAst={rule.htmlAst} />
+                    </section>
+                  </li>
+                </div>
+              );
+            })}
+          </ol>
+        </div>
+      )}
+    </>
+  );
+};
+
+RuleList.propTypes = {
+  rules: PropTypes.array.isRequired,
+  viewStyle: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  onRemoveClick: PropTypes.func.isRequired,
+  state: PropTypes.number,
+};
+
+export default ProfileContent;
diff --git a/src/components/profile-filter-menu/profile-filter-menu.js b/src/components/profile-filter-menu/profile-filter-menu.js
new file mode 100644
index 000000000..11ca25feb
--- /dev/null
+++ b/src/components/profile-filter-menu/profile-filter-menu.js
@@ -0,0 +1,52 @@
+import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ProfileFilterMenu = ({
+  selectedFilter,
+  setSelectedFilter,
+  bookmarkedRulesCount,
+}) => {
+  return (
+    <>
+      <div className="filter-menu">
+        <button
+          className="menu-item"
+          style={
+            selectedFilter == Filter.Bookmarks
+              ? {
+                  gridColumn: 1,
+                  borderBottom: '0.25rem solid #cc4141',
+                  paddingBottom: '0.25rem',
+                }
+              : { gridColumn: 1 }
+          }
+          onClick={() => {
+            setSelectedFilter(Filter.Bookmarks);
+          }}
+        >
+          Bookmarks
+          <BookmarkIcon
+            className={
+              selectedFilter != Filter.Bookmarks
+                ? 'filter-menu-bookmark-icon'
+                : 'filter-menu-bookmark-icon-pressed'
+            }
+          />
+          <div className="mx-1">{bookmarkedRulesCount ?? 0}</div>
+        </button>
+      </div>
+    </>
+  );
+};
+
+ProfileFilterMenu.propTypes = {
+  selectedFilter: PropTypes.number.isRequired,
+  setSelectedFilter: PropTypes.func.isRequired,
+  bookmarkedRulesCount: PropTypes.number,
+};
+
+export const Filter = {
+  Bookmarks: 0,
+};
+export default ProfileFilterMenu;
diff --git a/src/pages/profile.js b/src/pages/profile.js
new file mode 100644
index 000000000..5183d010c
--- /dev/null
+++ b/src/pages/profile.js
@@ -0,0 +1,106 @@
+import GitHubIcon from '-!svg-react-loader!../images/github.svg';
+import { useAuth0 } from '@auth0/auth0-react';
+import { graphql, useStaticQuery } from 'gatsby';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import Breadcrumb from '../components/breadcrumb/breadcrumb';
+import ProfileBadge from '../components/profile-badge/profile-badge';
+import ProfileContent from '../components/profile-content/profile-content';
+import ProfileFilterMenu from '../components/profile-filter-menu/profile-filter-menu';
+
+const Profile = ({ data }) => {
+  const [selectedFilter, setSelectedFilter] = useState(0);
+  const [state, setState] = useState(0);
+  const [bookmarkedRulesCount, setBookmarkedRulesCount] = useState();
+  const { user, isAuthenticated } = useAuth0();
+
+  if (isAuthenticated) {
+    return (
+      <>
+        <Breadcrumb breadcrumbText="Profile" />
+        <div className="rule-category rounded">
+          <section className="mb-20 pb-2 rounded">
+            <div className="profile-header rounded-t">
+              <div className="grid-container profile-container-responsive">
+                <div className="profile-image">
+                  <ProfileBadge size="6.25rem" />
+                </div>
+                <div className="profile-large-name">
+                  {isAuthenticated ? user.name : ''}
+                </div>
+                <a
+                  className="github-link"
+                  href={`https://www.github.com/${user.nickname}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <GitHubIcon className="profile-github-icon" />
+                  GitHub Profile
+                </a>
+              </div>
+              <ProfileFilterMenu
+                selectedFilter={selectedFilter}
+                setSelectedFilter={setSelectedFilter}
+                bookmarkedRulesCount={bookmarkedRulesCount}
+                change={state}
+              />
+            </div>
+            <div>
+              <ProfileContent
+                data={data}
+                filter={selectedFilter}
+                setState={setState}
+                state={state}
+                setBookmarkedRulesCount={setBookmarkedRulesCount}
+              />
+            </div>
+          </section>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <p className="text-xl no-content-message">
+        Please first login to view profile
+      </p>
+    );
+  }
+};
+Profile.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+function ProfileWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query ProfilePageQuery {
+      allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) {
+        nodes {
+          excerpt(format: HTML, pruneLength: 500)
+          frontmatter {
+            title
+            uri
+            guid
+            authors {
+              title
+            }
+          }
+          htmlAst
+        }
+      }
+    }
+  `);
+
+  return <Profile data={data} {...props} />;
+}
+
+ProfilePage.propTypes = {
+  props: PropTypes.any,
+};
+
+export default function ProfilePage({ props }) {
+  return (
+    <>
+      <ProfileWithQuery {...props} />
+    </>
+  );
+}
diff --git a/src/style.css b/src/style.css
index 88909b5c1..c681a60de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1295,7 +1295,7 @@ div.bad-example {
   display: flex;
 }
 
-.rule-buttons .tooltiptext {
+.rule-buttons .tooltiptext, .profile-rule-buttons .tooltip .tooltiptext {
   left: -20px;
   margin-bottom: 1rem;
 }
@@ -1410,42 +1410,48 @@ div.bad-example {
   right: -2rem;
 }
 
-.dropdown-userinfo-container {
-  margin: 1rem 1rem !important;
-}
-
 .dropdown-username {
+  margin: 1rem 1rem !important;
   font-weight: bold;
   color: black;
   word-wrap: break-word;
   font-size: 1.18rem !important;
-  padding-bottom: 0.7rem;
-}
-
-.dropdown-github-icon {
-  margin: 0.15rem 0.2rem 0 0;
-}
-
-.dropdown-signout-btn-container:before {
-  content: "\f08b";
-  font-family: FontAwesome;
-  font-size: 1.5rem !important;
-  margin: 0 1rem;
 }
 
-.dropdown-signout-btn-container {
+.dropdown-btn {
   color: #666666;
   display: flex;
   align-items: center;
   margin-left: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
   font-size: 0.9rem;
 }
 
-.dropdown-signout-btn-container:hover {
+.dropdown-btn:hower {
   @apply text-ssw-red !important;
 }
 
+.dropdown-icon:before {
+  font-size: 1.5rem !important;
+  width: 22px !important;
+  margin: 0rem 1rem;
+}
+
+.dropdown-github-icon:before {
+  content: "\f09b";
+  font-family: FontAwesome;
+}
+
+.dropdown-user-icon:before {
+  content: "\f007";
+  font-family: FontAwesome;
+}
+
+.dropdown-signout-icon:before {
+  content: "\f08b";
+  font-family: FontAwesome;
+}
+
 .dropdown-badge {
   overflow: hidden;
   border-radius: 50%;
@@ -1471,6 +1477,17 @@ div.bad-example {
   color: #333333;
 }
 
+.no-content-message {
+  text-align: center;
+  margin: 2rem auto;
+}
+
+.profile-header {
+  background-color: #f5f5f5;
+  padding: 3rem;
+  height: auto;
+}
+
 .profile-container-img:hover {
   opacity: 0.8;
   cursor: pointer;
@@ -1483,10 +1500,32 @@ div.bad-example {
   height: 6.25rem;
 }
 
+.profile-github-icon {
+  margin: 0.2rem 0.25rem 0 0;
+}
+
+.profile-image {
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
 @media screen and (max-width: 600px) {
   .rule-content {
     padding: 1rem;
   }
+  .profile-image {
+    visibility: hidden;
+    grid-column: 1;
+    height: 0
+  }
+  .profile-large-name {
+    grid-column: 1;
+  }
+  .profile-github-icon {
+    margin: 0.2rem 0 0 0;
+    height: 1rem;
+    width: 1.8rem;
+  }
   .github-link {
     grid-column: 1 !important;
     padding-top: 0.75rem;
@@ -1497,10 +1536,15 @@ div.bad-example {
     justify-items: center;
     justify-content: center;
   }
+  .profile-container-responsive {
+    justify-items: start;
+    justify-content: start;
+  }
   .rule-content-title {
     padding: 0 !important;
   }
 }
+
 @media screen and (max-width: 1024px) {
   .radio-button-1 {
     grid-column: unset !important;
@@ -1511,6 +1555,30 @@ div.bad-example {
   .radio-button-3 {
     grid-column: unset !important;
   }
+  .profile-large-name {
+    font-size: 1.75rem !important;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .filter-menu {
+    grid-template-columns: auto !important;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0 !important;
+    top: 2rem !important;
+  }
+  .menu-item {
+    grid-column: 1 !important;
+  }
+  .profile-header {
+    padding: 2rem;
+  }
+}
+
+.profile-large-name {
+  font-size: 1.75rem;
+  grid-row: 1;
 }
 
 .github-link {
@@ -1529,6 +1597,15 @@ div.bad-example {
   opacity: 0.8;
 }
 
+.filter-menu {
+  top: 3rem;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto; 
+  column-gap: 1rem;
+  justify-content: start;
+}
+
 .radio-button-1 {
   grid-column: 2;
 }
@@ -1539,18 +1616,39 @@ div.bad-example {
   grid-column: 4;
 }
 
-.heading-container {
-  display: inline-flex;
-  background: #f5f5f5;
-  border-left: 2px solid #cc4141; 
-  width: 100%;
+.menu-item {
+  padding: 0 0.5rem 0.5rem;
+  text-align: center;
+  position: relative;
+  display: flex;
+  margin: auto;
+  white-space: nowrap;
+}
+ 
+.menu-item:hover {
+  padding: 0 0.5rem 0.25rem;
+  border-bottom: 0.25rem solid #CC4141;
+  cursor: pointer;
+}
+ 
+.menu-item:hover .filter-menu-bookmark-icon {
+  @apply text-ssw-red; 
+}
+ 
+.bookmarks-item:after {
+  padding-left: 0.5rem;
+  font-family: FontAwesome;
 }
 
-.heading-container h2 {
-  padding: 0 0 0 0.7rem;
-  background: none;
-  border-left: none;
-  margin: 0.5rem 0.8rem;
+.filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed {
+  margin: auto;
+  margin-right: -0.5rem;
+  height: 1rem;
+  width: 1.8rem;
+}
+
+.filter-menu-bookmark-icon-pressed {
+  @apply text-ssw-red; 
 }
 
 .rule-heading-love:after {
@@ -1587,6 +1685,12 @@ div.bad-example {
   margin-top: 10px;
 }
 
+.no-tagged-message:before {
+  font-family: FontAwesome;
+  content: '\f00d';
+  margin-right: 0.5rem;
+}
+
 .error-text {
   @apply text-ssw-red; 
 }