diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index db6fddd..3896ed8 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,20 +1,61 @@
 import React from 'react'
 import {Story, Meta} from '@storybook/react'
-
+import {Icon} from '../Icons/Icon'
 import {Button} from './Button'
 
 export default {
   title: 'Components/Button',
   component: Button,
   argTypes: {
-    backgroundColor: {control: 'color'}
+    style: {
+      defaultValue: 'gray',
+      options: ['gray', 'primary', 'outline', 'ghost', 'link'],
+      control: {type: 'select'}
+    },
+    size: {
+      defaultValue: 'md',
+      options: ['xs', 'sm', 'md', 'lg', 'responsive'],
+      control: {type: 'select'}
+    },
+    status: {
+      defaultValue: 'normal',
+      options: ['normal', 'disabled'],
+      control: {type: 'radio'}
+    },
+    outline: {
+      defaultValue: 'square',
+      options: ['square', 'round'],
+      control: {type: 'radio'}
+    }
   }
 } as Meta
 
-const Template: Story = args => <Button {...args} />
+const RandomIcon = ({className}) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    className={className}
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 496 512"
+  >
+    <path
+      fill="currentColor"
+      d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z"
+    />
+  </svg>
+)
 
-export const Primary = Template.bind({})
-Primary.args = {
-  variant: 'primary',
-  children: 'Button'
+const Template: Story = args => {
+  return (
+    <>
+      <Button {...args}>
+        <Icon {...args} style="ghost" icon={RandomIcon} />
+        <span>Button</span>
+        <Icon {...args} style="ghost" icon={RandomIcon} />
+      </Button>
+    </>
+  )
 }
+
+export const Buttons = Template.bind({})
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2ccd0cb..419aa9d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,8 +1,74 @@
 import React from 'react'
 import cn from 'classnames'
-import type {ComponentProps} from 'react'
 
-// minor example
-export function Button(props: ComponentProps<'button'>) {
-  return <button className={cn('p-4 bg-blue-500 text-white', props.className)} {...props} />
+type ButtonStyles = 'gray' | 'primary' | 'outline' | 'ghost' | 'link'
+type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'responsive'
+type ButtonStatus = 'normal' | 'disabled'
+type ButtonOutline = 'round' | 'square'
+
+const buttonSizes = {
+  xs: 'p-2 text-xs',
+  sm: 'p-2 text-sm',
+  md: 'py-2 px-3 text-base',
+  lg: 'py-3 px-4 text-lg'
+}
+
+export function Button({
+  style = 'gray',
+  size = 'md',
+  status = 'normal',
+  outline = 'square',
+  disabled,
+  className,
+  ...props
+}: {
+  style: ButtonStyles
+  size: ButtonSizes
+  status: ButtonStatus
+  outline: ButtonOutline
+  className: string
+  disabled: boolean
+}) {
+  const buttonSize = buttonSizes[size]
+  const fontWeight = 'font-bold'
+  const linkHover = style === 'link' ? 'inline-block hover:underline cursor-pointer' : ''
+  const radius = outline === 'square' ? 'rounded' : 'rounded-full'
+  const textColor = 'text-primary-600'
+  const backgroundColor = 'bg-transparent'
+  const borderColor = 'border-transparent'
+
+  let hover = 'hover:from-gradient-white'
+  let buttonClasses = `${textColor} ${backgroundColor} ${borderColor}`
+
+  if (style === 'gray') {
+    buttonClasses = 'text-primary-200 bg-gray-800 bg-gradient-to-r'
+  } else if (style === 'primary') {
+    buttonClasses = 'text-white bg-primary-500 bg-gradient-to-r border-primary-600'
+  } else if (style === 'outline') {
+    const border = size === 'md' || size === 'lg' ? 'border-2' : 'border'
+    buttonClasses = `${textColor} hover:text-white border-primary-500 hover:bg-primary-500 ${border}`
+  } else if (style === 'ghost') {
+    hover += ' hover:bg-primary-100'
+  }
+
+  const classes = cn(
+    'flex items-center text-center space-x-2',
+    fontWeight,
+    buttonSize,
+    textColor,
+    borderColor,
+    backgroundColor,
+    linkHover,
+    radius,
+    hover,
+    buttonClasses,
+    disabled && 'opacity-40 cursor-not-allowed',
+    className
+  )
+
+  if (style === 'link') {
+    return <a {...props} className={classes} />
+  }
+
+  return <button {...props} className={classes} />
 }
diff --git a/src/components/ProgressCircle/ProgressCircle.tsx b/src/components/ProgressCircle/ProgressCircle.tsx
new file mode 100644
index 0000000..9fc61be
--- /dev/null
+++ b/src/components/ProgressCircle/ProgressCircle.tsx
@@ -0,0 +1,65 @@
+const cleanPercentage = percentage => {
+  const isNegativeOrNaN = !Number.isFinite(+percentage) || percentage < 0 // we can set non-numbers to 0 here
+  const isTooHigh = percentage > 100
+  return isNegativeOrNaN ? 0 : isTooHigh ? 100 : +percentage
+}
+
+const Circle = ({color, percentage, stroke}) => {
+  const r = 50
+  const circ = 2 * Math.PI * r
+  const strokePct = ((100 - percentage) * circ) / 100 // where stroke will start, e.g. from 15% to 100%.
+  const circleColor = stroke ? stroke : color
+  return (
+    <circle
+      r={r}
+      cx={126}
+      cy={75}
+      fill="transparent"
+      stroke={strokePct !== circ ? circleColor : ''} // remove color as 0% sets full circumference
+      strokeWidth="6"
+      strokeDasharray={circ}
+      stroke-linecap="round"
+      strokeDashoffset={percentage ? strokePct : 0}
+    ></circle>
+  )
+}
+
+const Percent = ({percentage}) => {
+  return (
+    <text
+      x="50%"
+      y="50%"
+      dominantBaseline="central"
+      textAnchor="middle"
+      fontSize="1.125rem"
+      font-family="Fira Code"
+      font-weight="400"
+      stroke="#20afdf"
+      stroke-width="1"
+    >
+      {percentage.toFixed(0)}%
+    </text>
+  )
+}
+
+export const ProgressCircle = percentage => {
+  const pct = cleanPercentage(percentage)
+  return (
+    <>
+      <hr />
+      <svg width={150} height={150}>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#ffffff" />
+            <stop offset="100%" stop-color="#20afdf" />
+          </linearGradient>
+        </defs>
+        <g transform="rotate(-90 100 100)">
+          <Circle color="#e3e2e9" />
+          <Circle stroke="url(#gradient)" color="#20afdf" percentage={pct} />
+        </g>
+        <Percent percentage={pct} />
+      </svg>
+    </>
+  )
+}
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
new file mode 100644
index 0000000..081e03b
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -0,0 +1,115 @@
+import React from 'react'
+import {Story, Meta} from '@storybook/react'
+import {Sidebar} from './Sidebar'
+
+export default {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+  argTypes: {
+    // style: {
+    //   defaultValue: 'gray',
+    //   options: ['gray', 'primary', 'outline', 'ghost', 'link'],
+    //   control: {type: 'select'}
+    // },
+    // size: {
+    //   defaultValue: 'md',
+    //   options: ['xs', 'sm', 'md', 'lg', 'responsive'],
+    //   control: {type: 'select'}
+    // },
+    // status: {
+    //   defaultValue: 'normal',
+    //   options: ['normal', 'disabled'],
+    //   control: {type: 'radio'}
+    // },
+    // outline: {
+    //   defaultValue: 'square',
+    //   options: ['square', 'round'],
+    //   control: {type: 'radio'}
+    // }
+  }
+} as Meta
+
+const smileyIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14 0.9375C6.50781 0.9375 0.4375 7.00781 0.4375 14.5C0.4375 21.9922 6.50781 28.0625 14 28.0625C21.4922 28.0625 27.5625 21.9922 27.5625 14.5C27.5625 7.00781 21.4922 0.9375 14 0.9375ZM18.375 10.125C19.3047 10.125 20.125 10.9453 20.125 11.875C20.125 12.8594 19.3047 13.625 18.375 13.625C17.3906 13.625 16.625 12.8594 16.625 11.875C16.625 10.9453 17.3906 10.125 18.375 10.125ZM9.625 10.125C10.5547 10.125 11.375 10.9453 11.375 11.875C11.375 12.8594 10.5547 13.625 9.625 13.625C8.64062 13.625 7.875 12.8594 7.875 11.875C7.875 10.9453 8.64062 10.125 9.625 10.125ZM20.2344 19.4766C18.7031 21.3359 16.4062 22.375 14 22.375C11.5391 22.375 9.24219 21.3359 7.71094 19.4766C6.94531 18.5469 8.3125 17.4531 9.02344 18.3281C10.2812 19.8047 12.0859 20.625 14 20.625C15.9141 20.625 17.6641 19.8047 18.9219 18.3281C19.6328 17.4531 21 18.5469 20.2344 19.4766Z"
+      fill="#2D2B3A"
+    />
+  </svg>
+)
+
+const smileyIcon24 = () => (
+  <svg width="24" height="24" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14 0.9375C6.50781 0.9375 0.4375 7.00781 0.4375 14.5C0.4375 21.9922 6.50781 28.0625 14 28.0625C21.4922 28.0625 27.5625 21.9922 27.5625 14.5C27.5625 7.00781 21.4922 0.9375 14 0.9375ZM18.375 10.125C19.3047 10.125 20.125 10.9453 20.125 11.875C20.125 12.8594 19.3047 13.625 18.375 13.625C17.3906 13.625 16.625 12.8594 16.625 11.875C16.625 10.9453 17.3906 10.125 18.375 10.125ZM9.625 10.125C10.5547 10.125 11.375 10.9453 11.375 11.875C11.375 12.8594 10.5547 13.625 9.625 13.625C8.64062 13.625 7.875 12.8594 7.875 11.875C7.875 10.9453 8.64062 10.125 9.625 10.125ZM20.2344 19.4766C18.7031 21.3359 16.4062 22.375 14 22.375C11.5391 22.375 9.24219 21.3359 7.71094 19.4766C6.94531 18.5469 8.3125 17.4531 9.02344 18.3281C10.2812 19.8047 12.0859 20.625 14 20.625C15.9141 20.625 17.6641 19.8047 18.9219 18.3281C19.6328 17.4531 21 18.5469 20.2344 19.4766Z"
+      fill="#2D2B3A"
+    />
+  </svg>
+)
+
+const simpleLinks = Array.from({length: 3}, () => ({
+  title: 'Text Here',
+  target: 'https://openmined.org',
+  disabled: false
+}))
+
+const iconLinks = Array.from({length: 3}, () => ({
+  title: 'Text Here',
+  target: 'https://openmined.org',
+  icon: smileyIcon
+}))
+
+const numberLinks = Array.from([1, 2, 3], n => ({
+  title: 'Text Here',
+  target: 'https://openmined.org',
+  number: n
+}))
+
+const iconLinks24 = Array.from({length: 3}, () => ({
+  title: 'Text Here',
+  target: 'https://openmined.org',
+  icon: smileyIcon24
+}))
+
+const avatarLinks = Array.from({length: 3}, () => ({
+  title: 'Text Here',
+  target: 'https://openmined.org',
+  avatar:
+    'https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light'
+}))
+
+const prereqs = [
+  {
+    title: 'Text Here',
+    target: 'https://openmined.org',
+    disabled: false
+  },
+  {
+    title: 'Text Here',
+    target: 'https://openmined.org',
+    disabled: true
+  }
+]
+
+const Template: Story = args => {
+  return (
+    <div className="flex">
+      <div className="sm:w-1/2">
+        <Sidebar {...args} links={simpleLinks} heading="Heading 5" />
+        <Sidebar {...args} links={iconLinks} progressPct={50} heading="Heading 5" />
+        <br />
+        <br />
+        <Sidebar {...args} links={numberLinks} hasMessage={true} />
+      </div>
+      <div className="sm:w-1/2">
+        <Sidebar {...args} links={avatarLinks} heading="Heading 5" />
+        <Sidebar {...args} links={iconLinks24} heading="Heading 5" progressPct={25} />
+        <br />
+        <br />
+        <Sidebar {...args} links={iconLinks24} borderLeft={true} hasMessage={true} prereqs={prereqs} />
+      </div>
+    </div>
+  )
+}
+
+export const main = Template.bind({})
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..d021669
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,120 @@
+import React from 'react'
+import cn from 'classnames'
+import {H5, Text} from '../Typography/Text'
+import {Button} from '../Button/Button'
+import {Icon} from '../Icons/Icon'
+import {Avatar} from '../Avatar/Avatar'
+import {ProgressCircle} from '../ProgressCircle/ProgressCircle'
+
+const messageIcon = () => (
+  <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20.5 8C20.5 3.875 16.0938 0.5 10.75 0.5C5.35938 0.5 1 3.875 1 8C1 9.64062 1.65625 11.0938 2.78125 12.3125C2.125 13.7656 1.09375 14.8906 1.09375 14.8906C1 14.9844 0.953125 15.1719 1 15.3125C1.09375 15.4531 1.1875 15.5 1.375 15.5C3.0625 15.5 4.46875 14.9375 5.5 14.3281C7 15.0781 8.82812 15.5 10.75 15.5C16.0938 15.5 20.5 12.1719 20.5 8ZM26.2188 18.3125C27.2969 17.0938 28 15.6406 28 14C28 10.9062 25.4688 8.1875 21.9062 7.0625C21.9531 7.39062 22 7.71875 22 8C22 12.9688 16.9375 17 10.75 17C10.2344 17 9.71875 17 9.25 16.9531C10.7031 19.625 14.1719 21.5 18.25 21.5C20.1719 21.5 21.9531 21.0781 23.4531 20.3281C24.4844 20.9375 25.8906 21.5 27.625 21.5C27.7656 21.5 27.9062 21.4531 27.9531 21.3125C28 21.1719 28 20.9844 27.8594 20.8906C27.8594 20.8906 26.8281 19.7656 26.2188 18.3125Z"
+      fill="#2D2B3A"
+    />
+  </svg>
+)
+
+export function Sidebar({
+  heading = '',
+  hasMessage = false,
+  borderLeft = false,
+  progressPct,
+  links,
+  prereqs,
+  className,
+
+  ...props
+}: {
+  heading: string
+  hasMessage: boolean
+  borderLeft: boolean
+  progressPct: number
+  icon: React.ReactType
+  links: []
+  prereqs: []
+
+  className: string
+  disabled: boolean
+}) {
+  const numberClasses = 'rounded-full bg-gray-800 text-gray-50 text-sm w-5 h-5 leading-snug'
+  const containerClasses = `sm:w-1/3 lg:w-1/4 ${borderLeft ? 'border-l-2 pl-6' : ''}`
+
+  const userMessage = () => {
+    return (
+      <>
+        <hr />
+        <div className="py-4">
+          <Icon icon={messageIcon} style="ghost" />
+        </div>
+        <Text as="p" size="sm" className="text-gray-600">
+          Not seeing an answer to your specific question? Go to our{' '}
+          <Text as="a" underline={true} href="#" size="sm" className="text-primary-600">
+            discussion boad
+          </Text>{' '}
+          to get extra assistance.
+        </Text>
+      </>
+    )
+  }
+
+  const mapPrerequisites = prereqs => {
+    return prereqs.map(prereq => (
+      <li className="pb-2">
+        <Text as="a" className="text-gray-600 hover:underline hover:text-primary-600" href={prereq.target} size="sm">
+          {prereq.title}
+        </Text>
+      </li>
+    ))
+  }
+
+  const mapLinks = links => {
+    return links.map(link => (
+      <li>
+        <Button style="ghost" disabled={link.disabled}>
+          {link.avatar && <Avatar src={link.avatar} size="md" />}
+          {link.number && <span className={numberClasses}>{link.number}</span>}
+          {link.icon && <Icon icon={link.icon} style="ghost" />}
+          <div className="flex-col">
+            <Text as="a" href={link.target} size="sm" className="text-gray-600">
+              {link.title}
+            </Text>
+            {link.subtitle && (
+              <Text as="p" size="sm" className="text-gray-600">
+                {link.subtitle}
+              </Text>
+            )}
+          </div>
+        </Button>
+      </li>
+    ))
+  }
+
+  return (
+    <div className={containerClasses}>
+      {heading && (
+        <>
+          <H5 className="pb-1">{heading}</H5>
+          <hr />
+        </>
+      )}
+      <ul className="py-2">{links && mapLinks(links)}</ul>
+      {hasMessage && userMessage()}
+      {prereqs && (
+        <div className="pt-4">
+          <hr />
+          <Text as="h3" size="md" bold={true} className="py-4 text-gray-800">
+            Pre-Requisites
+          </Text>
+        </div>
+      )}
+      <ul className="list-disc pl-6 pb-6">{prereqs && mapPrerequisites(prereqs)}</ul>
+      {progressPct && (
+        <>
+          <hr />
+          {ProgressCircle(progressPct)}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
index 06cd96c..facdaa2 100644
--- a/src/components/Typography/Text.tsx
+++ b/src/components/Typography/Text.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import cn from 'classnames'
 import type {PropsWithChildren} from 'react'
 
-type TextComponent = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+type TextComponent = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a'
 type TextSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
 type FontWeight = 'font-medium' | 'font-normal' | 'font-black' | 'font-bold'
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 2849da3..cf297e9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,6 +48,10 @@ module.exports = {
       },
       dropShadow: {
         'button-hover': '-4px 4px 8px --color-primary-500'
+      },
+      strokeWidth: {
+        5: '5',
+        6: '6'
       }
     }
   },