diff --git a/src/components/Projects/LivePreviewButton.tsx b/src/components/Projects/LivePreviewButton.tsx
index 84a1b66..9b257fa 100644
--- a/src/components/Projects/LivePreviewButton.tsx
+++ b/src/components/Projects/LivePreviewButton.tsx
@@ -8,7 +8,7 @@ export const LivePreviewButton = ({
 }: LivePreviewButtonProps): JSX.Element => {
   return (
     <a href={url} target="_blank" aria-label={`Live ${name} project preview`}>
-      <span className="block p-1 text-green-600 bg-green-200 rounded-md fill-current outline outline-2 outline-green-400 hover:outline-green-300 active:outline-green-200">
+      <span className="block p-1 text-green-600 bg-green-200 rounded-md fill-current outline outline-2 outline-green-600 hover:outline-green-300">
         <Play />
       </span>
     </a>
diff --git a/src/components/Projects/RepositoryButton.tsx b/src/components/Projects/RepositoryButton.tsx
index 0576320..c2cf992 100644
--- a/src/components/Projects/RepositoryButton.tsx
+++ b/src/components/Projects/RepositoryButton.tsx
@@ -1,3 +1,5 @@
+import { Github } from '../../icons/Github'
+
 type RepositoryButtonProps = {
   name: string
   url: string
@@ -10,17 +12,11 @@ export const RepositoryButton = ({
   return (
     <a
       href={url}
-      className="flex items-center justify-center w-10 h-10 bg-white rounded-lg shadow-2xl outline outline-2 outline-orange-400 hover:outline-orange-300 active:outline-orange-200"
+      className="flex items-center justify-center w-10 h-10 bg-white rounded-lg shadow-2xl outline outline-2 outline-secondary hover:outline-text"
       target="_blank"
       aria-label={`Github repository of ${name}`}
     >
-      <img
-        src="./assets/github.svg"
-        alt="Github"
-        height={32}
-        width={32}
-        className=""
-      />
+      <Github width={32} height={32} />
     </a>
   )
 }