diff --git a/src/App.svelte b/src/App.svelte
index ac90f2c..941eac4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -84,8 +84,7 @@
         <input type="button" value="add weapon" on:click={add_weapon}/>
 
         {#each weapons as weapon (weapon.id)}
-            <Weapon {...weapon} on:change_weapon={change_weapon}
-                />
+            <Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
         {/each}
 
 
diff --git a/src/components/Weapon/Beam/index.svelte b/src/components/Weapon/Beam/index.svelte
new file mode 100644
index 0000000..8e00819
--- /dev/null
+++ b/src/components/Weapon/Beam/index.svelte
@@ -0,0 +1,122 @@
+
+<Field label="weapon class">
+<select bind:value={weapon_class}>
+<option>1</option>
+<option>2</option>
+<option>3</option>
+<option>4</option>
+</select>
+</Field>
+
+<Field label="arcs">
+    <select bind:value={nbr_arcs}>
+        {#each arc_options[weapon_class]||[] as nbr_arcs (nbr_arcs)}
+        <option>{nbr_arcs}</option>
+        {/each}
+    </select>
+</Field>
+
+
+<svg width="60px" height="60px">
+{#each all_arcs as arc (arc)}
+    <Arc {arc} radius={30} 
+        active={arcs.includes(arc)}
+        on:click={()=>click_arc(arc)}
+    />
+{/each}
+    <circle cx="30" cy="30" r="15" />
+</svg>
+
+<script>
+  import {getContext } from 'svelte';
+    import Arc from '../../Weapons/Arc.svelte';
+    import { weapon_cost_mass } from '~/dux/weapons/rules';
+    import fp from 'lodash/fp';
+    import _ from 'lodash';
+    import ShipItem from '~C/ShipItem';
+    import Field from '~C/Field';
+    import dux from '~/dux';
+  import { createEventDispatcher } from 'svelte';
+  
+    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
+
+    export let weapon_type;
+    export let id;
+    export let weapon_class = 1;
+    export let arcs = ['F'];
+    export let ship_change = getContext('ship_change') || ( () => {} );
+
+    let arc_options = {
+        1: [ 6],
+        2: [ 3, 6 ],
+        3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
+        4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
+    };
+
+    let nbr_arcs = 6;
+    $: nbr_arcs = arc_options[weapon_class][0];
+
+    $: console.log({arcs,nbr_arcs})
+
+    $: if ( arcs.length !== nbr_arcs ) {
+        if( nbr_arcs === 'broadside' ) {
+            arcs = all_arcs.filter( arc => arc.length === 1 )
+        }
+        else{
+
+        let first_index = all_arcs.findIndex( arc => arcs[0] );
+        if( first_index === -1 ) first_index = 0;
+
+        const new_arcs = [];
+
+        _.range(nbr_arcs).forEach( i => {
+            new_arcs.push( all_arcs[first_index] )
+            first_index = ( first_index + 1 ) % all_arcs.length;
+        });
+
+        arcs = new_arcs;
+        }
+    }
+
+    const click_arc = (first_arc) => {
+        if( nbr_arcs === 'broadside' ) return;
+
+        let first_index = all_arcs.findIndex( arc => arc === first_arc );
+
+        const new_arcs = [];
+
+        _.range(nbr_arcs).forEach( i => {
+            new_arcs.push( all_arcs[first_index] );
+            first_index = ( first_index + 1 ) % all_arcs.length;
+        });
+
+        arcs = new_arcs;
+        
+    }
+
+    let i = 1;
+    $: if(weapon_class) i = 1;
+
+    let cache = '';
+    $: cache = arcs.join(":");
+
+    const dispatch = createEventDispatcher();
+
+    $: dispatch( 'change', {
+      weapon_class,
+      arcs: cache.split(":"),
+    })
+</script>
+
+<style>
+.arc {
+    display: flex;
+    flex-direction: column;
+    margin-right: 1em;
+}
+
+circle {
+    fill: white;
+}
+  </style>
+
diff --git a/src/components/Weapon/index.svelte b/src/components/Weapon/index.svelte
index d424509..aa97361 100644
--- a/src/components/Weapon/index.svelte
+++ b/src/components/Weapon/index.svelte
@@ -8,36 +8,8 @@
 </select>
 </Field>
 
-<Field label="weapon class">
-<select bind:value={weapon_class}>
-<option>1</option>
-<option>2</option>
-<option>3</option>
-<option>4</option>
-</select>
-</Field>
-
-<Field label="arcs">
-    <select bind:value={nbr_arcs}>
-        {#each arc_options[weapon_class]||[] as nbr_arcs (nbr_arcs)}
-        <option>{nbr_arcs}</option>
-        {/each}
-    </select>
-</Field>
-
-
-<svg width="60px" height="60px">
-{#each all_arcs as arc (arc)}
-    <Arc {arc} radius={30} 
-        active={arcs.includes(arc)}
-        on:click={()=>click_arc(arc)}
-    />
-{/each}
-    <circle cx="30" cy="30" r="15" />
-
-    
-</svg>
-
+<svelte:component this={weapon_component[weapon_type]} {...weapon} 
+    on:change={update}/>
 </ShipItem>
 
 <script>
@@ -50,80 +22,29 @@
     import { createEventDispatcher } from 'svelte';
     import ShipItem from '~C/ShipItem';
     import Field from '~C/Field';
+    import Beam from './Beam';
     import dux from '~/dux';
 
+  const weapon_component = {
+    beam: Beam,
+  };
 
-    const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
-
-    export let weapon_type;
-    export let weapon_class;
+    export let weapon = {};
     export let id;
-    export let arcs = [];
     export let cost;
     export let mass;
     export let ship_change = getContext('ship_change') || ( () => {} );
 
-    let arc_options = {
-        1: [ 6],
-        2: [ 3, 6 ],
-        3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
-        4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
-    };
-
-    let nbr_arcs = 6;
-    $: console.log(weapon_class);
-    $: nbr_arcs = arc_options[weapon_class][0];
-
-    $: console.log({arcs,nbr_arcs})
-
-    $: if ( arcs.length !== nbr_arcs ) {
-        if( nbr_arcs === 'broadside' ) {
-            arcs = all_arcs.filter( arc => arc.length === 1 )
-        }
-        else{
-
-        let first_index = all_arcs.findIndex( arc => arcs[0] );
-        if( first_index === -1 ) first_index = 0;
-
-        const new_arcs = [];
-
-        _.range(nbr_arcs).forEach( i => {
-            new_arcs.push( all_arcs[first_index] )
-            first_index = ( first_index + 1 ) % all_arcs.length;
-        });
-
-        arcs = new_arcs;
-        }
-    }
-
-    const click_arc = (first_arc) => {
-        if( nbr_arcs === 'broadside' ) return;
-
-        let first_index = all_arcs.findIndex( arc => arc === first_arc );
-
-        const new_arcs = [];
-
-        _.range(nbr_arcs).forEach( i => {
-            new_arcs.push( all_arcs[first_index] );
-            first_index = ( first_index + 1 ) % all_arcs.length;
-        });
-
-        arcs = new_arcs;
-        
-    }
-
-    let i = 1;
-    $: if(weapon_class) i = 1;
-
-    let cache = '';
-    $: cache = arcs.join(":");
+    let weapon_type;
+    $: weapon_type = weapon.weapon_type;
 
     const remove = () => ship_change( dux.actions.remove_weapon(id) );
 
-    $: ship_change( dux.actions.set_weapon({
-      id, weapon_class, weapon_type, arcs: cache.split(":")
-    }));
-
+  const update = ({detail}) => {
+    ship_change( dux.actions.set_weapon({
+      id, weapon_type, ...detail
+    }) );
+  }
 </script>
 
 <style>
@@ -182,20 +103,10 @@
   grid-row: 4;
 }
 
-.arc {
-    display: flex;
-    flex-direction: column;
-    margin-right: 1em;
-}
-
 .add-weapon {
     display: block;
 }
 
-circle {
-    fill: white;
-}
-
 .remove {
     width: 1em;
     flex: 0;