diff --git a/src/api/agileLive/pipelines/multiviews/multiviews.ts b/src/api/agileLive/pipelines/multiviews/multiviews.ts
index d92b269..c6ee588 100644
--- a/src/api/agileLive/pipelines/multiviews/multiviews.ts
+++ b/src/api/agileLive/pipelines/multiviews/multiviews.ts
@@ -53,11 +53,11 @@ export async function createMultiviewForPipeline(
   }
   const pipelineUUID =
     productionSettings.pipelines[multiviewIndex].pipeline_id!;
-    const sources = await getSourcesByIds(
-      sourceRefs
-        .filter((ref) => ref._id !== undefined)
-        .map((ref) => ref._id!.toString())
-    );
+  const sources = await getSourcesByIds(
+    sourceRefs
+      .filter((ref) => ref._id !== undefined)
+      .map((ref) => ref._id!.toString())
+  );
   const sourceRefsWithLabels = sourceRefs.map((ref) => {
     if (!ref.label) {
       const source = sources.find(
diff --git a/src/api/agileLive/websocket.ts b/src/api/agileLive/websocket.ts
index 4e26e8d..6f51466 100644
--- a/src/api/agileLive/websocket.ts
+++ b/src/api/agileLive/websocket.ts
@@ -41,5 +41,5 @@ export async function createControlPanelWebSocket() {
     close: () => {
       ws.close();
     }
-  }
+  };
 }
diff --git a/src/api/manager/workflow.ts b/src/api/manager/workflow.ts
index 1075322..0312261 100644
--- a/src/api/manager/workflow.ts
+++ b/src/api/manager/workflow.ts
@@ -50,6 +50,7 @@ import { Monitoring } from '../../interfaces/monitoring';
 import { getDatabase } from '../mongoClient/dbClient';
 import { updatedMonitoringForProduction } from './job/syncMonitoring';
 import { createControlPanelWebSocket } from '../agileLive/websocket';
+import { ObjectId } from 'mongodb';
 
 const isUsed = (pipeline: ResourcesPipelineResponse) => {
   const hasStreams = pipeline.streams.length > 0;
@@ -90,7 +91,7 @@ async function connectIngestSources(
       source.ingest_source_name,
       false
     );
-    const audioSettings = await getAudioMapping(source._id);
+    const audioSettings = await getAudioMapping(new ObjectId(source._id));
     const newAudioMapping = audioSettings?.audio_stream?.audio_mapping;
     const audioMapping = newAudioMapping?.length ? newAudioMapping : [[0, 1]];
 
@@ -310,8 +311,12 @@ export async function stopProduction(
   );
 
   const controlPanelWS = await createControlPanelWebSocket();
-  const htmlSources = production.sources.filter((source) => source.type === 'html');
-  const mediaPlayerSources = production.sources.filter((source) => source.type === 'mediaplayer');
+  const htmlSources = production.sources.filter(
+    (source) => source.type === 'html'
+  );
+  const mediaPlayerSources = production.sources.filter(
+    (source) => source.type === 'mediaplayer'
+  );
 
   for (const source of production.sources) {
     for (const stream_uuid of source.stream_uuids || []) {
@@ -322,7 +327,9 @@ export async function stopProduction(
   }
 
   htmlSources.map((source) => controlPanelWS.closeHtml(source.input_slot));
-  mediaPlayerSources.map((source) => controlPanelWS.closeMediaplayer(source.input_slot));
+  mediaPlayerSources.map((source) =>
+    controlPanelWS.closeMediaplayer(source.input_slot)
+  );
 
   for (const id of pipelineIds) {
     Log().info(`Stopping pipeline '${id}'`);
@@ -458,20 +465,28 @@ export async function startProduction(
     // Get sources from the DB
     // Skapa en createHtmlWebSocket, spara
     const controlPanelWS = await createControlPanelWebSocket();
-    const htmlSources = production.sources.filter((source) => source.type === 'html');
-    const mediaPlayerSources = production.sources.filter((source) => source.type === 'mediaplayer');
+    const htmlSources = production.sources.filter(
+      (source) => source.type === 'html'
+    );
+    const mediaPlayerSources = production.sources.filter(
+      (source) => source.type === 'mediaplayer'
+    );
 
     htmlSources.map((source) => controlPanelWS.createHtml(source.input_slot));
-    mediaPlayerSources.map((source) => controlPanelWS.createMediaplayer(source.input_slot));
+    mediaPlayerSources.map((source) =>
+      controlPanelWS.createMediaplayer(source.input_slot)
+    );
 
     controlPanelWS.close();
-    
+
     // Nedan behöver göras efter att vi har skapat en produktion
     // TODO: Hämta production.sources, för varje html-reference --> create i createHtmlWebSocket, för varje mediaplayer i production.sources skapa en createWebSocket
     const sources = await getSourcesByIds(
-      production.sources.filter((source) => source._id !== undefined).map((source) => {
-        return source._id!.toString();
-      })
+      production.sources
+        .filter((source) => source._id !== undefined)
+        .map((source) => {
+          return source._id!.toString();
+        })
     ).catch((error) => {
       if (error === "Can't connect to Database") {
         throw "Can't connect to Database";
diff --git a/src/components/sourceCard/SourceCard.tsx b/src/components/sourceCard/SourceCard.tsx
index b2fc4e7..65fce8c 100644
--- a/src/components/sourceCard/SourceCard.tsx
+++ b/src/components/sourceCard/SourceCard.tsx
@@ -100,14 +100,15 @@ export default function SourceCard({
         <button
           className="absolute bottom-0 right-0 text-p hover:border-l hover:border-t bg-red-700 hover:bg-red-600 min-w-fit p-1 rounded-tl-lg"
           onClick={() => {
-            onSourceRemoval({
-              _id: sourceRef ? sourceRef._id : source?._id.toString()!,
-              type: sourceRef ? sourceRef.type : 'ingest_source',
-              // TODO: Fix this issue
-              label: sourceRef ? sourceRef.label : '',
-              input_slot: sourceRef ? sourceRef.input_slot : 0,
-              stream_uuids: source?.stream_uuids
-            });
+            if (source) {
+              onSourceRemoval({
+                _id: sourceRef ? sourceRef._id : source?._id.toString(),
+                type: sourceRef ? sourceRef.type : 'ingest_source',
+                label: sourceRef ? sourceRef.label : '',
+                input_slot: sourceRef ? sourceRef.input_slot : 0,
+                stream_uuids: source?.stream_uuids
+              });
+            }
           }}
         >
           <IconTrash className="text-p w-4 h-4" />
diff --git a/src/components/sourceCards/SourceCards.tsx b/src/components/sourceCards/SourceCards.tsx
index 2de146b..3f9dc34 100644
--- a/src/components/sourceCards/SourceCards.tsx
+++ b/src/components/sourceCards/SourceCards.tsx
@@ -5,10 +5,7 @@ import { SourceReference } from '../../interfaces/Source';
 import { Production } from '../../interfaces/production';
 import DragItem from '../dragElement/DragItem';
 import SourceCard from '../sourceCard/SourceCard';
-import { EmptySlotCard } from '../emptySlotCard/EmptySlotCard';
-import { useDragableItems } from '../../hooks/useDragableItems';
-import { useSources } from '../../hooks/sources/useSources';
-
+import { ISource, useDragableItems } from '../../hooks/useDragableItems';
 export default function SourceCards({
   productionSetup,
   sourceRef,
@@ -22,142 +19,58 @@ export default function SourceCards({
   onSourceUpdate: (source: SourceReference) => void;
   onSourceRemoval: (source: SourceReference) => void;
 }) {
-  const [items, moveItems] = useDragableItems(productionSetup.sources);
-  const referenceItems = productionSetup.sources;
+  const [items, moveItem, loading] = useDragableItems(productionSetup.sources);
   const [selectingText, setSelectingText] = useState(false);
-  const currentOrder: SourceReference[] = referenceItems.map((source) => {
-    return {
-      _id: sourceRef ? sourceRef._id : source._id.toString(),
-      type: sourceRef ? sourceRef.type : 'ingest_source',
-      label: sourceRef ? sourceRef.label : source.label,
-      input_slot: sourceRef ? sourceRef.input_slot : source.input_slot,
-      stream_uuids: source.stream_uuids
-    };
-  });
-  const [inventorySources, loading] = useSources();
 
-  const ingRefs = referenceItems.filter((ri) => ri.type === 'ingest_source');
-
-  const isIngestSource = (sourceR: SourceReference) => {
-    const source = inventorySources.get(sourceR._id);
-    if (!source) return false;
-    return true;
-  };
+  if (loading || !items) return null;
 
-  const gridItems: React.JSX.Element[] = [];
-  let tempItems = [...items];
-  let firstEmptySlot = items.length + 1;
+  // Filter SourceReference and ISource objects correctly
+  const sourceReferences = items.filter(
+    (item): item is SourceReference => item.type !== 'ingest_source'
+  );
 
-  let tempReferenceItems = [...referenceItems];
-
-  let bigItemsArray = [...tempItems, ...referenceItems];
+  const isISource = (source: SourceReference | ISource): source is ISource => {
+    // Use properties unique to ISource to check the type
+    return 'src' in source;
+  };
 
-  if (!bigItemsArray || bigItemsArray.length === 0) return null;
-  for (let i = 0; i < bigItemsArray[bigItemsArray.length - 1].input_slot; i++) {
-    if (!bigItemsArray.some((source) => source.input_slot === i + 1)) {
-      firstEmptySlot = i + 1;
-      break;
-    }
-  }
-  for (let i = 0; i < bigItemsArray[bigItemsArray.length - 1].input_slot; i++) {
-    tempItems.every((source) => {
-      if (source.input_slot === i + 1) {
-        tempItems = tempItems.filter((i) => i._id !== source._id);
-        // console.log(`Adding source "${source.name}" to grid`);
-        if (!productionSetup.isActive) {
-          gridItems.push(
-            <DragItem
-              key={`${source.ingest_source_name}-${source.input_slot}-key`}
-              id={source._id}
-              onMoveItem={moveItem}
-              previousOrder={productionSetup.sources}
-              currentOrder={currentOrder}
-              productionSetup={productionSetup}
-              updateProduction={updateProduction}
-              selectingText={selectingText}
-            >
-              <SourceCard
-                source={source}
-                sourceRef={sourceRef}
-                label={source.label}
-                src={source.src || ''}
-                onSourceUpdate={onSourceUpdate}
-                onSourceRemoval={onSourceRemoval}
-                onSelectingText={(isSelecting: boolean) =>
-                  setSelectingText(isSelecting)
-                }
-              />
-            </DragItem>
-          );
-        } else {
-          gridItems.push(
-            <SourceCard
-              key={
-                source.type === 'ingest_source'
-                  ? `${source.ingest_source_name}-${source.input_slot}-key`
-                  : ''
-              }
-              source={source.type === 'ingest_source' ? source : undefined}
-              sourceRef={sourceRef}
-              label={source.label}
-              src={source.src || ''}
-              onSourceUpdate={onSourceUpdate}
-              onSourceRemoval={onSourceRemoval}
-              onSelectingText={(isSelecting: boolean) =>
-                setSelectingText(isSelecting)
-              }
-            />
-          );
-        }
-        return false;
-      } else {
-        // console.log(`No source found on input slot: ${i + 1}`);
-        // console.log(`Adding empty slot to grid`);
-        if (productionSetup.isActive) {
-          gridItems.push(
-            <EmptySlotCard
-              key={i}
-              inputSlot={i + 1}
-              isFirstEmptySlot={firstEmptySlot === i + 1}
-            />
-          );
-        }
+  const gridItems = items.map((source) => {
+    const isSource = isISource(source);
 
-        return false;
-      }
-    });
+    return (
+      <DragItem
+        key={source._id.toString()}
+        id={source._id.toString()}
+        onMoveItem={moveItem}
+        previousOrder={productionSetup.sources}
+        currentOrder={sourceReferences}
+        productionSetup={productionSetup}
+        updateProduction={updateProduction}
+        selectingText={selectingText}
+      >
+        {isSource ? (
+          <SourceCard
+            source={source}
+            sourceRef={sourceRef}
+            label={source.label}
+            src={source.src}
+            onSourceUpdate={onSourceUpdate}
+            onSourceRemoval={onSourceRemoval}
+            onSelectingText={(isSelecting) => setSelectingText(isSelecting)}
+          />
+        ) : (
+          <SourceCard
+            sourceRef={source}
+            label={source.label}
+            src={''}
+            onSourceUpdate={onSourceUpdate}
+            onSourceRemoval={onSourceRemoval}
+            onSelectingText={(isSelecting) => setSelectingText(isSelecting)}
+          />
+        )}
+      </DragItem>
+    );
+  });
 
-    tempReferenceItems
-      .filter((refs) => refs.type !== 'ingest_source')
-      .forEach((sourceRef) => {
-        if (sourceRef.input_slot === i + 1) {
-          if (!productionSetup.isActive) {
-            gridItems.push(
-              <DragItem
-                id={sourceRef._id}
-                key={sourceRef.input_slot}
-                onMoveItem={moveItem}
-                previousOrder={productionSetup.sources}
-                updateProduction={updateProduction}
-                selectingText={selectingText}
-                productionSetup={productionSetup}
-                currentOrder={currentOrder}
-              >
-                <SourceCard
-                  sourceRef={sourceRef}
-                  label={sourceRef.label}
-                  onSourceUpdate={onSourceUpdate}
-                  onSourceRemoval={onSourceRemoval}
-                  onSelectingText={(isSelecting) =>
-                    setSelectingText(isSelecting)
-                  }
-                  src=""
-                />
-              </DragItem>
-            );
-          }
-        }
-      });
-  }
   return <>{gridItems}</>;
 }
diff --git a/src/hooks/useDragableItems.ts b/src/hooks/useDragableItems.ts
index d7845d0..b55607b 100644
--- a/src/hooks/useDragableItems.ts
+++ b/src/hooks/useDragableItems.ts
@@ -10,18 +10,15 @@ export interface ISource extends SourceWithId {
   src: string;
 }
 
-// Kolla hur det här funkar med allting 
-// är items som ställer till det
 export function useDragableItems(
   sources: SourceReference[]
-): [(SourceReference | ISource)[], (originId: string, destinationId: string) => void, boolean] {
-  const [ingestSources, setIngestSources] = useState<ISource[]>([]);
-
+): [
+  (SourceReference | ISource)[],
+  (originId: string, destinationId: string) => void,
+  boolean
+] {
   const [inventorySources, loading] = useSources();
-
-  const [allSources, setAllSources] = useState<(SourceReference | ISource)[]>([]);
-
-  const [items, setItems] = useState<ISource[]>(
+  const [items, setItems] = useState<(SourceReference | ISource)[]>(
     sources.flatMap((ref) => {
       const source = inventorySources.get(ref._id);
       if (!source) return [];
@@ -32,152 +29,62 @@ export function useDragableItems(
         input_slot: ref.input_slot,
         stream_uuids: ref.stream_uuids,
         src: getSourceThumbnail(source),
+        ingest_source_name: source.ingest_source_name,
+        ingest_name: source.ingest_name,
+        video_stream: source.video_stream,
+        audio_stream: source.audio_stream,
+        status: source.status,
+        type: source.type,
+        tags: source.tags,
+        name: source.name
       };
     })
   );
 
-  const [refItems, setRefItems] = useState<SourceReference[]>(
-    sources.flatMap((ref) => {
-      return {... ref}
-    })
-  );
-
-  const [allItems, setAllItems] = useState<(SourceReference | ISource)[]>(
-    sources.flatMap((ref) => {
-      if (ref.type === 'ingest_source') {
-        const source = inventorySources.get(ref._id);
-        if (!source) return [];
-        return {
-          ...source,
-          _id: ref._id,
-          label: ref.label,
-          input_slot: ref.input_slot,
-          stream_uuids: ref.stream_uuids,
-          src: getSourceThumbnail(source),
-        };
-      } else {
-        return {...ref}
-      }
-    })
-  )
-
   useEffect(() => {
-    setItems(
-      sources.flatMap((ref) => {
-        const source = inventorySources.get(ref._id);
-        if (!source) return [];
-        return {
-          ...source,
-          _id: ref._id,
-          label: ref.label,
-          input_slot: ref.input_slot,
-          stream_uuids: ref.stream_uuids,
-          src: getSourceThumbnail(source),
-        };
-      })
-    );
+    const updatedItems = sources.map((ref) => {
+      const source = inventorySources.get(ref._id);
+      if (!source) return { ...ref };
+      return {
+        ...ref,
+        _id: ref._id,
+        label: ref.label,
+        input_slot: ref.input_slot,
+        stream_uuids: ref.stream_uuids,
+        src: getSourceThumbnail(source),
+        ingest_source_name: source.ingest_source_name,
+        ingest_name: source.ingest_name,
+        video_stream: source.video_stream,
+        audio_stream: source.audio_stream,
+        status: source.status,
+        type: source.type,
+        tags: source.tags,
+        name: source.name
+      };
+    });
+    setItems(updatedItems);
   }, [sources, inventorySources]);
 
-  useEffect(() => {
-    setAllItems(
-      sources.flatMap((ref) => {
-        if (ref.type === 'ingest_source') {
-          const source = inventorySources.get(ref._id);
-          if (!source) return [];
-          return {
-            ...source,
-            _id: ref._id,
-            label: ref.label,
-            input_slot: ref.input_slot,
-            stream_uuids: ref.stream_uuids,
-            src: getSourceThumbnail(source),
-          };
-        } else {
-          return {...ref}
-        }
-      })
-    )
-  })
-
-  // useEffect(() => {
-  //   setIngestSources(
-  //     sources.flatMap((ref) => {
-  //       const source = inventorySources.get(ref._id);
-  //       if (!source) return [];
-  //       return {
-  //         ...source,
-  //         _id: ref._id,
-  //         label: ref.label,
-  //         input_slot: ref.input_slot,
-  //         stream_uuids: ref.stream_uuids,
-  //         src: getSourceThumbnail(source),
-  //       };
-  //     })
-  //   );
-  // }, [sources, inventorySources]);
-
-  // useEffect(() => {
-  //   setRefSources(sources.filter((ref) => ref.type !== 'ingest_source'));
-  // }, [sources])
-
-  // useEffect(() => {
-  //   setAllSources([...refSources, ...ingestSources]);
-  // }, [refSources, ingestSources]);
-
   const moveItem = (originId: string, destinationId: string) => {
-    const originSource = items.find((i) => i._id.toString() === originId);
+    const originSource = items.find((item) => item._id.toString() === originId);
     const destinationSource = items.find(
-      (i) => i._id.toString() === destinationId
+      (item) => item._id.toString() === destinationId
     );
 
     if (!originSource || !destinationSource) return;
 
-    const originInputSlot = originSource.input_slot;
-    const destinationInputSlot = destinationSource.input_slot;
-
-    // Swap input slots
-    const updatedItems = items.map((item) => {
-      if (item._id === originSource._id) return { ...item, input_slot: destinationInputSlot };
-      if (item._id === destinationSource._id) return { ...item, input_slot: originInputSlot };
-      return item;
-    }).sort((a, b) => a.input_slot - b.input_slot);
-
-    if (updatedItems){
-    setItems(updatedItems);}
-  };
-
-  const moveItems = (originId: string, destinationId: string) => {
-    const originSource = allItems.find((i) => i._id.toString() === originId);
-    const destinationSource = allItems.find((i) => i._id.toString() === destinationId);
-
-    if (!originSource || !destinationSource) return;
-
-    const originInputSlot = originSource.input_slot;
-    const destinationInputSlot = destinationSource.input_slot;
-
-    const updatedItems = allItems.map((item) => {
-      if (item._id === originSource._id) return { ...item, input_slot: destinationInputSlot };
-      if (item._id === destinationSource._id) return {...item, input_slot: originInputSlot };
-      return item;
-    }).sort((a, b) => a.input_slot - b.input_slot);
+    const updatedItems = items
+      .map((item) => {
+        if (item._id === originSource._id)
+          return { ...item, input_slot: destinationSource.input_slot };
+        if (item._id === destinationSource._id)
+          return { ...item, input_slot: originSource.input_slot };
+        return item;
+      })
+      .sort((a, b) => a.input_slot - b.input_slot);
 
-    if (updatedItems) {
-      setAllItems(updatedItems);
-    }
+    setItems(updatedItems);
   };
 
-  // const moveItem = (originId: string, destinationId: string) => {
-  //   const originIndex = items.findIndex((i) => i._id === originId);
-  //   const destinationIndex = items.findIndex((i) => i._id === destinationId);
-
-  //   if (originIndex === -1 || destinationIndex === -1) return;
-
-  //   const updatedItems = [...items];
-  //   const [movedItem] = updatedItems.splice(originIndex, 1);
-  //   updatedItems.splice(destinationIndex, 0, movedItem);
-
-  //   setItems(updatedItems);
-  // }
-
-  return [allItems, moveItems, loading];
-}
\ No newline at end of file
+  return [items, moveItem, loading];
+}