diff --git a/public/img/terminal.svg b/public/img/terminal.svg
new file mode 100644
index 0000000..4a6b30b
--- /dev/null
+++ b/public/img/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#27272a" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-terminal " ><path  d="M2,4.8l7.2,7.2-7.2,7.2m6.74,0h13.26"/></svg>
\ No newline at end of file
diff --git a/src/components/partials/StoryItem.tsx b/src/components/partials/StoryItem.tsx
index 694e5ac..4220a77 100644
--- a/src/components/partials/StoryItem.tsx
+++ b/src/components/partials/StoryItem.tsx
@@ -5,6 +5,8 @@ export type StoryItemType = {
     epochTime?: string,
     epochTitle?: string,
     epochDescription?: string
+    link?: string,
+    paddingedImage?: boolean
 };
 
 
@@ -16,7 +18,7 @@ type StoryItemProps = {
 export const StoryItem = (props: StoryItemProps) => {
     return (
         <div class="p-6 group inline-block w-full relative">
-            <div class="h-44 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md p-3">
+            <div class="h-full flex-1 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md py-3 px-6">
                 <div>
                     <p class="text-lg font-bold">{props.item.title}</p>
                     <p class="w-1/2">{props.item.description}</p>
@@ -24,8 +26,8 @@ export const StoryItem = (props: StoryItemProps) => {
                 {props.item.epochTime && <p class="font-mono text-zinc-500 font-bold">{props.item.epochTime}</p>}
 
             </div>
-            <div class="shadow-md delay-75 group-hover:scale-105 transition-all overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 w-3/12 h-2/3 absolute">
-                {props.item.image && <img class="h-auto w-full opacity-70 object-cover" src={props.item.image} alt="" />}
+            <div class="shadow-md delay-75 group-hover:scale-105 transition-all items-center overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 md:w-32 xl:w-36 w-20 aspect-square absolute">
+                {props.item.image && <a class={`h-full w-full ${props.item.paddingedImage && 'p-6'}`} href={props.item.link && ''}><img class="h-auto w-full object-cover" src={props.item.image} alt="" /></a>}
             </div>
         </div>
     )
diff --git a/src/pages/mystory.astro b/src/pages/mystory.astro
index 279cb76..273a875 100644
--- a/src/pages/mystory.astro
+++ b/src/pages/mystory.astro
@@ -22,8 +22,9 @@ const storyItems: StoryItemType[] = [
     title: "Apprenticeship",
     description:
       "During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.",
-    image: "",
-    epochTime: "2020 - 2023"
+    image: "/img/terminal.svg",
+    epochTime: "2020 - 2023",
+    paddingedImage: true
   }
 ];
 ---