diff --git a/client/src/components/lib/Canvas.tsx b/client/src/components/lib/Canvas.tsx
index 73f21b9..e549eb9 100644
--- a/client/src/components/lib/Canvas.tsx
+++ b/client/src/components/lib/Canvas.tsx
@@ -1,6 +1,6 @@
 import React, { MouseEvent, useEffect, useRef, FocusEvent } from 'react';
 import { createElement } from '@/lib/canvasElements/canvasElementUtils';
-import { FileIcon } from '@radix-ui/react-icons';
+import { FileIcon, Link2Icon } from '@radix-ui/react-icons';
 import {
   adjustElementCoordinatesById,
   rescalePointsInElem,
@@ -102,6 +102,7 @@ export default function Canvas() {
     isSelectionFrameSet,
     toolOptions,
     attachedFileUrls,
+    attachedUrls,
   } = useCanvasElementStore([
     'addCanvasShape',
     'addCanvasFreehand',
@@ -134,6 +135,7 @@ export default function Canvas() {
     'isSelectionFrameSet',
     'toolOptions',
     'attachedFileUrls',
+    'attachedUrls',
   ]);
 
   const { socket, setWebsocketAction, setRoomID, setTenants, clearTenants } =
@@ -749,6 +751,24 @@ export default function Canvas() {
           </a>
         )}
 
+      {tool === 'select' &&
+        attachedUrls[selectedElementIds[0]] !== undefined && (
+          <a
+            href={attachedUrls[selectedElementIds[0]]}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              zIndex: 10,
+            }}
+          >
+            <Link2Icon />
+          </a>
+        )}
+
       {action === 'writing' && (
         <textarea
           ref={textAreaRef}
diff --git a/client/src/components/lib/ContextMenu.tsx b/client/src/components/lib/ContextMenu.tsx
index 302297f..64ebce6 100644
--- a/client/src/components/lib/ContextMenu.tsx
+++ b/client/src/components/lib/ContextMenu.tsx
@@ -7,6 +7,7 @@ import ContextMenuItem from './ContextMenuItem';
 import { useWebSocketStore } from '@/stores/WebSocketStore';
 import StableDiffusionContextItem from './StableDiffusion/StableDiffusionContextItem';
 import FileUpload from './UploadFilesToFirebase';
+import LinkAttach from './UploadLink';
 import deleteFilefromFirebase from './DeleteFileFromFirebase';
 
 /**
@@ -22,14 +23,18 @@ const ContextMenu = () => {
     selectedElementIds,
     pushCanvasHistory,
     removeAttachedFileUrl,
+    removeAttachedUrl,
     attachedFileUrls,
+    attachedUrls,
   } = useCanvasElementStore([
     'removeCanvasElements',
     'setSelectedElements',
     'selectedElementIds',
     'pushCanvasHistory',
     'removeAttachedFileUrl',
+    'removeAttachedUrl',
     'attachedFileUrls',
+    'attachedUrls',
   ]);
 
   const { setWebsocketAction } = useWebSocketStore(['setWebsocketAction']);
@@ -62,26 +67,50 @@ const ContextMenu = () => {
             </ContextMenuItem>
             <ExportSelectedPNGContextItem />
             <StableDiffusionContextItem />
-            <FileUpload />
 
-            <ContextMenuItem
-              onClick={() => {
-                const ids = selectedElementIds;
-                setSelectedElements([]);
-                const link = attachedFileUrls[selectedElementIds[0]];
-                if (link !== undefined) {
-                  deleteFilefromFirebase(link);
-                }
-                removeAttachedFileUrl(ids); //Don't want users to be able to undo deletion
-                setWebsocketAction(ids, 'removeAttachedFileUrl');
-              }}
-              className="text-red-700"
-            >
-              Delete File{' '}
-              <div className="ml-auto pl-5 text-red-700 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-                <TrashIcon />
-              </div>
-            </ContextMenuItem>
+            {attachedUrls[selectedElementIds[0]] === undefined && (
+              <FileUpload />
+            )}
+            {attachedUrls[selectedElementIds[0]] === undefined && (
+              <ContextMenuItem
+                onClick={() => {
+                  const ids = selectedElementIds;
+                  setSelectedElements([]);
+                  const link = attachedFileUrls[selectedElementIds[0]];
+                  if (link !== undefined) {
+                    deleteFilefromFirebase(link);
+                  }
+                  removeAttachedFileUrl(ids); //Don't want users to be able to undo deletion
+                  setWebsocketAction(ids, 'removeAttachedFileUrl');
+                }}
+                className="text-red-700"
+              >
+                Delete Attached File{' '}
+                <div className="ml-auto pl-5 text-red-700 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                  <TrashIcon />
+                </div>
+              </ContextMenuItem>
+            )}
+
+            {attachedFileUrls[selectedElementIds[0]] === undefined && (
+              <LinkAttach />
+            )}
+            {attachedFileUrls[selectedElementIds[0]] === undefined && (
+              <ContextMenuItem
+                onClick={() => {
+                  const ids = selectedElementIds;
+                  setSelectedElements([]);
+                  removeAttachedUrl(ids);
+                  setWebsocketAction(ids, 'removeAttachedUrl');
+                }}
+                className="text-red-700"
+              >
+                Delete Attatched Link{' '}
+                <div className="ml-auto pl-5 text-red-700 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                  <TrashIcon />
+                </div>
+              </ContextMenuItem>
+            )}
           </>
         ) : null}
       </RadixContextMenu.Content>
diff --git a/client/src/components/lib/DeleteFileFromFirebase.tsx b/client/src/components/lib/DeleteFileFromFirebase.tsx
index 8c5fc00..fd91611 100644
--- a/client/src/components/lib/DeleteFileFromFirebase.tsx
+++ b/client/src/components/lib/DeleteFileFromFirebase.tsx
@@ -22,10 +22,10 @@ function deleteFilefromFirebase(downloadURL: string) {
   const fileRef = ref(storage, filePath);
   deleteObject(fileRef)
     .then(() => {
-      console.log('File deleted successfully'); //Will replace with toast next sprint
+      console.log('File deleted successfully');
     })
     .catch((error) => {
-      console.error('Error deleting file: ', error); //Will replace with toast next sprint
+      console.error('Error deleting file: ', error);
     });
 }
 
diff --git a/client/src/components/lib/UploadFilesToFirebase.tsx b/client/src/components/lib/UploadFilesToFirebase.tsx
index 9004b0e..4bcfb93 100644
--- a/client/src/components/lib/UploadFilesToFirebase.tsx
+++ b/client/src/components/lib/UploadFilesToFirebase.tsx
@@ -1,20 +1,16 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage';
 import { firebaseApp } from '../../firebaseDB/firebase';
 import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
-import { useWebSocketStore } from '@/stores/WebSocketStore';
+import { useToast } from '@/components/ui/use-toast';
 
-/**
- * Defines a context menu option that allows users to attatch a file to a
- * canvas element by uploading it to firebase
- * @author Dana El Sherif
- */
 const FileUpload = () => {
   const { selectedElementIds, updateAttachedFileUrl } = useCanvasElementStore([
     'selectedElementIds',
     'updateAttachedFileUrl',
   ]);
-  const { setWebsocketAction } = useWebSocketStore(['setWebsocketAction']);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { toast } = useToast();
 
   const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
@@ -25,25 +21,42 @@ const FileUpload = () => {
       const storageRef = ref(storage, `uploads/${fileToUpload.name}`);
       uploadBytes(storageRef, fileToUpload)
         .then((snapshot) => {
-          alert('File uploaded successfully');
+          toast({
+            title: 'Success',
+            description: 'File uploaded successfully',
+          });
           return getDownloadURL(snapshot.ref);
         })
         .then((downloadURL) => {
           updateAttachedFileUrl(selectedElementIds[0], downloadURL);
-          setWebsocketAction(
-            { selectedElementIds, downloadURL },
-            'addAttachedFileUrl',
-          );
         })
         .catch(() => {
-          alert('Error uploading');
+          toast({
+            title: 'Error',
+            description: 'Error uploading file',
+          });
         });
     }
   };
 
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
   return (
-    <div className="ml-auto pl-5 text-violet-500 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-      <input type="file" onChange={onFileChange} />
+    <div className="ml-auto pl-6 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+      <input
+        type="file"
+        onChange={onFileChange}
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+      />
+      <span
+        onClick={triggerFileInput}
+        className="cursor-pointer text-[13px] leading-none text-violet-500"
+      >
+        Choose File
+      </span>
     </div>
   );
 };
diff --git a/client/src/components/lib/UploadLink.tsx b/client/src/components/lib/UploadLink.tsx
new file mode 100644
index 0000000..c425bb3
--- /dev/null
+++ b/client/src/components/lib/UploadLink.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
+import { useToast } from '@/components/ui/use-toast';
+/**
+ * Component that allows users to attach a link to a canvas element.
+ * Modified to prompt for link input on button click.
+ * @author Dana El Sherif
+ */
+const LinkAttach = () => {
+  const { selectedElementIds, updateAttachedUrl } = useCanvasElementStore([
+    'selectedElementIds',
+    'updateAttachedUrl',
+  ]);
+  const { toast } = useToast();
+
+  const attachLink = () => {
+    if (selectedElementIds.length > 0) {
+      const link = window.prompt('Enter link:');
+      if (link !== null && link !== '') {
+        updateAttachedUrl(selectedElementIds[0], link);
+        toast({
+          title: 'Link Attached',
+          description: 'Link has been successfully attached.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className="ml-auto pl-6 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+      <button
+        onClick={attachLink}
+        className="cursor-pointer text-[13px] leading-none text-violet-500"
+      >
+        Attach Link
+      </button>
+    </div>
+  );
+};
+
+export default LinkAttach;
diff --git a/client/src/stores/CanvasElementsStore.ts b/client/src/stores/CanvasElementsStore.ts
index 898bd6e..f93aaeb 100644
--- a/client/src/stores/CanvasElementsStore.ts
+++ b/client/src/stores/CanvasElementsStore.ts
@@ -35,6 +35,7 @@ export interface CanvasElement {
   angle: number; // Element orientation, in radians
   id: string; // Element id
   attachedFileUrl?: string; //Attatched file link
+  attachedUrl?: string; //Attatche link
 }
 
 //Default customizability options
@@ -79,6 +80,7 @@ export interface CanvasElementState {
   angles: Record<string, CanvasElement['angle']>;
   toolOptions: ToolOptions;
   attachedFileUrls: Record<string, CanvasElement['attachedFileUrl']>;
+  attachedUrls: Record<string, CanvasElement['attachedUrl']>;
 }
 
 interface CanvasElementActions {
@@ -97,6 +99,8 @@ interface CanvasElementActions {
   resetCanvas: () => void;
   updateAttachedFileUrl: (id: string, url: string) => void;
   removeAttachedFileUrl: (ids: string[]) => void;
+  updateAttachedUrl: (id: string, url: string) => void;
+  removeAttachedUrl: (ids: string[]) => void;
   redoCanvasHistory: () => void;
   setCanvasElementState: (element: CanvasElementState) => void;
   setSelectionFrame: (
@@ -117,6 +121,7 @@ export const initialCanvasElementState: CanvasElementState = {
   strokeColors: {},
   fillColors: {},
   attachedFileUrls: {},
+  attachedUrls: {},
   fontFamilies: {},
   fontSizes: {},
   bowings: {},
@@ -182,13 +187,14 @@ const addCanvasShape =
       const isImagePlaceds = { ...state.isImagePlaceds };
       const angles = { ...state.angles };
       const attachedFileUrls = { ...state.attachedFileUrls };
-
+      const attachedUrls = { ...state.attachedUrls };
       const {
         id,
         type,
         strokeColor,
         fillColor,
         attachedFileUrl,
+        attachedUrl,
         fontFamily,
         fontSize,
         bowing,
@@ -210,6 +216,7 @@ const addCanvasShape =
       strokeColors[id] = strokeColor;
       fillColors[id] = fillColor;
       attachedFileUrls[id] = attachedFileUrl;
+      attachedUrls[id] = attachedUrl;
       fontFamilies[id] = fontFamily;
       fontSizes[id] = fontSize;
       bowings[id] = bowing;
@@ -232,6 +239,7 @@ const addCanvasShape =
         strokeColors,
         fillColors,
         attachedFileUrls,
+        attachedUrls,
         fontFamilies,
         fontSizes,
         bowings,
@@ -362,6 +370,12 @@ const editCanvasElement =
             [id]: partialElement.attachedFileUrl,
           }
         : state.attachedFileUrls;
+      const attachedUrls = partialElement.attachedUrl
+        ? {
+            ...state.attachedUrls,
+            [id]: partialElement.attachedUrl,
+          }
+        : state.attachedUrls;
       const bowings = partialElement.bowing
         ? { ...state.bowings, [id]: partialElement.bowing }
         : state.bowings;
@@ -448,6 +462,7 @@ const editCanvasElement =
         strokeColors,
         fillColors,
         attachedFileUrls,
+        attachedUrls,
         fontFamilies,
         fontSizes,
         bowings,
@@ -497,6 +512,29 @@ const removeAttachedFileUrl =
       };
     });
 
+///Attatches link to canvas element
+const updateAttachedUrl =
+  (set: SetState<CanvasElementState>) => (id: string, url: string) =>
+    set((state) => {
+      const updatedAttachedUrls = { ...state.attachedUrls, [id]: url };
+      return { ...state, attachedUrls: updatedAttachedUrls };
+    });
+
+//Deletes attatched link from canvas element
+const removeAttachedUrl =
+  (set: SetState<CanvasElementState>) => (ids: string[]) =>
+    set((state) => {
+      const attachedUrls = { ...state.attachedUrls };
+      ids.forEach((id) => {
+        delete attachedUrls[id];
+      });
+
+      return {
+        ...state,
+        attachedUrls,
+      };
+    });
+
 /**
  * Removes the canvas element with the specfied state
  * from the store.
@@ -511,6 +549,7 @@ const removeCanvasElements =
       const strokeColors = { ...state.strokeColors };
       const fillColors = { ...state.fillColors };
       const attachedFileUrls = { ...state.attachedFileUrls };
+      const attachedUrls = { ...state.attachedUrls };
       const fontFamilies = { ...state.fontFamilies };
       const fontSizes = { ...state.fontSizes };
       const bowings = { ...state.bowings };
@@ -531,6 +570,7 @@ const removeCanvasElements =
         delete strokeColors[id];
         delete fillColors[id];
         delete attachedFileUrls[id];
+        delete attachedUrls[id];
         delete fontFamilies[id];
         delete fontSizes[id];
         delete bowings[id];
@@ -553,6 +593,7 @@ const removeCanvasElements =
         strokeColors,
         fillColors,
         attachedFileUrls,
+        attachedUrls,
         fontFamilies,
         fontSizes,
         bowings,
@@ -680,6 +721,8 @@ const canvasElementStore = create<CanvasElementStore>()((set) => ({
   setToolOptions: setToolOptions(set),
   updateAttachedFileUrl: updateAttachedFileUrl(set),
   removeAttachedFileUrl: removeAttachedFileUrl(set),
+  updateAttachedUrl: updateAttachedUrl(set),
+  removeAttachedUrl: removeAttachedUrl(set),
 }));
 export const useCanvasElementStore =
   createStoreWithSelectors(canvasElementStore);