diff --git a/packages/app/pages/hashtag.tsx b/packages/app/pages/hashtag.tsx
index a50b55c0..97f7fb98 100644
--- a/packages/app/pages/hashtag.tsx
+++ b/packages/app/pages/hashtag.tsx
@@ -36,7 +36,6 @@ export default function HashtagComponent() {
 
   const recommendedProps: UserRecommendedProps = {
     label: 'Display Name',
-    variant: 'small',
     btn: {
       label: 'Follow',
       onClick: () => console.log('clicked'),
diff --git a/packages/app/pages/profilepage.tsx b/packages/app/pages/profilepage.tsx
index 73ff1763..3b21e9e0 100644
--- a/packages/app/pages/profilepage.tsx
+++ b/packages/app/pages/profilepage.tsx
@@ -6,13 +6,15 @@ import {
   Container,
   Heading,
   TextBox,
-  User,
-  UserProps,
   UploadForm,
   BottomSpacing,
+  UserRecommendedProps,
+  UserRecommended,
+  IconLink,
 } from '@smartive-education/design-system-component-library-yeahyeahyeah';
 import debounce from 'lodash.debounce';
 import { FileRejection } from 'react-dropzone';
+import Link from 'next/link';
 
 export default function Profilepage() {
   const [posts, setPosts] = useState(['']);
@@ -65,21 +67,23 @@ export default function Profilepage() {
     setShowModal(true);
   };
 
-  const props: UserProps = {
+  const props: UserRecommendedProps = {
+    label: 'Display Name',
     avatar: {
       alt: 'Alter Tag',
       onImageClick: () => console.log('image clicked'),
       src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif',
     },
-    label: 'Display Name',
-    variant: 'recommended',
+    btn: { label: 'Follow', onClick: () => console.log('btn clicked') },
   };
 
   const users = Array(12)
     .fill('user')
     .map((u, i) => (
       <div tw="flex-[30%]" key={i}>
-        <User {...props} />
+        <UserRecommended {...props}>
+          <IconLink label="User" type="username" color="violet" href="/" legacyBehavior passHref linkComponent={Link} />
+        </UserRecommended>
       </div>
     ));
 
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx
index 7a7b371c..e719c134 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import tw from 'twin.macro';
+import { NavigationContainer } from './NavigationStyles';
 
 export type NavigationProps = {
   title: 'Mumble Logo';
@@ -11,7 +12,7 @@ export const Navigation = ({ children }: NavigationProps) => {
   return (
     <HeaderStyles>
       <NavigationStyles>
-        <Container>{children}</Container>
+        <NavigationContainer>{children}</NavigationContainer>
       </NavigationStyles>
     </HeaderStyles>
   );
@@ -21,16 +22,6 @@ const HeaderStyles = tw.header`
   w-full
 `;
 
-const Container = tw.div`
-  flex
-  flex-col
-  sm:flex-row
-  justify-center
-  items-center
-  container
-  px-16
-`;
-
 const NavigationStyles = styled.nav(() => [
   tw`
     flex
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx b/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx
index 24e1a38d..b92f1dad 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx
@@ -1,6 +1,6 @@
 import tw from 'twin.macro';
 
-export const Container = tw.div`
+export const NavigationContainer = tw.div`
   flex
   flex-col
   sm:flex-row
@@ -10,14 +10,14 @@ export const Container = tw.div`
   px-16
 `;
 
-export const Column = tw.div`
+export const NavigationColumn = tw.div`
   flex
   justify-between
   items-center
   w-full
 `;
 
-export const Row = tw.div`
+export const NavigationRow = tw.div`
   flex
   flex-row
   justify-between
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts b/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts
index 95e14a93..67e31081 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts
+++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts
@@ -1 +1,2 @@
 export * from './Navigation';
+export * from './NavigationStyles';
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx
index 9ef78589..9a66865b 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Heading } from '../typography/Heading';
 import { Avatar, AvatarProps } from './Avatar';
-import { Column, HeadingWrapper, Row } from './UserStyles';
+import { UserColumn, HeadingWrapper, UserRow } from './UserStyles';
 
 export interface UserProps {
   label: string;
-  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'recommended' | 'write' | 'inline';
+  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'write' | 'inline';
   type?: 'edit' | 'view';
   avatar?: AvatarProps<any>;
   children?: React.ReactNode;
@@ -27,52 +27,52 @@ export const User: React.FC<UserProps> = ({
   return (
     <>
       {variant === 'small' && (
-        <Row gap="small">
+        <UserRow gap="small">
           <Avatar {...avatar} variant="small" />
-          <Column variant={variant}>
+          <UserColumn variant={variant}>
             <Heading tag="h4" color="dark" size="medium" label={label} />
-            <Row>{children}</Row>
-          </Column>
-        </Row>
+            <UserRow>{children}</UserRow>
+          </UserColumn>
+        </UserRow>
       )}
       {variant === 'medium' && (
-        <Column>
+        <UserColumn>
           <Heading tag="h4" color="dark" size="large" label={label} />
-          <Row>{children}</Row>
-        </Column>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'large' && (
-        <Column>
+        <UserColumn>
           <Heading tag="h4" color="dark" size="xlarge" label={label} />
-          <Row>{children}</Row>
-        </Column>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'xlarge' && (
-        <Column>
-          <Row type={type}>
+        <UserColumn>
+          <UserRow type={type}>
             <Heading tag="h3" color="dark" size="default" label={label} />
-          </Row>
-          <Row>{children}</Row>
-        </Column>
+          </UserRow>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'inline' && (
-        <Row gap="small">
+        <UserRow gap="small">
           <Avatar {...avatar} variant="small" />
-          <Column variant={variant}>
+          <UserColumn variant={variant}>
             <Heading tag="h4" color="dark" size="default" label={label} />
-            <Row>{children}</Row>
-          </Column>
-        </Row>
+            <UserRow>{children}</UserRow>
+          </UserColumn>
+        </UserRow>
       )}
       {variant === 'write' && (
-        <Row gap="small">
-          <Column variant={variant}>
+        <UserRow gap="small">
+          <UserColumn variant={variant}>
             <Avatar {...avatar} variant="medium" />
             <HeadingWrapper>
               <Heading tag="h4" color="dark" size="default" label={label} />
             </HeadingWrapper>
-          </Column>
-        </Row>
+          </UserColumn>
+        </UserRow>
       )}
     </>
   );
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx
index 8e0e64d7..8b05edaa 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx
@@ -3,12 +3,10 @@ import tw from 'twin.macro';
 import { Heading } from '../typography/Heading';
 import { Button } from '../button/Button';
 import { Avatar, AvatarProps } from './Avatar';
-import { Article, Column, Row } from './UserStyles';
+import { UserArticle, UserColumn, UserRow } from './UserStyles';
 
 export interface UserRecommendedProps {
   label: string;
-  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'recommended' | 'write' | 'inline';
-  type?: 'edit' | 'view';
   avatar?: AvatarProps<any>;
   btn?: { label: string; onClick?: () => void };
   children?: React.ReactNode;
@@ -27,15 +25,15 @@ export const UserRecommended: React.FC<UserRecommendedProps> = ({
   children,
 }) => {
   return (
-    <Article>
-      <Column variant="recommended">
+    <UserArticle>
+      <UserColumn variant="recommended">
         <Avatar {...avatar} variant="large" />
-        <Row spacing={tw`mb-8`}>
+        <UserRow spacing={tw`mb-8`}>
           <Heading tag="h4" color="dark" size="large" label={label} />
-        </Row>
+        </UserRow>
         <div tw="mb-16">{children}</div>
         {btn && <Button {...btn} icon="logo" size="small" type="button" width="large" color="violet" />}
-      </Column>
-    </Article>
+      </UserColumn>
+    </UserArticle>
   );
 };
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx
index b1e8547d..819e8d32 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx
@@ -10,7 +10,7 @@ export interface RowStyles {
   type?: string;
 }
 
-export const Column = styled.div(({ variant }: UserStyles) => [
+export const UserColumn = styled.div(({ variant }: UserStyles) => [
   tw`
     flex
     flex-col
@@ -26,7 +26,7 @@ export const Column = styled.div(({ variant }: UserStyles) => [
   `,
 ]);
 
-export const Row = styled.div(({ gap, spacing, type }: RowStyles) => [
+export const UserRow = styled.div(({ gap, spacing, type }: RowStyles) => [
   tw`
     flex
     flex-row
@@ -39,7 +39,7 @@ export const Row = styled.div(({ gap, spacing, type }: RowStyles) => [
   type === 'edit' && tw`w-fit gap-0`,
 ]);
 
-export const Article = styled.article(() => [tw`flex flex-col p-16 bg-slate-white rounded-16`]);
+export const UserArticle = styled.article(() => [tw`flex flex-col p-16 bg-slate-white rounded-16`]);
 
 export const HeadingWrapper = tw.div`
   ml-12
diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx
index a983366f..39485800 100644
--- a/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NavigationReadme from '../../docs/Navigation.md';
-import { Avatar, Container, NaviButton, Navigation, Column, Row, Modal } from '../../index';
+import { Avatar, NaviButton, Navigation, Modal, NavigationContainer, NavigationColumn, NavigationRow } from '../../index';
 import Link from 'next/link';
 
 export default {
@@ -20,9 +20,10 @@ const Template: ComponentStory<typeof Navigation> = (args) => {
 
   return !open ? (
     <Navigation {...args} title="Mumble Logo">
-      <Container layout="plain">
-        <Column>
-          <Row>
+      <NavigationContainer>
+        <NavigationColumn>
+          <div tw="text-slate-white">Logo</div>
+          <NavigationRow>
             <NaviButton
               label="Profile"
               variant="profile"
@@ -51,9 +52,9 @@ const Template: ComponentStory<typeof Navigation> = (args) => {
               passHref={true}
               linkComponent={Link}
             />
-          </Row>
-        </Column>
-      </Container>
+          </NavigationRow>
+        </NavigationColumn>
+      </NavigationContainer>
     </Navigation>
   ) : (
     <Modal label="Settings" isOpen={open} onClose={handleClose}>
diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx
index 9b259b2f..0eec6cb0 100644
--- a/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx
@@ -3,6 +3,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { User } from '../../components/user/User';
 import { action } from '@storybook/addon-actions';
 import UserReadme from '../../docs/User.md';
+import { IconLink } from '../../index';
+import Link from 'next/link';
 
 export default {
   title: 'User/User',
@@ -14,29 +16,6 @@ export default {
     variant: {
       control: 'select',
     },
-    username: {
-      control: 'object',
-    },
-    timestamp: {
-      control: {
-        type: 'object',
-      },
-    },
-    location: {
-      control: {
-        type: 'object',
-      },
-    },
-    joined: {
-      control: {
-        type: 'object',
-      },
-    },
-    btn: {
-      control: {
-        type: 'object',
-      },
-    },
     avatar: {
       control: {
         type: 'object',
@@ -51,33 +30,6 @@ export default {
     label: 'Display Name',
     variant: 'small',
     type: 'edit',
-    username: {
-      label: 'Username',
-      href: '',
-      fCallBack: action('username clicked'),
-      type: 'username',
-    },
-    timestamp: {
-      label: 'Timestamp',
-      href: '',
-      fCallBack: action('timestamp clicked'),
-      type: 'timestamp',
-    },
-    location: {
-      label: 'Location',
-      href: '',
-      fCallBack: action('location clicked'),
-      type: 'location',
-    },
-    joined: {
-      label: 'Joined',
-      href: '',
-      fCallBack: action('joined clicked'),
-      type: 'joined',
-    },
-    settings: {
-      fCallBack: action('settings clicked'),
-    },
     avatar: {
       src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif',
       alt: 'Alter Tag',
@@ -91,13 +43,16 @@ export default {
   },
 } as ComponentMeta<typeof User>;
 
-const Template: ComponentStory<typeof User> = (args) => <User {...args} />;
+const Template: ComponentStory<typeof User> = (args) => (
+  <User {...args}>
+    <IconLink label="User" type="username" color="violet" href="/" legacyBehavior passHref linkComponent={Link} />
+    <IconLink label="Joined" type="timestamp" color="slate" href="/" legacyBehavior passHref linkComponent={Link} />
+  </User>
+);
 
 export const UserStory = Template.bind({});
 
-UserStory.args = {
-  variant: 'recommended',
-};
+UserStory.args = {};
 
 UserStory.parameters = {
   docs: {
diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx
new file mode 100644
index 00000000..5a9365ee
--- /dev/null
+++ b/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { UserRecommended } from '../../components/user/UserRecommended';
+import UserReadme from '../../docs/User.md';
+import { IconLink } from '../../index';
+import Link from 'next/link';
+
+export default {
+  title: 'User/User',
+  component: UserRecommended,
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'Display Name',
+    avatar: {
+      alt: 'Alter Tag',
+      onImageClick: () => console.log('image clicked'),
+      src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif',
+    },
+    btn: { label: 'Follow', onClick: () => console.log('btn clicked') },
+  },
+} as ComponentMeta<typeof UserRecommended>;
+
+const Template: ComponentStory<typeof UserRecommended> = (args) => (
+  <UserRecommended {...args}>
+    <IconLink label="User" type="username" color="violet" href="/" legacyBehavior passHref linkComponent={Link} />
+  </UserRecommended>
+);
+
+export const UserRecommendedStory = Template.bind({});
+
+UserRecommendedStory.args = {};
+
+UserRecommendedStory.parameters = {
+  docs: {
+    source: { type: 'dynamic' },
+    description: {
+      component: UserReadme,
+    },
+  },
+};
+
+UserRecommendedStory.storyName = 'UserRecommended';