diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
index 9dcd01d..1a9ba60 100644
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -12,7 +12,6 @@ import CaptureButton from 'src/components/CaptureButton/CaptureButton'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import Gravatar from 'src/components/Gravatar/Gravatar'
 import EditableProjectTitle from 'src/components/EditableProjecTitle/EditableProjecTitle'
-import SocialCardModal from 'src/components/SocialCardModal/SocialCardModal'
 
 const FORK_PROJECT_MUTATION = gql`
   mutation ForkProjectMutation($input: ForkProjectInput!) {
@@ -60,13 +59,15 @@ export default function IdeHeader({
   context: 'ide' | 'profile'
 }) {
   const { currentUser } = useAuth()
-  const { project } = useIdeContext()
+  const { project, state } = useIdeContext()
+  const hasUnsavedChanges = project?.code && state?.code && project?.code !== state?.code
 
   const isProfile = context === 'profile'
   const canEdit =
     (currentUser && currentUser?.sub === project?.user?.id) ||
     currentUser?.roles?.includes('admin')
   const projectOwner = project?.user?.userName
+  const showForkMessage = !canEdit && hasUnsavedChanges
 
   const [createFork] = useMutation(FORK_PROJECT_MUTATION, {
     onCompleted: ({ forkProject }) => {
@@ -203,13 +204,19 @@ export default function IdeHeader({
           </Popover>
           {currentUser?.sub && (
             <TopButton
-              onClick={handleFork}
-              name="Fork"
-              className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-            >
-              <Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" />
+                onClick={handleFork}
+                name="Fork"
+                className={ showForkMessage ? " bg-ch-blue-650 bg-opacity-80 hover:bg-opacity-100 text-ch-gray-300 border-blue-300 border-2"
+                : " bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" }
+              >
+                <Svg name="fork-new" className="w-6 h-6 text-ch-blue-400" />
             </TopButton>
           )}
+          {currentUser?.sub && showForkMessage && (
+            <div className="fixed bg-white w-60 h-10 top-20 right-20 z-10 rounded-md font-bold text-sm flex p-2 items-center">
+              <Svg name="exclamation-circle" className="text-red-400 w-8 h-8 mx-2"/> Fork to save your work
+            </div>
+          )}
         </div>
       </div>
     </>