diff --git a/src/assets/tutorial/edge-management.gif b/src/assets/tutorial/edge-management.gif
new file mode 100644
index 00000000..e689ae71
Binary files /dev/null and b/src/assets/tutorial/edge-management.gif differ
diff --git a/src/assets/tutorial/exploration.gif b/src/assets/tutorial/exploration.gif
new file mode 100644
index 00000000..6e3765db
Binary files /dev/null and b/src/assets/tutorial/exploration.gif differ
diff --git a/src/assets/tutorial/inspection.gif b/src/assets/tutorial/inspection.gif
new file mode 100644
index 00000000..454a9f41
Binary files /dev/null and b/src/assets/tutorial/inspection.gif differ
diff --git a/src/assets/tutorial/introduction.gif b/src/assets/tutorial/introduction.gif
new file mode 100644
index 00000000..6686b7df
Binary files /dev/null and b/src/assets/tutorial/introduction.gif differ
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
index b0a547a9..b74c735b 100644
--- a/src/components/Graph/Graph.tsx
+++ b/src/components/Graph/Graph.tsx
@@ -56,7 +56,6 @@ import TransactionTooltip, {
   TransactionTooltipProps,
 } from "./TransactionTooltip";
 
-
 /* Pan on drag settings */
 const panOnDrag = [1, 2];
 
@@ -82,6 +81,7 @@ interface GraphContextProps {
   doLayout: () => void;
   setNodeHighlight: (address: string, highlight: boolean) => void;
   getNodeCount: () => number;
+  setShowTutorial: (show: boolean) => void;
   focusedAddressData: AddressAnalysis | null;
 }
 
@@ -150,7 +150,6 @@ const GraphProvider: FC<GraphProviderProps> = ({
           />
         </ReactFlowProvider>
       </div>
-      <TutorialPopup />
     </>
   );
 };
@@ -546,6 +545,9 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     return nodes.length;
   }
 
+  // Tutorial
+  const [showTutorial, setShowTutorial] = useState<boolean>(false);
+
   // Set up the context
   const graphContext: GraphContextProps = {
     addAddressPaths,
@@ -560,6 +562,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     copyLink,
     setNodeHighlight,
     getNodeCount,
+    setShowTutorial,
     focusedAddressData,
   };
 
@@ -604,7 +607,11 @@ const GraphProvided: FC<GraphProvidedProps> = ({
               aria-hidden="true"
               src="https://tailwindui.com/img/beams-home@95.jpg"
             />
-            <Controls position="top-right" showInteractive={false} />
+            {<Controls position="top-right" showInteractive={false} />}
+            <TutorialPopup
+              showTutorial={showTutorial}
+              setShowTutorial={setShowTutorial}
+            />
             <Background />
             <Panel position="top-left">
               <Legend />
diff --git a/src/components/Graph/Hotbar/Hotbar.tsx b/src/components/Graph/Hotbar/Hotbar.tsx
index 31bdf80b..915b279d 100644
--- a/src/components/Graph/Hotbar/Hotbar.tsx
+++ b/src/components/Graph/Hotbar/Hotbar.tsx
@@ -1,6 +1,11 @@
-import { RectangleGroupIcon, ShareIcon } from "@heroicons/react/24/solid";
+import {
+  RectangleGroupIcon,
+  ShareIcon,
+  MagnifyingGlassPlusIcon,
+  QuestionMarkCircleIcon,
+} from "@heroicons/react/24/outline";
 import { FC, useContext, useMemo, useState } from "react";
-
+import clsx from "clsx";
 import { GraphContext } from "../Graph";
 import ShareDialog from "../LandingPage/ShareDialog";
 
@@ -8,10 +13,48 @@ interface HotbarButton {
   onClick?: () => void;
   Icon: any;
   name: string;
+  className?: string;
+}
+
+const HotbarButton: FC<HotbarButton> = ({ Icon, name, onClick, className }) => {
+  return (
+    <button
+      className={clsx("group flex flex-row items-center", className)}
+      key={name}
+      onClick={onClick}
+    >
+      <Icon className="h-8 w-8 rounded-lg p-1 text-gray-400 transition-all duration-200 hover:bg-gray-700 hover:text-white" />
+      <h1 className="pointer-events-none absolute ml-8 mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+        {name}
+      </h1>
+    </button>
+  );
+};
+
+interface HotbarButtonGroupProps {
+  children: any;
+  className?: string;
 }
 
+const HotbarButtonGroup: FC<HotbarButtonGroupProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center justify-center gap-y-0.5",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
 const Hotbar: FC = () => {
-  const { doLayout, copyLink, getSharingLink } = useContext(GraphContext);
+  const { doLayout, copyLink, getSharingLink, setShowTutorial } =
+    useContext(GraphContext);
 
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
 
@@ -19,44 +62,48 @@ const Hotbar: FC = () => {
 
   const onShareUrl = () => {
     copyLink(shareUrl);
-  }
+  };
 
   const openShareDialog = () => {
     setIsShareDialogOpen(true);
-  }
-
-  const Buttons: HotbarButton[] = [
-    {
-      Icon: RectangleGroupIcon,
-      name: "Organize Layout",
-      onClick: doLayout,
-    },
-    {
-      Icon: ShareIcon,
-      name: "Share",
-      onClick: openShareDialog
-    }
-  ]
+  };
 
   return (
     <>
-      <div className="flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
-        {Buttons.map((button) => {
-          return (
-            <button
-              className="group flex flex-row items-center"
-              key={button.name}
-              onClick={button.onClick}
-            >
-              <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
-              <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
-                {button.name}
-              </h1>
-            </button>
-          );
-        })}
+      <div className="flex h-fit w-fit flex-col gap-y-1 divide-y-2 divide-gray-600 rounded-lg bg-gray-800  p-2">
+        <HotbarButtonGroup>
+          <HotbarButton
+            Icon={MagnifyingGlassPlusIcon}
+            name="Search Address"
+            onClick={() => {}}
+          />
+          <HotbarButton
+            Icon={RectangleGroupIcon}
+            name="Organize Layout"
+            onClick={doLayout}
+          />
+        </HotbarButtonGroup>
+        <HotbarButtonGroup className="pt-1">
+          <HotbarButton
+            Icon={ShareIcon}
+            name="Share"
+            onClick={openShareDialog}
+          />
+          <HotbarButton
+            Icon={QuestionMarkCircleIcon}
+            name="Tutorial"
+            onClick={() => {
+              setShowTutorial(true);
+            }}
+          />
+        </HotbarButtonGroup>
       </div>
-      <ShareDialog shareUrl={shareUrl} isOpen={isShareDialogOpen} setIsOpen={setIsShareDialogOpen} onShareUrl={onShareUrl} />
+      <ShareDialog
+        shareUrl={shareUrl}
+        isOpen={isShareDialogOpen}
+        setIsOpen={setIsShareDialogOpen}
+        onShareUrl={onShareUrl}
+      />
     </>
   );
 };
diff --git a/src/components/common/BigButton.tsx b/src/components/common/BigButton.tsx
index 5a2d00b8..5be838d8 100644
--- a/src/components/common/BigButton.tsx
+++ b/src/components/common/BigButton.tsx
@@ -22,14 +22,11 @@ const BigButton: FC<ButtonProps> = ({ onClick, text, Icon, className }) => {
       type="button"
       onClick={onClick}
       className={clsx(
-        "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+        "flex flex-row items-center justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
         className,
       )}
     >
-      <Icon
-        className="h-5 w-5 rounded-full  text-gray-400"
-        aria-hidden="true"
-      />
+      <Icon className="h-5 w-5  text-gray-400" aria-hidden="true" />
       {text}
     </button>
   );
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 704fd058..4e72db31 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -4,53 +4,49 @@ import { Dialog } from "@headlessui/react";
 import { FC, ReactNode } from "react";
 
 interface ModalProps {
-    isOpen: boolean;
-    closeModal: () => void;
-    children: ReactNode;
+  isOpen: boolean;
+  closeModal: () => void;
+  children: ReactNode;
 }
 
-const Modal: FC<ModalProps> = ({
-    isOpen,
-    closeModal,
-    children
-}) => {
-    return (
-        <>
-            <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as="div" className="relative z-10" onClose={closeModal}>
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black/25" />
-                    </Transition.Child>
+const Modal: FC<ModalProps> = ({ isOpen, closeModal, children }) => {
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/25" />
+          </Transition.Child>
 
-                    <div className="fixed inset-0 overflow-y-auto">
-                        <div className="flex min-h-full items-center justify-center p-4 text-center">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="ease-out duration-300"
-                                enterFrom="opacity-0 scale-95"
-                                enterTo="opacity-100 scale-100"
-                                leave="ease-in duration-200"
-                                leaveFrom="opacity-100 scale-100"
-                                leaveTo="opacity-0 scale-95"
-                            >
-                                <Dialog.Panel className="flex w-full max-w-md transform flex-col divide-y divide-gray-200 overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                                    {children}
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
-                    </div>
-                </Dialog>
-            </Transition>
-        </>
-    );
+          <div className="fixed inset-0 flex items-center justify-center overflow-y-auto">
+            <div className="flex h-fit w-fit items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
 };
 
 export default Modal;
diff --git a/src/components/tutorial/Tutorial.tsx b/src/components/tutorial/Tutorial.tsx
index 274cc5fb..16bb750a 100644
--- a/src/components/tutorial/Tutorial.tsx
+++ b/src/components/tutorial/Tutorial.tsx
@@ -1,135 +1,189 @@
-import clsx from "clsx";
 import { FC, useEffect, useState } from "react";
+import clsx from "clsx";
+import BigButton from "../common/BigButton";
+import {
+  XMarkIcon,
+  RocketLaunchIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+} from "@heroicons/react/24/outline";
+
 import Modal from "../common/Modal";
-import TutorialStepCard, { TutorialStep } from "./TutorialStepCard";
+import TutorialStepCard from "./TutorialStepCard";
 
 interface TutorialProps {
-    show: boolean;
-    setShow: (show: boolean) => void;
-    steps: TutorialStep[];
-    initialStep?: number;
-    className?: string;
+  show: boolean;
+  setShow: (show: boolean) => void;
+  steps: any[];
+  initialStep?: number;
 }
 
 enum SlidesDirection {
-    STILL,
-    NEXT,
-    PREV
+  STILL,
+  NEXT,
+  PREV,
+}
+
+interface ProgressCircleProps {
+  isCompleted: boolean;
+  isCurrent: boolean;
+  onClick: () => void;
+}
+
+const ProgressCircle: FC<ProgressCircleProps> = ({
+  isCompleted,
+  isCurrent,
+  onClick,
+}) => {
+  return (
+    <div
+      className="flex h-4 w-4 cursor-pointer flex-row items-center justify-center align-middle"
+      onClick={onClick}
+    >
+      {isCurrent && (
+        <div className="absolute h-4 w-4 rounded-full bg-blue-200" />
+      )}
+      {
+        <div
+          className={clsx(
+            "absolute h-2 w-2 rounded-full",
+            isCompleted ? "bg-blue-500" : "bg-gray-200",
+          )}
+        />
+      }
+    </div>
+  );
+};
+
+interface ProgressCirclesProps {
+  currentStep: number;
+  totalSteps: number;
+  setCurrentStep: (step: number) => void;
 }
 
+const ProgressCircles: FC<ProgressCirclesProps> = ({
+  currentStep,
+  totalSteps,
+  setCurrentStep,
+}) => {
+  return (
+    <div className="flex flex-row items-center justify-center gap-x-2">
+      {Array.from(Array(totalSteps).keys()).map((step) => {
+        return (
+          <ProgressCircle
+            key={step}
+            isCompleted={step <= currentStep}
+            isCurrent={step === currentStep}
+            onClick={() => {
+              setCurrentStep(step);
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
 const Tutorial: FC<TutorialProps> = ({
-    show: isTutorialOpen,
-    setShow: setIsTutorialOpen,
-    steps,
-    initialStep = 0,
-    className
+  show: isTutorialOpen,
+  setShow: setIsTutorialOpen,
+  steps,
+  initialStep = 0,
 }) => {
-    const [currentStep, setCurrentStep] = useState(initialStep);
+  const [currentStep, setCurrentStep] = useState(initialStep);
 
-    const [slideDirection, setSlideDirection] = useState<SlidesDirection>(SlidesDirection.STILL);
+  const [slideDirection, setSlideDirection] = useState<SlidesDirection>(
+    SlidesDirection.STILL,
+  );
 
-    const onSlideButtonClick = (direction: SlidesDirection) => {
-        setSlideDirection(direction);
-    }
+  const onSlideButtonClick = (direction: SlidesDirection) => {
+    setSlideDirection(direction);
+  };
 
-    const changeSlide = () => {
-        switch (slideDirection) {
-            case SlidesDirection.NEXT:
-                setCurrentStep(currentStep + 1);
-                break;
-            case SlidesDirection.PREV:
-                setCurrentStep(currentStep - 1);
-                break;
-            default:
-                break;
-        }
-        setSlideDirection(SlidesDirection.STILL);
+  const changeSlide = () => {
+    switch (slideDirection) {
+      case SlidesDirection.NEXT:
+        setCurrentStep(currentStep + 1);
+        break;
+      case SlidesDirection.PREV:
+        setCurrentStep(currentStep - 1);
+        break;
+      default:
+        break;
     }
+    setSlideDirection(SlidesDirection.STILL);
+  };
 
-    const closeTutorial = () => {
-        setIsTutorialOpen(false);
-    }
+  const closeTutorial = () => {
+    setIsTutorialOpen(false);
+  };
 
-    useEffect(() => {
-        changeSlide();
-    }, [slideDirection]);
+  useEffect(() => {
+    changeSlide();
+  }, [slideDirection]);
 
-    return (
-        <Modal isOpen={isTutorialOpen} closeModal={closeTutorial}>
-            <div className={className}>
-                <div className="flex justify-end mb-2">
-                    <button
-                        type="button"
-                        className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none"
-                        onClick={closeTutorial}
-                    >
-                        X
-                    </button>
-                </div>
-                <div className="flex flex-col items-center">
-                    <div className="flex justify-center">
-                        <TutorialStepCard
-                            step={steps[currentStep]}
-                            className={clsx(
-                                "transition-all duration-500",
-                                slideDirection === SlidesDirection.NEXT ? "translate-x-full" : "",
-                                slideDirection === SlidesDirection.PREV ? "-translate-x-full" : "",
-                            )}
-                        />
-                    </div>
-                    <div className="flex w-full justify-between mt-4">
-                        {currentStep !== 0
-                            ?
-                            <button
-                                type="button"
-                                className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-400 focus:outline-none"
-                                onClick={() => onSlideButtonClick(SlidesDirection.PREV)}
-                            >
-                                <svg className="-ml-0.5 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                    fill="currentColor" aria-hidden="true">
-                                    <path fillRule="evenodd"
-                                        d="M10.707 3.293a1 1 0 010 1.414L6.414 9H15a1 1 0 010 2H6.414l4.293 4.293a1 1 0
-                                    01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 0z"
-                                        clipRule="evenodd" />
-                                </svg>
-                                Previous
-                            </button>
-                            :
-                            <div />
-                        }
-                        {
-                            currentStep !== steps.length - 1
-                                ?
-                                <button
-                                    type="button"
-                                    className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-400 focus:outline-none"
-                                    onClick={() => onSlideButtonClick(SlidesDirection.NEXT)}
-                                    disabled={currentStep === steps.length - 1}
-                                >
-                                    Next
-                                    <svg className="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                        fill="currentColor" aria-hidden="true">
-                                        <path fillRule="evenodd"
-                                            d="M9.293 16.707a1 1 0 010-1.414L13.586 11H5a1 1 0 010-2h8.586l-4.293
-                                    -4.293a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0
-                                    01-1.414 0z"
-                                            clipRule="evenodd" />
-                                    </svg>
-                                </button>
-                                :
-                                <button
-                                    type="button"
-                                    className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-400 focus:outline-none"
-                                    onClick={closeTutorial}
-                                >
-                                    Done
-                                </button>
-                        }
-                    </div>
-                </div>
-            </div>
-        </Modal >
-    );
-}
+  return (
+    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial}>
+      <div className="w-[30rem]">
+        <div className="mb-2 flex w-full justify-end">
+          <XMarkIcon
+            className="h-7 w-7 cursor-pointer p-1 text-gray-400 hover:text-gray-500 focus:outline-none"
+            aria-hidden="true"
+            onClick={closeTutorial}
+          />
+        </div>
+        <div className="flex w-full flex-col items-center">
+          <div className="flex w-fit flex-row justify-center overflow-hidden">
+            {steps.map((_, index) => {
+              return (
+                <TutorialStepCard
+                  Step={steps[index]}
+                  key={index}
+                  show={index === currentStep}
+                />
+              );
+            })}
+          </div>
+          <div className=" mt-10 flex w-full justify-between">
+            {currentStep !== 0 ? (
+              <BigButton
+                onClick={() => {
+                  onSlideButtonClick(SlidesDirection.PREV);
+                }}
+                text="Previous"
+                Icon={ArrowLeftIcon}
+                className="w-28 ring-0"
+              />
+            ) : (
+              <div className="w-28 ring-0 hover:bg-white" />
+            )}
+            <ProgressCircles
+              currentStep={currentStep}
+              totalSteps={steps.length}
+              setCurrentStep={setCurrentStep}
+            />
+            {currentStep !== steps.length - 1 ? (
+              <BigButton
+                onClick={() => {
+                  onSlideButtonClick(SlidesDirection.NEXT);
+                }}
+                text="Next"
+                Icon={ArrowRightIcon}
+                className="w-28 ring-0 hover:bg-white"
+              />
+            ) : (
+              <BigButton
+                onClick={closeTutorial}
+                text="Done"
+                Icon={RocketLaunchIcon}
+                className="w-28"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
 
 export default Tutorial;
diff --git a/src/components/tutorial/TutorialPopup.tsx b/src/components/tutorial/TutorialPopup.tsx
index 21a0c138..3e799187 100644
--- a/src/components/tutorial/TutorialPopup.tsx
+++ b/src/components/tutorial/TutorialPopup.tsx
@@ -1,115 +1,249 @@
-import { Transition } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/20/solid'
-import { InboxIcon } from '@heroicons/react/24/outline'
-import { FC, Fragment, useState } from 'react'
-import Tutorial from './Tutorial'
+import { Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import {
+  QuestionMarkCircleIcon,
+  RocketLaunchIcon,
+  MagnifyingGlassIcon,
+  PlusCircleIcon,
+  ArrowTrendingUpIcon,
+  FireIcon,
+} from "@heroicons/react/24/outline";
 
-const TutorialPopup: FC = () => {
-    const [show, setShow] = useState(true)
-    const [showTutorial, setShowTutorial] = useState(false);
+import {
+  EyeSlashIcon,
+  CursorArrowRaysIcon,
+  ArrowPathIcon,
+} from "@heroicons/react/16/solid";
 
-    const tutorialSteps = [
-        {
-            title: "Welcome to Ward!",
-            description:
-                "Ward is a decentralized social media platform that allows you to connect with your friends and favorite creators.",
-            image: "https://picsum.photos/200/300"
-        },
-        {
-            title: "Connect your wallet",
-            description:
-                "Ward is a decentralized social media platform that allows you to connect with your friends and favorite creators.",
-            image: "https://picsum.photos/200/300"
-        },
-        {
-            title: "Search for your friends",
-            description:
-                "Ward is a decentralized social media platform that allows you to connect with your friends and favorite creators.",
-            image: "https://picsum.photos/200/300"
-        },
-        {
-            title: "Follow your favorite creators",
-            description:
-                "Ward is a decentralized social media platform that allows you to connect with your friends and favorite creators.",
-            image: "https://picsum.photos/200/300"
-        }
-    ];
+import { FC, Fragment, useState } from "react";
+import Tutorial from "./Tutorial";
 
+import introductionGIF from "../../assets/tutorial/introduction.gif";
+import inspectionGIF from "../../assets/tutorial/inspection.gif";
+import explorationGIF from "../../assets/tutorial/exploration.gif";
+import edgeManagementGIF from "../../assets/tutorial/edge-management.gif";
 
-    return (
-        <>
-            {/* Global notification live region, render this permanently at the end of the document */}
-            <div
-                aria-live="assertive"
-                className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
-            >
-                <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
-                    {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
-                    <Transition
-                        show={show}
-                        as={Fragment}
-                        enter="transform ease-out duration-300 transition"
-                        enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-                        enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-                        leave="transition ease-in duration-100"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-                            <div className="p-4">
-                                <div className="flex items-start">
-                                    <div className="flex-shrink-0">
-                                        <InboxIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
-                                    </div>
-                                    <div className="ml-3 w-0 flex-1 pt-0.5">
-                                        <p className="text-sm font-medium text-gray-900">Need help?</p>
-                                        <p className="mt-1 text-sm text-gray-500">
-                                            Visit our tutorial to learn how to use the graph.
-                                        </p>
-                                        <div className="mt-3 flex space-x-7">
-                                            <button
-                                                type="button"
-                                                className="rounded-md bg-white text-sm font-medium text-blue-500 hover:text-blue-400 focus:outline-none "
-                                                onClick={() => {
-                                                    setShowTutorial(true)
-                                                    setShow(false)
-                                                }}
-                                            >
-                                                Tutorial
-                                            </button>
-                                            <button
-                                                type="button"
-                                                className="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                                                onClick={() => {
-                                                    setShow(false)
-                                                }
-                                                }
-                                            >
-                                                Dismiss
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div className="ml-4 flex flex-shrink-0">
-                                        <button
-                                            type="button"
-                                            className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                                            onClick={() => {
-                                                setShow(false)
-                                            }}
-                                        >
-                                            <span className="sr-only">Close</span>
-                                            <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Transition>
-                </div >
-            </div >
-            <Tutorial show={showTutorial} setShow={setShowTutorial} steps={tutorialSteps} />
-        </>
-    )
+interface TutorialCardTitleProps {
+  title: string;
+  Icon: any;
+  className?: string;
 }
 
-export default TutorialPopup
\ No newline at end of file
+const TutorialCardTitle: FC<TutorialCardTitleProps> = ({
+  title,
+  Icon,
+  className,
+}) => {
+  return (
+    <div className={className}>
+      <div className="flex flex-row items-center gap-x-2">
+        <Icon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+        <h3 className="text-lg font-semibold">{title}</h3>
+      </div>
+    </div>
+  );
+};
+
+const IntroductionCard: FC = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <img
+        src={introductionGIF}
+        alt="Ward Graph Demonstration"
+        className="rounded-lg"
+      />
+      <TutorialCardTitle
+        title="Introducing: Ward Graph"
+        Icon={RocketLaunchIcon}
+      />
+      <p className="text-sm text-gray-600">
+        Ward Graph is a next-gen blockchain graph explorer with a focus on
+        risk-scoring, user experience, and open-source.
+      </p>
+    </div>
+  );
+};
+
+const InspectionCard: FC = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <img
+        src={inspectionGIF}
+        alt="Ward Graph Demonstration"
+        className="rounded-lg"
+      />
+      <TutorialCardTitle title="Inspection" Icon={MagnifyingGlassIcon} />
+      <p className="text-sm text-gray-600">
+        To inspect an address, simply click the address node. You'll be able to
+        see the relationship of the address with other entities.
+      </p>
+    </div>
+  );
+};
+
+const ExplorationCard: FC = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <img
+        src={explorationGIF}
+        alt="Ward Graph Demonstration"
+        className="rounded-lg"
+      />
+      <TutorialCardTitle title="Exploration" Icon={PlusCircleIcon} />
+      <p className="text-sm text-gray-600">
+        To expand to other addresses, you can click the 'Expand' button.
+      </p>
+    </div>
+  );
+};
+
+const EdgeManagementCard: FC = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <img
+        src={edgeManagementGIF}
+        alt="Ward Graph Demonstration"
+        className="rounded-lg"
+      />
+      <TutorialCardTitle title="Edge Management" Icon={ArrowTrendingUpIcon} />
+      <p className="text-sm text-gray-600">
+        There are a lot of transactions on the blockchain!
+        <ul className="mt-3 flex flex-col gap-y-3 pl-3">
+          <li className="flex flex-row items-center gap-x-1">
+            <ArrowPathIcon className="h-4 w-4 text-gray-400" />
+            Only the paths you expand through are shown by default.
+          </li>
+          <li className="flex flex-row items-center gap-x-1">
+            <EyeSlashIcon className="h-4 w-4 text-gray-400" />
+            You can inspect an address to see its hidden 'grayed-out' edges.
+          </li>
+          <li className="flex flex-row items-center gap-x-1">
+            <CursorArrowRaysIcon className="h-4 w-4 text-gray-400" />
+            Click the edges to toggle them on or off.
+          </li>
+        </ul>
+      </p>
+    </div>
+  );
+};
+
+const GoodLuckCard: FC = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <img
+        src={introductionGIF}
+        alt="Ward Graph Demonstration"
+        className="rounded-lg"
+      />
+      <TutorialCardTitle title="Good Luck!" Icon={FireIcon} />
+      <p className="text-sm text-gray-600">
+        That's it! You're ready to explore the blockchain. Good luck!
+      </p>
+    </div>
+  );
+};
+
+interface TutorialPopupProps {
+  showTutorial: boolean;
+  setShowTutorial: (show: boolean) => void;
+}
+
+const TutorialPopup: FC<TutorialPopupProps> = ({
+  showTutorial,
+  setShowTutorial,
+}) => {
+  const [show, setShow] = useState(true);
+
+  const tutorialSteps = [
+    IntroductionCard,
+    InspectionCard,
+    ExplorationCard,
+    EdgeManagementCard,
+    GoodLuckCard,
+  ];
+
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className="pointer-events-none fixed inset-0 z-50 flex items-end px-4 py-6 sm:items-start sm:p-6"
+      >
+        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          <Transition
+            show={show}
+            as={Fragment}
+            enter="transform ease-out duration-300 transition"
+            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+              <div className="p-4">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0">
+                    <QuestionMarkCircleIcon
+                      className="h-6 w-6 text-gray-400"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="ml-3 w-0 flex-1 pt-0.5">
+                    <p className="text-sm font-medium text-gray-900">
+                      Need help?
+                    </p>
+                    <p className="mt-1 text-sm text-gray-500">
+                      Do a 30 second tutorial to learn how to use Ward Graph.
+                    </p>
+                    <div className="mt-3 flex space-x-7">
+                      <button
+                        type="button"
+                        className="rounded-md bg-white text-sm font-medium text-blue-500 hover:text-blue-400 focus:outline-none "
+                        onClick={() => {
+                          setShowTutorial(true);
+                          setShow(false);
+                        }}
+                      >
+                        Tutorial
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        onClick={() => {
+                          setShow(false);
+                        }}
+                      >
+                        Dismiss
+                      </button>
+                    </div>
+                  </div>
+                  <div className="ml-4 flex flex-shrink-0">
+                    <button
+                      type="button"
+                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      onClick={() => {
+                        setShow(false);
+                      }}
+                    >
+                      <span className="sr-only">Close</span>
+                      <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+      <Tutorial
+        show={showTutorial}
+        setShow={setShowTutorial}
+        steps={tutorialSteps}
+      />
+    </>
+  );
+};
+
+export default TutorialPopup;
diff --git a/src/components/tutorial/TutorialStepCard.tsx b/src/components/tutorial/TutorialStepCard.tsx
index 667ffc3a..72790e65 100644
--- a/src/components/tutorial/TutorialStepCard.tsx
+++ b/src/components/tutorial/TutorialStepCard.tsx
@@ -1,30 +1,25 @@
-import { FC } from 'react';
-
-export interface TutorialStep {
-    title: string;
-    description: string;
-    image: string;
-}
+import { Transition } from "@headlessui/react";
+import { FC } from "react";
 
 interface TutorialStepCardProps {
-    step: TutorialStep;
-    className?: string;
+  Step: any;
+  show: boolean;
 }
 
-const TutorialStepCard: FC<TutorialStepCardProps> = ({
-    step,
-    className
-}) => {
-
-    return (
-        <div className={className}>
-            <div className="flex flex-col items-center gap-y-4">
-                <img src={step.image} alt={step.title} className="w-2/3" />
-                <h3 className="text-2xl font-bold">{step.title}</h3>
-                <p className="text-lg text-center">{step.description}</p>
-            </div>
-        </div>
-    );
-}
+const TutorialStepCard: FC<TutorialStepCardProps> = ({ Step, show }) => {
+  return (
+    <Transition
+      appear
+      show={show}
+      enter="ease-out transition-all duration-500"
+      enterFrom="opacity-0 -translate-x-1/2"
+      enterTo="opacity-100 translate-x-0"
+      leave="hidden duration-0"
+      className="h-fit w-fit"
+    >
+      <Step />
+    </Transition>
+  );
+};
 
-export default TutorialStepCard;
\ No newline at end of file
+export default TutorialStepCard;