diff --git a/package-lock.json b/package-lock.json
index 6412192..c979319 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17399,6 +17399,11 @@
         }
       }
     },
+    "react-tiny-link": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-tiny-link/-/react-tiny-link-3.6.0.tgz",
+      "integrity": "sha512-uixE/1+IDKVcobnjZQpMafkBT/JQjdgt6kvBZ8AG4uSZ46ECi2HFT5R/TLokQoBJipU4dDs4Mph2AN4BGQMvkQ=="
+    },
     "read-only-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index eec12f2..81d9376 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "browser-sync": "^2.18.8",
     "browserify": "^13.3.0",
     "preact": "^7.1.0",
+    "react-tiny-link": "^3.6.0",
     "watchify": "^3.9.0"
   },
   "devDependencies": {
diff --git a/src/Links.js b/src/Components/Links.js
similarity index 100%
rename from src/Links.js
rename to src/Components/Links.js
diff --git a/src/Components/Page.js b/src/Components/Page.js
new file mode 100644
index 0000000..fe48327
--- /dev/null
+++ b/src/Components/Page.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+
+function Page ({ children, ...props }) {
+  return (
+    <div className="Page" {...props}>
+      <div className="Page-main">
+        {children}
+      </ div>
+    </div>
+  )
+}
+
+export default Page
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index b5eb7a8..33a8872 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,10 @@
-html, body, #root {
+html, body, #root, .App {
   height: 100%;
   width: 100%;
   margin: 0;
 }
 
-#root, .portrait-container {
+.portrait-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,4 +51,25 @@ h3 {
 
 h1, h3 {
   text-align: center;
+}
+
+.Page {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Page-main {
+  max-width: 100%;
+}
+
+.Highlights {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  /* align-items: center; */
+}
+.Highlight {
+  padding: .5rem;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b874a98..dca0ac1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,18 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import Links from './Links'
-import portrait from './images/BradGaynor.jpg'
+import Highlights from './pages/Highlights'
+import Home from './pages/Home'
 
 const App = () => {
   return (
-    <div className="container">
-        <div className="portrait-container">
-          <img className="portrait" src={portrait} alt="Brad Gaynor" />
-        </div>
-        <h1>Bradley Gaynor</h1>
-        <h3>Senior Software Engineer</h3>
-        <Links />
+    <div className='App'>
+      <Home />
+      <Highlights />
     </div>
   )
 }
diff --git a/src/pages/Highlights.js b/src/pages/Highlights.js
new file mode 100644
index 0000000..5417e3a
--- /dev/null
+++ b/src/pages/Highlights.js
@@ -0,0 +1,34 @@
+import React from "react";
+import Page from "../Components/Page";
+import { ReactTinyLink } from "react-tiny-link";
+
+function Highlight ({ link }) {
+  return (
+    <li className="Highlight">
+      <ReactTinyLink
+        cardSize="small"
+        showGraphic={true}
+        maxLine={2}
+        minLine={1}
+        url={link}
+      />
+    </li>
+  )
+  
+}
+
+function Highlights() {
+  return (
+    <Page>
+      <ul className='Highlights'>
+        <Highlight link='https://gitlab.com/bmgaynor/create-react-catalog' />
+        <Highlight link='https://gitlab.com/bmgaynor/use-scroll-position' />
+        <Highlight link='https://github.com/Bmgaynor/mono' />
+        <Highlight link='https://gitlab.com/bmgaynor/react-16-presentation' />
+        <Highlight link='https://github.com/Bmgaynor/react-google-openid-express' />
+      </ul>
+    </Page>
+  );
+}
+
+export default Highlights;
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..ca570ef
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,19 @@
+import React from "react";
+import Links from '../Components/Links'
+import portrait from '../images/BradGaynor.jpg'
+import Page from "../Components/Page";
+
+function Home() {
+  return (
+    <Page>
+      <div className="portrait-container">
+        <img className="portrait" src={portrait} alt="Brad Gaynor" />
+      </div>
+      <h1>Bradley Gaynor</h1>
+      <h3>Senior Software Engineer</h3>
+      <Links />
+    </Page>
+  );
+}
+
+export default Home;