diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
index ad57e82..a75e454 100644
--- a/src/components/ItemCard.tsx
+++ b/src/components/ItemCard.tsx
@@ -4,7 +4,8 @@ import {classNames, isHoverable} from "../utils/helpers";
 import DependentImage from "./DependentImage";
 import ReactMarkdown from 'react-markdown'
 
-import {AiFillGithub} from "react-icons/ai";
+import {AiFillGithub, AiFillLinkedin, AiOutlineLink,} from "react-icons/ai";
+import {RxOpenInNewWindow} from "react-icons/rx";
 
 type ItemCardProps = {
     banner: string;
@@ -21,27 +22,30 @@ const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
         setActive(false);
     })
 
-    return <div onClick={() => {
-        if (!isHoverable()) toggleActive();
-    }}
-                ref={itemRef} className={classNames("item", active ? "active" : null)}>
+    return <div ref={itemRef}
+                className={classNames("item", active ? "active" : null)}
+                onClick={() => {
+                    if (!isHoverable()) toggleActive();
+                }}>
         <DependentImage fill src={banner} blurDataURL={bannerBlur}
                         className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
                         placeholder="blur"
                         alt={`Banner for ${title}`}
         />
-        <div className="elements grid grid-cols-12 h-full">
-            <div className="col-span-8 max-h-full md:col-span-7 drop-shadow-2xl md:p-3 pl-2 md:ml-4">
-                <div className="mt-1 text-lg md:mt-3 md:text-3xl">{title}</div>
-                <div className="mt-0 md:mt-1.5 md:text-xl overflow-hidden">
+        <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
+            <div className="col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
+                <div className="text-2xl sm:text-2xl md:text-3xl">{title}</div>
+                <div className="mt-0 md:mt-1.5 text-xl sm:text-lg md:text-xl overflow-hidden ">
                     <ReactMarkdown>{description}</ReactMarkdown>
                 </div>
             </div>
-            <div className="col-span-1 hidden md:block"/>
-            <div className="col-span-4 w-full flex justify-end max-h-full md:py-5">
+            <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
                 <div
-                    className="grid grid-cols-2 grid-rows-2 mr-1 md:mr-5 gap-3 aspect-square max-w-full object-contain max-h-full icon-grid">
+                    className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
+                    <RxOpenInNewWindow/>
+                    {/*<AiOutlineLink/>*/}
                     <AiFillGithub/>
+                    {/*<AiFillLinkedin/>*/}
                 </div>
             </div>
         </div>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index aac5629..576664d 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -57,6 +57,6 @@ html, body {
   > svg {
     width: 75%;
     height: 75%;
-    @apply transition-transform drop-shadow-md hover:scale-[120%] text-zinc-200 hover:text-zinc-50 m-auto aspect-square;
+    @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;
   }
 }
\ No newline at end of file