diff --git a/components/Profile/AddBlock.tsx b/components/Profile/AddBlock.tsx
index aedb0c1..41ec1e1 100644
--- a/components/Profile/AddBlock.tsx
+++ b/components/Profile/AddBlock.tsx
@@ -3,32 +3,17 @@
 import React from "react";
 import { FaPlus } from "react-icons/fa6";
 
+import { useBlock } from "@/hooks/toggle";
 import TooltipButton from "../Reusable/Tooltip";
-import { BlockType, useBlock } from "../../hooks/toggle";
 
 export const AddBlock = () => {
-  const { setDrawerOpen, addBoardBlock } = useBlock();
+  const { setDrawerOpen, onOpenBlock } = useBlock();
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setDrawerOpen(true);
-  };
-  const handleAddImageBlock = () => {
-    const imageBlock = {
-      id: 0, // You can set this to an appropriate value
-      type: "image" as const, // Type assertion to BlockType
-      items: [], // Add any initial data as needed
-    };
-    addBoardBlock(imageBlock);
+    onOpenBlock("index");
   };
 
-  const handleAddTextBlock = () => {
-    const textBlock = {
-      id: 0,
-      type: "text" as const,
-      items: [], // Add any initial data as needed
-    };
-    addBoardBlock(textBlock);
-  };
   return (
     <div className="   flex items-center justify-center py-10 w-full">
       <span className="h-[2px] flex-1 bg-gray-200"></span>
diff --git a/components/Profile/BlockButton.tsx b/components/Profile/BlockButton.tsx
index 4fbef22..e3eaeff 100644
--- a/components/Profile/BlockButton.tsx
+++ b/components/Profile/BlockButton.tsx
@@ -22,10 +22,13 @@ const BlockButton = ({
     entry.hasOwnProperty(type)
   ) as IconEntry;
 
+  const handleOnClick = () => {
+    onOpenBlock(type);
+  };
   return (
     <div className="flex">
       <div className="space-y-4 w-64 pt-2 ">
-        <button onClick={() => onOpenBlock(type)} className={`${className}`}>
+        <button onClick={handleOnClick} className={`${className}`}>
           <p className="flex items-center w-full">
             {iconEntry[type]}
             <span className="mx-2.5 font-normal capitalize">{label}</span>
diff --git a/components/Profile/BlockDisplayCard.tsx b/components/Profile/BlockDisplayCard.tsx
index 5d407a1..78da743 100644
--- a/components/Profile/BlockDisplayCard.tsx
+++ b/components/Profile/BlockDisplayCard.tsx
@@ -1,22 +1,85 @@
-import React from "react";
+"use client";
+import React, { ChangeEvent, useState } from "react";
+import { BlockType, useBlock } from "@/hooks/toggle";
+import Image from "next/image";
 
-export default function BlockDisplayCard() {
+interface UploaderProps {
+  blockType: BlockType;
+}
+
+const Uploader = ({ blockType }: UploaderProps) => {
+  const { updateFiles } = useBlock();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (file) {
+      const fileUrl = URL.createObjectURL(file);
+      updateFiles(blockType, [fileUrl]);
+    }
+  }
   return (
-    <div className="relative w-full h-96 mx-auto max-w-5xl border-2  rounded-lg p-4 border-pink-500">
+    <div className="relative w-full h-96 mx-auto max-w-5xl border-2 rounded-lg p-4 border-pink-500">
       <label
-        htmlFor="dropzone-file"
+        htmlFor={`${blockType}-file`}
         className="relative p-3 bg-gray-200 flex flex-col justify-center w-full max-w-5xl mx-auto h-full rounded-lg border-gray-300 cursor-pointer"
       >
         <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
           <div className="flex flex-col text-base items-center justify-center space-y-3">
             <p className="mb-2">
-              Drag and drop media, or
+              Drag and drop {blockType}, or
               <span className="border-b border-black  mx-1">Browse</span>
             </p>
           </div>
         </div>
       </label>
-      <input id="dropzone-file" type="file" className="hidden" />
+      <input
+        id={`${blockType}-file`}
+        type="file"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+};
+
+export default function BlockDisplayCard() {
+  const { boardData, onOpenBlock, setDrawerOpen } = useBlock();
+
+  const handleFileClick = (blockKey: BlockType) => {
+    onOpenBlock(blockKey);
+    setDrawerOpen(true);
+  };
+
+  return (
+    <div className="w-full space-y-6">
+      {Object.keys(boardData).map((blockKey) => {
+        const block = boardData[blockKey as BlockType];
+        if (typeof block === "object" && block !== null && "files" in block) {
+          return block.files.length > 0 ? (
+            block.files.map((file, index) => (
+              <div
+                onClick={() => handleFileClick(blockKey as BlockType)}
+                className="relative w-full h-screen mx-auto max-w-5xl border-2 rounded-lg p-4 border-pink-500"
+              >
+                <Image
+                  key={`${blockKey}-${index}`}
+                  src={file}
+                  alt={blockKey}
+                  fill
+                  className="w-96 h-96"
+                />
+              </div>
+            ))
+          ) : (
+            <div
+              onClick={() => handleFileClick(blockKey as BlockType)}
+              className="relative w-full h-screen mx-auto max-w-5xl border-2 rounded-lg p-4 border-pink-500"
+            >
+              <Uploader blockType={blockKey as BlockType} />
+            </div>
+          );
+        }
+      })}
     </div>
   );
 }
diff --git a/components/Profile/Blocks/ImageBlock.tsx b/components/Profile/Blocks/ImageBlock.tsx
index ebb790c..91c0f67 100644
--- a/components/Profile/Blocks/ImageBlock.tsx
+++ b/components/Profile/Blocks/ImageBlock.tsx
@@ -1,15 +1,22 @@
 "use client";
+import { useBlock } from "@/hooks/toggle";
 import AdjustLayout from "../../Reusable/AdjustLayout";
 import AltText from "../../Reusable/AltText";
 import MediaUpload from "../../Reusable/MediaUpload";
 import React from "react";
-import useBlock from "../../../hooks/toggle";
 
 export const ImageBlock = () => {
-  const { addBoardBlock } = useBlock();
+  const { boardData } = useBlock();
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
   };
+  let mediaSrcUrl = "";
+  if (Array.isArray(boardData.image)) {
+    mediaSrcUrl = boardData.image[0];
+  } else if (boardData.image && "files" in boardData.image) {
+    mediaSrcUrl = boardData.image.files[0];
+  }
+
   return (
     <div>
       <div className="w-full rounded-lg flex items-center cursor-pointer">
@@ -35,7 +42,11 @@ export const ImageBlock = () => {
         </p>
       </div>
       <div>
-        <MediaUpload />
+        {false ? (
+          <img src={"URL.createObjectURL()"} />
+        ) : (
+          <MediaUpload mediaType="image" mediaSrcUrl={mediaSrcUrl} />
+        )}
         <AltText
           label="Alt Text"
           placeholder="Enter Text..."
diff --git a/components/Profile/FileUploader.tsx b/components/Profile/FileUploader.tsx
index 014ebff..22a4c17 100644
--- a/components/Profile/FileUploader.tsx
+++ b/components/Profile/FileUploader.tsx
@@ -2,7 +2,7 @@
 import Image from "next/image";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import imageIcon from "@/public/images/shotUploadIcon.png";
-import useBlock from "@/hooks/toggle";
+import { useBlock } from "@/hooks/toggle";
 
 interface FileUploaderProps {
   onFilesChange: (files: File[]) => void;
@@ -10,20 +10,26 @@ interface FileUploaderProps {
 
 const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
   const [files, setFiles] = useState<File[]>([]);
-  const fileContainerRef = useRef<HTMLDivElement | null>(null);
-  const { blocks, onOpenBlock, setDrawerOpen } = useBlock();
-
-  useEffect(() => {
-    if (fileContainerRef.current) {
-      // Handle file container logic here
-    }
-  }, [files]);
+  const { onOpenBlock, updateFiles, setDrawerOpen } = useBlock();
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const selectedFiles = Array.from(e.target.files);
       setFiles(selectedFiles);
-      onOpenBlock("image");
+      onFilesChange(selectedFiles);
+
+      // Create object URLs from the selected files
+      const fileUrls = selectedFiles.map((file) => URL.createObjectURL(file));
+
+      const fileType = selectedFiles[0].type.split("/")[0];
+      if (fileType === "image") {
+        onOpenBlock("image");
+        updateFiles("image", fileUrls);
+      } else if (fileType === "video") {
+        onOpenBlock("video");
+        updateFiles("video", fileUrls);
+      }
+
       setDrawerOpen(true);
     }
   };
@@ -34,39 +40,26 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
         htmlFor="dropzone-file"
         className="relative p-3 flex flex-col justify-center w-full max-w-5xl mx-auto h-full border-2 rounded-lg border-gray-300 cursor-pointer"
       >
-        {files.length === 0 ? (
-          <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
-            <div className="flex flex-col items-center justify-center space-y-3">
-              <Image
-                src={imageIcon}
-                alt=""
-                width={80}
-                height={100}
-                className=""
-              />
-              <p className="mb-2 text-gray-500">
-                Drag and drop files, or
-                <span className="border-b-2 pb-0.5 mx-1 border-pink-500">
-                  Browse
-                </span>
-              </p>
-              <p className="text-gray-500">
-                Images (png, jpg, gif) or Videos (mp4)
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div ref={fileContainerRef} className="relative w-full h-full z-30">
-            {blocks.map((block, index) => (
-              <div
-                key={index}
-                className="relative w-full h-full rounded-lg overflow-hidden"
-              >
-                {block.id}
-              </div>
-            ))}
+        <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
+          <div className="flex flex-col items-center justify-center space-y-3">
+            <Image
+              src={imageIcon}
+              alt=""
+              width={80}
+              height={100}
+              className=""
+            />
+            <p className="mb-2 text-gray-500">
+              Drag and drop files, or
+              <span className="border-b-2 pb-0.5 mx-1 border-pink-500">
+                Browse
+              </span>
+            </p>
+            <p className="text-gray-500">
+              Images (png, jpg, gif) or Videos (mp4)
+            </p>
           </div>
-        )}
+        </div>
 
         <input
           id="dropzone-file"
diff --git a/components/Profile/ShotUploadForm.tsx b/components/Profile/ShotUploadForm.tsx
index 313ab19..61939a0 100644
--- a/components/Profile/ShotUploadForm.tsx
+++ b/components/Profile/ShotUploadForm.tsx
@@ -1,17 +1,28 @@
 "use client";
-import React, { RefObject, useRef, useState } from "react";
+import React, { RefObject, useState } from "react";
 
 import { AddBlock } from "./AddBlock";
 import SideDrawer from "./SideDrawer";
 import { Button } from "../Reusable/Button";
 import TooltipButton from "../Reusable/Tooltip";
-import AltText from "../Reusable/AltText";
 import FileUploader from "./FileUploader";
-import useBlock from "@/hooks/toggle";
+import { useBlock } from "@/hooks/toggle";
 import BlockDisplayCard from "./BlockDisplayCard";
 
 export default function ShotUploadForm() {
-  const { blocks, isDrawerOpen } = useBlock();
+  const { isDrawerOpen, setDrawerOpen, boardData } = useBlock();
+
+  const handleDropZone = (files: File[]) => {
+    const selectedFile = files[0];
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      // setFiles([selectedFile]);
+    };
+
+    reader.readAsDataURL(new Blob([selectedFile]));
+  };
+
   return (
     <div className="flex w-full min-w-full max-h-screen">
       <div className="relative flex-grow overflow-y-auto hide-scroll-bar">
@@ -60,19 +71,15 @@ export default function ShotUploadForm() {
                 false ? "mt-3" : "mt-10"
               }`}
             >
-              {/* <FileUploader onFilesChange={handleDropZone} /> */}
-              {blocks.map((block) => (
+              {Object.keys(boardData).length === 0 ? (
+                <FileUploader onFilesChange={handleDropZone} />
+              ) : (
                 <BlockDisplayCard />
-              ))}
+              )}
             </div>
 
             <>
-              <div className="w-8/12 mx-auto mt-8">
-                <AltText
-                  placeholder="Write what went in too this design or add any details you like to mention"
-                  className="max-w-2xl block w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border-2 border-white hover:border-gray-200 bg-white px-5 py-4 text-gray-700 focus:border-pink-300 focus:outline-none focus:ring focus:ring-pink-200 focus:ring-opacity-40"
-                />{" "}
-              </div>
+              <div className="w-8/12 mx-auto mt-8"></div>
               <AddBlock />
             </>
           </form>
diff --git a/components/Reusable/MediaUpload.tsx b/components/Reusable/MediaUpload.tsx
index b946998..867e9c2 100644
--- a/components/Reusable/MediaUpload.tsx
+++ b/components/Reusable/MediaUpload.tsx
@@ -1,23 +1,40 @@
 import React from "react";
 
-export default function MediaUpload() {
+interface MediaUploadProps {
+  mediaType: "image" | "video";
+  mediaSrcUrl: string;
+}
+
+export default function MediaUpload({
+  mediaType,
+  mediaSrcUrl,
+}: MediaUploadProps) {
   return (
     <div>
       <label htmlFor="file" className="block font-medium my-3 py-2 pt-4">
         Media
       </label>
+      <div className="flex flex-col items-center w-full bg-gray-100 max-w-lg p-5 mx-auto text-center border cursor-pointer rounded-lg">
+        {mediaType === "image" ? (
+          <img src={mediaSrcUrl} />
+        ) : (
+          <video src={mediaSrcUrl} />
+        )}
+      </div>
 
-      <label
-        htmlFor="dropzone-file"
-        className="flex flex-col items-center w-full bg-gray-100 max-w-lg p-5 mx-auto text-center border cursor-pointer rounded-lg"
-      >
-        <div className="py-2 px-5 me-2 w-11/12 my-2 font-medium text-sm focus:outline-none bg-white rounded-full border border-gray-200">
-          Select media
-        </div>
+      {!mediaSrcUrl && (
+        <label
+          htmlFor="dropzone-file"
+          className="flex flex-col items-center w-full bg-gray-100 max-w-lg p-5 mx-auto text-center border cursor-pointer rounded-lg"
+        >
+          <div className="py-2 px-5 me-2 w-11/12 my-2 font-medium text-sm focus:outline-none bg-white rounded-full border border-gray-200">
+            Select media
+          </div>
 
-        <p className="text-sm text-gray-500">or drop media to upload</p>
-        <input id="dropzone-file" type="file" className="hidden" />
-      </label>
+          <p className="text-sm text-gray-500">or drop media to upload</p>
+          <input id="dropzone-file" type="file" className="hidden" />
+        </label>
+      )}
     </div>
   );
 }
diff --git a/hooks/toggle.ts b/hooks/toggle.ts
index da2fafd..3034bfe 100644
--- a/hooks/toggle.ts
+++ b/hooks/toggle.ts
@@ -7,78 +7,37 @@ export type BlockType =
   | "video"
   | "pastwork"
   | "gallery";
-export type FileType = "image" | "video";
 
-export interface ImageBlock {
-  id: number;
-  type: "image";
-  items: File[];
-}
-
-export interface TextBlock {
-  id: number;
-  type: "text";
-  items: string[];
-}
-
-export interface VideoBlock {
-  id: number;
-  type: "video";
-  items: File[];
-}
-
-export interface PastWorkBlock {
-  id: number;
-  type: "pastwork";
-  items: File[];
-}
-
-export interface GalleryItem {
-  id: number;
-  items: File[];
-}
-
-export interface GalleryBlock {
-  id: number;
-  type: "gallery";
-  items: GalleryItem[];
-}
-
-export type BlockContents =
-  | ImageBlock
-  | TextBlock
-  | VideoBlock
-  | PastWorkBlock
-  | GalleryBlock;
+type BoardDataType = {
+  [key in BlockType]?:
+    | {
+        files: string[];
+      }
+    | string[];
+};
 
 export interface Block {
   isDrawerOpen: boolean;
   blockType: BlockType | null;
-  isOpen: boolean;
-  blocks: BlockContents[];
+  boardData: BoardDataType;
   onOpenBlock: (type: BlockType) => void;
   setDrawerOpen: (isOpen: boolean) => void;
-  addBoardBlock: (block: BlockContents) => void;
-  removeBoardBlock: (id: number) => void;
+  updateFiles: (type: BlockType, files: string[]) => void;
 }
 
 export const useBlock = create<Block>((set) => ({
   isDrawerOpen: false,
   blockType: null,
-  isOpen: false,
-  blocks: [],
-  onOpenBlock: (type) => set({ isOpen: true, blockType: type }),
+  boardData: {},
+  onOpenBlock: (type) => set({ blockType: type }),
   setDrawerOpen: (isOpen) => set({ isDrawerOpen: isOpen }),
-  addBoardBlock: (block) => {
-    set((state) => ({
-      blocks: [...state.blocks, { ...block, id: state.blocks.length + 1 }],
-    }));
-  },
-  removeBoardBlock: (id) => {
+  updateFiles: (type, files) =>
     set((state) => ({
-      blocks: state.blocks.filter((block) => block.id !== id),
-    }));
-  },
+      boardData: {
+        ...state.boardData,
+        [type]: {
+          files,
+        },
+      },
+    })),
 }));
-
-export default useBlock;
diff --git a/libs/data.ts b/libs/data.ts
new file mode 100644
index 0000000..08fd6f1
--- /dev/null
+++ b/libs/data.ts
@@ -0,0 +1,16 @@
+type BoardDataType = {
+  [key: string]: {
+    files: string[];
+  };
+};
+
+export const boardData: BoardDataType = {
+  image: {
+    files: [
+      "https://images.unsplash.com/photo-1703758435024-c91738662ab8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8",
+    ],
+  },
+  video: {
+    files: [],
+  },
+};