diff --git a/src/views/friends/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx
index 5a074319..544a96a8 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarView.tsx
@@ -1,7 +1,7 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useMemo, useState } from 'react';
+import { Button } from '../../../../common';
 import { Flex } from '../../../../common/Flex';
-import { NitroLayoutButton } from '../../../../layout';
-import { NitroLayoutBase } from '../../../../layout/base';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
@@ -28,16 +28,16 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
 
     return (
         <Flex alignItems="center" className="friend-bar">
-            <NitroLayoutButton className="friend-bar-button" variant="black" size="sm" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
-                <NitroLayoutBase className="fas fa-chevron-left" />
-            </NitroLayoutButton>
+            <Button variant="black" className="friend-bar-button" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
+                <FontAwesomeIcon icon="chevron-left" />
+            </Button>
             { Array.from(Array(maxDisplayCount), (e, i) =>
                 {
                     return <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />;
                 }) }
-            <button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
-                <i className="fas fa-chevron-right" />
-            </button>
+            <Button variant="black" className="friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
+                <FontAwesomeIcon icon="chevron-right" />
+            </Button>
         </Flex>
     );
 }