diff --git a/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx b/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx
index 69f2679..915f8cb 100644
--- a/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx
+++ b/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx
@@ -8,13 +8,15 @@ import {
 import { Rs232PropertyView } from './Rs232PropertyView';
 import { IpClientPropertyView } from './IpClientPropertyView';
 import { IpServerPropertyView } from './IpServerPropertyView';
-import { RowIndicatorv1 } from './Rowindicatorv1';
+import { RowIndicatorv1 } from './RowIndicatorv1';
+import { IpClientType, IpServerType, Rs232Type, UdpClientType, UdpServerType, } from '../models/InstrumentModel';
 
 interface CardProps {
   titleAlat?: string,
   type?: string,
   lampu?: boolean,
   online?: boolean,
+  typeDetail: Rs232Type | IpClientType | IpServerType | UdpClientType | UdpServerType
   onClick?: () => void;
 }
 
@@ -24,9 +26,10 @@ interface CardProps {
 export const CardInstrument = ({
   ...props
 }: CardProps) => {
+
   return (
     <>
-      <Card className="w-234 mx-auto rounded-lg overflow-hidden border-black border-solid">
+      <Card className="w-60 mx-auto rounded-lg overflow-hidden border-black border-solid">
         <CardHeader className='bg-orange-500'>
           <CardTitle>
             <div className='flex justify-between'>
@@ -50,6 +53,7 @@ export const CardInstrument = ({
             lampu={props.lampu}
             type={props.type}
             online={props.online}
+            blink={false}
           />
           {/* ROW 1 & 2 END */}
 
@@ -57,22 +61,27 @@ export const CardInstrument = ({
           {
             props.type == 'rs232' ? (<Rs232PropertyView
               type={props.type}
+              valueSpeed={(props.typeDetail as Rs232Type).speedValue}
+              valueBaud='8'
+              valueDataBit={(props.typeDetail as Rs232Type).dataBitValue}
+              valueStopBit={(props.typeDetail as Rs232Type).stopBitValue}
             />) : ''
           }
 
           {
             props.type == 'ipclient' ? (<IpClientPropertyView
               type={props.type}
+              valueHost={(props.typeDetail as IpClientType).hostValue}
+              valuePort={(props.typeDetail as IpClientType).portValue}
             />) : ''
           }
 
           {
             props.type == 'ipserver' ? (<IpServerPropertyView
               type={props.type}
+              valueListeningPort={(props.typeDetail as IpServerType).listeningPortValue}
             />) : ''
           }
-
-
         </CardContent>
       </Card>
     </>
diff --git a/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx
index 9420bad..a35f18c 100644
--- a/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx
+++ b/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx
@@ -3,6 +3,8 @@ import { RowLabelValue } from './RowLabelValue';
 
 interface IpClientPropertyViewProps {
     type?: string,
+    valueHost:string,
+    valuePort:string,
     onClick?: () => void;
 }
 
@@ -14,11 +16,11 @@ export const IpClientPropertyView = ({
             {/* IpClient START */}
             <RowLabelValue
                 label='Host'
-                value='192.168.10.10'
+                value={props.valueHost}
             />
             <RowLabelValue
                 label='Port'
-                value='5001'
+                value={props.valuePort}
             />
             {/* IpClient END */}
         </>
diff --git a/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx
index b001445..aec14db 100644
--- a/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx
+++ b/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx
@@ -3,6 +3,7 @@ import { RowLabelValue } from './RowLabelValue';
 
 interface IpServerPropertyViewProps {
   type?: string,
+  valueListeningPort:string,
   onClick?: () => void;
 }
 
@@ -14,7 +15,7 @@ export const IpServerPropertyView = ({
       {/* IpServer START */}
         <RowLabelValue
           label='Listening Port'
-          value='8001'
+          value={props.valueListeningPort}
         />
       {/* IpServer END */}
     </>
diff --git a/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx b/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx
index f3e96e3..901131e 100644
--- a/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx
+++ b/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx
@@ -1,12 +1,13 @@
 import '../../../../app/global.css'
 import { StatusTransferv1 } from './StatusTransferv1';
-import { StatusOnlinev1 } from './Statusonlinev1';
-import { TypeCardv1 } from './Typecardv1';
+import { StatusOnlinev1 } from './StatusOnlinev1';
+import { TypeCardv1 } from './TypeCardv1';
 
 interface RowIndicatorv1Props {
     lampu?: boolean,
     type?: string;
     online?: boolean;
+    blink?:boolean;
     onClick?: () => void;
 }
 
diff --git a/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx
index cde7c41..e00708f 100644
--- a/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx
+++ b/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx
@@ -3,6 +3,10 @@ import { RowLabelValue } from './RowLabelValue';
 
 interface Rs232PropertyViewProps {
     type?: string,
+    valueSpeed:string,
+    valueBaud:string,
+    valueDataBit:string,
+    valueStopBit:string
     onClick?: () => void;
 }
 
@@ -14,24 +18,24 @@ export const Rs232PropertyView = ({
             {/* RS232 START */}
             <RowLabelValue
                 label='Speed'
-                value='800'
+                value={props.valueSpeed}
             />
 
             <RowLabelValue
                 label='Baud'
-                value='8'
+                value={props.valueBaud}
             />
 
 
             <RowLabelValue
                 label='Data Bit'
-                value='N'
+                value={props.valueDataBit}
             />
 
 
             <RowLabelValue
                 label='Stop Bit'
-                value='1'
+                value={props.valueStopBit}
             />
 
             {/* RS232 END */}
diff --git a/front_end_portserver/src/components/main/cardInstrumentDummy.json b/front_end_portserver/src/components/main/cardInstrumentDummy.json
new file mode 100644
index 0000000..67e2b13
--- /dev/null
+++ b/front_end_portserver/src/components/main/cardInstrumentDummy.json
@@ -0,0 +1,74 @@
+[
+    {
+        "idInstrument":"1",
+        "namaInstrument":"Mindray BC800",
+        "type":"rs232",
+        "instrumentTypeDetail":[
+            {
+                "label":"speed",
+                "value":"800"
+            },
+            {
+                "label":"baudRate",
+                "value":"8"
+            },
+            {
+                "label":"dataBit",
+                "value":"N"
+            },
+            {
+                "label":"stopBit",
+                "value":"1"
+            }
+        ]
+    },
+    {
+        "idInstrument":"2",
+        "namaInstrument":"Mindray BC240",
+        "type":"rs232",
+        "instrumentTypeDetail":[
+            {
+                "label":"speed",
+                "value":"800"
+            },
+            {
+                "label":"baudRate",
+                "value":"8"
+            },
+            {
+                "label":"dataBit",
+                "value":"N"
+            },
+            {
+                "label":"stopBit",
+                "value":"1"
+            }
+        ]
+    },
+    {
+        "idInstrument":"3",
+        "namaInstrument":"Mindray BC800",
+        "type":"ipclient",
+        "instrumentTypeDetail":[
+            {
+                "label":"host",
+                "value":"192.168.10.10"
+            },
+            {
+                "label":"port",
+                "value":"5001"
+            }
+        ]
+    },
+    {
+        "idInstrument":"4",
+        "namaInstrument":"Mindray BC240",
+        "type":"ipserver",
+        "instrumentTypeDetail":[
+            {
+                "label":"listeningPort",
+                "value":"8001"
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/front_end_portserver/src/components/main/instrumentBox/InstrumentBox.tsx b/front_end_portserver/src/components/main/instrumentBox/InstrumentBox.tsx
new file mode 100644
index 0000000..2d4c431
--- /dev/null
+++ b/front_end_portserver/src/components/main/instrumentBox/InstrumentBox.tsx
@@ -0,0 +1,44 @@
+import '../../../../app/global.css'
+import { CardInstrument } from '../cardInstrument/CardInstrument';
+import { InstrumentType } from '../models/InstrumentModel';
+
+interface InstrumentBoxProps {
+    totalCard?: number;
+    dataInstrumentType: InstrumentType[];
+    onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+
+export const InstrumentBox = ({
+    ...props
+}: InstrumentBoxProps) => {
+
+    let col = 2;
+
+    let showData = [];
+
+    if (props.totalCard != undefined && props.totalCard > 0) {
+        for (let index = 0; index < props.totalCard; index++) {
+            showData.push([
+                <CardInstrument
+                    lampu={true}
+                    online={true}
+                    titleAlat={props.dataInstrumentType[index].title}
+                    type={props.dataInstrumentType[index].type}
+                    typeDetail={props.dataInstrumentType[index].data}
+                />
+            ]);
+        }
+    }
+
+    return (
+        <>
+            <div className={`grid grid-cols-${col} gap-10`}>
+                { showData }
+            </div>
+        </>
+    );
+};
diff --git a/front_end_portserver/src/components/main/models/InstrumentModel.ts b/front_end_portserver/src/components/main/models/InstrumentModel.ts
new file mode 100644
index 0000000..89d2899
--- /dev/null
+++ b/front_end_portserver/src/components/main/models/InstrumentModel.ts
@@ -0,0 +1,43 @@
+// export type InstrumentTypeDetail = {
+//     label: string;
+//     value: string;
+// };
+
+// export type InstrumentModel = {
+//     idInstrument: string;
+//     namaInstrument: string;
+//     type:string;
+//     instrumentTypeDetail: InstrumentTypeDetail[]
+// };
+
+export type Rs232Type = {
+    speedValue: string,
+    dataBitValue: string,
+    parityValue: string,
+    stopBitValue: string,
+};
+
+export type IpClientType = {
+    hostValue: string,
+    portValue: string,
+};
+
+export type IpServerType = {
+    listeningPortValue: string,
+};
+
+export type UdpClientType = {
+    hostValue: string,
+    portValue: string,
+};
+
+export type UdpServerType = {
+    listeningPortValue: string,
+};
+
+export type InstrumentType = {
+    engine: string,
+    type: string,
+    title: string,
+    data: Rs232Type | IpClientType | IpServerType | UdpClientType | UdpServerType
+};
\ No newline at end of file
diff --git a/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts
index cb90574..662aea8 100644
--- a/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts
+++ b/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts
@@ -1,4 +1,4 @@
-import { StatusCardv1 } from '@/components/main/cardInstrument/Statuscardv1';
+import { StatusCardv1 } from '@/components/main/cardInstrument/StatusCardv1';
 import type { Meta, StoryObj } from '@storybook/react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
diff --git a/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts b/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts
index ade2d28..a3f060f 100644
--- a/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts
+++ b/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts
@@ -1,4 +1,4 @@
-import { StatusOnlinev1 } from '@/components/main/cardInstrument/Statusonlinev1';
+import { StatusOnlinev1 } from '@/components/main/cardInstrument/StatusOnlinev1';
 import type { Meta, StoryObj } from '@storybook/react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
diff --git a/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts
index f67cb49..c31be38 100644
--- a/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts
+++ b/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts
@@ -1,5 +1,4 @@
-
-import { TypeCardv1 } from '@/components/main/cardInstrument/Typecardv1';
+import { TypeCardv1 } from '@/components/main/cardInstrument/TypeCardv1';
 import type { Meta, StoryObj } from '@storybook/react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
diff --git a/front_end_portserver/src/stories/instrumentBox/InstrumentBox.stories.ts b/front_end_portserver/src/stories/instrumentBox/InstrumentBox.stories.ts
new file mode 100644
index 0000000..110f606
--- /dev/null
+++ b/front_end_portserver/src/stories/instrumentBox/InstrumentBox.stories.ts
@@ -0,0 +1,162 @@
+import { InstrumentBox } from '@/components/main/instrumentBox/InstrumentBox';
+import type { Meta, StoryObj } from '@storybook/react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Component/Main/Instrument Box',
+  component: InstrumentBox,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof InstrumentBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+// Instrument 1 Alat
+export const Instrument1Alat: Story = {
+  args: {
+    totalCard:1,
+    dataInstrumentType:[
+      {
+        engine:'astm',
+        title:'Cobas800',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+    ],
+  },
+};
+
+// Instrument 2 Alat
+export const Instrument2Alat: Story = {
+  args: {
+    totalCard:2,
+    dataInstrumentType:[
+      {
+        engine:'astm',
+        title:'Cobas800',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+      {
+        engine:'astm',
+        title:'Axsym 100',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+    ],
+  },
+};
+
+// Instrument 3 Alat
+export const Instrument3Alat: Story = {
+  args: {
+    totalCard:3,
+    dataInstrumentType:[
+      {
+        engine:'astm',
+        title:'Cobas800',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+      {
+        engine:'astm',
+        title:'Axsym 100',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+      {
+        engine:'mindray',
+        title:'Mindray BC800',
+        type:'ipclient',
+        data:{
+          hostValue:"192.168.10.10",
+          portValue:"5001"
+        }
+      },
+    ],
+  },
+};
+
+// Instrument 4 Alat
+export const Instrument4Alat: Story = {
+  args: {
+    totalCard:4,
+    dataInstrumentType:[
+      {
+        engine:'astm',
+        title:'Cobas800',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+      {
+        engine:'astm',
+        title:'Axsym 100',
+        type:'rs232',
+        data:{
+          speedValue: '800',
+          dataBitValue: 'N',
+          parityValue: '',
+          stopBitValue: 'N'
+        }
+      },
+      {
+        engine:'mindray',
+        title:'Mindray BC800',
+        type:'ipclient',
+        data:{
+          hostValue:"192.168.10.10",
+          portValue:"5001"
+        }
+      },
+      {
+        engine:'mindray',
+        title:'Mindray BC240',
+        type:'ipserver',
+        data:{
+          listeningPortValue:"8001"
+        }
+      },
+    ],
+  },
+};
\ No newline at end of file