diff --git a/app/components/(userpages)/profile/reeds/AddReed.tsx b/app/components/(userpages)/profile/reeds/AddReed.tsx
index 1c069b9..ef7e3b4 100644
--- a/app/components/(userpages)/profile/reeds/AddReed.tsx
+++ b/app/components/(userpages)/profile/reeds/AddReed.tsx
@@ -1,4 +1,4 @@
-//Component is a container for the card used to edit/delete/add loom to DB
+//Component is a container for the card used to add a reed to DB
 'use client'
 
 import { useState } from 'react'
@@ -13,11 +13,9 @@ export function AddReed() {
     const openForm = () => setIsOpen(true);
     const closeForm = () => setIsOpen(false);
 
-
     return (
         <>
             <div className={open ? 'buffer' : 'hidden'}>
-                {/* TODO: ADD Hide/show of card */}
                 <ReedCard reed={templateReed} closeForm={closeForm} />
             </div>
             {open ? <button onClick={closeForm}>Close card</button> : <button onClick={openForm}>Create reed</button>}
diff --git a/app/components/(userpages)/profile/reeds/EditReedForm.tsx b/app/components/(userpages)/profile/reeds/EditReedForm.tsx
index 239fc4b..a32c77a 100644
--- a/app/components/(userpages)/profile/reeds/EditReedForm.tsx
+++ b/app/components/(userpages)/profile/reeds/EditReedForm.tsx
@@ -1,4 +1,4 @@
-//This component contains tye logic to sen POST, PUT, DELETE requests on single reeds by a user
+//This component contains tye logic to PUT and DELETE requests on single reeds by a user
 'use client'
 
 import { useState } from 'react'
diff --git a/app/components/(userpages)/profile/reeds/ReedCard.tsx b/app/components/(userpages)/profile/reeds/ReedCard.tsx
index 163dcaf..5196c22 100644
--- a/app/components/(userpages)/profile/reeds/ReedCard.tsx
+++ b/app/components/(userpages)/profile/reeds/ReedCard.tsx
@@ -1,10 +1,10 @@
-
-//This component is a card for presenting a loom and also contains the logic to update/delete it.
+//This component is a card for presenting a ree contains the components to update/delete it.
 'use client'
 
 import { DisplayCard } from '@/app/components/(userpages)/DisplayCard'
 
 import { EditReedForm } from './EditReedForm'
+import { ReedImg } from './ReedImg'
 
 
 export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
@@ -13,12 +13,10 @@ export function ReedCard(params: { reed: Reed, closeForm:(()=>void)|null }) {
     return (
 
         <DisplayCard >
-
-            <div className='horizontal loom-card' >
+            <div className='vertical loom-card' >
+                <ReedImg reed={reed}/>
                 <EditReedForm reed={reed} closeForm={closeForm} />
-
             </div>
-
         </DisplayCard>
 
     )
diff --git a/app/components/(userpages)/profile/reeds/ReedImg.tsx b/app/components/(userpages)/profile/reeds/ReedImg.tsx
new file mode 100644
index 0000000..50fb517
--- /dev/null
+++ b/app/components/(userpages)/profile/reeds/ReedImg.tsx
@@ -0,0 +1,24 @@
+import './reedimg.scss'
+
+export function ReedImg(props: { reed: Reed }) {
+
+    const { dents, section, unit } = props.reed
+    
+    let slitSize = 1 / (dents / section)
+    let bar=0.2
+    let repeats = 6/(bar+slitSize)
+    
+    repeats = repeats > 1 ? Math.floor(repeats) : Math.ceil(repeats)
+    const keys = new Array(repeats).fill('')
+
+    const slitComponets = keys.map((item, index) => {return <div key={index} className={`slit ${unit}`} style={{ width: `${slitSize}rem` }} />})
+
+    return (
+
+        <div className="reed-img" >
+            <div className="slit-container" style={{ gap: `${bar}rem` }}>
+                {slitComponets}
+            </div>
+        </div >
+    )
+}
\ No newline at end of file
diff --git a/app/components/(userpages)/profile/reeds/reedimg.scss b/app/components/(userpages)/profile/reeds/reedimg.scss
new file mode 100644
index 0000000..134c183
--- /dev/null
+++ b/app/components/(userpages)/profile/reeds/reedimg.scss
@@ -0,0 +1,29 @@
+@use '@/app/resources/style/variables.scss' as v;
+
+.reed-img{
+    max-width:100%;
+    $threadspace:1rem;
+    
+
+    background-color: v.$metal-color;
+    border-radius: 5px 5px 5px 5px;
+    padding-left:0.2rem;
+    padding-right:0.2rem;
+
+    .slit-container{
+        margin:0.30rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        box-sizing: border-box;
+        
+       
+        background-color: v.$metal-color;
+        }
+ 
+        .slit{
+            height: calc($threadspace*2) ;
+           background-color: v.$secondary-color;
+            
+    }
+}
\ No newline at end of file
diff --git a/app/resources/style/variables.scss b/app/resources/style/variables.scss
index 95f006e..585df25 100644
--- a/app/resources/style/variables.scss
+++ b/app/resources/style/variables.scss
@@ -9,6 +9,8 @@ $accent-color2: rgb(118, 56, 141);
 
 $tertiary-color: rgb(124, 119, 119);
 
+$metal-color: rgb(68, 66, 68);
+
 $thin-border: 1px solid $accent-color1;
 $thick-border: 2px solid $accent-color1;